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

Question

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

}

I cant see `getProject()` in your component code, when is it being called ? — Shashank Vivek, Aug 28 '19 at 10:44
Also, you dont need `const projectService = fixture.debugElement.injector.get(ProjectManagementService);` when you are using `useClass` — Shashank Vivek, Aug 28 '19 at 10:47
Thanks . Please check this -https://stackoverflow.com/questions/57690695/expected-response-with-status-null-null-for-url-null-to-equal-project11 — Techdive, Aug 28 '19 at 10:52
@Shashank. I corrected my code. I put the right service to call getProject(). — Techdive, Aug 28 '19 at 11:10

score 1 · Accepted Answer · answered Aug 28 '19 at 11:18

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

I get this error - StaticInjectorError(Platform: core)[ProjectManagementComponent -> ProjectManagementServiceStub]: NullInjectorError: No provider for ProjectManagementServiceStub! Error: StaticInjectorError(DynamicTestModule)[ProjectManagementComponent -> ProjectManagementServiceStub]: — Techdive, Aug 28 '19 at 12:40
@Techdive : Please remove `@Injectable()` from the `export class ProjectManagementServiceStub` — Shashank Vivek, Aug 28 '19 at 13:26

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

1 Answers1

Linked