feat: support additional configure options

Include the following config options in the exported Config type:
- asyncUtilTimeout
- computedStyleSupportsPseudoElements
- defaultHidden
- throwSuggestions

Add tests for each new option.

Author: olivierwilkinson

src/types.ts

@@ -5,7 +5,14 @@ import {
 } from '@testing-library/dom'
 import {Element} from 'webdriverio'
 
-export type Config = Pick<BaseConfig, 'testIdAttribute'>
+export type Config = Pick<
+  BaseConfig,
+  | 'testIdAttribute'
+  | 'asyncUtilTimeout'
+  | 'computedStyleSupportsPseudoElements'
+  | 'defaultHidden'
+  | 'throwSuggestions'
+>
 
 export type WebdriverIOQueryReturnType<T> = T extends Promise<HTMLElement>
   ? Element

test-app/index.html

@@ -16,6 +16,10 @@
       section {
         padding: 10px;
       }
+
+      .pseudo-name::after {
+        content: 'Named by pseudo element';
+      }
     </style>
   </head>
 
@@ -81,6 +85,16 @@ <h2>configure</h2>
         src="data:image/png;base64,"
         onclick="this.style.border = '5px solid red'"
       />
+      <button class="pseudo-name" />
+      <section aria-hidden="true" style="visibility: hidden;">
+        <button>
+          Hidden button
+        </button>
+      </section>
+      <button
+        data-testid="button-that-should-not-use-testid"
+        aria-label="Can be targeted by other queries"
+      />
     </section>
     <section>
       <h2>configure standalone</h2>

test/configure.e2e.ts

@@ -1,25 +1,64 @@
-import {setupBrowser, configure} from '../src';
+import {setupBrowser, configure} from '../src'
 
 describe('configure', () => {
-  beforeEach(() => {
-    configure({testIdAttribute: 'data-automation-id'})
-  })
   afterEach(() => {
     configure({})
   })
 
-  it('supports alternative testIdAttribute', async () => {
+  it('supports setting testIdAttribute', async () => {
+    configure({testIdAttribute: 'data-automation-id'})
+
     const {getByTestId} = setupBrowser(browser)
 
     expect(await getByTestId('image-with-random-alt-tag')).toBeDefined()
   })
 
+  it('supports setting asyncUtilTimeout', async () => {
+    configure({asyncUtilTimeout: 0})
+
+    const {findByText} = setupBrowser(browser)
+
+    await expect(() =>
+      findByText('Unique Delayed Button Text'),
+    ).rejects.toThrowError()
+  })
+
+  it('supports setting computedStyleSupportsPseudoElements', async () => {
+    configure({computedStyleSupportsPseudoElements: true})
+
+    const {getByRole} = setupBrowser(browser)
+
+    expect(
+      await getByRole('button', {name: 'Named by pseudo element'}),
+    ).toBeDefined()
+  })
+
+  it('supports setting defaultHidden', async () => {
+    configure({defaultHidden: true})
+
+    const {getByRole} = setupBrowser(browser)
+
+    expect(await getByRole('button', {name: 'Hidden button'})).toBeDefined()
+  })
+
+  it('supports setting throwSuggestions', async () => {
+    configure({throwSuggestions: true})
+
+    const {getByTestId} = setupBrowser(browser)
+
+    await expect(() =>
+      getByTestId('button-that-should-not-use-testid'),
+    ).rejects.toThrowError(
+      'TestingLibraryElementError: A better query is available',
+    )
+  })
+
   it('works after navigation', async () => {
-    const {getByText, findByTestId} = setupBrowser(browser)
+    const {getByText, findByAltText} = setupBrowser(browser)
 
     const goToPageTwoLink = await getByText('Go to Page 2')
     await goToPageTwoLink.click()
 
-    expect(await findByTestId('page2-thing')).toBeDefined()
+    expect(await findByAltText('page two thing')).toBeDefined()
   })
 })