AngularJS 단위 테스트: Karma Jasmine 튜토리얼

Angular.JS의 가장 뛰어난 기능 중 하나는 지원 측면. Google 개발자는 AngularJS를 개발할 때 테스트를 염두에 두고 전체 AngularJS 프레임워크가 테스트 가능한지 확인했습니다.

AngularJS에서는 일반적으로 Karma(프레임워크)를 사용하여 테스트를 수행합니다. Angular JS 테스트는 Karma 없이 수행할 수 있지만 Karma 프레임워크에는 AngularJS 코드 테스트를 위한 뛰어난 기능이 있으므로 이 프레임워크를 사용하는 것이 합리적입니다.

AngularJS에서는 다음을 수행할 수 있습니다. 단위 테스트 컨트롤러와 지시문에 대해 별도로.
또한 사용자 관점에서 테스트하는 AngularJS의 최종 테스트를 수행할 수도 있습니다.

Karma 프레임워크 도입 및 설치

카르마는 테스트 자동화 도구 Google의 Angular JS 팀이 만들었습니다. Karma를 사용하기 위한 첫 번째 단계는 Karma를 설치하는 것입니다. Karma는 npm(로컬 컴퓨터에 모듈을 쉽게 설치하는 데 사용되는 패키지 관리자)을 통해 설치됩니다.

카르마 설치

npm을 통한 Karma 설치는 두 단계 프로세스로 수행됩니다.

단계 1) 명령줄 내에서 아래 줄을 실행하세요.

npm install karma karma-chrome-launcher karma-jasmine

여기서,

npm은 모든 시스템에 사용자 정의 모듈을 설치하는 데 사용되는 노드 패키지 관리자의 명령줄 유틸리티입니다.
install 매개변수는 npm 명령줄 유틸리티에 설치가 필요함을 지시합니다.
카르마 작업에 필요한 명령줄에는 3개의 라이브러리가 지정되어 있습니다.

karma는 테스트 목적으로 사용될 핵심 라이브러리입니다.
karma-chrome-launcher는 Chrome 브라우저에서 karma 명령을 인식할 수 있도록 하는 별도의 라이브러리입니다.
karma-jasmine – Karma의 종속 프레임워크인 jasmine을 설치합니다.

단계 2) 다음 단계는 karma 명령줄 유틸리티를 설치하는 것입니다. 이는 카르마 라인 명령을 실행하는 데 필요합니다. Karma 라인 유틸리티는 테스트를 위해 Karma 환경을 초기화하는 데 사용됩니다.

명령줄 유틸리티를 설치하려면 명령줄 내에서 아래 줄을 실행하세요.

npm install karma-cli

여기서,

karma-cli는 명령줄 인터페이스에서 karma 명령을 작성하는 데 사용되는 karma용 명령줄 인터페이스를 설치하는 데 사용됩니다.

Karma 프레임워크 구성

다음 단계는 다음 명령을 통해 수행할 수 있는 카르마를 구성하는 것입니다.

"karma –init"

위 단계가 실행되면 karma는 karma.conf.js 파일을 생성합니다. 파일은 아마도 아래 표시된 스니펫과 같을 것입니다.

files: [
  'Your application Name'/AngularJS/AngularJS.js',
  'Your application Name'/AngularJS-mocks/AngularJS-mocks.js',
  'lib/app.js',
  'tests/*.js'
]

위의 구성 파일은 Karma 런타임 엔진에 다음 사항을 알려줍니다.

'애플리케이션 이름' – 이 이름은 애플리케이션 이름으로 대체됩니다.
'애플리케이션 이름'/AngularJS/AngularJS.js' – 이는 귀하의 애플리케이션이 AngularJS의 핵심 모듈에 의존한다는 것을 Karma에 알려줍니다.
'애플리케이션 이름'/AngularJS-mocks/AngularJS-mocks.js' – 이는 Angular.JS-mocks.js 파일에서 AngularJS에 대한 단위 테스트 기능을 사용하도록 카르마에 지시합니다.
모든 기본 애플리케이션 또는 비즈니스 로직 파일은 애플리케이션의 lib 폴더에 있습니다.
테스트 폴더에는 모든 단위 테스트가 포함됩니다.

