Angular 테스트 방법모카를 이용한 JS코드?
기본적으로 Mocha(수천 개의 유닛 테스트 작성)는 꽤 경험이 있고, AngularJS(첫 번째 프로젝트 작성만)는 꽤 초보입니다.
이제 나는 어떻게 모든 Angular를 유닛으로 테스트할지 궁금하다.모카를 이용한 JS.
Mocha가 브라우저에서 실행된다는 것을 알고 있으며, 이미 실행했습니다.하지만 어떻게 구조화 및 셋업을 해야 할까요?
다음 사항이 필요할 것 같습니다.
- 로드 각도JS
- 모카 로드
- 테스트 로드
각 테스트에서 테스트할 컨트롤러와 서비스를 로드해야 합니다.그걸 어떻게 하는 거죠?require.js 등의 파일은 기본적으로 다음과 같은 내용을 가진 스크립트 파일일 뿐입니다.
angular.controller('fooController', [ '$scope', function ($scope) {
// ...
}]);
테스트에서 컨트롤러를 참조하고 인스턴스화하려면 어떻게 해야 합니까?서비스, 지침 등에 대해서도 마찬가지입니다.
Mock을 작성해야 합니까?$scope,$http아니면 도움이 필요하신가요?
Karma 테스트 러너(이전의 Testacular)가 있는 것은 알고 있습니다만, 테스트 러너를 완전히 바꾸고 싶지는 않습니다.
이를 위한 한 가지 방법은Angular $injector 테스트:
myModule_test.js
suite('myModule', function(){
setup(function(){
var app = angular.module('myModule', []);
var injector = angular.injector(['myModule', 'ng']);
var service = injector.get('myService');
});
suite('myService', function(){
test('should return correct value', function(){
// perform test with an instance of service here
});
});
});
당신의.html다음과 같이 표시되어야 합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>myModule tests</title>
<link rel="stylesheet" media="all" href="vendor/mocha.css">
</head>
<body>
<div id="mocha"><p><a href=".">Index</a></p></div>
<div id="messages"></div>
<div id="fixtures"></div>
<script src="vendor/mocha.js"></script>
<script src="vendor/chai.js"></script>
<script src="angular.min.js"></script>
<script src="myModule.js"></script>
<script>mocha.setup('tdd')</script>
<script src="myModule_test.js"></script>
<script>mocha.run();</script>
</body>
</html>
종속성이 없고 특정 각도가 아닌 각 서비스를 작성하는 경우 각도에 구애받지 않고 모듈을 작성한 후 별도의 작은 각지 래퍼를 작성하거나 각지의 존재 여부를 테스트하고 조건부로 서비스를 생성할 수 있습니다.
다음으로 mocha 테스트를 포함하여 각도 모듈, 브라우저 모듈 및 노드모듈에서 모두 사용할 수 있는 모듈을 작성하기 위해 사용하는 접근법의 예를 나타냅니다.
(function(global) {
//define your reusable component
var Cheeseburger = {};
if (typeof angular != 'undefined') {
angular.module('Cheeseburger', [])
.value('Cheeseburger', Cheeseburger);
}
//node module
else if (typeof module != 'undefined' && module.exports) {
module.exports = Cheeseburger
}
//perhaps you'd like to use this with a namespace in the browser
else if (global.YourAppNamespace) {
global.YourAppNamespace.Cheeseburger = Cheeseburger
}
//or maybe you just want it to be global
else {
global.Cheeseburger = Cheeseburger
}
})(this);
언급URL : https://stackoverflow.com/questions/16293794/how-do-i-test-angularjs-code-using-mocha
'codememo' 카테고리의 다른 글
| Flask jsonify가 데이터를 정렬하지 못하도록 합니다. (0) | 2023.03.04 |
|---|---|
| Angular에서 $resource 메서드에 대한 콜백을 추가하는 방법JS (0) | 2023.03.04 |
| 반응 재료 UI 레이블이 텍스트와 겹침 (0) | 2023.03.04 |
| td에서 정렬 버튼의 중심을 맞추는 중 (0) | 2023.03.04 |
| ASP 취득 방법UpdateTargetId에 뷰를 삽입하는 대신 새 페이지로 리디렉션하는 NET MVC Ajax 응답 (0) | 2023.03.04 |