JavaScript의 AngularJS Library_AngularJS에서 단위 테스트하는 방법

개발자 모두는 단위 테스트가 개발 프로젝트에 매우 유익하다는 데 동의합니다. 코드 품질을 보장함으로써 리팩토링이 필요한 경우에도 보다 안정적인 개발과 더 큰 자신감을 보장합니다.

테스트 중심 개발 흐름도

더 높은 테스트 가능성에 대한 AngularJS의 코드 주장은 실제로 합리적입니다. 문서에 나열된 엔드투엔드 테스트 예제만으로도 이를 설명할 수 있습니다. AngularJS와 같은 프로젝트의 경우 단위 테스트가 쉽다고는 하지만 잘하기는 쉽지 않습니다. 공식 문서에서는 자세한 예제를 제공하지만 실제 응용 프로그램에서는 여전히 매우 어렵습니다. 여기에서는 간단히 작동 방법을 보여드리겠습니다.

인스턴트 카르마

Karma는 Angular 팀이 JavaScript용으로 개발한 테스트 실행 프레임워크입니다. Karma와 Angular의 협업은 테스트 작업을 쉽게 자동화하고 지루한 수동 작업(예: 회귀 테스트 세트 또는 대상 테스트 종속성 로드)을 대체합니다.

Karma를 시작하려면 구성 파일을 정의하기만 하면 예상되는 테스트 환경에서 테스트 사례가 자동으로 실행됩니다. 구성 파일에서 관련 테스트 환경을 지정할 수 있습니다. angular-seed는 제가 적극적으로 추천하고 빠르게 구현할 수 있는 솔루션입니다. 최근 프로젝트의 Karma 구성은 다음과 같습니다.

module.exports = function(config) {
  config.set({
    basePath: '../',
 
    files: [
      'app/lib/angular/angular.js',
      'app/lib/angular/angular-*.js',
      'app/js/**/*.js',
      'test/lib/recaptcha/recaptcha_ajax.js',
      'test/lib/angular/angular-mocks.js',
      'test/unit/**/*.js'
    ],
 
    exclude: [
      'app/lib/angular/angular-loader.js',
      'app/lib/angular/*.min.js',
      'app/lib/angular/angular-scenario.js'
    ],
 
    autoWatch: true,
 
    frameworks: ['jasmine'],
 
    browsers: ['PhantomJS'],
 
    plugins: [
      'karma-junit-reporter',
      'karma-chrome-launcher',
      'karma-firefox-launcher',
      'karma-jasmine',
      'karma-phantomjs-launcher'
    ],
 
    junitReporter: {
      outputFile: 'test_out/unit.xml',
      suite: 'unit'
    }
 
  })
}

이는 angle-seed의 기본 구성과 유사하지만 다음과 같은 차이점이 있습니다.

• 브라우저를 Chrome에서 PhantomJS로 변경해야 점프할 때마다 새 브라우저 창을 열 필요가 없지만 OSX 시스템에서는 창 지연이 발생합니다. 그래서 플러그인과 브라우저 설정이 변경되었습니다.
• 내 애플리케이션은 Google의 Recaptcha 서비스를 참조해야 하므로 종속 recaptcha_ajax.js 작은 파일을 추가했습니다. 이 작은 구성은 Karma의 구성 파일에 코드 한 줄을 추가하는 것만큼 간단합니다.

autoWatch는 정말 멋진 설정입니다. 파일이 변경되면 Karma가 자동으로 테스트 케이스로 되돌아갑니다. 다음과 같이 Karma를 설치할 수 있습니다:

npm install karma

angular-seed는 Karma 테스트를 실행하기 위한 간단한 스크립트 inscripts/test.sh를 제공합니다.

Jasmine으로 테스트 케이스 디자인

행동 중심 개발 모델을 갖춘 JavaScript 테스트 프레임워크인 Jasmine을 사용하여 Angular의 단위 테스트 사례를 설계할 때 대부분의 리소스를 이미 사용할 수 있습니다.

다음으로 이야기하고 싶은 내용은 이것입니다.

AngularJS 컨트롤러를 단위 테스트하려면 Angular의 종속성 주입 종속성 주입을 사용할 수 있습니다. 이 함수는 테스트 시나리오에서 컨트롤러에 필요한 서비스 버전을 가져오고 예상 결과가 올바른지 확인합니다. . 예를 들어, 탐색해야 하는 탭을 강조 표시하기 위해 다음 컨트롤러를 정의했습니다.

app.controller('NavCtrl', function($scope, $location) {
  $scope.isActive = function(route) {
    return route === $location.path();
  };
})

isActive 메소드를 테스트하고 싶다면 어떻게 해야 하나요? $locationservice 변수가 예상 값을 반환하고 메서드가 예상 값을 반환하는지 확인하겠습니다. 따라서 테스트 설명에서는 테스트 중에 필요한 제어 버전을 저장하고 필요할 때 해당 컨트롤러에 주입하기 위해 로컬 변수를 정의합니다. 그런 다음 실제 테스트 사례에서는 실제 결과가 올바른지 확인하기 위해 어설션을 추가합니다. 전체 과정은 다음과 같습니다.

describe('NavCtrl', function() {
  var $scope, $location, $rootScope, createController;
 
  beforeEach(inject(function($injector) {
    $location = $injector.get('$location');
    $rootScope = $injector.get('$rootScope');
    $scope = $rootScope.$new();
 
    var $controller = $injector.get('$controller');
 
    createController = function() {
      return $controller('NavCtrl', {
        '$scope': $scope
      });
    };
  }));
 
  it('should have a method to check if the path is active', function() {
    var controller = createController();
    $location.path('/about');
    expect($location.path()).toBe('/about');
    expect($scope.isActive('/about')).toBe(true);
    expect($scope.isActive('/contact')).toBe(false);
  });
});

