Merge branch 'main' into perf-byrole

Author: ph-fritsche

.all-contributorsrc

@@ -1452,6 +1452,24 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "SantoJambit",
+      "name": "SantoJambit",
+      "avatar_url": "https://avatars.githubusercontent.com/u/53570854?v=4",
+      "profile": "https://github.com/Lusito",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "mittalyashu",
+      "name": "Yashu Mittal",
+      "avatar_url": "https://avatars.githubusercontent.com/u/29014463?v=4",
+      "profile": "https://github.com/mittalyashu",
+      "contributions": [
+        "doc"
+      ]
     }
   ],
   "repoHost": "https://github.com"

.npmrc

@@ -1,2 +1,2 @@
-registry=http://registry.npmjs.org/
+registry=https://registry.npmjs.org/
 package-lock=false

README.md

@@ -322,6 +322,8 @@ Thanks goes to these people ([emoji key][emojis]):
   </tr>
   <tr>
     <td align="center"><a href="http://www.jacklaurence.net"><img src="https://avatars.githubusercontent.com/u/12763356?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Jack Laurence</b></sub></a><br /><a href="https://github.com/testing-library/dom-testing-library/commits?author=jacklaurencegaray" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/Lusito"><img src="https://avatars.githubusercontent.com/u/53570854?v=4?s=100" width="100px;" alt=""/><br /><sub><b>SantoJambit</b></sub></a><br /><a href="https://github.com/testing-library/dom-testing-library/commits?author=SantoJambit" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/mittalyashu"><img src="https://avatars.githubusercontent.com/u/29014463?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Yashu Mittal</b></sub></a><br /><a href="https://github.com/testing-library/dom-testing-library/commits?author=mittalyashu" title="Documentation">📖</a></td>
   </tr>
 </table>
 

src/__tests__/queries.find.js

