Testing Angular component property changing in rxjs tap

Question

I have to test some property of my component, to change the proper way after loading datas.

Here is my components' ngOnInit

      ngOnInit(): void {
        const getOne$ = this.appDataService.proxy.getAllWithoutPaginate().pipe(
          tap((result: Array<CategoryInterface>) => {
            const categories = [];
    
            result.forEach((category: CategoryInterface) => {
              this.parseCategoryTree(categories, category);
            });
    
            this.categories$.next(categories);
            this.numberOfSelectedCategories$.next(this.calendarService.categories$.value.length);
          })
        );
    
        this.subscriptions.add(this.appDataService.start(getOne$, 'load categories').subscribe());
      }

Here is my spec.ts for it:

        imports....
    import { CalendarHeaderComponent } from './calendar-header.component';
    
    describe('CalendarHeaderComponent', () => {
      let component: CalendarHeaderComponent;
      let fixture: ComponentFixture<CalendarHeaderComponent>;
      let debugElement: DebugElement;
      const datas = CATEGORY_RESPONSE;
    
      beforeEach(waitForAsync(() => {
        TestBed.configureTestingModule({
          imports: [
            HttpClientTestingModule,
            DdataCoreModule.forRoot(environment),
            RouterTestingModule,
            AppModule
          ],
          providers: [
          ],declarations: [ CalendarHeaderComponent ]
        })
        .compileComponents()
        .then(() => {
          fixture = TestBed.createComponent(CalendarHeaderComponent);
          component = fixture.componentInstance;
          debugElement = fixture.debugElement;
    
          const proxySpy = jasmine.createSpyObj('ProxyService', ['getAllWithoutPaginate']);
          const appDataServiceSpy = jasmine.createSpyObj('AppDataService', ['proxy', 'start']);
    
          appDataServiceSpy.start.and.returnValue(of(datas));
          proxySpy.getAllWithoutPaginate.and.returnValue(of(datas));
          appDataServiceSpy.proxy = proxySpy;
          component.appDataService = appDataServiceSpy;
    
          fixture.detectChanges();
        });
      }));
    
      it('has running functions', fakeAsync(() => {
        expect(component.appDataService.start)
          .withContext('appDataService.start()')
          .toHaveBeenCalledTimes(1);
    
        expect(component.appDataService.proxy.getAllWithoutPaginate)
          .withContext('appDataService.proxy.getAllWithoutPaginate()')
          .toHaveBeenCalledTimes(1);
      }));
    
      it('properties changing after load', fakeAsync(() => {
    
        expect(component.numberOfSelectedCategories$.value).withContext('numberOfSelectedCategories$').toEqual(10);
    
        expect(component.categories$.value)
    
      }));
    
    });

I have a CATEGORY_RESPONSE for testing, and I have 6 parent and 4 child category in it. The parseCategoryTree() makes an array from the result with 10 category. Tha numberOfSelectedCategories$ has to be the length of this array.

The first test (has running functions) pass, but the second (properties changing after load) fails, the numberOfSelectedCategories$ is still equals 0.

How can I make test that run in rxjs pipe and tap and other?

Answer 1

I am thinking this can be a timing issue.

Try the following:

it('properties changing after load', fakeAsync(() => {
    // Call tick() to ensure the subscription block has ran at least once.
    // Maybe it is required.
    tick();
    // Instead of using .value, subscrible to the values
    combineLatest([
       component.numberOfSelectedCategories,
       categories
    ]).pipe(take(1)).subscribe(([numberOfSelected, categories]) => {
       expect(numberOfSelected).toBe(10);
       // Make sure this test fails so you know it went inside of the subscribe
       expect(1).toBe(2);
    });
     

      }));

This is the creator of RxJS: https://stackoverflow.com/a/45227115/7365461 suggesting we should never use .value and maybe this is a situation where an issue arises.