Merge branch 'master' into pr/aria-expanded

Author: eps1lon

.all-contributorsrc

@@ -1019,7 +1019,8 @@
       "contributions": [
         "doc",
         "code",
-        "test"
+        "test",
+        "review"
       ]
     },
     {

.github/workflows/validate.yml

@@ -2,24 +2,28 @@ name: validate
 on:
   push:
     branches:
-      [
-        '+([0-9])?(.{+([0-9]),x}).x',
-        'master',
-        'next',
-        'next-major',
-        'beta',
-        'alpha',
-        '!all-contributors/**',
-      ]
-  pull_request:
-    branches-ignore: ['all-contributors/**']
+      - '+([0-9])?(.{+([0-9]),x}).x'
+      - 'master'
+      - 'next'
+      - 'next-major'
+      - 'beta'
+      - 'alpha'
+      - '!all-contributors/**'
+  pull_request: {}
 jobs:
   main:
+    # ignore all-contributors PRs
+    if: ${{ !contains(github.head_ref, 'all-contributors') }}
     strategy:
       matrix:
         node: [10.14.2, 12, 14, 15]
     runs-on: ubuntu-latest
     steps:
+      - name: 🛑 Cancel Previous Runs
+        uses: styfle/[email protected]
+        with:
+          access_token: ${{ secrets.GITHUB_TOKEN }}
+
       - name: ⬇️ Checkout repo
         uses: actions/checkout@v2
 
@@ -47,6 +51,11 @@ jobs:
       contains('refs/heads/master,refs/heads/beta,refs/heads/next,refs/heads/alpha',
       github.ref) && github.event_name == 'push' }}
     steps:
+      - name: 🛑 Cancel Previous Runs
+        uses: styfle/[email protected]
+        with:
+          access_token: ${{ secrets.GITHUB_TOKEN }}
+
       - name: ⬇️ Checkout repo
         uses: actions/checkout@v2
 

README.md

@@ -262,7 +262,7 @@ Thanks goes to these people ([emoji key][emojis]):
     <td align="center"><a href="https://github.com/benmonro"><img src="https://avatars3.githubusercontent.com/u/399236?v=4" width="100px;" alt=""/><br /><sub><b>Ben Monro</b></sub></a><br /><a href="https://github.com/testing-library/dom-testing-library/commits?author=benmonro" title="Code">💻</a> <a href="#ideas-benmonro" title="Ideas, Planning, & Feedback">🤔</a> <a href="https://github.com/testing-library/dom-testing-library/commits?author=benmonro" title="Tests">⚠️</a> <a href="https://github.com/testing-library/dom-testing-library/commits?author=benmonro" title="Documentation">📖</a></td>
     <td align="center"><a href="https://github.com/smeijer"><img src="https://avatars1.githubusercontent.com/u/1196524?v=4" width="100px;" alt=""/><br /><sub><b>Stephan Meijer</b></sub></a><br /><a href="#ideas-smeijer" title="Ideas, Planning, & Feedback">🤔</a> <a href="https://github.com/testing-library/dom-testing-library/commits?author=smeijer" title="Code">💻</a> <a href="https://github.com/testing-library/dom-testing-library/commits?author=smeijer" title="Tests">⚠️</a></td>
     <td align="center"><a href="https://joaoforja.com/"><img src="https://avatars2.githubusercontent.com/u/7002157?v=4" width="100px;" alt=""/><br /><sub><b>João Forja</b></sub></a><br /><a href="https://github.com/testing-library/dom-testing-library/commits?author=Jnforja" title="Code">💻</a> <a href="https://github.com/testing-library/dom-testing-library/commits?author=Jnforja" title="Tests">⚠️</a></td>
