-
Notifications
You must be signed in to change notification settings - Fork 4.2k
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
Migrate 'align hook' e2e tests to Playwright #56480
Conversation
// Verify the markup of the selected alignment was generated. | ||
let markup = await editor.getEditedPostContent(); | ||
expect( markup ).toContain( 'alignright' ); | ||
|
||
let blocks = await page.evaluate( | ||
( [ content ] ) => { | ||
return window.wp.blocks.parse( content ); | ||
}, | ||
[ markup ] | ||
); | ||
expect( blocks ).toMatchObject( [ | ||
{ | ||
name: 'test/test-align-true', | ||
isValid: true, | ||
}, | ||
] ); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The other correctly applies the selected alignment and correctly removes the alignment
should also have similar assertions, but I've only included it here for now.
I think testing intentions here are more apparent than in the original tests. But it still seems odd to test block serialization/parsing here. WDYT?
Original code:
gutenberg/packages/e2e-tests/specs/editor/plugins/align-hook.test.js
Lines 122 to 127 in cc1870a
// Verify alignment markup was removed from the block. | |
htmlMarkup = await getEditedPostContent(); | |
expect( htmlMarkup ).toMatchSnapshot(); | |
// verify the markup when no alignment is set is valid | |
await verifyMarkupIsValid( htmlMarkup ); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
From a user perspective, what happens if a block is invalid? What does the user see?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
On the theme side, they will see a broken layout. In the editor, when markup is invalid and the block has no deprecation handlers in the editor, they will see a notice.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hmm, it would be difficult to wait until the notice is not shown, 😅 but maybe we could use some other user-facing stuff there instead of the raw markup?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Maybe the assertion that re-parsing markup is still valid should be performed by low-level tests. The full-content.test.js
integration test already does something similar for core blocks.
Here, we can ensure that the generated markup contains (or does not) the alignment classes. What do you think?
Cc-ing @ntsekouras and @jorgefilipecosta as they worked on the original tests.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think it makes perfect sense 👍 .
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I've updated the assertions in add8857.
Size Change: +727 B (0%) Total Size: 1.7 MB
ℹ️ View Unchanged
|
cc068c0
to
026efa1
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Left a couple of questions/suggestions. No blockers though, the tests look solid to me. Thanks! 🚀
// Verify the markup of the selected alignment was generated. | ||
let markup = await editor.getEditedPostContent(); | ||
expect( markup ).toContain( 'alignright' ); | ||
|
||
let blocks = await page.evaluate( | ||
( [ content ] ) => { | ||
return window.wp.blocks.parse( content ); | ||
}, | ||
[ markup ] | ||
); | ||
expect( blocks ).toMatchObject( [ | ||
{ | ||
name: 'test/test-align-true', | ||
isValid: true, | ||
}, | ||
] ); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
From a user perspective, what happens if a block is invalid? What does the user see?
* Migrate 'align hook' e2e tests to Playwright * Remove old test files * Update generated alignment markup assertions
What?
Part of #38851.
PR migrates
align-hook.test.js
e2e test to PlaywrightWhy?
Part of #38851.
Testing Instructions