Is there a way to test Observable subscription in Angular?

Question

I'm new to angular, trying to write unit test case for the below function.

HomeComponent.ts

 ngOnInit() {
    this.msalBroadcastService.inProgress$
      .pipe(
        filter((status: InteractionStatus) => status === InteractionStatus.None),
        takeUntil(this._destroying$)
      )
      .subscribe(() => {
        this.YesNo = [
          { label: 'Yes', value: 'Yes' },
          { label: 'No', value: 'No' },
        ];
 
        this.cols = [
          { field: 'Human', header: 'name', width: '5' },
          { field: 'MaritalStatus', header: 'Marital Status', width: '8' },
      ];
        this.getAllAccounts();
      });
  }

I tried the below test case, but I'm not sure how to cover YesNo , cols , getAllAccounts ()

HomeComponent.spec.ts

class MockUserService {
    inProgress = of("Login");
  }
  describe('AccountComponent', () => {
    let UserService;
    let comp;
    let userService;
    let testInteractionStatus: InteractionStatus.None;
    beforeEach(() => {
      TestBed.configureTestingModule({
        providers: [
          {
            provide: UserService,
            useClass: MockUserService
          },
          MsalService,
          MsalGuard,
          MsalBroadcastService,
          MessageService,
          HomeService,
          HomeComponent
      ],
        imports: [HttpClientTestingModule, RouterTestingModule],
        declarations: [
            HomeComponent
        ],
      }).compileComponents();
    });
  it('should test....', () => {
    const fixture = TestBed.createComponent(HomeComponent);
    const app = fixture.debugElement.componentInstance;
    app.ngOnInit();
    fixture.detectChanges();
    expect(userService.inProgress.YesNo).toBeDefined();
    expect(userService.inProgress.YesNo).toBeDefined();

  });

• Angular Version

Angular CLI: 12.2.6 Node: 14.17.6 Package Manager: npm 7.23.0 OS: darwin x64

Answer 1

You can use something like npm's rxjs-marbles or jasmine-marbles to test different values being emitted from your observable.

Within the test suite you can subscribe to your observable. Once the observable has emitted you would do:

expect(component.yesNo).toHaveLength(2) // this is pseudo code, actual code may vary

Notice currently you are testing the home component but within the tests for the home component are expecting the service to have something set. Unit testing is about isolating external dependencies so that you only ever test the component itself.

So you do not expect the service value to be anything. Instead, you mock the service and expect the component value to be something.

Regarding testing getAllAccounts() you would create a spy and expect that it has been called.

Answer 2

@itgeek, you can do the following to capture the subscription response:

ngOnInit() {
    this.msalBroadcastService.inProgress$
      .pipe(
        filter((status: InteractionStatus) => status === InteractionStatus.None),
        takeUntil(this._destroying$)
      )
      .subscribe((data: any) => { <<< ADD THIS LINE >>>
        console.log('Subscription Response ==>', data); << ADD THIS LINE >>
        this.YesNo = [
          { label: 'Yes', value: 'Yes' },
          { label: 'No', value: 'No' },
        ];
 
        this.cols = [
          { field: 'Human', header: 'name', width: '5' },
          { field: 'MaritalStatus', header: 'Marital Status', width: '8' },
      ];
        this.getAllAccounts();
      });
  }

Once you do that in your console, you should be able to see the response