Angular2 Jasmine模拟的服务未使用，而是实际的服务

Question

在我的员工规格中，实际员工服务被转介而不是嘲笑。可能是什么错？foll。是我的代码块： -

员工组件

import { Component, ViewChild, OnInit, Input, ElementRef } from '@angular/core';
import { Http } from '@angular/http';
import { Pipe, PipeTransform } from '@angular/core';
import { SharedHttpService } from "../../shared/services/shared-http.service";
import { EmployeeService } from '../services/employee.service';
import { Broadcaster } from '../../shared/services/broadcaster.service';
declare let $: any;
@Component({
    moduleId: module.id,
    selector: 'employee',
    templateUrl: 'employee.component.html',
    providers: [EmployeeService, SharedHttpService, Broadcaster]
})
export class EmployeeComponent implements OnInit {
    constructor(private EmployeeService: EmployeeService,
        private broadcaster: Broadcaster) {  
    }
    public getAllData(role) {
        this.employeeService.getAllEmployeesApiResponse (role);
    }
}

员工服务

import { Injectable, Inject } from '@angular/core';
import { Http, Response, Headers } from '@angular/http';
import { RequestOptions } from '@angular/http';
import 'rxjs/add/operator/map';
import { Observable } from 'rxjs/Rx';
import { SharedHttpService } from '../../shared/services/shared-http.service';
import { Broadcaster } from '../../shared/services/broadcaster.service';
@Injectable()
export class EmployeeService implements IEmployeeService {
    constructor(
        private _http: Http, 
        private sharedHttpService: SharedHttpService,
        private broadcaster: Broadcaster) { }
    public getAllEmployeesApiResponse = (role): any => {
        this.sharedHttpService.getAllEmployees(role)
            .subscribe(data =>
                this.broadcaster.broadcast("GetAllEmployees", data),
            err =>
                this.errorHandler.handleError(err)
            );
    }

MockEmployeeService

import { Broadcaster } from '../../shared/services/broadcaster.service';
export class MockEmployeeService implements IEmployeeService {
    constructor(private broadcaster: Broadcaster) { }
    public getAllEmployeesApiResponse = (role): any => {
        let employeeData = JSON.parse('[{"id": 198149,"fullName": "Sean Abrahamsen"},{"id": 198150,"fullName": "Rahyl James"}]}');
        let data = [laborScheduleDay, referenceData];
        this.broadcaster.broadcast("GetAllEmployees", employeeData);
    }
}

implyeecomponent-spec

import { Component, DebugElement, Optional, ViewChild, OnInit, Input, ElementRef, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { async, ComponentFixture, TestBed, inject } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { Http } from '@angular/http';
import { EmployeeService } from '../services/employee.service';
import { MockEmployeeService } from '../mock/mock-employee.service';
describe('EmployeeComponent Specs', function () {
    let debugElement: DebugElement;
    let component: EmployeeComponent;
    let fixture: ComponentFixture<EmployeeComponent>;
    let EmployeeService: EmployeeService
    let mockEmployeeService: MockEmployeeService
    beforeEach(async(() => {
        mockEmployeeService = new MockEmployeeService(broadcaster);
        TestBed.configureTestingModule({            
            declarations: [EmployeeComponent],
            providers: [
                { provide: EmployeeService, useValue: mockEmployeeService }              
            ]
        }).compileComponents();
    }));
    beforeEach(() => {
        fixture = TestBed.createComponent(EmployeeComponent);
        component = fixture.componentInstance;
        EmployeeService = TestBed.get(EmployeeService);
        fixture.detectChanges();
    });
    describe("When getAllEmployees is called", () => {
        beforeEach(() => {
            EmployeeService.getAllEmployeesApiResponse = jasmine.createSpy('getAllEmployeesApiResponse');
        });
        it('should call getAllEmployeesApiResponse service', () => {
            component.getAllEmployees("Manager");
            expect(EmployeeService.getAllEmployeesApiResponse).toHaveBeenCalledWith("Manager");
        });
    });
});

Answer 1

这是因为您在组件级别声明了服务

@Component({
  providers: [ ... ]
})

当您在TestBed中声明模拟时，这是模块级配置。组件级提供商将始终取代模块级提供商。

您可以做的是覆盖组件级提供商

TestBed.configureTestingModule({            
  declarations: [EmployeeComponent]
})
.overrideComponent(EmployeeComponent, {
  set: {
    providers: [
      { provide: EmployeeService, useValue: mockEmployeeService } 
    ]
  }
})
.compileComponents();

您可能要考虑的另一件事是设计。您应该考虑该服务是否真的要仅范围为组件。如果不是，请在模块级别声明，因此它将是单身人士。