AngularJS 테스트 : 부트 스트랩 블록, 경로, 이벤트 및 애니메이션

키 포인트

단위 테스트는 소프트웨어 개발, 특히 수십만 개의 JavaScript 코드를 포함하는 응용 프로그램의 경우 소프트웨어 개발에 중요합니다. AngularJS는 코드 테스트를보다 쉽게 ​​만들기 위해 종속성 주입 (DI)과 같은 기능을 지원합니다. 구성 및 실행 블록은 모듈의 수명주기 시작시 실행되며 중요한 논리가 포함되어 있습니다. 그것들은 다른 구성 요소처럼 직접 호출 될 수 없으므로 테스트를 까다로워 지지만 중요한 역할로 인해 무시할 수 없습니다.

angularjs는

이벤트를 통해 이벤트 집계를 제공하여 객체가 서로에 대해 모르더라도 서로 상호 작용할 수 있습니다. 단위 테스트는 분리하여 작성되므로 테스트 사양은 기능을 테스트하기 위해 한쪽 끝을 시뮬레이션해야합니다.
• 라우팅은 사용자가 응용 프로그램에서 탐색하는 방법을 정의하며 모든 변경으로 인해 사용자 경험이 잘못 될 수 있습니다. 따라서 라우팅도 테스트해야합니다. AngularJS 응용 프로그램에서 가장 일반적으로 사용되는 라우터는 Ngroute 및 UI-Router입니다.
AngularJS의 애니메이션 테스트는 테스트 지침보다 간단하며 라이브러리에는 모듈이 포함되어 있어이 프로세스를 단순화합니다. AngularJS는 초기 바인딩 속도를 높이기 위해 첫 번째 다이제스트 루프가 완료 될 때까지 애니메이션이 실행되는 것을 방지합니다.
완전히 기능적인 소프트웨어를 구축하고 제공하는 과정에서 소프트웨어의 정확성과 품질을 확인하기 위해 다양한 기술을 적용합니다. 단위 테스트는 기술 중 하나입니다. 많은 조직은 응용 프로그램의 잠재적 문제를 찾고 수정하는 데 드는 비용을 줄이기 때문에 단위 테스트에 중점을 둡니다. 수십만 줄의 JavaScript 코드가 포함 된 응용 프로그램을 개발하기 시작했을 때 코드 테스트를 피할 수 없었습니다. 일부 JavaScript 개발자는 런타임 전에 언어의 동작을 알 수 없기 때문에 JavaScript 테스트가 더 중요하다고 말합니다. 고맙게도 AngularJS는 종속성 주입 (DI)과 같은 기능을 지원 하여이 프레임 워크를 사용하여 테스트 코드를 작성합니다. 이전 기사에서 시뮬레이션에 대한 몇 가지 팁, 컨트롤러, 서비스 및 제공 업체를 테스트하는 방법 및 지침을 테스트하는 방법에 대해 논의했습니다. 이 기사에서는 부팅 블록 (구성 블록, 실행 블록 및 라우팅 해상도 블록 포함), 스코어링 된 이벤트 및 AngularJS 응용 프로그램에 대한 테스트를 도입합니다. 이 기사에서 사용한 코드를 GitHub 저장소에서 다운로드 할 수 있으며 테스트 실행에 대한 지침도 찾을 수 있습니다.
• $scope 테스트 구성 및 실행 블록 $emit/$broadcast 구성 및 실행 블록은 모듈 수명주기의 시작 부분에서 실행됩니다. 여기에는 모듈, 위젯 또는 응용 프로그램의 작동 방식을 제어하기위한 중요한 논리가 포함되어 있습니다. 그것들을 테스트하는 것은 다른 구성 요소처럼 직접 호출 할 수 없기 때문에 약간 까다 롭습니다. 동시에, 그들의 역할이 중요하기 때문에 무시할 수 없습니다. 다음 구성 및 실행중인 블록을 고려하십시오

  angular.module('configAndRunBlocks', ['ngRoute'])
      .config(function ($routeProvider) {
      $routeProvider.when('/home', {
          templateUrl: 'home.html',
          controller: 'HomeController',
          resolve: {
              bootstrap: ['$q', function ($q) {
                  return $q.when({
                      prop: 'value'
                  });
              }]
          }
      })
          .when('/details/:id', {
          templateUrl: 'details.html',
          controller: 'DetailsController'
      })
          .otherwise({
          redirectTo: '/home'
      });
  })
      .run(function ($rootScope, messenger) {
  
      messenger.send('Bootstrapping application');
      $rootScope.$on('$locationChangeStart', function (event, next, current) {
          messenger.send('Changing route to ' + next + ' from ' + current);
      });
  });

  테스트 제공 업체의 경우와 유사하게 구성을 테스트하고 블록에서 기능을 실행하기 전에 모듈이로드되어 있는지 확인해야합니다. 따라서 빈 분사 블록을 사용하여 모듈을로드합니다. 다음 코드 스 니펫은 위 블록에 사용 된 종속성을 시뮬레이션하고 모듈을로드합니다.

  나는 나중에이 기사에서 등록 된 경로를 테스트하기 때문에 고의적으로

  객체를 시뮬레이션하지 않았다. 이제 모듈이로드되고 구성 및 실행 블록이 실행됩니다. 그래서 우리는 그들의 행동 테스트를 시작할 수 있습니다. 구성 블록이 경로를 등록하므로 올바른 경로를 등록하는지 확인할 수 있습니다. 예상 경로 수가 등록되어 있는지 테스트합니다. 다음 테스트는 구성 블록의 기능을 확인합니다.

  describe('config and run blocks', function () {
      var routeProvider, messenger;
  
      beforeEach(function () {
          module('ngRoute');
  
          module(function ($provide, $routeProvider) {
              routeProvider = $routeProvider;
              spyOn(routeProvider, 'when').andCallThrough();
              spyOn(routeProvider, 'otherwise').andCallThrough();
  
              messenger = {
                  send: jasmine.createSpy('send')
              };
              $provide.value('messenger', messenger);
          });
  
          module('configAndRunBlocks');
      });
  
      beforeEach(inject());
  });

  샘플 코드의 실행 블록은 서비스를 호출하고 이벤트를 등록합니다. 우리는이 기사의 뒷부분 에서이 이벤트를 테스트 할 것입니다. 현재 서비스 방법에 대한 통화를 테스트 해 봅시다 :

  $routeProvider (테스트 범위 이벤트, 라우팅, 구문 분석 블록 및 애니메이션에 대한 후속 설명은 공간 제한으로 인해 여기에서 생략됩니다. 완전한 테스트 코드 예제는 원래 GitHub 리포지토리를 참조하십시오)

  describe('config block tests', function () {
      it('should have called registered 2 routes', function () {
          //Otherwise internally calls when. So, call count of when has to be 3
          expect(routeProvider.when.callCount).toBe(3);
      });
  
      it('should have registered a default route', function () {
          expect(routeProvider.otherwise).toHaveBeenCalled();
      });
  });

  . 결론
  이 기사를 통해 지난 2 년간 AngularJS 코드 테스트에서 배운 대부분의 테스트 기술을 소개합니다. 이것은 끝이 아니며 실제 응용 프로그램의 비즈니스 시나리오에 대한 테스트를 작성할 때 더 많은 것을 배울 수 있습니다. AngularJS 코드를 테스트하는 것에 대한 충분한 지식을 얻었 으면 좋겠습니다. 왜 기다려야합니까? 지금까지 작성한 모든 코드 라인에 대한 테스트를 작성하십시오!

  describe('run block tests', function () {
      var rootScope;
      beforeEach(inject(function ($rootScope) {
          rootScope = $rootScope;
      }));
      it('should send application bootstrap message', function () {
          expect(messenger.send).toHaveBeenCalled();
          expect(messenger.send).toHaveBeenCalledWith("Bootstrapping application");
      });
  });

  (원본 텍스트의 FAQ 부품도 공간 제한으로 인해 생략됩니다)

위 내용은 AngularJS 테스트 : 부트 스트랩 블록, 경로, 이벤트 및 애니메이션의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!