From 4766b78a834699f246222794ec180d10ce37bf79 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9mie=20Astori?= Date: Fri, 21 May 2021 23:41:45 +0300 Subject: [PATCH 1/2] fix: add custom element support to `toBeDisabled` --- README.md | 6 ++--- src/__tests__/to-be-disabled.js | 42 +++++++++++++++++++++++++++++++++ src/to-be-disabled.js | 11 ++++++++- 3 files changed, 55 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index d6f1f613..4e3aee21 100644 --- a/README.md +++ b/README.md @@ -155,10 +155,10 @@ 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 +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..f7c95029 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(`
@@ -109,6 +117,23 @@ test('.toBeDisabled fieldset>legend', () => { expect(queryByTestId('outer-fieldset-element')).toBeDisabled() }) +test('.toBeDisabled custom element', () => { + const {queryByTestId} = render(` + + + `) + + 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(`
@@ -241,3 +266,20 @@ test('.toBeEnabled fieldset>legend', () => { expect(queryByTestId('outer-fieldset-element')).toBeEnabled() }).toThrowError() }) + +test('.toBeEnabled custom element', () => { + const {queryByTestId} = render(` + + + `) + + 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) { From b08cddb5201d1d0a29554e2a810dd3aa0b3d7188 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9mie=20Astori?= Date: Wed, 2 Feb 2022 23:52:37 +0100 Subject: [PATCH 2/2] Custom elements cannot be self-closing --- src/__tests__/to-be-disabled.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/__tests__/to-be-disabled.js b/src/__tests__/to-be-disabled.js index f7c95029..fcbd9ce4 100644 --- a/src/__tests__/to-be-disabled.js +++ b/src/__tests__/to-be-disabled.js @@ -119,8 +119,8 @@ test('.toBeDisabled fieldset>legend', () => { test('.toBeDisabled custom element', () => { const {queryByTestId} = render(` - - + + `) expect(queryByTestId('disabled-custom-element')).toBeDisabled() @@ -269,8 +269,8 @@ test('.toBeEnabled fieldset>legend', () => { test('.toBeEnabled custom element', () => { const {queryByTestId} = render(` - - + + `) expect(queryByTestId('disabled-custom-element')).not.toBeEnabled()