Merge branch 'master' into feat/aria-selector

Author: eps1lon

.all-contributorsrc

@@ -879,6 +879,16 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "rahulchavan30",
+      "name": "Rahul Suryakanth",
+      "avatar_url": "https://avatars2.githubusercontent.com/u/5296464?v=4",
+      "profile": "https://github.com/rahulchavan30",
+      "contributions": [
+        "code",
+        "test"
+      ]
     }
   ],
   "repoHost": "https://github.com"

README.md

@@ -245,6 +245,7 @@ Thanks goes to these people ([emoji key][emojis]):
     <td align="center"><a href="https://github.com/Yama-Tomo"><img src="https://avatars0.githubusercontent.com/u/4970917?v=4" width="100px;" alt=""/><br /><sub><b>Yama-Tomo</b></sub></a><br /><a href="https://github.com/testing-library/dom-testing-library/commits?author=Yama-Tomo" title="Code">💻</a> <a href="https://github.com/testing-library/dom-testing-library/commits?author=Yama-Tomo" title="Tests">⚠️</a></td>
     <td align="center"><a href="https://github.com/airjp73"><img src="https://avatars2.githubusercontent.com/u/25882770?v=4" width="100px;" alt=""/><br /><sub><b>Aaron Pettengill</b></sub></a><br /><a href="https://github.com/testing-library/dom-testing-library/commits?author=airjp73" title="Code">💻</a> <a href="https://github.com/testing-library/dom-testing-library/commits?author=airjp73" title="Tests">⚠️</a></td>
     <td align="center"><a href="http://kwboyd.com"><img src="https://avatars0.githubusercontent.com/u/13855750?v=4" width="100px;" alt=""/><br /><sub><b>Kate W. Boyd</b></sub></a><br /><a href="https://github.com/testing-library/dom-testing-library/commits?author=kwboyd" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/rahulchavan30"><img src="https://avatars2.githubusercontent.com/u/5296464?v=4" width="100px;" alt=""/><br /><sub><b>Rahul Suryakanth</b></sub></a><br /><a href="https://github.com/testing-library/dom-testing-library/commits?author=rahulchavan30" title="Code">💻</a> <a href="https://github.com/testing-library/dom-testing-library/commits?author=rahulchavan30" title="Tests">⚠️</a></td>
   </tr>
 </table>
 

package.json

