AngularJS 테스트의 조롱 종속성

코어 포인트

AngularJS는 테스트를 염두에두고 태어 났으며 내장 의존성 주입 메커니즘을 사용하면 각 구성 요소가 JavaScript 테스트 프레임 워크 (예 : Jasmine)를 사용하여 테스트 할 수 있습니다.

단위 테스트의 모의에는 테스트 코드 스 니펫을 분리하는 능력이 포함되며, 이는 종속성이 다른 소스에서 나오기 때문에 어려울 수 있습니다. angularjs의 시뮬레이션은 모듈로 단순화되며, 일반적으로 사용되는 AngularJS 서비스 세트에 대한 시뮬레이션을 제공합니다.

AngularJS의 서비스 시뮬레이션은 실제 서비스 인스턴스를 얻고 서비스를 듣거나 시뮬레이션 서비스를 구현하여
• 를 사용하여 수행 할 수 있습니다. 후자의 방법이 바람직하며, 이는 서비스의 실제 방법 구현을 호출하지 않을 수 있습니다.
AngularJS의 제공자 시뮬레이션은 서비스 시뮬레이션과 유사한 규칙을 따릅니다. 메소드는 테스트에서 구현해야합니다. 테스트 파일에서 함수에 정의 된 함수가 필요하지 않은 경우 값을 빈 함수에 할당 할 수 있습니다.
• 전역 객체 (예 : 전역 "창"객체 또는 타사 라이브러리로 생성 된 객체의 일부)를 에 주입하거나 값이나 상수를 생성하고 주입하여 시뮬레이션 할 수 있습니다. 필요에 따라. angular-mocks
AngularJS 설계 개념에는 테스트가 포함됩니다. 프레임 워크의 소스 코드는 매우 잘 테스트되었으며 프레임 워크를 사용하여 작성된 모든 코드도 테스트 가능합니다. 내장 의존성 주입 메커니즘을 사용하면 AngularJS로 작성된 모든 구성 요소를 테스트 할 수 있습니다. AngularJS 응용 프로그램의 코드는 기존 JavaScript 테스트 프레임 워크를 사용하여 단위 테스트를 수행 할 수 있습니다. AngularJS 코드를 테스트하는 데 사용되는 가장 일반적인 프레임 워크는 Jasmine입니다. 이 기사의 모든 샘플 코드 스 니펫은 Jasmine을 사용하여 작성됩니다. Angular 프로젝트에서 다른 테스트 프레임 워크를 사용하는 경우 에도이 기사에서 논의 된 아이디어를 여전히 적용 할 수 있습니다.
• 이 기사에서는 이미 단위 테스트 및 테스트 AngularJS 코드에 대한 경험이 있다고 가정합니다. 테스트 전문가 일 필요는 없습니다. 테스트에 대한 기본 이해가 있고 AngularJS 응용 프로그램에 대한 간단한 테스트 사례를 작성할 수있는 경우이 기사를 계속 읽을 수 있습니다. $provide
단위 테스트에서 시뮬레이션의 역할
• $get 각 단위 테스트의 작업은 코드 조각의 기능을 분리하여 테스트하는 것입니다. 테스트중인 시스템을 분리하는 것은 종속성이 다른 소스에서 나올 수 있고 시뮬레이션 할 객체의 책임을 완전히 이해해야하기 때문에 때로는 어려울 수 있습니다. $get JavaScript와 같이 전적으로 타이핑되지 않은 언어의 경우 시뮬레이션을 시뮬레이션 할 객체의 구조를 이해하기 쉽지 않기 때문에 시뮬레이션은 어렵습니다. 동시에, 유연성, 즉 테스트중인 시스템에서 현재 사용중인 객체의 일부만 시뮬레이션하고 나머지를 무시하는 유연성을 제공합니다.
Angularjs 테스트에서의 모의 AngularJS의 주요 목표 중 하나는 테스트 가능성이므로 핵심 팀은 테스트를보다 쉽게하기 위해 추가 노력을 기울이고

모듈의 일련의 시뮬레이션을 제공합니다. 이 모듈에는 AngularJS 애플리케이션에서 널리 사용되는 AngularJS 서비스 세트 (예 : angular-mocks, , 등) 주변의 시뮬레이션이 포함되어 있습니다. 이 모듈은 개발자가 테스트를 작성하는 데 걸리는 시간을 줄입니다. $http 이러한 시뮬레이션은 실제 비즈니스 응용 프로그램에 대한 테스트를 작성할 때 매우 유용합니다. 동시에 전체 응용 프로그램을 테스트하기에 충분하지 않습니다. 프레임 워크의 종속성을 조롱해야하지만 제 3 자 플러그인, 글로벌 객체 또는 응용 프로그램에서 생성 된 종속성의 종속성을 조롱하지 않아야합니다. 이 기사는 AngularJS 종속성 조롱에 대한 몇 가지 팁을 소개합니다. $timeout 시뮬레이션 서비스 $animate 서비스는 AngularJS 응용 프로그램에서 가장 일반적인 종속성 유형입니다. 이미 알고 있듯이 서비스는 AngularJS에서 과부하 된 용어입니다. 서비스, ​​공장, 가치, 상수 또는 제공자를 지칭 할 수 있습니다. 다음 섹션에서 제공자에 대해 논의 할 것입니다. 서비스는 다음 방법 중 하나로 시뮬레이션 할 수 있습니다.

