fix: support desctructing for /extend context

fixes #4

Author: patrickhulce

README.md

@@ -49,6 +49,8 @@ const page = await browser.newPage()
 const $document = await page.getDocument()
 // query methods are added directly to prototype of ElementHandle
 const $form = await $document.getByTestId('my-form')
+// destructing works if you explicitly call getQueriesForElement
+const {getByText} = $form.getQueriesForElement()
 // ...
 ```
 
@@ -95,7 +97,6 @@ Unique methods, not part of `dom-testing-library`
 
 - `waitForElement` method is not exposed. Puppeteer has its own set of wait utilities that somewhat conflict with the style used in `dom-testing-library`. See [#3](https://github.com/patrickhulce/pptr-testing-library/issues/3).
 - `fireEvent` method is not exposed, use puppeteer's built-ins instead.
-- Query methods rely on the context and don't support destructuring. See [#4](https://github.com/patrickhulce/pptr-testing-library/issues/4).
 - `expect` assertion extensions are not available.
 
 ## Special Thanks

lib/extend.ts

@@ -23,6 +23,7 @@ declare module 'puppeteer' {
   }
 
   interface ElementHandle {
+    getQueriesForElement(): ElementHandle
     getNodeText(): Promise<string>
     queryByPlaceholderText(m: Matcher, opts?: MatcherOptions): Promise<ElementHandle | null>
     queryAllByPlaceholderText(m: Matcher, opts?: MatcherOptions): Promise<ElementHandle[]>

lib/index.ts

@@ -118,6 +118,11 @@ export function wait(
 
 export function getQueriesForElement<T>(object: T, contextFn?: ContextFn): T & IQueryUtils {
   const o = object as any
+  o.getQueriesForElement = function() {
+    const realContextFn = contextFn || ((): ElementHandle => this)
+    return getQueriesForElement(this, realContextFn)
+  }
+
   o.queryByPlaceholderText = createDelegateFor('queryByPlaceholderText', contextFn)
   o.queryAllByPlaceholderText = createDelegateFor('queryAllByPlaceholderText', contextFn)
   o.getByPlaceholderText = createDelegateFor('getByPlaceholderText', contextFn)

lib/typedefs.ts

@@ -4,6 +4,7 @@ import {ElementHandle} from 'puppeteer'
 type Element = ElementHandle
 
 export interface IQueryUtils {
+  getQueriesForElement(): IQueryUtils
   getNodeText(el: Element): Promise<string>
   queryByPlaceholderText(el: Element, m: Matcher, opts?: MatcherOptions): Promise<Element | null>
   queryAllByPlaceholderText(el: Element, m: Matcher, opts?: MatcherOptions): Promise<Element[]>

test/extend.test.ts

@@ -76,6 +76,12 @@ describe('lib/extend.ts', () => {
     expect(await $h3.getNodeText()).toEqual('Hello h3')
   })
 
+  it('should work with destructuring', async () => {
+    const {queryByText} = (await document.$('#scoped')).getQueriesForElement()
+    expect(await queryByText('Hello h1')).toBeFalsy()
+    expect(await queryByText('Hello h3')).toBeTruthy()
+  })
+
   afterAll(async () => {
     await browser.close()
   })