Merge branch 'master' into pr/migrate_to_ts

Author: nickserv

.all-contributorsrc

@@ -1291,6 +1291,35 @@
         "code",
         "test"
       ]
+    },
+    {
+      "login": "johnjesse",
+      "name": "johnjessewood",
+      "avatar_url": "https://avatars1.githubusercontent.com/u/6839660?v=4",
+      "profile": "https://github.com/johnjesse",
+      "contributions": [
+        "bug",
+        "code"
+      ]
+    },
+    {
+      "login": "AriPerkkio",
+      "name": "Ari Perkkiö",
+      "avatar_url": "https://avatars2.githubusercontent.com/u/14806298?v=4",
+      "profile": "https://codepen.io/ariperkkio/",
+      "contributions": [
+        "bug",
+        "code"
+      ]
+    },
+    {
+      "login": "nathanforce",
+      "name": "Nathan Force",
+      "avatar_url": "https://avatars2.githubusercontent.com/u/6694194?v=4",
+      "profile": "https://github.com/nathanforce",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "repoHost": "https://github.com"

.github/ISSUE_TEMPLATE/Question.md

@@ -12,7 +12,7 @@ and feature requests so we recommend not using this medium to ask them here 😁
 
 ## ❓ Support Forums
 
-- Discord https://discord.gg/c6JN9fM
+- Discord https://discord.gg/testing-library
 - Stack Overflow
   https://stackoverflow.com/questions/tagged/react-testing-library
 

README.md

@@ -96,3 +96,78 @@ test('byRole works without a global DOM', () => {
     </button>
   `)
 })
+
+test('findBy works without a global DOM', async () => {
+  const {window} = new JSDOM(`<div>
+    <div data-testid="test-id" aria-label="test-label">test text content</div>
+    <select><option>display value</option></select>
+    <input placeholder="placeholder" />
+    <img alt="test alt text" src="/lucy-ricardo.png" />
+    <span title="test title" />
+    <div role="dialog"></div>
+    <div role="meter progressbar"></div>
+    <header>header</header>
+    <input type="hidden" />
+  </div>`)
+
+  await expect(
+    dtl.findByLabelText(window.document, 'test-label'),
+  ).resolves.toBeTruthy()
+  await expect(
+    dtl.findAllByLabelText(window.document, 'test-label'),
+  ).resolves.toHaveLength(1)
+  await expect(
+    dtl.findByPlaceholderText(window.document, 'placeholder'),
+  ).resolves.toBeTruthy()
+  await expect(
+    dtl.findAllByPlaceholderText(window.document, 'placeholder'),
+  ).resolves.toHaveLength(1)
+  await expect(
+    dtl.findByText(window.document, 'test text content'),
+  ).resolves.toBeTruthy()
+  await expect(
+    dtl.findAllByText(window.document, 'test text content'),
+  ).resolves.toHaveLength(1)
+  await expect(
+    dtl.findByAltText(window.document, 'test alt text'),
+  ).resolves.toBeTruthy()
+  await expect(
+    dtl.findAllByAltText(window.document, 'test alt text'),
+  ).resolves.toHaveLength(1)
+  await expect(
+    dtl.findByTitle(window.document, 'test title'),
+  ).resolves.toBeTruthy()
+  await expect(
+    dtl.findAllByTitle(window.document, 'test title'),
+  ).resolves.toHaveLength(1)
+  await expect(
+    dtl.findByDisplayValue(window.document, 'display value'),
+  ).resolves.toBeTruthy()
+  await expect(
+    dtl.findAllByDisplayValue(window.document, 'display value'),
+  ).resolves.toHaveLength(1)
+  await expect(dtl.findByRole(window.document, 'dialog')).resolves.toBeTruthy()
+  await expect(
+    dtl.findAllByRole(window.document, 'dialog'),
+  ).resolves.toHaveLength(1)
+  await expect(dtl.findByRole(window.document, 'meter')).resolves.toBeTruthy()
+  await expect(
+    dtl.findAllByRole(window.document, 'meter'),
+  ).resolves.toHaveLength(1)
+  await expect(
+    dtl.findByRole(window.document, 'progressbar', {queryFallbacks: true}),
+  ).resolves.toBeTruthy()
+  await expect(
+    dtl.findAllByRole(window.document, 'progressbar', {queryFallbacks: true}),
+  ).resolves.toHaveLength(1)
+  await expect(dtl.findByRole(window.document, 'banner')).resolves.toBeTruthy()
+  await expect(
+    dtl.findAllByRole(window.document, 'banner'),
+  ).resolves.toHaveLength(1)
+  await expect(
+    dtl.findByTestId(window.document, 'test-id'),
+  ).resolves.toBeTruthy()
+  await expect(
+    dtl.findAllByTestId(window.document, 'test-id'),
+  ).resolves.toHaveLength(1)
+})

src/__node_tests__/index.js

@@ -231,6 +231,10 @@ cases(
         <input id="username" />`,
       queryFn: 'queryAllByLabelText',
     },
+    queryAllByAriaLabelText: {
+      dom: `<div aria-label="User ${LRM}name"/>`,
+      queryFn: 'queryAllByLabelText',
+    },
     queryAllByPlaceholderText: {
       dom: `<input placeholder="User ${LRM}name" />`,
       queryFn: 'queryAllByPlaceholderText',

src/__tests__/text-matchers.js

@@ -42,6 +42,20 @@ test('requires an element to exist first', () => {
   )
 })
 
+test("requires element's parent to exist first", () => {
+  const {getByTestId} = renderIntoDocument(`
+  <div data-testid="div">asd</div>
+`)
+  const div = getByTestId('div')
+  div.parentElement.removeChild(div)
+
+  return expect(
+    waitForElementToBeRemoved(div),
+  ).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 unempty array of elements to exist first', () => {
   return expect(
     waitForElementToBeRemoved([]),

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

@@ -91,7 +91,12 @@ function queryAllByLabelText(
 
       return labelledElements
     }, [])
-    .concat(queryAllByAttribute('aria-label', container, text, {exact}))
+    .concat(
+      queryAllByAttribute('aria-label', container, text, {
+        exact,
+        normalizer: matchNormalizer,
+      }),
+    )
 
   return Array.from(new Set(matchingLabelledElements)).filter(element =>
     element.matches(selector),

src/queries/label-text.js

@@ -90,10 +90,14 @@ function makeGetAllQuery(allQuery, getMissingError) {
 // this accepts a getter query function and returns a function which calls
 // waitFor and passing a function which invokes the getter.
 function makeFindQuery(getter) {
-  return (container, text, options, waitForOptions) =>
-    waitFor(() => {
-      return getter(container, text, options)
-    }, waitForOptions)
+  return (container, text, options, waitForOptions) => {
+    return waitFor(
+      () => {
+        return getter(container, text, options)
+      },
+      {container, ...waitForOptions},
+    )
+  }
 }
 
 const wrapSingleQueryWithSuggestion = (query, queryAllByName, variant) => (

src/query-helpers.js

@@ -20,6 +20,7 @@ async function waitForElementToBeRemoved(callback, options) {
     const elements = Array.isArray(callback) ? callback : [callback]
     const getRemainingElements = elements.map(element => {
       let parent = element.parentElement
+      if(parent === null) return () => null
       while (parent.parentElement) parent = parent.parentElement
       return () => (parent.contains(element) ? element : null)
     })

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

@@ -8,6 +8,7 @@ import {
   setImmediate,
   setTimeout,
   clearTimeout,
+  checkContainerType,
 } from './helpers'
 import {getConfig, runWithExpensiveErrorDiagnosticsDisabled} from './config'
 
@@ -89,6 +90,12 @@ function waitFor(
         await new Promise(r => setImmediate(r))
       }
     } else {
+      try {
+        checkContainerType(container)
+      } catch (e) {
+        reject(e)
+        return
+      }
       intervalId = setInterval(checkRealTimersCallback, interval)
       const {MutationObserver} = getWindowFromNode(container)
       observer = new MutationObserver(checkRealTimersCallback)