주입 블록을 사용하여 실제 서비스 인스턴스를 얻고 서비스를 듣는 방법.
를 사용하여 시뮬레이션 서비스를 구현하십시오.
첫 번째 방법은 호출 서비스의 실제 메소드 구현으로 이어질 수 있기 때문에 첫 번째 방법이 마음에 들지 않습니다. 두 번째 방법을 사용하여 다음 서비스를 시뮬레이션합니다.

다음 코드 스 니펫은 위의 서비스의 시뮬레이션을 만듭니다.

위의 예는 Jasmine을 사용하여 스파이를 생성하지만 Sinon.js로 교체하여 동등한 기능을 달성 할 수 있습니다.
테스트에 필요한 모든 모듈을로드 한 후 모든 시뮬레이션을 만드는 것이 가장 좋습니다. 그렇지 않으면 서비스가로드 된 모듈에 정의되면 실제 구현은 시뮬레이션 된 구현을 대체합니다.
• 상수, 공장 및 값은 , 를 사용하여 별도로 시뮬레이션 할 수 있습니다.
• 시뮬레이션 제공 업체 $provide 시뮬레이션 제공 업체는 시뮬레이션 서비스와 유사합니다. 제공 업체를 작성할 때 준수 해야하는 모든 규칙도 조롱 할 때 따라야합니다. 다음 제공자를 고려하십시오 :
다음 코드 스 니펫은 위의 제공자에 대한 시뮬레이션을 만듭니다.
공급자와 다른 싱글 톤에 대한 참조를 얻는 것의 차이점은 현재 제공자가 공장으로 변환되기 때문에 제공자가

블록으로 제공되지 않는다는 것입니다. 블록을 사용하여 객체를 얻을 수 있습니다.

제공자를 정의하는 경우 테스트에서

angular.module('sampleServices', [])
  .service('util', function() {
    this.isNumber = function(num) {
      return !isNaN(num);
    };

    this.isDate = function(date) {
      return (date instanceof Date);
    };
  });

메소드도 구현해야합니다. 테스트 파일의 <🎜 🎜> 함수에 정의 된 함수가 필요하지 않은 경우 빈 함수에 할당 할 수 있습니다.

아날로그 모듈 <🎜 🎜> 테스트 파일에로드 할 모듈에 다른 모듈이 필요한 경우 모든 필요한 모듈이로드되지 않으면 테스트중인 모듈을로드 할 수 없습니다. 이러한 모든 모듈을로드하면 실제 서비스 방법이 테스트에서 호출 될 수 있기 때문에 때때로 테스트가 실패합니다. 이러한 어려움을 피하기 위해 측정 된 모듈을로드하기 위해 가상 모듈을 만들 수 있습니다.

예를 들어, 다음 코드가 예제 서비스가 추가 된 모듈을 나타내고 있다고 가정합니다.

다음 코드는 샘플 서비스의 테스트 파일의

블록입니다.

<,> 또는 위에서 정의 된 가상 모듈에 시뮬레이션 된 서비스 구현을 추가 할 수 있습니다.

약속으로 돌아가는 방법을 시뮬레이션합니다 <-to> 약속을 사용하지 않고는 엔드 투 엔드 각도 응용 프로그램을 작성하는 것이 어려울 수 있습니다. 약속을 반환하는 방법에 의존하는 코드 스 니펫 테스트는 도전이됩니다. 정상적인 Jasmine Spy는 테스트중인 기능이 실제 약속 구조의 객체를 기대하기 때문에 일부 테스트 사례가 실패합니다.

비동기 방법은 정적 값으로 약속을 반환하는 다른 비동기 방법을 사용하여 시뮬레이션 할 수 있습니다. 다음 공장을 고려하십시오 : <🎜 🎜>

angular.module('sampleServices', [])
  .service('util', function() {
    this.isNumber = function(num) {
      return !isNaN(num);
    };

    this.isDate = function(date) {
      return (date instanceof Date);
    };
  });

우리는 위의 공장에서

함수를 테스트합니다. 우리가 볼 수 있듯이, 그것은 beforeEach

를 제공하는 방법에 의존합니다.

module(function($provide) {
  $provide.service('util', function() {
    this.isNumber = jasmine.createSpy('isNumber').andCallFake(function(num) {
      // 模拟实现
    });
    this.isDate = jasmine.createSpy('isDate').andCallFake(function(num) {
      // 模拟实现
    });
  });
});

// 获取模拟服务的引用
var mockUtilSvc;

inject(function(util) {
  mockUtilSvc = util;
});

메소드의 기능을 테스트하기 전에 서비스와 방법을 시뮬레이션해야합니다.

<🎜 🎜>

서비스에는 정적 값을 사용하여 약속을 해결하거나 거부 할 수있는 <🎜 🎜> 및

방법이 있습니다. 이러한 방법은 약속을 반환하는 조롱 방법을 테스트하는 데 매우 유용합니다. 다음 코드 스 니펫은

공장을 시뮬레이션합니다
<<> Promise는 다음 다이제스트주기 후 작업을 완료합니다. 다이제스트 사이클은 실제 애플리케이션에서 지속적으로 실행되지만 테스트에서는 그렇지 않습니다. 그러므로 우리는 약속을 집행하기 위해 수동으로

를 전화해야합니다. 다음 코드 스 니펫은 샘플 테스트를 보여줍니다