feat: Add ByTextContent query

src/__tests__/text-matchers.js

@@ -28,7 +28,7 @@ cases(
     queryAllByAltText: {
       dom: `
         <img
-          alt="Finding Nemo poster" 
+          alt="Finding Nemo poster"
           src="/finding-nemo.png"
         />`,
       query: `Finding Nemo poster`,
@@ -87,7 +87,7 @@ cases(
       dom: `
         <img
           alt="
-            Finding Nemo poster " 
+            Finding Nemo poster "
           src="/finding-nemo.png"
         />`,
       query: /^Finding Nemo poster$/,
@@ -192,7 +192,7 @@ cases(
     queryAllByAltText: {
       dom: `
         <img
-          alt="Finding Nemo poster" 
+          alt="Finding Nemo poster"
           src="/finding-nemo.png"
         />`,
       query: `Finding Nemo poster`,
@@ -321,3 +321,18 @@ test('we support an older API with trim and collapseWhitespace instead of a norm
   expect(queryAllByText('x y', {collapseWhitespace: false})).toHaveLength(0)
   expect(queryAllByText('x  y', {collapseWhitespace: false})).toHaveLength(1)
 })
+
+test('ByTextContent is a simple selector for HTMLElement.textContent', () => {
+  const {queryAllByTextContent} = render(
+    '<button>  <span>Click</span> <span>me</span></button>',
+  )
+  expect(queryAllByTextContent('Click me', 'button')).toHaveLength(0)
+  expect(queryAllByTextContent('  Click me', 'button')).toHaveLength(1)
+})
+
+test('ByTextContent tests all elements by default', () => {
+  const {container,queryAllByTextContent} = render(
+    '<span>jekyll</span><div>jekyll</div></button>',
+  )
+  expect(queryAllByTextContent('jekyll')).toHaveLength(2)
+})

src/queries/index.js

@@ -6,3 +6,4 @@ export * from './alt-text'
 export * from './title'
 export * from './role'
 export * from './test-id'
+export * from './text-content'

src/queries/text-content.js

@@ -0,0 +1,29 @@
+import {buildQueries, matches} from './all-utils'
+
+function queryAllByTextContent(container, text, selector = '*') {
+  return Array.from(container.querySelectorAll(selector)).filter(node =>
+    matches(node.textContent, node, text, s => s),
+  )
+}
+
+const getMultipleError = (c, text) =>
+  `Found multiple elements with the text content: ${text}`
+const getMissingError = (c, text) =>
+  `Unable to find an element with the text content: ${text}. This could be because your text input didn't consider whitespace.`
+
+const [
+  queryByTextContent,
+  getAllByTextContent,
+  getByTextContent,
+  findAllByTextContent,
+  findByTextContent,
+] = buildQueries(queryAllByTextContent, getMultipleError, getMissingError)
+
+export {
+  queryByTextContent,
+  queryAllByTextContent,
+  getByTextContent,
+  getAllByTextContent,
+  findAllByTextContent,
+  findByTextContent,
+}

typings/queries.d.ts

@@ -66,6 +66,38 @@ export type FindByText = (
   waitForElementOptions?: WaitForElementOptions,
 ) => Promise<HTMLElement>
 
+export type QueryByTextContent = (
+  container: HTMLElement,
+  id: Matcher,
+  selector?: string,
+) => HTMLElement | null
+
+export type AllByTextContent = (
+  container: HTMLElement,
+  id: Matcher,
+  selector?: string,
+) => HTMLElement[]
+
+export type FindAllByTextContent = (
+  container: HTMLElement,
+  id: Matcher,
+  selector?: string,
+  waitForElementOptions?: WaitForElementOptions,
+) => Promise<HTMLElement[]>
+
+export type GetByTextContent = (
+  container: HTMLElement,
+  id: Matcher,
+  selector?: string,
+) => HTMLElement
+
+export type FindByTextContent = (
+  container: HTMLElement,
+  id: Matcher,
+  selector?: string,
+  waitForElementOptions?: WaitForElementOptions,
+) => Promise<HTMLElement>
+
 export const getByLabelText: GetByText
 export const getAllByLabelText: AllByText
 export const queryByLabelText: QueryByText
@@ -84,6 +116,12 @@ export const queryByText: QueryByText
 export const queryAllByText: AllByText
 export const findByText: FindByText
 export const findAllByText: FindAllByText
+export const getByTextContent: GetByTextContent
+export const getAllByTextContent: AllByTextContent
+export const queryByTextContent: QueryByTextContent
+export const queryAllByTextContent: AllByTextContent
+export const findByTextContent: FindByTextContent
+export const findAllByTextContent: FindAllByTextContent
 export const getByAltText: GetByBoundAttribute
 export const getAllByAltText: AllByBoundAttribute
 export const queryByAltText: QueryByBoundAttribute