How to write unit test case for HTTPClient get() method service in Angular?

Question

Currently, I'm facing an error:

Property 'subscribe' does not exist on type 'Subscription'. Did you mean 'unsubscribe'?

Need help to point out what I'm missing.

my-service.ts

import {Injectable} from "@angular/core";
import {HttpClient} from "@angular/common/http";
import {dummyModel} from "./patient2020/dummy1.model";
import {map} from "rxjs/operators";

@Injectable({
  providedIn: 'root'
})


export class RecentPatList {

  api = {  patinetList: `/list/version2020/may` };
  constructor(private http: HttpClient) {}


 testGetCall() {
    return this.http.get<dummyModel>(`${this.api.patinetList}`).subscribe(resp => {
      console.log("RESPONSE", resp);
    });
  }
}

my-service.spec.ts

import { RecentPatList } from './recentList.service';
import { TestBed, getTestBed, inject } from '@angular/core/testing';
import {
  HttpClientTestingModule,
  HttpTestingController
} from '@angular/common/http/testing';
import { Observable } from 'rxjs/Observable';

describe('RecentPatList', () => {
  let injector;
  let service: RecentPatList;
  let httpMock: HttpTestingController;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule],
      providers: [RecentPatList]
    });

    injector = getTestBed();
    service = injector.get(RecentPatList);
    httpMock = injector.get(HttpTestingController);
  });

  describe('#testGetCall', () => {
    it('should return an Observable<[]>', () => {
      const dummyUsers = [
        {
          // test data 0        
          {
            // netsted test data 0
          }
        },
        {
          // test data  1        
          {
            // netsted test data 1
          }
        }
      ];

      service.testGetCall().subscribe(data => {
        expect(data.length).toBe(2);
        expect(data).toEqual(dummyUsers);
      });

      const req = httpMock.expectOne(`/list/version2020/may`);
      expect(req.request.method).toBe('GET');
      req.flush(dummyUsers);
    });
  });
});

I couldn't understand what I'm doing wrong even after gone through lots of tutorials.

Philipp Meissner · Accepted Answer · 2020-05-05 07:24:34Z

3

You are calling subscribe on subscription like the error said. testGetCall() returns a subscription.

Change .subscribe() to pipe() in testGetCall.

For best practices,

change `

testGetCall() {
    return this.http.get<dummyModel>(`${this.api.patinetList}`).subscribe(resp => {
      console.log("RESPONSE", resp);
    });
  }`

to

 testGetCall() {
    return this.http.get<dummyModel>(`${this.api.patinetList}`)
      .pipe(
        tap((resp)=> console.log("RESPONSE", resp))
       );
  }

edited May 5, 2020 at 7:24

Philipp Meissner

5,4925 gold badges38 silver badges61 bronze badges

answered May 5, 2020 at 6:39

Raz Ronen

2,6683 gold badges16 silver badges29 bronze badges

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

4 Comments

Mr. Learner Over a year ago

You save my day in the middle of COVID-19.. :) your description is better than that error info Thank you

Raz Ronen Over a year ago

Glad I could help you!

Mr. Learner Over a year ago

Just want understand from your point of view. what tap and pipe combination actually doing here?. why my code was not worked simply with Subscription()

Raz Ronen Over a year ago

You can actually delete the pipe completely. The problem was that you called .subscribe() on .subscribe(), once you omitted the first one all is good. Furthermore, I don't know if this is what you asked - .pipe operator lets you do all kind of things to the response (or more correctly to say - the emitted item). There's like 104 operators you can manipulate or do other things that suits you. You can consider pipe as: "Hold on before emitting this, I want to do some more stuff"

Collectives™ on Stack Overflow

How to write unit test case for HTTPClient get() method service in Angular?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related