Unit testing 单元测试由使用angular2 jwt AuthHttp调用而不是http调用的服务注入的组件

我一直在使用HTTP调用API来完成我的工作，后来引入了angular2 jwt来拦截HTTP调用并传递jwt tockens。在使用AuthHttp之前，单元测试一直运行良好。我已经创建了“mockuserdata”模型来返回模拟值

每个单元测试都会失败，直到我添加了http和AuthHttp的提供程序，如下所示

    {provide: Http, useFactory: (backendInstance: MockBackend, defaultOptions: BaseRequestOptions) => 
    { return new Http(backendInstance, defaultOptions);},
       deps: [MockBackend, BaseRequestOptions] },
 { provide: AuthHttp, useExisting: Http, deps: [Http] }

引入上述提供程序后，“应实例化UsersComponent”已通过，但“它检查loadUserList（）是否绑定数据源”失败

/*用户操作服务*/

import {Headers,RequestOptionsArgs,Response,URLSearchParams, RequestMethod,RequestOptions }from '@angular/http';
import { Injectable, Optional }from '@angular/core';
import { Observable}from 'rxjs/Observable';
import * as models from '../models';
import { AuthHttp }from 'angular2-jwt';
import 'rxjs/Rx';

 @ Injectable()
export class UserOperationsApi {
    protected basePath = '/api';
    public defaultHeaders: Headers = new Headers();
    constructor(protected http: AuthHttp,  @ Optional()basePath: string) {
        if (basePath) {
            this.basePath = basePath;
        }
    }
/**
     * Returns all users
     * Returns list of all users
     */
    public getAllUsers(extraHttpRequestParams ?  : any): Observable < Array < models.User >> {
        const path = this.basePath + '/users';
        let queryParameters = new URLSearchParams();
        let headerParams = this.defaultHeaders;
        let requestOptions: RequestOptionsArgs = {
            method: 'GET',
            headers: headerParams,
            search: queryParameters
        };

        return this.http.request(path, requestOptions)
        .map((response: Response) => {
            if (response.status === 204) {
                return undefined;
            } else {
                return response.json();
            }
        });
    }
}

***用户组件单元测试******

import {async,TestBed,inject}from '@angular/core/testing';
import {Response,ResponseOptions, XHRBackend } from '@angular/http';
import {    MockBackend,    MockConnection}from '@angular/http/testing';
import {    HttpModule}from '@angular/http';
import {    Router, ActivatedRoute}from '@angular/router';
import {    MockRouter}from '../mock/router.mock';
import {    usersData}from '../data/mockData/users';
import {    UsersComponent}from './list-users.component';
describe('list-users.component.ts', () => {
beforeEach(() => {
        TestBed.configureTestingModule(
            {
                declarations: [UsersComponent],
                imports: [HttpModule, DevExtremeModule],
                providers: [MockBackend, BaseRequestOptions,
                    { provide: XHRBackend, useClass: MockBackend },
                    { provide: Router, useClass: MockRouter },
                    { provide: ActivatedRoute, useClass: MockRouter },
                    {
                        provide: Http, useFactory: (backendInstance: MockBackend, defaultOptions: BaseRequestOptions) => {
                            return new Http(backendInstance, defaultOptions);
                        },
                        deps: [MockBackend, BaseRequestOptions]
                    },
                    { provide: AuthHttp, useExisting: Http, deps: [Http] }
                ]
            });
    });

    it('should instantiate UsersComponent', () => {
        const fixture = TestBed.createComponent(UsersComponent);
        let compInstance: UsersComponent = fixture.componentInstance;
        expect(compInstance instanceof UsersComponent).toBe(true, 'should create UsersComponent');
    });

    it('It checks loadUserList() is binding datasource',
        async(inject([XHRBackend],
                (mockBackend: MockBackend) => {
                mockBackend.connections.subscribe(
                    (connection: MockConnection) => {
                    connection.mockRespond(new Response(
                            new ResponseOptions({
                                body: usersData
                            })));
                });

                const fixture = TestBed.createComponent(UsersComponent);
                let instance: UsersComponent = fixture.componentInstance;
                instance.instance.loadUserList();;
                expect(instance.userData.length).toEqual(usersData.length);
                expect(instance.userData).toBe(usersData);
            })));
}

---

1） 返回空值的单元测试有什么问题。

以下内容对我有效。指示使用Http而不是使用AuthHttp

{提供：AuthHttp，使用现有：Http}

因此，我的单元测试文件有以下更改

describe('list-users.component.ts', () => {
beforeEach(() => {
        TestBed.configureTestingModule(
            {
                declarations: [UsersComponent],
                imports: [HttpModule, DevExtremeModule],
                providers: [MockBackend, BaseRequestOptions,
                    { provide: XHRBackend, useClass: MockBackend },
                    { provide: Router, useClass: MockRouter },
                    { provide: ActivatedRoute, useClass: MockRouter },
                    { provide: AuthHttp, useExisting: Http }
                ]
            });
    });

希望有一天它对某人有用，干杯：）

describe('list-users.component.ts', () => {
beforeEach(() => {
        TestBed.configureTestingModule(
            {
                declarations: [UsersComponent],
                imports: [HttpModule, DevExtremeModule],
                providers: [MockBackend, BaseRequestOptions,
                    { provide: XHRBackend, useClass: MockBackend },
                    { provide: Router, useClass: MockRouter },
                    { provide: ActivatedRoute, useClass: MockRouter },
                    { provide: AuthHttp, useExisting: Http }
                ]
            });
    });