Unit testing of catcherror pipe function in angular service

Question

I try to understand how to test this function. From (err)=>{ line, it's showing as an uncovered statement. service.ts

Deletevote(inp) {
   console.log(inp);
     
   return this.http.post(environment.apiUrl + '/api/reset/abc', inp).pipe(
      catchError((err) => {
         console.log('error caught in service');
         console.error(err);
         return throwError(err);
      })
   );
}

I have created this test case for positive flow, but err part is still not covered. Please guide me about how to create the error.

service.spec.ts

const Mockcolor = 'green';
const MockGen = 'male';

it('submitnominGreen', () => {
    service.Deletevote(DeleteObj).subscribe((posts) =>{
      expect(posts).toEqual([Mockcolor,MockGen], 'should check mock data');
    });
    const req =  httpTestCtrl.expectOne(environment.apiUrl + '/api/reset/abc');
    expect(req.request.method).toBe('POST');
    expect(req.cancelled).toBeFalsy();
    req.flush([Mockcolor,MockGen])
});

Did you read https://angular.io/guide/http#testing-for-errors? — jonrsharpe, Jul 14 '21 at 15:06
You can't expect the documentation to cover every possible kind of consuming code. That shows how to make an error happen in the test, then you have to apply that to your specific circumstances. — jonrsharpe, Jul 15 '21 at 08:08
I am new contributor and I need code wise help. Unit testing doesnot have much reference material. — , Jul 15 '21 at 11:43
It has _loads_ of reference material, in the official docs alone there's what I've pointed you to as well as this whole section: https://angular.io/guide/testing. — jonrsharpe, Jul 15 '21 at 11:53
Again you _cannot_ expect the documentation, or anyone else's resource, to show your specific code. It's **your job** to apply the general information to your specific case. If you can't provide a [mre] of your attempt to do so, you might as well delete this question - this isn't a code-writing service. — jonrsharpe, Jul 15 '21 at 12:21
`it('submitnominGreen', () => { service.Deletevote(DeleteObj).subscribe((posts) =>{ expect(posts).toEqual([Mockcolor,MockGen], 'should check mock data'); }); const req = httpTestCtrl.expectOne(environment.apiUrl + '/api/reset/abc'); expect(req.request.method).toBe('POST'); expect(req.cancelled).toBeFalsy(); req.flush([Mockcolor,MockGen]) });` I tried this but still it's not covering error part. Please guide for errors part now — , Jul 15 '21 at 12:59
Please [edit] the question. But you don't actually seem to be creating an error state, so it's no surprise that part's not covered - maybe try _actually applying what the documentation suggests_. — jonrsharpe, Jul 15 '21 at 13:02
No you haven't. You have _one_ test, that appears to be for the happy path. Of course the other branch isn't covered. — jonrsharpe, Jul 15 '21 at 13:35
Copy the code in your angular project or stackblitz and solve the problem, if you really want to! — , Jul 15 '21 at 14:59
Okay, For the last time I am asking what basic requirements do you want me to provide? P.S. I am not getting how to create error so I can't give the error input test case. — , Jul 15 '21 at 17:39
Welcome to SO community, Sakthy Rupini! you did a great job refining the question. It would be beneficial for you and the community to finish the introductory tour https://stackoverflow.com/tour. It would help to increase your chances to get help. And would give you a badge (: Probably some points as well, which would give you more permissions here — IAfanasov, Jul 17 '21 at 07:53

score 1 · Accepted Answer · edited Jul 19 '21 at 07:03

1

First of all, the code inside the subscribe of the unit test would not be executed. Karma would wait for all the sync execution to be finished and would consider the test finished before the async callback would be executed. As a solution, you might use the done callback to indicate when is the test finished manually.

You did a great job leveraging the HttpTestingModule for testing. It allows you to test the errors easily as well. Instead of req.flush you might use the req.error method to simulate the HTTP error.

it('submitnominGreen', (done) => {
    const mockError = {error: 'someError'} as ErrorEvent;
    service.Deletevote(DeleteObj).subscribe(() => {}, (thrownError) =>{
      expect(thrownError.error).toEqual(mockError);
      done();
    });
    const req =  httpTestCtrl.expectOne(environment.apiUrl + '/api/reset/abc');
    req.error(mockError);
});

Take a look into the Error handling section of this nice article: Testing Angular HTTP Communication. It would be of help for some other scenarios as well.

edited Jul 19 '21 at 07:03

Kartik Dolas

703
1
9
24

answered Jul 17 '21 at 07:51

IAfanasov

4,775
3
27
42

2

I tried this code but in req.error line it's throwing this error `Argument of type 'Error' is not assignable to parameter of type 'ErrorEvent'. Type 'Error' is missing the following properties from type 'ErrorEvent': colno, error, filename, lineno, and 22 more.ts(2345)` – Jul 17 '21 at 14:42
Now this is the error. `Expected object to be a kind of Object, but was HttpErrorResponse({ headers: HttpHeaders({ normalizedNames: Map( ), lazyUpdate: null, headers: Map( ) }), status: 0, statusText: 'Unknown Error', url: 'http://localhost:3000/api/reset/abc', ok: false, name: 'HttpErrorResponse', message: 'Http failure response for http://localhost:3000/api/reset/abc: 0 ', error: Object({ error: 'someError' }) }).` – Jul 17 '21 at 17:25
it starts to look like a google driven development (: @Sakthy Rupini, it is just a tiny step towards the solution. please read the error message. – IAfanasov Jul 18 '21 at 12:04
I thought I had to remove as ErrorEvent, but it didn't work. – Jul 18 '21 at 22:22
2

Hello Sakthy, I have added an edit to the answer, as soon as @IAfanasov will accept it, you'll get it correct. Till the time try to console thrownError as well as mockError object. – Kartik Dolas Jul 18 '21 at 22:35
Hello @IAfanasov , My friend has a doubt in Unit testing. Please solve this. https://stackoverflow.com/questions/68334529/how-to-unit-test-matsnackbar-using-jasmine-karma-in-angular – Kartik Dolas Jul 19 '21 at 10:02

Unit testing of catcherror pipe function in angular service

1 Answers1