Add end 2 end tests InnerBlocks renderAppender

packages/e2e-tests/plugins/inner-blocks-render-appender.php

@@ -0,0 +1,29 @@
+<?php
+/**
+ * Plugin Name: Gutenberg Test InnerBlocks Render Appender
+ * Plugin URI: https://github.com/WordPress/gutenberg
+ * Author: Gutenberg Team
+ *
+ * @package gutenberg-test-inner-blocks-render-appender
+ */
+
+/**
+ * Registers a custom script for the plugin.
+ */
+function enqueue_inner_blocks_render_appender_script() {
+	wp_enqueue_script(
+		'gutenberg-test-inner-blocks-render-appender',
+		plugins_url( 'inner-blocks-render-appender/index.js', __FILE__ ),
+		array(
+			'wp-blocks',
+			'wp-block-editor',
+			'wp-element',
+			'wp-i18n',
+			'wp-data',
+		),
+		filemtime( plugin_dir_path( __FILE__ ) . 'inner-blocks-render-appender/index.js' ),
+		true
+	);
+}
+
+add_action( 'init', 'enqueue_inner_blocks_render_appender_script' );

packages/e2e-tests/plugins/inner-blocks-render-appender/index.js

@@ -0,0 +1,101 @@
+( function() {
+	const { wp } = window;
+	const { registerBlockType } = wp.blocks;
+	const { createElement: el } = wp.element;
+	const { InnerBlocks } = wp.blockEditor;
+	const { useSelect } = wp.data;
+
+	var allowedBlocks = [ 'core/quote', 'core/video' ];
+
+	function myCustomAppender() {
+		return (
+			el( 'div', { className: 'my-custom-awesome-appender' },
+				el( 'span', {}, 'My custom awesome appender' ),
+				el( InnerBlocks.ButtonBlockAppender )
+			)
+		);
+	}
+
+	function emptyBlockAppender() {
+		return (
+			el( 'div', { className: 'my-dynamic-blocks-appender' },
+				el( 'span', { className: 'empty-blocks-appender' }, 'Empty Blocks Appender' ),
+				el( InnerBlocks.ButtonBlockAppender )
+			)
+		);
+	}
+
+	function singleBlockAppender() {
+		return (
+			el( 'div', { className: 'my-dynamic-blocks-appender' },
+				el( 'span', { className: 'single-blocks-appender' }, 'Single Blocks Appender' ),
+				el( InnerBlocks.ButtonBlockAppender )
+			)
+		);
+	}
+
+	function multipleBlockAppender() {
+		return (
+			el( 'div', { className: 'my-dynamic-blocks-appender' },
+				el( 'span', { className: 'multiple-blocks-appender' }, 'Multiple Blocks Appender' ),
+			)
+		);
+	}
+
+	registerBlockType( 'test/inner-blocks-render-appender', {
+		title: 'InnerBlocks renderAppender',
+		icon: 'carrot',
+		category: 'common',
+
+		edit() {
+			return el( 'div', { style: { outline: '1px solid gray', padding: 5 } },
+				el( InnerBlocks, {
+					allowedBlocks: allowedBlocks,
+					renderAppender: myCustomAppender,
+				} )
+			);
+		},
+
+		save() {
+			return el( 'div', { style: { outline: '1px solid gray', padding: 5 } },
+				el( InnerBlocks.Content )
+			);
+		},
+	} );
+
+	registerBlockType( 'test/inner-blocks-render-appender-dynamic', {
+		title: 'InnerBlocks renderAppender dynamic',
+		icon: 'carrot',
+		category: 'common',
+
+		edit( props ) {
+			const numberOfChildren = useSelect( ( select ) => {
+				const { getBlockOrder } = select( 'core/block-editor' );
+				return getBlockOrder( props.clientId ).length;
+			}, [ props.clientId ] );
+			switch ( numberOfChildren ) {
+				case 0:
+					renderAppender = emptyBlockAppender;
+					break;
+				case 1:
+					renderAppender = singleBlockAppender;
+					break;
+				default:
+					renderAppender = multipleBlockAppender;
+					break;
+			}
+			return el( 'div', { style: { outline: '1px solid gray', padding: 5 } },
+				el( InnerBlocks, {
+					allowedBlocks,
+					renderAppender,
+				} )
+			);
+		},
+
+		save() {
+			return el( 'div', { style: { outline: '1px solid gray', padding: 5 } },
+				el( InnerBlocks.Content )
+			);
+		},
+	} );
+}() );

packages/e2e-tests/specs/plugins/__snapshots__/inner-blocks-render-appender.test.js.snap

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`RenderAppender prop of InnerBlocks  Users can customize the appender and can still insert blocks using exposed components 1`] = `
+"<!-- wp:test/inner-blocks-render-appender -->
+<div style=\\"outline:1px solid gray;padding:5px\\" class=\\"wp-block-test-inner-blocks-render-appender\\"><!-- wp:quote -->
+<blockquote class=\\"wp-block-quote\\"><p></p></blockquote>
+<!-- /wp:quote --></div>
+<!-- /wp:test/inner-blocks-render-appender -->"
+`;
+
+exports[`RenderAppender prop of InnerBlocks  Users can dynamically customize the appender 1`] = `
+"<!-- wp:test/inner-blocks-render-appender-dynamic -->
+<div style=\\"outline:1px solid gray;padding:5px\\" class=\\"wp-block-test-inner-blocks-render-appender-dynamic\\"><!-- wp:quote -->
+<blockquote class=\\"wp-block-quote\\"><p></p></blockquote>
+<!-- /wp:quote -->
+
+<!-- wp:video -->
+<figure class=\\"wp-block-video\\"></figure>
+<!-- /wp:video --></div>
+<!-- /wp:test/inner-blocks-render-appender-dynamic -->"
+`;

