Commit 4b269bc

authored

fix: infinite loop in waitFor when DOM is mutating (testing-library#231)

1 parent 7a64a6b commit 4b269bcCopy full SHA for 4b269bc

File tree

+44

-8

lines changed

+44

-8

lines changed

Lines changed: 1 addition & 1 deletion

Original file line number	Diff line number	Diff line change
`@@ -12,7 +12,7 @@ test('should scroll to load more items', async () => {`
`12`	`12`	`expect(item0).toBeVisible();`
`13`	`13`
`14`	`14`	`screen.getByTestId('scroll-viewport').scrollTop = 500;`
`15`		`- await waitForElementToBeRemoved(() => screen.getByText(/Item#0/i));`
	`15`	`+ await waitForElementToBeRemoved(() => screen.queryByText(/Item#0/i));`
`16`	`16`
`17`	`17`	`const item12 = await screen.findByText(/Item#12/i);`
`18`	`18`	`expect(item12).toBeVisible();`

Lines changed: 11 additions & 4 deletions

Original file line number	Diff line number	Diff line change
`@@ -303,16 +303,21 @@ function addAutoImports({ imports, routes }: Pick<RenderComponentOptions<any>, '`
`303`	`303`	`}`
`304`	`304`
`305`	`305`	`/**`
`306`		`- * Wrap waitFor to poke the Angular change detection cycle before invoking the callback`
	`306`	`+ * Wrap waitFor to invoke the Angular change detection cycle before invoking the callback`
`307`	`307`	`*/`
`308`	`308`	`async function waitForWrapper<T>(`
`309`	`309`	`detectChanges: () => void,`
`310`	`310`	`callback: () => T extends Promise<any> ? never : T,`
`311`	`311`	`options?: dtlWaitForOptions,`
`312`	`312`	`): Promise<T> {`
	`313`	`+ detectChanges();`
`313`	`314`	`return await dtlWaitFor(() => {`
`314`		`- detectChanges();`
`315`		`- return callback();`
	`315`	`+ try {`
	`316`	`+ return callback();`
	`317`	`+ } catch (error) {`
	`318`	`+ setImmediate(() => detectChanges());`
	`319`	`+ throw error;`
	`320`	`+ }`
`316`	`321`	`}, options);`
`317`	`322`	`}`
`318`	`323`
`@@ -340,8 +345,10 @@ async function waitForElementToBeRemovedWrapper<T>(`
`340`	`345`	`}`
`341`	`346`
`342`	`347`	`return await dtlWaitForElementToBeRemoved(() => {`
	`348`	`+ const result = cb();`
`343`	`349`	`detectChanges();`
`344`		`- return cb();`
	`350`	`+ setImmediate(() => detectChanges());`
	`351`	`+ return result;`
`345`	`352`	`}, options);`
`346`	`353`	`}`
`347`	`354`

File renamed without changes.

Lines changed: 29 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,29 @@`
	`1`	`+import { Component } from '@angular/core';`
	`2`	`+import { render, waitFor, screen } from '@testing-library/angular';`
	`3`	`+`
	`4`	`+@Component({`
	`5`	+ template: ` <button [ngClass]="classes">Load</button> `,
	`6`	`+})`
	`7`	`+class LoopComponent {`
	`8`	`+ get classes() {`
	`9`	`+ return {`
	`10`	`+ someClass: true,`
	`11`	`+ };`
	`12`	`+ }`
	`13`	`+}`
	`14`	`+`
	`15`	`+test('wait does not end up in a loop', async () => {`
	`16`	`+ await render(LoopComponent);`
	`17`	`+`
	`18`	`+ await expect(`
	`19`	`+ waitFor(() => {`
	`20`	`+ expect(true).toEqual(false);`
	`21`	`+ }),`
	`22`	`+ ).rejects.toThrow();`
	`23`	`+});`
	`24`	`+`
	`25`	`+test('find does not end up in a loop', async () => {`
	`26`	`+ await render(LoopComponent);`
	`27`	`+`
	`28`	`+ await expect(screen.findByText('foo')).rejects.toThrow();`
	`29`	`+});`

File renamed without changes.

Lines changed: 3 additions & 3 deletions

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`import { Component } from '@angular/core';`
`2`	`2`	`import { timer } from 'rxjs';`
`3`		`-import { render, screen, fireEvent, waitFor aswaitForATL} from '../src/public_api';`
	`3`	`+import { render, screen, fireEvent, waitFor } from '../src/public_api';`
`4`	`4`
`5`	`5`	`@Component({`
`6`	`6`	`selector: 'atl-fixture',`
`@@ -24,7 +24,7 @@ test('waits for assertion to become true', async () => {`
`24`	`24`
`25`	`25`	`fireEvent.click(screen.getByTestId('button'));`
`26`	`26`
`27`		`- await waitForATL(() => screen.getByText('Success'));`
	`27`	`+ await waitFor(() => screen.getByText('Success'));`
`28`	`28`	`screen.getByText('Success');`
`29`	`29`	`});`
`30`	`30`
`@@ -33,7 +33,7 @@ test('allows to override options', async () => {`
`33`	`33`
`34`	`34`	`fireEvent.click(screen.getByTestId('button'));`
`35`	`35`
`36`		`- await expect(waitForATL(() => screen.getByText('Success'), { timeout: 200 })).rejects.toThrow(`
	`36`	`+ await expect(waitFor(() => screen.getByText('Success'), { timeout: 200 })).rejects.toThrow(`
`37`	`37`	`/Unabletofindanelementwiththetext:Success/i,`
`38`	`38`	`);`
`39`	`39`	`});`

Comments

(0)