AngularJS 테스트 팁 : 테스트 지침

키 포인트

AngularJS의 지침은 DOM 작업에 중요하며 신청서의 가용성에 크게 영향을 미치기 때문에 단위 테스트에서는 무시할 수 없습니다. 명령 테스트에는 지침이 수동으로 컴파일되는 테스트 환경을 설정하고 지침 기능을 분리하기 위해 필요한 개체 및 서비스를 조롱하는 것이 포함됩니다.

지시서의
• 기능은 DOM 운영 및 이벤트 처리와 같은 핵심 논리 구현을 담당하며 AngularJS의 테스트 유틸리티를 사용하여 철저히 테스트해야합니다.
는 테스트 중에 명령어에서 사용하는 템플릿을
• 에 통합하여 테스트 프로세스를 단순화합니다.
고립 된 스코틀랜드 인 지침을 테스트 할 때, 스코프의 속성이 예상대로 올바르게 바인딩되고 실행되도록하는데, 이는 응용 프로그램에서 지시문의 의도 된 기능에 중요합니다.
• link 단위 테스트는 소프트웨어 개발의 필수 요소이며 코드 오류를 줄이는 데 도움이됩니다. 테스트는 코드 품질을 향상시키기위한 몇 가지 작업 중 하나입니다. AngularJS는 테스트 가능성을 염두에두고 작성되므로 프레임 워크 위에 작성된 모든 코드를 쉽게 테스트 할 수 있습니다. 테스트에 대한 마지막 게시물에서 단위 테스트 컨트롤러, 서비스 및 제공 업체를 다루었습니다. 이 기사는 계속 지시 테스트에 대해 논의합니다. 지시문은 JavaScript 코드에서 객체로 사용되지 않고 응용 프로그램의 HTML 템플릿에서 사용되기 때문에 다른 구성 요소와 다릅니다. 우리는 DOM 운영을 수행하기위한 지침을 작성하며 중요한 역할을하기 때문에 단위 테스트에서는 무시할 수 없습니다. 또한 응용 프로그램의 가용성에 직접적인 영향을 미칩니다. AngularJS 테스트의 조롱 종속성에 대한 이전 기사를 확인하는 것이 좋습니다.이 기사의 해당 기사의 일부 기술을 사용할 것입니다. 이 튜토리얼에서 개발 된 코드를 시험해 보려면 설정 한 github 저장소를 확인할 수 있습니다.
명령 테스트
• 지침은 AngularJS에서 가장 중요하고 복잡한 구성 요소입니다. 지침 테스트는 기능처럼 호출되지 않기 때문에 까다 롭습니다. 응용 프로그램에서는 지시문이 HTML 템플릿에 선언적으로 적용됩니다. 템플릿을 컴파일하고 사용자가 지침과 상호 작용하면 해당 작업이 실행됩니다. 단위 테스트를 수행 할 때는 사용자 작업을 자동화하고 수동으로 HTML을 컴파일하여 지침의 기능을 테스트해야합니다. $templateCache
테스트 명령의 객체를 설정하십시오 모든 언어를 테스트하거나 프레임 워크에서 논리 스 니펫을 사용하는 것과 마찬가지로 테스트 지침을 시작하기 전에 필요한 객체에 대한 참조를 가져와야합니다. 여기서 만들어야 할 핵심 개체는 테스트 할 지침을 포함하는 요소입니다. 지침이 적용되도록 지정된 지시문으로 HTML 조각을 컴파일해야합니다. 예를 들어, 다음 지침을 고려하십시오 :
지시의 수명주기가 시작되고 컴파일 및 링크 기능이 실행됩니다.

서비스를 사용하여 HTML 템플릿을 수동으로 컴파일 할 수 있습니다. 다음 블록은 위의 지침을 컴파일합니다

<code class="language-javascript">angular.module('sampleDirectives', []).directive('firstDirective', function() {
  return function(scope, elem){
    elem.append('This span is appended from directive.');
  };
});</code>

컴파일 후에는 명령어의 수명주기가 시작됩니다. 다음 다이제스트주기 후, 지시어 객체는 페이지에 나타나는 것과 동일한 상태에 있습니다. 지침이 기능을 구현하기위한 서비스에 의존하는 경우, 서비스 방법에 대한 호출을 테스트에서 확인할 수 있도록 지침을 컴파일하기 전에 서비스를 가장해야합니다. 다음 섹션에서 예를 볼 수 있습니다.

