feat(ByAltText): Always include custom elements (#1049)

Author: SantoJambit

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),
   )
 }