[RNMobile] Spacer block: Fix import of MIN_SPACER_SIZE constant (#4…

…0053) * Fix import of MIN_SPACER_SIZE constant * Add tests for Spacer block
WordPress · Apr 7, 2022 · 9b95aca · 9b95aca
1 parent 51008e8
commit 9b95aca
Show file tree

Hide file tree

Showing 3 changed files with 212 additions and 1 deletion.
diff --git a/packages/block-library/src/spacer/controls.native.js b/packages/block-library/src/spacer/controls.native.js
@@ -14,7 +14,7 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { MIN_SPACER_SIZE } from './edit';
+import { MIN_SPACER_SIZE } from './edit.js';
 import styles from './style.scss';
 
 const DEFAULT_VALUES = { px: 100, em: 10, rem: 10, vw: 10, vh: 25 };

diff --git a/packages/block-library/src/spacer/test/__snapshots__/index.native.js.snap b/packages/block-library/src/spacer/test/__snapshots__/index.native.js.snap
@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Spacer block decrements height 1`] = `
+"<!-- wp:spacer {\\"height\\":\\"99px\\"} -->
+<div style=\\"height:99px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<!-- /wp:spacer -->"
+`;
+
+exports[`Spacer block increments height 1`] = `
+"<!-- wp:spacer {\\"height\\":\\"101px\\"} -->
+<div style=\\"height:101px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<!-- /wp:spacer -->"
+`;
+
+exports[`Spacer block inserts block 1`] = `
+"<!-- wp:spacer -->
+<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<!-- /wp:spacer -->"
+`;
+
+exports[`Spacer block updates height to 25vh 1`] = `
+"<!-- wp:spacer {\\"height\\":\\"25vh\\"} -->
+<div style=\\"height:25vh\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<!-- /wp:spacer -->"
+`;
+
+exports[`Spacer block updates height to 50px 1`] = `
+"<!-- wp:spacer {\\"height\\":\\"50px\\"} -->
+<div style=\\"height:50px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<!-- /wp:spacer -->"
+`;
diff --git a/packages/block-library/src/spacer/test/index.native.js b/packages/block-library/src/spacer/test/index.native.js
@@ -0,0 +1,180 @@
+/**
+ * External dependencies
+ */
+import {
+	fireEvent,
+	getEditorHtml,
+	initializeEditor,
+	waitFor,
+} from 'test/helpers';
+
+/**
+ * WordPress dependencies
+ */
+import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
+import { registerCoreBlocks } from '@wordpress/block-library';
+
+beforeAll( () => {
+	// Register all core blocks
+	registerCoreBlocks();
+} );
+
+afterAll( () => {
+	// Clean up registered blocks
+	getBlockTypes().forEach( ( block ) => {
+		unregisterBlockType( block.name );
+	} );
+} );
+
+describe( 'Spacer block', () => {
+	it( 'inserts block', async () => {
+		const {
+			getByA11yLabel,
+			getByTestId,
+			getByText,
+		} = await initializeEditor();
+
+		fireEvent.press( getByA11yLabel( 'Add block' ) );
+
+		const blockList = getByTestId( 'InserterUI-Blocks' );
+		// onScroll event used to force the FlatList to render all items
+		fireEvent.scroll( blockList, {
+			nativeEvent: {
+				contentOffset: { y: 0, x: 0 },
+				contentSize: { width: 100, height: 100 },
+				layoutMeasurement: { width: 100, height: 100 },
+			},
+		} );
+
+		fireEvent.press( await waitFor( () => getByText( 'Spacer' ) ) );
+
+		expect( getByA11yLabel( /Spacer Block\. Row 1/ ) ).toBeVisible();
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'updates height to 50px', async () => {
+		const initialHtml = `<!-- wp:spacer -->
+		<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
+		<!-- /wp:spacer -->`;
+		const {
+			getByA11yLabel,
+			getByDisplayValue,
+			getByTestId,
+			getByText,
+		} = await initializeEditor( {
+			initialHtml,
+		} );
+
+		// Select Spacer block
+		const spacerBlock = getByA11yLabel( /Spacer Block\. Row 1/ );
+		fireEvent.press( spacerBlock );
+
+		// Open block settings
+		fireEvent.press( getByA11yLabel( 'Open Settings' ) );
+		await waitFor(
+			() => getByTestId( 'block-settings-modal' ).props.isVisible
+		);
+
+		// Update height attribute
+		fireEvent.press( getByText( '100' ) );
+		const heightTextInput = getByDisplayValue( '100' );
+		fireEvent.changeText( heightTextInput, '50' );
+
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'updates height to 25vh', async () => {
+		const initialHtml = `<!-- wp:spacer -->
+		<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
+		<!-- /wp:spacer -->`;
+		const {
+			getByA11yLabel,
+			getByDisplayValue,
+			getByTestId,
+			getByText,
+		} = await initializeEditor( {
+			initialHtml,
+		} );
+
+		// Select Spacer block
+		const spacerBlock = getByA11yLabel( /Spacer Block\. Row 1/ );
+		fireEvent.press( spacerBlock );
+
+		// Open block settings
+		fireEvent.press( getByA11yLabel( 'Open Settings' ) );
+		await waitFor(
+			() => getByTestId( 'block-settings-modal' ).props.isVisible
+		);
+
+		// Set vh unit
+		fireEvent.press( getByText( 'px' ) );
+		fireEvent.press( getByText( 'Viewport height (vh)' ) );
+
+		// Update height attribute
+		fireEvent.press( getByText( '100' ) );
+		const heightTextInput = getByDisplayValue( '100' );
+		fireEvent.changeText( heightTextInput, '25' );
+
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'increments height', async () => {
+		const initialHtml = `<!-- wp:spacer -->
+		<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
+		<!-- /wp:spacer -->`;
+		const { getByA11yLabel, getByTestId } = await initializeEditor( {
+			initialHtml,
+		} );
+
+		// Select Spacer block
+		const spacerBlock = getByA11yLabel( /Spacer Block\. Row 1/ );
+		fireEvent.press( spacerBlock );
+
+		// Open block settings
+		fireEvent.press( getByA11yLabel( 'Open Settings' ) );
+		await waitFor(
+			() => getByTestId( 'block-settings-modal' ).props.isVisible
+		);
+
+		// Increment height
+		fireEvent(
+			getByA11yLabel( /Height\. Value is 100 Pixels \(px\)/ ),
+			'accessibilityAction',
+			{
+				nativeEvent: { actionName: 'increment' },
+			}
+		);
+
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'decrements height', async () => {
+		const initialHtml = `<!-- wp:spacer -->
+		<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
+		<!-- /wp:spacer -->`;
+		const { getByA11yLabel, getByTestId } = await initializeEditor( {
+			initialHtml,
+		} );
+
+		// Select Spacer block
+		const spacerBlock = getByA11yLabel( /Spacer Block\. Row 1/ );
+		fireEvent.press( spacerBlock );
+
+		// Open block settings
+		fireEvent.press( getByA11yLabel( 'Open Settings' ) );
+		await waitFor(
+			() => getByTestId( 'block-settings-modal' ).props.isVisible
+		);
+
+		// Increment height
+		fireEvent(
+			getByA11yLabel( /Height\. Value is 100 Pixels \(px\)/ ),
+			'accessibilityAction',
+			{
+				nativeEvent: { actionName: 'decrement' },
+			}
+		);
+
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+} );