Change Detection in Cypress Angular Component Testing

huangapple
go评论86阅读模式
英文:

Change Detection in Cypress Angular Component Testing

问题

I am using cypress angular component testing to try to test whether or not a button is disabled.

I am testing the following code:

  1. this.subsink.sink = this.manageService.validCompetitorListener
  2. .subscribe((validCompetitor:ValidCompetitor)=>{
  3.   this.validCompetitor = validCompetitor;
  4.   //this.cdref.detectChanges();
  5. })

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 :

  1. <button
  2.     data-cy="save-btn"
  3.     class="btn btn-success"
  4.     [disabled]="validCompetitor.invalid"
  5.     (click)="save()"
  6.   >Save</button>

The following Test works:

  1. it.only('should save data to system', () => {
  2.   cy.wrap(true).then(() => {
  3.     manageService.updateAthlete(true, new Athlete(getMockAthlete()));
  4.     manageService.updateRegister(true,{belt_id:5});
  5.   });
  6.   cy.get('#info').click();
  7.   cy.get('[data-cy="save-btn"]').click();
  8.   
  9. });

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 equivalent in cypress 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:

  1. this.subsink.sink = this.manageService.validCompetitorListener
  2. .subscribe((validCompetitor:ValidCompetitor)=>{
  3.   this.validCompetitor = validCompetitor;
  4.   //this.cdref.detectChanges();
  5. })

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 :

  1. <button
  2.     data-cy="save-btn"
  3.     class="btn btn-success"
  4.     [disabled]="validCompetitor.invalid"
  5.     (click)="save()"
  6.   >Save</button>

The following Test works:

  1. it.only('should save data to system', () => {
  2.   cy.wrap(true).then(() => {
  3.     manageService.updateAthlete(true, new Athlete(getMockAthlete()));
  4.     manageService.updateRegister(true,{belt_id:5});
  5.   });
  6.   cy.get('#info').click();
  7.   cy.get('[data-cy="save-btn"]').click();
  8.   
  9. });

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?

答案1

得分: 1

我相信你可以通过以下方式来处理 fixture。

  1. let myFixture: ComponentFixture<Component>;
  3. beforeEach(() => {
  4.    cy.mount(Component)
  5.     .then(({ fixture }) => {
  6.         myFixture = fixture
  7.     })
  8. });
  10. // should be able to do myFixture.detectChanges() now.

如果您有其他需要翻译的部分，请告诉我。

英文:

I believe you can do the following to get a handle on the fixture.

  1. let myFixture: ComponentFixture&lt;Component&gt;;
  3. beforeEach(() =&gt; {
  4.    cy.mount(Component)
  5.     .then(({ fixture }) =&gt; {
  6.         myFixture = fixture
  7.     })
  8. });
  10. // should be able to do myFixture.detectChanges() now.

huangapple
  • 本文由 发表于 2023年5月10日 23:40:05
  • 转载请务必保留本文链接：https://go.coder-hub.com/76220334.html
  • angular
  • cypress-component-test-runner
  • unit-testing
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定