Karma가 작동하는지 확인하려면 Sample.js라는 파일을 만들고 아래 코드를 입력한 후 test 디렉터리에 배치합니다.

describe('Sample test', function() {
  it('Condition is true', function() {
    expect('AngularJS').toBe('AngularJS');
  });
});

위 코드는 다음과 같은 측면을 가지고 있습니다.

설명 기능은 테스트에 대한 설명을 제공하는 데 사용됩니다. 우리의 경우 테스트에 '샘플 테스트'라는 설명을 제공하고 있습니다.
'it' 함수는 테스트에 이름을 지정하는 데 사용됩니다. 우리의 경우 테스트 이름을 'Condition is true'로 지정합니다. 테스트 이름은 의미가 있어야 합니다.
'expect'와 'toBe' 키워드의 조합은 테스트 결과의 예상 값과 실제 값이 무엇인지를 나타냅니다. 실제 값과 예상 값이 동일하면 테스트는 통과하고 그렇지 않으면 실패합니다.

명령 프롬프트에서 다음 줄을 실행하면 위의 테스트 파일이 실행됩니다.

KARMA start

아래 출력은 IDE에서 가져온 것입니다. Webstorm 위의 단계가 수행되었습니다.

출력은 Karma 탐색기에서 제공됩니다. Webstorm. 이 창에는 Karma 프레임워크에 정의된 모든 테스트의 실행이 표시됩니다.
여기에서는 실행된 테스트에 대한 설명인 "Sample test"가 표시되는 것을 볼 수 있습니다.
다음으로, “Condition is true”라는 이름의 테스트 자체가 실행되는 것을 볼 수 있습니다.
모든 테스트 옆에는 모든 테스트가 통과했음을 상징하는 녹색 "확인" 아이콘이 있으므로 참고하세요.

AngularJS 컨트롤러 테스트

Karma 테스트 프레임워크에는 컨트롤러를 엔드 투 엔드로 테스트하는 기능도 있습니다. 여기에는 컨트롤러 내에서 사용되는 $scope 개체 테스트가 포함됩니다.

이를 달성할 수 있는 방법의 예를 살펴보겠습니다.

우리의 예에서,

먼저 컨트롤러를 정의해야 합니다. 이 컨트롤러는 아래 언급된 단계를 수행합니다.

ID 변수를 만들고 값 5를 할당합니다.
$scope 개체에 ID 변수를 할당합니다.

우리의 테스트에서는 이 컨트롤러의 존재 여부를 테스트하고 $scope 개체의 ID 변수가 5로 설정되어 있는지도 테스트합니다.

먼저 다음 전제 조건이 충족되었는지 확인해야 합니다.

npm을 통해 Angular.JS-mocks 라이브러리를 설치합니다. 명령 프롬프트에서 아래 줄을 실행하면 됩니다.

npm install Angular JS-mocks

다음은 테스트에 올바른 파일이 포함되도록 karma.conf.js 파일을 수정하는 것입니다. 아래 세그먼트는 수정이 필요한 karma.conf.js의 파일 부분을 보여줍니다.

files: ['lib/AngularJS.js','lib/AngularJS-mocks.js','lib/index.js','test/*.js']

'files' 매개변수는 기본적으로 Karma에게 테스트 실행에 필요한 모든 파일을 알려줍니다.
AngularJS 단위 테스트를 실행하려면 AngularJS.js 및 AngularJS-mocks.js 파일이 필요합니다.
index.js 파일에는 컨트롤러에 대한 코드가 포함됩니다.
테스트 폴더에는 모든 AngularJS 테스트가 포함됩니다.

