From db107c07a7b06a16efadb440c7fe3d8f7e6e7295 Mon Sep 17 00:00:00 2001 From: Jorge Date: Tue, 16 Apr 2019 11:35:07 +0100 Subject: [PATCH 1/3] Add end 2 end tests InnerBlocks renderAppender --- .../plugins/inner-blocks-renderappender.php | 29 +++++ .../inner-blocks-renderappender/index.js | 104 ++++++++++++++++++ .../inner-blocks-renderappender.test.js.snap | 21 ++++ .../inner-blocks-renderappender.test.js | 87 +++++++++++++++ 4 files changed, 241 insertions(+) create mode 100644 packages/e2e-tests/plugins/inner-blocks-renderappender.php create mode 100644 packages/e2e-tests/plugins/inner-blocks-renderappender/index.js create mode 100644 packages/e2e-tests/specs/plugins/__snapshots__/inner-blocks-renderappender.test.js.snap create mode 100644 packages/e2e-tests/specs/plugins/inner-blocks-renderappender.test.js diff --git a/packages/e2e-tests/plugins/inner-blocks-renderappender.php b/packages/e2e-tests/plugins/inner-blocks-renderappender.php new file mode 100644 index 0000000000000..786e13331b902 --- /dev/null +++ b/packages/e2e-tests/plugins/inner-blocks-renderappender.php @@ -0,0 +1,29 @@ + +
+

+
+" +`; + +exports[`RenderAppender prop of InnerBlocks Users can dynamically customize the appender 1`] = ` +" +
+

