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

Inserter: Test to make sure the Inserter menu is closed. #24610

Merged
merged 3 commits into from Sep 14, 2020

Conversation

StevenDufresne
Copy link
Contributor

Description

This is an experimental PR to start addressing #24606.

The Problem

The block directory package is bundled in Gutenberg but its E2E tests are separate and therefore changes to the Inserter and its related components can break Block Directory functionality. This is because the Block Directory package makes use of the slot/fill component in the inserter.

A Potential Solution

This PR includes updates to the insertBlock function so it can be used by the block directory end to end tests since its markup differs from the default markup view. This PR allows developers to pass an optional xPath to the button that eventually inserts a block (the block directory installs first). Up until now, the block directory e2e tests reimplemented a Block Directory specific "insertBlock" sequence that was not sufficiently bubbling up errors introduced with Inserter changes.

While it is most likely not a good approach to continually abstract the insertBlock function and make it super configurable, this will at least ensure that all items in the inserter that insert blocks behave consistently and share a common code base.

I have also added the following:

await page.waitForSelector( '.block-editor-inserter__menu', { hidden: true, } );

since the current test doesn't actually test whether the inserter has closed, even though the comment suggests it has. By adding this block, the bug defined in #24606, is exposed.

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.
  • I've updated all React Native files affected by any refactorings/renamings in this PR.

@github-actions
Copy link

github-actions bot commented Aug 18, 2020

Size Change: 0 B

Total Size: 1.2 MB

ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.14 kB 0 B
build/annotations/index.js 3.67 kB 0 B
build/api-fetch/index.js 3.41 kB 0 B
build/autop/index.js 2.83 kB 0 B
build/blob/index.js 620 B 0 B
build/block-directory/index.js 8.53 kB 0 B
build/block-directory/style-rtl.css 953 B 0 B
build/block-directory/style.css 952 B 0 B
build/block-editor/index.js 128 kB 0 B
build/block-editor/style-rtl.css 11.1 kB 0 B
build/block-editor/style.css 11.1 kB 0 B
build/block-library/editor-rtl.css 8.68 kB 0 B
build/block-library/editor.css 8.68 kB 0 B
build/block-library/index.js 139 kB 0 B
build/block-library/style-rtl.css 7.6 kB 0 B
build/block-library/style.css 7.59 kB 0 B
build/block-library/theme-rtl.css 754 B 0 B
build/block-library/theme.css 754 B 0 B
build/block-serialization-default-parser/index.js 1.88 kB 0 B
build/block-serialization-spec-parser/index.js 3.1 kB 0 B
build/blocks/index.js 47.8 kB 0 B
build/components/index.js 202 kB 0 B
build/components/style-rtl.css 15.5 kB 0 B
build/components/style.css 15.5 kB 0 B
build/compose/index.js 9.67 kB 0 B
build/core-data/index.js 12.4 kB 0 B
build/data-controls/index.js 1.29 kB 0 B
build/data/index.js 8.55 kB 0 B
build/date/index.js 31.9 kB 0 B
build/deprecated/index.js 772 B 0 B
build/dom-ready/index.js 568 B 0 B
build/dom/index.js 4.47 kB 0 B
build/edit-navigation/index.js 10.7 kB 0 B
build/edit-navigation/style-rtl.css 868 B 0 B
build/edit-navigation/style.css 871 B 0 B
build/edit-post/index.js 305 kB 0 B
build/edit-post/style-rtl.css 6.25 kB 0 B
build/edit-post/style.css 6.23 kB 0 B
build/edit-site/index.js 19.3 kB 0 B
build/edit-site/style-rtl.css 3.14 kB 0 B
build/edit-site/style.css 3.14 kB 0 B
build/edit-widgets/index.js 12.2 kB 0 B
build/edit-widgets/style-rtl.css 2.55 kB 0 B
build/edit-widgets/style.css 2.55 kB 0 B
build/editor/editor-styles-rtl.css 492 B 0 B
build/editor/editor-styles.css 493 B 0 B
build/editor/index.js 45.6 kB 0 B
build/editor/style-rtl.css 3.81 kB 0 B
build/editor/style.css 3.81 kB 0 B
build/element/index.js 4.65 kB 0 B
build/escape-html/index.js 733 B 0 B
build/format-library/index.js 7.71 kB 0 B
build/format-library/style-rtl.css 547 B 0 B
build/format-library/style.css 548 B 0 B
build/hooks/index.js 2.13 kB 0 B
build/html-entities/index.js 621 B 0 B
build/i18n/index.js 3.56 kB 0 B
build/is-shallow-equal/index.js 710 B 0 B
build/keyboard-shortcuts/index.js 2.52 kB 0 B
build/keycodes/index.js 1.94 kB 0 B
build/list-reusable-blocks/index.js 3.12 kB 0 B
build/list-reusable-blocks/style-rtl.css 476 B 0 B
build/list-reusable-blocks/style.css 476 B 0 B
build/media-utils/index.js 5.32 kB 0 B
build/notices/index.js 1.79 kB 0 B
build/nux/index.js 3.4 kB 0 B
build/nux/style-rtl.css 671 B 0 B
build/nux/style.css 668 B 0 B
build/plugins/index.js 2.56 kB 0 B
build/primitives/index.js 1.41 kB 0 B
build/priority-queue/index.js 789 B 0 B
build/redux-routine/index.js 2.85 kB 0 B
build/rich-text/index.js 13.9 kB 0 B
build/server-side-render/index.js 2.77 kB 0 B
build/shortcode/index.js 1.7 kB 0 B
build/token-list/index.js 1.27 kB 0 B
build/url/index.js 4.06 kB 0 B
build/viewport/index.js 1.85 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.17 kB 0 B

