fix: update ByRole options type definitions to include hidden etc

jrolfs · jrolfs · commit 016ebf21ebca · 2022-02-22T13:23:35.000-08:00
diff --git a/lib/typedefs.ts b/lib/typedefs.ts
@@ -1,7 +1,8 @@
 import {
   Matcher,
-  MatcherOptions as MatcherOptions_,
-  SelectorMatcherOptions as SelectorMatcherOptions_,
+  MatcherOptions as TestingLibraryMatcherOptions,
+  SelectorMatcherOptions as TestingLibrarySelectorMatcherOptions,
+  ByRoleOptions as TestingLibraryByRoleOptions,
   waitForOptions,
 } from '@testing-library/dom'
 import {ElementHandle as PlaywrightElementHandle} from 'playwright'
@@ -10,16 +11,14 @@ export type ElementHandle = PlaywrightElementHandle<SVGElement | HTMLElement>
 
 type Element = ElementHandle
 
-type MatcherOptions = Omit<MatcherOptions_, 'normalizer'>
-type SelectorMatcherOptions = Omit<SelectorMatcherOptions_, 'normalizer'>
+type MatcherOptions = Omit<TestingLibraryMatcherOptions, 'normalizer'>
+type SelectorMatcherOptions = Omit<TestingLibrarySelectorMatcherOptions, 'normalizer'>
 
-interface RoleMatcherOptions extends MatcherOptions {
+interface RoleMatcherOptions extends Omit<TestingLibraryByRoleOptions, 'name'> {
   name?: string | RegExp
 }
 
-interface SelectorRoleMatcherOptions extends SelectorMatcherOptions {
-  name?: string | RegExp
-}
+interface SelectorRoleMatcherOptions extends SelectorMatcherOptions, RoleMatcherOptions {}
 
 interface QueryMethods {
   queryByPlaceholderText(el: Element, m: Matcher, opts?: MatcherOptions): Promise<Element | null>
diff --git a/test/fixture/fixture.test.ts b/test/fixture/fixture.test.ts
@@ -116,6 +116,14 @@ test.describe('lib/fixture.ts', () => {
     expect(text).toEqual('getByRole Test')
   })
 
+  test('supports `hidden` option when querying by role', async ({queries: {queryAllByRole}}) => {
+    const elements = await queryAllByRole('img')
+    const hiddenElements = await queryAllByRole('img', {hidden: true})
+
+    expect(elements).toHaveLength(1)
+    expect(hiddenElements).toHaveLength(2)
+  })
+
   test('should get text content', async ({page}) => {
     const document = await getDocument(page)
     const $h3 = await document.$('#scoped h3')
diff --git a/test/fixtures/page.html b/test/fixtures/page.html
@@ -1,22 +1,30 @@
-<!doctype html>
+<!DOCTYPE html>
 <html>
+  <body>
+    <h1 data-new-id="first-level-header">Hello h1</h1>
+    <h2 data-id="second-level-header">Hello h2</h2>
+    <img alt="Image A" src="" />
+    <input type="text" data-testid="testid-text-input" />
+    <label for="label-text-input" data-testid="testid-label">Label A</label>
+    <input id="label-text-input" type="text" />
 
-<body>
-  <h1 data-new-id="first-level-header">Hello h1</h1>
-  <h2 data-id="second-level-header">Hello h2</h2>
-  <img alt="Image A" src="">
-  <input type="text" data-testid="testid-text-input">
-  <label for="label-text-input" data-testid="testid-label">Label A</label>
-  <input id="label-text-input" type="text">
+    <button role="button">getByRole Test</button>
+    <div id="scoped">
+      <h3>Hello h3</h3>
+    </div>
 
-  <button role="button">getByRole Test</button>
-  <div id="scoped">
-    <h3>Hello h3</h3>
-  </div>
-
-  <table role="presentation">
-    <td>Layout table</td>
-  </table>
-</body>
+    <table role="presentation">
+      <td>Layout table</td>
+    </table>
 
+    <svg
+      aria-hidden="true"
+      role="img"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 512 512"
+    >
+      <path d="M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7 22.4 17.4 52.1 39.5 154.1 113.6 21.1 15.4 56.7 47.8 92.2 47.6 35.7.3 72-32.8 92.3-47.6 102-74.1 131.6-96.3 154-113.7zM256 320c23.2.4 56.6-29.2 73.4-41.4 132.7-96.3 142.8-104.7 173.4-128.7 5.8-4.5 9.2-11.5 9.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5 64 0 85.5 0 112v19c0 7.4 3.4 14.3 9.2 18.9 30.6 23.9 40.7 32.4 173.4 128.7 16.8 12.2 50.2 41.8 73.4 41.4z" />
+    </svg>
+    </body>
+  </body>
 </html>
diff --git a/test/standalone/index.test.ts b/test/standalone/index.test.ts
@@ -87,6 +87,15 @@ describe('lib/index.ts', () => {
     expect(text).toEqual('getByRole Test')
   })
 
+  test('supports `hidden` option when querying by role', async () => {
+    const document = await getDocument(page)
+    const elements = await queries.queryAllByRole(document, 'img')
+    const hiddenElements = await queries.queryAllByRole(document, 'img', {hidden: true})
+
+    expect(elements).toHaveLength(1)
+    expect(hiddenElements).toHaveLength(2)
+  })
+
   it('attaches `getNodeText`', async () => {
     const document = await getDocument(page)
     const element = await queries.getByText(document, 'Hello h1')
