Mock Http get request for unit testing angular service

Question

I want to know how I can test my service function that has a http get and post calls. I could configure the spec file where I could create an instance of the service, also followed few sites for creating a mockhttp service, It says "httpMock.expectOne is not a function"

reference from here: https://alligator.io/angular/testing-http-interceptors/

describe('Service: UserSearchService', () => {

class AppLookupServiceStub {
    //some functions
}

UserSearchService = new UserSearchService(httpMock,
    appLookUpService);

beforeEach(() => {
    TestBed.configureTestingModule({
        imports: [
            HttpClientTestingModule
          ],
    providers: [
        AppHttpService,
        HttpClient,
        AppCookieService,
        CookieService,
        { provide: AppLookupService, useClass: AppLookupServiceStub },
        AppConstants
    ]
    });
});

beforeEach(async() => {
    service = TestBed.get(UserSearchService);
    httpMock = TestBed.get(AppHttpService);

    selectedCriteria = [
        //some data
    ]
    UserSearchOptions = {
        //some data
    }
});

it('should have a service instance', () => {
    expect(service).toBeDefined();
});
it('should make expected calls to getUserSerachOptions', inject(
    [AppHttpService, UserSearchService],
    (
      httpMock: AppHttpService,
      dataService: UserSearchService
    ) => {
    // let spy = spyOn(service, 'getUserSerachOptions');
    // UserSearchService.getUserSerachOptions();
    // expect(spy).toBeDefined();

    dataService.getUserSerachOptions().subscribe(UserSearchOptions => {
        expect(UserSearchOptions).toEqual(UserSearchOptions);
    });

    const req = httpMock.expectOne(`AppConstants.ADMIN_CENTRAL_SELECTION_CRITERIA_URL`);
    expect(req.request.method).toBe("GET");
    req.flush(UserSearchOptions);
}));
it('should get the data successful', () => {
    service.getUsersBySelectionCriteria(selectedCriteria[0]).subscribe((data: any) => {
        console.log(data);
      expect(data.country.name).toBe('Australia');
    });
});

})

test spec for service:

getUserSerachOptions(): Observable<UserSearchOptions> {
if (!this.userSearchCriteriaOptions) {

    return this.appHttpService.get('{apiUrl}/xyzproject/{devKey}/userSelectionCriteria').pipe(map(
      (data: UserSearchOptions) => {
        this.userSearchCriteriaOptions = data;
        return  this.userSearchCriteriaOptions;
      }
    ));
}

return of( this.userSearchCriteriaOptions);
}

How do I mock the get call, I am unable to find any sources in this case.

Fateh Mohamed · Accepted Answer · 2019-06-12 10:11:05Z

1

i think that this is wrong

 httpMock = TestBed.get(AppHttpService);

it should be

 httpMock = TestBed.get(HttpTestingController);

httpMock is an HttpTestingController, try this

import { HttpClientTestingModule, HttpTestingController} from '@angular/common/http/testing';


describe('Service: UserSearchService', () => {
  let httpMock: HttpTestingController;

 beforeEach(async(() => {
 TestBed.configureTestingModule({
  imports: [
    RouterTestingModule.withRoutes([]),
    HttpClientTestingModule
  ],
  declarations: [Component],
  providers: [

  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
 }).compileComponents();
 fixture = TestBed.createComponent(Component);
 component = fixture.componentInstance;
 httpMock = injector.get(HttpTestingController); // change it here
}));

your test

it('should make expected calls to getUserSerachOptions', inject([HttpTestingController],
  (httpTestMock: HttpTestingController) => {

 httpMock.expectOne(...)  // this should work now
 ...
}

edited Jun 12, 2019 at 10:11

answered Jun 12, 2019 at 9:24

Fateh Mohamed

21.5k5 gold badges46 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Soujanya J Over a year ago

Replacing "AppHttpService" with "HttpTestingController" breaks all others test files as well, and returns this message. Error: StaticInjectorError(DynamicTestModule)[EmployeeRecordFormService -> AppHttpService]: StaticInjectorError(Platform: core)[EmployeeRecordFormService -> AppHttpService]: NullInjectorError: No provider for AppHttpService!

Collectives™ on Stack Overflow

Mock Http get request for unit testing angular service

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related