@@ -31,6 +31,7 @@ test('find asynchronously finds elements', async () => {
       <select><option>display value</option></select>
       <input placeholder="placeholder" />
       <img alt="test alt text" src="/lucy-ricardo.png" />
+      <div alt="test alt text" />
       <span title="test title" />
       <div role="dialog"></div>
       <div role="meter progressbar"></div>

src/__tests__/text-matchers.js

@@ -34,6 +34,15 @@ cases(
       query: `Finding Nemo poster`,
       queryFn: `queryAllByAltText`,
     },
+    'queryAllByAltText (for amp-img)': {
+      dom: `
+        <amp-img
+          alt="Finding Nemo poster" 
+          src="/finding-nemo.png"
+        />`,
+      query: `Finding Nemo poster`,
+      queryFn: `queryAllByAltText`,
+    },
     queryAllByPlaceholderText: {
       dom: `<input placeholder="Dwayne 'The Rock' Johnson" />`,
       query: `Dwayne 'The Rock' Johnson`,
@@ -93,6 +102,16 @@ cases(
       query: /^Finding Nemo poster$/,
       queryFn: `queryAllByAltText`,
     },
+    'queryAllByAltText (for amp-img)': {
+      dom: `
+        <amp-img
+          alt="
+            Finding Nemo poster " 
+          src="/finding-nemo.png"
+        />`,
+      query: /^Finding Nemo poster$/,
+      queryFn: `queryAllByAltText`,
+    },
     queryAllByPlaceholderText: {
       dom: `
         <input placeholder="  Dwayne 'The Rock' Johnson  " />`,
@@ -198,6 +217,15 @@ cases(
       query: `Finding Nemo poster`,
       queryFn: `queryAllByAltText`,
     },
+    'queryAllByAltText (for amp-img)': {
+      dom: `
+        <amp-img
+          alt="Finding Nemo poster" 
+          src="/finding-nemo.png"
+        />`,
+      query: `Finding Nemo poster`,
+      queryFn: `queryAllByAltText`,
+    },
   },
 )
 
@@ -251,6 +279,10 @@ cases(
       dom: `<img alt="User ${LRM}name" src="username.jpg" />`,
       queryFn: 'queryAllByAltText',
     },
+    'queryAllByAltText (for amp-img)': {
+      dom: `<amp-img alt="User ${LRM}name" src="username.jpg" />`,
+      queryFn: 'queryAllByAltText',
+    },
     queryAllByTitle: {
       dom: `<div title="User ${LRM}name" />`,
       queryFn: 'queryAllByTitle',

src/queries/alt-text.ts

@@ -1,20 +1,26 @@
-import {wrapAllByQueryWithSuggestion} from '../query-helpers'
+import {
+  queryAllByAttribute,
+  wrapAllByQueryWithSuggestion,
+} from '../query-helpers'
 import {checkContainerType} from '../helpers'
-import {AllByBoundAttribute, GetErrorFunction} from '../../types'
-import {matches, fuzzyMatches, makeNormalizer, buildQueries} from './all-utils'
+import {
+  AllByBoundAttribute,
+  GetErrorFunction,
+  MatcherOptions,
+} from '../../types'
+import {buildQueries} from './all-utils'
+
+// Valid tags are img, input, area and custom elements
+const VALID_TAG_REGEXP = /^(img|input|area|.+-.+)$/i
 
 const queryAllByAltText: AllByBoundAttribute = (
   container,
   alt,
-  {exact = true, collapseWhitespace, trim, normalizer} = {},
+  options: MatcherOptions = {},
 ) => {
   checkContainerType(container)
-  const matcher = exact ? matches : fuzzyMatches
-  const matchNormalizer = makeNormalizer({collapseWhitespace, trim, normalizer})
-  return Array.from(
-    container.querySelectorAll<HTMLElement>('img,input,area'),
-  ).filter(node =>
-    matcher(node.getAttribute('alt'), node, alt, matchNormalizer),
+  return queryAllByAttribute('alt', container, alt, options).filter(node =>
+    VALID_TAG_REGEXP.test(node.tagName),
   )
 }
 

types/__tests__/type-tests.ts

@@ -117,6 +117,21 @@ export async function testQueryHelpers() {
   await findByAutomationId(element, ['id', 'id'], {})
   await findAllByAutomationId(element, ['id', 'id'])
   await findByAutomationId(element, ['id', 'id'])
+
+  const screenWithCustomQueries = within(document.body, {
+    ...queries,
+    queryByAutomationId,
+    getAllByAutomationId,
+    getByAutomationId,
+    findAllByAutomationId,
+    findByAutomationId,
+  })
+
+  screenWithCustomQueries.queryByAutomationId('id')
+  screenWithCustomQueries.getAllByAutomationId('id')
+  screenWithCustomQueries.getByAutomationId(['id', 'automationId'])
+  await screenWithCustomQueries.findAllByAutomationId('id', {}, {timeout: 1000})
+  await screenWithCustomQueries.findByAutomationId('id', {}, {timeout: 1000})
 }
 
 export function testBoundFunctions() {

types/get-queries-for-element.d.ts

@@ -153,6 +153,8 @@ export type BoundFunctions<Q> = Q extends typeof queries
       findAllByTestId<T extends HTMLElement = HTMLElement>(
         ...args: Parameters<BoundFunction<queries.FindAllByBoundAttribute<T>>>
       ): ReturnType<queries.FindAllByBoundAttribute<T>>
+    } & {
+      [P in keyof Q]: BoundFunction<Q[P]>
     }
   : {
       [P in keyof Q]: BoundFunction<Q[P]>

types/queries.d.ts

@@ -109,7 +109,7 @@ export interface ByRoleOptions extends MatcherOptions {
    */
   queryFallbacks?: boolean
   /**
-   * Only considers  elements with the specified accessible name.
+   * Only considers elements with the specified accessible name.
    */
   name?:
     | RegExp