Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add: End 2 end test to InnerBlocks allowed block restrictions #14054

Conversation

jorgefilipecosta
Copy link
Member

@jorgefilipecosta jorgefilipecosta commented Feb 22, 2019

Description

This PR adds an end to end tests to the global inserter.
It verifies that:

  • The inserter opens and shows all the blocks by default.
  • On "Media & Text" block, the inserter items are restricted to a small set.
  • Inside columns block, no item appears on the inserter.

Catches the bug being addressed in #14020. So currently the tests fail.

@jorgefilipecosta jorgefilipecosta added [Type] Automated Testing Testing infrastructure changes impacting the execution of end-to-end (E2E) and/or unit tests. [Feature] Inserter The main way to insert blocks using the + button in the editing interface labels Feb 22, 2019
@jorgefilipecosta jorgefilipecosta force-pushed the add/end-to-end-test-global-block-inserter-restrictions branch from f7ffd84 to 30c6a49 Compare March 5, 2019 16:23
@jorgefilipecosta jorgefilipecosta marked this pull request as ready for review March 5, 2019 16:31
@jorgefilipecosta jorgefilipecosta force-pushed the add/end-to-end-test-global-block-inserter-restrictions branch from 30c6a49 to 546b667 Compare March 5, 2019 17:16
@gziolo gziolo added this to the 5.3 (Gutenberg) milestone Mar 12, 2019
expect( await getAllInserterItemTitles() ).toMatchSnapshot();
} );

it( 'media & text block should restrict allowed blocks', async () => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This test is very specific to the Media & Text block. It's fine to start with but I would personally prefer to see this kind of tests inside blocks/media-text.spec.js file. It's faster to start with such verification but ideally, we use some custom block registered for testing purpose.

} );

it( 'no blocks should be allowed inside columns', async () => {
await insertBlock( 'Columns' );
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The same applies as above. Those two test cases should be documented with the explanation of why those blocks are used and what characteristics they have.

Example, if we would change the behavior of Columns blocks to allow some blocks we should rather remove this test from the test suite rather than update it.

packages/e2e-test-utils/src/open-global-inserter.js Outdated Show resolved Hide resolved
packages/e2e-test-utils/src/open-global-inserter.js Outdated Show resolved Hide resolved
@jorgefilipecosta jorgefilipecosta force-pushed the add/end-to-end-test-global-block-inserter-restrictions branch 2 times, most recently from 72bda4a to 50e9ef4 Compare March 12, 2019 18:12
@jorgefilipecosta
Copy link
Member Author

Hi @gziolo,
Thank you for the review, this PR was updated taking into account your feedback.
We now have block specific tests and a test that specifically tests the allowed block restrictions using a custom block.

@jorgefilipecosta jorgefilipecosta changed the title Add: End 2 end test global block inserter restrictions Add: End 2 end test to InnerBlock allowed block restrictions Mar 12, 2019
@jorgefilipecosta jorgefilipecosta changed the title Add: End 2 end test to InnerBlock allowed block restrictions Add: End 2 end test to InnerBlocks allowed block restrictions Mar 12, 2019
Copy link
Member

@gziolo gziolo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome work @jorgefilipecosta. I thought you would handle my comments in a separate PR :)

This looks great, I left a couple of minor things to address before merging. Overall, I'm impressed with how e2e testing infrastructure and coverage grows thanks to your numerous contributions. 🥇

BTW, I ✅ this PR, if you feel you need another review when typos are fixed, let me know.

plugins_url( 'inner-blocks-allowed-blocks/index.js', __FILE__ ),
array(
'wp-blocks',
'wp-components',
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

wp-components and wp-hooks are never used so can be safely removed.

*/
function enqueue_block_icons_plugin_script() {
wp_enqueue_script(
'gutenberg-test-block-icons',
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This name was copied over from another file, it should be updated.

);
}

add_action( 'init', 'enqueue_block_icons_plugin_script' );
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The same issue with the function name, needs to be synced with the name of the file/plugin.

openGlobalBlockInserter,
} from '@wordpress/e2e-test-utils';

describe( 'Collumns', () => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Typo here:

Suggested change
describe( 'Collumns', () => {
describe( 'Columns', () => {

and in the name of the file.

@@ -15,6 +15,7 @@ export { enablePrePublishChecks } from './enable-pre-publish-checks';
export { ensureSidebarOpened } from './ensure-sidebar-opened';
export { findSidebarPanelToggleButtonWithTitle } from './find-sidebar-panel-toggle-button-with-title';
export { findSidebarPanelWithTitle } from './find-sidebar-panel-with-title';
export { getAllBlockInserterItemTitles } from './get-all-block-inserter-item-titles';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we also update CHANGELOG file? This package is public and is already being explored by external projects. This is going to be minor version bump as we add new features 🎉

@jorgefilipecosta jorgefilipecosta force-pushed the add/end-to-end-test-global-block-inserter-restrictions branch from 50e9ef4 to 65dea0c Compare March 13, 2019 19:18
@jorgefilipecosta jorgefilipecosta merged commit cd456f6 into master Mar 13, 2019
@jorgefilipecosta jorgefilipecosta deleted the add/end-to-end-test-global-block-inserter-restrictions branch March 13, 2019 19:45
@jorgefilipecosta
Copy link
Member Author

Thank you for the feedback @gziolo, it was applied before the merge.

@aduth
Copy link
Member

aduth commented Mar 15, 2019

I received an intermittent failure from these tests in #14128

Summary of all failing tests
FAIL specs/plugins/inner-blocks-allowed-blocks.test.js (8.254s)
  ● Allowed Blocks Setting on InnerBlocks  › allows all blocks if the allowed blocks setting was not set
    Node is detached from document
      at ElementHandle._scrollIntoViewIfNeeded (../../node_modules/puppeteer/lib/ElementHandle.js:75:13)

@aduth
Copy link
Member

aduth commented Mar 15, 2019

I note #14450 has a failed build as well due to the same error.

@aduth
Copy link
Member

aduth commented Mar 15, 2019

Specifically, the error occurs here in Puppeteer. _scrollIntoViewIfNeeded is called by various interactions like clicking.

https://github.com/GoogleChrome/puppeteer/blob/v1.6.2/lib/ElementHandle.js#L60

Also worth noting the file doesn't exist in more recent versions of Puppeteer (unsure if that may have an impact).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Inserter The main way to insert blocks using the + button in the editing interface [Type] Automated Testing Testing infrastructure changes impacting the execution of end-to-end (E2E) and/or unit tests.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants