fix: ensure queries provided by fixture work after navigation

Author: jrolfs

lib/common.ts

@@ -0,0 +1,59 @@
+import {IQueryUtils} from './typedefs'
+
+export const queryNames: Array<keyof IQueryUtils> = [
+  'queryByPlaceholderText',
+  'queryAllByPlaceholderText',
+  'getByPlaceholderText',
+  'getAllByPlaceholderText',
+  'findByPlaceholderText',
+  'findAllByPlaceholderText',
+
+  'queryByText',
+  'queryAllByText',
+  'getByText',
+  'getAllByText',
+  'findByText',
+  'findAllByText',
+
+  'queryByLabelText',
+  'queryAllByLabelText',
+  'getByLabelText',
+  'getAllByLabelText',
+  'findByLabelText',
+  'findAllByLabelText',
+
+  'queryByAltText',
+  'queryAllByAltText',
+  'getByAltText',
+  'getAllByAltText',
+  'findByAltText',
+  'findAllByAltText',
+
+  'queryByTestId',
+  'queryAllByTestId',
+  'getByTestId',
+  'getAllByTestId',
+  'findByTestId',
+  'findAllByTestId',
+
+  'queryByTitle',
+  'queryAllByTitle',
+  'getByTitle',
+  'getAllByTitle',
+  'findByTitle',
+  'findAllByTitle',
+
+  'queryByRole',
+  'queryAllByRole',
+  'getByRole',
+  'getAllByRole',
+  'findByRole',
+  'findAllByRole',
+
+  'queryByDisplayValue',
+  'queryAllByDisplayValue',
+  'getByDisplayValue',
+  'getAllByDisplayValue',
+  'findByDisplayValue',
+  'findAllByDisplayValue',
+]

lib/fixture.ts

@@ -1,15 +1,25 @@
 import type {PlaywrightTestArgs, TestFixture} from '@playwright/test'
+
+import {getDocument, queries as unscopedQueries} from '.'
+import {queryNames} from './common'
 import type {IScopedQueryUtils as Queries} from './typedefs'
-import {getDocument, getQueriesForElement} from '.'
 
 interface TestingLibraryFixtures {
   queries: Queries
 }
 
 const fixture: TestFixture<Queries, PlaywrightTestArgs> = async ({page}, use) => {
-  const document = await getDocument(page)
+  const queries = {} as Queries
+
+  queryNames.forEach(name => {
+    // @ts-expect-error
+    queries[name] = async (...args) => {
+      const document = await getDocument(page)
 
-  const queries = getQueriesForElement(document)
+      // @ts-expect-error
+      return unscopedQueries[name](document, ...args)
+    }
+  })
 
   await use(queries)
 }

lib/index.ts

@@ -4,6 +4,7 @@ import {JSHandle, Page} from 'playwright'
 import waitForExpect from 'wait-for-expect'
 
 import {ElementHandle, IConfigureOptions, IQueryUtils, IScopedQueryUtils} from './typedefs'
+import {queryNames} from './common'
 
 const domLibraryAsString = readFileSync(
   path.join(__dirname, '../dom-testing-library.js'),
@@ -193,64 +194,7 @@ export function getQueriesForElement<T>(
   // eslint-disable-next-line no-param-reassign
   if (!contextFn) contextFn = () => o
 
-  const functionNames: Array<keyof IQueryUtils> = [
-    'queryByPlaceholderText',
-    'queryAllByPlaceholderText',
-    'getByPlaceholderText',
-    'getAllByPlaceholderText',
-    'findByPlaceholderText',
-    'findAllByPlaceholderText',
-
-    'queryByText',
-    'queryAllByText',
-    'getByText',
-    'getAllByText',
-    'findByText',
-    'findAllByText',
-
-    'queryByLabelText',
-    'queryAllByLabelText',
-    'getByLabelText',
-    'getAllByLabelText',
-    'findByLabelText',
-    'findAllByLabelText',
-
-    'queryByAltText',
-    'queryAllByAltText',
-    'getByAltText',
-    'getAllByAltText',
-    'findByAltText',
-    'findAllByAltText',
-
-    'queryByTestId',
-    'queryAllByTestId',
-    'getByTestId',
-    'getAllByTestId',
-    'findByTestId',
-    'findAllByTestId',
-
-    'queryByTitle',
-    'queryAllByTitle',
-    'getByTitle',
-    'getAllByTitle',
-    'findByTitle',
-    'findAllByTitle',
-
-    'queryByRole',
-    'queryAllByRole',
-    'getByRole',
-    'getAllByRole',
-    'findByRole',
-    'findAllByRole',
-
-    'queryByDisplayValue',
-    'queryAllByDisplayValue',
-    'getByDisplayValue',
-    'getAllByDisplayValue',
-    'findByDisplayValue',
-    'findAllByDisplayValue',
-  ]
-  functionNames.forEach(functionName => {
+  queryNames.forEach(functionName => {
     o[functionName] = createDelegateFor(functionName, contextFn)
   })
 

test/fixture/fixture.test.ts

@@ -44,6 +44,16 @@ test.describe('lib/fixture.ts', () => {
     )
   })
 
+  test('handles page navigations', async ({queries: {getByTestId}, page}) => {
+    await page.goto(`file://${path.join(__dirname, '../fixtures/page.html')}`)
+
+    const element = await getByTestId('testid-text-input')
+
+    expect(await page.evaluate(el => el.outerHTML, element)).toMatch(
+      `<input type="text" data-testid="testid-text-input">`,
+    )
+  })
+
   test('should handle the get* method failures', async ({queries}) => {
     const {getByTitle} = queries
     // Use the scoped element so the pretty HTML snapshot is smaller