Merge branch 'main' into fix-get-element-error

Author: eps1lon

.all-contributorsrc

@@ -1535,6 +1535,33 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "dolevoper",
+      "name": "Omer Dolev",
+      "avatar_url": "https://avatars.githubusercontent.com/u/53278705?v=4",
+      "profile": "https://github.com/dolevoper",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "Lirlev48",
+      "name": "Lirlev48",
+      "avatar_url": "https://avatars.githubusercontent.com/u/58209233?v=4",
+      "profile": "https://github.com/Lirlev48",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "kalmi",
+      "name": "Tarnay Kálmán",
+      "avatar_url": "https://avatars.githubusercontent.com/u/54426?v=4",
+      "profile": "https://github.com/kalmi",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "repoHost": "https://github.com"

README.md

@@ -333,6 +333,9 @@ Thanks goes to these people ([emoji key][emojis]):
     <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>
     <td align="center"><a href="https://www.robin-drexler.com/"><img src="https://avatars.githubusercontent.com/u/474248?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Robin Drexler</b></sub></a><br /><a href="https://github.com/testing-library/dom-testing-library/commits?author=robin-drexler" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/dolevoper"><img src="https://avatars.githubusercontent.com/u/53278705?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Omer Dolev</b></sub></a><br /><a href="https://github.com/testing-library/dom-testing-library/commits?author=dolevoper" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/Lirlev48"><img src="https://avatars.githubusercontent.com/u/58209233?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Lirlev48</b></sub></a><br /><a href="https://github.com/testing-library/dom-testing-library/commits?author=Lirlev48" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/kalmi"><img src="https://avatars.githubusercontent.com/u/54426?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Tarnay Kálmán</b></sub></a><br /><a href="https://github.com/testing-library/dom-testing-library/commits?author=kalmi" title="Code">💻</a></td>
   </tr>
 </table>
 

src/__tests__/events.js

@@ -71,6 +71,16 @@ const eventTypes = [
     events: ['scroll'],
     elementType: 'div',
   },
+  {
+    type: '',
+    events: ['load', 'error'],
+    elementType: 'img',
+  },
+  {
+    type: '',
+    events: ['load', 'error'],
+    elementType: 'script',
+  },
   {
     type: 'Wheel',
     events: ['wheel'],
@@ -105,11 +115,6 @@ const eventTypes = [
     ],
     elementType: 'video',
   },
-  {
-    type: 'Image',
-    events: ['load', 'error'],
-    elementType: 'img',
-  },
   {
     type: 'Animation',
     events: ['animationStart', 'animationEnd', 'animationIteration'],

src/__tests__/role.js

@@ -363,6 +363,14 @@ test('has no useful error message in findBy', async () => {
   )
 })
 
+test('findBy error message for missing elements contains a name hint', async () => {
+  const {findByRole} = render(`<button>Click me</button>`)
+
+  await expect(findByRole('button', {name: 'Submit'})).rejects.toThrow(
+    'Unable to find role="button" and name "Submit"',
+  )
+})
+
 test('explicit role is most specific', () => {
   const {getByRole} = renderIntoDocument(
     `<button role="tab" aria-label="my-tab" />`,

src/__tests__/screen.js

@@ -64,6 +64,15 @@ test('logs Playground URL that are passed as element', () => {
   `)
 })
 
+test('returns Playground URL that are passed as element', () => {
+  const playGroundUrl = screen.logTestingPlaygroundURL(
+    render(`<h1>Sign <em>up</em></h1>`).container,
+  )
+  expect(playGroundUrl).toMatchInlineSnapshot(
+    'https://testing-playground.com/#markup=DwCwjAfAyglg5gOwATAKYFsIFcAOwD0GEB4EQA',
+  )
+})
+
 test('exposes debug method', () => {
   renderIntoDocument(
     `<button>test</button><span>multi-test</span><div>multi-test</div>`,

src/event-map.js

@@ -274,9 +274,13 @@ export const eventMap = {
     EventType: 'Event',
     defaultInit: {bubbles: false, cancelable: false},
   },
-  // Image Events
+  // Events
   load: {
-    EventType: 'UIEvent',
+    // TODO: load events can be UIEvent or Event depending on what generated them
+    // This is were this abstraction breaks down.
+    // But the common targets are <img />, <script /> and window.
+    // Neither of these targets receive a UIEvent
+    EventType: 'Event',
     defaultInit: {bubbles: false, cancelable: false},
   },
   error: {

src/queries/role.js

@@ -220,7 +220,7 @@ function makeRoleSelector(role, exact, customNormalizer) {
     .join(',')
 }
 
-const getMultipleError = (c, role, {name} = {}) => {
+const getNameHint = name => {
   let nameHint = ''
   if (name === undefined) {
     nameHint = ''
@@ -230,7 +230,11 @@ const getMultipleError = (c, role, {name} = {}) => {
     nameHint = ` and name \`${name}\``
   }
 
-  return `Found multiple elements with the role "${role}"${nameHint}`
+  return nameHint
+}
+
+const getMultipleError = (c, role, {name} = {}) => {
+  return `Found multiple elements with the role "${role}"${getNameHint(name)}`
 }
 
 const getMissingError = (
@@ -239,7 +243,7 @@ const getMissingError = (
   {hidden = getConfig().defaultHidden, name, description} = {},
 ) => {
   if (getConfig()._disableExpensiveErrorDiagnostics) {
-    return `Unable to find role="${role}"`
+    return `Unable to find role="${role}"${getNameHint(name)}`
   }
 
   let roles = ''

src/role-helpers.js

@@ -105,27 +105,32 @@ function buildElementRoleList(elementRolesMap) {
   }
 
   function match(element) {
+    let {attributes = []} = element
+
+    // https://github.com/testing-library/dom-testing-library/issues/814
+    const typeTextIndex = attributes.findIndex(
+      attribute =>
+        attribute.value &&
+        attribute.name === 'type' &&
+        attribute.value === 'text',
+    )
+
+    if (typeTextIndex >= 0) {
+      // not using splice to not mutate the attributes array
+      attributes = [
+        ...attributes.slice(0, typeTextIndex),
+        ...attributes.slice(typeTextIndex + 1),
+      ]
+    }
+
+    const selector = makeElementSelector({...element, attributes})
+
     return node => {
-      let {attributes = []} = element
-      // https://github.com/testing-library/dom-testing-library/issues/814
-      const typeTextIndex = attributes.findIndex(
-        attribute =>
-          attribute.value &&
-          attribute.name === 'type' &&
-          attribute.value === 'text',
-      )
-      if (typeTextIndex >= 0) {
-        // not using splice to not mutate the attributes array
-        attributes = [
-          ...attributes.slice(0, typeTextIndex),
-          ...attributes.slice(typeTextIndex + 1),
-        ]
-        if (node.type !== 'text') {
-          return false
-        }
+      if (typeTextIndex >= 0 && node.type !== 'text') {
+        return false
       }
 
-      return node.matches(makeElementSelector({...element, attributes}))
+      return node.matches(selector)
     }
   }
 

src/screen.ts

@@ -1,4 +1,6 @@
-import {compressToEncodedURIComponent} from 'lz-string'
+// WARNING: `lz-string` only has a default export but statically we assume named exports are allowd
+// TODO: Statically verify we don't rely on NodeJS implicit named imports.
+import lzString from 'lz-string'
 import type {OptionsReceived} from 'pretty-format'
 import {getQueriesForElement} from './get-queries-for-element'
 import {getDocument} from './helpers'
@@ -12,7 +14,7 @@ function unindent(string: string) {
 }
 
 function encode(value: string) {
-  return compressToEncodedURIComponent(unindent(value))
+  return lzString.compressToEncodedURIComponent(unindent(value))
 }
 
 function getPlaygroundUrl(markup: string) {
@@ -39,9 +41,9 @@ const logTestingPlaygroundURL = (element = getDocument().body) => {
     console.log(`The provided element doesn't have any children.`)
     return
   }
-  console.log(
-    `Open this URL in your browser\n\n${getPlaygroundUrl(element.innerHTML)}`,
-  )
+  const playgroundUrl = getPlaygroundUrl(element.innerHTML)
+  console.log(`Open this URL in your browser\n\n${playgroundUrl}`)
+  return playgroundUrl
 }
 
 const initialValue = {debug, logTestingPlaygroundURL}

types/screen.d.ts

@@ -13,10 +13,10 @@ export type Screen<Q extends Queries = typeof queries> = BoundFunctions<Q> & {
     options?: OptionsReceived,
   ) => void
   /**
-   * Convenience function for `Testing Playground` which logs URL that
+   * Convenience function for `Testing Playground` which logs and returns the URL that
    * can be opened in a browser
    */
-  logTestingPlaygroundURL: (element?: Element | HTMLDocument) => void
+  logTestingPlaygroundURL: (element?: Element | HTMLDocument) => string
 }
 
 export const screen: Screen