javascript - example - Burlarse y golpear con un transportador

protractor tutorial español

Question

Quiero probar mi aplicación angular con transportador. La aplicación tiene un Módulo API que habla con el servidor. Durante estas pruebas quiero simular este Módulo Api. No quiero hacer pruebas de integración completas, sino pruebas de la entrada del usuario con los valores esperados de la API. Esto no solo podría hacer que las pruebas del cliente sean más rápidas, sino que también me permitiría probar casos extremos, como errores de conexión.

¿Cómo puedo hacer esto con un transportador? Acabo de comenzar a configurar las pruebas de integración.

Utilicé el módulo transportador npm, selenio instalado, ajusté la configuración predeterminada y usé onProtractorRunner.js para verificar que mi configuración funciona.

¿Cuál es la forma recomendada de burlarse? Supongo que la burla debe hacerse dentro del navegador y no directamente en el archivo de prueba. Supongo que los comandos en el archivo de prueba son específicos del transportador y se enviarán a los corredores de selenio. Por lo tanto, no puedo compartir objetos de JavaScript durante la sesión y la prueba.

De alguna manera, espero que necesite una biblioteca espía como sinon.js o ¿ya está incluido en transportador?

Editar: Leí sobre este tema en el rastreador de problemas del transportador , que podría ser una forma de hacerlo. Básicamente se escribe un Módulo simulado en la prueba, que se envía para ser ejecutado en el navegador / el alcance de las aplicaciones.

Editar: Aquí hay más problemas prometedores. La primera habla sobre la adición de Mocks a la aplicación angular . El segundo habla sobre burlarse del back-end .

Esto se ve muy bien, en este caso, la aplicación angular se mantendrá en su forma original. Sin embargo, actualmente esto solo funciona con los ng-escenarios en desuso.

Answer 1

A pesar de que no lo he probado en este momento, Angular proporciona un $ httpBackend falso para las pruebas E2E:

http://docs.angularjs.org/api/ngMockE2E/service/$httpBackend

Entonces, tomando de la página de documentos anterior, sospecho que puede usar algo como lo siguiente antes de sus pruebas

beforeEach(function() {
  $httpBackend.whenGET(''/remote-url'').respond(edgeCaseData);
});

Answer 2

Aquí hay algunas opciones más para stub servidor HTTP:

• Stubby un pequeño servidor web con soporte de nodo, .Net y Java. Lo necesitará para instalarlo y alojarlo usted mismo.
• Apiary un servicio alojado para crear API falsa. Puede usarlo para crear documentación API también.

Answer 3

Creé un pequeño módulo simulacro personalizable para ayudarme a manejar escenarios de éxito y error, tal vez te ayude a organizar mejor la burla.

https://github.com/unDemian/protractor-mock

Answer 4

El punto de ejecutar pruebas de extremo a extremo con transportador es validar que la aplicación funciona en integración. Si intentas probar tus elementos de la interfaz de usuario de forma aislada, es más fácil usar elementos pequeños de las pruebas normales. Exactamente como AngularJS prueba directivas.

Dicho eso, si realmente quieres burlarte, una forma es crear una versión separada de tu aplicación con stubs en lugar de servicios reales.

Answer 5

He estado tratando de burlarme de algunos servicios en transportador, y después de mirar algunos blogs he llegado a una solución que funciona para mí. La idea es no hacer burla pesada, solo generar algunas respuestas de error; ya que para los dispositivos ya tengo una puerta trasera en mi servidor API para llenar el back-end.

Esta solución usa $provide.decorator() para modificar solo algunos métodos. Aquí cómo se usa en las pruebas:

it(''should mock a service'', function () {
    app.mock.decorateService({
        // This will return a rejected promise when calling to "user"
        // service "login()" method resolved with the given object.
        // rejectPromise() is a convenience method
        user: app.mock.rejectPromise(''login'', { type: ''MockError'' }),

        // You can decorate the service
        // Warning! This code get''s stringified and send to the browser
        // it does not have access to node
        api: function ($delegate, $q) {
            $delegate.get = function () {
                var deferred = $q.defer();

                deferred.resolve({ id: ''whatever'', name: ''tess'' });

                return defer.promise;
            };

            return $delegate;
        },

        // Internally decorateService converts the function to string
        // so if you prefer you can set an string. Usefull for creating your
        // own helper methods like "rejectPromise()".
        dialog: [
            "function ($delegate, $window) {",
                "$delegate.alert = $window.alert;",
                "return $delegate;",
            "}"
        ].join(''/n'')
    });

    // ...

    // Important!
    app.mock.clearDecorators();
});

Aquí el código:

App.prototype.mock = {
    // This must be called before ".get()"
    decorateService: function (services) {
        var code = [
            ''var decorer = angular.module("serviceDecorator", ["visitaste"]);'',
            ''decorer.config(function ($provide) {''
        ];

        for (var service in services) {
            var fn = services[service];

            if (_.isFunction(fn)) {
                code.push(''$provide.decorator("''+ service +''", ''+ String(fn) +'');'');
            } else if (_.isString(fn)) {
                code.push(''$provide.decorator("''+ service +''", ''+ fn +'');'');
            }
        }

        code.push(''});'');

        browser.addMockModule(''serviceDecorator'', code.join(''/n''));
    },
    clearDecorators: function () {
        browser.clearMockModules();
    },
    rejectPromise: function (method, error, delay) {
        return [
            ''function ($delegate, $q) {'',
                ''$delegate.''+ method +'' = function () {'',
                    ''var deferred = $q.defer();'',
                    '''',
                    ''setTimeout(function () {'',
                        ''deferred.reject(''+ JSON.stringify(error) +'');'',
                    ''}, ''+ (delay || 200) +'');'',
                    '''',
                    ''return deferred.promise;'',
                ''};'',
                '''',
                ''return $delegate;'',
            ''}''
        ].join(''/n'');
    }
};

Answer 6

No tiene acceso a $ httpBackend, controladores o servicios desde una prueba de transportador, por lo que la idea es crear otro módulo angular e incluirlo en el navegador durante la prueba.

  beforeEach(function(){
    var httpBackendMock = function() {
      angular.module(''httpBackendMock'', [''ngMockE2E'', ''myApp''])
        .run(function($httpBackend) {
          $httpBackend.whenPOST(''/api/packages'').respond(200, {} );
        })
    }
    browser.addMockModule(''httpBackendMock'', httpBackendMock)
  })

ngMockE2E le permite crear una implementación de back-end falsa para su aplicación. Aquí hay una publicación más detallada sobre el tema http://product.moveline.com/testing-angular-apps-end-to-end-with-protractor.html

Answer 7

Esta publicación de blog analiza los escenarios de uso avanzado para Transportador. En particular, cubre el pequeño addMockModule() know addMockModule() del objeto navegador addMockModule() . El método le permite crear módulos angulares en transportador (es decir, burlas o trozos de su módulo API) y cargarlos en el navegador para reemplazar la implementación real dentro del contexto de una especificación determinada o un conjunto de especificaciones.