Is there a way to test Observable subscription in Angular?

itgeek

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

danday74

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.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

What is the best way to handle dependent observable subscription in angular?

Angular Observable subscription fallback?

Angular observable subscription issue

Angular 2: Observable / Subscription not triggering

Angular subscription on observable returns undefined

Angular 2 observable subscription not triggering

Pipe Observable subscription with map angular

Angular Return Observable from subscription

Angular return result of Subscription as Observable

Subscription to an observable is undefined only when running Angular Jasmine test, but is defined when running the app itself

In Angular, is this a valid way to check whether an observable subscription is open before attempting to close it?

Angular: Is there a way to simplify this subscription within a subscription?

angular2/4 Observable subscription

Angular listen on subscription start of rxjs observable?

Angular : relative navigation from an Observable subscription

Angular 6 - observable subscription doesn't work

Angular 8 and setting observable inside subscription

Angular UI not updating after Observable subscription triggers

Angular 4 UI not updating from observable subscription

Angular subscription is not executed despite an update to the observable

Angular - When to handle errors in Observable's subscription

How to use observable subscription in forloop angular 7

Angular 2: Observable subscription not reading data correctly

Type 'Observable<Subscription>' is not assignable to type Observable<MyData> rxjs angular

Subscription to Observable

Angular 4: How to test an event in a subscription

how to unit test subscription to a BehaviourSubject in angular

Writing unit test for subscription inside onInit() in Angular

Angular jest, test if inside observable