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

你可能要考慮的另一件事是設計。你應該考慮服務是否真的只限於組件。如果不是，那麼只需在模塊級聲明它，所以它將是一個單身人士。