fix: patch within queries to invoke a change detection cycle (#259)

Author: timdeschryver

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

@@ -19,8 +19,12 @@ import {
   waitFor as dtlWaitFor,
   waitForElementToBeRemoved as dtlWaitForElementToBeRemoved,
   screen as dtlScreen,
+  within as dtlWithin,
   waitForOptions as dtlWaitForOptions,
   configure as dtlConfigure,
+  Queries,
+  getQueriesForElement,
+  queries as dtlQueries,
 } from '@testing-library/dom';
 import { RenderComponentOptions, RenderDirectiveOptions, RenderTemplateOptions, RenderResult } from './models';
 import { getConfig } from './config';
@@ -432,6 +436,18 @@ function detectChangesForMountedFixtures() {
  */
 const screen = replaceFindWithFindAndDetectChanges(dtlScreen);
 
+/**
+ * Re-export within with patched queries
+ */
+
+const within: typeof getQueriesForElement = <T extends Queries = typeof dtlQueries>(
+  element: HTMLElement,
+  queriesToBind?: T,
+) => {
+  const container = dtlWithin(element, queriesToBind);
+  return replaceFindWithFindAndDetectChanges(container);
+};
+
 /**
  * Re-export waitFor with patched waitFor
  */
@@ -516,8 +532,7 @@ export {
   queryAllByAttribute,
   queryByAttribute,
   queryHelpers,
-  within,
 } from '@testing-library/dom';
 
 // export patched dtl
-export { screen, waitFor, waitForElementToBeRemoved };
+export { screen, waitFor, waitForElementToBeRemoved, within };

projects/testing-library/tests/integration.spec.ts

@@ -84,7 +84,7 @@ const entities = [
   },
 ];
 
-it('renders the table', async () => {
+test('renders the table', async () => {
   jest.useFakeTimers();
 
   await render(EntitiesComponent, {
@@ -125,10 +125,11 @@ it('renders the table', async () => {
   const row = await screen.findByRole('row', {
     name: /Entity 2/i,
   });
+
   userEvent.click(
     await within(row).findByRole('button', {
       name: /edit/i,
     }),
   );
-  waitFor(() => expect(modalMock.open).toHaveBeenCalledWith('edit entity', 'Entity 2'));
+  await waitFor(() => expect(modalMock.open).toHaveBeenCalledWith('edit entity', 'Entity 2'));
 });