2017-02-10 145 views
20

我的API调用通过JWT进行身份验证。我正在尝试编写一个服务方法的代码。所有请求有这个拦截器:Angular 2 JWT单元测试

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; 
    } 
,我想测试

服务方法:

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

开始它的代码:

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

不知道如何测试它反对拦截器。

PS:由于测试现在是,得到一个错误:

1) should create a service 
    JobListService 
    TypeError: null is not an object (evaluating 'this.platform.injector') in src/test.ts (line 83858) 
[email protected]:///~/@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) 
[email protected]:///~/@angular/core/testing/test_bed.js:254:0 <- src/test.ts:83858:44 

回答

7

TypeError: null is not an object (evaluating 'this.platform.injector')

一般来说,如果你没有正确初始化测试环境中,您将收到此错误。您可以通过尽管这样做以下

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

事情这个解决这个问题,就是它只能一次针对整个测试套件执行调用。所以,如果你在每一个测试文件拥有它,那么你需要在每个文件

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

比这更好的,虽然第一次复位,是不是在每个测试文件添加它。如果您查看Webpack集成的Angular文档,在testing section中,您将看到一个文件karma-test-shim.js。在这个文件是初始化测试环境

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

您可以在我们做出同样的初始化调用如上底部看到推荐的方式。您应该将此文件添加到配置中files阵列中的karma.conf.js文件中。这是来自上面链接的文档

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

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