Unit test for NgRx component-store

1.6k Views Asked by At

I am writing a unit test for my component-store.

What I want to test is to make sure a button is disabled after vm$ has changed. Based on the example, I tried to override the provider for my TestBed. Here is my code:

my template:

<button mat-raised-button color="primary" (click)="onClickDownloadCreditCardButton()"
            [disabled]="viewModel.creditLoading" class="mgnl_15 result_value_uploadbtn" id="creditDownload">download credit</button>
<button mat-raised-button color="primary" (click)="onClickDownloadAccountButton()"
            [disabled]="viewModel.accountLoading" class="mgnl_15 result_value_uploadbtn"
            id="accountDownload">download account</button>

my spec:

fit('should disable the download credit btn when creditLoading is true', () => {
    const mockViewModel = {
      billingResultDataSource,
      warningMessages: new Map<string, string>(),
      loading: false,
      accountLoading: false,
      creditLoading: true,
      downloadBillTargetMonth: '2022/04',
      error: null
    };

    const mockStoreService = jasmine.createSpyObj(
      'StoreService',
      ['downloadCreditCard'],
      { viewModel$: of(mockViewModel) }
    );

    TestBed.overrideProvider(StoreService, { useValue: mockStoreService });
    fixture = TestBed.createComponent(BillingResultDataRegisterComponent);
    fixture.detectChanges();

    const btnAccount = el.query(By.css('button#accountDownload'));
    console.log(`======account btn: `, btnAccount.nativeElement);
    const btnCredit = el.query(By.css('button#creditDownload'));
    console.log(`======credit btn: `, btnCredit.nativeElement);

    expect(btnCredit.nativeElement.getAttribute('disabled')).toBe('true');
    expect(btnAccount.nativeElement.getAttribute('disabled')).toBe('false');
  });

None of the buttons are affected by the mockViewModel.

And I also tried this.

mockViewModel$.next({      
    billingResultDataSource,
    warningMessages: new Map<string, string>(),
    loading: false,
    accountLoading: false,
    creditLoading: true,
    downloadBillTargetMonth: '2022/04',
    error: null
})

These 2 buttons are always disabled="true"

They don't even have a testing example for component-store. Should I give up on component-store?

0

There are 0 best solutions below