Merge pull request #1 from kschow/support-unenclosed-inner-text-for-details-elements-in-toBeVisible-main-rebased

Support unenclosed inner text for details elements in to be visible main rebased

Author: feedmypixel

.all-contributorsrc

@@ -641,6 +641,62 @@
       "contributions": [
         "doc"
       ]
+    },
+    {
+      "login": "MatanBobi",
+      "name": "Matan Borenkraout",
+      "avatar_url": "https://avatars.githubusercontent.com/u/12711091?v=4",
+      "profile": "https://matan.io",
+      "contributions": [
+        "platform"
+      ]
+    },
+    {
+      "login": "yannbf",
+      "name": "Yann Braga",
+      "avatar_url": "https://avatars.githubusercontent.com/u/1671563?v=4",
+      "profile": "https://github.com/yannbf",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "IanVS",
+      "name": "Ian VanSchooten",
+      "avatar_url": "https://avatars.githubusercontent.com/u/4616705?v=4",
+      "profile": "https://github.com/IanVS",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "cbroeren",
+      "name": "Chantal Broeren",
+      "avatar_url": "https://avatars.githubusercontent.com/u/7499806?v=4",
+      "profile": "http://chantalbroeren.nl",
+      "contributions": [
+        "doc"
+      ]
+    },
+    {
+      "login": "astorije",
+      "name": "Jérémie Astori",
+      "avatar_url": "https://avatars.githubusercontent.com/u/113730?v=4",
+      "profile": "https://jeremie.astori.fr",
+      "contributions": [
+        "code",
+        "ideas"
+      ]
+    },
+    {
+      "login": "ashleyryan",
+      "name": "Ashley Ryan",
+      "avatar_url": "https://avatars.githubusercontent.com/u/9469374?v=4",
+      "profile": "https://github.com/ashleyryan",
+      "contributions": [
+        "code",
+        "ideas"
+      ]
     }
   ],
   "repoHost": "https://github.com",

.npmrc

@@ -1,2 +1,2 @@
-registry=http://registry.npmjs.org/
+registry=https://registry.npmjs.org/
 package-lock=false

README.md

