Karma와 Jasmine을 사용한 AngularJS 단위 테스트

AngularJS의 가장 뛰어난 기능 중 하나는 바로 이것입니다. 지원 측면. 개발자들이 Google AngularJS를 개발할 때, 그들은 테스트를 염두에 두고 AngularJS 프레임워크 전체가 테스트 가능하도록 만들었습니다.

AngularJS 테스트는 일반적으로 Karma(프레임워크)를 사용하여 수행됩니다. Karma 없이도 AngularJS 테스트를 수행할 수 있지만, Karma 프레임워크는 AngularJS 코드 테스트에 매우 뛰어난 기능을 제공하기 때문에 사용하는 것이 좋습니다.

• AngularJS에서는 다음을 수행할 수 있습니다. 단위 테스트 컨트롤러와 지시문에 대해 별도로.
• 우리는 또한 수행할 수 있습니다 엔드 투 엔드 테스트 AngularJS는 사용자 관점에서 테스트를 진행합니다.

Karma 프레임워크 도입 및 설치

카르마는 테스트 자동화 도구 AngularJS 팀에서 제작했습니다. GoogleKarma를 사용하기 위한 첫 번째 단계는 Karma를 설치하는 것입니다. Karma는 npm(로컬 머신에 모듈을 쉽게 설치하는 데 사용되는 패키지 관리자)을 통해 설치됩니다.

카르마 설치

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

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

npm install karma karma-chrome-launcher karma-jasmine --save-dev

여기서,

1. npm은 Node.js 패키지 관리자의 명령줄 유틸리티로, 어떤 시스템에든 사용자 정의 모듈을 설치하는 데 사용됩니다. npm은 Node.js에 기본적으로 포함되어 있습니다. Node.js를.
2. install 매개변수는 npm 명령줄 유틸리티에 설치가 필요함을 지시합니다.
3. 카르마 작업에 필요한 명령줄에는 3개의 라이브러리가 지정되어 있습니다.
   • karma는 테스트 목적으로 사용될 핵심 라이브러리입니다.
   • karma-chrome-launcher는 Chrome 브라우저에서 karma 명령을 인식할 수 있도록 하는 별도의 라이브러리입니다.
   • karma-jasmine – Karma의 종속 프레임워크인 jasmine을 설치합니다.

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

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

npm install -g karma-cli

• karma-cli는 karma 명령어를 입력할 수 있도록 karma 명령줄 인터페이스를 설치하는 데 사용됩니다. -g 플래그를 사용하면 karma 명령어가 모든 폴더에서 사용 가능하도록 전역적으로 설치됩니다.

Karma 프레임워크 구성

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

karma init

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

files: [
  'node_modules/angular/angular.js',
  'node_modules/angular-mocks/angular-mocks.js',
  'lib/app.js',
  'tests/*.js'
]

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

1. 각도.js – 이는 Karma에게 애플리케이션이 AngularJS의 핵심 모듈에 의존한다는 것을 알려줍니다.
2. angular-mocks.js – 이는 Karma에게 angular-mocks.js 파일의 AngularJS용 단위 테스트 기능을 사용하도록 지시합니다.
3. 모든 기본 애플리케이션 또는 비즈니스 로직 파일은 애플리케이션의 lib 폴더에 있습니다.
4. 테스트 폴더에는 모든 단위 테스트가 포함됩니다.

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

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

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

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

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

karma start

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

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

AngularJS 단위 테스트에서 Jasmine이란 무엇인가요?

Karma는 테스트 실행 위치를 결정하고, Jasmine은 테스트 작성 방식을 결정합니다. Jasmine은 동작 기반 명세 프레임워크로, 이 페이지의 모든 예제에서 사용되는 어휘를 제공합니다. 따라서 karma-jasmine 어댑터는 테스트 실행기와 함께 설치됩니다.

재스민은 네 가지 구성 요소를 제공합니다.

• 설명하다(): 관련 사양들을 하나의 그룹으로 묶고, 테스트 대상 장치에 대한 읽기 쉬운 설명을 허용합니다.
• 그것(): 단일 명세를 선언합니다. 이름은 호출되는 메서드가 아닌 검증 대상 동작을 명시해야 합니다.
• 매처를 사용한 expect(): 실제 값과 예상 값을 비교합니다. 일반적인 비교 연산자로는 toBe, toEqual, toContain, toBeDefined 등이 있습니다.
• beforeEach() 및 afterEach(): 각 테스트의 독립성을 유지하기 위해 모든 사양을 정하기 전후에 설정 및 해제 작업을 실행합니다.

