From 8162115445bc1adaa2740859542a78b18ec3e660 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9mie=20Astori?= <jeremie@astori.fr>
Date: Thu, 3 Feb 2022 01:44:34 +0100
Subject: [PATCH] fix: add custom element support to `toBeDisabled` (#368)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

Co-authored-by: Ernesto García <gnapse@gmail.com>
---
 README.md                       |  3 ++-
 src/__tests__/to-be-disabled.js | 42 +++++++++++++++++++++++++++++++++
 src/to-be-disabled.js           | 11 ++++++++-
 3 files changed, 54 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 5e54ad3c..f3882a31 100644
--- a/README.md
+++ b/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`
diff --git a/src/__tests__/to-be-disabled.js b/src/__tests__/to-be-disabled.js
index db0cde56..fcbd9ce4 100644
--- a/src/__tests__/to-be-disabled.js
+++ b/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')
+})
diff --git a/src/to-be-disabled.js b/src/to-be-disabled.js
index 9efe6f98..484437ad 100644
--- a/src/to-be-disabled.js
+++ b/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) {