@@ -159,7 +159,8 @@ toBeDisabled()
 This allows you to check whether an element is disabled from the user's
 perspective. According to the specification, the following elements can be
 [disabled](https://html.spec.whatwg.org/multipage/semantics-other.html#disabled-elements):
-`button`, `input`, `select`, `textarea`, `optgroup`, `option`, `fieldset`.
+`button`, `input`, `select`, `textarea`, `optgroup`, `option`, `fieldset`, and
+custom elements.
 
 This custom matcher considers an element as disabled if the element is among the
 types of elements that can be disabled (listed above), and the `disabled`
@@ -899,7 +900,7 @@ const selectInput = getByTestId('select-number')
 expect(textInput).toHaveValue('text')
 expect(numberInput).toHaveValue(5)
 expect(emptyInput).not.toHaveValue()
-expect(selectInput).not.toHaveValue(['second', 'third'])
+expect(selectInput).toHaveValue(['second', 'third'])
 ```
 
 <hr />
@@ -1359,6 +1360,12 @@ Thanks goes to these people ([emoji key][emojis]):
   </tr>
   <tr>
     <td align="center"><a href="http://tu4mo.com"><img src="https://avatars.githubusercontent.com/u/16735302?v=4?s=100" width="100px;" alt=""/><br /><sub><b>tu4mo</b></sub></a><br /><a href="https://github.com/testing-library/jest-dom/commits?author=tu4mo" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://matan.io"><img src="https://avatars.githubusercontent.com/u/12711091?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Matan Borenkraout</b></sub></a><br /><a href="#platform-MatanBobi" title="Packaging/porting to new platform">📦</a></td>
+    <td align="center"><a href="https://github.com/yannbf"><img src="https://avatars.githubusercontent.com/u/1671563?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Yann Braga</b></sub></a><br /><a href="https://github.com/testing-library/jest-dom/commits?author=yannbf" title="Code">💻</a></td>
+    <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/jest-dom/commits?author=IanVS" title="Code">💻</a></td>
+    <td align="center"><a href="http://chantalbroeren.nl"><img src="https://avatars.githubusercontent.com/u/7499806?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Chantal Broeren</b></sub></a><br /><a href="https://github.com/testing-library/jest-dom/commits?author=cbroeren" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://jeremie.astori.fr"><img src="https://avatars.githubusercontent.com/u/113730?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Jérémie Astori</b></sub></a><br /><a href="https://github.com/testing-library/jest-dom/commits?author=astorije" title="Code">💻</a> <a href="#ideas-astorije" title="Ideas, Planning, & Feedback">🤔</a></td>
+    <td align="center"><a href="https://github.com/ashleyryan"><img src="https://avatars.githubusercontent.com/u/9469374?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Ashley Ryan</b></sub></a><br /><a href="https://github.com/testing-library/jest-dom/commits?author=ashleyryan" title="Code">💻</a> <a href="#ideas-ashleyryan" title="Ideas, Planning, & Feedback">🤔</a></td>
   </tr>
 </table>
 

package.json

@@ -33,7 +33,7 @@
   "dependencies": {
     "@babel/runtime": "^7.9.2",
     "@types/testing-library__jest-dom": "^5.9.1",
-    "aria-query": "^4.2.2",
+    "aria-query": "^5.0.0",
     "chalk": "^3.0.0",
     "css": "^3.0.0",
     "css.escape": "^1.5.1",

src/__tests__/to-be-disabled.js

@@ -1,5 +1,13 @@
+import document from './helpers/document'
 import {render} from './helpers/test-utils'
 
+const window = document.defaultView
+
+window.customElements.define(
+  'custom-element',
+  class extends window.HTMLElement {},
+)
+
 test('.toBeDisabled', () => {
   const {queryByTestId} = render(`
     <div>
@@ -109,6 +117,23 @@ test('.toBeDisabled fieldset>legend', () => {
   expect(queryByTestId('outer-fieldset-element')).toBeDisabled()
 })
 
+test('.toBeDisabled custom element', () => {
+  const {queryByTestId} = render(`
+    <custom-element data-testid="disabled-custom-element" disabled=""></custom-element>
+    <custom-element data-testid="enabled-custom-element"></custom-element>
+  `)
+
+  expect(queryByTestId('disabled-custom-element')).toBeDisabled()
+  expect(() => {
+    expect(queryByTestId('disabled-custom-element')).not.toBeDisabled()
+  }).toThrowError('element is disabled')
+
+  expect(queryByTestId('enabled-custom-element')).not.toBeDisabled()
+  expect(() => {
+    expect(queryByTestId('enabled-custom-element')).toBeDisabled()
+  }).toThrowError('element is not disabled')
+})
+
 test('.toBeEnabled', () => {
   const {queryByTestId} = render(`
     <div>
@@ -241,3 +266,20 @@ test('.toBeEnabled fieldset>legend', () => {
     expect(queryByTestId('outer-fieldset-element')).toBeEnabled()
   }).toThrowError()
 })
+
+test('.toBeEnabled custom element', () => {
+  const {queryByTestId} = render(`
+    <custom-element data-testid="disabled-custom-element" disabled=""></custom-element>
+    <custom-element data-testid="enabled-custom-element"></custom-element>
+  `)
+
+  expect(queryByTestId('disabled-custom-element')).not.toBeEnabled()
+  expect(() => {
+    expect(queryByTestId('disabled-custom-element')).toBeEnabled()
+  }).toThrowError('element is not enabled')
+
+  expect(queryByTestId('enabled-custom-element')).toBeEnabled()
+  expect(() => {
+    expect(queryByTestId('enabled-custom-element')).not.toBeEnabled()
+  }).toThrowError('element is enabled')
+})

src/to-be-checked.js

@@ -57,7 +57,7 @@ function supportedRolesSentence() {
 }
 
 function supportedRoles() {
-  return Array.from(roles.keys()).filter(roleSupportsChecked)
+  return roles.keys().filter(roleSupportsChecked)
 }
 
 function roleSupportsChecked(role) {

src/to-be-disabled.js

@@ -36,8 +36,17 @@ function isElementDisabledByParent(element, parent) {
   )
 }
 
+function isCustomElement(tag) {
+  return tag.includes('-')
+}
+
+/*
+ * Only certain form elements and custom elements can actually be disabled:
+ * https://html.spec.whatwg.org/multipage/semantics-other.html#disabled-elements
+ */
 function canElementBeDisabled(element) {
-  return FORM_TAGS.includes(getTag(element))
+  const tag = getTag(element)
+  return FORM_TAGS.includes(tag) || isCustomElement(tag)
 }
 
 function isElementDisabled(element) {

src/to-have-class.js

@@ -42,6 +42,11 @@ export function toHaveClass(htmlElement, ...params) {
         const to = this.isNot ? 'not to' : 'to'
         return getMessage(
           this,
+          this.utils.matcherHint(
+            `${this.isNot ? '.not' : ''}.toHaveClass`,
+            'element',
+            this.utils.printExpected(expected.join(' ')),
+          ),
           `Expected the element ${to} have EXACTLY defined classes`,
           expected.join(' '),
           'Received',

src/to-have-description.js

@@ -3,8 +3,8 @@ import {checkHtmlElement, getMessage, normalize, deprecate} from './utils'
 // See algoritm: https://www.w3.org/TR/accname-1.1/#mapping_additional_nd_description
 export function toHaveDescription(htmlElement, checkWith) {
   deprecate(
-    'toBeInTheDOM',
-    'Please use toBeInTheDocument for searching the entire document and toContainElement for searching a specific container.',
+    'toHaveDescription',
+    'Please use toHaveAccessibleDescription.',
   )
 
   checkHtmlElement(htmlElement, toHaveDescription, this)

src/to-have-focus.js

@@ -13,10 +13,19 @@ export function toHaveFocus(element) {
           '',
         ),
         '',
-        'Expected element with focus:',
-        `  ${this.utils.printExpected(element)}`,
-        'Received element with focus:',
-        `  ${this.utils.printReceived(element.ownerDocument.activeElement)}`,
+        ...(this.isNot
+          ? [
+              'Received element is focused:',
+              `  ${this.utils.printReceived(element)}`,
+            ]
+          : [
+              'Expected element with focus:',
+              `  ${this.utils.printExpected(element)}`,
+              'Received element with focus:',
+              `  ${this.utils.printReceived(
+                element.ownerDocument.activeElement,
+              )}`,
+            ]),
       ].join('\n')
     },
   }

src/utils.js

@@ -1,5 +1,5 @@
 import redent from 'redent'
-import {parse} from 'css'
+import cssParse from 'css/lib/parse'
 import isEqual from 'lodash/isEqual'
 
 class GenericTypeError extends Error {
@@ -100,7 +100,7 @@ class InvalidCSSError extends Error {
 }
 
 function parseCSS(css, ...args) {
-  const ast = parse(`selector { ${css} }`, {silent: true}).stylesheet
+  const ast = cssParse(`selector { ${css} }`, {silent: true}).stylesheet
 
   if (ast.parsingErrors && ast.parsingErrors.length > 0) {
     const {reason, line} = ast.parsingErrors[0]