Jasmine은 스파이 기능도 제공합니다. 스파이는 실제 함수를 기록된 대리 함수로 대체하므로, 실제 HTTP 엔드포인트를 호출하지 않고도 컨트롤러를 테스트할 수 있습니다. Jasmine은 DOM이나 자체 어설션 라이브러리가 필요하지 않기 때문에 Karma와 Jasmine의 조합은 AngularJS를 실행하는 가장 가벼운 방법입니다. Java스크립트 단위 테스트.

AngularJS 컨트롤러 테스트

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

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

우리의 예에서,

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

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

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

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

npm을 통해 angular-mocks 라이브러리를 설치하세요. 명령 프롬프트에서 아래 명령어를 실행하면 됩니다.

npm install angular-mocks --save-dev

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

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

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

아래는 AngularJS 코드이며, 이 코드는 애플리케이션의 테스트 폴더에 Index.js 파일로 저장될 예정입니다.

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

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

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

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

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

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

1. beforeEach 함수 – 이 함수는 테스트 실행 전에 'sampleApp'이라는 AngularJS 모듈을 로드하는 데 사용됩니다. 여기서 'sampleApp'은 index.js 파일에 있는 모듈 이름입니다.
2. `$controller` 객체는 index.js 파일에 정의된 "AngularJSController" 컨트롤러의 모의 객체로 생성됩니다. 모든 종류의 단위 테스트에서 모의 ​​객체는 테스트에 실제로 사용될 더미 객체를 나타냅니다. 이 모의 객체는 컨트롤러의 동작을 시뮬레이션합니다.
3. beforeEach(inject(function(_$controller_)) - 이는 실제 컨트롤러처럼 동작하도록 테스트에 모의 객체를 주입하는 데 사용됩니다.
4. var $scope = {}; 이는 $scope 객체에 대해 생성되는 모의 객체입니다.
5. `var controller = $controller('AngularJSController', { $scope: $scope });` – 여기서는 'AngularJSController'라는 이름의 컨트롤러가 존재하는지 확인합니다. 또한, Index.js 파일의 컨트롤러에 있는 `$scope` 객체의 모든 변수를 테스트 파일의 `$scope` 객체에 할당합니다.
6. 마지막으로 $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 테스트 프레임워크는 사용자 정의 디렉티브를 테스트하는 기능도 제공합니다. 여기에는 템플릿도 포함됩니다.URL사용자 정의 지시문 내에서 사용되는 's입니다.

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

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

1. SampleApp이라는 AngularJS 모듈을 만듭니다.
2. guru99라는 이름으로 사용자 지정 지시문을 생성하세요.
3. "This is AngularJS Testing"이라는 텍스트를 표시하는 헤더 태그가 있는 템플릿을 반환하는 함수를 만듭니다.

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

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

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

1. beforeEach 함수 – 이 함수는 테스트 실행 전에 'sampleApp'이라는 AngularJS 모듈을 로드하는 데 사용됩니다.
2. `$compile` 서비스는 디렉티브를 컴파일하는 데 사용됩니다. 이 서비스는 필수이며 AngularJS가 사용자 정의 디렉티브를 컴파일하는 데 사용할 수 있도록 선언해야 합니다.
3. `$rootScope`는 모든 AngularJS 애플리케이션의 기본 스코프입니다. 이전 장에서 컨트롤러의 `$scope` 객체를 살펴봤습니다. `$scope` 객체는 `$rootScope` 객체의 하위 객체입니다. 이렇게 선언하는 이유는 사용자 정의 디렉티브를 통해 DOM의 실제 HTML 태그를 변경하기 때문입니다. 따라서 HTML 문서 내에서 변경 사항이 발생할 때 이를 감지하는 `$rootScope` 서비스를 사용해야 합니다.
4. var element = $compile(“ ”)($rootScope) – 이는 디렉티브가 제대로 주입되었는지 확인하는 데 사용됩니다. 디렉티브는 카멜 케이스 이름인 guru99로 등록되어 있으므로 AngularJS는 소문자 요소와 일치합니다. 마크업에 있습니다. 따라서 이 구문은 해당 검사를 수행하는 데 사용됩니다.
5. `expect(element.html()).toContain(“This is AngularJS Testing”)` - 이는 `expect` 함수에게 요소(이 경우 `h1` 태그)에 "This is AngularJS Testing"이라는 내부 HTML 텍스트가 포함되어 있어야 한다고 지시하는 데 사용됩니다.

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("<guru99></guru99>")($rootScope);
    $rootScope.$digest();
    expect(element.html()).toContain("This is AngularJS Testing");
  });
});

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

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