다음은 애플리케이션의 테스트 폴더에 Index.js 파일로 저장될 Angular.JS 코드입니다.

아래 코드는 다음과 같은 작업을 수행합니다.

를 생성 AngularJS 모듈 SampleApp이라고 함
AngularJSController라는 컨트롤러를 만듭니다.
ID라는 변수를 만들고 값 5를 지정한 다음 $scope 개체에 할당합니다.

var sampleApp = AngularJS.module('sampleApp',[]);
sampleApp.controller('AngularJSController', function($scope) {
    $scope.ID =5;
});

위 코드가 성공적으로 실행되면 다음 단계는 테스트 케이스 코드가 올바르게 작성되고 실행되었는지 확인합니다.

테스트를 위한 코드는 아래와 같습니다.

코드는 ControllerTest.js라는 별도의 파일에 있으며, 테스트 폴더에 배치됩니다. 아래 코드는 다음과 같은 핵심 작업만 수행합니다.

beforeEach 함수 – 이 함수는 테스트 실행 전에 'sampleApp'이라는 AngularJS.JS 모듈을 로드하는 데 사용됩니다. 이는 index.js 파일에 있는 모듈의 이름입니다.
$controller 객체는 index.js 파일에 정의된 컨트롤러 "Angular JSController"에 대한 모형 객체로 생성됩니다. 모든 종류의 단위 테스트에서 모의 객체는 실제로 테스트에 사용될 더미 객체를 나타냅니다. 이 모의 객체는 실제로 컨트롤러의 동작을 시뮬레이션합니다.
beforeEach(inject(function(_$controller_)) - 이는 실제 컨트롤러처럼 동작하도록 테스트에 모의 객체를 주입하는 데 사용됩니다.
var $scope = {}; 이는 $scope 객체에 대해 생성되는 모의 객체입니다.
var 컨트롤러 = $controller('AngularJSController', { $scope: $scope }); – 여기서는 'Angular.JSController'라는 컨트롤러가 있는지 확인합니다. 여기서는 Index.js 파일의 컨트롤러에 있는 $scope 개체의 모든 변수를 테스트 파일의 $scope 개체에 할당합니다.
마지막으로 $scope.ID를 5와 비교합니다.

describe('AngularJSController', function() {
    beforeEach(module('sampleApp'));

    var $controller;

    beforeEach(inject(function(_$controller_){
              $controller = _$controller_;
    }));

    describe('$scope.ID', function() {
        it('Check the scope object', function() {
            var $scope = {};
            var controller = $controller('AngularJSController', { $scope: $scope });
            expect($scope.ID).toEqual(5);
        });
    });
});

위 테스트는 Karma 브라우저에서 실행되며 이전 주제에 표시된 것과 동일한 통과 결과를 제공합니다.

AngularJS 지시문 테스트

Karma 테스트 프레임워크에는 사용자 정의 지시문을 테스트하는 기능도 있습니다. 여기에는 맞춤 지시어 내에서 사용되는 templateURL이 포함됩니다.

이를 달성할 수 있는 방법의 예를 살펴보겠습니다.

우리의 예에서 우리는 먼저 다음 작업을 수행하는 사용자 정의 지시문을 정의할 것입니다.

SampleApp이라는 AngularJS 모듈을 만듭니다.
이름이 Guru99인 사용자 지정 지시문을 만듭니다.
"This is AngularJS Testing"이라는 텍스트를 표시하는 헤더 태그가 있는 템플릿을 반환하는 함수를 만듭니다.

var sampleApp = AngularJS.module('sampleApp',[]);
sampleApp.directive('Guru99', function () {
    return {
        restrict: 'E',
        replace: true,
        template: '<h1>This is AngularJS Testing</h1>'
    };
});

위의 코드가 성공적으로 실행되면 다음 단계는 코드가 올바르게 작성되고 실행되었는지 확인하는 테스트 사례를 만드는 것입니다. 테스트를 위한 코드는 아래와 같습니다.

코드는 DirectiveTest.js라는 별도의 파일에 있으며, 이는 test 폴더에 배치됩니다. 아래 코드는 다음과 같은 핵심 작업을 수행합니다.

beforeEach 함수 – 이 함수는 테스트 실행 전에 'sampleApp'이라는 Angular JS 모듈을 로드하는 데 사용됩니다.
$compile 서비스는 지시문을 컴파일하는 데 사용됩니다. 이 서비스는 필수이며 Angular.JS가 이를 사용하여 사용자 정의 지시문을 컴파일할 수 있도록 선언해야 합니다.
$rootscope는 모든 AngularJS.JS 애플리케이션의 기본 범위입니다. 우리는 이전 장에서 컨트롤러의 $scope 객체를 보았습니다. $scope 개체는 $rootscope 개체의 하위 개체입니다. 여기서 선언한 이유는 사용자 정의 지시어를 통해 DOM의 실제 HTML 태그를 변경하기 때문입니다. 따라서 HTML 문서 내에서 변경 사항이 발생하는 시기를 실제로 수신하거나 아는 $rootscope 서비스를 사용해야 합니다.
var 요소 = $compile(“ ”) – 지시어가 제대로 주입되었는지 확인하는 데 사용됩니다. 사용자 정의 지시어의 이름은 Guru99이며, 사용자 정의 지시어 장에서 지시어가 HTML에 삽입되면 다음과 같이 삽입된다는 것을 알고 있습니다. '. 따라서 이 진술은 해당 확인을 수행하는 데 사용됩니다.
Expect(element.html()).toContain(“This is AngularJS Testing”) – 이는 “This is AngularJS 테스트”.

describe('Unit testing directives', function() {
  var $compile,
      $rootScope;
   beforeEach(module('sampleApp'));

  beforeEach(inject(function(_$compile_, _$rootScope_){
    $compile = _$compile_;
    $rootScope = _$rootScope_;
 }));

 it('Check the directive', function() {
    // Compile a piece of HTML containing the directive
    var element = $compile("<ng-Guru99></ng-Guru99>")($rootScope);
    $rootScope.$digest();
    expect(element.html()).toContain("This is AngularJS Testing");
  });
});

위 테스트는 Karma 브라우저에서 실행되며 이전 주제에 표시된 것과 동일한 통과 결과를 제공합니다.

AngularJS JS 애플리케이션 엔드투엔드 테스트

Protractor라는 프레임워크와 함께 Karma 테스트 프레임워크에는 웹 애플리케이션을 엔드 투 엔드로 테스트하는 기능이 있습니다.

따라서 지시문과 컨트롤러를 테스트하는 것뿐만 아니라 HTML 페이지에 나타날 수 있는 다른 모든 것을 테스트하는 것입니다.

이를 달성할 수 있는 방법의 예를 살펴보겠습니다.

아래 예에서는 ng-repeat 지시문을 사용하여 데이터 테이블을 생성하는 AngularJS 애플리케이션을 사용하겠습니다.

먼저 “tutorial”이라는 변수를 생성하고 한 단계에서 일부 키-값 쌍을 할당합니다. 각 키-값 쌍은 테이블을 표시할 때 데이터로 사용됩니다. 그런 다음 튜토리얼 변수가 범위 개체에 할당되어 보기에서 액세스할 수 있습니다.
테이블의 각 데이터 행에 대해 ng-repeat 지시문을 사용하고 있습니다. 이 지시어는 ptutor 변수를 사용하여 튜토리얼 범위 객체의 각 키-값 쌍을 살펴봅니다.
마지막으로, 우리는 키 값 쌍(ptutor.Name 및 ptutor.name)과 함께 태그를 지정합니다.Description)을 사용하여 테이블 데이터를 표시합니다.

