Merge branch 'beta' into pr/remove-default-wait-callback

Author: Kent C. Dodds

.all-contributorsrc

@@ -804,6 +804,15 @@
         "code",
         "test"
       ]
+    },
+    {
+      "login": "MichaelDeBoey",
+      "name": "Michaël De Boey",
+      "avatar_url": "https://avatars3.githubusercontent.com/u/6643991?v=4",
+      "profile": "https://michaeldeboey.be",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "repoHost": "https://github.com"

.gitattributes

@@ -1,2 +1 @@
-* text=auto
-*.js text eol=lf
+* text=auto eol=lf

.gitignore

@@ -1,12 +1,7 @@
 node_modules
 coverage
 dist
-.opt-in
-.opt-out
 .DS_Store
-.eslintcache
-yarn-error.log
-.idea/
 
 # these cause more harm than good
 # when working with contributors

.prettierignore

@@ -1,4 +1,3 @@
-package.json
 node_modules
-dist
 coverage
+dist

.prettierrc

@@ -0,0 +1 @@
+module.exports = require('kcd-scripts/prettier')

.prettierrc.js

@@ -3,7 +3,7 @@ cache: npm
 notifications:
   email: false
 node_js:
-  - 10.14
+  - 10.0.0
   - 12
   - node
 install: npm install
@@ -13,7 +13,6 @@ script:
 branches:
   only:
     - master
-    - next
     - beta
 
 jobs:

.travis.yml

@@ -235,6 +235,7 @@ Thanks goes to these people ([emoji key][emojis]):
     <td align="center"><a href="https://www.linkedin.com/in/seetdev/"><img src="https://avatars2.githubusercontent.com/u/35116035?v=4" width="100px;" alt=""/><br /><sub><b>seetdev</b></sub></a><br /><a href="https://github.com/testing-library/dom-testing-library/commits?author=seetdev" title="Tests">⚠️</a> <a href="https://github.com/testing-library/dom-testing-library/commits?author=seetdev" title="Code">💻</a></td>
     <td align="center"><a href="https://twitter.com/xgbuils"><img src="https://avatars2.githubusercontent.com/u/6483614?v=4" width="100px;" alt=""/><br /><sub><b>Xavier Garcia Buils</b></sub></a><br /><a href="https://github.com/testing-library/dom-testing-library/commits?author=xgbuils" title="Code">💻</a> <a href="https://github.com/testing-library/dom-testing-library/commits?author=xgbuils" title="Tests">⚠️</a></td>
     <td align="center"><a href="https://github.com/aw-davidson"><img src="https://avatars2.githubusercontent.com/u/32170938?v=4" width="100px;" alt=""/><br /><sub><b>aw-davidson</b></sub></a><br /><a href="https://github.com/testing-library/dom-testing-library/commits?author=aw-davidson" title="Code">💻</a> <a href="https://github.com/testing-library/dom-testing-library/commits?author=aw-davidson" title="Tests">⚠️</a></td>
+    <td align="center"><a href="https://michaeldeboey.be"><img src="https://avatars3.githubusercontent.com/u/6643991?v=4" width="100px;" alt=""/><br /><sub><b>Michaël De Boey</b></sub></a><br /><a href="https://github.com/testing-library/dom-testing-library/commits?author=MichaelDeBoey" title="Code">💻</a></td>
   </tr>
 </table>
 

README.md

@@ -17,19 +17,19 @@
     "end-to-end",
     "e2e"
   ],
