this.ProductDataService.getAllProducts is not a function using jasmine-karma

问题

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

ProjectManagementComponent should use the ProjectList from the service

TypeError: this.ProjectManagementService.getProject is not a function

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

[object ErrorEvent] thrown

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

    }

}

回答1:

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"

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

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

来源：https://stackoverflow.com/questions/57673803/this-productdataservice-getallproducts-is-not-a-function-using-jasmine-karma

标签

angular

typescript

jasmine

karma-jasmine