diff --git a/packages/components/src/disabled/test/index.tsx b/packages/components/src/disabled/test/index.tsx index 76996b432c935..cc46e89ec5867 100644 --- a/packages/components/src/disabled/test/index.tsx +++ b/packages/components/src/disabled/test/index.tsx @@ -1,7 +1,7 @@ /** * External dependencies */ -import { render, screen } from '@testing-library/react'; +import { render, screen, waitFor } from '@testing-library/react'; /** * Internal dependencies @@ -24,6 +24,7 @@ jest.mock( '@wordpress/dom', () => { Object.defineProperties( element, { offsetWidth: { get: () => 1, + configurable: true, }, } ); } @@ -38,7 +39,7 @@ jest.mock( '@wordpress/dom', () => { describe( 'Disabled', () => { const Form = () => ( -
+
@@ -108,11 +109,34 @@ describe( 'Disabled', () => { // Ideally, we'd have two more test cases here: // // - it( 'will disable all fields on component render change' ) - // - it( 'will disable all fields on sneaky DOM manipulation' ) // - // Alas, JSDOM does not support MutationObserver: - // - // https://github.com/jsdom/jsdom/issues/639 + it( 'will disable all fields on sneaky DOM manipulation', async () => { + render( + +
+ + ); + + const form = screen.getByTitle( 'form' ); + form.insertAdjacentHTML( + 'beforeend', + '' + ); + form.insertAdjacentHTML( + 'beforeend', + '
' + ); + const sneakyInput = screen.getByTitle( 'sneaky input' ); + const sneakyEditable = screen.getByTitle( 'sneaky editable content' ); + + await waitFor( () => expect( sneakyInput ).toBeDisabled() ); + await waitFor( () => + expect( sneakyEditable ).toHaveAttribute( + 'contenteditable', + 'false' + ) + ); + } ); describe( 'Consumer', () => { function DisabledStatus() {