时间戳

首页 > 解决方案 > this.ProductDataService.getAllProducts 不是使用 jasmine-karma 的函数

angular - this.ProductDataService.getAllProducts 不是使用 jasmine-karma 的函数

问题描述

我正在 angular7 中运行单元测试用例，即 jasmine-karma。我收到了这个错误 -

ProjectManagementComponent 应该使用服务中的 ProjectList

TypeError：this.ProjectManagementService.getProject 不是函数

如果代替 useValue ，我使用 useClass ，我得到错误 -

[对象错误事件] 抛出

我尝试了多种选择，但无法通过互联网弄清楚。

app.component.spec.ts

describe('ProjectManagementComponent', () => {
  let comp: ProjectManagementComponent;
  let fixture: ComponentFixture<ProjectManagementComponent>;
  let de: DebugElement;
  let el: HTMLElement;

beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ProjectManagementComponent],
      imports: [HttpClientModule, RouterTestingModule, RouterModule, NgbModule, NgxPaginationModule, FormsModule, ReactiveFormsModule, BrowserModule,],
      providers: [{ provide: ProjectManagementService, useClass: ProjectManagementService },
               {provide: ProductsService, useClass: ProductsService}]
    })
      .compileComponents().then(() => {
        fixture = TestBed.createComponent(ProjectManagementComponent);
        comp = fixture.componentInstance;
       de = fixture.debugElement.query(By.css('form[id=addProjectCreationData]'))
        el =de.nativeElement;
      });
  }));


it("should use the ProjectList from the service", () => {
    console.log("Create a Project Service")
    const projectService = fixture.debugElement.injector.get(ProjectManagementService);
    fixture.detectChanges();
    expect(projectService.getProject()).toEqual(comp.getResponse);
  });
});

app.component.service.stub.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { map } from 'rxjs/operators';
import { config } from "config";
const baseUrl: string = config.url;


@Injectable()
export class ProjectManagementServiceStub {
    constructor(private http: HttpClient) { }
              
    getProject(url) :Observable<any>{
        
        return this.http.get(url )
            .pipe(map(Response => Response))
                
    }

}

标签： angulartypescriptjasminekarma-jasmine

解决方案

更正您的providers部分，因为您没有使用您创建的stub( ProjectManagementServiceStub )

 providers: [{ provide: ProjectManagementService, useClass: ProjectManagementServiceStub },
             {provide: ProductsService, useClass: ProductsService}] // <--- FIX  this as well, you need to inject "stub"

旁注：下面的it块似乎没有意义。

it("should use the ProjectList from the service", () => {
    console.log("Create a Project Service")
    const projectService = fixture.debugElement.injector.get(ProjectManagementService);
    fixture.detectChanges();
    expect(projectService.getProject()).toEqual(comp.getResponse);
  });
});

这缺少单元测试的本质，因为您正在测试projectService.getProject()属于service而不是这个component

推荐阅读