feat: log available roles when a roles query fails (#321)

Kent C. Dodds · web-flow · commit 8c99171e8bc3 · 2019-07-12T11:54:21.000-06:00
Closes #286
diff --git a/src/__tests__/element-queries.js b/src/__tests__/element-queries.js
@@ -1,8 +1,6 @@
-import jestSerializerAnsi from 'jest-serializer-ansi'
 import {configure} from '../config'
 import {render, renderIntoDocument} from './helpers/test-utils'
 
-expect.addSnapshotSerializer(jestSerializerAnsi)
 beforeEach(() => {
   document.defaultView.Cypress = null
 })
@@ -88,7 +86,9 @@ test('get throws a useful error message', () => {
 </div>"
 `)
   expect(() => getByRole('LucyRicardo')).toThrowErrorMatchingInlineSnapshot(`
-"Unable to find an element by [role=LucyRicardo]
+"Unable to find an element with the role "LucyRicardo"
+
+Here are the available roles:
 
 <div>
   <div />
diff --git a/src/__tests__/pretty-dom.js b/src/__tests__/pretty-dom.js
@@ -1,10 +1,7 @@
-import jestSerializerAnsi from 'jest-serializer-ansi'
 import {prettyDOM} from '../pretty-dom'
 import {render} from './helpers/test-utils'
 
-expect.addSnapshotSerializer(jestSerializerAnsi)
-
-test('it prints out the given DOM element tree', () => {
+test('prints out the given DOM element tree', () => {
   const {container} = render('<div>Hello World!</div>')
   expect(prettyDOM(container)).toMatchInlineSnapshot(`
 "<div>
@@ -15,12 +12,12 @@ test('it prints out the given DOM element tree', () => {
 `)
 })
 
-test('it supports truncating the output length', () => {
+test('supports truncating the output length', () => {
   const {container} = render('<div>Hello World!</div>')
   expect(prettyDOM(container, 5)).toMatch(/\.\.\./)
 })
 
-test('it supports receiving the document element', () => {
+test('supports receiving the document element', () => {
   expect(prettyDOM(document)).toMatchInlineSnapshot(`
 "<html>
   <head />
diff --git a/src/__tests__/role.js b/src/__tests__/role.js
@@ -0,0 +1,22 @@
+import {render} from './helpers/test-utils'
+
+test('logs available roles when it fails', () => {
+  const {getByRole} = render(`<h1>Hi</h1>`)
+  expect(() => getByRole('article')).toThrowErrorMatchingInlineSnapshot(`
+"Unable to find an element with the role "article"
+
+Here are the available roles:
+
+  heading:
+
+  <h1 />
+
+  --------------------------------------------------
+
+<div>
+  <h1>
+    Hi
+  </h1>
+</div>"
+`)
+})
diff --git a/src/queries/role.js b/src/queries/role.js
@@ -1,4 +1,4 @@
-import {getImplicitAriaRoles} from '../role-helpers'
+import {getImplicitAriaRoles, prettyRoles} from '../role-helpers'
 import {buildQueries, fuzzyMatches, makeNormalizer, matches} from './all-utils'
 
 function queryAllByRole(
@@ -24,8 +24,18 @@ function queryAllByRole(
   })
 }
 
-const getMultipleError = (c, id) => `Found multiple elements by [role=${id}]`
-const getMissingError = (c, id) => `Unable to find an element by [role=${id}]`
+const getMultipleError = (c, role) =>
+  `Found multiple elements with the role "${role}"`
+const getMissingError = (container, role) =>
+  `
+Unable to find an element with the role "${role}"
+
+Here are the available roles:
+
+  ${prettyRoles(container)
+    .replace(/\n/g, '\n  ')
+    .replace(/\n\s\s\n/g, '\n\n')}
+`.trim()
 
 const [
   queryByRole,
diff --git a/src/role-helpers.js b/src/role-helpers.js
@@ -73,10 +73,10 @@ function getRoles(container) {
   }, {})
 }
 
-function logRoles(container) {
+function prettyRoles(container) {
   const roles = getRoles(container)
 
-  const rolesStr = Object.entries(roles)
+  return Object.entries(roles)
     .map(([role, elements]) => {
       const delimiterBar = '-'.repeat(50)
       const elementsString = elements
@@ -86,9 +86,11 @@ function logRoles(container) {
       return `${role}:\n\n${elementsString}\n\n${delimiterBar}`
     })
     .join('\n')
+}
 
+function logRoles(container) {
   // eslint-disable-next-line no-console
-  console.log(rolesStr)
+  console.log(prettyRoles(container))
 }
 
-export {getRoles, logRoles, getImplicitAriaRoles}
+export {getRoles, logRoles, getImplicitAriaRoles, prettyRoles}
