Skip to content

Commit

Permalink
Add end 2 end tests InnerBlocks renderAppender (#14996)
Browse files Browse the repository at this point in the history 
* Add end 2 end tests InnerBlocks renderAppender

* Fixed intermittent problem.

* Address reviews
  • Loading branch information
@jorgefilipecosta
jorgefilipecosta committed Dec 16, 2019
1 parent 74269e6 commit d0ae224
Show file tree
Hide file tree
Showing 4 changed files with 282 additions and 0 deletions.
29 changes: 29 additions & 0 deletions packages/e2e-tests/plugins/inner-blocks-render-appender.php
View file
@@ -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' );
101 changes: 101 additions & 0 deletions packages/e2e-tests/plugins/inner-blocks-render-appender/index.js
View file
@@ -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 )
);
},
} );
}() );
21 changes: 21 additions & 0 deletions packages/e2e-tests/specs/plugins/__snapshots__/inner-blocks-render-appender.test.js.snap
View file
@@ -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 -->"
`;
131 changes: 131 additions & 0 deletions packages/e2e-tests/specs/plugins/inner-blocks-render-appender.test.js
View file
@@ -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();
} );
} );

0 comments on commit d0ae224

Please sign in to comment.