title: How to unit test error block of rxjs tap operator with jasmine mocks?
body: <p>Consider the following Http interceptor:</p>
  
  <pre><code>export class BusyIndicatorInterceptor implements HttpInterceptor {
      constructor(private busyIndicatorService: BusyIndicatorService) { }
  
      intercept(req: HttpRequest&lt;any&gt;, next: HttpHandler): Observable&lt;HttpEvent&lt;any&gt;&gt; {
          this.busyIndicatorService.show();
  
          return next.handle(req).pipe(tap((event: HttpEvent&lt;any&gt;) =&gt; {
              if (event instanceof HttpResponse) {
                  this.busyIndicatorService.hide();
              }
          }, err =&gt; {
              console.warn(err);
              this.busyIndicatorService.hide();
          }));
      }
  }
  </code></pre>
  
  <p>I am trying to unit test that the <code>busyIndicatorService.hide</code> is called when an error occurs such as <code>400</code>, <code>404</code> etc. I have written the following test but I think I am not mocking the handler properly.</p>
  
  <pre><code>    it("should set busy indicator visibility to false when HttpResponse is returned", () =&gt; {
          mockhandler.handle.and.returnValue(of(new HttpErrorResponse({ error: "Not Found", status: 404 })));
          const result = testee.intercept(mockRequest, mockhandler);
          result.subscribe(() =&gt; {
              expect(busyIndicatorService.hide).toHaveBeenCalledTimes(1);
          });
      });
  </code></pre>
  
  <p>Result:</p>
  
  <pre><code>Expected spy BusyIndicatorService.hide to have been called once. It was called 0 times
  </code></pre>
  
  <p>The following test works for testing the success block, where I mock the handler to return a new HttpResponse.</p>
  
  <pre><code>it("should set busy indicator visibility to false when HttpResponse is returned", () =&gt; {
      mockhandler.handle.and.returnValue(of(new HttpResponse()));
      const result = testee.intercept(mockRequest, mockhandler);
      result.subscribe(() =&gt; {
          expect(busyIndicatorService.hide).toHaveBeenCalledTimes(1);
      });
  });
  </code></pre>
  
  <p>Here is the full test class:</p>
  
  <pre><code>describe("BusyIndicatorInterceptor", () =&gt; {
      let testee: BusyIndicatorInterceptor;
      let busyIndicatorService: any;
      let mockRequest: any;
      let mockhandler: any;
  
      beforeEach(() =&gt; {
          mockRequest = jasmine.createSpyObj("HttpRequest", [""]);
          mockhandler = jasmine.createSpyObj("HttpHandler", ["handle"]);
          busyIndicatorService = jasmine.createSpyObj("BusyIndicatorService", ["show", "hide"]);
          busyIndicatorService.visibility = jasmine.createSpyObj("BehaviourSubject&lt;boolean&gt;", ["next"]);
          testee = new BusyIndicatorInterceptor(busyIndicatorService);
      });
  
      it("should be created", () =&gt; {
          expect(testee).toBeTruthy();
      });
  
      describe("intercept", () =&gt; {
  
          it("should set busy indicator visibility to true", () =&gt; {
              mockhandler.handle.and.returnValue(of(null));
              testee.intercept(mockRequest, mockhandler);
  
              expect(busyIndicatorService.show).toHaveBeenCalledTimes(1);
          });
  
          it("should set busy indicator visibility to false when HttpResponse is returned", () =&gt; {
              mockhandler.handle.and.returnValue(of(new HttpResponse()));
              const result = testee.intercept(mockRequest, mockhandler);
              result.subscribe(() =&gt; {
                  expect(busyIndicatorService.hide).toHaveBeenCalledTimes(1);
              });
          });
  
          it("should set busy indicator visibility to false when HttpResponse is returned", () =&gt; {
              mockhandler.handle.and.returnValue(of(new HttpErrorResponse({ error: "Not Found", status: 404 })));
              const result = testee.intercept(mockRequest, mockhandler);
              result.subscribe(() =&gt; {
                  expect(busyIndicatorService.hide).toHaveBeenCalledTimes(1);
              });
          });
      });
  });
  </code></pre>