Add end 2 end tests InnerBlocks renderAppender

packages/e2e-tests/plugins/inner-blocks-renderappender.php

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

packages/e2e-tests/plugins/inner-blocks-renderappender/index.js

@@ -0,0 +1,103 @@
+( function() {
+	var registerBlockType = wp.blocks.registerBlockType;
+	var el = wp.element.createElement;
+	var InnerBlocks = wp.editor.InnerBlocks;
+	var withSelect = wp.data.withSelect;
+
+	var dataSelector = withSelect( function( select, ownProps ) {
+		var getBlockOrder = select( 'core/editor' ).getBlockOrder;
+		return {
+			numberOfChildren: getBlockOrder( ownProps.clientId ).length,
+		};
+	} );
+	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', {}, 'Empty Blocks Appender' ),
+				el( InnerBlocks.ButtonBlockAppender )
+			)
+		);
+	}
+
+	function singleBlockAppender(){
+		return (
+			el( 'div', {className: 'my-dynamic-blocks-appender' },
+				el( 'span', {}, 'Single Blocks Appender' ),
+				el( InnerBlocks.ButtonBlockAppender )
+			)
+		);
+	}
+
+	function multipleBlockAppender(){
+		return (
+			el( 'div', {className: 'my-dynamic-blocks-appender' },
+				el( 'span', {}, 'Multiple Blocks Appender' ),
+			)
+		);
+	}
+
+	registerBlockType( 'test/inner-blocks-renderappender', {
+		title: 'InnerBlocks renderAppender',
+		icon: 'carrot',
+		category: 'common',
+
+		edit: function() {
+			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-renderappender-dynamic', {
+		title: 'InnerBlocks renderAppender dynamic',
+		icon: 'carrot',
+		category: 'common',
+
+		edit: dataSelector( function( props ) {
+			var renderAppender;
+			switch( props.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: allowedBlocks,
+					renderAppender: renderAppender
+				} )
+			);
+		} ),
+
+		save() {
+			return el( 'div', { style: { outline: '1px solid gray', padding: 5 } },
+				el( InnerBlocks.Content )
+			);
+		},
+	} );
+} )();

packages/e2e-tests/specs/plugins/__snapshots__/inner-blocks-renderappender.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-renderappender -->
+<div style=\\"outline:1px solid gray;padding:5px\\" class=\\"wp-block-test-inner-blocks-renderappender\\"><!-- wp:quote -->
+<blockquote class=\\"wp-block-quote\\"><p></p></blockquote>
+<!-- /wp:quote --></div>
+<!-- /wp:test/inner-blocks-renderappender -->"
+`;
+
+exports[`RenderAppender prop of InnerBlocks  Users can dynamically customize the appender 1`] = `
+"<!-- wp:test/inner-blocks-renderappender-dynamic -->
+<div style=\\"outline:1px solid gray;padding:5px\\" class=\\"wp-block-test-inner-blocks-renderappender-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-renderappender-dynamic -->"
+`;

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

@@ -0,0 +1,87 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	activatePlugin,
+	createNewPost,
+	deactivatePlugin,
+	getAllBlockInserterItemTitles,
+	getEditedPostContent,
+	insertBlock,
+	openAllBlockInserterCategories,
+} from '@wordpress/e2e-test-utils';
+
+describe( 'RenderAppender prop of InnerBlocks ', () => {
+	beforeAll( async () => {
+		await activatePlugin( 'gutenberg-test-innerblocks-renderappender' );
+	} );
+
+	beforeEach( async () => {
+		await createNewPost();
+	} );
+
+	afterAll( async () => {
+		await deactivatePlugin( 'gutenberg-test-innerblocks-renderappender' );
+	} );
+
+	it( 'Users can customize the appender and can still insert blocks using exposed components', async () => {
+		await insertBlock( 'InnerBlocks renderAppender' );
+		const appenderSelector = '.my-custom-awesome-appender';
+		await page.waitForSelector( appenderSelector );
+		expect(
+			await page.evaluate(
+				( el ) => ( el.innerText ),
+				await page.$( `${ appenderSelector } > span` )
+			)
+		).toEqual( 'My custom awesome appender' );
+		await page.click( `${ appenderSelector } .block-editor-button-block-appender` );
+		await openAllBlockInserterCategories();
+		expect(
+			await getAllBlockInserterItemTitles()
+		).toEqual( [
+			'Quote',
+			'Video',
+		] );
+		await page.click( `.block-editor-block-types-list__item[aria-label="Quote"]` );
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+	} );
+
+	it( 'Users can dynamically customize the appender', async () => {
+		await insertBlock( 'InnerBlocks renderAppender dynamic' );
+		const dynamicAppenderSelector = '.my-dynamic-blocks-appender';
+		await page.waitForSelector( dynamicAppenderSelector );
+		expect(
+			await page.evaluate(
+				( el ) => ( el.innerText ),
+				await page.$( `${ dynamicAppenderSelector } > span` ) )
+		).toEqual( 'Empty Blocks Appender' );
+		const blockAppenderButtonSelector = `${ dynamicAppenderSelector } .block-editor-button-block-appender`;
+		await page.click( blockAppenderButtonSelector );
+		await openAllBlockInserterCategories();
+		expect(
+			await getAllBlockInserterItemTitles()
+		).toEqual( [
+			'Quote',
+			'Video',
+		] );
+		await page.click( `.block-editor-block-types-list__item[aria-label="Quote"]` );
+		expect(
+			await page.evaluate(
+				( el ) => ( el.innerText ),
+				await page.$( `${ dynamicAppenderSelector } > span` ) )
+		).toEqual( 'Single Blocks Appender' );
+		expect(
+			await page.$( blockAppenderButtonSelector )
+		).toBeTruthy();
+		await insertBlock( 'Video' );
+		expect(
+			await page.evaluate(
+				( el ) => ( el.innerText ),
+				await page.$( `${ dynamicAppenderSelector } > span` ) )
+		).toEqual( 'Multiple Blocks Appender' );
+		expect(
+			await page.$( blockAppenderButtonSelector )
+		).toBeFalsy();
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+	} );
+} );