Test: Hooks: Add end 2 end test to align hook

test/e2e/specs/__snapshots__/align-hook.test.js.snap

@@ -0,0 +1,43 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Align Hook Works As Expected Block with align array Correctly applies the selected alignment and correctly removes the alignment 1`] = `
+"<!-- wp:test/test-align-array {\\"align\\":\\"center\\"} -->
+<div style=\\"outline:1px solid gray;padding:5px\\" class=\\"wp-block-test-test-align-array aligncenter\\">Test Align Hook</div>
+<!-- /wp:test/test-align-array -->"
+`;
+
+exports[`Align Hook Works As Expected Block with align array Correctly applies the selected alignment and correctly removes the alignment 2`] = `
+"<!-- wp:test/test-align-array -->
+<div style=\\"outline:1px solid gray;padding:5px\\" class=\\"wp-block-test-test-align-array\\">Test Align Hook</div>
+<!-- /wp:test/test-align-array -->"
+`;
+
+exports[`Align Hook Works As Expected Block with align true Correctly applies the selected alignment and correctly removes the alignment 1`] = `
+"<!-- wp:test/test-align-true {\\"align\\":\\"right\\"} -->
+<div style=\\"outline:1px solid gray;padding:5px\\" class=\\"wp-block-test-test-align-true alignright\\">Test Align Hook</div>
+<!-- /wp:test/test-align-true -->"
+`;
+
+exports[`Align Hook Works As Expected Block with align true Correctly applies the selected alignment and correctly removes the alignment 2`] = `
+"<!-- wp:test/test-align-true -->
+<div style=\\"outline:1px solid gray;padding:5px\\" class=\\"wp-block-test-test-align-true\\">Test Align Hook</div>
+<!-- /wp:test/test-align-true -->"
+`;
+
+exports[`Align Hook Works As Expected Block with default align Correctly applies the selected alignment and correctly removes the alignment 1`] = `
+"<!-- wp:test/test-default-align {\\"align\\":\\"center\\"} -->
+<div style=\\"outline:1px solid gray;padding:5px\\" class=\\"wp-block-test-test-default-align aligncenter\\">Test Align Hook</div>
+<!-- /wp:test/test-default-align -->"
+`;
+
+exports[`Align Hook Works As Expected Block with default align Correctly applies the selected alignment and correctly removes the alignment 2`] = `
+"<!-- wp:test/test-default-align {\\"align\\":\\"none\\"} -->
+<div style=\\"outline:1px solid gray;padding:5px\\" class=\\"wp-block-test-test-default-align\\">Test Align Hook</div>
+<!-- /wp:test/test-default-align -->"
+`;
+
+exports[`Align Hook Works As Expected Block with no alignment set Does not save any alignment related attribute or class 1`] = `
+"<!-- wp:test/test-no-alignment-set -->
+<div style=\\"outline:1px solid gray;padding:5px\\" class=\\"wp-block-test-test-no-alignment-set\\">Test Align Hook</div>
+<!-- /wp:test/test-no-alignment-set -->"
+`;

test/e2e/specs/align-hook.test.js

@@ -0,0 +1,186 @@
+/**
+ * Internal dependencies
+ */
+import {
+	newPost,
+	insertBlock,
+	getEditedPostContent,
+	setCodeEditorContent,
+	switchToEditor,
+	getAllBlocks,
+	selectBlockByClientId,
+} from '../support/utils';
+import { activatePlugin, deactivatePlugin } from '../support/plugins';
+
+describe( 'Align Hook Works As Expected', () => {
+	beforeAll( async () => {
+		await activatePlugin( 'gutenberg-test-align-hook' );
+	} );
+
+	beforeEach( async () => {
+		await newPost();
+	} );
+
+	afterAll( async () => {
+		await deactivatePlugin( 'gutenberg-test-align-hook' );
+	} );
+
+	const getAlignmentToolbarLabels = async () => {
+		const buttonLabels = await page.evaluate( () => {
+			const buttons = [];
+			document.querySelectorAll( '.editor-block-toolbar button[aria-label^="Align"]' ).forEach(
+				( button ) => {
+					buttons.push( button.getAttribute( 'aria-label' ) );
+				}
+			);
+			return buttons;
+		} );
+		return buttonLabels;
+	};
+
+	const showsTheExpectedButtons = ( blockName, buttonLabels ) => {
+		it( 'Shows the expected buttons on the alignment toolbar', async () => {
+			await insertBlock( blockName );
+			expect( await getAlignmentToolbarLabels() ).toEqual( buttonLabels );
+		} );
+	};
+
+	const doesNotApplyAlignmentByDefault = ( blockName ) => {
+		it( 'Does not apply any alignment by default', async () => {
+			await insertBlock( blockName );
+			// verify no alignment button is in pressed state
+			const pressedButtons = await page.$$( '.editor-block-toolbar button[aria-label^="Align"][aria-pressed="true"]' );
+			expect( pressedButtons ).toHaveLength( 0 );
+		} );
+	};
+
+	const verifyMarkupIsValid = async ( htmlMarkup ) => {
+		await switchToEditor( 'Code' );
+		await setCodeEditorContent( '' );
+		await switchToEditor( 'Visual' );
+		await switchToEditor( 'Code' );
+		await setCodeEditorContent( htmlMarkup );
+		await switchToEditor( 'Visual' );
+		const blocks = await getAllBlocks();
+		expect( blocks ).toHaveLength( 1 );
+		expect( blocks[ 0 ].isValid ).toBeTruthy();
+	};
+
+	const correctlyAppliesAndRemovesAlignment = ( blockName, alignment ) => {
+		it( 'Correctly applies the selected alignment and correctly removes the alignment', async () => {
+			const BUTTON_SELECTOR = `.editor-block-toolbar button[aria-label="Align ${ alignment }"]`;
+			const BUTTON_PRESSED_SELECTOR = `${ BUTTON_SELECTOR }[aria-pressed="true"]`;
+			// set the specified alignment.
+			await insertBlock( blockName );
+			await page.click( BUTTON_SELECTOR );
+
+			// verify the button of the specified alignment is pressed.
+			let pressedButtons = await page.$$( BUTTON_PRESSED_SELECTOR );
+			expect( pressedButtons ).toHaveLength( 1 );
+
+			let htmlMarkup = await getEditedPostContent();
+
+			// verify the markup of the selected alignment was generated.
+			expect( htmlMarkup ).toMatchSnapshot();
+
+			// verify the markup can be correctly parsed
+			await verifyMarkupIsValid( htmlMarkup );
+
+			await selectBlockByClientId( ( await getAllBlocks() )[ 0 ].clientId );
+
+			// remove the alignment.
+			await page.click( BUTTON_SELECTOR );
+
+			// verify no alignment button is in pressed state.
+			pressedButtons = await page.$$( BUTTON_PRESSED_SELECTOR );
+			expect( pressedButtons ).toHaveLength( 0 );
+
+			// verify alignment markup was removed from the block.
+			htmlMarkup = await getEditedPostContent();
+			expect( htmlMarkup ).toMatchSnapshot();
+
+			// verify the markup when no alignment is set is valid
+			await verifyMarkupIsValid( htmlMarkup );
+
+			await selectBlockByClientId( ( await getAllBlocks() )[ 0 ].clientId );
+
+			// verify no alignment button is in pressed state after reparsing the block.
+			pressedButtons = await page.$$( BUTTON_PRESSED_SELECTOR );
+			expect( pressedButtons ).toHaveLength( 0 );
+		} );
+	};
+
+	describe( 'Block with no alignment set', () => {
+		const BLOCK_NAME = 'Test No Alignment Set';
+		it( 'Shows no alignment buttons on the alignment toolbar', async () => {
+			expect( await getAlignmentToolbarLabels() ).toHaveLength( 0 );
+		} );
+
+		it( 'Does not save any alignment related attribute or class', async () => {
+			await insertBlock( BLOCK_NAME );
+			expect( await getEditedPostContent() ).toMatchSnapshot();
+		} );
+	} );
+
+	describe( 'Block with align true', () => {
+		const BLOCK_NAME = 'Test Align True';
+
+		showsTheExpectedButtons( BLOCK_NAME, [
+			'Align left',
+			'Align center',
+			'Align right',
+		] );
+
+		doesNotApplyAlignmentByDefault( BLOCK_NAME );
+
+		correctlyAppliesAndRemovesAlignment( BLOCK_NAME, 'right' );
+	} );
+
+	describe( 'Block with align array', () => {
+		const BLOCK_NAME = 'Test Align Array';
+
+		showsTheExpectedButtons( BLOCK_NAME, [
+			'Align left',
+			'Align center',
+		] );
+
+		doesNotApplyAlignmentByDefault( BLOCK_NAME );
+
+		correctlyAppliesAndRemovesAlignment( BLOCK_NAME, 'center' );
+	} );
+
+	describe( 'Block with default align', () => {
+		const BLOCK_NAME = 'Test Default Align';
+		const PRESSED_BUTTON_SELECTOR = '.editor-block-toolbar button[aria-label="Align right"][aria-pressed="true"]';
+		showsTheExpectedButtons( BLOCK_NAME, [
+			'Align left',
+			'Align center',
+			'Align right',
+		] );
+
+		it( 'Applies the selected alignment by default', async () => {
+			await insertBlock( BLOCK_NAME );
+			// verify the correct alignment button is pressed
+			const pressedButtons = await page.$$( PRESSED_BUTTON_SELECTOR );
+			expect( pressedButtons ).toHaveLength( 1 );
+		} );
+
+		it( 'The default markup does not contain the alignment attribute but contains the alignment class', async () => {
+			await insertBlock( BLOCK_NAME );
+			const markup = await getEditedPostContent();
+			expect( markup ).not.toContain( '"align":"right"' );
+			expect( markup ).toContain( 'alignright' );
+		} );
+
+		it( 'Can remove the default alignment and the align attribute equals none but alignnone class is not applied', async () => {
+			await insertBlock( BLOCK_NAME );
+			// remove the alignment.
+			await page.click( PRESSED_BUTTON_SELECTOR );
+			const markup = await getEditedPostContent();
+			expect( markup ).toContain( '"align":"none"' );
+			expect( markup ).not.toContain( 'alignnone' );
+		} );
+
+		correctlyAppliesAndRemovesAlignment( BLOCK_NAME, 'center' );
+	} );
+} );

test/e2e/support/utils.js

@@ -411,3 +411,30 @@ export async function clickOnCloseModalButton( modalClassName ) {
 		await page.click( closeButtonClassName );
 	}
 }
+
+/**
+ * Sets code editor content
+ * @param {string} content New code editor content.
+ */
+export async function setCodeEditorContent( content ) {
+	await page.$eval( '.editor-post-text-editor', ( element, newValue ) => {
+		element.value = newValue;
+	}, content );
+	// press enter inside the code editor so the onChange events for the new value trigger
+	await page.click( '.editor-post-text-editor' );
+	await page.keyboard.press( 'a' );
+	await page.keyboard.press( 'Backspace' );
+	await page.click( '.editor-post-title__input' );
+}
+
+/**
+ * Returns an array with all blocks; Equivalent to calling wp.data.select( 'core/editor' ).getBlocks();
+ *
+ * @return {Promise} Promise resolving with an array containing all blocks in the document.
+ */
+export async function getAllBlocks() {
+	return await page.evaluate( () => {
+		const { select } = window.wp.data;
+		return select( 'core/editor' ).getBlocks();
+	} );
+}

test/e2e/test-plugins/align-hook.php

@@ -0,0 +1,22 @@
+<?php
+/**
+ * Plugin Name: Gutenberg Test Align Hook
+ * Plugin URI: https://github.com/WordPress/gutenberg
+ * Author: Gutenberg Team
+ *
+ * @package gutenberg-test-align-hook
+ */
+wp_enqueue_script(
+	'gutenberg-test-align-hook',
+	plugins_url( 'align-hook/index.js', __FILE__ ),
+	array(
+		'wp-blocks',
+		'wp-components',
+		'wp-element',
+		'wp-editor',
+		'wp-hooks',
+		'wp-i18n'
+	),
+	filemtime( plugin_dir_path( __FILE__ ) . 'align-hook/index.js' ),
+	true
+);

test/e2e/test-plugins/align-hook/index.js

@@ -0,0 +1,71 @@
+( function() {
+	var registerBlockType = wp.blocks.registerBlockType;
+	var el = wp.element.createElement;
+	var InnerBlocks = wp.editor.InnerBlocks;
+	var __ = wp.i18n.__;
+	var TEMPLATE = [
+		[ 'core/paragraph', { fontSize: 'large', content: 'Content…' } ],
+	];
+
+	var baseBlock = {
+		icon: 'cart',
+		category: 'common',
+		edit: function( props ) {
+			return el( 'div', { style: { outline: '1px solid gray', padding: 5 } },
+				'Test Align Hook'
+			);
+		},
+		save: function() {
+			return el( 'div', { style: { outline: '1px solid gray', padding: 5 } },
+				'Test Align Hook'
+			);
+		},
+	};
+
+	registerBlockType( 'test/test-no-alignment-set', {
+		title: 'Test No Alignment Set',
+		icon: baseBlock.icon,
+		category: baseBlock.category,
+		edit: baseBlock.edit,
+		save: baseBlock.save,
+	} );
+
+	registerBlockType( 'test/test-align-true', {
+		title: 'Test Align True',
+		icon: baseBlock.icon,
+		category: baseBlock.category,
+		edit: baseBlock.edit,
+		save: baseBlock.save,
+		supports: {
+			align: true,
+		}
+	} );
+
+	registerBlockType( 'test/test-align-array', {
+		title: 'Test Align Array',
+		icon: baseBlock.icon,
+		category: baseBlock.category,
+		edit: baseBlock.edit,
+		save: baseBlock.save,
+		supports: {
+			align: [ 'left', 'center' ],
+		}
+	} );
+
+	registerBlockType( 'test/test-default-align', {
+		title: 'Test Default Align',
+		icon: baseBlock.icon,
+		category: baseBlock.category,
+		edit: baseBlock.edit,
+		save: baseBlock.save,
+		attributes: {
+			align: {
+				type: 'string',
+				default: 'right',
+			},
+		},
+		supports: {
+			align: true,
+		}
+	} );
+} )();