feat: bump to dom-testing-library v3

BREAKING CHANGE: now using v3 of dom-testing-library

Author: patrickhulce

lib/index.ts

@@ -157,6 +157,22 @@ export function getQueriesForElement<T>(
   o.queryAllByTitle = createDelegateFor('queryAllByTitle', contextFn)
   o.getByTitle = createDelegateFor('getByTitle', contextFn)
   o.getAllByTitle = createDelegateFor('getAllByTitle', contextFn)
+
+  o.queryByRole = createDelegateFor('queryByRole', contextFn)
+  o.queryAllByRole = createDelegateFor('queryAllByRole', contextFn)
+  o.getByRole = createDelegateFor('getByRole', contextFn)
+  o.getAllByRole = createDelegateFor('getAllByRole', contextFn)
+
+  o.queryBySelectText = createDelegateFor('queryBySelectText', contextFn)
+  o.queryAllBySelectText = createDelegateFor('queryAllBySelectText', contextFn)
+  o.getBySelectText = createDelegateFor('getBySelectText', contextFn)
+  o.getAllBySelectText = createDelegateFor('getAllBySelectText', contextFn)
+
+  o.queryByValue = createDelegateFor('queryByValue', contextFn)
+  o.queryAllByValue = createDelegateFor('queryAllByValue', contextFn)
+  o.getByValue = createDelegateFor('getByValue', contextFn)
+  o.getAllByValue = createDelegateFor('getAllByValue', contextFn)
+
   o.getNodeText = createDelegateFor<string>('getNodeText', contextFn, processNodeText)
 
   return o

lib/typedefs.ts

@@ -33,6 +33,21 @@ interface IQueryMethods {
   queryAllByTitle(el: Element, m: Matcher, opts?: MatcherOptions): Promise<Element[]>
   getByTitle(el: Element, m: Matcher, opts?: MatcherOptions): Promise<Element>
   getAllByTitle(el: Element, m: Matcher, opts?: MatcherOptions): Promise<Element[]>
+
+  queryByRole(el: Element, m: Matcher, opts?: MatcherOptions): Promise<Element | null>
+  queryAllByRole(el: Element, m: Matcher, opts?: MatcherOptions): Promise<Element[]>
+  getByRole(el: Element, m: Matcher, opts?: MatcherOptions): Promise<Element>
+  getAllByRole(el: Element, m: Matcher, opts?: MatcherOptions): Promise<Element[]>
+
+  queryBySelectText(el: Element, m: Matcher, opts?: MatcherOptions): Promise<Element | null>
+  queryAllBySelectText(el: Element, m: Matcher, opts?: MatcherOptions): Promise<Element[]>
+  getBySelectText(el: Element, m: Matcher, opts?: MatcherOptions): Promise<Element>
+  getAllBySelectText(el: Element, m: Matcher, opts?: MatcherOptions): Promise<Element[]>
+
+  queryByValue(el: Element, m: Matcher, opts?: MatcherOptions): Promise<Element | null>
+  queryAllByValue(el: Element, m: Matcher, opts?: MatcherOptions): Promise<Element[]>
+  getByValue(el: Element, m: Matcher, opts?: MatcherOptions): Promise<Element>
+  getAllByValue(el: Element, m: Matcher, opts?: MatcherOptions): Promise<Element[]>
 }
 
 type IScopedQueryMethods = {

package.json

@@ -42,7 +42,7 @@
     }
   },
   "dependencies": {
-    "dom-testing-library": "^2.6.1",
+    "dom-testing-library": "^3.11.0",
     "wait-for-expect": "^0.4.0"
   },
   "devDependencies": {

test/__snapshots__/extend.test.ts.snap

@@ -5,17 +5,17 @@ exports[`lib/extend.ts should handle the LabelText methods 1`] = `"<input id=\\"
 exports[`lib/extend.ts should handle the get* method failures 1`] = `
 "Evaluation failed: Error: Unable to find an element with the title: missing.
 
-[36m<div[39m
-  [33mid[39m=[32m\\"scoped\\"[39m
-[36m>[39m
-  [0m
-    [0m
-  [36m<h3>[39m
-    [0mHello h3[0m
-  [36m</h3>[39m
-  [0m
-  [0m
-[36m</div>[39m
+<div
+  id=\\"scoped\\"
+>
+  
+    
+  <h3>
+    Hello h3
+  </h3>
+  
+  
+</div>
     at getElementError <stack>:X:X)
     at getAllByTitle <stack>:X:X)
     at firstResultOrNull <stack>:X:X)

test/extend.test.ts

@@ -25,6 +25,13 @@ describe('lib/extend.ts', () => {
     expect(await page.evaluate(el => el.textContent, element)).toEqual('Hello h1')
   })
 
+  it('should use the new v3 methods', async () => {
+    const element = await document.queryByRole('presentation')
+    expect(element).toBeTruthy()
+    /* istanbul ignore next */
+    expect(await page.evaluate(el => el.textContent, element)).toContain('Layout table')
+  })
+
   it('should handle regex matching', async () => {
     const element = await document.queryByText(/HeLlO/i)
     expect(element).toBeTruthy()

test/fixtures/page.html

@@ -12,6 +12,10 @@ <h2>Hello h2</h2>
   <div id="scoped">
     <h3>Hello h3</h3>
   </div>
+
+  <table role="presentation">
+    <td>Layout table</td>
+  </table>
 </body>
 
 </html>