@wordpress/block-editor 15.21.0 → 15.22.0

package/src/components/block-draggable/test/helpers.native.js

@@ -1,182 +0,0 @@
-/**
- * External dependencies
- */
-import {
-	act,
-	advanceAnimationByFrames,
-	fireEvent,
-	initializeEditor,
-	screen,
-	waitForStoreResolvers,
-	within,
-} from 'test/helpers';
-import { fireGestureHandler } from 'react-native-gesture-handler/jest-utils';
-import { State } from 'react-native-gesture-handler';
-
-// Touch event type constants have been extracted from original source code, as they are not exported in the package.
-// Reference: https://github.com/software-mansion/react-native-gesture-handler/blob/90895e5f38616a6be256fceec6c6a391cd9ad7c7/src/TouchEventType.ts
-export const TouchEventType = {
-	UNDETERMINED: 0,
-	TOUCHES_DOWN: 1,
-	TOUCHES_MOVE: 2,
-	TOUCHES_UP: 3,
-	TOUCHES_CANCELLED: 4,
-};
-
-const DEFAULT_TOUCH_EVENTS = [
-	{
-		id: 1,
-		eventType: TouchEventType.TOUCHES_DOWN,
-		x: 0,
-		y: 0,
-	},
-];
-
-/**
- * @typedef  {Object} WPBlockWithLayout
- * @property {string} name          Name of the block (e.g. Paragraph).
- * @property {string} html          HTML content.
- * @property {Object} layout        Layout data.
- * @property {Object} layout.x      X position.
- * @property {Object} layout.y      Y position.
- * @property {Object} layout.width  Width.
- * @property {Object} layout.height Height.
- */
-
-/**
- * Initialize the editor with an array of blocks that include their HTML and layout.
- *
- * @param {WPBlockWithLayout[]} blocks Initial blocks.
- *
- * @return {import('@testing-library/react-native').RenderAPI} The Testing Library screen.
- */
-export const initializeWithBlocksLayouts = async ( blocks ) => {
-	const initialHtml = blocks.map( ( block ) => block.html ).join( '\n' );
-
-	await initializeEditor( { initialHtml } );
-
-	const waitPromises = [];
-	const blockListItems = screen.getAllByTestId( 'block-list-item-cell' );
-	// Check that rendered block list items match expected block count.
-	expect( blockListItems.length ).toBe( blocks.length );
-
-	blocks.forEach( ( block, index ) => {
-		const element = blockListItems[ index ];
-		// "onLayout" event will populate the blocks layouts data.
-		fireEvent( element, 'layout', {
-			nativeEvent: { layout: block.layout },
-		} );
-		if ( block.nestedBlocks ) {
-			// Nested blocks are rendered via the FlatList of the inner block list.
-			// In order to render the items of a FlatList, it's required to trigger the
-			// "onLayout" event. Additionally, the call is wrapped over "waitForStoreResolvers"
-			// because the nested blocks might make API requests (e.g. the Gallery block).
-			waitPromises.push(
-				waitForStoreResolvers( () =>
-					fireEvent(
-						within( element ).getByTestId( 'block-list-wrapper' ),
-						'layout',
-						{
-							nativeEvent: {
-								layout: {
-									width: block.layout.width,
-									height: block.layout.height,
-								},
-							},
-						}
-					)
-				)
-			);
-
-			block.nestedBlocks.forEach( ( nestedBlock, nestedIndex ) => {
-				const nestedA11yLabel = new RegExp(
-					`${ nestedBlock.name } Block\\. Row ${ nestedIndex + 1 }`
-				);
-				const [ nestedElement ] =
-					within( element ).getAllByLabelText( nestedA11yLabel );
-				fireEvent( nestedElement, 'layout', {
-					nativeEvent: { layout: nestedBlock.layout },
-				} );
-			} );
-		}
-	} );
-	await Promise.all( waitPromises );
-
-	return screen;
-};
-
-/**
- * Fires long-press gesture event on a block.
- *
- * @param {ReturnType<import('@testing-library/react-native').RenderAPI['getByTestId']>} block                  Block test instance.
- * @param {string}                                                                       testID                 Id for querying the draggable trigger element.
- * @param {Object}                                                                       [options]              Configuration options for the gesture event.
- * @param {boolean}                                                                      [options.failed]       Determines if the gesture should fail.
- * @param {number}                                                                       [options.triggerIndex] In case there are multiple draggable triggers, this specifies the index to use.
- */
-export const fireLongPress = (
-	block,
-	testID,
-	{ failed = false, triggerIndex } = {}
-) => {
-	const draggableTrigger =
-		typeof triggerIndex !== 'undefined'
-			? within( block ).getAllByTestId( testID )[ triggerIndex ]
-			: within( block ).getByTestId( testID );
-	if ( failed ) {
-		fireGestureHandler( draggableTrigger, [ { state: State.FAILED } ] );
-	} else {
-		fireGestureHandler( draggableTrigger, [
-			{ oldState: State.BEGAN, state: State.ACTIVE },
-			{ state: State.ACTIVE },
-			{ state: State.END },
-		] );
-	}
-	// Advance timers one frame to ensure that shared values
-	// are updated and trigger animation reactions.
-	act( () => advanceAnimationByFrames( 1 ) );
-};
-
-/**
- * Fires pan gesture event on a BlockDraggable component.
- *
- * @param {ReturnType<import('@testing-library/react-native').RenderAPI['getByTestId']>} blockDraggable BlockDraggable test instance.
- * @param {Object}                                                                       [touchEvents]  Array of touch events to dispatch on the pan gesture.
- */
-export const firePanGesture = (
-	blockDraggable,
-	touchEvents = DEFAULT_TOUCH_EVENTS
-) => {
-	const gestureTouchEvents = touchEvents.map(
-		( { eventType, ...touchEvent } ) => ( {
-			allTouches: [ touchEvent ],
-			eventType,
-		} )
-	);
-	fireGestureHandler( blockDraggable, [
-		// TOUCHES_DOWN event is only received on ACTIVE state, so we have to fire it manually.
-		{ oldState: State.BEGAN, state: State.ACTIVE },
-		...gestureTouchEvents,
-		{ state: State.END },
-	] );
-	// Advance timers one frame to ensure that shared values
-	// are updated and trigger animation reactions.
-	act( () => advanceAnimationByFrames( 1 ) );
-};
-
-/**
- * Gets the draggable chip element.
- *
- * @param {import('@testing-library/react-native').RenderAPI} screen The Testing Library screen.
- *
- * @return {ReturnType<import('@testing-library/react-native').RenderAPI['getByTestId']>} Draggable chip test instance.
- */
-export const getDraggableChip = ( { getByTestId } ) => {
-	let draggableChip;
-	try {
-		draggableChip = getByTestId( 'draggable-chip' );
-	} catch {
-		// NOOP.
-	}
-	return draggableChip;
-};

