packages/block-editor/src/utils/test/dom.js - trunk - githubmirror/gutenberg

packages/block-editor/src/utils/test/dom.js
267 строк7 KB
Lena Morita
VisuallyHidden: Recommend @wordpress/ui and migrate usages (#77575)
24 апр 2026, 15:43
24 апр 2026, 15:4350332f5
import { render, screen } from '@testing-library/react';
// eslint-disable-next-line @wordpress/use-recommended-components -- Required for testing
import { VisuallyHidden as WCVisuallyHidden } from '@wordpress/components';
import { VisuallyHidden } from '@wordpress/ui';
import {
	getElementBounds,
	isElementVisible,
	WITH_OVERFLOW_ELEMENT_BLOCKS,
} from '../dom';

function mockVisibleBoundingClientRect( element ) {
	element.getBoundingClientRect = jest.fn().mockReturnValue( {
		left: 0,
		top: 0,
		right: 100,
		bottom: 20,
		width: 100,
		height: 20,
		x: 0,
		y: 0,
	} );
}

describe( 'dom', () => {
	describe( 'isElementVisible', () => {
		it( 'returns false for @wordpress/components VisuallyHidden', () => {
			render(
				<WCVisuallyHidden data-testid="wc-visually-hidden">
					Hidden
				</WCVisuallyHidden>
			);
			const element = screen.getByTestId( 'wc-visually-hidden' );
			mockVisibleBoundingClientRect( element );
			expect( isElementVisible( element ) ).toBe( false );
		} );

		it( 'returns false for @wordpress/ui VisuallyHidden', () => {
			render(
				<VisuallyHidden data-testid="ui-visually-hidden">
					Hidden
				</VisuallyHidden>
			);
			const element = screen.getByTestId( 'ui-visually-hidden' );
			mockVisibleBoundingClientRect( element );
			expect( isElementVisible( element ) ).toBe( false );
		} );
	} );

	describe( 'getElementBounds', () => {
		it( 'should return a DOMRectReadOnly object if the viewport is not available', () => {
			const element = {
				ownerDocument: {
					defaultView: null,
				},
			};
			expect( getElementBounds( element ) ).toEqual(
				new window.DOMRectReadOnly()
			);
		} );
		it( 'should return a DOMRectReadOnly object if the viewport is available', () => {
			const element = {
				ownerDocument: {
					defaultView: {
						getComputedStyle: () => ( {
							display: 'block',
							visibility: 'visible',
							opacity: '1',
						} ),
					},
				},
				getBoundingClientRect: () => ( {
					left: 0,
					top: 0,
					right: 100,
					bottom: 100,
					width: 100,
					height: 100,
				} ),
				getAttribute: ( x ) => x,
			};
			expect( getElementBounds( element ) ).toEqual(
				new window.DOMRectReadOnly( 0, 0, 100, 100 )
			);
		} );
		it( 'should clip left and right values when an element is larger than the viewport width', () => {
			const element = window.document.createElement( 'div' );
			element.getBoundingClientRect = jest.fn().mockReturnValue( {
				left: -10,
				top: 0,
				right: window.innerWidth + 10,
				bottom: 100,
				width: window.innerWidth,
				height: 100,
			} );
			expect( getElementBounds( element ).toJSON() ).toEqual( {
				left: 0, // Reset to min left bound.
				top: 0,
				right: window.innerWidth, // Reset to max right bound.
				bottom: 100,
				width: window.innerWidth,
				height: 100,
				x: 0,
				y: 0,
			} );
		} );
		it( 'should return the parent DOMRectReadOnly object if the parent block type is not supported', () => {
			const element = window.document.createElement( 'div' );
			element.getBoundingClientRect = jest.fn().mockReturnValue( {
				left: 0,
				top: 0,
				right: 100,
				bottom: 100,
				width: 100,
				height: 100,
			} );
			element.setAttribute( 'data-type', 'test' );
			const childElement = window.document.createElement( 'div' );
			childElement.getBoundingClientRect = jest.fn().mockReturnValue( {
				left: 0,
				top: 0,
				right: 333,
				bottom: 333,
				width: 333,
				height: 333,
				x: 0,
				y: 0,
			} );
			element.appendChild( childElement );

			expect( getElementBounds( element ).toJSON() ).toEqual( {
				left: 0,
				top: 0,
				right: 100,
				bottom: 100,
				width: 100,
				height: 100,
				x: 0,
				y: 0,
			} );
		} );
		describe( 'With known block type', () => {
			it( 'should return the child DOMRectReadOnly object if it is visible and a known block type', () => {
				const element = window.document.createElement( 'div' );
				element.getBoundingClientRect = jest.fn().mockReturnValue( {
					left: 0,
					top: 0,
					right: 100,
					bottom: 100,
					width: 100,
					height: 100,
				} );
				element.setAttribute(
					'data-type',
					WITH_OVERFLOW_ELEMENT_BLOCKS[ 0 ]
				);
				const childElement = window.document.createElement( 'div' );
				childElement.getBoundingClientRect = jest
					.fn()
					.mockReturnValue( {
						left: 0,
						top: 0,
						right: 333,
						bottom: 333,
						width: 333,
						height: 333,
						x: 0,
						y: 0,
					} );
				element.appendChild( childElement );

				expect( getElementBounds( element ).toJSON() ).toEqual( {
					left: 0,
					top: 0,
					right: 333,
					bottom: 333,
					width: 333,
					height: 333,
					x: 0,
					y: 0,
				} );
			} );
			it( 'should return the parent DOMRectReadOnly if the child is scrollable', () => {
				const element = window.document.createElement( 'div' );
				element.setAttribute(
					'data-type',
					WITH_OVERFLOW_ELEMENT_BLOCKS[ 0 ]
				);
				element.style.overflowX = 'auto';
				element.style.overflowY = 'auto';
				element.getBoundingClientRect = jest.fn().mockReturnValue( {
					left: 0,
					top: 0,
					right: 100,
					bottom: 100,
					width: 100,
					height: 100,
				} );
				const childElement = window.document.createElement( 'div' );
				childElement.getBoundingClientRect = jest
					.fn()
					.mockReturnValue( {
						left: 0,
						top: 0,
						right: 333,
						bottom: 333,
						width: 333,
						height: 333,
						x: 0,
						y: 0,
					} );
				element.appendChild( childElement );

				expect( getElementBounds( element ).toJSON() ).toEqual( {
					left: 0,
					top: 0,
					right: 100,
					bottom: 100,
					width: 100,
					height: 100,
					x: 0,
					y: 0,
				} );
			} );
			it( 'should return the parent DOMRectReadOnly object if the child element is not visible', () => {
				const element = window.document.createElement( 'div' );
				element.getBoundingClientRect = jest.fn().mockReturnValue( {
					left: 0,
					top: 0,
					right: 100,
					bottom: 100,
					width: 100,
					height: 100,
				} );
				element.setAttribute(
					'data-type',
					WITH_OVERFLOW_ELEMENT_BLOCKS[ 0 ]
				);
				const childElement = window.document.createElement( 'div' );
				childElement.getBoundingClientRect = jest
					.fn()
					.mockReturnValue( {
						left: 0,
						top: 0,
						right: 333,
						bottom: 333,
						width: 333,
						height: 333,
						x: 0,
						y: 0,
					} );
				childElement.style.display = 'none';
				element.appendChild( childElement );

				expect( getElementBounds( element ).toJSON() ).toEqual( {
					left: 0,
					top: 0,
					right: 100,
					bottom: 100,
					width: 100,
					height: 100,
					x: 0,
					y: 0,
				} );
			} );
		} );
	} );
} );