-  "author": "Kent C. Dodds <kent@doddsfamily.us> (https://kentcdodds.com/)",
+  "author": "Kent C. Dodds <me@kentcdodds.com> (https://kentcdodds.com)",
   "license": "MIT",
   "engines": {
-    "node": ">=8"
+    "node": ">=10"
   },
   "scripts": {
     "build": "kcd-scripts build --ignore \"**/__tests__/**,**/__node_tests__/**,**/__mocks__/**\" && kcd-scripts build --bundle --no-clean",
     "lint": "kcd-scripts lint",
+    "setup": "npm install && npm run validate -s",
     "test": "kcd-scripts test",
-    "test:update": "npm test -- --updateSnapshot --coverage",
     "test:debug": "node --inspect-brk ./node_modules/.bin/jest --watch --runInBand",
-    "validate": "kcd-scripts validate",
-    "setup": "npm install && npm run validate -s"
+    "test:update": "npm test -- --updateSnapshot --coverage",
+    "validate": "kcd-scripts validate"
   },
   "husky": {
     "hooks": {
@@ -70,7 +70,7 @@
   ],
   "repository": {
     "type": "git",
-    "url": "https://github.com/testing-library/dom-testing-library.git"
+    "url": "https://github.com/testing-library/dom-testing-library"
   },
   "bugs": {
     "url": "https://github.com/testing-library/dom-testing-library/issues"

package.json

@@ -45,27 +45,35 @@ test('resolves on mutation if callback throws an error', async () => {
   await waitForElementToBeRemoved(() => getByTestId('div'), {timeout: 100})
 })
 
-test('requires a function as the first parameter', () => {
+test('requires an element to exist first', () => {
   return expect(
-    waitForElementToBeRemoved(),
+    waitForElementToBeRemoved(null),
   ).rejects.toThrowErrorMatchingInlineSnapshot(
-    `"waitForElementToBeRemoved requires a callback as the first parameter"`,
+    `"The element(s) given to waitForElementToBeRemoved are already removed. waitForElementToBeRemoved requires that the element(s) exist(s) before waiting for removal."`,
   )
 })
 
-test('requires an element to exist first', () => {
+test('requires an unempty array of elements to exist first', () => {
+  return expect(
+    waitForElementToBeRemoved([]),
+  ).rejects.toThrowErrorMatchingInlineSnapshot(
+    `"The element(s) given to waitForElementToBeRemoved are already removed. waitForElementToBeRemoved requires that the element(s) exist(s) before waiting for removal."`,
+  )
+})
+
+test('requires an element to exist first (function form)', () => {
   return expect(
     waitForElementToBeRemoved(() => null),
   ).rejects.toThrowErrorMatchingInlineSnapshot(
-    `"The callback function which was passed did not return an element or non-empty array of elements. waitForElementToBeRemoved requires that the element(s) exist(s) before waiting for removal."`,
+    `"The element(s) given to waitForElementToBeRemoved are already removed. waitForElementToBeRemoved requires that the element(s) exist(s) before waiting for removal."`,
   )
 })
 
-test('requires an unempty array of elements to exist first', () => {
+test('requires an unempty array of elements to exist first (function form)', () => {
   return expect(
     waitForElementToBeRemoved(() => []),
   ).rejects.toThrowErrorMatchingInlineSnapshot(
-    `"The callback function which was passed did not return an element or non-empty array of elements. waitForElementToBeRemoved requires that the element(s) exist(s) before waiting for removal."`,
+    `"The element(s) given to waitForElementToBeRemoved are already removed. waitForElementToBeRemoved requires that the element(s) exist(s) before waiting for removal."`,
   )
 })
 
@@ -132,3 +140,37 @@ test('rethrows non-testing-lib errors', () => {
     }),
   ).rejects.toBe(error)
 })
+
+test('accepts an element as an argument and waits for it to be removed from its top-most parent', async () => {
+  const {queryByTestId} = renderIntoDocument(`
+    <div data-testid="div"></div>
+  `)
+  const div = queryByTestId('div')
+  setTimeout(() => {
+    div.parentElement.removeChild(div)
+  }, 20)
+
+  await waitForElementToBeRemoved(div, {timeout: 200})
+})
+
+test('accepts an array of elements as an argument and waits for those elements to be removed from their top-most parent', async () => {
+  const {queryAllByTestId} = renderIntoDocument(`
+    <div>
+      <div>
+        <div data-testid="div"></div>
+      </div>
+      <div>
+        <div data-testid="div"></div>
+      </div>
+    </div>
+  `)
+  const [div1, div2] = queryAllByTestId('div')
+  setTimeout(() => {
+    div1.parentElement.removeChild(div1)
+  }, 20)
+
+  setTimeout(() => {
+    div2.parentElement.removeChild(div2)
+  }, 50)
+  await waitForElementToBeRemoved([div1, div2], {timeout: 200})
+})

src/__tests__/wait-for-element-to-be-removed.js

@@ -27,3 +27,14 @@ test('can timeout after the given timeout time', async () => {
   ).catch(e => e)
   expect(result).toBe(error)
 })
+
+test('can timeout after the given timeout time', async () => {
+  const error = new Error('throws every time')
+  const result = await wait(
+    () => {
+      throw error
+    },
+    {timeout: 8, interval: 5},
+  ).catch(e => e)
+  expect(result).toBe(error)
+})

src/__tests__/wait.js

@@ -64,17 +64,19 @@ function queryAllByLabelText(
       }
       if (label.getAttribute('id')) {
         // <label id="someId">text</label><input aria-labelledby="someId" />
-        container
-          .querySelectorAll(`[aria-labelledby~="${label.getAttribute('id')}"]`)
-          .forEach(element => elementsForLabel.push(element))
+        Array.from(
+          container.querySelectorAll(
+            `[aria-labelledby~="${label.getAttribute('id')}"]`,
+          ),
+        ).forEach(element => elementsForLabel.push(element))
       }
       if (label.childNodes.length) {
         // <label>text: <input /></label>
         const formControlSelector =
           'button, input, meter, output, progress, select, textarea'
-        label
-          .querySelectorAll(formControlSelector)
-          .forEach(element => elementsForLabel.push(element))
+        Array.from(
+          label.querySelectorAll(formControlSelector),
+        ).forEach(element => elementsForLabel.push(element))
       }
       return matchedElements.concat(elementsForLabel)
     }, [])

src/queries/label-text.js

@@ -1,5 +1,5 @@
 import {fuzzyMatches, matches, makeNormalizer} from './matches'
-import {waitForElement} from './wait-for-element'
+import {wait} from './wait'
 import {getConfig} from './config'
 
 function getMultipleElementsFoundError(message, container) {
@@ -65,13 +65,10 @@ function makeGetAllQuery(allQuery, getMissingError) {
 }
 
 // this accepts a getter query function and returns a function which calls
-// waitForElement and passing a function which invokes the getter.
+// wait and passing a function which invokes the getter.
 function makeFindQuery(getter) {
-  return (container, text, options, waitForElementOptions) =>
-    waitForElement(
-      () => getter(container, text, options),
-      waitForElementOptions,
-    )
+  return (container, text, options, waitOptions) =>
+    wait(() => getter(container, text, options), waitOptions)
 }
 
 function buildQueries(queryAllBy, getMultipleError, getMissingError) {

src/query-helpers.js

@@ -149,8 +149,10 @@ function getRoles(container, {hidden = false} = {}) {
 function prettyRoles(dom, {hidden}) {
   const roles = getRoles(dom, {hidden})
 
-  return Object.entries(roles)
-    .map(([role, elements]) => {
+  // Object.entries is not supported in older browsers
+  return Object.keys(roles)
+    .map(role => {
+      const elements = roles[role]
       const delimiterBar = '-'.repeat(50)
       const elementsString = elements
         .map(el => {

src/role-helpers.js

@@ -2,23 +2,31 @@ import {wait} from './wait'
 
 const isRemoved = result => !result || (Array.isArray(result) && !result.length)
 
-async function waitForElementToBeRemoved(callback, options) {
-  if (!callback) {
-    return Promise.reject(
-      new Error(
-        'waitForElementToBeRemoved requires a callback as the first parameter',
-      ),
+// Check if the element is not present.
+// As the name implies, waitForElementToBeRemoved should check `present` --> `removed`
+function initialCheck(elements) {
+  if (isRemoved(elements)) {
+    throw new Error(
+      'The element(s) given to waitForElementToBeRemoved are already removed. waitForElementToBeRemoved requires that the element(s) exist(s) before waiting for removal.',
     )
   }
+}
 
-  // Check if the element is not present synchronously,
-  // As the name implies, waitForElementToBeRemoved should check `present` --> `removed`
-  if (isRemoved(callback())) {
-    throw new Error(
-      'The callback function which was passed did not return an element or non-empty array of elements. waitForElementToBeRemoved requires that the element(s) exist(s) before waiting for removal.',
-    )
+async function waitForElementToBeRemoved(callback, options) {
+  if (typeof callback !== 'function') {
+    // await waitForElementToBeRemoved(getAllByText('Hello'))
+    initialCheck(callback)
+    const elements = Array.isArray(callback) ? callback : [callback]
+    const getRemainingElements = elements.map(element => {
+      let parent = element.parentElement
+      while (parent.parentElement) parent = parent.parentElement
+      return () => (parent.contains(element) ? element : null)
+    })
+    callback = () => getRemainingElements.map(c => c()).filter(Boolean)
   }
 
+  initialCheck(callback())
+
   return wait(() => {
     let result
     try {