+ + + +
+
+" +`; diff --git a/packages/e2e-tests/specs/plugins/inner-blocks-renderappender.test.js b/packages/e2e-tests/specs/plugins/inner-blocks-renderappender.test.js new file mode 100644 index 0000000000000..19e038645d794 --- /dev/null +++ b/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(); + } ); +} ); From 65aaebfad89f02be18121ea51b9173258b837d22 Mon Sep 17 00:00:00 2001 From: Jorge Date: Wed, 1 May 2019 11:47:02 +0100 Subject: [PATCH 2/3] Fixed intermittent problem. --- .../plugins/inner-blocks-renderappender.php | 2 +- .../plugins/inner-blocks-renderappender/index.js | 10 +++++----- .../plugins/inner-blocks-renderappender.test.js | 14 +++++++++----- 3 files changed, 15 insertions(+), 11 deletions(-) diff --git a/packages/e2e-tests/plugins/inner-blocks-renderappender.php b/packages/e2e-tests/plugins/inner-blocks-renderappender.php index 786e13331b902..a433f54705027 100644 --- a/packages/e2e-tests/plugins/inner-blocks-renderappender.php +++ b/packages/e2e-tests/plugins/inner-blocks-renderappender.php @@ -16,7 +16,7 @@ function enqueue_inner_blocks_renderappender_script() { plugins_url( 'inner-blocks-renderappender/index.js', __FILE__ ), array( 'wp-blocks', - 'wp-editor', + 'wp-block-editor', 'wp-element', 'wp-i18n', 'wp-data', diff --git a/packages/e2e-tests/plugins/inner-blocks-renderappender/index.js b/packages/e2e-tests/plugins/inner-blocks-renderappender/index.js index d5ab55a7f4bbd..370c665516055 100644 --- a/packages/e2e-tests/plugins/inner-blocks-renderappender/index.js +++ b/packages/e2e-tests/plugins/inner-blocks-renderappender/index.js @@ -2,11 +2,11 @@ var wp = window.wp; var registerBlockType = wp.blocks.registerBlockType; var el = wp.element.createElement; - var InnerBlocks = wp.editor.InnerBlocks; + var InnerBlocks = wp.blockEditor.InnerBlocks; var withSelect = wp.data.withSelect; var dataSelector = withSelect( function( select, ownProps ) { - var getBlockOrder = select( 'core/editor' ).getBlockOrder; + var getBlockOrder = select( 'core/block-editor' ).getBlockOrder; return { numberOfChildren: getBlockOrder( ownProps.clientId ).length, }; @@ -25,7 +25,7 @@ function emptyBlockAppender() { return ( el( 'div', { className: 'my-dynamic-blocks-appender' }, - el( 'span', {}, 'Empty Blocks Appender' ), + el( 'span', { className: 'empty-blocks-appender' }, 'Empty Blocks Appender' ), el( InnerBlocks.ButtonBlockAppender ) ) ); @@ -34,7 +34,7 @@ function singleBlockAppender() { return ( el( 'div', { className: 'my-dynamic-blocks-appender' }, - el( 'span', {}, 'Single Blocks Appender' ), + el( 'span', { className: 'single-blocks-appender' }, 'Single Blocks Appender' ), el( InnerBlocks.ButtonBlockAppender ) ) ); @@ -43,7 +43,7 @@ function multipleBlockAppender() { return ( el( 'div', { className: 'my-dynamic-blocks-appender' }, - el( 'span', {}, 'Multiple Blocks Appender' ), + el( 'span', { className: 'multiple-blocks-appender' }, 'Multiple Blocks Appender' ), ) ); } diff --git a/packages/e2e-tests/specs/plugins/inner-blocks-renderappender.test.js b/packages/e2e-tests/specs/plugins/inner-blocks-renderappender.test.js index 19e038645d794..f9e5fdeb1c929 100644 --- a/packages/e2e-tests/specs/plugins/inner-blocks-renderappender.test.js +++ b/packages/e2e-tests/specs/plugins/inner-blocks-renderappender.test.js @@ -11,6 +11,8 @@ import { openAllBlockInserterCategories, } from '@wordpress/e2e-test-utils'; +const QUOTE_INSERT_BUTTON_SELECTOR = '//button[contains(concat(" ", @class, " "), " block-editor-block-types-list__item ")][./span[contains(text(),"Quote")]]'; + describe( 'RenderAppender prop of InnerBlocks ', () => { beforeAll( async () => { await activatePlugin( 'gutenberg-test-innerblocks-renderappender' ); @@ -42,7 +44,8 @@ describe( 'RenderAppender prop of InnerBlocks ', () => { 'Quote', 'Video', ] ); - await page.click( `.block-editor-block-types-list__item[aria-label="Quote"]` ); + const quoteButton = ( await page.$x( QUOTE_INSERT_BUTTON_SELECTOR ) )[ 0 ]; + await quoteButton.click(); expect( await getEditedPostContent() ).toMatchSnapshot(); } ); @@ -53,7 +56,7 @@ describe( 'RenderAppender prop of InnerBlocks ', () => { expect( await page.evaluate( ( el ) => ( el.innerText ), - await page.$( `${ dynamicAppenderSelector } > span` ) ) + await page.$( `${ dynamicAppenderSelector } > span.empty-blocks-appender` ) ) ).toEqual( 'Empty Blocks Appender' ); const blockAppenderButtonSelector = `${ dynamicAppenderSelector } .block-editor-button-block-appender`; await page.click( blockAppenderButtonSelector ); @@ -64,11 +67,12 @@ describe( 'RenderAppender prop of InnerBlocks ', () => { 'Quote', 'Video', ] ); - await page.click( `.block-editor-block-types-list__item[aria-label="Quote"]` ); + const quoteButton = ( await page.$x( QUOTE_INSERT_BUTTON_SELECTOR ) )[ 0 ]; + await quoteButton.click(); expect( await page.evaluate( ( el ) => ( el.innerText ), - await page.$( `${ dynamicAppenderSelector } > span` ) ) + await page.$( `${ dynamicAppenderSelector } > span.single-blocks-appender` ) ) ).toEqual( 'Single Blocks Appender' ); expect( await page.$( blockAppenderButtonSelector ) @@ -77,7 +81,7 @@ describe( 'RenderAppender prop of InnerBlocks ', () => { expect( await page.evaluate( ( el ) => ( el.innerText ), - await page.$( `${ dynamicAppenderSelector } > span` ) ) + await page.$( `${ dynamicAppenderSelector } > span.multiple-blocks-appender` ) ) ).toEqual( 'Multiple Blocks Appender' ); expect( await page.$( blockAppenderButtonSelector ) From ddd783cc2a03d56fb869548ee900b52b122a5a08 Mon Sep 17 00:00:00 2001 From: Jorge Date: Fri, 6 Dec 2019 12:57:19 +0000 Subject: [PATCH 3/3] Address reviews --- .../plugins/inner-blocks-render-appender.php | 29 ++++ .../index.js | 31 ++--- .../plugins/inner-blocks-renderappender.php | 29 ---- ...inner-blocks-render-appender.test.js.snap} | 12 +- .../inner-blocks-render-appender.test.js | 131 ++++++++++++++++++ .../inner-blocks-renderappender.test.js | 91 ------------ 6 files changed, 180 insertions(+), 143 deletions(-) create mode 100644 packages/e2e-tests/plugins/inner-blocks-render-appender.php rename packages/e2e-tests/plugins/{inner-blocks-renderappender => inner-blocks-render-appender}/index.js (75%) delete mode 100644 packages/e2e-tests/plugins/inner-blocks-renderappender.php rename packages/e2e-tests/specs/plugins/__snapshots__/{inner-blocks-renderappender.test.js.snap => inner-blocks-render-appender.test.js.snap} (66%) create mode 100644 packages/e2e-tests/specs/plugins/inner-blocks-render-appender.test.js delete mode 100644 packages/e2e-tests/specs/plugins/inner-blocks-renderappender.test.js diff --git a/packages/e2e-tests/plugins/inner-blocks-render-appender.php b/packages/e2e-tests/plugins/inner-blocks-render-appender.php new file mode 100644 index 0000000000000..2e0f52fd192b9 --- /dev/null +++ b/packages/e2e-tests/plugins/inner-blocks-render-appender.php @@ -0,0 +1,29 @@ + { + const { getBlockOrder } = select( 'core/block-editor' ); + return getBlockOrder( props.clientId ).length; + }, [ props.clientId ] ); + switch ( numberOfChildren ) { case 0: renderAppender = emptyBlockAppender; break; @@ -93,7 +90,7 @@ renderAppender, } ) ); - } ), + }, save() { return el( 'div', { style: { outline: '1px solid gray', padding: 5 } }, diff --git a/packages/e2e-tests/plugins/inner-blocks-renderappender.php b/packages/e2e-tests/plugins/inner-blocks-renderappender.php deleted file mode 100644 index a433f54705027..0000000000000 --- a/packages/e2e-tests/plugins/inner-blocks-renderappender.php +++ /dev/null @@ -1,29 +0,0 @@ - -
+" +

