fix: add custom element support to toBeDisabled (#368)

* fix: add custom element support to `toBeDisabled`
* Custom elements cannot be self-closing

Co-authored-by: Ernesto García <gnapse@gmail.com>

README.md

@@ -160,7 +160,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`

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-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) {