Jasmine & Karma를 사용하여 AngularJS 앱용 단위 테스트 작성 및 실행
jasmine으로 단위 테스트를 작성하는 방법, karma로 실행하는 방법, 필터, 컨트롤러 등과 같은 AngularJS 컨트롤의 프록시를 만드는 방법을 알아보세요.
Dhananjay Kumar
11min read
참고: 이 게시물에서는 Visual Studio를 사용하여 AngularJS 애플리케이션 및 단위 테스트를 작성하는 방법을 보여주지만 이러한 방법을 사용하여 모든 IDE에 대한 테스트 환경을 구성할 수 있습니다.
이 게시물에서는 다음 주제를 다룹니다.
- 개발 환경 설정
- 재스민을 위한 테스트 환경 설정
- Setting up the karma test runner environment
- 필터, 컨트롤러 및 서비스에 대한 단위 테스트 작성
npm을 사용하여 종속성을 설치하고 Visual Studio를 사용하여 코드를 작성하고 명령 프롬프트에서 karma를 사용하여 테스트를 실행합니다. 게시물의 끝에서 아래 이미지와 같이 테스트를 실행해야 합니다.
So let’s get started!
Step 1
Visual Studio에서 빈 템플릿 프로젝트 형식을 선택하여 ASP.NET 웹 애플리케이션 프로젝트를 만듭니다.
Visual Studio에서 AngularJS 프로젝트를 만들고 있지만 원하는 IDE를 사용하여 프로젝트를 만들 수 있습니다. 명심해야 할 유일한 것은 여기에서 실행할 모든 명령은 프로젝트의 루트 폴더 내에서 실행되어야 한다는 것입니다.
Step 2
프로젝트가 생성되면 관리자 권한으로 명령 프롬프트를 시작하고 디렉토리를 생성된 프로젝트 폴더의 루트 폴더로 변경합니다. Visual Studio의 경우 디렉터리를 솔루션 폴더가 아닌 프로젝트 폴더로 변경합니다.
예를 들어, 내가 사용하고있는 폴더 구조는 다음과 같습니다.
- AngularJSUnitTestDemo : Solution Folder
- AngularJSUnitTestDemo : 프로젝트의 루트 폴더. 그래서 우리는 여기를 탐색했습니다.
Step 3
NodeJS가 시스템에 설치되어 있는지 확인해야 합니다. 설치되어 있지 않으면 https://nodejs.org/en/에서 다운로드하여 설치하십시오. 다음 명령을 실행하여 NodeJS가 설치되어 있는지 여부를 확인할 수 있습니다.
- node –version
NodeJS 버전을 출력으로 가져오면 NodeJS가 시스템에 설치됩니다.
이 단계에서는 NodeJS를 설치하고 검증했습니다.
Step 4
다음으로 프로젝트에 AngularJS를 설치해 보겠습니다. 그렇게하는 다양한 방법 (NuGet 패키지, Bower 등)이 있지만 프로젝트에 AngularJS를 설치하기 위해 NPM을 선택하고 있습니다. 설치하려면 아래와 같이 npm 명령을 실행합니다.
- npm install angular –save
이 단계에서는 프로젝트에 AngularJS를 설치했습니다.
Step 5
이제 Karma 테스트 러너를 사용하여 테스트를 실행할 것입니다. Karma에 대한 자세한 내용은 여기를 참조하십시오 https://karma-runner.github.io/1.0/index.html Angular 팀에서 만든 Karma는 사양 기반 테스트 러너입니다. Karma를 설치하려면 아래와 같이 명령을 실행하십시오.
- npm install -g karma –save-dev
이 단계에서는 프로젝트에 Karma를 설치했습니다.
Step 6
우리는 Jasmine, 행동 기반 JavaScript 테스트 프레임 워크를 사용하여 단위 테스트를 작성할 것입니다. 여기에서 재스민에 대해 자세히 알아보세요 http://jasmine.github.io
재스민 코어와 재스민 카르마를 설치합니다. 설치하려면 아래와 같이 명령을 실행하십시오.
- npm install karma-jasmine jasmine-core –save-dev
이 단계에서는 프로젝트에 jasmine core와 jasmine karma 플러그인을 설치했습니다.
Step 7
ngMock 모듈을 사용하여 AngularJS 서비스, 모듈, 컨트롤러, 필터 등을 모의합니다. ngMock을 사용하려면 프로젝트에 angular-mocks 라이브러리를 설치해야 합니다. 이렇게 하려면 아래와 같이 명령을 실행합니다.
- npm install angular-mocks –save-dev
이 단계에서는 프로젝트에 angular-mocks 라이브러리를 설치했습니다.
Step 8
Karma를 사용하면 여러 브라우저에서 테스트를 실행할 수 있습니다. 이렇게 하려면 다른 브라우저 플러그인을 설치해야 합니다. 이 예에서는 Chrome에서 테스트를 실행하고 싶으므로 다음과 같이 Chrome 브라우저 플러그인을 설치하겠습니다.
- npm install karma-chrome-launcher –save-dev
이 단계에서는 Chrome 브라우저 카르마 런처를 설치했습니다. 원하는 경우 다른 브라우저 런처도 설치할 수 있습니다.
Step 9
비즈니스 요구 사항을 준수하는 프로젝트에 대한 모든 폴더 구조를 가질 수 있습니다. 그러나 이 게시물의 목적을 위해 간단하게 유지하겠습니다. app과 tests라는 두 개의 폴더를 만들겠습니다. app 폴더는 모든 Angular 스크립트 파일과 tests 폴더를 유지하여 모든 테스트를 유지합니다. 이러한 폴더를 만들려면 아래와 같이 명령을 실행합니다.
- md app
- MD 테스트
Step 10
이 단계는 Visual Studio에서 작업하는 경우에만 필요하며, 그렇지 않으면 이 단계를 건너뛸 수 있습니다. 새로 설치된 모든 파일과 새로 생성된 폴더를 프로젝트에 추가할 것입니다. Visual Studio로 돌아갑니다.
이 단계에서는 새로 만든 모든 파일과 폴더를 Visual Studio 프로젝트에 포함했습니다.
Step 11
이 단계에서는 프로젝트에 새 파일을 추가합니다.
- CalculatorApp.js to write AngularJS code. Add this file in app folder.
- CalculatorApp.js로 작성된 컨트롤러, 필터, 서비스에 대한 단위 테스트를 작성하는 CalculatorAppTest.js. 이 파일을 테스트 폴더에 추가합니다.
- 재스민을 사용하여 브라우저에 테스트 결과를 표시하는 SpecRunner.html
- Index.html, 응용 프로그램의 html 페이지.
Visual Studio에서 파일을 추가하려면 다음을 수행합니다.
- project/app 폴더를 마우스 오른쪽 버튼으로 클릭하고 CalculatorApp.js라는 파일을 추가합니다.
- project/tests 폴더를 마우스 오른쪽 버튼으로 클릭하고 CalculatorAppTest.js
- 프로젝트를 마우스 오른쪽 버튼으로 클릭하고 SpecRunner.html 라는 HTML 파일을 추가합니다.
- 프로젝트를 마우스 오른쪽 버튼으로 클릭하고 index.html라는 HTML 파일을 추가합니다.
이 단계에서는 코드를 작성하고, 단위 테스트를 수행하고, 테스트 결과를 표시하기 위한 새 파일을 추가했습니다.
Step 12
이 단계에서는 SpecRunner.html 설정합니다. 이렇게 하면 브라우저에서 테스트 결과가 렌더링됩니다. 따라서 SpecRunner.html 열고 다음 참조를 추가합니다.
Jasmine Test Results
<meta charset="utf-8" />
<link href="node_modules/jasmine-core/lib/jasmine-core/jasmine.css" rel="stylesheet" />
<script src="node_modules/jasmine-core/lib/jasmine-core/jasmine.js"></script>
<script src="node_modules/jasmine-core/lib/jasmine-core/jasmine-html.js"></script>
<script src="node_modules/jasmine-core/lib/jasmine-core/boot.js"></script>
<script src="node_modules/angular/angular.js"></script>
<script src="node_modules/angular-mocks/angular-mocks.js"></script>
<script src="app/CalculatorApp.js">
<script src="tests/CalculatorAppTest.js"></script>
13 단계 - AngularJS 필터에 대한 테스트 작성
마지막으로, 우리는 몇 가지 테스트를 작성할 단계에 도달했습니다! AngularJS 필터에 대한 테스트를 작성하는 것부터 시작하겠습니다. CalculatorAppTest.js에 다음 테스트를 추가합니다.
describe('Calculator App Tests', function () {
beforeEach(module('MyApp'));
describe('reversestringfiltertest', function () {
var reverse;
beforeEach(inject(function ($filter) { //initialize filter
reverse = $filter('reverse', {});
}));
it('Should reverse a string', function () {
expect(reverse('india')).toBe('aidni'); //pass test
expect(reverse('don')).toBe('don'); //fail test
});
});
});
위의 코드 스니펫에서는 ng-mock을 사용하여 모듈과 필터의 프록시를 만들고 있습니다. 'MyApp' 모듈에서 필터 이름 'reverse'에 대한 테스트를 작성했으며 ng-mock의 $filter 서비스를 사용하여 필터를 주입하고 있습니다.
이 시점에서 SpecRunner.html 실행하면 AngularJS 필터 또는 'MyApp' 모듈을 만들지 않았기 때문에 실패한 테스트 결과를 얻을 수 있습니다.
이제 'reverse' 필터를 사용하여 AngularJS 모듈 'MyApp'을 만들어 보겠습니다. 앱/앱에서 생성합니다CalculatorApp.js
var MyApp = angular.module("MyApp", []);
MyApp.filter('reverse', [function () {
return function (string) {
return string.split('').reverse().join('');
}
}]);
이제 돌아가서 다시 한 번 실행하고 SpecRunner.html 실행하십시오. 다시 한 번 테스트가 실패했음을 알 수 있습니다. 테스트 실패 메시지에서 볼 수 있듯이 – 'nod'가 'don'이 될 것으로 예상됩니다.
기억하시겠지만, 우리는 일부러 실패한 테스트를 작성했습니다. 이제 테스트를 수정해 보겠습니다CalculatorAppTest.js
describe('Calculator App Tests', function () {
beforeEach(module('MyApp'));
describe('reversestringfiltertest', function () {
var reverse;
beforeEach(inject(function ($filter) { //initialize filter
reverse = $filter('reverse', {});
}));
it('Should reverse a string', function () {
expect(reverse('india')).toBe('aidni');
expect(reverse('don')).toBe('nod');
});
});
});
SpecRunner.html에서 테스트를 실행하면 아래 이미지와 같이 모든 테스트가 통과되었음을 알 수 있습니다.
이 단계에서는 AngularJS 필터에 대한 테스트를 작성하고 Jasmine SpecRunner.html를 사용하여 실행했습니다.
Problems in running test using SpecRunner.html
위의 접근 방식에서 유일한 문제는 테스트 코드나 소스 코드를 변경할 때마다 돌아가서 SpecRunner.html 다시 로드하거나 수동으로 새로 고쳐 업데이트된 테스트 결과를 확인해야 한다는 것입니다. 실제 프로젝트 개발에서는 이것이 고통스러울 수 있습니다. 코드가 변경될 때마다 테스트를 자동으로 실행해야 하는 메커니즘이 필요합니다. 이를 위해 테스트 러너가 있습니다. 코드가 변경될 때마다 자동으로 테스트를 실행하도록 Karma 테스트 러너를 이미 설치했으므로 이제 그렇게 하도록 구성해 보겠습니다.
Step 14
To configure Karma, we need to run command Karma init.
karma init
답변해야 할 많은 질문이 표시되면 아래와 같이 다음 답변을 사용합니다.
이러한 질문에 답한 후 Karma.cnf.js 파일이 생성되었습니다. 다음으로 Visual Studio를 열고 새로 생성된 파일 Karma.conf.js 프로젝트에 포함시켜 보겠습니다. Karma.conf.js 열고 Angular 및 Angular Mock의 참조를 추가합니다. 파일 섹션은 아래 이미지와 같아야 합니다.
files: [
'node_modules/angular/angular.js',
'node_modules/angular-mocks/angular-mocks.js',
'app/*.js',
'tests/*Test.js'
],
그런 다음 명령 프롬프트로 돌아가서 명령을 실행하십시오.
karma start
karma start 명령을 실행하자마자 테스트 실행이 시작되고 아래 이미지와 같이 명령 프롬프트에서 테스트 결과를 볼 수 있습니다. 코드를 변경하고 파일을 저장하면 테스트가 자동으로 실행됩니다.
Step 15
이제 AngularJS 컨트롤러에 대한 단위 테스트를 작성해 보겠습니다. 다음 테스트를 CalculatorAppTest.js에 추가하고 아래 컨트롤러에 대한 테스트를 필터 테스트 또는 필터 테스트 설명 아래에 추가합니다.
describe('addcontrollertest', function () {
var $controller;
beforeEach(inject(function (_$controller_) {
$controller = _$controller_;
}));
it('1 + 1 should equal 2', function () {
var $scope = {};
var controller = $controller('CalculatorController', { $scope: $scope });
$scope.num1 = 1;
$scope.num2 = 2;
$scope.add();
expect($scope.sum).toBe(3);
});
});
컨트롤러의 프록시를 만들고 ng-mock $controller 서비스를 사용하여 주입하고 있습니다. 컨트롤러가 주입되면 CalculatorController (여기 테스트의 컨트롤러)를 참조하고 add 메소드를 호출합니다. 이 시점에서 컨트롤러는 아직 컨트롤러를 작성하지 않았으므로 실패합니다. Karma는 CalculatorController 가 함수가 아니라는 실패 메시지를 제공합니다.
다음으로 'MyApp' 모듈에 컨트롤러를 작성해 보겠습니다.
MyApp.controller('CalculatorController', function ($scope) {
$scope.add = function () {
$scope.sum = $scope.num1 + $scope.num2;
}
});
컨트롤러를 작성한 후 CalculatorApp.js 파일을 저장하자마자 아래 이미지와 같이 테스트가 통과됩니다.
16 단계 : 로컬 데이터로 AngularJS Factory 테스트
팩토리 메소드 이름 PlayerLocalApi를 사용하여 AngularJS 서비스를 만들었다고 가정해 보겠습니다. 이 서비스는 현재 하드 코딩된 로컬 데이터를 반환합니다. 서비스는 아래 목록과 같이 생성됩니다.
MyApp.factory('PlayerLocalApi', function () {
//var data = [{ "Name": "Dhananjay Kumar", "Age": 33.0 }];
var data = [{ "Id": "1", "Name": "Dhananjay Kumar", "Age": 33.0 }, { "Id": "2", "Name": "Sachin Tendulkar", "Age": 22.0 }, { "Id": "6", "Name": "rahul dravid", "Age": 60.0 }];
var PlayerLocalApi = {};
PlayerLocalApi.getPlayers = function () {
return data;
}
return PlayerLocalApi;
});
아래 목록과 같이 서비스를 테스트하기 위한 단위 테스트를 작성할 수 있습니다.
describe('playerservicetest', function () {
var data = [{ "Id": "1", "Name": "Dhananjay Kumar", "Age": 33.0 }, { "Id": "2", "Name": "Sachin Tendulkar", "Age": 22.0 }, { "Id": "6", "Name": "rahul dravid", "Age": 60.0 }];
var PlayerLocalApi = {};
beforeEach(inject(function (_PlayerLocalApi_) {
PlayerLocalApi = _PlayerLocalApi_;
}));
it('should return search player data', function () {
expect(PlayerLocalApi.getPlayers()).toEqual(data);
});
});
위의 코드 스니펫에서는 PlayerLocalApi 서비스를 주입한 다음 getPlayers를 호출합니다. 또한 서비스에서 반환되는 데이터를 테스트하기 위한 정확한 테스트 데이터가 있습니다. 이 테스트는 통과됩니다.
테스트를 올바르게 작성했는지 확인하려면 서비스로 돌아가서 두 번째 데이터에 주석을 달고 첫 번째 데이터의 주석 처리를 제거하여 수정된 서비스가 아래와 같이 되도록 합니다.
MyApp.factory('PlayerLocalApi', function () {
var data = [{ "Name": "Dhananjay Kumar", "Age": 33.0 }];
//var data = [{ "Id": "1", "Name": "Dhananjay Kumar", "Age": 33.0 }, { "Id": "2", "Name": "Sachin Tendulkar", "Age": 22.0 }, { "Id": "6", "Name": "rahul dravid", "Age": 60.0 }];
var PlayerLocalApi = {};
PlayerLocalApi.getPlayers = function () {
return data;
}
return PlayerLocalApi;
});
이제 서비스는 테스트의 테스트 데이터와 동일하지 않은 데이터를 반환하므로 아래 이미지와 같이 실패한 테스트를 받게 됩니다.
이것이 로컬 데이터를 반환하는 서비스에 대한 단위 테스트를 작성하는 방법입니다.
결론
이 게시물에서 우리는 많은 것을 다루었습니다! 우리는 다음을 수행하는 방법을 배웠습니다.
- Set up a development environment
- 재스민에 대한 테스트 환경 설정
- Setup a karma test runner environment
- 필터, 컨트롤러 및 서비스에 대한 단위 테스트 작성
다음 게시물에서는 $http, $q 서비스 등에 대한 단위 테스트를 작성하는 방법을 살펴보겠습니다. 이 게시물이 도움이 되었기를 바랍니다. 읽어 주셔서 감사합니다!