-" +" `; exports[`RenderAppender prop of InnerBlocks Users can dynamically customize the appender 1`] = ` -" -
+" +

-" +" `; diff --git a/packages/e2e-tests/specs/plugins/inner-blocks-render-appender.test.js b/packages/e2e-tests/specs/plugins/inner-blocks-render-appender.test.js new file mode 100644 index 0000000000000..c607f2f4df2c1 --- /dev/null +++ b/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(); + } ); +} ); diff --git a/packages/e2e-tests/specs/plugins/inner-blocks-renderappender.test.js b/packages/e2e-tests/specs/plugins/inner-blocks-renderappender.test.js deleted file mode 100644 index f9e5fdeb1c929..0000000000000 --- a/packages/e2e-tests/specs/plugins/inner-blocks-renderappender.test.js +++ /dev/null @@ -1,91 +0,0 @@ -/** - * WordPress dependencies - */ -import { - activatePlugin, - createNewPost, - deactivatePlugin, - getAllBlockInserterItemTitles, - getEditedPostContent, - insertBlock, - openAllBlockInserterCategories, -} from '@wordpress/e2e-test-utils'; - -const QUOTE_INSERT_BUTTON_SELECTOR = '//button[contains(concat(" ", @class, " "), " block-editor-block-types-list__item ")][./span[contains(text(),"Quote")]]'; - -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', - ] ); - const quoteButton = ( await page.$x( QUOTE_INSERT_BUTTON_SELECTOR ) )[ 0 ]; - await quoteButton.click(); - 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.empty-blocks-appender` ) ) - ).toEqual( 'Empty Blocks Appender' ); - const blockAppenderButtonSelector = `${ dynamicAppenderSelector } .block-editor-button-block-appender`; - await page.click( blockAppenderButtonSelector ); - await openAllBlockInserterCategories(); - expect( - await getAllBlockInserterItemTitles() - ).toEqual( [ - 'Quote', - 'Video', - ] ); - const quoteButton = ( await page.$x( QUOTE_INSERT_BUTTON_SELECTOR ) )[ 0 ]; - await quoteButton.click(); - expect( - await page.evaluate( - ( el ) => ( el.innerText ), - await page.$( `${ dynamicAppenderSelector } > span.single-blocks-appender` ) ) - ).toEqual( 'Single Blocks Appender' ); - expect( - await page.$( blockAppenderButtonSelector ) - ).toBeTruthy(); - await insertBlock( 'Video' ); - expect( - await page.evaluate( - ( el ) => ( el.innerText ), - await page.$( `${ dynamicAppenderSelector } > span.multiple-blocks-appender` ) ) - ).toEqual( 'Multiple Blocks Appender' ); - expect( - await page.$( blockAppenderButtonSelector ) - ).toBeFalsy(); - expect( await getEditedPostContent() ).toMatchSnapshot(); - } ); -} );