각도 UI 라우터 유닛 테스트(URL 상태)

각도 UI 라우터 유닛 테스트(URL 상태)

Angular UI 라우터를 기반으로 하는 어플리케이션에서 라우터를 테스트하는 데 문제가 있습니다.테스트하고 싶은 것은 상태 전환이 URL을 적절하게 변경하는지 여부입니다(나중에 더 복잡한 테스트가 있을 예정이지만 여기서부터 시작합니다).

애플리케이션 코드의 관련 부분은 다음과 같습니다.

angular.module('scrapbooks')
 .config( function($stateProvider){
    $stateProvider.state('splash', {
       url: "/splash/",
       templateUrl: "/app/splash/splash.tpl.html",
       controller: "SplashCtrl"
    })
 })

테스트 코드:

it("should change to the splash state", function(){
  inject(function($state, $rootScope){
     $rootScope.$apply(function(){
       $state.go("splash");
     });
     expect($state.current.name).to.equal("splash");
  })
})

Stackoverflow(및 공식 UI 라우터 테스트 코드)에 대한 유사한 질문에서는 $state.go 콜을 $apply로 감싸면 충분하다는 것을 알 수 있습니다.하지만 그렇게 했는데 상태가 아직 업데이트되지 않았습니다.$state.current.name은 비어 있습니다.

나도 이 문제를 겪었고, 마침내 방법을 알아냈어.

다음은 상태 예를 제시하겠습니다.

angular.module('myApp', ['ui.router'])
.config(['$stateProvider', function($stateProvider) {
    $stateProvider.state('myState', {
        url: '/state/:id',
        templateUrl: 'template.html',
        controller: 'MyCtrl',
        resolve: {
            data: ['myService', function(service) {
                return service.findAll();
            }]
        }
    });
}]);

다음 유닛 테스트에서는 파라미터에 의한 URL 테스트와 자체 의존관계를 주입하는 해결의 실행에 대해 설명합니다.

describe('myApp/myState', function() {

  var $rootScope, $state, $injector, myServiceMock, state = 'myState';

  beforeEach(function() {

    module('myApp', function($provide) {
      $provide.value('myService', myServiceMock = {});
    });

    inject(function(_$rootScope_, _$state_, _$injector_, $templateCache) {
      $rootScope = _$rootScope_;
      $state = _$state_;
      $injector = _$injector_;

      // We need add the template entry into the templateCache if we ever
      // specify a templateUrl
      $templateCache.put('template.html', '');
    })
  });

  it('should respond to URL', function() {
    expect($state.href(state, { id: 1 })).toEqual('#/state/1');
  });

  it('should resolve data', function() {
    myServiceMock.findAll = jasmine.createSpy('findAll').and.returnValue('findAll');
    // earlier than jasmine 2.0, replace "and.returnValue" with "andReturn"

    $state.go(state);
    $rootScope.$digest();
    expect($state.current.name).toBe(state);

    // Call invoke to inject dependencies and run function
    expect($injector.invoke($state.current.resolve.data)).toBe('findAll');
  });
});

현재 상태 이름만 확인하려는 경우 사용하기 쉽습니다.$state.transitionTo('splash')

it('should transition to splash', inject(function($state,$rootScope){
  $state.transitionTo('splash');
  $rootScope.$apply();
  expect($state.current.name).toBe('splash');
}));

약간 주제에서 벗어난 것은 알고 있습니다만, 저는 구글에서 루트의 템플릿, 컨트롤러, URL을 테스트하는 간단한 방법을 찾고 있습니다.

$state.get('stateName')

너에게 줄 것이다

{
  url: '...',
  templateUrl: '...',
  controller: '...',
  name: 'stateName',
  resolve: {
    foo: function () {}
  }
}

테스트에서 확인하세요.

테스트 결과는 다음과 같습니다.

var state;
beforeEach(inject(function ($state) {
  state = $state.get('otherwise');
}));

it('matches a wild card', function () {
  expect(state.url).toEqual('/path/to/page');
});

it('renders the 404 page', function () {
  expect(state.templateUrl).toEqual('views/errors/404.html');
});

it('uses the right controller', function () {
  expect(state.controller).toEqual(...);
});

it('resolves the right thing', function () {
  expect(state.resolve.foo()).toEqual(...);
});

// etc

의 경우state없는 것resolve:

// TEST DESCRIPTION
describe('UI ROUTER', function () {
    // TEST SPECIFICATION
    it('should go to the state', function () {
        module('app');
        inject(function ($rootScope, $state, $templateCache) {
            // When you transition to the state with $state, UI-ROUTER
            // will look for the 'templateUrl' mentioned in the state's
            // configuration, so supply those templateUrls with templateCache
            $templateCache.put('app/templates/someTemplate.html');
            // Now GO to the state.
            $state.go('someState');
            // Run a digest cycle to update the $state object
            // you can also run it with $state.$digest();
            $state.$apply();

            // TEST EXPECTATION
            expect($state.current.name)
                .toBe('someState');
        });
    });
});

주의:-

중첩 상태의 경우 여러 템플릿을 제공해야 할 수 있습니다.예를 들어, 중첩된 상태일 경우core.public.home그리고 각각state,예.core,core.public그리고.core.public.home가 있다templateUrl정의되어 있습니다.$templateCache.put()각 주별로templateUrl키:-

$templateCache.put('app/templates/template1.html'); $templateCache.put('app/templates/template2.html'); $templateCache.put('app/templates/template3.html');

이게 도움이 됐으면 좋겠다.행운을 빌어요.

사용할 수 있습니다.$state.$current.locals.globals모든 해결된 값에 액세스합니다(코드 스니펫 참조).

// Given
$httpBackend
  .expectGET('/api/users/123')
  .respond(200, { id: 1, email: 'test@email.com');
                                                       
// When                                                       
$state.go('users.show', { id: 123 });
$httpBackend.flush();                            
       
// Then
var user = $state.$current.locals.globals['user']
expact(user).to.have.property('id', 123);
expact(user).to.have.property('email', 'test@email.com');

ui-router 1.0.0(현재 베타)에서 호출을 시도할 수 있습니다.$resolve.resolve(state, locals).then((resolved) => {})사양에 기재되어 있습니다.예를 들어 https://github.com/lucassus/angular-webpack-seed/blob/9a5af271439fd447510c0e3e87332959cb0eda0f/src/app/contacts/one/one.state.spec.js#L29 입니다.

템플릿 내용에 관심이 없는 경우 $templateCache를 조롱할 수 있습니다.

beforeEach(inject(function($templateCache) {
        spyOn($templateCache,'get').and.returnValue('<div></div>');
}

언급URL : https://stackoverflow.com/questions/20433485/angular-ui-router-unit-testing-states-to-urls