I am using cypress angular component testing to try to test weather or not a button is disabled.
I am testing the following code:
this.subsink.sink = this.manageService.validCompetitorListener
.subscribe((validCompetitor:ValidCompetitor)=>{
this.validCompetitor = validCompetitor;
//this.cdref.detectChanges();
})
I took out the cdref.detectChanges, because when I run the e2e test, this produces an error. validCompetitorListener is an rxjs BehaviorSubject
The template code is :
<button
data-cy="save-btn"
class="btn btn-success"
[disabled]="validCompetitor.invalid"
(click)="save()"
>Save</button>
The following Test works:
it.only('should save data to system', () => {
cy.wrap(true).then(() => {
manageService.updateAthlete(true, new Athlete(getMockAthlete()));
manageService.updateRegister(true,{belt_id:5});
});
cy.get('#info').click();
cy.get('[data-cy="save-btn"]').click();
});
BUT the only reason I use the cy.get('#info').click() statement is to get change detection to work so my component, since changeDetection caused an error when I ran the e2e test. If this was a standard Angular unit test I would include fixture.detectChanges. Is there an equivelent in cypress component testing?
I believe you can do the following to get a handle on the fixture
.
let myFixture: ComponentFixture<Component>;
beforeEach(() => {
cy.mount(Component)
.then(({ fixture }) => {
myFixture = fixture
})
});
// should be able to do myFixture.detectChanges() now.