How to test angular get request?

Question

I would like to test get request related functionality. Request should be fired and values mapped to relevant object. Related code is:

it('Should have values set', () => {
  const service: FetcherService = TestBed.get(FetcherService);
  const technologyString = 'technology';
  service.fetchNews(technologyString);
  expect(service.fetchNewsResponse.category === technologyString);
});

Currently it however may not be relevant as relatated test fails with Karma and message is

TypeError: Cannot read property 'category' of undefined

What should I change in code to fix this issue?

edit:

Code related to service.fetchNews is:

public fetchNews(category: string) {
this.httpClient.get<News>('http://localhost:8080/news/' + this.country + '/' + category + '/')
.subscribe(data => this.fetchNewsResponse = data );
}

Can you post the FetcherService code ? Maybe fetchNews is asynchronous and the assertion is done before fetchNewsResponse is set ? — Junior Dussouillez
– Junior Dussouillez, Commented Oct 30, 2018 at 13:57

dmcgrandle · Accepted Answer · 2018-11-02 00:10:04Z

2

Your issues are two-fold. First, you are attempting to read data that has not yet returned (asynchronously) from the server. But more importantly, you are attempting to do an end-to-end test in a unit (or functional) testing environment. Difference between functional test and end-to-end test

For unit testing a service that makes http calls with httpClient, using the HttpClientTestingModule and HttpTestingController give you the greatest flexibility. See the documentation here: https://angular.io/guide/http#testing-http-requests

In your case the final result should look something like this:

describe('FetchNews Service', () => {
    let httpMock: HttpTestingController;
    beforeEach(() => {
        TestBed.configureTestingModule({
            imports: [ HttpClientTestingModule ],
            providers: [ FetcherService ]
        });
        httpMock = TestBed.get(HttpTestingController);
    });
    it('should have values set', async(() => {
        const service: FetcherService = TestBed.get(FetcherService);
        const technologyString = 'technology';
        const responseData = {category: technologyString};
        const country = 'italy';
        service.fetchNews(technologyString);
        let req = httpMock.expectOne('http://localhost:8080/news/' + country + '/technology/');
        expect(req.request.method).toEqual('GET');
        req.flush(responseData); // send responseData as result of the get
        expect(service.fetchNewsResponse.category).toEqual(technologyString); // may need to be tested after observable resolves.
    }));
});

edited Nov 2, 2018 at 0:10

answered Nov 1, 2018 at 23:43

dmcgrandle

6,0801 gold badge22 silver badges40 bronze badges

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

1 Comment

mateuszs Over a year ago

Thank you for your answer, I already accepted another one however upvoted this one too.

Harini P · Accepted Answer · 2018-10-30 14:23:25Z

1

I believe this has something to do with the API's response. Test if you get any error by defining an error handler in your GET request like:

public fetchNews(category: string) {
this.httpClient.get<News>('http://localhost:8080/news/' + this.country + '/' + category 
+ '/')
.subscribe(data => {
this.fetchNewsResponse = data
},
 error => { console.log('Error:', error); }
);
}

answered Oct 30, 2018 at 14:23

Harini P

6276 silver badges12 bronze badges

1 Comment

mateuszs Over a year ago

Thank you for your answer, at least part of issue was related to fact that Karma's tests were running on different port than application - and server did not had relevant setup for handling this. I also added await delay(2000); related code to test and issue is resolved.

Collectives™ on Stack Overflow

How to test angular get request?

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related