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

Author: timdeschryver

apps/example-app/src/app/examples/13-scrolling.component.spec.ts

@@ -12,7 +12,7 @@ test('should scroll to load more items', async () => {
   expect(item0).toBeVisible();
 
   screen.getByTestId('scroll-viewport').scrollTop = 500;
-  await waitForElementToBeRemoved(() => screen.getByText(/Item #0/i));
+  await waitForElementToBeRemoved(() => screen.queryByText(/Item #0/i));
 
   const item12 = await screen.findByText(/Item #12/i);
   expect(item12).toBeVisible();

projects/testing-library/src/lib/testing-library.ts

@@ -303,16 +303,21 @@ function addAutoImports({ imports, routes }: Pick<RenderComponentOptions<any>, '
 }
 
 /**
- * Wrap waitFor to poke the Angular change detection cycle before invoking the callback
+ * Wrap waitFor to invoke the Angular change detection cycle before invoking the callback
  */
 async function waitForWrapper<T>(
   detectChanges: () => void,
   callback: () => T extends Promise<any> ? never : T,
   options?: dtlWaitForOptions,
 ): Promise<T> {
+  detectChanges();
   return await dtlWaitFor(() => {
-    detectChanges();
-    return callback();
+    try {
+      return callback();
+    } catch (error) {
+      setImmediate(() => detectChanges());
+      throw error;
+    }
   }, options);
 }
 
@@ -340,8 +345,10 @@ async function waitForElementToBeRemovedWrapper<T>(
   }
 
   return await dtlWaitForElementToBeRemoved(() => {
+    const result = cb();
     detectChanges();
-    return cb();
+    setImmediate(() => detectChanges());
+    return result;
   }, options);
 }
 

projects/testing-library/tests/issues/188.spec.ts renamed to projects/testing-library/tests/issues/issue-188.spec.ts

@@ -0,0 +1,29 @@
+import { Component } from '@angular/core';
+import { render, waitFor, screen } from '@testing-library/angular';
+
+@Component({
+  template: ` <button [ngClass]="classes">Load</button> `,
+})
+class LoopComponent {
+  get classes() {
+    return {
+      someClass: true,
+    };
+  }
+}
+
+test('wait does not end up in a loop', async () => {
+  await render(LoopComponent);
+
+  await expect(
+    waitFor(() => {
+      expect(true).toEqual(false);
+    }),
+  ).rejects.toThrow();
+});
+
+test('find does not end up in a loop', async () => {
+  await render(LoopComponent);
+
+  await expect(screen.findByText('foo')).rejects.toThrow();
+});

projects/testing-library/tests/issues/issue-230.spec.ts

@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
 import { timer } from 'rxjs';
-import { render, screen, fireEvent, waitFor as waitForATL } from '../src/public_api';
+import { render, screen, fireEvent, waitFor } from '../src/public_api';
 
 @Component({
   selector: 'atl-fixture',
@@ -24,7 +24,7 @@ test('waits for assertion to become true', async () => {
 
   fireEvent.click(screen.getByTestId('button'));
 
-  await waitForATL(() => screen.getByText('Success'));
+  await waitFor(() => screen.getByText('Success'));
   screen.getByText('Success');
 });
 
@@ -33,7 +33,7 @@ test('allows to override options', async () => {
 
   fireEvent.click(screen.getByTestId('button'));
 
-  await expect(waitForATL(() => screen.getByText('Success'), { timeout: 200 })).rejects.toThrow(
+  await expect(waitFor(() => screen.getByText('Success'), { timeout: 200 })).rejects.toThrow(
     /Unable to find an element with the text: Success/i,
   );
 });