angularunit-testingcypress-component-test-runner

Change Detection in Cypress Angular Component Testing


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?


Solution

  • 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.