Change Detection in Cypress Angular Component Testing

Question

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?

Maybe we can fix instead the error with the E2Es, what do you think? Can you update your post with the error ? — Wandrille, May 10 '23 at 15:43
e2e was working properly without the manual change Detection, then I wrote the Component Test, Then I added the Change detection and broke the e2e test. Since manual Change detection is frowned upon, I decided to try and fix the Component test. See @AliF50's answer for a good work solution — Ken, May 10 '23 at 19:26

score 1 · Accepted Answer · edited May 10 '23 at 22:21

1

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.

edited May 10 '23 at 22:21

Ken

423
6
13

answered May 10 '23 at 17:28

AliF50

16,947
1
21
37

Change Detection in Cypress Angular Component Testing

1 Answers1