From afd0de953186806d5eafb942214488e52761cc91 Mon Sep 17 00:00:00 2001
From: Tim Deschryver <28659384+timdeschryver@users.noreply.github.com>
Date: Wed, 17 Nov 2021 14:18:26 +0100
Subject: [PATCH] fix: patch within queries to invoke a change detection cycle
 (#259)

---
 .../src/lib/testing-library.ts                | 19 +++++++++++++++++--
 .../testing-library/tests/integration.spec.ts |  5 +++--
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/projects/testing-library/src/lib/testing-library.ts b/projects/testing-library/src/lib/testing-library.ts
index 95f28fc7..36ee871b 100644
--- a/projects/testing-library/src/lib/testing-library.ts
+++ b/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 };
diff --git a/projects/testing-library/tests/integration.spec.ts b/projects/testing-library/tests/integration.spec.ts
index 49e9094e..afd56698 100644
--- a/projects/testing-library/tests/integration.spec.ts
+++ b/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'));
 });