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

Jump to bottom

Migrate Block Mover Test For Playwright #42039

Merged
merged 4 commits into from
Jul 5, 2022
Merged

Migrate Block Mover Test For Playwright #42039

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
0c4c1b4
Migrate Block Mover Test For Playwright
pooja-muchandikar Jun 29, 2022
6e42fd7
Update styling issue
pooja-muchandikar Jun 29, 2022
08eebb4
Resolve errors
pooja-muchandikar Jun 30, 2022
e950296
Addressed Review Feedback
pooja-muchandikar Jul 1, 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
42 changes: 0 additions & 42 deletions packages/e2e-tests/specs/editor/various/block-mover.test.js
View file
Open in desktop

This file was deleted.

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

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

test( 'should show block mover when more than one block exists', async ( {
editor,
page,
} ) => {
// Create a two blocks on the page.
await page.click( '.block-editor-default-block-appender' );
await page.keyboard.type( 'First Paragraph' );
await page.keyboard.press( 'Enter' );
await page.keyboard.type( 'Second Paragraph' );
Copy link
Contributor

@talldan talldan Jul 1, 2022 •
edited
Loading

Choose a reason for hiding this comment

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

I think it would be good to simplify this part with something like:

await editor.insertBlock( { name: 'core/paragraph', attributes: { content: 'First Paragraph' } } );
await editor.insertBlock( { name: 'core/paragraph', attributes: { content: 'Second Paragraph' } } );

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Worked on the feedbacks


// Select a block so the block mover is rendered.
await page.focus( 'text=First Paragraph' );
await editor.showBlockToolbar();
const count = await page.$$eval(
'.block-editor-block-mover',
( el ) => el.length
);
expect( count ).toBe( 1 );
Copy link
Contributor

Choose a reason for hiding this comment

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

It'd be good to take advantage of Playwright's locator system here, and use the role selector:

const moveDownButton = page.locator( 'role=toolbar[name="Block tools"i] >> role=button[name="Move down"i]' );
const moveUpButton = page.locator( 'role=toolbar[name="Block tools"i] >> role=button[name="Move up"i]' );
await expect( moveDownButton ).toBeVisible();
await expect( moveUpButton ).toBeVisible();

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Worked on the feedbacks

} );

test( 'should hide block mover when only one block exists', async ( {
editor,
page,
} ) => {
// Create a single block on the page.
await page.click( '.block-editor-default-block-appender' );
await page.keyboard.type( 'First Paragraph' );
Copy link
Contributor

Choose a reason for hiding this comment

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

Similar to the previous comment, this can change to:

await editor.insertBlock( { name: 'core/paragraph', attributes: { content: 'First Paragraph' } );

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Worked on the feedbacks


// Select a block so the block mover has the possibility of being rendered.
await page.focus( 'text=First Paragraph' );
await editor.showBlockToolbar();

// Ensure no block mover exists when only one block exists on the page.
const count = await page.$$eval(
'.block-editor-block-mover',
( el ) => el.length
);
expect( count ).toBe( 0 );
Copy link
Contributor

Choose a reason for hiding this comment

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

And this part could also be refactored to be use locators:

const moveDownButton = page.locator( 'role=toolbar[name="Block tools"i] >> role=button[name="Move down"i]' );
const moveUpButton = page.locator( 'role=toolbar[name="Block tools"i] >> role=button[name="Move up"i]' );
await expect( moveDownButton ).toBeHidden();
await expect( moveUpButton ).toBeHidden();

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Worked on the feedbacks.

} );
} );