Merge pull request #1 from kschow/support-unenclosed-inner-text-for-d…

…etails-elements-in-toBeVisible-main-rebased

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

.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:/yannbf",
+ "contributions": [
+ "code"
+ ]
+ },
+ {
+ "login": "IanVS",
+ "name": "Ian VanSchooten",
+ "avatar_url": "https://avatars.githubusercontent.com/u/4616705?v=4",
+ "profile": "https:/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:/ashleyryan",
+ "contributions": [
+ "code",
+ "ideas"
+ ]
  }
  ],
  "repoHost": "https:",

.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:/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:/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:/testing-library/jest-dom/commits?author=yannbf" title="Code">💻</a></td>
+ <td align="center"><a href="https:/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:/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:/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:/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:/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:/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]