Skip to content

Commit 5c2bc87

Browse files
Mamadukakevin940726talldan
authored
WIP: Migrate draggable block tests to Playwright (#43798)
* WIP * Get the first draggable test to work in Playwright * Try adding remaining test * Move mouse in addition to hovering * Set the viewport size * Fix the tests * Make sure to focus on the correct paragraph block * Set viewport in test.use * Try steps * Remove puppeteer test Co-authored-by: Kai Hao <kai@kaihao.dev> Co-authored-by: Daniel Richards <daniel.richards@automattic.com>
1 parent 0f20196 commit 5c2bc87

File tree

5 files changed

+161
-170
lines changed

5 files changed

+161
-170
lines changed

‎packages/block-editor/src/components/block-draggable/draggable-chip.js

+4-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,10 @@ import BlockIcon from '../block-icon';
1313
export default function BlockDraggableChip( { count, icon } ) {
1414
return (
1515
<div className="block-editor-block-draggable-chip-wrapper">
16-
<div className="block-editor-block-draggable-chip">
16+
<div
17+
className="block-editor-block-draggable-chip"
18+
data-testid="block-draggable-chip"
19+
>
1720
<Flex
1821
justify="center"
1922
className="block-editor-block-draggable-chip__content"

‎packages/block-editor/src/components/block-tools/insertion-point.js

+1
Original file line numberDiff line numberDiff line change
@@ -200,6 +200,7 @@ function InsertionPointPopover( {
200200
<motion.div
201201
variants={ lineVariants }
202202
className="block-editor-block-list__insertion-point-indicator"
203+
data-testid="block-list-insertion-point-indicator"
203204
/>
204205
{ isInserterShown && (
205206
<motion.div

‎packages/e2e-tests/specs/editor/various/__snapshots__/draggable-block.test.js.snap

-41
This file was deleted.

‎packages/e2e-tests/specs/editor/various/draggable-block.test.js

-128
This file was deleted.

‎test/e2e/specs/editor/various/draggable-blocks.spec.js

+156
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
/**
2+
* WordPress dependencies
3+
*/
4+
const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
5+
6+
test.use( {
7+
// Make the viewport large enough so that a scrollbar isn't displayed.
8+
// Otherwise, the page scrolling can interfere with the test runner's
9+
// ability to drop a block in the right location.
10+
viewport: {
11+
width: 960,
12+
height: 1024,
13+
},
14+
} );
15+
16+
test.describe( 'Draggable block', () => {
17+
test.beforeEach( async ( { admin } ) => {
18+
await admin.createNewPost();
19+
} );
20+
21+
test( 'can drag and drop to the top of a block list', async ( {
22+
editor,
23+
page,
24+
} ) => {
25+
await page.keyboard.press( 'Enter' );
26+
await page.keyboard.type( '1' );
27+
await page.keyboard.press( 'Enter' );
28+
await page.keyboard.type( '2' );
29+
30+
// Confirm correct setup.
31+
await expect.poll( editor.getEditedPostContent )
32+
.toBe( `<!-- wp:paragraph -->
33+
<p>1</p>
34+
<!-- /wp:paragraph -->
35+
36+
<!-- wp:paragraph -->
37+
<p>2</p>
38+
<!-- /wp:paragraph -->` );
39+
40+
await page.focus( 'role=document[name="Paragraph block"i] >> text=2' );
41+
await editor.showBlockToolbar();
42+
43+
const dragHandle = page.locator(
44+
'role=toolbar[name="Block tools"i] >> role=button[name="Drag"i][include-hidden]'
45+
);
46+
// Hover to the center of the drag handle.
47+
await dragHandle.hover();
48+
// Start dragging.
49+
await page.mouse.down();
50+
51+
// Move to and hover on the upper half of the paragraph block to trigger the indicator.
52+
const firstParagraph = page.locator(
53+
'role=document[name="Paragraph block"i] >> text=1'
54+
);
55+
const firstParagraphBound = await firstParagraph.boundingBox();
56+
await page.mouse.move( firstParagraphBound.x, firstParagraphBound.y, {
57+
steps: 10,
58+
} );
59+
60+
await expect(
61+
page.locator( 'data-testid=block-draggable-chip >> visible=true' )
62+
).toBeVisible();
63+
64+
const indicator = page.locator(
65+
'data-testid=block-list-insertion-point-indicator'
66+
);
67+
await expect( indicator ).toBeVisible();
68+
// Expect the indicator to be above the first paragraph.
69+
await expect
70+
.poll( () => indicator.boundingBox().then( ( { y } ) => y ) )
71+
.toBeLessThan( firstParagraphBound.y );
72+
73+
// Drop the paragraph block.
74+
await page.mouse.up();
75+
76+
await expect.poll( editor.getEditedPostContent )
77+
.toBe( `<!-- wp:paragraph -->
78+
<p>2</p>
79+
<!-- /wp:paragraph -->
80+
81+
<!-- wp:paragraph -->
82+
<p>1</p>
83+
<!-- /wp:paragraph -->` );
84+
} );
85+
86+
test( 'can drag and drop to the bottom of a block list', async ( {
87+
editor,
88+
page,
89+
} ) => {
90+
await page.keyboard.press( 'Enter' );
91+
await page.keyboard.type( '1' );
92+
await page.keyboard.press( 'Enter' );
93+
await page.keyboard.type( '2' );
94+
95+
// Confirm correct setup.
96+
await expect.poll( editor.getEditedPostContent )
97+
.toBe( `<!-- wp:paragraph -->
98+
<p>1</p>
99+
<!-- /wp:paragraph -->
100+
101+
<!-- wp:paragraph -->
102+
<p>2</p>
103+
<!-- /wp:paragraph -->` );
104+
105+
await page.focus( 'role=document[name="Paragraph block"i] >> text=1' );
106+
await editor.showBlockToolbar();
107+
108+
const dragHandle = page.locator(
109+
'role=toolbar[name="Block tools"i] >> role=button[name="Drag"i][include-hidden]'
110+
);
111+
// Hover to the center of the drag handle.
112+
await dragHandle.hover();
113+
// Start dragging.
114+
await page.mouse.down();
115+
116+
// Move to and hover on the bottom half of the paragraph block to trigger the indicator.
117+
const secondParagraph = page.locator(
118+
'role=document[name="Paragraph block"i] >> text=2'
119+
);
120+
const secondParagraphBound = await secondParagraph.boundingBox();
121+
await page.mouse.move(
122+
secondParagraphBound.x,
123+
secondParagraphBound.y + secondParagraphBound.height * 0.75,
124+
{ steps: 10 }
125+
);
126+
127+
await expect(
128+
page.locator( 'data-testid=block-draggable-chip >> visible=true' )
129+
).toBeVisible();
130+
131+
const indicator = page.locator(
132+
'data-testid=block-list-insertion-point-indicator'
133+
);
134+
await expect( indicator ).toBeVisible();
135+
// Expect the indicator to be below the second paragraph.
136+
await expect
137+
.poll( () =>
138+
indicator.boundingBox().then( ( { y, height } ) => y + height )
139+
)
140+
.toBeGreaterThan(
141+
secondParagraphBound.y + secondParagraphBound.height
142+
);
143+
144+
// Drop the paragraph block.
145+
await page.mouse.up();
146+
147+
await expect.poll( editor.getEditedPostContent )
148+
.toBe( `<!-- wp:paragraph -->
149+
<p>2</p>
150+
<!-- /wp:paragraph -->
151+
152+
<!-- wp:paragraph -->
153+
<p>1</p>
154+
<!-- /wp:paragraph -->` );
155+
} );
156+
} );

0 commit comments

Comments
 (0)