fix: only replace find query if they got a get query (#151)

Author: timdeschryver

.github/workflows/ci.yml

@@ -18,6 +18,6 @@ jobs:
       - name: install
         run: npm install
       - name: build
-        run: npm run build --skip-nx-cache
+        run: npm run build -- --skip-nx-cache
       - name: test
-        run: npm run test --ci --code-coverage
+        run: npm run test -- --ci --code-coverage

.github/workflows/release.yml

@@ -22,9 +22,9 @@ jobs:
       - name: install
         run: npm install
       - name: build
-        run: npm run build --skip-nx-cache
+        run: npm run build -- --skip-nx-cache
       - name: test
-        run: npm run test --ci --code-coverage
+        run: npm run test -- --ci --code-coverage
       - name: Release
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

package.json

@@ -4,7 +4,7 @@
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
-    "build": "nx run-many --target=build --all",
+    "build": "nx run-many --target=build --projects=testing-library,jest-utils",
     "test": "nx run-many --target=test --all",
     "lint": "nx workspace-lint && ng lint",
     "e2e": "ng e2e",

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

@@ -121,7 +121,7 @@ export async function render<SutType, WrapperType = SutType>(
     detectChanges();
   };
 
-  const inject = TestBed.inject || TestBed.get
+  const inject = TestBed.inject || TestBed.get;
   let router = routes ? inject(Router) : null;
   const zone = inject(NgZone);
   const navigate = async (elementOrPath: Element | string, basePath = '') => {
@@ -167,10 +167,7 @@ export async function render<SutType, WrapperType = SutType>(
       Array.isArray(element)
         ? element.forEach((e) => console.log(dtlPrettyDOM(e, maxLength, options)))
         : console.log(dtlPrettyDOM(element, maxLength, options)),
-    ...replaceFindWithFindAndDetectChanges(
-      fixture.nativeElement,
-      dtlGetQueriesForElement(fixture.nativeElement, queries),
-    ),
+    ...replaceFindWithFindAndDetectChanges(dtlGetQueriesForElement(fixture.nativeElement, queries)),
   };
 }
 
@@ -315,10 +312,10 @@ class WrapperComponent {}
 /**
  * Wrap findBy queries to poke the Angular change detection cycle
  */
-function replaceFindWithFindAndDetectChanges<T>(container: HTMLElement, originalQueriesForContainer: T): T {
+function replaceFindWithFindAndDetectChanges<T>(originalQueriesForContainer: T): T {
   return Object.keys(originalQueriesForContainer).reduce((newQueries, key) => {
-    if (key.startsWith('find')) {
-      const getByQuery = originalQueriesForContainer[key.replace('find', 'get')];
+    const getByQuery = originalQueriesForContainer[key.replace('find', 'get')];
+    if (key.startsWith('find') && getByQuery) {
       newQueries[key] = async (text, options, waitOptions) => {
         // original implementation at https://github.com/testing-library/dom-testing-library/blob/master/src/query-helpers.js
         const result = await waitForWrapper(
@@ -354,7 +351,7 @@ function detectChangesForMountedFixtures() {
 /**
  * Re-export screen with patched queries
  */
-const screen = replaceFindWithFindAndDetectChanges(document.body, dtlScreen);
+const screen = replaceFindWithFindAndDetectChanges(dtlScreen);
 
 /**
  * Re-export waitFor with patched waitFor