@@ -35,19 +35,19 @@
     "dist"
   ],
   "dependencies": {
-    "@babel/runtime": "^7.9.2",
-    "@types/testing-library__dom": "^7.0.0",
+    "@babel/runtime": "^7.9.6",
+    "@types/testing-library__dom": "^7.0.2",
     "aria-query": "^4.0.2",
-    "dom-accessibility-api": "^0.4.2",
-    "pretty-format": "^25.1.0"
+    "dom-accessibility-api": "^0.4.3",
+    "pretty-format": "^26.0.1"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^5.1.1",
+    "@testing-library/jest-dom": "^5.5.0",
     "jest-in-case": "^1.0.2",
     "jest-serializer-ansi": "^1.0.3",
     "jest-watch-select-projects": "^2.0.0",
-    "jsdom": "^16.2.1",
-    "kcd-scripts": "^5.6.0"
+    "jsdom": "^16.2.2",
+    "kcd-scripts": "^6.0.0"
   },
   "eslintConfig": {
     "extends": "./node_modules/kcd-scripts/eslint.js",

src/__tests__/misc.js

@@ -1,5 +1,5 @@
-import {render} from './helpers/test-utils'
 import {queryByAttribute} from '..'
+import {render} from './helpers/test-utils'
 
 // we used to use queryByAttribute internally, but we don't anymore. Some people
 // use it as an undocumented part of the API, so we'll keep it around.

src/__tests__/role-helpers.js

@@ -176,7 +176,7 @@ test.each([
   ['<div style="visibility: visible" />', false],
   ['<div hidden />', true],
   ['<div style="display: none;"/>', true],
-  ['<div style="visibility: hidden;"/>', false], // bug in jsdom < 15.2
+  ['<div style="visibility: hidden;"/>', true],
   ['<div aria-hidden="true" />', true],
 ])('shouldExcludeFromA11yTree for %s returns %p', (html, expected) => {
   const {container} = render(html)

src/__tests__/screen.js

@@ -1,5 +1,5 @@
-import {renderIntoDocument} from './helpers/test-utils'
 import {screen} from '..'
+import {renderIntoDocument} from './helpers/test-utils'
 
 beforeEach(() => {
   jest.spyOn(console, 'log').mockImplementation(() => {})

src/__tests__/wait-for.js

@@ -1,5 +1,5 @@
-import {renderIntoDocument} from './helpers/test-utils'
 import {waitFor} from '../'
+import {renderIntoDocument} from './helpers/test-utils'
 
 test('waits callback to not throw an error', async () => {
   const spy = jest.fn()
@@ -23,7 +23,7 @@ test('can timeout after the given timeout time', async () => {
   expect(result).toBe(error)
 })
 
-test('uses generic error if there was no last error', async () => {
+test('if no error is thrown then throws a timeout error', async () => {
   const result = await waitFor(
     () => {
       // eslint-disable-next-line no-throw-literal
@@ -34,6 +34,58 @@ test('uses generic error if there was no last error', async () => {
   expect(result).toMatchInlineSnapshot(`[Error: Timed out in waitFor.]`)
 })
 
+test('if showOriginalStackTrace on a timeout error then the stack trace does not include this file', async () => {
+  const result = await waitFor(
+    () => {
+      // eslint-disable-next-line no-throw-literal
+      throw undefined
+    },
+    {timeout: 8, interval: 5, showOriginalStackTrace: true},
+  ).catch(e => e)
+  expect(result.stack).not.toMatch(__dirname)
+})
+
+test('uses full stack error trace when showOriginalStackTrace present', async () => {
+  const error = new Error('Throws the full stack trace')
+  // even if the error is a TestingLibraryElementError
+  error.name = 'TestingLibraryElementError'
+  const originalStackTrace = error.stack
+  const result = await waitFor(
+    () => {
+      throw error
+    },
+    {timeout: 8, interval: 5, showOriginalStackTrace: true},
+  ).catch(e => e)
+  expect(result.stack).toBe(originalStackTrace)
+})
+
+test('does not change the stack trace if the thrown error is not a TestingLibraryElementError', async () => {
+  const error = new Error('Throws the full stack trace')
+  const originalStackTrace = error.stack
+  const result = await waitFor(
+    () => {
+      throw error
+    },
+    {timeout: 8, interval: 5},
+  ).catch(e => e)
+  expect(result.stack).toBe(originalStackTrace)
+})
+
+test('provides an improved stack trace if the thrown error is a TestingLibraryElementError', async () => {
+  const error = new Error('Throws the full stack trace')
+  error.name = 'TestingLibraryElementError'
+  const originalStackTrace = error.stack
+  const result = await waitFor(
+    () => {
+      throw error
+    },
+    {timeout: 8, interval: 5},
+  ).catch(e => e)
+  // too hard to test that the stack trace is what we want it to be
+  // so we'll just make sure that it's not the same as the origianl
+  expect(result.stack).not.toBe(originalStackTrace)
+})
+
 test('throws nice error if provided callback is not a function', () => {
   const {queryByTestId} = renderIntoDocument(`
     <div data-testid="div"></div>

src/config.js

@@ -16,6 +16,8 @@ let config = {
   asyncWrapper: cb => cb(),
   // default value for the `hidden` option in `ByRole` queries
   defaultHidden: false,
+  //showOriginalStackTrace flag to show the full error stack traces for async errors
+  showOriginalStackTrace: false,
 
   // called when getBy* queries fail. (message, container) => Error
   getElementError(message, container) {

src/wait-for.js

@@ -8,26 +8,32 @@ import {
 } from './helpers'
 import {getConfig} from './config'
 
+// This is so the stack trace the developer sees is one that's
+// closer to their code (because async stack traces are hard to follow).
+function copyStackTrace(target, source) {
+  target.stack = source.stack.replace(source.message, target.message)
+}
+
 function waitFor(
   callback,
   {
     container = getDocument(),
     timeout = getConfig().asyncUtilTimeout,
+    showOriginalStackTrace = getConfig().showOriginalStackTrace,
+    stackTraceError,
     interval = 50,
     mutationObserverOptions = {
       subtree: true,
       childList: true,
       attributes: true,
       characterData: true,
     },
-  } = {},
+  },
 ) {
   if (typeof callback !== 'function') {
     throw new TypeError('Received `callback` arg must be a function')
   }
 
-  // created here so we get a nice stacktrace
-  const timedOutError = new Error('Timed out in waitFor.')
   if (interval < 1) interval = 1
   return new Promise((resolve, reject) => {
     let lastError
@@ -63,13 +69,33 @@ function waitFor(
     }
 
     function onTimeout() {
-      onDone(lastError || timedOutError, null)
+      let error
+      if (lastError) {
+        error = lastError
+        if (
+          !showOriginalStackTrace &&
+          error.name === 'TestingLibraryElementError'
+        ) {
+          copyStackTrace(error, stackTraceError)
+        }
+      } else {
+        error = new Error('Timed out in waitFor.')
+        if (!showOriginalStackTrace) {
+          copyStackTrace(error, stackTraceError)
+        }
+      }
+      onDone(error, null)
     }
   })
 }
 
-function waitForWrapper(...args) {
-  return getConfig().asyncWrapper(() => waitFor(...args))
+function waitForWrapper(callback, options) {
+  // create the error here so its stack trace is as close to the
+  // calling code as possible
+  const stackTraceError = new Error('STACK_TRACE_MESSAGE')
+  return getConfig().asyncWrapper(() =>
+    waitFor(callback, {stackTraceError, ...options}),
+  )
 }
 
 let hasWarned = false