茉莉花单元测试在服务中有数据的组件，该服务从角度 2+ 中的其他服务获取数据答案

【问题标题】：jasmine unit testing a component which has data in a services, where that service fetches data from other service in angular 2+茉莉花单元测试在服务中有数据的组件，该服务从角度 2+ 中的其他服务获取数据
【发布时间】：2019-10-06 05:19:28
【问题描述】：

我曾尝试编写一个 httpmock 的单元测试，该服务使用一种方法（函数）来获取 http get 调用，但未能编写。

saveservice.service.ts -- 文件

const httpOptions = {
  headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};
const envURL = sessionStorage.getItem('apiBaseURL');
 httpGet<T>(url) {
    const URL = envURL + url;
    return this.http.get<T>(URL, httpOptions);
  }

这个saveservice.service文件有一个httpGET()，供work.service.ts使用一个

work.service.ts

import {SaveserviceService } from '../../.././my-service.service';

getworklist(employeeID){

    return this.saveservice.httpGet('work/v1/works?employeeid=' + employeeID);
  }

这就是workservice和save service的连接方式。现在我想为work.component.ts文件编写单元测试用例，但我无法在那里编写httpmock调用。

关于信息，apiUrl 存在于名为 env.ts 文件的不同文件中—— env.ts

export const apivalue= {

    apiBaseUrl:"https://example.co/",
  };

work.component.ts

ngOnit(){
this.employeeID:this.id;
   this.workservice.getworkList(this.employeeID).subscribe(
      (data) => {
        this.workList = data;
       console.log(" ggghfghfgh", this.worklist);
      }, (error) => {
        console.log(error);}

上面是work.component.ts文件，我应该为其编写单元测试用例。请帮助我完成它。

work.component.spec.ts

 let httpMock: HttpTestingController;
 let injector: Injector;
  let workservice: WorksService;
let saveservice123: SaveService;

 providers: [
        Injector,
        HttpClient,
        HttpClientTestingModule,
        saveService,
        worksService
      ],

  httpMock = TestBed.get(HttpTestingController);
    workservice = TestBed.get(WorksService);
    saveservice123 = TestBed.get(SaveService)

  fit('getting work detsails indivually', async(() => {

    fixture = TestBed.createComponent(worksComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();

    workservice.getworkList(123).subscribe(() =>{});

    const request = httpMock.expectOne("work/v1/works?employeeid=")
    // expect(request.request.method).toBe('httpGet');
    // request.flush(xxxxx);

它的抛出错误

Error: Expected one matching request for criteria "Match URL: work/v1/works?employeeGuid=", found none.

请帮忙，如何知道为这种类型编写单元测试用例.. 我也尝试过使用 spy，但无法完成。

const mockdata = { id:1, title: "Hello world",  paste: "console.log('Hello world');"}
     const spyOnAdd = spyOn(service, "getworkList").and.returnValue(mockdata);

【问题讨论】：

标签： javascript angular typescript unit-testing jasmine

【解决方案1】：

首先确保你的组件实现了接口OnInit，并且它的方法ngOnint被重命名为ngOnInit。

您的组件单元测试不应该关心WorkService 是如何实现的，而应该完全关注组件（单元）本身在指定条件下的行为。因此，您必须模拟 WorkService 的相关部分。

假设SaveService 是提供给WorkService 构造函数的唯一参数，work.component.spec.ts 的最简单实现如下所示。

import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
...

describe('WorkService', () => {

    const workList = [...]; // specify result of WorkService#getworklist
    const workService = new WorkService(null);
    let fixture: ComponentFixture<WorkComponent>;

    beforeEach(fakeAsync(() => {        
        spyOn(workService , 'getworklist').and.returnValue(Promise.resolve(workList));
        TestBed.configureTestingModule({
            imports: [...],
            declarations: [WorkComponent],
            providers: [
                { provide: WorkService, useValue: workService }
            ]
        });
        fixture = TestBed.createComponent(WorkComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
        tick();
    }));

    it('getting work details individually', () => {
        expect(workService.getworklist).toHaveBeenCalled();
        expect(component.workList).toEqual(workList);
    });
});

【讨论】：