전체 기본 구조를 활용하여 다양한 유형의 테스트를 설계할 수 있습니다. 테스트 시나리오에서는 로컬 환경을 사용하여 컨트롤러를 호출하므로 속성을 더 추가한 다음 이러한 속성을 지우는 메서드를 실행하고 속성이 지워졌는지 확인할 수도 있습니다.

$httpBackend가 멋지네요

그렇다면 $httpservice를 호출하여 서버에 데이터를 요청하거나 보내는 경우에는 어떻게 될까요? 다행히 Angular는

$httpBackend의 모의 메소드. 이러한 방식으로 서버의 응답 내용을 사용자 정의하거나 서버의 응답 결과가 단위 테스트의 기대치와 일치하는지 확인할 수 있습니다.

구체적인 내용은 다음과 같습니다.

describe('MainCtrl', function() {
  var $scope, $rootScope, $httpBackend, $timeout, createController;
  beforeEach(inject(function($injector) {
    $timeout = $injector.get('$timeout');
    $httpBackend = $injector.get('$httpBackend');
    $rootScope = $injector.get('$rootScope');
    $scope = $rootScope.$new();
 
 
    var $controller = $injector.get('$controller');
 
    createController = function() {
      return $controller('MainCtrl', {
        '$scope': $scope
      });
    };
  }));
 
  afterEach(function() {
    $httpBackend.verifyNoOutstandingExpectation();
    $httpBackend.verifyNoOutstandingRequest();
  });
 
  it('should run the Test to get the link data from the go backend', function() {
    var controller = createController();
    $scope.urlToScrape = 'success.com';
 
    $httpBackend.expect('GET', '/slurp?urlToScrape=http:%2F%2Fsuccess.com')
      .respond({
        "success": true,
        "links": ["http://www.google.com", "http://angularjs.org", "http://amazon.com"]
      });
 
    // have to use $apply to trigger the $digest which will
    // take care of the HTTP request
    $scope.$apply(function() {
      $scope.runTest();
    });
 
    expect($scope.parseOriginalUrlStatus).toEqual('calling');
 
    $httpBackend.flush();
 
    expect($scope.retrievedUrls).toEqual(["http://www.google.com", "http://angularjs.org", "http://amazon.com"]);
    expect($scope.parseOriginalUrlStatus).toEqual('waiting');
    expect($scope.doneScrapingOriginalUrl).toEqual(true);
  });
});

보시다시피 beforeEach 호출은 실제로 매우 유사합니다. 유일한 차이점은 $httpBackend를 직접 가져오는 대신 인젝터에서 가져오는 것입니다. 그럼에도 불구하고 다양한 테스트를 생성할 때 몇 가지 명백한 차이점이 있습니다. 우선 각 사용 사례 실행 후 $httpBackend에 명백한 비정상적인 요청이 없는지 확인하는 afterEachcall 메서드가 있습니다. 테스트 시나리오의 설정과 $httpBackend 메소드 적용을 살펴보면 그다지 직관적이지 않은 부분이 몇 가지 있다는 것을 알 수 있습니다.

사실 $httpBackend를 호출하는 방법은 간단하고 명확하지만 그것만으로는 충분하지 않습니다. 실제 테스트에서 $scope.runTest 메소드에 대한 호출을 $scope에 값을 전달하는 방법으로 캡슐화해야 합니다. .$신청하세요. 이렇게 하면 $digest가 트리거된 후에만 HTTP 요청을 처리할 수 있습니다. 보시다시피 $httpBackend는 $httpBackend.flush() 메서드를 호출할 때까지 구문 분석되지 않습니다. 이를 통해 호출 중에 반환된 결과가 올바른지 확인할 수 있습니다(위 예에서는 컨트롤러의 $scope. ParseOriginalUrlStatusproperty 속성이 호출자에게 전달되므로 실시간으로 모니터링할 수 있습니다.)

다음 몇 줄의 코드는 호출 중에 $scopethat 속성을 감지하는 어설션입니다. 멋지죠?

팁: 일부 단위 테스트에서 사용자는 $가 없는 범위를 변수로 표시하는 데 익숙합니다. 이것은 Angular 문서에서 필수이거나 지나치게 강조된 것은 아니지만 가독성과 일관성을 향상시키기 위해 $scopelike를 사용합니다.

결론

아마 이것은 나에게 자연스러운 일 중 하나일지도 모르지만 Angular에서 단위 테스트 작성을 배우는 것은 처음에는 확실히 나에게 상당히 고통스러웠습니다. 나는 시작하는 방법에 대한 이해의 상당 부분이 실제로 일관되거나 명확한 모범 사례가 아니라 자연스럽게 나온 임의의 선택을 통해 인터넷에 있는 다양한 블로그 게시물과 리소스의 패치워크에서 나왔다는 것을 알았습니다. 저는 Angular와 Jasmine 사용법의 모든 이상하고 독특한 기능을 이해하기보다는 단지 코드 작성에만 관심이 있기 때문에 어려움을 겪고 있는 다른 사람들을 돕기 위해 제가 만든 문서를 제공하고 싶었습니다. 그럼 이 글이 여러분에게 조금이나마 도움이 되기를 바랍니다.