<table >
             <tr ng-repeat="ptutor in tutorial">
                   <td>{{ ptutor.Name }}</td>
	               <td>{{ ptutor.Description }}</td>
             </tr>
   </table>
</div>
  <script type="text/javascript">
      var app = AngularJS.module('DemoApp', []);
        app.controller('DemoController', function($scope) {
           $scope.tutorial =[
                {Name: "Controllers" , Description : "Controllers in action"},
                {Name: "Models" , Description : "Models and binding data"},
	            {Name: "Directives" , Description : "Flexibility of Directives"}
			]   });

우리의 테스트에서는 실제로 ng-repeat 지시문을 테스트하고 위의 예에서와 같이 3행의 데이터가 포함되어 있는지 확인합니다.

먼저 다음 전제 조건이 충족되었는지 확인해야 합니다.

npm을 통해 각도기 라이브러리를 설치합니다. 명령 프롬프트에서 아래 줄을 실행하면 됩니다.

"npm install protractor"

테스트를 위한 코드는 아래와 같습니다.

코드는 CompleteTest.js라는 별도의 파일에 있으며, 이는 테스트 폴더에 배치됩니다. 아래 코드는 다음과 같은 핵심 작업만 수행합니다.

브라우저 기능은 각도기 라이브러리에서 제공되며 AngularJS 애플리케이션(위에 표시된 코드 포함)이 사이트 URL(http://localhost:8080/Guru99/)에서 실행되고 있다고 가정합니다.
var list=element.all(by.repeater(ptutor in tutorial')); - 이 코드 줄은 실제로 'ptutor in tutorial' 코드로 채워진 ng-repeat 지시문을 가져옵니다. element와 by.repeater는 protractor 라이브러리에서 제공하는 특수 키워드로, ng-repeat 지시문의 세부 정보를 얻을 수 있습니다.
기대(list.count()).toEqual(3); – 마지막으로, ng-repeat 지시어의 결과로 실제로 테이블에 3개의 항목이 채워지는지 확인하기 위해 Expect 함수를 사용하고 있습니다.

Describe('Unit testing end to end', function() {
  beforeEach(function() {
browser.get('http://localhost:8080/Guru99/');
})
   it('Check the ng directive', function() {
      var list=element.all(by.repeater(ptutor in tutorial'));
      expect(list.count()).toEqual(3);  }); });

위 테스트는 Karma 브라우저에서 실행되며 이전 주제에 표시된 것과 동일한 통과 결과를 제공합니다.

제품 개요

AngularJS에서의 테스트는 Google 자체에서 개발한 프레임워크인 Karma 프레임워크를 사용하여 수행됩니다.
Karma 프레임워크는 노드 패키지 관리자를 사용하여 설치됩니다. 기본 테스트를 위해 설치해야 하는 주요 모듈은 karma, karma-chrome-launcher, karma-jasmine 및 karma-cli입니다.
테스트는 일반적으로 애플리케이션의 테스트 폴더에 보관되는 별도의 js 파일로 작성됩니다. 이러한 테스트 파일의 위치는 karma.conf.js라는 특수 구성 파일에 언급되어야 합니다. Karma는 모든 테스트를 실행할 때 이 구성 파일을 사용합니다.
Karma는 컨트롤러와 사용자 지정 지시문을 테스트하는 데도 사용할 수 있습니다.
엔드투엔드 웹 테스트를 위해서는 패키지 관리자 노드를 통해 각도기라는 또 다른 프레임워크를 설치해야 합니다. 이 프레임워크는 HTML 페이지의 모든 요소를 테스트하는 데 사용할 수 있는 특수 메서드를 제공합니다.

Karma 프레임워크 도입 및 설치

카르마 설치

Karma 프레임워크 구성

관련 기사

AngularJS 컨트롤러 테스트

AngularJS 지시문 테스트

AngularJS JS 애플리케이션 엔드투엔드 테스트

제품 개요

뉴스레터 신청하기