feat: export configure function with data-testid override (#39)

testing-library · Aug 7, 2020 · 4e077c8 · 4e077c8
1 parent 950c30f
commit 4e077c8
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 6 deletions.
diff --git a/lib/index.ts b/lib/index.ts
@@ -3,7 +3,7 @@ import * as path from 'path'
 import {ElementHandle, EvaluateFn, JSHandle, Page} from 'puppeteer'
 import waitForExpect from 'wait-for-expect'
 
-import {IQueryUtils, IScopedQueryUtils} from './typedefs'
+import {IConfigureOptions, IQueryUtils, IScopedQueryUtils} from './typedefs'
 
 const domLibraryAsString = readFileSync(
   path.join(__dirname, '../dom-testing-library.js'),
@@ -17,7 +17,7 @@ function mapArgument(argument: any, index: number): any {
     : argument
 }
 
-const delegateFnBodyToExecuteInPage = `
+const delegateFnBodyToExecuteInPageInitial = `
   ${domLibraryAsString};
 
   const mappedArgs = args.map(${mapArgument.toString()});
@@ -27,6 +27,8 @@ const delegateFnBodyToExecuteInPage = `
   return moduleWithFns[fnName](container, ...mappedArgs);
 `
 
+let delegateFnBodyToExecuteInPage = delegateFnBodyToExecuteInPageInitial
+
 type DOMReturnType = ElementHandle | ElementHandle[] | null
 
 type ContextFn = (...args: any[]) => ElementHandle
@@ -130,6 +132,21 @@ export function wait(
   return waitForExpect(callback, timeout, interval)
 }
 
+export function configure(options: Partial<IConfigureOptions>): void {
+  if (!options) {
+    return
+  }
+
+  const { testIdAttribute } = options
+
+  if (testIdAttribute) {
+    delegateFnBodyToExecuteInPage = delegateFnBodyToExecuteInPageInitial.replace(
+      /testIdAttribute: (['|"])data-testid(['|"])/g,
+      `testIdAttribute: $1${testIdAttribute}$2`,
+    )
+  }
+}
+
 export function getQueriesForElement<T>(
   object: T,
   contextFn?: ContextFn,

diff --git a/lib/typedefs.ts b/lib/typedefs.ts
@@ -58,3 +58,7 @@ export interface IQueryUtils extends IQueryMethods {
   getQueriesForElement(): IQueryUtils & IScopedQueryUtils
   getNodeText(el: Element): Promise<string>
 }
+
+export interface IConfigureOptions {
+  testIdAttribute: string
+}
diff --git a/test/fixtures/page.html b/test/fixtures/page.html
@@ -2,11 +2,11 @@
 <html>
 
 <body>
-  <h1>Hello h1</h1>
-  <h2>Hello h2</h2>
+  <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">Label A</label>
+  <label for="label-text-input" data-testid="testid-label">Label A</label>
   <input id="label-text-input" type="text">
 
   <div id="scoped">

diff --git a/test/index.test.ts b/test/index.test.ts
@@ -1,6 +1,6 @@
 import * as path from 'path'
 import * as puppeteer from 'puppeteer'
-import {getDocument, queries, getQueriesForElement, wait} from '../lib'
+import {getDocument, queries, getQueriesForElement, wait, configure} from '../lib'
 
 describe('lib/index.ts', () => {
   let browser: puppeteer.Browser
@@ -18,6 +18,30 @@ describe('lib/index.ts', () => {
     expect(await queries.getNodeText(element)).toEqual('Hello h1')
   })
 
+  it('should support custom data-testid attribute name', async () => {
+    configure({testIdAttribute: 'data-id'})
+    const document = await getDocument(page)
+    const element = await queries.getByTestId(document, 'second-level-header')
+    expect(await queries.getNodeText(element)).toEqual('Hello h2')
+  })
+
+  it('should support subsequent changing the data-testid attribute names', async () => {
+    configure({testIdAttribute: 'data-id'})
+    configure({testIdAttribute: 'data-new-id'})
+    const document = await getDocument(page)
+    const element = await queries.getByTestId(document, 'first-level-header')
+    expect(await queries.getNodeText(element)).toEqual('Hello h1')
+  })
+
+  it('should keep the default data-testid when input passed is invalid', async () => {
+    ;[{}, undefined, null, {testIdAttribute: ''}].forEach(async options => {
+      const document = await getDocument(page)
+      configure(options as any)
+      const element = await queries.getByTestId(document, 'testid-label')
+      expect(await queries.getNodeText(element)).toEqual('Label A')
+    })
+  })
+
   it('should support regex on raw queries object', async () => {
     const scope = await page.$('#scoped')
     if (!scope) throw new Error('Should have scope')
@@ -41,6 +65,10 @@ describe('lib/index.ts', () => {
     expect(await getByText('Loaded!')).toBeTruthy()
   }, 9000)
 
+  afterEach(() => {
+    configure({testIdAttribute: 'data-testid'}) //cleanup
+  })
+
   afterAll(async () => {
     await browser.close()
   })