packages/e2e-tests/specs/plugins/inner-blocks-render-appender.test.js

@@ -0,0 +1,131 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	activatePlugin,
+	createNewPost,
+	deactivatePlugin,
+	getAllBlockInserterItemTitles,
+	getEditedPostContent,
+	insertBlock,
+	openAllBlockInserterCategories,
+} from '@wordpress/e2e-test-utils';
+
+const INSERTER_RESULTS_SELECTOR = '.block-editor-inserter__results';
+const QUOTE_INSERT_BUTTON_SELECTOR = '//button[.="Quote"]';
+const APPENDER_SELECTOR = '.my-custom-awesome-appender';
+const DYNAMIC_APPENDER_SELECTOR = '.my-dynamic-blocks-appender';
+
+describe( 'RenderAppender prop of InnerBlocks ', () => {
+	beforeAll( async () => {
+		await activatePlugin( 'gutenberg-test-innerblocks-render-appender' );
+	} );
+
+	beforeEach( async () => {
+		await createNewPost();
+	} );
+
+	afterAll( async () => {
+		await deactivatePlugin( 'gutenberg-test-innerblocks-render-appender' );
+	} );
+
+	it( 'Users can customize the appender and can still insert blocks using exposed components', async () => {
+		// Insert the InnerBlocks renderAppender block.
+		await insertBlock( 'InnerBlocks renderAppender' );
+		// Wait for the custom block appender to appear.
+		await page.waitForSelector( APPENDER_SELECTOR );
+		// Verify if the custom block appender text is the expected one.
+		expect(
+			await page.evaluate(
+				( el ) => ( el.innerText ),
+				await page.$( `${ APPENDER_SELECTOR } > span` )
+			)
+		).toEqual( 'My custom awesome appender' );
+
+		// Open the inserter of our custom block appender and expand all the categories.
+		await page.click( `${ APPENDER_SELECTOR } .block-editor-button-block-appender` );
+		await openAllBlockInserterCategories();
+
+		// Verify if the blocks the custom inserter is rendering are the expected ones.
+		expect(
+			await getAllBlockInserterItemTitles()
+		).toEqual( [
+			'Quote',
+			'Video',
+		] );
+
+		// Find the quote block insert button option within the inserter popover.
+		const inserterPopover = await page.$( INSERTER_RESULTS_SELECTOR );
+		const quoteButton = ( await inserterPopover.$x( QUOTE_INSERT_BUTTON_SELECTOR ) )[ 0 ];
+
+		// Insert a quote block.
+		await quoteButton.click();
+		// Verify if the post content is the expected one e.g: the quote was inserted.
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+	} );
+
+	it( 'Users can dynamically customize the appender', async () => {
+		// Insert the InnerBlocks renderAppender dynamic block.
+		await insertBlock( 'InnerBlocks renderAppender dynamic' );
+
+		// Wait for the custom dynamic block appender to appear.
+		await page.waitForSelector( DYNAMIC_APPENDER_SELECTOR );
+
+		// Verify if the custom block appender text is the expected one.
+		expect(
+			await page.evaluate(
+				( el ) => ( el.innerText ),
+				await page.$( `${ DYNAMIC_APPENDER_SELECTOR } > span.empty-blocks-appender` ) )
+		).toEqual( 'Empty Blocks Appender' );
+
+		// Open the inserter of our custom block appender and expand all the categories.
+		const blockAppenderButtonSelector = `${ DYNAMIC_APPENDER_SELECTOR } .block-editor-button-block-appender`;
+		await page.click( blockAppenderButtonSelector );
+		await openAllBlockInserterCategories();
+
+		// Verify if the blocks the custom inserter is rendering are the expected ones.
+		expect(
+			await getAllBlockInserterItemTitles()
+		).toEqual( [
+			'Quote',
+			'Video',
+		] );
+
+		// Find the quote block insert button option within the inserter popover.
+		const inserterPopover = await page.$( INSERTER_RESULTS_SELECTOR );
+		const quoteButton = ( await inserterPopover.$x( QUOTE_INSERT_BUTTON_SELECTOR ) )[ 0 ];
+
+		// Insert a quote block.
+		await quoteButton.click();
+
+		// Verify if the custom block appender text changed as expected.
+		expect(
+			await page.evaluate(
+				( el ) => ( el.innerText ),
+				await page.$( `${ DYNAMIC_APPENDER_SELECTOR } > span.single-blocks-appender` ) )
+		).toEqual( 'Single Blocks Appender' );
+
+		// Verify that the custom appender button is still being rendered.
+		expect(
+			await page.$( blockAppenderButtonSelector )
+		).toBeTruthy();
+
+		// Insert a video block.
+		await insertBlock( 'Video' );
+
+		// Verify if the custom block appender text changed as expected.
+		expect(
+			await page.evaluate(
+				( el ) => ( el.innerText ),
+				await page.$( `${ DYNAMIC_APPENDER_SELECTOR } > span.multiple-blocks-appender` ) )
+		).toEqual( 'Multiple Blocks Appender' );
+
+		// Verify that the custom appender button is now not being rendered.
+		expect(
+			await page.$( blockAppenderButtonSelector )
+		).toBeFalsy();
+
+		// Verify that final block markup is the expected one.
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+	} );
+} );