feat: allow TextMatch to be any non-nullable type (#829)

Author: nickserv

src/__tests__/element-queries.js

@@ -144,6 +144,11 @@ test('matches case with RegExp matcher', () => {
   expect(queryByText(/Step 1 of 4/)).not.toBeTruthy()
 })
 
+test('queryByText matches case with non-string matcher', () => {
+  const {queryByText} = render(`<span>1</span>`)
+  expect(queryByText(1)).toBeTruthy()
+})
+
 test('can get form controls by label text', () => {
   const {getByLabelText} = render(`
     <div>
@@ -338,6 +343,11 @@ test('get can get form controls by placeholder', () => {
   expect(getByPlaceholderText('username').id).toBe('username-id')
 })
 
+test('queryByPlaceholderText matches case with non-string matcher', () => {
+  const {queryByPlaceholderText} = render(`<input placeholder="1" />`)
+  expect(queryByPlaceholderText(1)).toBeTruthy()
+})
+
 test('label with no form control', () => {
   const {getByLabelText, queryByLabelText} = render(`<label>All alone</label>`)
   expect(queryByLabelText(/alone/)).toBeNull()
@@ -535,6 +545,11 @@ test('getByLabelText with aria-label', () => {
   expect(queryByLabelText(/bat/)).toBeTruthy()
 })
 
+test('queryByLabelText matches case with non-string matcher', () => {
+  const {queryByLabelText} = render(`<input aria-label="1" />`)
+  expect(queryByLabelText(1)).toBeTruthy()
+})
+
 test('get element by its alt text', () => {
   const {getByAltText} = render(`
     <div>
@@ -545,6 +560,11 @@ test('get element by its alt text', () => {
   expect(getByAltText(/fin.*nem.*poster$/i).src).toContain('/finding-nemo.png')
 })
 
+test('queryByAltText matches case with non-string matcher', () => {
+  const {queryByAltText} = render(`<img alt="1" src="/finding-nemo.png" />`)
+  expect(queryByAltText(1)).toBeTruthy()
+})
+
 test('query/get element by its title', () => {
   const {getByTitle, queryByTitle} = render(`
     <div>
@@ -577,6 +597,11 @@ test('query/get title element of SVG', () => {
   expect(queryByTitle('Close').id).toEqual('svg-title')
 })
 
+test('queryByTitle matches case with non-string matcher', () => {
+  const {queryByTitle} = render(`<span title="1" />`)
+  expect(queryByTitle(1)).toBeTruthy()
+})
+
 test('query/get element by its value', () => {
   const {getByDisplayValue, queryByDisplayValue} = render(`
   <div>
@@ -632,6 +657,15 @@ test('query/get select by text with multiple options selected', () => {
   expect(queryByDisplayValue('Alaska').id).toEqual('state-select')
 })
 
+test('queryByDisplayValue matches case with non-string matcher', () => {
+  const {queryByDisplayValue} = render(`
+  <select multiple id="state-select">
+    <option selected value="one">1</option>
+  </select>
+  `)
+  expect(queryByDisplayValue(1)).toBeTruthy()
+})
+
 describe('query by test id', () => {
   afterEach(() => {
     // Restore the default test id attribute
@@ -651,6 +685,11 @@ describe('query by test id', () => {
     expect(queryByTestId('first-name')).not.toBeTruthy()
   })
 
+  test('queryByTestId matches case with non-string matcher', () => {
+    const {queryByTestId} = render(`<span data-testid="1" />`)
+    expect(queryByTestId(1)).toBeTruthy()
+  })
+
   test('can override test id attribute', () => {
     const {queryByTestId} = render(`<div data-my-test-id="theTestId"></div>`)
 
@@ -732,6 +771,11 @@ test('queryAllByRole returns semantic html elements', () => {
   expect(queryAllByRole('listbox')).toHaveLength(1)
 })
 
+test('queryByRole matches case with non-string matcher', () => {
+  const {queryByRole} = render(`<span role="1" />`)
+  expect(queryByRole(1)).toBeTruthy()
+})
+
 test('getAll* matchers return an array', () => {
   const {
     getAllByAltText,

src/matches.js

@@ -31,12 +31,12 @@ function matches(textToMatch, node, matcher, normalizer) {
   assertNotNullOrUndefined(matcher)
 
   const normalizedText = normalizer(textToMatch)
-  if (typeof matcher === 'string') {
-    return normalizedText === matcher
-  } else if (typeof matcher === 'function') {
+  if (matcher instanceof Function) {
     return matcher(normalizedText, node)
-  } else {
+  } else if (matcher instanceof RegExp) {
     return matcher.test(normalizedText)
+  } else {
+    return normalizedText === String(matcher)
   }
 }
 

types/__tests__/type-tests.ts

@@ -27,6 +27,7 @@ export async function testQueries() {
   // element queries
   const element = document.createElement('div')
   getByText(element, 'foo')
+  getByText(element, 1)
   queryByText(element, 'foo')
   await findByText(element, 'foo')
   await findByText(element, 'foo', undefined, {timeout: 10})

types/matches.d.ts

@@ -1,11 +1,11 @@
 import {ARIARole} from 'aria-query'
 
 export type MatcherFunction = (content: string, element: HTMLElement) => boolean
-export type Matcher = string | RegExp | MatcherFunction
+export type Matcher = MatcherFunction | {}
 
 // Get autocomplete for ARIARole union types, while still supporting another string
 // Ref: https://github.com/microsoft/TypeScript/issues/29729#issuecomment-505826972
-export type ByRoleMatcher = ARIARole | (string & {}) | RegExp | MatcherFunction
+export type ByRoleMatcher = ARIARole | MatcherFunction | {}
 
 export type NormalizerFn = (text: string) => string