Angular2 - 单元测试用例无法模拟服务

Question

I am not able to mock user service, other service which I mocked are working fine. If I am commenting user service then unit test case is working fine. There are many components which are using user service. Unit test cases for all those components are not working in which user service is injected.

Error : Can't resolve all parameters for AlertService: ([object Object], ?, [object Object], [object Object]).

Code for testing Alert service :

import { TestBed, inject } from '@angular/core/testing';

import { BackendAlertService } from './backend-alert.service';
import { Injectable } from '@angular/core';
import { HttpModule, ConnectionBackend } from '@angular/http';
import { MockBackend, MockConnection } from '@angular/http/testing';
import { ConfigService, LoggerService, UserService } from '../../shared/services';
import { Observable } from 'rxjs';
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
import { HttpClient } from '@angular/common/http';

@Injectable()
class MockUserService {
  private data$: Observable<Object>;
  readonly user$: Observable<any>;
  readonly privilege$: Observable<any[]>;

  constructor() {
    this.data$ = Observable.of({ me: 'JindaR', fname: 'rohit' });
    this.user$ = Observable.of({ me: 'JindaR' });
    this.privilege$ = Observable.of([{ testing: 'true' }]);
  }

  hasPrivilege(privilege): Observable<boolean> {
    return Observable.of(true);
  }

}


@Injectable()
class MockConfigService {
  url$(url) {
    return Observable.of('testing.com');
  }
}

@Injectable()
class MockLoggerService {

}

fdescribe('BackendAlertService', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [HttpModule, HttpClientTestingModule],
      providers: [
        BackendAlertService,
        HttpTestingController,
        { provide: UserService, useClass: MockUserService },
        { provide: ConnectionBackend, useClass: MockBackend },
        { provide: ConfigService, useClass: MockConfigService },
        { provide: LoggerService, useClass: MockLoggerService }
      ]
    });
  });

  it('should be created', inject([BackendAlertService], (service: BackendAlertService) => {
    expect(service).toBeTruthy();
  }));
});

Code for Actual service :

@Injectable()
export class BackendAlertService {

    constructor(
        private configService: ConfigService,
        private userService: UserService,
        private http: Http,
        private logger: LoggerService) { }

    /** Get Alerts */
    get(): Observable<Alert[]> {
        return Observable.of([]);
    }
}

Answer 1

Here is the bug. I am using like this :

import { ConfigService, LoggerService, UserService } from '../../shared/services'

Angular is not able to resolve it properly. I write it like below and it worked

import { ConfigService} from '../../shared/services/config.service';

import { LoggerService } from '../../shared/services/logger.service';

import { UserService } from '../../shared/services/user.service';

Answer 2

I would suggest you either use jasmine.createObjectSpy or the following:

{
 provide: UserService,
 useValue: {
 hasPriviledge: _ => Observable.of(true),
 }
}

Answer 3

When testing services I generally use this pattern. It usesReflectiveInjector.resolveAndCreate .

Resolves an array of providers and creates an injector from those providers

• The beforeEach will call this before each test ( it ) and populate the local backendAlertService variable.
• The test code has full access to the MockBackend using this.backend
• The test code can check anything on the last connection using this.lastConnection
• The test code has access to all user defined types that are injected. The instances in this test setup are this.userService , this.loggerService , and this.configService .

Code:

import { ReflectiveInjector } from '@angular/core';
import { fakeAsync, tick } from '@angular/core/testing';
import { BaseRequestOptions, ConnectionBackend, Http, RequestOptions } from '@angular/http';
import { Response, ResponseOptions, RequestMethod } from '@angular/http';
import { MockBackend } from '@angular/http/testing';

describe('Backend alert service tests', () => {

    var backendAlertService: BackendAlertService = null;

    beforeEach(() => {
        this.injector = ReflectiveInjector.resolveAndCreate([
            { provide: ConnectionBackend, useClass: MockBackend },
            { provide: RequestOptions, useClass: BaseRequestOptions },
            { provide: UserService, useClass: MockUserService },
            { provide: ConfigService, useClass: MockConfigService },
            { provide: LoggerService, useClass: MockLoggerService }
            Http,
            BackendAlertService
        ]);
        backendAlertService = this.injector.get(BackendAlertService) as BackendAlertService;
        this.backend = this.injector.get(ConnectionBackend) as MockBackend;
        this.backend.connections.subscribe((connection: any) => this.lastConnection = connection);

        // injected services/types that you want access to in your tests
        this.userService = this.injector.get(UserService) as UserService;
        this.loggerService = this.injector.get(LoggerService) as LoggerService;
        this.configService = this.injector.get(ConfigService) as ConfigService;
    });

  it('should be created', () => {
    expect(backendAlertService).toBeTruthy();
  });

  it('should get something', fakeAsync(() => {
    var results: Alert[];
    backendAlertService.get().subscribe(serviceResults => results = serviceResults);
    tick();
    expect(results).toBeDefined();
  }));  
});