unit testing a component which is injected by a service which is using angular2-jwt AuthHttp call instead of http call

Question

I have been using HTTP to call API to do my stuff, later introduced angular2-jwt to intercept the http calls and pass the jwt tockens. Unit testing was working fine until AuthHttp was used. I have created 'mockuserdata' model to return the mock values

Every unit test cases where failing until I added the providers for http and AuthHttp as follows

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

After introducing above providers 'should instantiate UsersComponent' got passed but 'It checks loadUserList() is binding datasource' ís failing

/* User Operations Service*/

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

/* User List Component*/

import {Component,OnInit}from '@angular/core';
import {Router } from '@angular/router';
import {UserOperationsApi }from '../services';
import {DialogService }from '../services';
import { Subscription }from 'rxjs';
 @ Component({
    selector: 'my-app',
    templateUrl: './list-users.component.html',
    providers: [UserOperationsApi]
})
export class UsersComponent implements OnInit {
    public userData: any;
    constructor(private api: UserOperationsApi, private router: Router) {
        this.loadUserList();
    }
    // loading user list
    loadUserList() {
        // To get data from api
        this.busy = this.api.getAllUsers()
            .subscribe(
                data => this.handleConfiguredUsers(data),
                error => {
                throw ({
                    message: 'Error occured! while retreiving data from server.'
                });
            });
    }
    // users list to be loaded
    handleConfiguredUsers(data) {
        this.userData = data;
    }
}

** * User component unit testing ** ** **

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) Whats wrong with the unit test which is returning null values.

Answer 1

The following worked for me. instruct to use Http instead of AuthHttp using

{ provide: AuthHttp, useExisting: Http }

so my unit testing file has the following change.

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

Hope it will be useful for someone someday, Cheers :)