AngularJS는 jQuery 이후 JavaScript에 일어난 가장 좋은 일입니다. 이것이 JavaScript 개발이 항상 의도했던 방식입니다. Angular의 주요 장점 중 하나는 종속성 주입(종속성 주입)으로, 이는 코드 단위 테스트에 매우 편리합니다. 그런데 조금 이상한 점은 단위 테스트를 수행하는 방법에 대한 튜토리얼을 찾을 수 없다는 것입니다.
물론 Jasmine 테스트 프레임워크와 Karma 테스트 실행기(Test Runner)를 사용하는 등 좋은 권장 사항이 많이 있지만 처음부터 테스트하는 방법에 대한 완전한 튜토리얼은 없습니다. 그래서 이 글을 썼습니다. 나는 그것을 수행하는 방법을 알아내기 위해 온라인에서 많은 리소스를 찾았으며 지금은 그 어떤 것도 수행할 필요가 없습니다(처음에 이 기사를 읽었다면).
이것이 Karma 및 Jasmine을 기반으로 하는 Angular 앱을 테스트하는 모범 사례라고 말할 수 있을 때까지 오류가 나타나면 알려주시기 바랍니다.
소개
이 문서에서는 자동화된 테스트를 위해 Karma와 Jasmine을 사용하는 데 필요한 모든 도구를 설치하는 방법을 안내합니다. 실제로 TDD(Test Driven Development)를 사용하든 TAD(Test Assisted Development)를 사용하든 상관없습니다. 이 기사에서는 테스트할 파일이 이미 있다고 가정합니다.
Karma 설치
Node.js가 설치되어 있지 않은 경우 직접 다운로드하여 설치하시기 바랍니다. 설치 후 터미널이나 명령줄을 열고 다음 명령을 입력하세요.
npm install -g karma
파일 구조
파일 구조는 우리 주제와 밀접한 관련은 없지만, 다음 테스트에서 제가 사용한 파일 구조는 다음과 같습니다.
Application | angular.js | angular-resource.js | Home | home.js | Tests | Home | home.tests.js | karma.config.js (will be created in the next step) | angular-mocks.js
*이 문서 구조를 옹호하는 것은 아니며 단지 테스트 예시로 보여드리는 것입니다.
Karma 구성
구성 파일을 저장할 디렉터리로 전환한 후 터미널에 다음 명령을 입력하여 구성 파일을 만듭니다.
karma init karma.config.js
사용하려는 테스트 프레임워크, 자동 모니터링 파일이 필요한지 여부, 어떤 테스트 및 테스트된 파일이 포함되어 있는지 등 몇 가지 질문을 받게 됩니다. 튜토리얼에서는 'Jasmine'을 기본 프레임워크로 유지하고 자동 파일 감지를 활성화하며 다음 파일을 포함합니다.
../*.js ../**.*.js angular-mocks.js **/*.tests.js
다음은 1) 상위 디렉터리에 있는 모든 .js 파일, 2) 상위 디렉터리 아래의 모든 하위 디렉터리에 있는 모든 .js 파일, 3) 현재 디렉터리에 있는 angle-mock.js, 4) 및 모든 항목을 포함한 상대 경로입니다. .tests.js 파일은 현재 디렉터리(하위 디렉터리 포함)에 있습니다(저는 이런 방식으로 테스트 파일을 다른 파일과 구별하는 것을 좋아합니다).
어떤 파일을 선택하든지 angle.js, angle-mock.js 및 사용해야 하는 기타 파일을 포함했는지 확인하세요.
카르마 시작
이제 Karma를 시작할 수 있습니다. 여전히 터미널에 입력하세요.
karma start karma.config.js
이 명령은 컴퓨터의 구성 파일에 나열된 브라우저를 실행합니다. 이러한 브라우저는 소켓을 통해 Karma 인스턴스에 연결되며 활성 브라우저 목록이 표시되고 테스트 실행 여부에 대한 알림을 받게 됩니다. Karma가 각 브라우저의 최종 테스트 결과 요약을 제공했으면 좋겠지만(예: 16개 중 15개 통과, 1개 실패) 안타깝게도 이 정보는 터미널 창을 통해서만 볼 수 있습니다.
Karma의 뛰어난 기능 중 하나는 네트워크의 모든 장치를 사용하여 코드를 연결하고 테스트할 수 있다는 것입니다. 모바일 브라우저에서 Karma 서비스를 지정해 보세요. 컴퓨터에서 실행되는 모든 브라우저에서 테스트 URL을 찾을 수 있습니다. http://localhost:9876/?id=5359192와 같아야 합니다. 휴대폰, 가상 머신 또는 기타 장치의 브라우저를 [네트워크의 IP 주소]:9876/?id=5359192로 지정할 수 있습니다. Karma는 Node.js 인스턴스를 실행하므로 테스트 머신은 웹과 같습니다. 서버를 가리키는 모든 브라우저로 테스트가 전송됩니다.
기본 테스트
테스트할 파일이 이미 있다고 가정합니다. 우리가 사용하려는 home.js 파일은 다음과 같습니다.
home.js
'use strict';
var app = angular.module('Application', ['ngResource']);
app.factory('UserFactory', function($resource){
return $resource('Users/users.json')
});
app.controller('MainCtrl', function($scope, UserFactory) {
$scope.text = 'Hello World!';
$scope.users = UserFactory.get();
});
home.test.js 파일에서 테스트 케이스를 생성할 수 있습니다. 간단한 테스트부터 시작해 보겠습니다. $scope.text는 'Hello World!'와 같아야 합니다. 이 테스트를 완료하려면 애플리케이션 모듈과 $scope 변수를 모의해야 합니다. Jasmine의 beforeEach 메소드에서 이 작업을 수행하여 각 테스트 케이스 시작 시 완전히 새로운(깨끗한) 컨트롤러와 범위 객체를 갖게 됩니다.
home.tests.js
'use strict';
describe('MainCtrl', function(){
var scope;
//我们会在测试中使用这个scope
//模拟我们的Application模块并注入我们自己的依赖
beforeEach(angular.mock.module('Application'));
//模拟Controller，并且包含 $rootScope 和 $controller
beforeEach(angular.mock.inject(function($rootScope, $controller){
//创建一个空的 scope
scope = $rootScope.$new();
//声明 Controller并且注入已创建的空的 scope
$controller('MainCtrl', {$scope: scope});
});
// 测试从这里开始
});
코드 외부에서 정보의 유효성을 검사할 수 있도록 자체 범위를 삽입하는 것을 볼 수 있습니다. 또한, 모듈 자체를 모의하는 것을 잊지 마세요(라인 7)! 이제 테스트할 준비가 되었습니다.
home.tests.js
// 测试从这里开始
it('should have variable text = "Hello World!"', function(){
expect(scope.text).toBe('Hello World!);
});
如果你运行这个测试，它可以在任何指向Karma的浏览器中执行，并且测试通过。
发送$resource请求
现在我们已经准备好测试 $resource 请求。要完成这个请求，我们需要使用到 $httpBackend， 它一个模拟版本的Angular $http。我们会创建另一个叫做 $httpBackend 的变量，在第二个 beforEach块中，注入 _$httpBackend_ 并将新创建的变量指向 _$httpBackend_。接下来我们会告诉 $httpBackend 如何对请求做出响应。
$httpBackend = _$httpBackend_;
$httpBackend.when('GET', 'Users/users.json').respond([{id: 1, name: 'Bob'}, {id:2, name: 'Jane'}]);
我们的测试： home.tests.js
it('should fetch list of users', function(){
$httpBackend.flush();
expect(scope.users.length).toBe(2);
expect(scope.users[0].name).toBe('Bob');
});
都放到一起
home.tests.js
'use strict';
describe('MainCtrl', function(){
var scope, $httpBackend;
//we'll use these in our tests
//mock Application to allow us to inject our own dependencies
beforeEach(angular.mock.module('Application'));
//mock the controller for the same reason and include $rootScope and $controller
beforeEach(angular.mock.inject(function($rootScope, $controller, _$httpBackend_){
$httpBackend = _$httpBackend_;
$httpBackend.when('GET', 'Users/users.json').respond([{id: 1, name: 'Bob'}, {id:2, name: 'Jane'}]);
//create an empty scope
scope = $rootScope.$new();
//declare the controller and inject our empty scope
$controller('MainCtrl', {$scope: scope});
});
// tests start here
it('should have variable text = "Hello World!"', function(){
expect(scope.text).toBe('Hello World!');
});
it('should fetch list of users', function(){
$httpBackend.flush();
expect(scope.users.length).toBe(2);
expect(scope.users[0].name).toBe('Bob');
});
});
技巧
Karma会运行所有文件中的所有测试用例，如果你只想运行所有测试的一个子集，修改 describe 或 it 为 ddescribe 或 iit 来运行个别的一些测试。如果有些测试你不想运行他们，那么修改 describe 或 it 为 xdescribe 或 xit 来忽略这些代码。
你也可以在html文件的页面上运行你的测试。举例的代码如下：
home.runner.html
<!DOCTYPE html> <html> <head> <title>Partner Settings Test Suite</title> <!-- include your script files (notice that the jasmine source files have been added to the project) --> <script type="text/javascript" src="../jasmine/jasmine-1.3.1/jasmine.js"></script> <script type="text/javascript" src="../jasmine/jasmine-1.3.1/jasmine-html.js"></script> <script type="text/javascript" src="../angular-mocks.js"></script> <script type="text/javascript" src="home.tests.js"></script> <link rel="stylesheet" href="../jasmine/jasmine-1.3.1/jasmine.css"/> </head> <body> <!-- use Jasmine to run and display test results --> <script type="text/javascript"> var jasmineEnv = jasmine.getEnv(); jasmineEnv.addReporter(new jasmine.HtmlReporter()); jasmineEnv.execute(); </script> </body> </html>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
