Add end 2 end test to blocks.BlockEdit filter (#7294)

* Add end 2 end test to blocks.BlockEdit filter

* Update index.js

* Update hooks-api.test.js

* Update hooks-api.php

* Testing: Add visual tweaks to hooks api e2e tests

test/e2e/specs/hooks-api.test.js

@@ -0,0 +1,39 @@
+/**
+ * Internal dependencies
+ */
+import '../support/bootstrap';
+import { newPost, newDesktopBrowserPage } from '../support/utils';
+import { activatePlugin, deactivatePlugin } from '../support/plugins';
+
+describe( 'Using Hooks API', () => {
+	beforeAll( async () => {
+		await newDesktopBrowserPage();
+		await activatePlugin( 'gutenberg-test-hooks-api' );
+	} );
+
+	afterAll( async () => {
+		await newDesktopBrowserPage();
+		await deactivatePlugin( 'gutenberg-test-hooks-api' );
+	} );
+
+	beforeEach( async () => {
+		await newDesktopBrowserPage();
+		await newPost();
+	} );
+
+	it( 'Should contain a reset block button on the sidebar', async () => {
+		await page.click( '.editor-default-block-appender__content' );
+		await page.keyboard.type( 'First paragraph' );
+		expect( await page.$( '.edit-post-sidebar .e2e-reset-block-button' ) ).not.toBeNull();
+	} );
+
+	it( 'Pressing reset block button resets the block', async () => {
+		await page.click( '.editor-default-block-appender__content' );
+		await page.keyboard.type( 'First paragraph' );
+		const paragraphContent = await page.$eval( 'div[data-type="core/paragraph"] p', ( element ) => element.textContent );
+		expect( paragraphContent ).toEqual( 'First paragraph' );
+		await page.click( '.edit-post-sidebar .e2e-reset-block-button' );
+		const newParagraphContent = await page.$eval( 'div[data-type="core/paragraph"] p', ( element ) => element.textContent );
+		expect( newParagraphContent ).toEqual( '' );
+	} );
+} );

test/e2e/test-plugins/hooks-api.php

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

test/e2e/test-plugins/hooks-api/index.js

@@ -0,0 +1,61 @@
+( function() {
+	var el = wp.element.createElement;
+	var Fragment = wp.element.Fragment;
+	var Button = wp.components.Button;
+	var PanelBody = wp.components.PanelBody;
+	var InspectorControls = wp.editor.InspectorControls;
+	var addFilter = wp.hooks.addFilter;
+	var createBlock = wp.blocks.createBlock;
+	var __ = wp.i18n.__;
+
+	function ResetBlockButton( props ) {
+		return el(
+			PanelBody,
+			{},
+			el(
+				Button,
+				{
+					className: 'e2e-reset-block-button',
+					isDefault: true,
+					isLarge: true,
+					onClick: function() {
+						var emptyBlock = createBlock( props.name );
+						props.onReplace( emptyBlock );
+					}
+				},
+				__( 'Reset Block' )
+			)
+		);
+	}
+
+	function addResetBlockButton( BlockEdit ) {
+		return function( props ) {
+			return el(
+				Fragment,
+				{},
+				el(
+					InspectorControls,
+					{},
+					el(
+						ResetBlockButton,
+						{
+							name: props.name,
+							onReplace: props.onReplace
+						}
+					)
+				),
+				el(
+					BlockEdit,
+					props
+				)
+			);
+		};
+	}
+
+	addFilter(
+		'blocks.BlockEdit',
+		'e2e/hooks-api/add-reset-block-button',
+		addResetBlockButton,
+		100
+	);
+} )();