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