在AngularJS中測試配置階段的單元

我在學習如何爲AngularJS編寫單元測試。我開始之初，與在AngularJS中測試配置階段的單元

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

我想測試裏面有什麼配置。以下是有關部分看怎麼樣：

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

我想，以測試該代碼最簡單的方法是注入嘲笑爲$stateProvider和$locationProvider。然後執行配置階段。之後，主張$stateProvider和$locationProvider應該如何。

如果我的想法是正確的，那麼我的問題是，我不知道如何將這些模擬注入模塊並從測試中執行配置階段。

你能告訴我如何測試這段代碼嗎？

來源

2013-09-24 M.K. Safi

你有沒有找到一個合適的解決方案來處理？ – Brune

@Brune Nope。但是下面有一個新的答案，我沒有看過。 –

您可以使用Jasmine'screateSpy和createSpyObj創建模擬服務，並 angular-mocks.js注入他們。在這裏注入嘲笑

在this test我寫了我的指令，你可以看到如下：

9號線包括從谷歌CDN
角嗤笑第19行& 20創建假的rootScope對象
第21行& 22創建假q服務
線42設置的提供者注入假貨到服務
線48實例化具有假貨服務（該服務被注入被測指令）
線53呼叫被測試的方法
55號線 - 對假貨的狀態59斷言

來源

2013-09-24 15:44:36 Jason

Jason，最後一個鏈接被破壞。另外，我的挑戰並不在於一般注入嘲弄的依賴關係。這只是將**模擬**提供程序**注入** config **塊。 –

MK，你是否能夠找到相同的解決方案？我遇到了同樣的問題，無法測試該指令。 –

@PriyabratNanda Nope。但是下面有一個新的答案，我沒有看過。 –

以下是如何訪問您的供應商進行單元測試：

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想出了一個非常簡單的注入模擬的方法，但是你可以很容易地監視方法，這足夠接近。如果您需要從依賴提供程序的$ get（）方法返回的模擬，則可以使用另一個間諜來完成此操作。這個例子說明了返回一個模擬並設置一個額外的間諜。

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

來源

2014-07-22 13:19:19 fidian

我會創建一個指向函數的工廠...然後該函數在配置函數中也被調用。這樣，你可以進行單元測試工廠：

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

您可以單元測試的配置工廠並注入嘲笑，就像你會與任何其他工廠。

來源

2014-11-12 16:18:24 dprothero

在AngularJS中測試配置階段的單元

回答

相關問題