Đơn vị kiểm tra pha cấu hình trong AngularJS

Question

Tôi đang cố gắng tìm hiểu cách viết các bài kiểm tra đơn vị cho AngularJS. Tôi bắt đầu ngay từ đầu, với

angular.module(...).config(...)

Tôi muốn thử nghiệm những gì bên trong config. Đây là cách các phần có liên quan như sau:

angular.module('ogApp', ['ngCookies','ui.router','ogControllers','ogServices','ogDirectives','ogMetricsData']) 

.config([ 
    '$stateProvider', '$locationProvider', 
    function ($stateProvider, $locationProvider) { 
    $stateProvider. 
     state('login', { 
     templateUrl: 'connect.html' 
     }).state('addViews', { 
     templateUrl: 'add-views.html' 
     }).state('dashboard', { 
     templateUrl: 'dashboard.html' 
     }); 
    $locationProvider. 
     html5Mode(true). 
     hashPrefix('!'); 
    } 
]); 

Tôi đang nghĩ cách dễ nhất để kiểm tra mã này là để tiêm mocks cho $stateProvider và $locationProvider. Sau đó, thực hiện giai đoạn cấu hình. Sau đó, xác nhận cách thức $stateProvider và $locationProvider sẽ giống như thế.

Nếu suy nghĩ của tôi là đúng, thì vấn đề của tôi là, tôi không biết làm thế nào để tiêm những mocks đó vào mô-đun và thực thi giai đoạn cấu hình của nó từ một thử nghiệm.

Bạn có thể chỉ cho tôi cách kiểm tra mã này không?

Answer 1

Bạn có thể sử dụng Jasmine'screateSpy và createSpyObj để tạo dịch vụ giả và angular-mocks.js để tiêm chúng.

More hướng dẫn về việc tiêm mocks đây: Injecting a mock into an AngularJS service

Trong this test tôi đã viết cho một chỉ thị của tôi, bạn có thể thấy như sau:

• Dòng 9 Bao gồm góc-giả từ google cdn
• Dòng 19 & 20 Tạo đối tượng rootScope giả
• Dòng 21 & 22 Tạo dịch vụ q giả mạo
• Dòng 42 Thiết lập các nhà cung cấp để tiêm giả vào dịch vụ
• Dòng 48 nhanh chóng các dịch vụ mà có hàng giả (dịch vụ này được tiêm vào các chỉ thị được kiểm tra)
• Dòng 53 Gọi phương pháp đang được thử nghiệm
• dòng 55-59 Khẳng định về tình trạng của hàng giả

Answer 2

Dưới đây là làm thế nào để truy cập vào nhà cung cấp cho đơn vị kiểm tra:

describe('yourProvider', function() { 
    var provider; 

    // Get the provider 
    beforeEach(module('app', function (yourProvider) { 
     // This callback is only called during instantiation 
     provider = yourProvider; 
    }); 

    // Kick off the above function 
    beforeEach(inject(function() {})); 

    it('does its thing', function() { 
     expect(provider.someMethod()).toEqual('your results'); 
    }); 
}); 

tôi không có ngươi Tôi đã tìm ra một cách thực sự đơn giản để tiêm một mô hình, nhưng bạn có thể dễ dàng theo dõi các phương pháp và đủ gần. Nếu bạn cần một mô hình trả về từ nhà cung cấp phụ thuộc, phương thức $ get() bạn có thể làm điều đó với một điệp viên khác. Ví dụ này minh họa việc trả về một giả lập và thiết lập một gián điệp bổ sung.

describe('yourProvider', function() { 
    var dependency, mock, provider; 

    beforeEach(module('app', function (dependencyProvider) { 
     dependency = dependencyProvider; 
     mock = jasmine.createSpyObj('dependency', [ 
      'methodsGoHere' 
     ]); 
     spyOn(dependency, 'methodName'); 
     spyOn(dependency, '$get').andReturn(mock); 
    }, function (yourProvider) { 
     provider = yourProvider; 
    }); 

    beforeEach(inject(function() {})); 

    it('does its thing', function() { 
     expect(provider.someMethod()).toEqual('your results'); 
     expect(dependency.methodName).toHaveBeenCalled(); 
    }); 

    it('returns the mock from $get', function() { 
     expect(dependency.$get).toBe(mock); 
    }); 
}); 

Answer 3

Tôi sẽ tạo một nhà máy trỏ đến chức năng ... chức năng đó sau đó cũng được gọi trong hàm cấu hình. Bằng cách đó bạn có thể kiểm tra đơn vị nhà máy:

angular.module('ogApp', ['ngCookies','ui.router','ogControllers','ogServices','ogDirectives','ogMetricsData']); 

// Configuration factory for unit testing 
angular.module('ogApp') 
.factory('configuration', configuration); 

configuration.$inject = ['$stateProvider', '$locationProvider']; 

function configuration($stateProvider, $locationProvider) { 
    return { 
    applyConfig: function() { 
     $stateProvider. 
     state('login', { 
      templateUrl: 'connect.html' 
     }).state('addViews', { 
      templateUrl: 'add-views.html' 
     }).state('dashboard', { 
      templateUrl: 'dashboard.html' 
     }); 
     $locationProvider. 
     html5Mode(true). 
     hashPrefix('!'); 
    }; 
} 

// Call above configuration function from Angular's config phase 
angular.module('ogApp') 
.config([ 
    '$stateProvider', '$locationProvider', 
    function ($stateProvider, $locationProvider) { 
    var config = configuration($stateProvider, $locationProvider); 
    config.applyConfig(); 
    } 
]); 

Bạn có thể kiểm tra nhà máy cấu hình và lắp mocks giống như bất kỳ nhà máy nào khác.