Angular UI Router-Unit-Test (Zustände zu URLs)

Ich habe einige Probleme beim Testen des Routers in meiner Anwendung, die auf dem Angular UI-Router basiert. Ich möchte testen, ob Statusübergänge die URL entsprechend ändern (es wird später kompliziertere Tests geben, aber hier fange ich an.)

Hier ist der relevante Teil meines Bewerbungscodes:

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

Und der Testcode:

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");
  })
})

Ähnliche Fragen zu Stackoverflow (und dem offiziellen Testcode des UI-Routers) legen nahe, dass das Aufrufen des Aufrufs $ state.go in $ apply ausreichen sollte. Aber ich habe das getan und der Zustand wird immer noch nicht aktualisiert. $ state.current.name bleibt leer.

Ich hatte auch dieses Problem und fand schließlich heraus, wie es geht.

Hier ist ein Beispielstatus:

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();
            }]
        }
    });
}]);

Der folgende Komponententest behandelt das Testen der URL mit Parametern und das Ausführen der Auflösungen, die ihre eigenen Abhängigkeiten einfügen:

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');
  });
});

Wenn Sie nur den Namen des aktuellen Status überprüfen möchten, ist die Verwendung einfacher $state.transitionTo('splash')

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

Mir ist klar, dass dies ein wenig vom Thema abweicht, aber ich bin von Google hierher gekommen, um nach einer einfachen Möglichkeit zu suchen, die Vorlage, den Controller und die URL einer Route zu testen.

$state.get('stateName')

werde dir geben

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

in Ihren Tests.

Ihre Tests könnten also ungefähr so ​​aussehen:

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

Für ein statedas ohne 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');
        });
    });
});

HINWEIS:-

Für einen verschachtelten Status müssen wir möglicherweise mehr als eine Vorlage angeben. Zum Beispiel. wenn wir eine verschachtelte Zustand haben core.public.homeund jeder state, das heißt core, core.publicund core.public.homehat sich zu einem templateUrldefinierten, werden wir hinzufügen müssen $templateCache.put()für jeden Zustand der templateUrlSchlüssel: -

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

Hoffe das hilft. Viel Glück.

Sie können $state.$current.locals.globalsdamit auf alle aufgelösten Werte zugreifen (siehe Codefragment).

// Given
$httpBackend
  .expectGET('/api/users/123')
  .respond(200, { id: 1, email: '[email protected]');
                                                       
// 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', '[email protected]');

In UI-Router 1.0.0 (derzeit Beta) können Sie versuchen, $resolve.resolve(state, locals).then((resolved) => {})die Spezifikationen aufzurufen . Zum Beispiel https://github.com/lucassus/angular-webpack-seed/blob/9a5af271439fd447510c0e3e87332959cb0eda0f/src/app/contacts/one/one.state.spec.js#L29

Wenn Sie an nichts im Inhalt der Vorlage interessiert sind, können Sie einfach $ templateCache verspotten:

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