Testowanie jednostek Angular 2 JWT

Question

Moje połączenia API są uwierzytelniane za pomocą JWT. Próbuję napisać kod dla metody usługi. Wszystkie wnioski ma ten przechwytywania:

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

metoda

obsługa, że ​​chcę testu:

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

Started kod do niego:

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

nie wiem jak go przetestować przeciwko przechwytujący.

PS: Ponieważ testy są teraz, otrzymuję błąd:

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 is not an object (evaluating 'this.platform.injector')

Ogólnie otrzymasz ten błąd, jeśli nie zostały prawidłowo zainicjowany środowiska testowego. Można rozwiązać ten problem w następujący sposób

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

Rzecz o tym jest jednak to, że powinna ona być wywołana tylko raz dla całej wykonanie zestawu testowego. Więc jeśli masz to w każdym pliku testowego, to trzeba go najpierw zresetować w każdym pliku

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

Lepsze niż to jest jednak to, aby nie dodawać go w każdym pliku testowego. Jeśli spojrzysz na Angular docs dla integracji Webpacka, w testing section zobaczysz plik karma-test-shim.js. W tym pliku zalecany jest sposób inicjowania środowiska testowego:

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

Możesz zobaczyć na dole, gdzie wykonujemy to samo wywołanie inicjujące jak powyżej. Powinieneś dodać ten plik do pliku karma.conf.js w tablicy files w konfiguracji. Jest to z połączonej dokumentacji powyżej:

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

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