📝 Fix scoping example in fixture documentation

.eslintrc.js

@@ -19,5 +19,11 @@ module.exports = {
         'import/no-extraneous-dependencies': ['error', {devDependencies: true}],
       },
     },
+    {
+      files: ['test/fixture/**/*.+(js|ts)'],
+      rules: {
+        'jest/no-done-callback': 'off',
+      },
+    },
   ],
 }

README.md

@@ -58,7 +58,7 @@ yarn add --dev @playwright-testing-library/test
 
 ```ts
 import {test as baseTest} from '@playwright/test'
-import {fixtures, TestingLibraryFixtures} from '@playwright-testing-library/test/fixture'
+import {fixtures, within, TestingLibraryFixtures} from '@playwright-testing-library/test/fixture'
 
 // As only fixture
 const test = baseTest.extend<TestingLibraryFixtures>(fixtures)
@@ -79,8 +79,8 @@ const {expect} = test
 test('my form', async ({queries: {getByTestId}}) => {
   const $form = await getByTestId('my-form')
 
-  // Scope queries with `getQueriesForElement`
-  const {getByLabelText} = $form.getQueriesForElement()
+  // Scope queries with `within`
+  const {getByLabelText} = within($form)
 
   const $email = await getByLabelText('Email')
 

test/fixture/fixture.test.ts

@@ -1,10 +1,8 @@
-/* eslint-disable jest/no-done-callback */
-
 import * as path from 'path'
 import * as playwright from '@playwright/test'
 
 import {configure, fixtures, TestingLibraryFixtures} from '../../lib/fixture'
-import {getDocument, within} from '../../lib'
+import {getDocument, within, getQueriesForElement} from '../../lib'
 
 const test = playwright.test.extend<TestingLibraryFixtures>(fixtures)
 
@@ -149,12 +147,17 @@ test.describe('lib/fixture.ts', () => {
     expect(await $h3.textContent()).toEqual('Hello h3')
   })
 
-  test('should work with destructuring', async ({page}) => {
-    const document = await getDocument(page)
-    const scope = await document.$('#scoped')
+  test('scoping queries with `within`', async ({queries: {getByTestId}}) => {
+    // eslint-disable-next-line @typescript-eslint/unbound-method
+    const {queryByText} = within(await getByTestId('scoped'))
+
+    expect(await queryByText('Hello h1')).toBeFalsy()
+    expect(await queryByText('Hello h3')).toBeTruthy()
+  })
 
+  test('scoping queries with `getQueriesForElement`', async ({queries: {getByTestId}}) => {
     // eslint-disable-next-line @typescript-eslint/unbound-method
-    const {queryByText} = within(scope)
+    const {queryByText} = getQueriesForElement(await getByTestId('scoped'))
 
     expect(await queryByText('Hello h1')).toBeFalsy()
     expect(await queryByText('Hello h3')).toBeTruthy()

test/fixtures/page.html

@@ -9,7 +9,7 @@ <h2 data-id="second-level-header">Hello h2</h2>
     <input id="label-text-input" type="text" />
 
     <button role="button">getByRole Test</button>
-    <div id="scoped">
+    <div id="scoped" data-testid="scoped">
       <h3>Hello h3</h3>
     </div>