CODEWITHSUNDEEP
angularkarma-jasmine
Diogo Santos
Diogo Santos

Reputation: 830

No provider for HttpClient Karma/Jasmine Testing

Having this simples .spec.ts file:

import { async, ComponentFixture, TestBed, getTestBed } from '@angular/core/testing';

import { UsersViewComponent } from './users-view.component';
import { FormsModule, ReactiveFormsModule } from '../../../node_modules/@angular/forms';
import { MyDateRangePickerModule } from '../../../node_modules/mydaterangepicker';
import { NgxEchartsModule, NgxEchartsService } from '../../../node_modules/ngx-echarts';
import { Observable } from '../../../node_modules/rxjs';
import { SessionService } from '../Services/session.service';
import { SortingService } from '../sorting.service';

describe('UsersViewComponent', () => {
  let component: UsersViewComponent;
  let fixture: ComponentFixture<UsersViewComponent>;



  beforeEach(async(() => {

    // Create a fake TwainService object with a `getQuote()` spy
    const sessionService = jasmine.createSpyObj('sessionService', ['getSessions']);
    // Make the spy return a synchronous Observable with the test data
    var getSessionSpy = sessionService.getSessions.and.returnValue(Observable.of({}));;


    TestBed.configureTestingModule({
      imports: [FormsModule, ReactiveFormsModule, MyDateRangePickerModule, NgxEchartsModule],
      declarations: [UsersViewComponent],
      providers: [
        { provide: NgxEchartsService },
        { provide: SessionService, useValue: sessionService },
        { provide: SortingService }
      ]
    })
      .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(UsersViewComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

And testing the component with the following constructor:

  constructor(private es: NgxEchartsService, private sessionService: SessionService, private sorting: SortingService) { }

Session Service:

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { Session } from '../models/Session';

@Injectable()
export class SessionService {

  sessionsURL = "http://localhost:8080/express/ux/sessions";
  constructor(private http: HttpClient) { }

  getSessions(user: string, pageTitle: string, deviceType: string, browser: string, beginDate: number, endDate: number, os: string, screenRes: string,company:string): Observable<Session[]> {
    return this.http.get<Session[]>(this.sessionsURL + this.buildArguments(user, pageTitle, deviceType, browser, beginDate, endDate, os, screenRes,company));
  }

It gives me that error. The thing is that, if I add the HTTPClientModule to the spec imports, it correctly loads but the actual request in the service is made. It just bypassed the mock getSessions method.

Any clue, why this happens?

I have made a similiar approach in another component and it worked straight away.

Upvotes: 0

Views: 1603

Answers (1)

Flash91
Flash91

Reputation: 158

For testing with HttpClientModule there's a special module in Angular: The HttpClientTestingModule. This allows you to mock this the HttpClientModule without doing a real Http-Call. You have to import this Module to the test. Hope that helps.

Upvotes: 1

Related Questions