Use custom testIdAttribute in getSuggestedQuery

geoffharcourt · geoffharcourt · commit 82c64f556ab6 · 2020-06-15T23:13:04.000-04:00
Currently `getSuggestedQuery` always uses `data-testid` to find relevant
elements. This change updates it to use the configured `testIdAttribute`
if one has been set in the configuration.
diff --git a/src/__tests__/suggestions.js b/src/__tests__/suggestions.js
@@ -6,6 +6,10 @@ beforeAll(() => {
   configure({throwSuggestions: true})
 })
 
+afterEach(() => {
+  configure({testIdAttribute: 'data-testid'})
+})
+
 afterAll(() => {
   configure({throwSuggestions: false})
 })
@@ -100,18 +104,18 @@ test('should suggest getByRole when used with getBy', () => {
   renderIntoDocument(`<button data-testid="foo">submit</button>`)
 
   expect(() => screen.getByTestId('foo')).toThrowErrorMatchingInlineSnapshot(`
-"A better query is available, try this:
-getByRole('button', { name: /submit/i })
+    "A better query is available, try this:
+    getByRole('button', { name: /submit/i })
 
 
-<body>
-  <button
-    data-testid="foo"
-  >
-    submit
-  </button>
-</body>"
-`)
+    <body>
+      <button
+        data-testid="foo"
+      >
+        submit
+      </button>
+    </body>"
+  `)
 })
 
 test('should suggest getAllByRole when used with getAllByTestId', () => {
@@ -121,27 +125,27 @@ test('should suggest getAllByRole when used with getAllByTestId', () => {
 
   expect(() => screen.getAllByTestId('foo'))
     .toThrowErrorMatchingInlineSnapshot(`
-"A better query is available, try this:
-getAllByRole('button', { name: /submit/i })
-
-
-<body>
-  
-    
-  <button
-    data-testid="foo"
-  >
-    submit
-  </button>
-  
-    
-  <button
-    data-testid="foo"
-  >
-    submit
-  </button>
-</body>"
-`)
+    "A better query is available, try this:
+    getAllByRole('button', { name: /submit/i })
+
+
+    <body>
+      
+        
+      <button
+        data-testid="foo"
+      >
+        submit
+      </button>
+      
+        
+      <button
+        data-testid="foo"
+      >
+        submit
+      </button>
+    </body>"
+  `)
 })
 test('should suggest findByRole when used with findByTestId', async () => {
   renderIntoDocument(`
@@ -435,6 +439,34 @@ test('getSuggestedQuery can return specified methods in addition to the best', (
   expect(getSuggestedQuery(button, 'get', 'TestId')).toBeUndefined()
 })
 
+test('getSuggestedQuery works with custom testIdAttribute', () => {
+  configure({testIdAttribute: 'data-test'})
+
+  const {container} = render(`
+    <label for="username">label</label>
+    <input
+      id="username"
+      name="name"
+      placeholder="placeholder"
+      data-test="testid"
+      title="title"
+      alt="alt"
+      value="value"
+      type="text"
+    />
+    <button>button</button>
+  `)
+
+  const input = container.querySelector('input')
+
+  expect(getSuggestedQuery(input, 'get', 'TestId')).toMatchObject({
+    queryName: 'TestId',
+    queryMethod: 'getByTestId',
+    queryArgs: ['testid'],
+    variant: 'get',
+  })
+})
+
 test('getSuggestedQuery does not create suggestions for script and style elements', () => {
   const {container} = render(`
     <script data-testid="script"></script>
diff --git a/src/suggestions.js b/src/suggestions.js
@@ -1,7 +1,7 @@
 import {computeAccessibleName} from 'dom-accessibility-api'
 import {getDefaultNormalizer} from './matches'
 import {getNodeText} from './get-node-text'
-import {DEFAULT_IGNORE_TAGS} from './config'
+import {DEFAULT_IGNORE_TAGS, getConfig} from './config'
 import {getImplicitAriaRoles} from './role-helpers'
 
 const normalize = getDefaultNormalizer()
@@ -120,7 +120,7 @@ export function getSuggestedQuery(element, variant = 'get', method) {
     return makeSuggestion('Title', title, {variant})
   }
 
-  const testId = element.getAttribute('data-testid')
+  const testId = element.getAttribute(getConfig().testIdAttribute)
   if (canSuggest('TestId', method, testId)) {
     return makeSuggestion('TestId', testId, {variant})
   }