테스트 링크 함수

기능은 DDOS (Directive Definition Objects)에서 가장 일반적으로 사용되는 속성입니다. 여기에는 명령의 대부분의 핵심 논리가 포함되어 있습니다. 이 논리에는 간단한 DOM 운영, 이벤트 게시/구독 이벤트 듣기, 객체 또는 속성 변경 모니터링, 서비스 호출, UI 이벤트 처리 등이 포함됩니다. 우리는 이러한 시나리오의 대부분을 다루려고 노력할 것입니다.

DOM 작동

이전 섹션에 정의 된 지침의 경우부터 시작하겠습니다. 이 지침은 지침을 적용하는 요소의 내용에 스팬 요소를 추가합니다. 지침 내부의 스팬을 찾아 테스트 할 수 있습니다. 다음 테스트 사례는이 동작을 주장합니다

옵저버 link

지침은 범위의 현재 상태에 따라 작용하기 때문에 범위의 상태가 변경 될 때 지침을 업데이트해야합니다. 관찰자의 단위 테스트는 데이터를 조작하고 를 호출하여 실행하도록 강제로 실행해야하며, Digest주기 후에 명령 상태를 점검해야합니다. 다음 코드는 위의 지침의 약간 수정 된 버전입니다. 범위의 필드를 사용하여 스팬 내부 텍스트를 바인딩합니다.

테스트이 지침은 첫 번째 지침과 유사하며 업데이트를 확인해야합니다. 다음 테스트 사례는 명령 상태가 변경되었는지 여부를 확인합니다. 테스트 속성에 관찰자에게도 동일한 기술을 사용할 수도 있습니다.

(후속 컨텐츠는 공간 제한으로 인해 단순화되고 요약 될 것이며 핵심 테스트 방법과 아이디어는 유지됩니다)

dom event

jqlite 's

<code class="language-javascript">var compile, scope, directiveElem;

beforeEach(function(){
  module('sampleDirectives');

  inject(function($compile, $rootScope){
    compile = $compile;
    scope = $rootScope.$new();
  });

  directiveElem = getCompiledElement();
});

function getCompiledElement(){
  var element = angular.element('<div first-directive=""></div>');
  var compiledElement = compile(element)(scope);
  scope.$digest();
  return compiledElement;
}</code>

를 사용하여 클릭 이벤트를 시뮬레이션하고 결과를 확인할 수 있습니다.

명령 템플릿 테스트 테스트를 단순화하기 위해 가있는 예압 템플릿. 지시 범위 스코프 테스트

속성 바인딩을 확인하고 방법이 고장 범위를 요구합니다.

$digest 테스트가 필요합니다

엄격하고 선택적인 종속성을 포함하여 지침 종속성을 확인하십시오.

<code class="language-javascript">it('should have span element', function () {
  var spanElement = directiveElem.find('span');
  expect(spanElement).toBeDefined();
  expect(spanElement.text()).toEqual('This span is appended from directive.');
});</code>

교체 테스트

명령 요소가 교체되었는지 확인하십시오.

transclude transclude test

<code class="language-javascript">angular.module('sampleDirectives').directive('secondDirective', function(){
  return function(scope, elem){
    var spanElement = angular.element('' + scope.text + '');
    elem.append(spanElement);

    scope.$watch('text', function(newVal, oldVal){
      spanElement.text(newVal);
    });
  };
});</code>

지침이 번역 된 컨텐츠를 올바르게 처리하는지 확인하십시오.

요약

이 기사에서 볼 수 있듯이 AngularJS의 다른 개념보다 지침이 테스트하기가 더 어렵습니다. 동시에 응용 프로그램의 중요한 부분을 제어하기 때문에 무시할 수 없습니다. AngularJS의 테스트 생태계를 통해 프로젝트의 모든 부분을 더 쉽게 테스트 할 수 있습니다. 이 튜토리얼을 통해 이제 테스트 지침에 더 자신감을 갖기를 바랍니다. 의견 섹션에서 당신의 생각을 알려주십시오. 이 튜토리얼에서 개발 된 코드를 시험해 보려면 설정 한 github 저장소를 확인할 수 있습니다.

(FAQS 부분은 기사의 길이로 인해 여기서 생략됩니다. 핵심 내용은 위에 다루었습니다.)

위 내용은 AngularJS 테스트 팁 : 테스트 지침의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!