Kiểm tra đơn vị định tuyến ui góc (trạng thái thành url)

Tôi đang gặp sự cố với đơn vị kiểm tra bộ định tuyến trong ứng dụng của mình, bộ định tuyến này được xây dựng trên bộ định tuyến Angular ui. Điều tôi muốn kiểm tra là liệu quá trình chuyển đổi trạng thái có thay đổi URL thích hợp hay không (sẽ có nhiều bài kiểm tra phức tạp hơn sau này, nhưng đây là lúc tôi bắt đầu.)

Đây là phần có liên quan trong mã ứng dụng của tôi:

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

Và mã thử nghiệm:

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

Các câu hỏi tương tự trên Stackoverflow (và mã kiểm tra chính thức của bộ định tuyến ui) đề xuất gói lệnh gọi $ state.go trong $ apply là đủ. Nhưng tôi đã làm điều đó và trạng thái vẫn không cập nhật. $ state.current.name vẫn trống.

Tôi cũng đang gặp vấn đề này, và cuối cùng đã tìm ra cách làm.

Đây là một trạng thái mẫu:

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

Bài kiểm tra đơn vị bên dưới sẽ bao gồm việc kiểm tra URL w / params và thực thi các giải pháp đưa vào các phụ thuộc của chính nó:

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

Nếu bạn chỉ muốn kiểm tra tên của trạng thái hiện tại, nó dễ sử dụng hơn $state.transitionTo('splash')

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

Tôi nhận thấy điều này hơi lạc đề, nhưng tôi đến đây từ Google để tìm kiếm một cách đơn giản để kiểm tra mẫu, bộ điều khiển và URL của tuyến đường.

$state.get('stateName')

sẽ cho bạn

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

trong các bài kiểm tra của bạn.

Vì vậy, các bài kiểm tra của bạn có thể trông giống như sau:

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

Đối với stateđiều đó mà không có 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');
        });
    });
});

GHI CHÚ:-

Đối với trạng thái lồng nhau, chúng tôi có thể cần cung cấp nhiều hơn một mẫu. Đối với người yêu cũ. nếu chúng ta có một nhà nước lồng nhau core.public.homevà mỗi state, tức là core, core.publicvà core.public.homecó một templateUrlđịnh nghĩa, chúng ta sẽ có thêm $templateCache.put()cho mỗi bang templateUrlchủ chốt: -

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

Hi vọng điêu nay co ich. Chúc may mắn.

Bạn có thể sử dụng $state.$current.locals.globalsđể truy cập tất cả các giá trị đã phân giải (xem đoạn mã).

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

Trong ui-router 1.0.0 (hiện đang là phiên bản beta), bạn có thể thử gọi $resolve.resolve(state, locals).then((resolved) => {})trong phần thông số kỹ thuật. Ví dụ: https://github.com/lucassus/angular-webpack-seed/blob/9a5af271439fd447510c0e3e87332959cb0eda0f/src/app/contacts/one/one.state.spec.js#L29

Nếu bạn không quan tâm đến bất kỳ điều gì trong nội dung của mẫu, bạn có thể chỉ cần giả lập $ templateCache:

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