카르마 테스트 프레임워크는 Pro라는 프레임워크와 함께 사용됩니다.tracTor는 웹 애플리케이션을 처음부터 끝까지 테스트할 수 있는 기능을 제공합니다.

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

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

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

1. 먼저 “tutorial”이라는 변수를 생성하고 한 단계에서 일부 키-값 쌍을 할당합니다. 각 키-값 쌍은 테이블을 표시할 때 데이터로 사용됩니다. 그런 다음 튜토리얼 변수가 범위 개체에 할당되어 보기에서 액세스할 수 있습니다.
2. 테이블의 각 데이터 행에 대해 ng-repeat 지시문을 사용하고 있습니다. 이 지시어는 ptutor 변수를 사용하여 튜토리얼 범위 객체의 각 키-값 쌍을 살펴봅니다.
3. 마지막으로, 우리는 키 값 쌍(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 = angular.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행의 데이터가 포함되어 있는지 확인합니다.

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

프로 버전을 설치하세요tracnpm을 통해 Tor 라이브러리를 설치하려면 명령 프롬프트에서 아래 명령어를 실행하면 됩니다.

npm install -g protractor

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

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

1. 브라우저 기능은 전문가가 제공합니다.tracTor 라이브러리를 사용하며, 위 코드와 같은 AngularJS 애플리케이션이 당사 사이트에서 실행 중이라고 가정합니다. URL – http://localhost:8080/Guru99 /
2. `var list = element.all(by.repeater('ptutor in tutorial'));` - 이 코드는 실제로 `ng-repeat` 디렉티브를 가져오는데, 이 디렉티브는 `ptutor in tutorial` 코드로 채워집니다. `element`와 `by.repeater`는 프로에서 제공하는 특수 키워드입니다.tracng-repeat 지시문의 세부 정보를 얻을 수 있도록 해주는 Tor 라이브러리입니다.
3. 기대(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 브라우저에서 실행되며 이전 주제에 표시된 것과 동일한 통과 결과를 제공합니다.

카르마 vs 자스민 vs 프로tractor: 주요 차이점

이 페이지에서 사용되는 세 가지 도구는 동일한 명령줄에 나타나기 때문에 혼동하기 쉽습니다. 아래 표에서 명확히 알 수 있듯이 각 도구는 테스트 스택의 서로 다른 계층을 차지합니다.

요약하자면, 재스민이 테스트를 작성하고, 카르마가 실행하며, 프로가 그 결과를 검토합니다.tractor는 Jasmine 구문을 완전히 렌더링된 페이지에도 적용합니다.

AngularJS 단위 테스트를 위한 최고의 사례

몇 가지 간단한 습관을 따르면 애플리케이션이 성장함에 따라 AngularJS 스위트의 속도와 안정성을 유지할 수 있습니다.

1. 한 번에 한 제품씩 테스트하십시오. beforeEach 내부에서는 테스트 대상 모듈만 로드하고, 모든 협력 모듈을 모킹하여 오류 발생 시 단일 파일만 가리키도록 합니다.
2. 실제 백엔드에 절대 호출하지 마세요. angular-mocks의 `$httpBackend` 서비스를 사용하여 미리 정의된 응답을 반환하세요. 그러면 테스트가 오프라인에서 실행되고 모든 컴퓨터에서 동일한 결과가 생성됩니다.
3. 명세 이름은 동작 방식을 따르도록 하세요. "컨트롤러 초기화 시 5를 반환"과 같은 이름은 "test1"보다 보고서에서 읽기에 더 좋습니다.
4. 소화 사이클을 항상 비워주세요. 스코프 데이터를 변경한 후에는 `$rootScope.$digest()`를 호출하십시오. 그렇지 않으면 바인딩과 감시자가 업데이트되지 않아 어설션이 잘못된 이유로 실패합니다.
5. 적용 범위를 측정하되, 신중하게 판단하십시오. 테스트되지 않은 브랜치를 보려면 karma-coverage를 추가하세요. 약한 어설션으로 높은 커버리지를 달성하더라도 결함을 숨길 수 있습니다.
6. 지속적 통합 환경에서 해당 제품군을 실행하세요. 개발자 컴퓨터에서만 실행되는 것이 아니라 모든 커밋에서 동일한 사양이 실행되도록 헤드리스 Chrome 런처를 사용하십시오.

이러한 규칙을 적용하면 위의 예시들이 개별적인 시연에서 벗어나 기존 AngularJS 코드베이스를 위한 회귀 안전망으로 전환됩니다. 더 넓은 관점을 보려면 다음을 참조하세요. AngularJS 튜토리얼 시리즈.

자주 묻는 질문