Jednostka testująca fazę konfiguracji AngularJS

Question

Próbuję nauczyć się pisać testy jednostek dla AngularJS. Zacząłem na początku, z

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

Chcę sprawdzić, co jest w środku config. Oto jak odpowiednie porcje wyglądać następująco:

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

myślę najprostszy sposób, aby przetestować ten kod jest wstrzykiwać mocks dla $stateProvider i $locationProvider. Następnie wykonaj fazę konfiguracji. Następnie sprawdź, jak powinny wyglądać $stateProvider i i .

Jeśli moje myślenie jest słuszne, mój problem polega na tym, że nie mam pojęcia, jak wprowadzić te mocks do modułu i wykonać jego fazę konfiguracji z testu.

Czy możesz pokazać mi, jak przetestować ten kod?

Answer 1

Można użyć Jasmine'screateSpy i createSpyObj tworzyć usługi makiety i angular-mocks.js je wstrzykiwać.

Więcej instrukcji na wstrzykiwanie mocks tutaj: Injecting a mock into an AngularJS service

W this test pisałem dotyczący dyrektywy kopalni można zobaczyć następujące:

• Linia 9 Dołącz kątową-makiety z google cdn
• Linia 19 & 20 Utwórz fałszywy obiekt rootScope
• Linia 21 & 22 Utwórz fałszywy serwis q
• Linia 42 Konfiguracja dostawcy wstrzyknąć podróbki do służby
• Linia 48 instancję usługa, która ma podróbek (ta usługa jest wtryskiwany do dyrektywy badanego)
• Linia 53 wywołać metodę testowane
• linia 55 - 59 Stwierdzenie o stanie podróbki

Answer 2

Oto jak uzyskać dostęp do swojego dostawcy dla testów jednostkowych:

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

nie macie t wymyślił naprawdę prosty sposób wstrzyknięcia sztuczki, ale możesz łatwo prześledzić metody i to jest wystarczająco blisko. Jeśli potrzebujesz sztuczki zwróconej przez dostawcę zależności. Metoda $ get() możesz to zrobić również z innym szpiegiem. Ten przykład ilustruje zwrócenie makiety i konfigurowanie dodatkowego szpiega.

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

Chciałbym utworzyć fabrykę, która wskazuje na funkcję ... ta funkcja jest również wywoływana w ramach funkcji konfiguracyjnej. W ten sposób można przetestować urządzenie fabryki:

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

można przetestować urządzenie fabrycznie konfiguracja i wstrzyknąć mocks tak jak w przypadku każdego innego producenta.