-    <td align="center"><a href="https://nickmccurdy.com/"><img src="https://avatars0.githubusercontent.com/u/927220?v=4" width="100px;" alt=""/><br /><sub><b>Nick McCurdy</b></sub></a><br /><a href="https://github.com/testing-library/dom-testing-library/commits?author=nickmccurdy" title="Documentation">📖</a> <a href="https://github.com/testing-library/dom-testing-library/commits?author=nickmccurdy" title="Code">💻</a> <a href="https://github.com/testing-library/dom-testing-library/commits?author=nickmccurdy" title="Tests">⚠️</a></td>
+    <td align="center"><a href="https://nickmccurdy.com/"><img src="https://avatars0.githubusercontent.com/u/927220?v=4" width="100px;" alt=""/><br /><sub><b>Nick McCurdy</b></sub></a><br /><a href="https://github.com/testing-library/dom-testing-library/commits?author=nickmccurdy" title="Documentation">📖</a> <a href="https://github.com/testing-library/dom-testing-library/commits?author=nickmccurdy" title="Code">💻</a> <a href="https://github.com/testing-library/dom-testing-library/commits?author=nickmccurdy" title="Tests">⚠️</a> <a href="https://github.com/testing-library/dom-testing-library/pulls?q=is%3Apr+reviewed-by%3Anickmccurdy" title="Reviewed Pull Requests">👀</a></td>
     <td align="center"><a href="http://calebmer.com"><img src="https://avatars1.githubusercontent.com/u/8282507?v=4" width="100px;" alt=""/><br /><sub><b>Caleb Meredith</b></sub></a><br /><a href="https://github.com/testing-library/dom-testing-library/commits?author=calebmer" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/marcosvega91"><img src="https://avatars2.githubusercontent.com/u/5365582?v=4" width="100px;" alt=""/><br /><sub><b>Marco Moretti</b></sub></a><br /><a href="https://github.com/testing-library/dom-testing-library/commits?author=marcosvega91" title="Code">💻</a> <a href="https://github.com/testing-library/dom-testing-library/commits?author=marcosvega91" title="Tests">⚠️</a> <a href="https://github.com/testing-library/dom-testing-library/pulls?q=is%3Apr+reviewed-by%3Amarcosvega91" title="Reviewed Pull Requests">👀</a></td>
   </tr>
@@ -304,7 +304,6 @@ Thanks goes to these people ([emoji key][emojis]):
 
 <!-- markdownlint-enable -->
 <!-- prettier-ignore-end -->
-
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
 This project follows the [all-contributors][all-contributors] specification.

package.json

@@ -31,7 +31,7 @@
     "test:debug": "node --inspect-brk ./node_modules/.bin/jest --watch --runInBand",
     "test:update": "npm test -- --updateSnapshot --coverage",
     "validate": "kcd-scripts validate",
