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?