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

这是因为您拥有在组件级别声明的服务

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

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

但您可以做的是覆盖组件级别提供程序

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

您可能想要考虑的另一件事是设计。您应该考虑该服务是否真的仅限于该组件的范围。如果没有，那么只需在模块级别声明它，因此它将是一个单例。

angular2 jasmine模拟服务未使用但实际服务被调用

1 个答案: