Merge branch 'master' into chores/enhance-get-text-error

Author: MatanBobi

.all-contributorsrc

@@ -1497,6 +1497,33 @@
       "contributions": [
         "bug"
       ]
+    },
+    {
+      "login": "robcaldecott",
+      "name": "Rob Caldecott",
+      "avatar_url": "https://avatars.githubusercontent.com/u/796702?v=4",
+      "profile": "https://github.com/robcaldecott",
+      "contributions": [
+        "bug"
+      ]
+    },
+    {
+      "login": "Dennis273",
+      "name": "Dennis273",
+      "avatar_url": "https://avatars.githubusercontent.com/u/19815164?v=4",
+      "profile": "https://github.com/Dennis273",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "jacksonhardaker",
+      "name": "Jackson Hardaker",
+      "avatar_url": "https://avatars.githubusercontent.com/u/7596320?v=4",
+      "profile": "https://www.jacksonhardaker.dev",
+      "contributions": [
+        "test"
+      ]
     }
   ],
   "repoHost": "https://github.com"

.codesandbox/ci.json

@@ -1,4 +1,5 @@
 {
+  "installCommand": "install:csb",
   "sandboxes": ["github/kentcdodds/react-testing-library-examples"],
   "node": "12"
 }

.github/workflows/validate.yml

@@ -18,21 +18,20 @@ jobs:
       # Otherwise we would not know if the problem is tied to the Node.js version
       fail-fast: false
       matrix:
-        # TODO: relax `'16.9.1'` to `16` once GitHub has 16.9.1 cached. 16.9.0 is broken due to https://github.com/nodejs/node/issues/40030
-        node: [12, 14, '16.9.1']
+        node: [12, 14, 16]
     runs-on: ubuntu-latest
     steps:
       - name: 🛑 Cancel Previous Runs
         uses: styfle/[email protected]
 
       - name: ⬇️ Checkout repo
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
         with:
           # required by codecov/codecov-action
           fetch-depth: 0
 
       - name: ⎔ Setup node
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node }}
 
@@ -66,10 +65,10 @@ jobs:
         uses: styfle/[email protected]
 
       - name: ⬇️ Checkout repo
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
 
       - name: ⎔ Setup node
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
           node-version: 14
 

README.md

@@ -327,6 +327,11 @@ Thanks goes to these people ([emoji key][emojis]):
     <td align="center"><a href="https://github.com/IanVS"><img src="https://avatars.githubusercontent.com/u/4616705?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Ian VanSchooten</b></sub></a><br /><a href="https://github.com/testing-library/dom-testing-library/commits?author=IanVS" title="Code">💻</a></td>
     <td align="center"><a href="http://supervanya.com"><img src="https://avatars.githubusercontent.com/u/12336038?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Vanya Prokopovich</b></sub></a><br /><a href="https://github.com/testing-library/dom-testing-library/issues?q=author%3Asupervanya" title="Bug reports">🐛</a></td>
     <td align="center"><a href="https://github.com/jrnail23"><img src="https://avatars.githubusercontent.com/u/392612?v=4?s=100" width="100px;" alt=""/><br /><sub><b>James Nail</b></sub></a><br /><a href="https://github.com/testing-library/dom-testing-library/issues?q=author%3Ajrnail23" title="Bug reports">🐛</a></td>
+    <td align="center"><a href="https://github.com/robcaldecott"><img src="https://avatars.githubusercontent.com/u/796702?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Rob Caldecott</b></sub></a><br /><a href="https://github.com/testing-library/dom-testing-library/issues?q=author%3Arobcaldecott" title="Bug reports">🐛</a></td>
+  </tr>
+  <tr>
+    <td align="center"><a href="https://github.com/Dennis273"><img src="https://avatars.githubusercontent.com/u/19815164?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Dennis273</b></sub></a><br /><a href="https://github.com/testing-library/dom-testing-library/commits?author=Dennis273" title="Code">💻</a></td>
+    <td align="center"><a href="https://www.jacksonhardaker.dev"><img src="https://avatars.githubusercontent.com/u/7596320?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Jackson Hardaker</b></sub></a><br /><a href="https://github.com/testing-library/dom-testing-library/commits?author=jacksonhardaker" title="Tests">⚠️</a></td>
   </tr>
 </table>
 

package.json

@@ -26,6 +26,7 @@
   "scripts": {
     "build": "kcd-scripts build  --no-ts-defs --ignore \"**/__tests__/**,**/__node_tests__/**,**/__mocks__/**\" && kcd-scripts build --no-ts-defs --bundle --no-clean",
     "format": "kcd-scripts format",
+    "install:csb": "npm install",
     "lint": "kcd-scripts lint",
     "setup": "npm install && npm run validate -s",
     "test": "kcd-scripts test",

src/__tests__/events.js

@@ -172,17 +172,17 @@ eventTypes.forEach(({type, events, elementType}) => {
         expect(spy).toHaveBeenCalledTimes(1)
       })
     })
-
-    it('fires resize', () => {
-      const node = document.defaultView
-      const spy = jest.fn()
-      node.addEventListener('resize', spy, {once: true})
-      fireEvent.resize(node)
-      expect(spy).toHaveBeenCalledTimes(1)
-    })
   })
 })
 
+it('fires resize', () => {
+  const node = document.defaultView
+  const spy = jest.fn()
+  node.addEventListener('resize', spy, {once: true})
+  fireEvent.resize(node)
+  expect(spy).toHaveBeenCalledTimes(1)
+})
+
 describe(`Bubbling Events`, () => {
   bubblingEvents.forEach(event =>
     it(`bubbles ${event}`, () => {

src/__tests__/helpers.js

@@ -25,9 +25,22 @@ describe('window retrieval throws when given something other than a node', () =>
       `It looks like you passed an Array instead of a DOM node. Did you do something like \`fireEvent.click(screen.getAllBy...\` when you meant to use a \`getBy\` query \`fireEvent.click(screen.getBy...\`?`,
     )
   })
+  test('window is not available for node', () => {
+    const elem = document.createElement('div')
+    Object.defineProperty(elem.ownerDocument, 'defaultView', {
+      get: function get() {
+        return null
+      },
+    })
+
+    expect(() => getWindowFromNode(elem)).toThrowErrorMatchingInlineSnapshot(
+      `It looks like the window object is not available for the provided node.`,
+    )
+  })
+
   test('unknown as node', () => {
     expect(() => getWindowFromNode({})).toThrowErrorMatchingInlineSnapshot(
-      `Unable to find the "window" object for the given node. Please file an issue with the code that's causing you to see this error: https://github.com/testing-library/dom-testing-library/issues/new`,
+      `The given node is not an Element, the node type is: object.`,
     )
   })
 })

src/__tests__/matches.js

@@ -15,6 +15,22 @@ test('matchers accept regex', () => {
   expect(fuzzyMatches('ABC', node, /ABC/, normalizer)).toBe(true)
 })
 
+// https://stackoverflow.com/questions/1520800/why-does-a-regexp-with-global-flag-give-wrong-results
+test('a regex with the global flag consistently (re-)finds a match', () => {
+  const regex = /ABC/g
+  const spy = jest.spyOn(console, 'warn').mockImplementation()
+
+  expect(matches('ABC', node, regex, normalizer)).toBe(true)
+  expect(fuzzyMatches('ABC', node, regex, normalizer)).toBe(true)
+
+  expect(spy).toBeCalledTimes(2)
+  expect(spy).toHaveBeenCalledWith(
+    `To match all elements we had to reset the lastIndex of the RegExp because the global flag is enabled. We encourage to remove the global flag from the RegExp.`,
+  )
+
+  console.warn.mockClear()
+})
+
 test('matchers accept functions', () => {
   expect(matches('ABC', node, text => text === 'ABC', normalizer)).toBe(true)
   expect(fuzzyMatches('ABC', node, text => text === 'ABC', normalizer)).toBe(

src/helpers.js

@@ -33,6 +33,10 @@ function getWindowFromNode(node) {
   } else if (node.window) {
     // node is window
     return node.window
+  } else if (node.ownerDocument && node.ownerDocument.defaultView === null) {
+    throw new Error(
+      `It looks like the window object is not available for the provided node.`,
+    )
   } else if (node.then instanceof Function) {
     throw new Error(
       `It looks like you passed a Promise object instead of a DOM node. Did you do something like \`fireEvent.click(screen.findBy...\` when you meant to use a \`getBy\` query \`fireEvent.click(screen.getBy...\`, or await the findBy query \`fireEvent.click(await screen.findBy...\`?`,
@@ -51,7 +55,7 @@ function getWindowFromNode(node) {
   } else {
     // The user passed something unusual to a calling function
     throw new Error(
-      `Unable to find the "window" object for the given node. Please file an issue with the code that's causing you to see this error: https://github.com/testing-library/dom-testing-library/issues/new`,
+      `The given node is not an Element, the node type is: ${typeof node}.`,
     )
   }
 }

src/matches.ts

@@ -36,7 +36,7 @@ function fuzzyMatches(
   } else if (typeof matcher === 'function') {
     return matcher(normalizedText, node)
   } else {
-    return matcher.test(normalizedText)
+    return matchRegExp(matcher, normalizedText)
   }
 }
 
@@ -56,7 +56,7 @@ function matches(
   if (matcher instanceof Function) {
     return matcher(normalizedText, node)
   } else if (matcher instanceof RegExp) {
-    return matcher.test(normalizedText)
+    return matchRegExp(matcher, normalizedText)
   } else {
     return normalizedText === String(matcher)
   }
@@ -91,25 +91,35 @@ function makeNormalizer({
   collapseWhitespace,
   normalizer,
 }: NormalizerOptions) {
-  if (normalizer) {
-    // User has specified a custom normalizer
-    if (
-      typeof trim !== 'undefined' ||
-      typeof collapseWhitespace !== 'undefined'
-    ) {
-      // They've also specified a value for trim or collapseWhitespace
-      throw new Error(
-        'trim and collapseWhitespace are not supported with a normalizer. ' +
-          'If you want to use the default trim and collapseWhitespace logic in your normalizer, ' +
-          'use "getDefaultNormalizer({trim, collapseWhitespace})" and compose that into your normalizer',
-      )
-    }
-
-    return normalizer
-  } else {
+  if (!normalizer) {
     // No custom normalizer specified. Just use default.
     return getDefaultNormalizer({trim, collapseWhitespace})
   }
+
+  if (
+    typeof trim !== 'undefined' ||
+    typeof collapseWhitespace !== 'undefined'
+  ) {
+    // They've also specified a value for trim or collapseWhitespace
+    throw new Error(
+      'trim and collapseWhitespace are not supported with a normalizer. ' +
+        'If you want to use the default trim and collapseWhitespace logic in your normalizer, ' +
+        'use "getDefaultNormalizer({trim, collapseWhitespace})" and compose that into your normalizer',
+    )
+  }
+
+  return normalizer
+}
+
+function matchRegExp(matcher: RegExp, text: string) {
+  const match = matcher.test(text)
+  if (matcher.global && matcher.lastIndex !== 0) {
+    console.warn(
+      `To match all elements we had to reset the lastIndex of the RegExp because the global flag is enabled. We encourage to remove the global flag from the RegExp.`,
+    )
+    matcher.lastIndex = 0
+  }
+  return match
 }
 
 export {fuzzyMatches, matches, getDefaultNormalizer, makeNormalizer}

types/__tests__/type-tests.ts

@@ -254,6 +254,12 @@ export async function testWithin() {
 
   await container.findByRole('button', {name: /click me/i})
   container.getByRole<HTMLButtonElement>('button', {name: /click me/i})
+
+  let withinQueries = within(document.body)
+  withinQueries = within(document.body)
+  withinQueries.getByRole<HTMLButtonElement>('button', {name: /click me/i})
+  withinQueries = within(document.body)
+  withinQueries.getByRole<HTMLButtonElement>('button', {name: /click me/i})
 }
 
 /*

types/get-queries-for-element.d.ts

@@ -175,7 +175,8 @@ export interface Queries {
   [T: string]: Query
 }
 
-export function getQueriesForElement<T extends Queries = typeof queries>(
-  element: HTMLElement,
-  queriesToBind?: T,
-): BoundFunctions<T>
+export function getQueriesForElement<
+  QueriesToBind extends Queries = typeof queries,
+  // Extra type parameter required for reassignment.
+  T extends QueriesToBind = QueriesToBind,
+>(element: HTMLElement, queriesToBind?: T): BoundFunctions<T>