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 e2e test for template part block creation and insertion #21849

Merged
merged 5 commits into from
Apr 27, 2020

Conversation

Addison-Stavlo
Copy link
Contributor

Description

Adds a basic e2e test flow for custom Template Part creation/insertion flow through the Template Part block.

This seems like it would be helpful to help catch any potential future regressions. Recently, template parts were not able to find matches as expected / be inserted (this was solved in #21766 ). Similarly, there was a recent regression in inner blocks (#21804) that would cause template parts to be inserted without their actual inner content.

e2e test flow:

  • Creates a new custom template part with slug, theme name, and content.
  • Verifies a match is found when trying to insert via slug/theme.
  • Expects a preview to be rendered with the added content.
  • After inserting the template part, verifies the content is added in the editor.

How has this been tested?

Running e2e locally.

Types of changes

E2e tests.

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 Apr 24, 2020

Size Change: 0 B

Total Size: 835 kB

ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.02 kB 0 B
build/annotations/index.js 3.62 kB 0 B
build/api-fetch/index.js 4.08 kB 0 B
build/autop/index.js 2.82 kB 0 B
build/blob/index.js 620 B 0 B
build/block-directory/index.js 6.24 kB 0 B
build/block-directory/style-rtl.css 760 B 0 B
build/block-directory/style.css 761 B 0 B
build/block-editor/index.js 106 kB 0 B
build/block-editor/style-rtl.css 10.2 kB 0 B
build/block-editor/style.css 10.2 kB 0 B
build/block-library/editor-rtl.css 7.05 kB 0 B
build/block-library/editor.css 7.05 kB 0 B
build/block-library/index.js 112 kB 0 B
build/block-library/style-rtl.css 7.14 kB 0 B
build/block-library/style.css 7.14 kB 0 B
build/block-library/theme-rtl.css 683 B 0 B
build/block-library/theme.css 685 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 48.1 kB 0 B
build/components/index.js 198 kB 0 B
build/components/style-rtl.css 16.9 kB 0 B
build/components/style.css 16.9 kB 0 B
build/compose/index.js 6.66 kB 0 B
build/core-data/index.js 11.4 kB 0 B
build/data-controls/index.js 1.29 kB 0 B
build/data/index.js 8.43 kB 0 B
build/date/index.js 5.47 kB 0 B
build/deprecated/index.js 772 B 0 B
build/dom-ready/index.js 569 B 0 B
build/dom/index.js 3.1 kB 0 B
build/edit-navigation/index.js 3.54 kB 0 B
build/edit-navigation/style-rtl.css 485 B 0 B
build/edit-navigation/style.css 485 B 0 B
build/edit-post/index.js 27.7 kB 0 B
build/edit-post/style-rtl.css 12.3 kB 0 B
build/edit-post/style.css 12.3 kB 0 B
build/edit-site/index.js 11 kB 0 B
build/edit-site/style-rtl.css 5.26 kB 0 B
build/edit-site/style.css 5.25 kB 0 B
build/edit-widgets/index.js 8.33 kB 0 B
build/edit-widgets/style-rtl.css 5 kB 0 B
build/edit-widgets/style.css 5 kB 0 B
build/editor/editor-styles-rtl.css 428 B 0 B
build/editor/editor-styles.css 431 B 0 B
build/editor/index.js 43.3 kB 0 B
build/editor/style-rtl.css 3.27 kB 0 B
build/editor/style.css 3.27 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.32 kB 0 B
build/format-library/style-rtl.css 502 B 0 B
build/format-library/style.css 502 B 0 B
build/hooks/index.js 2.13 kB 0 B
build/html-entities/index.js 622 B 0 B
build/i18n/index.js 3.56 kB 0 B
build/is-shallow-equal/index.js 711 B 0 B
build/keyboard-shortcuts/index.js 2.51 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 226 B 0 B
build/list-reusable-blocks/style.css 226 B 0 B
build/media-utils/index.js 5.29 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 616 B 0 B
build/nux/style.css 613 B 0 B
build/plugins/index.js 2.67 kB 0 B
build/primitives/index.js 1.49 kB 0 B
build/priority-queue/index.js 789 B 0 B
build/redux-routine/index.js 2.84 kB 0 B
build/rich-text/index.js 14.8 kB 0 B
build/server-side-render/index.js 2.67 kB 0 B
build/shortcode/index.js 1.7 kB 0 B
build/token-list/index.js 1.28 kB 0 B
build/url/index.js 4.02 kB 0 B
build/viewport/index.js 1.84 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.17 kB 0 B

compressed-size-action

await trashExistingPosts( 'wp_template_part' );
} );
afterAll( async () => {
await disableExperimentalFeatures( requiredExperiments );
Copy link
Contributor

Choose a reason for hiding this comment

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

Should we trash the test template and template part at teardown?

Suggested change
await disableExperimentalFeatures( requiredExperiments );
await disableExperimentalFeatures( requiredExperiments );
await trashExistingPosts( 'wp_template' );
await trashExistingPosts( 'wp_template_part' );

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I wondered the same thing. But it seems the standard in these e2e tests in general is trashing in beforeAll and not after. The beforeAll defined to run for every test suite uses the standard trashExistingPosts, and that function is neglected from the afterAll defined beneath it. I guess it would be more complete to do it after as well, but probably not necessary as we are mostly concerned with clearing the slate for the tests to run on?

Copy link
Contributor

Choose a reason for hiding this comment

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

Sounds convincing, especially if we're following an established pattern here 👍

Copy link
Contributor

@ockham ockham left a comment

Choose a reason for hiding this comment

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

Thanks @Addison-Stavlo, this is going to come in super handy!

I have only one (non-blocking) question 🙂

@epiqueras
Copy link
Contributor

Block test files have the name of the block, e.g., template-part.test.js. I think we should follow that convention here as well.

@Addison-Stavlo
Copy link
Contributor Author

Addison-Stavlo commented Apr 24, 2020

Block test files have the name of the block, e.g., template-part.test.js. I think we should follow that convention here as well.

@epiqueras - Gotcha! I see you recently added that file with a test in the site editor. Nice!

These are a bit more centered towards the placeholder block as opposed to template part block itself as yours is. Do you think we should still share the same file with the standard template-part block, or create a template-part-placeholder.test.js file for these?

@epiqueras
Copy link
Contributor

They are still the same block. The placeholder is just a state of the block.

I think prior art, e.g., the Image block tests, keep everything in the same file so we should do the same here.

@Addison-Stavlo Addison-Stavlo force-pushed the add/template-part-e2e branch from 91f3bf1 to 34462b3 Compare April 25, 2020 01:21
@Addison-Stavlo
Copy link
Contributor Author

Addison-Stavlo commented Apr 25, 2020

@epiqueras - Cool! I updated this to use that file as well. I was having some issues with your test passing locally (on master and on this PR) but it seems it passed with Travis.

Just to document what I am seeing locally that was breaking the test: the first time I select a template part in the template selector (when selecting 'header' in the test), a React error gets thrown: the good old "Can't perform a React state update on an unmounted component." Travis isn't encountering this, so hopefully it's just a local problem at the moment.

@epiqueras
Copy link
Contributor

It sounds like a race condition with an effect on the site editor. I triggered another build just to be safe. Feel free to merge if it passes.

@Addison-Stavlo
Copy link
Contributor Author

Hrm, seems the build failed for another reason. It won't let me trigger it again atm, will check back later.

@epiqueras
Copy link
Contributor

It was just a network error while downloading WP in one of the jobs. I restarted it 🙂

@Addison-Stavlo Addison-Stavlo merged commit 1cb04f4 into master Apr 27, 2020
@Addison-Stavlo Addison-Stavlo deleted the add/template-part-e2e branch April 27, 2020 15:01
@Addison-Stavlo
Copy link
Contributor Author

It was just a network error while downloading WP in one of the jobs. I restarted it 🙂

Awesome, thank you for that!

@github-actions github-actions bot added this to the Gutenberg 8.0 milestone Apr 27, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Package] E2E Tests /packages/e2e-tests
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants