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 draggable block tests to Playwright #43798

Merged
merged 10 commits into from
Sep 7, 2022
Merged

Migrate draggable block tests to Playwright #43798

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
406cbb7
WIP
Mamaduka Sep 2, 2022
9428ff5
Get the first draggable test to work in Playwright
kevin940726 Sep 5, 2022
205916c
Try adding remaining test
Mamaduka Sep 5, 2022
52e1b7d
Move mouse in addition to hovering
talldan Sep 6, 2022
e6dc8e2
Set the viewport size
talldan Sep 6, 2022
ca97f56
Fix the tests
kevin940726 Sep 6, 2022
de436b9
Make sure to focus on the correct paragraph block
kevin940726 Sep 6, 2022
8475658
Set viewport in test.use
kevin940726 Sep 6, 2022
4895b8a
Try steps
kevin940726 Sep 6, 2022
2d99682
Remove puppeteer test
talldan Sep 7, 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
5 changes: 4 additions & 1 deletion packages/block-editor/src/components/block-draggable/draggable-chip.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,10 @@ import BlockIcon from '../block-icon';
export default function BlockDraggableChip( { count, icon } ) {
return (
<div className="block-editor-block-draggable-chip-wrapper">
<div className="block-editor-block-draggable-chip">
<div
className="block-editor-block-draggable-chip"
data-testid="block-draggable-chip"
ntsekouras marked this conversation as resolved.
Show resolved Hide resolved
>
<Flex
justify="center"
className="block-editor-block-draggable-chip__content"
Expand Down
1 change: 1 addition & 0 deletions packages/block-editor/src/components/block-tools/insertion-point.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -200,6 +200,7 @@ function InsertionPointPopover( {
<motion.div
variants={ lineVariants }
className="block-editor-block-list__insertion-point-indicator"
data-testid="block-list-insertion-point-indicator"
/>
{ isInserterShown && (
<motion.div
Expand Down
64 changes: 31 additions & 33 deletions test/e2e/specs/editor/various/draggable-blocks.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,8 @@
const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );

test.describe( 'Draggable block', () => {
test.beforeEach( async ( { admin, page } ) => {
test.beforeEach( async ( { admin } ) => {
await admin.createNewPost();
await page.setViewportSize( {
kevin940726 marked this conversation as resolved.
Show resolved Hide resolved
width: 960,
height: 1024,
} );
} );

test( 'can drag and drop to the top of a block list', async ( {
Expand All @@ -33,42 +29,44 @@ test.describe( 'Draggable block', () => {

await editor.showBlockToolbar();

// The role selector doesn't work for drag handle.
const dragHandle = page.locator(
'.block-editor-block-mover__drag-handle'
);
const firstParagraph = page.locator(
'role=document[name="Paragraph block"i]',
{
hasText: '1',
}
);
const dragHandleRect = await dragHandle.boundingBox();
const targetRect = await firstParagraph.boundingBox();

await page.mouse.move(
dragHandleRect.x + dragHandleRect.width / 2,
dragHandleRect.y + dragHandleRect.height / 2
'role=toolbar[name="Block tools"i] >> role=button[name="Drag"i][include-hidden]'
kevin940726 marked this conversation as resolved.
Show resolved Hide resolved
);
// Hover to the center of the drag handle.
await dragHandle.hover();
// Start dragging.
await page.mouse.down();
await dragHandle.hover( {
// Move the dragged handle a little bit (to the top left of the handle's
// original location) to trigger the dragging chip to appear.
position: { x: 0, y: 0 },
// Bypass the "actionability" checks because the handle will disappear.
force: true,
} );

// Everything works up until now.
await page.mouse.move(
targetRect.x,
// Drag to the top half.
targetRect.y - targetRect.height * 0.25
);
await expect(
page.locator( 'data-testid=block-draggable-chip >> visible=true' )
).toBeVisible();

// Hover on the upper half of the paragraph block to trigger the indicator.
await page.hover( 'role=document[name="Paragraph block"i] >> text=1', {
position: { x: 0, y: 0 },
} );

// Wait for the insertion point to be visible.
await expect(
page.locator( '.block-editor-block-list__insertion-point' )
page.locator( 'data-testid=block-list-insertion-point-indicator' )
).toBeVisible();

// Drop the paragraph block.
await page.mouse.up();
} );

test.fixme(
'can drag and drop to the bottom of a block list',
async () => {}
);
await expect.poll( editor.getEditedPostContent )
.toBe( `<!-- wp:paragraph -->
<p>2</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>1</p>
<!-- /wp:paragraph -->` );
} );
} );