compressed-size-action

@ryelle
Copy link
Contributor

ryelle commented Aug 25, 2020

This appears to be failing in other sections, too:

  • Multi-entity save flow › Site Editor › Should be enabled after edits
  • Multi-entity editor states › Multi-entity edit › should only dirty the parent entity when editing the parent
  • Template Part › Template part block › Should load customizations when in a template even if only the slug and theme attributes are set.

I assume those are valid, and the insertion will need to be fixed in those places as well? Or does the test/test helper need to be changed?

@StevenDufresne
Copy link
Contributor Author

  • editor states › Multi-entity edit › should only dirty the parent entity w

They should be legitimate failures. I'll investigate further.

@StevenDufresne
Copy link
Contributor Author

  • editor states › Multi-entity edit › should only dirty the parent entity w

They should be legitimate failures. I'll investigate further.

I'm not certain how all the pieces come together yet, but the behavior of the inserter when using the experimental Full Site editing feature does not work the same. It does not close when a block is added. These tests run within the context of that feature. Since the inserter doesn't close for Full Site editing, it technically shouldn't test it. I wonder if it's purposeful that the inserter doesn't close in FSE.

@kevin940726
Copy link
Member

Adding XPath as a second argument seems a little bit weird to me. Since it encourages the developer to know and test the implementation details rather than what end users see. Do we have a better solution to this? Or am I missing some additional context? 🤔

@StevenDufresne
Copy link
Contributor Author

That's a good point. Alternatives are definitely welcome.

I wouldn't expect most tests to pass in the xPath to the button. It's more a solution for the block directory package as it sits in the experimental menu slot.

  1. We could refactor the insertBlock function:

    • Pull out the button related logic into a function
    • Pull out the page.waitForFunction check
  2. Create ainsertBlockDirectoryBlock function.

    • We have already included insertPattern & insertReusableBlock.

The code is fairly repetitive and probably could use some 'drying' up.

@kevin940726
Copy link
Member

@StevenDufresne I'd prefer the second solution, a insertBlockDirectoryBlock function.

I won't be too worried about repetitive code though, even though they have similar functionality, they are also very different. Let's not prematurely optimize it unless we really need to.

We can even rename the original insertBlock function to something like insertBlockFromEditor, and name our new function to insertBlockFromBlockDirectory, in order to further differentiate both and make them clearer.

What's your thought on this? Am I missing some context :)?

Copy link
Member

@kevin940726 kevin940726 left a comment

Choose a reason for hiding this comment

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

LGTM 👍. Thank you @StevenDufresne !

@StevenDufresne StevenDufresne merged commit f96bd6b into master Sep 14, 2020
@StevenDufresne StevenDufresne deleted the fix/broken-inserter-after-install branch September 14, 2020 04:04
@github-actions github-actions bot added this to the Gutenberg 9.0 milestone Sep 14, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants