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.

Sign up for GitHub

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 'block-locking' to Playwright #41050

Merged
merged 2 commits into from
May 18, 2022
Merged

Migrate 'block-locking' to Playwright #41050

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c2e4508
Migrate 'block-locking' to Playwright
Mamaduka May 13, 2022
ad540a0
Use correct utility method
Mamaduka May 13, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
120 changes: 0 additions & 120 deletions packages/e2e-tests/specs/editor/various/block-locking.test.js
View file
Open in desktop

This file was deleted.

86 changes: 86 additions & 0 deletions test/e2e/specs/editor/various/block-locking.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
/**
* WordPress dependencies
*/
const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );

test.describe( 'Block Locking', () => {
test.beforeEach( async ( { admin } ) => {
await admin.createNewPost();
} );

test.describe( 'General', () => {
test( 'can prevent removal', async ( { editor, page } ) => {
await editor.insertBlock( { name: 'core/paragraph' } );
await page.keyboard.type( 'Some paragraph' );

await editor.clickBlockOptionsMenuItem( 'Lock' );

await page.click( 'role=checkbox[name="Prevent removal"]' );
Copy link
Member

Choose a reason for hiding this comment

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

Nit: Ideally, we normally want to add the i flag to indicate case insensitive names:

-await page.click( 'role=checkbox[name="Prevent removal"]' );
+await page.click( 'role=checkbox[name="Prevent removal"i]' );

Copy link
Member Author

Choose a reason for hiding this comment

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

I was wondering about the flag since I saw it in other tests. Most labels can be considered case insensitive, should we include this into migration or best practices docs?

I also ended up using .toBe() instead of .toMatchInlineSnapshot(). Is this also recommended way to test small pieces of content?

Copy link
Member

Choose a reason for hiding this comment

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

Most labels can be considered case insensitive, should we include this into migration or best practices docs?

That would be nice! However, we're still using the unofficial role-selector created by me. After we switch to the official role selector when it becomes stable, we can just omit the " to make it more ergonomic.

-await page.click( 'role=checkbox[name="Prevent removal"i]' );
+await page.click( 'role=checkbox[name=Prevent removal]' );

We can do this in one go though.

I also ended up using .toBe() instead of .toMatchInlineSnapshot(). Is this also recommended way to test small pieces of content?

Yes, I don't think it's currently possible to use toMatchInlineSnapshot() in playwright test runner. So we either have to use .toMatchSnapshot() or just .toBe().

Copy link
Member Author

Choose a reason for hiding this comment

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

After we switch to the official role selector when it becomes stable, we can just omit the " to make it more ergonomic.

I thought it became stable in v1.22.0.

Copy link
Member

Choose a reason for hiding this comment

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

Oh awesome! Didn't catch that. I think we can migrate it to the official selector then :)

await page.click( 'role=button[name="Apply"]' );

await expect(
page.locator( 'role=menuitem[name="Remove Paragraph"]' )
).not.toBeVisible();
} );

test( 'can disable movement', async ( { editor, page } ) => {
await editor.insertBlock( { name: 'core/paragraph' } );
await page.keyboard.type( 'First paragraph' );

await editor.insertBlock( { name: 'core/paragraph' } );
await page.keyboard.type( 'Second paragraph' );

await editor.clickBlockOptionsMenuItem( 'Lock' );

await page.click( 'role=checkbox[name="Disable movement"]' );
await page.click( 'role=button[name="Apply"]' );

// Hide options.
await editor.clickBlockToolbarButton( 'Options' );

// Drag handle is hidden.
await expect(
page.locator( 'role=button[name="Drag"]' )
).not.toBeVisible();

// Movers are hidden. No need to check for both.
await expect(
page.locator( 'role=button[name="Move up"]' )
).not.toBeVisible();
} );

test( 'can lock everything', async ( { editor, page } ) => {
await editor.insertBlock( { name: 'core/paragraph' } );
await page.keyboard.type( 'Some paragraph' );

await editor.clickBlockOptionsMenuItem( 'Lock' );

await page.click( 'role=checkbox[name="Lock all"]' );
await page.click( 'role=button[name="Apply"]' );

expect( await editor.getEditedPostContent() )
.toBe( `<!-- wp:paragraph {"lock":{"move":true,"remove":true}} -->
<p>Some paragraph</p>
<!-- /wp:paragraph -->` );
} );

test( 'can unlock from toolbar', async ( { editor, page } ) => {
await editor.insertBlock( { name: 'core/paragraph' } );
await page.keyboard.type( 'Some paragraph' );

await editor.clickBlockOptionsMenuItem( 'Lock' );

await page.click( 'role=checkbox[name="Lock all"]' );
await page.click( 'role=button[name="Apply"]' );

await editor.clickBlockToolbarButton( 'Unlock Paragraph' );
await page.click( 'role=checkbox[name="Lock all"]' );
await page.click( 'role=button[name="Apply"]' );

expect( await editor.getEditedPostContent() )
.toBe( `<!-- wp:paragraph {"lock":{"move":false,"remove":false}} -->
<p>Some paragraph</p>
<!-- /wp:paragraph -->` );
} );
} );
} );