-    "typecheck": "dtslint ./types/"
+    "typecheck": "kcd-scripts typecheck --build types"
   },
   "files": [
     "dist",
@@ -48,15 +48,13 @@
     "pretty-format": "^26.6.2"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^5.11.5",
-    "@types/estree": "0.0.45",
-    "dtslint": "^4.0.5",
+    "@testing-library/jest-dom": "^5.11.6",
     "jest-in-case": "^1.0.2",
     "jest-serializer-ansi": "^1.0.3",
     "jest-watch-select-projects": "^2.0.0",
     "jsdom": "^16.4.0",
-    "kcd-scripts": "^6.7.0",
-    "typescript": "^4.0.5"
+    "kcd-scripts": "^7.5.1",
+    "typescript": "^4.1.2"
   },
   "eslintConfig": {
     "extends": "./node_modules/kcd-scripts/eslint.js",

src/__tests__/.eslintrc

@@ -0,0 +1,7 @@
+{
+  "rules": {
+    // this rule doesn't properly detect that our custom `render` does not
+    // insert elements into the document.
+    "jest-dom/prefer-in-document": "off"
+  }
+}

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/__tests__/events.js

@@ -252,7 +252,7 @@ test('assigns target properties', () => {
   node.addEventListener('change', spy)
   fireEvent.change(node, {target: {value}})
   expect(spy).toHaveBeenCalledTimes(1)
-  expect(node.value).toBe(value)
+  expect(node).toHaveValue(value)
 })
 
 test('assigns selection-related target properties', () => {
@@ -263,7 +263,7 @@ test('assigns selection-related target properties', () => {
   const selectionEnd = 2
   node.addEventListener('change', spy)
   fireEvent.change(node, {target: {value, selectionStart, selectionEnd}})
-  expect(node.value).toBe(value)
+  expect(node).toHaveValue(value)
   expect(node.selectionStart).toBe(selectionStart)
   expect(node.selectionEnd).toBe(selectionEnd)
 })
@@ -299,12 +299,12 @@ test('assigns dataTransfer non-enumerable properties', () => {
   window.DataTransfer = function DataTransfer() {}
   const node = document.createElement('div')
   const spy = jest.fn()
-  const item = {};
-  const dataTransfer = new window.DataTransfer();
+  const item = {}
+  const dataTransfer = new window.DataTransfer()
 
   Object.defineProperty(dataTransfer, 'items', {
     value: [item],
-    enumerable: false
+    enumerable: false,
   })
   node.addEventListener('drop', spy)
   fireEvent.drop(node, {dataTransfer})

src/__tests__/fake-timers.js

@@ -1,14 +1,6 @@
 import {waitFor, waitForElementToBeRemoved} from '..'
 import {render} from './helpers/test-utils'
 
-beforeAll(() => {
-  jest.useFakeTimers()
-})
-
-afterAll(() => {
-  jest.useRealTimers()
-})
-
 async function runWaitFor({time = 300} = {}, options) {
   const response = 'data'
   const doAsyncThing = () =>
@@ -48,6 +40,7 @@ test('fake timer timeout', async () => {
 })
 
 test('times out after 1000ms by default', async () => {
+  jest.useFakeTimers()
   const {container} = render(`<div></div>`)
   const start = performance.now()
   // there's a bug with this rule here...
@@ -66,6 +59,7 @@ test('times out after 1000ms by default', async () => {
 })
 
 test('recursive timers do not cause issues', async () => {
+  jest.useFakeTimers()
   let recurse = true
   function startTimer() {
     setTimeout(() => {

src/__tests__/role.js

@@ -543,3 +543,8 @@ describe('configuration', () => {
     }
   })
 })
+
+test('should find the input using type property instead of attribute', () => {
+  const {getByRole} = render('<input type="124">')
+  expect(getByRole('textbox')).not.toBeNull()
+})

src/__tests__/suggestions.js

@@ -232,6 +232,16 @@ test('should suggest getByLabelText when no role available', () => {
   )
 })
 
+it('should not suggest by label when using by label', async () => {
+  renderIntoDocument(
+    `<label><span>bar</span><input type="password" title="foo" /></label>`,
+  )
+
+  // if a suggestion is made, this call will throw, thus failing the test.
+  const password = await screen.findByLabelText(/bar/i)
+  expect(password).toHaveAttribute('type', 'password')
+})
+
 test(`should suggest getByLabel on non form elements`, () => {
   renderIntoDocument(`
   <div data-testid="foo" aria-labelledby="section-one-header">
@@ -551,14 +561,44 @@ test('should get the first label with aria-labelledby contains multiple ids', ()
   })
 })
 
-test('should suggest hidden option if element is not in the accessibilty tree', () => {
-  const {container} = renderIntoDocument(`
+test('should not suggest or warn about hidden element when suggested query is already used.', () => {
+  console.warn.mockImplementation(() => {})
+
+  renderIntoDocument(`
     <input type="text" aria-hidden=true />
   `)
 
-  expect(
-    getSuggestedQuery(container.querySelector('input'), 'get', 'role'),
-  ).toMatchObject({
+  expect(() => screen.getByRole('textbox', {hidden: true})).not.toThrowError()
+  expect(console.warn).not.toHaveBeenCalled()
+})
+test('should suggest and warn about if element is not in the accessibility tree', () => {
+  console.warn.mockImplementation(() => {})
+
+  renderIntoDocument(`
+    <input type="text" data-testid="foo" aria-hidden=true />
+  `)
+
+  expect(() => screen.getByTestId('foo', {hidden: true})).toThrowError(
+    /getByRole\('textbox', \{ hidden: true \}\)/,
+  )
+  expect(console.warn).toHaveBeenCalledWith(
+    expect.stringContaining(`Element is inaccessible.`),
+  )
+})
+
+test('should suggest hidden option if element is not in the accessibility tree', () => {
+  console.warn.mockImplementation(() => {})
+
+  const {container} = renderIntoDocument(`
+    <input type="text" data-testid="foo" aria-hidden=true />
+  `)
+
+  const suggestion = getSuggestedQuery(
+    container.querySelector('input'),
+    'get',
+    'role',
+  )
+  expect(suggestion).toMatchObject({
     queryName: 'Role',
     queryMethod: 'getByRole',
     queryArgs: ['textbox', {hidden: true}],
@@ -567,6 +607,7 @@ test('should suggest hidden option if element is not in the accessibilty tree',
     If you are using the aria-hidden prop, make sure this is the right choice for your case.
     `,
   })
+  suggestion.toString()
 
   expect(console.warn.mock.calls).toMatchInlineSnapshot(`
     Array [