unit-testing - run - unit test angular 5

Unidad de pruebas de la fase de configuración en AngularJS.

Question

Estoy tratando de aprender cómo escribir pruebas unitarias para AngularJS. Comencé por el principio, con

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

Quiero probar lo que hay dentro de la configuración. Así es como se ven las partes relevantes:

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

Estoy pensando que la forma más fácil de probar este código es inyectar $stateProvider para $stateProvider y $locationProvider . Luego ejecuta la fase de configuración. Después de eso, afirma cómo deberían verse $stateProvider y $locationProvider .

Si mi razonamiento es correcto, entonces mi problema es que no tengo idea de cómo inyectar esas simulaciones en el módulo y ejecutar su fase de configuración desde una prueba.

¿Podría mostrarme cómo probar este código?

Answer 1

Aquí le indicamos cómo acceder a su proveedor para realizar pruebas unitarias:

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

Todavía no he descubierto una forma realmente sencilla de inyectar un simulacro, pero puedes espiar métodos fácilmente y eso es lo suficientemente cerca. Si necesita que se devuelva un simulacro del método del proveedor de dependencia. $ Get (), también puede hacerlo con otro espía. Este ejemplo ilustra cómo devolver un simulacro y configurar un espía adicional.

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 2

Me gustaría crear una fábrica que apunte a una función ... esa función también se llama dentro de la función de configuración. De esa manera usted puede probar la fábrica de la unidad:

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

Puede probar la configuración de la fábrica e inyectar simulacros como lo haría con cualquier otra fábrica.

Answer 3

Puede utilizar Jasmine''s createSpy y createSpyObj de createSpyObj para crear los servicios simulados y angular-mocks.js para inyectarlos.

Más instrucciones sobre cómo inyectar simulacros aquí: inyectar un simulacro en un servicio AngularJS

En esta prueba que escribí para una directiva mía puedes ver lo siguiente:

• Línea 9 Incluye simulación angular desde el cdn de google.
• Línea 19 y 20 Crear un objeto falso rootScope
• Línea 21 y 22 Crear un servicio falso q
• Línea 42 Configurar el proveedor para inyectar las falsificaciones en el servicio
• Línea 48 Cree una instancia del servicio que tiene las falsificaciones (este servicio se inyecta en la directiva bajo prueba)
• Línea 53 Llame al método que está siendo probado.
• Línea 55 - 59. Afirmar sobre el estado de las falsificaciones.