javascript - angular2-jwt angular 6

Pruebas Unitarias Angular 2 JWT

Question

Mis llamadas a la API se autentican con JWT. Estoy tratando de escribir código para un método de servicio. Todas las solicitudes tiene este interceptor:

public interceptBefore(request: InterceptedRequest): InterceptedRequest {
        // Do whatever with request: get info or edit it
        this.slimLoadingBarService.start();
        let currentUser = JSON.parse(localStorage.getItem(''currentUser''));
        if (currentUser && currentUser.data.token) {
            request.options.headers.append(''Authorization'', ''Bearer '' + currentUser.data.token);
        }
        return request;
    }

Método de servicio que quiero probar:

getAll(page: number, pageSize: number, company: string): Observable<any> {
        return this.http.get(`${this.conf.apiUrl}/jobs`)
            .map((response: Response) => response.json());
    }

Comenzó el código para ello:

import { MockBackend, MockConnection } from ''@angular/http/testing'';
import { Http, BaseRequestOptions, Response, ResponseOptions, RequestMethod } from ''@angular/http'';
import { JobListService } from ''./job-list.service'';
import { inject, TestBed } from ''@angular/core/testing/test_bed'';
import { JOBLISTMOCK } from ''../mocks/job-list.mock'';

fdescribe(''Service: JobListService'', () => {
    beforeEach(() => {
        TestBed.configureTestingModule({
            providers: [
                JobListService,
                MockBackend,
                BaseRequestOptions,
                {
                    provide: Http,
                    useFactory: (backend: MockBackend, defaultOptions: BaseRequestOptions) => {
                        return new Http(backend, defaultOptions);
                    },
                    deps: [MockBackend, BaseRequestOptions]
                },
            ]
        });
    });

    it(''should create a service'', inject([JobListService], (service: JobListService) => {
        expect(service).toBeTruthy();
    }));

    describe(''getAll'', () => {
        it(''should return jobs'', inject([JobListService, MockBackend], (service: JobListService, backend: MockBackend) => {
            let response = new ResponseOptions({
                body: JSON.stringify(JOBLISTMOCK)
            });

            const baseResponse = new Response(response);

            backend.connections.subscribe(
                (c: MockConnection) => c.mockRespond(baseResponse)
            );

            return service.getAll(1, 10, ''18'').subscribe(data => {
                expect(data).toEqual(JOBLISTMOCK);
            });
        }));
    });
});

No sé cómo probarlo contra el interceptor.

PD: Como son las pruebas ahora, obteniendo un error:

1) should create a service
     JobListService
     TypeError: null is not an object (evaluating ''this.platform.injector'') in src/test.ts (line 83858)
_createCompilerAndModule@webpack:///~/@angular/core/testing/test_bed.js:254:0 <- src/test.ts:83858:44

2) should return jobs
     JobListService getAll
     TypeError: null is not an object (evaluating ''this.platform.injector'') in src/test.ts (line 83858)
_createCompilerAndModule@webpack:///~/@angular/core/testing/test_bed.js:254:0 <- src/test.ts:83858:44

Answer 1

TypeError: null no es un objeto (evaluando ''this.platform.injector'')

En general, recibirá este error si no ha inicializado correctamente el entorno de prueba. Podrías resolver este problema haciendo lo siguiente

import {
  BrowserDynamicTestingModule, platformBrowserDynamicTesting
} from ''@angular/platform-browser-dynamic/testing'';
...
beforeAll(() => {
  TestBed.initTestEnvironment(
    BrowserDynamicTestingModule,
    platformBrowserDynamicTesting()
  );
});

Sin embargo, el problema de esto es que solo se debe llamar una vez para la ejecución completa de la suite de prueba. Entonces, si lo tiene en cada archivo de prueba, primero debe restablecerlo en cada archivo.

beforeAll(() => {
  TestBed.resetTestEnvironment();
  TestBed.initTestEnvironment(
    BrowserDynamicTestingModule,
    platformBrowserDynamicTesting()
  );
});

Mejor que esto, sin embargo, es no agregarlo en cada archivo de prueba. Si observa los documentos de Angular para la integración de Webpack, en la sección de pruebas , verá un archivo karma-test-shim.js . En este archivo se recomienda la forma de inicializar el entorno de prueba.

Error.stackTraceLimit = Infinity;

require(''core-js/es6'');
require(''core-js/es7/reflect'');

require(''zone.js/dist/zone'');
require(''zone.js/dist/long-stack-trace-zone'');
require(''zone.js/dist/proxy'');
require(''zone.js/dist/sync-test'');
require(''zone.js/dist/jasmine-patch'');
require(''zone.js/dist/async-test'');
require(''zone.js/dist/fake-async-test'');

var appContext = require.context(''../src'', true, //.spec/.ts/);

appContext.keys().forEach(appContext);

var testing = require(''@angular/core/testing'');
var browser = require(''@angular/platform-browser-dynamic/testing'');

testing.TestBed.initTestEnvironment(browser.BrowserDynamicTestingModule,
    browser.platformBrowserDynamicTesting());

Puede ver en la parte inferior donde hacemos la misma llamada de inicialización que la anterior. Debe agregar este archivo al archivo karma.conf.js en la matriz de files en la configuración. Esto es de la documentación vinculada arriba

files: [
  {pattern: ''./config/karma-test-shim.js'', watched: false}
],

preprocessors: {
  ''./config/karma-test-shim.js'': [''webpack'', ''sourcemap'']
},