rxjs-marbles

unable to write a test case with marbel testing


I have created this function because for all the requests my application sends out using http.post, this is how different parts handle the response. So rather than duplicating the code, I thought to create a function. I want to simulate error handling and thought to use marbel testing. Though I can see that the test case emits an error message, the test still fails. What am I doing wrong

private editAnswerSubject: Subject<Result>;
subscribeToReturnedObservable(observable:Observable<any>, subject:Subject<Result>) {
    observable.subscribe((res) => {
        const ev = <HttpEvent<any>>(res);
        if (ev.type === HttpEventType.Response) {
          const isResponseStructureOK: boolean = this.helper.validateServerResponseStructure(ev.body);
          if (isResponseStructureOK) {
            const response: ServerResponseAPI = ev.body;
            subject.next(new Result(response.result, response['additional-info']));

          } else {
            subject.next(new Result(messages.error, messages.invalidStructureOfResponse));
          }
        }
      },
      (error: ServerResponseAPI) => { //THIS IS THE CODE I WANT TO TEST
        const errorMessage: string = this.helper.userFriendlyErrorMessage(error);
        subject.next(new Result(messages.error, errorMessage));    
      },
      () => { // observable complete
      });
  }

  editAnswer(answer: Answer): any {
    const observable = this.bs.editAnswer(answer)
    this.subscribeToReturnedObservable(observable,this.editAnswerSubject);
  }

The test I have written so far is

fit('should call next for the subject if the response from the server is error', () => {
      const questionService:QuestionManagementService = TestBed.get(QuestionManagementService);
      const serverErrorResponse = {
        result: "error",
        ['additional-info']: "reason for error",
        ['http-status']: "304",
        ['http-status-text']: "not found"
      };
      const testScheduler = new TestScheduler((actual,expected)=>{
        expect(actual).toEqual(expected);
      });
      spyOn(questionService['editQuestionSubject'],'next');
      testScheduler.run(helpers=>{
        const { cold, expectObservable, expectSubscriptions } = helpers;
        const expectedMarble = '#|';//error
        const expectedIngridients = {a:serverErrorResponse};
        const observable = cold(expectedMarble,{},serverErrorResponse);

        questionService.subscribeToReturnedObservable(observable,questionService['editQuestionSubject']);
        const expectedResult = new Result(messages.error, 'Error code: 304. not found. error: reason for error');
        expect(questionService['editQuestionSubject'].next).toHaveBeenCalledWith(expectedResult);
      });

But it get error Expected spy next to have been called with [ Result({ result: 'error', additionalInfo: 'Error code: 304. not found. error: reason for error' }) ] but it was never called.

I can see in the code trace that error value was received.

subscribeToReturnedObservable called
got error from the Observable:  {result: "error", additional-info: "reason for error", http-status: "304", http-status-text: "not found"}

Solution

  • I had to call flush. To be honest, I don't know why and how it made things work. From why I could understand, I am testing the in synchronous manner. So I need to call flush so that the assertion (expect) is called when the Observable completes.

    fit('should call next for the subject if the response from the server is error', () => {
      const questionService:QuestionManagementService = TestBed.get(QuestionManagementService);
      const serverErrorResponse = {
        result: "error",
        ['additional-info']: "reason for error",
        ['http-status']: "304",
        ['http-status-text']: "not found"
      };
      const testScheduler = new TestScheduler((actual,expected)=>{
        expect(actual).toEqual(expected);
      });
      spyOn(questionService['editQuestionSubject'],'next');
      testScheduler.run(helpers=>{
        const { cold, expectObservable, expectSubscriptions,flush } = helpers;
        const expectedMarble = '#|';//error
       // const expectedIngridients = {a:serverErrorResponse};
        const observable = cold(expectedMarble,null,serverErrorResponse);
    
        questionService.subscribeToReturnedObservable(observable,questionService['editQuestionSubject']);
        flush(); //THIS
        const expectedResult = new Result(messages.error, 'Error code: 304. not found. error: reason for error');
        expect(questionService['editQuestionSubject'].next).toHaveBeenCalledWith(expectedResult);
      });
    });