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.