Add assertions for real and fake runtime

Author: eps1lon

src/__tests__/ariaAttributes.js

@@ -142,9 +142,9 @@ test('`selected: true` matches `aria-selected="true"` on supported roles', () =>
     'selected-listbox-option',
   ])
 
-  expect(
-    getAllByRole('rowheader', {selected: true}).map(({id}) => id),
-  ).toEqual(['selected-rowheader', 'selected-native-rowheader'])
+  expect(getAllByRole('rowheader', {selected: true}).map(({id}) => id)).toEqual(
+    ['selected-rowheader', 'selected-native-rowheader'],
+  )
 
   expect(getAllByRole('treeitem', {selected: true}).map(({id}) => id)).toEqual([
     'selected-treeitem',

src/__tests__/element-queries.js

@@ -1099,11 +1099,8 @@ test('getByText ignores script tags by default', () => {
 })
 
 test('get/query input element by current value', () => {
-  const {
-    getByDisplayValue,
-    queryByDisplayValue,
-    getByTestId,
-  } = renderIntoDocument(`
+  const {getByDisplayValue, queryByDisplayValue, getByTestId} =
+    renderIntoDocument(`
     <div>
       <input placeholder="name" type="text" data-testid="name" value="Mercury" />
     </div>
@@ -1119,11 +1116,8 @@ test('get/query input element by current value', () => {
 })
 
 test('get/query select element by current value', () => {
-  const {
-    getByDisplayValue,
-    queryByDisplayValue,
-    getByTestId,
-  } = renderIntoDocument(`
+  const {getByDisplayValue, queryByDisplayValue, getByTestId} =
+    renderIntoDocument(`
     <select id="state-select" data-testid="state">
       <option value="">State</option>
       <option value="AL">Alabama</option>
@@ -1141,11 +1135,8 @@ test('get/query select element by current value', () => {
 })
 
 test('get/query textarea element by current value', () => {
-  const {
-    getByDisplayValue,
-    queryByDisplayValue,
-    getByTestId,
-  } = renderIntoDocument(`
+  const {getByDisplayValue, queryByDisplayValue, getByTestId} =
+    renderIntoDocument(`
     <textarea id="content-textarea" data-testid="content">
       Hello
     </textarea>

src/__tests__/fake-timers.js

@@ -11,6 +11,10 @@ async function runWaitFor({time = 300} = {}, options) {
   await waitFor(() => expect(result).toBe(response), options)
 }
 
+afterEach(() => {
+  jest.useRealTimers()
+})
+
 test('real timers', async () => {
   // the only difference when not using fake timers is this test will
   // have to wait the full length of the timeout
@@ -40,9 +44,10 @@ test('fake timer timeout', async () => {
 })
 
 test('times out after 1000ms by default', async () => {
+  const startReal = performance.now()
   jest.useFakeTimers()
   const {container} = render(`<div></div>`)
-  const start = performance.now()
+  const startFake = performance.now()
   // there's a bug with this rule here...
   // eslint-disable-next-line jest/valid-expect
   await expect(
@@ -51,7 +56,13 @@ test('times out after 1000ms by default', async () => {
     `Timed out in waitForElementToBeRemoved.`,
   )
   // NOTE: this assertion ensures that the timeout runs in the declared (fake) clock.
-  expect(performance.now() - start).toBeGreaterThanOrEqual(1000)
+  expect(performance.now() - startFake).toBeGreaterThanOrEqual(1000)
+  jest.useRealTimers()
+  // NOTE: this assertion ensures that the timeout runs in the declared (fake) clock
+  // while in real time the time was only a fraction since the real clock is only bound by the CPU.
+  // So 20ms is really just an approximation on how long the CPU needs to execute our code.
+  // If people want to timeout in real time they should rely on their test runners.
+  expect(performance.now() - startReal).toBeLessThanOrEqual(20)
 })
 
 test('recursive timers do not cause issues', async () => {

src/get-user-code-frame.js

@@ -7,8 +7,10 @@ try {
   const nodeRequire = module && module.require
 
   readFileSync = nodeRequire.call(module, 'fs').readFileSync
-  codeFrameColumns = nodeRequire.call(module, '@babel/code-frame')
-    .codeFrameColumns
+  codeFrameColumns = nodeRequire.call(
+    module,
+    '@babel/code-frame',
+  ).codeFrameColumns
   chalk = nodeRequire.call(module, 'chalk')
 } catch {
   // We're in a browser environment

src/queries/role.js

@@ -148,8 +148,8 @@ function queryAllByRole(
 
       return matches(
         computeAccessibleName(element, {
-          computedStyleSupportsPseudoElements: getConfig()
-            .computedStyleSupportsPseudoElements,
+          computedStyleSupportsPseudoElements:
+            getConfig().computedStyleSupportsPseudoElements,
         }),
         element,
         name,
@@ -227,13 +227,8 @@ const queryAllByRoleWithSuggestions = wrapAllByQueryWithSuggestion(
   queryAllByRole.name,
   'queryAll',
 )
-const [
-  queryByRole,
-  getAllByRole,
-  getByRole,
-  findAllByRole,
-  findByRole,
-] = buildQueries(queryAllByRole, getMultipleError, getMissingError)
+const [queryByRole, getAllByRole, getByRole, findAllByRole, findByRole] =
+  buildQueries(queryAllByRole, getMultipleError, getMissingError)
 
 export {
   queryByRole,

src/queries/text.ts

@@ -51,13 +51,8 @@ const queryAllByTextWithSuggestions = wrapAllByQueryWithSuggestion(
   'queryAll',
 )
 
-const [
-  queryByText,
-  getAllByText,
-  getByText,
-  findAllByText,
-  findByText,
-] = buildQueries(queryAllByText, getMultipleError, getMissingError)
+const [queryByText, getAllByText, getByText, findAllByText, findByText] =
+  buildQueries(queryAllByText, getMultipleError, getMissingError)
 
 export {
   queryByText,

src/queries/title.ts

@@ -42,13 +42,8 @@ const queryAllByTitleWithSuggestions = wrapAllByQueryWithSuggestion(
   'queryAll',
 )
 
-const [
-  queryByTitle,
-  getAllByTitle,
-  getByTitle,
-  findAllByTitle,
-  findByTitle,
-] = buildQueries(queryAllByTitle, getMultipleError, getMissingError)
+const [queryByTitle, getAllByTitle, getByTitle, findAllByTitle, findByTitle] =
+  buildQueries(queryAllByTitle, getMultipleError, getMissingError)
 
 export {
   queryByTitle,

src/query-helpers.js

@@ -100,49 +100,47 @@ function makeFindQuery(getter) {
   }
 }
 
-const wrapSingleQueryWithSuggestion = (query, queryAllByName, variant) => (
-  container,
-  ...args
-) => {
-  const element = query(container, ...args)
-  const [{suggest = getConfig().throwSuggestions} = {}] = args.slice(-1)
-  if (element && suggest) {
-    const suggestion = getSuggestedQuery(element, variant)
-    if (suggestion && !queryAllByName.endsWith(suggestion.queryName)) {
-      throw getSuggestionError(suggestion.toString(), container)
+const wrapSingleQueryWithSuggestion =
+  (query, queryAllByName, variant) =>
+  (container, ...args) => {
+    const element = query(container, ...args)
+    const [{suggest = getConfig().throwSuggestions} = {}] = args.slice(-1)
+    if (element && suggest) {
+      const suggestion = getSuggestedQuery(element, variant)
+      if (suggestion && !queryAllByName.endsWith(suggestion.queryName)) {
+        throw getSuggestionError(suggestion.toString(), container)
+      }
     }
-  }
 
-  return element
-}
+    return element
+  }
 
-const wrapAllByQueryWithSuggestion = (query, queryAllByName, variant) => (
-  container,
-  ...args
-) => {
-  const els = query(container, ...args)
-
-  const [{suggest = getConfig().throwSuggestions} = {}] = args.slice(-1)
-  if (els.length && suggest) {
-    // get a unique list of all suggestion messages.  We are only going to make a suggestion if
-    // all the suggestions are the same
-    const uniqueSuggestionMessages = [
-      ...new Set(
-        els.map(element => getSuggestedQuery(element, variant)?.toString()),
-      ),
-    ]
-
-    if (
-      // only want to suggest if all the els have the same suggestion.
-      uniqueSuggestionMessages.length === 1 &&
-      !queryAllByName.endsWith(getSuggestedQuery(els[0], variant).queryName)
-    ) {
-      throw getSuggestionError(uniqueSuggestionMessages[0], container)
+const wrapAllByQueryWithSuggestion =
+  (query, queryAllByName, variant) =>
+  (container, ...args) => {
+    const els = query(container, ...args)
+
+    const [{suggest = getConfig().throwSuggestions} = {}] = args.slice(-1)
+    if (els.length && suggest) {
+      // get a unique list of all suggestion messages.  We are only going to make a suggestion if
+      // all the suggestions are the same
+      const uniqueSuggestionMessages = [
+        ...new Set(
+          els.map(element => getSuggestedQuery(element, variant)?.toString()),
+        ),
+      ]
+
+      if (
+        // only want to suggest if all the els have the same suggestion.
+        uniqueSuggestionMessages.length === 1 &&
+        !queryAllByName.endsWith(getSuggestedQuery(els[0], variant).queryName)
+      ) {
+        throw getSuggestionError(uniqueSuggestionMessages[0], container)
+      }
     }
-  }
 
-  return els
-}
+    return els
+  }
 
 function buildQueries(queryAllBy, getMultipleError, getMissingError) {
   const queryBy = wrapSingleQueryWithSuggestion(

src/role-helpers.js

@@ -188,8 +188,8 @@ function prettyRoles(dom, {hidden}) {
       const elementsString = elements
         .map(el => {
           const nameString = `Name "${computeAccessibleName(el, {
-            computedStyleSupportsPseudoElements: getConfig()
-              .computedStyleSupportsPseudoElements,
+            computedStyleSupportsPseudoElements:
+              getConfig().computedStyleSupportsPseudoElements,
           })}":\n`
           const domString = prettyDOM(el.cloneNode(false))
           return `${nameString}${domString}`

src/suggestions.js

@@ -86,8 +86,8 @@ export function getSuggestedQuery(element, variant = 'get', method) {
     return makeSuggestion('Role', element, role, {
       variant,
       name: computeAccessibleName(element, {
-        computedStyleSupportsPseudoElements: getConfig()
-          .computedStyleSupportsPseudoElements,
+        computedStyleSupportsPseudoElements:
+          getConfig().computedStyleSupportsPseudoElements,
       }),
     })
   }

types/role-helpers.d.ts

@@ -1,7 +1,7 @@
 export function logRoles(container: HTMLElement): string
-export function getRoles(
-  container: HTMLElement,
-): {[index: string]: HTMLElement[]}
+export function getRoles(container: HTMLElement): {
+  [index: string]: HTMLElement[]
+}
 /**
  * https://testing-library.com/docs/dom-testing-library/api-helpers#isinaccessible
  */