Getroles logroles

package.json

@@ -53,6 +53,7 @@
     "dtslint": "^0.7.7",
     "jest-dom": "^3.4.0",
     "jest-in-case": "^1.0.2",
+    "jest-serializer-ansi": "^1.0.3",
     "jest-watch-select-projects": "^0.1.1",
     "jsdom": "^15.1.1",
     "kcd-scripts": "^1.4.0"

src/__tests__/__snapshots__/role-helpers.js.snap

@@ -0,0 +1,163 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`logRoles logs expected roles for various dom nodes 1`] = `
+"region ------------------------------------
+
+<section
+  data-testid="a-section"
+/>
+
+
+navigation --------------------------------
+
+<nav
+  data-testid="a-nav"
+/>
+
+
+heading -----------------------------------
+
+<h1
+  data-testid="a-h1"
+/>
+
+<h2
+  data-testid="a-h2"
+/>
+
+<h3
+  data-testid="a-h3"
+/>
+
+
+article -----------------------------------
+
+<article
+  data-testid="a-article"
+/>
+
+
+command -----------------------------------
+
+<menuitem
+  data-testid="a-menuitem-1"
+/>
+
+<menuitem
+  data-testid="a-menuitem-2"
+/>
+
+
+menuitem ----------------------------------
+
+<menuitem
+  data-testid="a-menuitem-1"
+/>
+
+<menuitem
+  data-testid="a-menuitem-2"
+/>
+
+
+list --------------------------------------
+
+<ul
+  data-testid="a-list"
+/>
+
+<ul
+  data-testid="b-list"
+/>
+
+
+listitem ----------------------------------
+
+<li
+  data-testid="a-list-item-1"
+/>
+
+<li
+  data-testid="a-list-item-2"
+/>
+
+<li
+  data-testid="b-list-item-1"
+/>
+
+<li
+  data-testid="b-list-item-2"
+/>
+
+
+table -------------------------------------
+
+<table
+  data-testid="a-table"
+/>
+
+
+rowgroup ----------------------------------
+
+<tbody
+  data-testid="a-tbody"
+/>
+
+
+row ---------------------------------------
+
+<tr
+  data-testid="a-row"
+/>
+
+
+cell --------------------------------------
+
+<td
+  data-testid="a-cell-1"
+/>
+
+<td
+  data-testid="a-cell-2"
+/>
+
+<td
+  data-testid="a-cell-3"
+/>
+
+
+form --------------------------------------
+
+<form
+  data-testid="a-form"
+/>
+
+
+radio -------------------------------------
+
+<input
+  data-testid="a-radio-1"
+  type="radio"
+/>
+
+<input
+  data-testid="a-radio-2"
+  type="radio"
+/>
+
+
+textbox -----------------------------------
+
+<input
+  data-testid="a-input-1"
+  type="text"
+/>
+
+<input
+  data-testid="a-input-2"
+  type="text"
+/>
+
+<textarea
+  data-testid="a-textarea"
+/>"
+`;

src/__tests__/element-queries.js

@@ -1,6 +1,8 @@
+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
 })
@@ -37,60 +39,60 @@ test('get throws a useful error message', () => {
     .toThrowErrorMatchingInlineSnapshot(`
 "Unable to find a label with the text of: LucyRicardo
 
-<div>
-  <div />
-</div>"
+<div>
+  <div />
+</div>"
 `)
   expect(() => getByPlaceholderText('LucyRicardo'))
     .toThrowErrorMatchingInlineSnapshot(`
 "Unable to find an element with the placeholder text of: LucyRicardo
 
-<div>
-  <div />
-</div>"
+<div>
+  <div />
+</div>"
 `)
   expect(() => getByText('LucyRicardo')).toThrowErrorMatchingInlineSnapshot(`
 "Unable to find an element with the text: LucyRicardo. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.
 
-<div>
-  <div />
-</div>"
+<div>
+  <div />
+</div>"
 `)
   expect(() => getByTestId('LucyRicardo')).toThrowErrorMatchingInlineSnapshot(`
-"Unable to find an element by: [data-testid=\\"LucyRicardo\\"]
+"Unable to find an element by: [data-testid="LucyRicardo"]
 
-<div>
-  <div />
-</div>"
+<div>
+  <div />
+</div>"
 `)
   expect(() => getByAltText('LucyRicardo')).toThrowErrorMatchingInlineSnapshot(`
 "Unable to find an element with the alt text: LucyRicardo
 
-<div>
-  <div />
-</div>"
+<div>
+  <div />
+</div>"
 `)
   expect(() => getByTitle('LucyRicardo')).toThrowErrorMatchingInlineSnapshot(`
 "Unable to find an element with the title: LucyRicardo.
 
-<div>
-  <div />
-</div>"
+<div>
+  <div />
+</div>"
 `)
   expect(() => getByDisplayValue('LucyRicardo'))
     .toThrowErrorMatchingInlineSnapshot(`
 "Unable to find an element with the value: LucyRicardo.
 
-<div>
-  <div />
-</div>"
+<div>
+  <div />
+</div>"
 `)
   expect(() => getByRole('LucyRicardo')).toThrowErrorMatchingInlineSnapshot(`
 "Unable to find an element by [role=LucyRicardo]
 
-<div>
-  <div />
-</div>"
+<div>
+  <div />
+</div>"
 `)
 })
 
@@ -221,25 +223,25 @@ test('label with no form control', () => {
   const {getByLabelText, queryByLabelText} = render(`<label>All alone</label>`)
   expect(queryByLabelText(/alone/)).toBeNull()
   expect(() => getByLabelText(/alone/)).toThrowErrorMatchingInlineSnapshot(`
-"Found a label with the text of: /alone/, however no form control was found associated to that label. Make sure you're using the \\"for\\" attribute or \\"aria-labelledby\\" attribute correctly.
+"Found a label with the text of: /alone/, however no form control was found associated to that label. Make sure you're using the "for" attribute or "aria-labelledby" attribute correctly.
 
-<div>
-  <label>
-    All alone
-  </label>
-</div>"
+<div>
+  <label>
+    All alone
+  </label>
+</div>"
 `)
 })
 
 test('totally empty label', () => {
   const {getByLabelText, queryByLabelText} = render(`<label />`)
   expect(queryByLabelText('')).toBeNull()
   expect(() => getByLabelText('')).toThrowErrorMatchingInlineSnapshot(`
-"Found a label with the text of: , however no form control was found associated to that label. Make sure you're using the \\"for\\" attribute or \\"aria-labelledby\\" attribute correctly.
+"Found a label with the text of: , however no form control was found associated to that label. Make sure you're using the "for" attribute or "aria-labelledby" attribute correctly.
 
-<div>
-  <label />
-</div>"
+<div>
+  <label />
+</div>"
 `)
 })
 

src/__tests__/pretty-dom.js

@@ -1,14 +1,17 @@
+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', () => {
   const {container} = render('<div>Hello World!</div>')
   expect(prettyDOM(container)).toMatchInlineSnapshot(`
-"<div>
-  <div>
-    Hello World!
-  </div>
-</div>"
+"<div>
+  <div>
+    Hello World!
+  </div>
+</div>"
 `)
 })
 
@@ -19,9 +22,9 @@ test('it supports truncating the output length', () => {
 
 test('it supports receiving the document element', () => {
   expect(prettyDOM(document)).toMatchInlineSnapshot(`
-"<html>
-  <head />
-  <body />
-</html>"
+"<html>
+  <head />
+  <body />
+</html>"
 `)
 })