diff --git a/README.md b/README.md index e69ece0f..85a2d613 100644 --- a/README.md +++ b/README.md @@ -162,7 +162,8 @@ a `disabled` attribute. According to the specification, the following elements can be [actually 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. #### Examples 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) {