feat(byRole): Implement TextMatch for name option

Author: eps1lon

src/__tests__/role.js

@@ -224,13 +224,78 @@ test('can be filtered by accessible name', () => {
   ).not.toBeNull()
 })
 
+test('accessible name filter implements TextMatch', () => {
+  const {getByRole} = render(
+    `<h1>Sign <em>up</em></h1><h2>Details</h2><h2>Your Signature</h2>`,
+  )
+
+  // subset via regex
+  expect(getByRole('heading', {name: /gn u/})).not.toBeNull()
+  // regex
+  expect(getByRole('heading', {name: /^sign/i})).not.toBeNull()
+  // function
+  expect(
+    getByRole('heading', {
+      name: (name, element) => {
+        return element.nodeName === 'H2' && name === 'Your Signature'
+      },
+    }),
+  ).not.toBeNull()
+})
+
 test('includes accesible names in error message', () => {
   const {getByRole} = render(`<h1>Sign <em>up</em></h1>`)
 
   expect(() => getByRole('heading', {name: 'Sign Up'}))
     .toThrowErrorMatchingInlineSnapshot(`
 "Unable to find an accessible element with the role "heading" and name "Sign Up"
 
+Here are the accessible roles:
+
+  heading:
+
+  Name "Sign up":
+  <h1 />
+
+  --------------------------------------------------
+
+<div>
+  <h1>
+    Sign 
+    <em>
+      up
+    </em>
+  </h1>
+</div>"
+`)
+
+  expect(() => getByRole('heading', {name: /Login/}))
+    .toThrowErrorMatchingInlineSnapshot(`
+"Unable to find an accessible element with the role "heading" and name \`/Login/\`
+
+Here are the accessible roles:
+
+  heading:
+
+  Name "Sign up":
+  <h1 />
+
+  --------------------------------------------------
+
+<div>
+  <h1>
+    Sign 
+    <em>
+      up
+    </em>
+  </h1>
+</div>"
+`)
+
+  expect(() => getByRole('heading', {name: () => false}))
+    .toThrowErrorMatchingInlineSnapshot(`
+"Unable to find an accessible element with the role "heading" and name \`() => false\`
+
 Here are the accessible roles:
 
   heading:

src/queries/role.js

@@ -73,9 +73,19 @@ function queryAllByRole(
         : true
     })
     .filter(element => {
-      return typeof name === 'string'
-        ? computeAccessibleName(element) === name
-        : true
+      if (name === undefined) {
+        // Don't care
+        return true
+      }
+
+      const accessibleName = computeAccessibleName(element)
+      if (typeof name === 'string') {
+        return name === accessibleName
+      }
+      if (typeof name === 'function') {
+        return name(accessibleName, element)
+      }
+      return name.test(accessibleName)
     })
 }
 
@@ -89,7 +99,7 @@ const getMissingError = (
 ) => {
   const roles = prettyRoles(container, {
     hidden,
-    includeName: typeof name === 'string',
+    includeName: name !== undefined,
   })
   let roleMessage
 
@@ -110,12 +120,19 @@ Here are the ${hidden === false ? 'accessible' : 'available'} roles:
 `.trim()
   }
 
+  let nameHint = ''
+  if (name === undefined) {
+    nameHint = ''
+  } else if (typeof name === 'string') {
+    nameHint = ` and name "${name}"`
+  } else {
+    nameHint = ` and name \`${name}\``
+  }
+
   return `
 Unable to find an ${
     hidden === false ? 'accessible ' : ''
-  }element with the role "${role}"${
-    typeof name === 'string' ? ` and name "${name}"` : ''
-  }
+  }element with the role "${role}"${nameHint}
 
 ${roleMessage}`.trim()
 }