package/src/components/block-draggable/test/index.native.js

@@ -1,419 +0,0 @@
-/**
- * External dependencies
- */
-import {
-	fireEvent,
-	getEditorHtml,
-	within,
-	waitForStoreResolvers,
-	withReanimatedTimer,
-} from 'test/helpers';
-import { getByGestureTestId } from 'react-native-gesture-handler/jest-utils';
-import TextInputState from 'react-native/Libraries/Components/TextInput/TextInputState';
-
-/**
- * WordPress dependencies
- */
-import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
-import { registerCoreBlocks } from '@wordpress/block-library';
-
-/**
- * Internal dependencies
- */
-import {
-	initializeWithBlocksLayouts,
-	fireLongPress,
-	firePanGesture,
-	TouchEventType,
-	getDraggableChip,
-} from './helpers';
-
-beforeAll( () => {
-	// Register all core blocks
-	registerCoreBlocks();
-} );
-
-afterAll( () => {
-	// Clean up registered blocks
-	getBlockTypes().forEach( ( block ) => {
-		unregisterBlockType( block.name );
-	} );
-} );
-
-const TOUCH_EVENT_ID = 1;
-const BLOCKS = [
-	{
-		name: 'Paragraph',
-		html: `
-		<!-- wp:paragraph -->
-		<p>This is a paragraph.</p>
-		<!-- /wp:paragraph -->`,
-		layout: { x: 0, y: 0, width: 100, height: 100 },
-	},
-	{
-		name: 'Image',
-		html: `
-		<!-- wp:image {"sizeSlug":"large"} -->
-		<figure class="wp-block-image size-large"><img src="https://cldup.com/cXyG__fTLN.jpg" alt=""/></figure>
-		<!-- /wp:image -->`,
-		layout: { x: 0, y: 100, width: 100, height: 100 },
-	},
-	{
-		name: 'Spacer',
-		html: `
-		<!-- wp:spacer -->
-		<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
-		<!-- /wp:spacer -->`,
-		layout: { x: 0, y: 200, width: 100, height: 100 },
-	},
-	{
-		name: 'Gallery',
-		html: `
-		<!-- wp:gallery {"linkTo":"none"} -->
-		<figure class="wp-block-gallery has-nested-images columns-default is-cropped"><!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
-		<figure class="wp-block-image size-large"><img src="https://cldup.com/cXyG__fTLN.jpg" alt=""/></figure>
-		<!-- /wp:image -->
-
-		<!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
-		<figure class="wp-block-image size-large"><img src="https://cldup.com/cXyG__fTLN.jpg" alt=""/></figure>
-		<!-- /wp:image --></figure>
-		<!-- /wp:gallery -->`,
-		layout: { x: 0, y: 300, width: 100, height: 100 },
-		nestedBlocks: [
-			{ name: 'Image', layout: { x: 0, y: 300, width: 50, height: 50 } },
-			{ name: 'Image', layout: { x: 50, y: 300, width: 50, height: 50 } },
-		],
-	},
-];
-
-describe( 'BlockDraggable', () => {
-	describe( 'drag mode', () => {
-		describe( 'Text block', () => {
-			it( 'enables drag mode when unselected', async () =>
-				withReanimatedTimer( async () => {
-					const screen = await initializeWithBlocksLayouts( BLOCKS );
-
-					// Start dragging from block's content
-					const [ paragraphBlock ] = screen.getAllByLabelText(
-						/Paragraph Block\. Row 1/
-					);
-					fireLongPress(
-						paragraphBlock,
-						'draggable-trigger-content'
-					);
-					expect( getDraggableChip( screen ) ).toBeVisible();
-
-					// "firePanGesture" finishes the dragging gesture
-					firePanGesture(
-						getByGestureTestId( 'block-draggable-wrapper' )
-					);
-					expect( getDraggableChip( screen ) ).not.toBeDefined();
-				} ) );
-
-			it( 'enables drag mode when selected', async () =>
-				withReanimatedTimer( async () => {
-					const screen = await initializeWithBlocksLayouts( BLOCKS );
-
-					const blockDraggableWrapper = getByGestureTestId(
-						'block-draggable-wrapper'
-					);
-
-					const [ paragraphBlock ] = screen.getAllByLabelText(
-						/Paragraph Block\. Row 1/
-					);
-					fireEvent.press( paragraphBlock );
-
-					// Start dragging from block's content
-					fireLongPress(
-						paragraphBlock,
-						'draggable-trigger-content'
-					);
-					expect( getDraggableChip( screen ) ).toBeVisible();
-					// "firePanGesture" finishes the dragging gesture
-					firePanGesture( blockDraggableWrapper );
-					expect( getDraggableChip( screen ) ).not.toBeDefined();
-				} ) );
-
-			it( 'does not enable drag mode when selected and editing text', async () =>
-				withReanimatedTimer( async () => {
-					const screen = await initializeWithBlocksLayouts( BLOCKS );
-
-					const [ paragraphBlock ] = screen.getAllByLabelText(
-						/Paragraph Block\. Row 1/
-					);
-
-					// Select Paragraph block and start editing text
-					fireEvent.press( paragraphBlock );
-					fireEvent(
-						within( paragraphBlock ).getByPlaceholderText(
-							'Start writing…'
-						),
-						'focus'
-					);
-
-					// Start dragging from block's content
-					fireLongPress(
-						paragraphBlock,
-						'draggable-trigger-content',
-						{ failed: true }
-					);
-					expect( getDraggableChip( screen ) ).not.toBeDefined();
-					// Check that no text input has been unfocused to confirm
-					// that editing text is still enabled.
-					expect(
-						TextInputState.blurTextInput
-					).not.toHaveBeenCalled();
-				} ) );
-
-			it( 'finishes editing text and enables drag mode when long-pressing over a different block', async () =>
-				withReanimatedTimer( async () => {
-					const screen = await initializeWithBlocksLayouts( BLOCKS );
-
-					const [ paragraphBlock ] = screen.getAllByLabelText(
-						/Paragraph Block\. Row 1/
-					);
-					const [ spacerBlock ] =
-						screen.getAllByLabelText( /Spacer Block\. Row 3/ );
-
-					// Select Paragraph block and start editing text
-					fireEvent.press( paragraphBlock );
-					fireEvent(
-						within( paragraphBlock ).getByPlaceholderText(
-							'Start writing…'
-						),
-						'focus'
-					);
-
-					// Start dragging from a different block's content
-					fireLongPress( spacerBlock, 'draggable-trigger-content' );
-					expect( getDraggableChip( screen ) ).toBeVisible();
-					// Check that any text input has been unfocused to confirm
-					// that editing text finished.
-					expect( TextInputState.blurTextInput ).toHaveBeenCalled();
-				} ) );
-		} );
-
-		describe( 'Media block', () => {
-			it( 'enables drag mode when unselected', async () =>
-				withReanimatedTimer( async () => {
-					const screen = await initializeWithBlocksLayouts( BLOCKS );
-
-					// We select the first Image block as the Gallery block
-					// also contains Image blocks.
-					const [ imageBlock ] =
-						screen.getAllByLabelText( /Image Block\. Row 2/ );
-					// Start dragging from block's content
-					fireLongPress( imageBlock, 'draggable-trigger-content' );
-					expect( getDraggableChip( screen ) ).toBeVisible();
-
-					// "firePanGesture" finishes the dragging gesture
-					firePanGesture(
-						getByGestureTestId( 'block-draggable-wrapper' )
-					);
-					expect( getDraggableChip( screen ) ).not.toBeDefined();
-				} ) );
-
-			it( 'enables drag mode when selected', async () =>
-				withReanimatedTimer( async () => {
-					const screen = await initializeWithBlocksLayouts( BLOCKS );
-					const blockDraggableWrapper = getByGestureTestId(
-						'block-draggable-wrapper'
-					);
-
-					// We select the first Image block as the Gallery block
-					// also contains Image blocks.
-					const [ imageBlock ] =
-						screen.getAllByLabelText( /Image Block\. Row 2/ );
-					fireEvent.press( imageBlock );
-
-					// Start dragging from block's content
-					fireLongPress( imageBlock, 'draggable-trigger-content' );
-					expect( getDraggableChip( screen ) ).toBeVisible();
-					// "firePanGesture" finishes the dragging gesture
-					firePanGesture( blockDraggableWrapper );
-					expect( getDraggableChip( screen ) ).not.toBeDefined();
-				} ) );
-		} );
-
-		describe( 'Nested block', () => {
-			it( 'enables drag mode when unselected', async () =>
-				withReanimatedTimer( async () => {
-					const screen = await initializeWithBlocksLayouts( BLOCKS );
-
-					// Start dragging from block's content, specifically the first
-					// trigger index, which corresponds to the Gallery block content.
-					const [ galleryBlock ] = screen.getAllByLabelText(
-						/Gallery Block\. Row 4/
-					);
-					fireLongPress( galleryBlock, 'draggable-trigger-content', {
-						triggerIndex: 0,
-					} );
-					expect( getDraggableChip( screen ) ).toBeVisible();
-
-					// "firePanGesture" finishes the dragging gesture
-					firePanGesture(
-						getByGestureTestId( 'block-draggable-wrapper' )
-					);
-					expect( getDraggableChip( screen ) ).not.toBeDefined();
-				} ) );
-
-			it( 'enables drag mode when selected', async () =>
-				withReanimatedTimer( async () => {
-					const screen = await initializeWithBlocksLayouts( BLOCKS );
-					const blockDraggableWrapper = getByGestureTestId(
-						'block-draggable-wrapper'
-					);
-
-					const [ galleryBlock ] = screen.getAllByLabelText(
-						/Gallery Block\. Row 4/
-					);
-					await waitForStoreResolvers( () =>
-						fireEvent.press( galleryBlock )
-					);
-
-					// Start dragging from block's content, specifically the first
-					// trigger index, which corresponds to the Gallery block content.
-					fireLongPress( galleryBlock, 'draggable-trigger-content', {
-						triggerIndex: 0,
-					} );
-					expect( getDraggableChip( screen ) ).toBeVisible();
-					// "firePanGesture" finishes the dragging gesture
-					firePanGesture( blockDraggableWrapper );
-					expect( getDraggableChip( screen ) ).not.toBeDefined();
-				} ) );
-
-			it( 'enables drag mode when nested block is selected', async () =>
-				withReanimatedTimer( async () => {
-					const screen = await initializeWithBlocksLayouts( BLOCKS );
-					const blockDraggableWrapper = getByGestureTestId(
-						'block-draggable-wrapper'
-					);
-
-					const [ galleryBlock ] = screen.getAllByLabelText(
-						/Gallery Block\. Row 4/
-					);
-					const [ galleryItem ] =
-						within( galleryBlock ).getAllByLabelText(
-							/Image Block\. Row 2/
-						);
-					fireEvent.press( galleryBlock );
-					fireEvent.press( galleryItem );
-
-					// Start dragging from nested block's content
-					fireLongPress( galleryItem, 'draggable-trigger-content' );
-					expect( getDraggableChip( screen ) ).toBeVisible();
-					// "firePanGesture" finishes the dragging gesture
-					firePanGesture( blockDraggableWrapper );
-					expect( getDraggableChip( screen ) ).not.toBeDefined();
-				} ) );
-		} );
-
-		describe( 'Other block', () => {
-			it( 'enables drag mode when unselected', async () =>
-				withReanimatedTimer( async () => {
-					const screen = await initializeWithBlocksLayouts( BLOCKS );
-
-					// Start dragging from block's content
-					const [ spacerBlock ] =
-						screen.getAllByLabelText( /Spacer Block\. Row 3/ );
-					fireLongPress( spacerBlock, 'draggable-trigger-content' );
-					expect( getDraggableChip( screen ) ).toBeVisible();
-
-					// "firePanGesture" finishes the dragging gesture
-					firePanGesture(
-						getByGestureTestId( 'block-draggable-wrapper' )
-					);
-					expect( getDraggableChip( screen ) ).not.toBeDefined();
-				} ) );
-
-			it( 'enables drag mode when selected', async () =>
-				withReanimatedTimer( async () => {
-					const screen = await initializeWithBlocksLayouts( BLOCKS );
-					const blockDraggableWrapper = getByGestureTestId(
-						'block-draggable-wrapper'
-					);
-
-					const [ spacerBlock ] =
-						screen.getAllByLabelText( /Spacer Block\. Row 3/ );
-					await waitForStoreResolvers( () =>
-						fireEvent.press( spacerBlock )
-					);
-
-					// Start dragging from block's content
-					fireLongPress( spacerBlock, 'draggable-trigger-content' );
-					expect( getDraggableChip( screen ) ).toBeVisible();
-					// "firePanGesture" finishes the dragging gesture
-					firePanGesture( blockDraggableWrapper );
-					expect( getDraggableChip( screen ) ).not.toBeDefined();
-				} ) );
-		} );
-	} );
-
-	it( 'moves blocks', async () =>
-		withReanimatedTimer( async () => {
-			const screen = await initializeWithBlocksLayouts( BLOCKS );
-			const blockDraggableWrapper = getByGestureTestId(
-				'block-draggable-wrapper'
-			);
-
-			expect( getEditorHtml() ).toMatchSnapshot( 'Initial order' );
-
-			// Move Paragraph block from first to second position
-			const [ paragraphBlock ] = screen.getAllByLabelText(
-				/Paragraph Block\. Row 1/
-			);
-			fireLongPress( paragraphBlock, 'draggable-trigger-content' );
-			firePanGesture( blockDraggableWrapper, [
-				{
-					id: TOUCH_EVENT_ID,
-					eventType: TouchEventType.TOUCHES_DOWN,
-					x: 0,
-					y: 0,
-				},
-				{
-					id: TOUCH_EVENT_ID,
-					eventType: TouchEventType.TOUCHES_MOVE,
-					x: 0,
-					// Dropping position is in the second half of the second block's height.
-					y: 180,
-				},
-			] );
-			// Draggable Pan gesture uses the Gesture state manager to manually
-			// activate the gesture. Since this not available in tests, the library
-			// displays a warning message.
-			expect( console ).toHaveWarnedWith(
-				'[Reanimated] setGestureState() cannot be used with Jest.'
-			);
-			expect( getEditorHtml() ).toMatchSnapshot(
-				'Paragraph block moved from first to second position'
-			);
-
-			// Move Spacer block from third to first position
-			const [ spacerBlock ] =
-				screen.getAllByLabelText( /Spacer Block\. Row 3/ );
-			fireLongPress( spacerBlock, 'draggable-trigger-content' );
-			firePanGesture( blockDraggableWrapper, [
-				{
-					id: TOUCH_EVENT_ID,
-					eventType: TouchEventType.TOUCHES_DOWN,
-					x: 0,
-					y: 250,
-				},
-				{
-					id: TOUCH_EVENT_ID,
-					eventType: TouchEventType.TOUCHES_MOVE,
-					x: 0,
-					y: 0,
-				},
-			] );
-			// Draggable Pan gesture uses the Gesture state manager to manually
-			// activate the gesture. Since this not available in tests, the library
-			// displays a warning message.
-			expect( console ).toHaveWarnedWith(
-				'[Reanimated] setGestureState() cannot be used with Jest.'
-			);
-			expect( getEditorHtml() ).toMatchSnapshot(
-				'Spacer block moved from third to first position'
-			);
-		} ) );
-} );