angular2茉莉花嘲笑服务没有使用，但实际服务调用

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

EmployeeComponent规格

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

这是因为当您在TestBed声明模拟必须在组件级

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

申报的服务，这是一个模块级的配置。组件级别提供程序将始终取代模块级别提供程序。

什么可以做，虽然是覆盖部件级供应商

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

你可能要考虑的另一件事是设计。你应该考虑服务是否真的只限于组件。如果不是，那么只需在模块级声明它，所以它将是一个单身人士。