How to unit test ngrx effects when the API fail?

Question

I can do a test for confirmedMarkBookAsFinished action but I don't know how to test failedMarkBookAsFinished. So kindly help to test that.

This is effect.ts file

markBookAsRead$ = createEffect(() =>
    this.actions$.pipe(
      ofType(ReadingListActions.markBookAsFinished),
      concatMap(({ item }) => {
        return this.http
          .put<ReadingListItem>(
            `/api/reading-list/${item.bookId}/finished`,
            item
          )
          .pipe(
            map((data) =>
              ReadingListActions.confirmedMarkBookAsFinished({ item: data })
            ),
            catchError(() =>
              of(ReadingListActions.failedMarkBookAsFinished({ item }))
            )
          );
      })
    )
  );

So basically, I have to write a test for an effect success and fail, I wrote a test for success but for failing how to write I not aware of it

This is effect.spec.ts file

import { TestBed } from '@angular/core/testing';
import { ReplaySubject } from 'rxjs';
import { provideMockActions } from '@ngrx/effects/testing';
import { provideMockStore } from '@ngrx/store/testing';
import { HttpTestingController } from '@angular/common/http/testing';

import { SharedTestingModule,createReadingListItem } from '@tmo/shared/testing';
import { ReadingListEffects } from './reading-list.effects';
import * as ReadingListActions from './reading-list.actions';

describe('ToReadEffects', () => {
  let actions: ReplaySubject<any>;
  let effects: ReadingListEffects;
  let httpMock: HttpTestingController;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [SharedTestingModule],
      providers: [
        ReadingListEffects,
        provideMockActions(() => actions),
        provideMockStore()
      ]
    });

    effects = TestBed.inject(ReadingListEffects);
    httpMock = TestBed.inject(HttpTestingController);
  });

  describe('loadReadingList$', () => {
    it('should work', done => {
      actions = new ReplaySubject();
      actions.next(ReadingListActions.init());

      effects.loadReadingList$.subscribe(action => {
        expect(action).toEqual(
          ReadingListActions.loadReadingListSuccess({ list: [] })
        );
        done();
      });

      httpMock.expectOne('/api/reading-list').flush([]);
    });
  });

  describe('markBookAsRead$', () => {
    it('should return confirmedMarkBookAsFinished action with ReadingListItem, on success', done => {
      const item = createReadingListItem('A')
      actions = new ReplaySubject();
      actions.next(ReadingListActions.markBookAsFinished({item}));

      effects.markBookAsRead$.subscribe(action => {
        expect(action).toEqual(
          ReadingListActions.confirmedMarkBookAsFinished({ item })
        );
        done();
      });

      httpMock.expectOne(`/api/reading-list/${item.bookId}/finished`).flush(item);
    });
 });
});

score 0 · Answer 1 · answered Mar 30 '21 at 13:01

0

Instead of flush, mock an error for the API call.

it('should return failedMarkBookAsFinishedaction with ReadingListItem, on fail', done => {
      const item = createReadingListItem('A')
      actions = new ReplaySubject();
      actions.next(ReadingListActions.markBookAsFinished({item}));

      effects.markBookAsRead$.subscribe(action => {
        expect(action).toEqual(
          ReadingListActions.failedMarkBookAsFinished({ item })
        );
        done();
      });
      // add the second object here to specify a failed request
      httpMock.expectOne(`/api/reading-list/${item.bookId}/finished`).flush(item, { status: 400, statusText: 'Bad Request' });
    });

answered Mar 30 '21 at 13:01

AliF50

16,947
1
21
37

Thanks, AliF50, With this code test case, run successfully but I didn't understand the comment your " add the second object here to specify a failed request". Please Can you more specify it so it will help? – hiten rathod Mar 30 '21 at 17:10
https://stackoverflow.com/questions/46028804/how-to-mock-angular-4-3-httpclient-an-error-response-in-testing Yes check that out. You need to specify the second object with status and statusText so the api call results in a failure in the test. – AliF50 Mar 30 '21 at 17:52

How to unit test ngrx effects when the API fail?

1 Answers1