this.ProductDataService.getAllProducts不是使用jasmine-karma的函数 [英] this.ProductDataService.getAllProducts is not a function using jasmine-karma

问题描述

我正在用angular7运行单元测试用例，即茉莉花因果.而且我收到此错误-

I am running unit test-cases i.e. jasmine-karma in angular7. And I am getting this error -

ProjectManagementComponent应该使用服务中的ProjectList

ProjectManagementComponent should use the ProjectList from the service

TypeError:this.ProjectManagementService.getProject不是函数

TypeError: this.ProjectManagementService.getProject is not a function

如果我使用useClass而不是useValue，则会出现错误-

If instead of useValue , i use useClass , i get error -

抛出[对象ErrorEvent]

[object ErrorEvent] thrown

我尝试了多种选择，但无法通过Internet查明.

I tried varied options , but unable to figure out over internet.

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

    }

}

推荐答案

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

Correct your providers section, as you are not using stub ( ProjectManagementServiceStub ) which you have created

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

旁注:在it块下面似乎没有任何意义.

On side note: below it block doesn't seem to be make sense.

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

由于您正在测试属于service的projectService.getProject()，而不是此component

This is missing the essence of unit testing as you are testing projectService.getProject() which belongs to service and not this component

这篇关于this.ProductDataService.getAllProducts不是使用jasmine-karma的函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！