From 406cbb786e6c6865f1ecd1813e188f8cb37b039d Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Fri, 2 Sep 2022 11:23:24 +0400 Subject: [PATCH 01/10] WIP --- .../editor/various/draggable-blocks.spec.js | 74 +++++++++++++++++++ 1 file changed, 74 insertions(+) create mode 100644 test/e2e/specs/editor/various/draggable-blocks.spec.js diff --git a/test/e2e/specs/editor/various/draggable-blocks.spec.js b/test/e2e/specs/editor/various/draggable-blocks.spec.js new file mode 100644 index 00000000000000..cb4142b4b5402f --- /dev/null +++ b/test/e2e/specs/editor/various/draggable-blocks.spec.js @@ -0,0 +1,74 @@ +/** + * WordPress dependencies + */ +const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' ); + +test.describe( 'Draggable block', () => { + test.beforeEach( async ( { admin, page } ) => { + await admin.createNewPost(); + await page.setViewportSize( { + width: 960, + height: 1024, + } ); + } ); + + test( 'can drag and drop to the top of a block list', async ( { + editor, + page, + } ) => { + await page.keyboard.press( 'Enter' ); + await page.keyboard.type( '1' ); + await page.keyboard.press( 'Enter' ); + await page.keyboard.type( '2' ); + + // Confirm correct setup. + await expect.poll( editor.getEditedPostContent ) + .toBe( ` +

1

+ + + +

2

+` ); + + 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 + ); + await page.mouse.down(); + + // Everything works up until now. + await page.mouse.move( + targetRect.x, + // Drag to the top half. + targetRect.y - targetRect.height * 0.25 + ); + + // Wait for the insertion point to be visible. + await expect( + page.locator( '.block-editor-block-list__insertion-point' ) + ).toBeVisible(); + + await page.mouse.up(); + } ); + + test.fixme( + 'can drag and drop to the bottom of a block list', + async () => {} + ); +} ); From 9428ff5bc86a36f645b09ab1664b9c3f2ca584d2 Mon Sep 17 00:00:00 2001 From: Kai Hao Date: Mon, 5 Sep 2022 11:00:26 +0800 Subject: [PATCH 02/10] Get the first draggable test to work in Playwright --- .../block-draggable/draggable-chip.js | 5 +- .../components/block-tools/insertion-point.js | 1 + .../editor/various/draggable-blocks.spec.js | 64 +++++++++---------- 3 files changed, 36 insertions(+), 34 deletions(-) diff --git a/packages/block-editor/src/components/block-draggable/draggable-chip.js b/packages/block-editor/src/components/block-draggable/draggable-chip.js index 5ba2b4b46da3a0..f5d8cf5eddc91e 100644 --- a/packages/block-editor/src/components/block-draggable/draggable-chip.js +++ b/packages/block-editor/src/components/block-draggable/draggable-chip.js @@ -13,7 +13,10 @@ import BlockIcon from '../block-icon'; export default function BlockDraggableChip( { count, icon } ) { return (
-
+
{ isInserterShown && ( { - test.beforeEach( async ( { admin, page } ) => { + test.beforeEach( async ( { admin } ) => { await admin.createNewPost(); - await page.setViewportSize( { - width: 960, - height: 1024, - } ); } ); test( 'can drag and drop to the top of a block list', async ( { @@ -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]' ); + // 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( ` +

2

+ + + +

1

+` ); + } ); } ); From 205916c98844bc7b90b868c239bdb3c246e59b75 Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Mon, 5 Sep 2022 16:24:27 +0400 Subject: [PATCH 03/10] Try adding remaining test --- .../editor/various/draggable-blocks.spec.js | 72 +++++++++++++++++++ 1 file changed, 72 insertions(+) diff --git a/test/e2e/specs/editor/various/draggable-blocks.spec.js b/test/e2e/specs/editor/various/draggable-blocks.spec.js index 24c6d366f9024c..63f8a7ca75d07b 100644 --- a/test/e2e/specs/editor/various/draggable-blocks.spec.js +++ b/test/e2e/specs/editor/various/draggable-blocks.spec.js @@ -65,6 +65,78 @@ test.describe( 'Draggable block', () => {

2

+ +

1

+` ); + } ); + + test( 'can drag and drop to the bottom of a block list', async ( { + editor, + page, + } ) => { + await page.keyboard.press( 'Enter' ); + await page.keyboard.type( '1' ); + await page.keyboard.press( 'Enter' ); + await page.keyboard.type( '2' ); + await page.keyboard.press( 'ArrowUp' ); + + // Confirm correct setup. + await expect.poll( editor.getEditedPostContent ) + .toBe( ` +

1

+ + + +

2

+` ); + + await editor.showBlockToolbar(); + + const dragHandle = page.locator( + 'role=toolbar[name="Block tools"i] >> role=button[name="Drag"i][include-hidden]' + ); + // 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, + } ); + + 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. + const secondParagraph = page.locator( + 'role=document[name="Paragraph block"i] >> text=2' + ); + const secondParagraphBound = await secondParagraph.boundingBox(); + + // Hover on the bottom half of the paragraph block to trigger the indicator. + await secondParagraph.hover( { + position: { + x: 0, + y: secondParagraphBound.height * 0.75, + }, + } ); + + // await expect( + // page.locator( 'data-testid=block-list-insertion-point-indicator' ) + // ).toBeVisible(); + + // Drop the paragraph block. + await page.mouse.up(); + + await expect.poll( editor.getEditedPostContent ) + .toBe( ` +

2

+ +

1

` ); From 52e1b7df8f6bbb2f89937160ceaa3b2a04fdc4b1 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Tue, 6 Sep 2022 13:21:57 +0800 Subject: [PATCH 04/10] Move mouse in addition to hovering --- .../editor/various/draggable-blocks.spec.js | 23 ++++++++++++------- 1 file changed, 15 insertions(+), 8 deletions(-) diff --git a/test/e2e/specs/editor/various/draggable-blocks.spec.js b/test/e2e/specs/editor/various/draggable-blocks.spec.js index 63f8a7ca75d07b..4631740e2aa3bd 100644 --- a/test/e2e/specs/editor/various/draggable-blocks.spec.js +++ b/test/e2e/specs/editor/various/draggable-blocks.spec.js @@ -48,8 +48,13 @@ test.describe( 'Draggable block', () => { 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', { + // Move to and hover on the upper half of the paragraph block to trigger the indicator. + const firstParagraph = page.locator( + 'role=document[name="Paragraph block"i] >> text=1' + ); + const firstParagraphBound = await firstParagraph.boundingBox(); + await page.mouse.move( firstParagraphBound.x, firstParagraphBound.y ); + await firstParagraph.hover( { position: { x: 0, y: 0 }, } ); @@ -111,13 +116,15 @@ test.describe( 'Draggable block', () => { page.locator( 'data-testid=block-draggable-chip >> visible=true' ) ).toBeVisible(); - // Hover on the upper half of the paragraph block to trigger the indicator. + // Move to and hover on the bottom half of the paragraph block to trigger the indicator. const secondParagraph = page.locator( 'role=document[name="Paragraph block"i] >> text=2' ); const secondParagraphBound = await secondParagraph.boundingBox(); - - // Hover on the bottom half of the paragraph block to trigger the indicator. + await page.mouse.move( + secondParagraphBound.x, + secondParagraphBound.y + secondParagraphBound.height * 0.75 + ); await secondParagraph.hover( { position: { x: 0, @@ -125,9 +132,9 @@ test.describe( 'Draggable block', () => { }, } ); - // await expect( - // page.locator( 'data-testid=block-list-insertion-point-indicator' ) - // ).toBeVisible(); + await expect( + page.locator( 'data-testid=block-list-insertion-point-indicator' ) + ).toBeVisible(); // Drop the paragraph block. await page.mouse.up(); From e6dc8e26f384d5e11b2379441bf195d2d980c57d Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Tue, 6 Sep 2022 15:19:55 +0800 Subject: [PATCH 05/10] Set the viewport size --- .../specs/editor/various/draggable-blocks.spec.js | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/test/e2e/specs/editor/various/draggable-blocks.spec.js b/test/e2e/specs/editor/various/draggable-blocks.spec.js index 4631740e2aa3bd..6fa49200017d58 100644 --- a/test/e2e/specs/editor/various/draggable-blocks.spec.js +++ b/test/e2e/specs/editor/various/draggable-blocks.spec.js @@ -4,8 +4,15 @@ const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' ); test.describe( 'Draggable block', () => { - test.beforeEach( async ( { admin } ) => { + test.beforeEach( async ( { admin, page } ) => { await admin.createNewPost(); + // Make the viewport large enough so that a scrollbar isn't displayed. + // Otherwise, the page scrolling can interfere with the test runner's + // ability to drop a block in the right location. + await page.setViewportSize( { + width: 960, + height: 1024, + } ); } ); test( 'can drag and drop to the top of a block list', async ( { @@ -122,12 +129,12 @@ test.describe( 'Draggable block', () => { ); const secondParagraphBound = await secondParagraph.boundingBox(); await page.mouse.move( - secondParagraphBound.x, + secondParagraphBound.x + secondParagraphBound.height * 0.5, secondParagraphBound.y + secondParagraphBound.height * 0.75 ); await secondParagraph.hover( { position: { - x: 0, + x: secondParagraphBound.width * 0.75, y: secondParagraphBound.height * 0.75, }, } ); From ca97f563abc9d6f803bc88a90423178ee06d88b5 Mon Sep 17 00:00:00 2001 From: Kai Hao Date: Tue, 6 Sep 2022 15:45:54 +0800 Subject: [PATCH 06/10] Fix the tests --- .../editor/various/draggable-blocks.spec.js | 62 +++++++++---------- 1 file changed, 29 insertions(+), 33 deletions(-) diff --git a/test/e2e/specs/editor/various/draggable-blocks.spec.js b/test/e2e/specs/editor/various/draggable-blocks.spec.js index 6fa49200017d58..9810e79ef4967f 100644 --- a/test/e2e/specs/editor/various/draggable-blocks.spec.js +++ b/test/e2e/specs/editor/various/draggable-blocks.spec.js @@ -43,32 +43,32 @@ test.describe( 'Draggable block', () => { 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, - } ); - - await expect( - page.locator( 'data-testid=block-draggable-chip >> visible=true' ) - ).toBeVisible(); // Move to and hover on the upper half of the paragraph block to trigger the indicator. const firstParagraph = page.locator( 'role=document[name="Paragraph block"i] >> text=1' ); - const firstParagraphBound = await firstParagraph.boundingBox(); - await page.mouse.move( firstParagraphBound.x, firstParagraphBound.y ); await firstParagraph.hover( { position: { x: 0, y: 0 }, + // The block will be blocked by toolbar popover, but it will soon disappear + // after we start dragging. + force: true, } ); await expect( - page.locator( 'data-testid=block-list-insertion-point-indicator' ) + page.locator( 'data-testid=block-draggable-chip >> visible=true' ) ).toBeVisible(); + const indicator = page.locator( + 'data-testid=block-list-insertion-point-indicator' + ); + await expect( indicator ).toBeVisible(); + // Expect the indicator to be above the first paragraph. + const firstParagraphBound = await firstParagraph.boundingBox(); + await expect + .poll( () => indicator.boundingBox().then( ( { y } ) => y ) ) + .toBeLessThan( firstParagraphBound.y ); + // Drop the paragraph block. await page.mouse.up(); @@ -111,17 +111,6 @@ test.describe( 'Draggable block', () => { 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, - } ); - - await expect( - page.locator( 'data-testid=block-draggable-chip >> visible=true' ) - ).toBeVisible(); // Move to and hover on the bottom half of the paragraph block to trigger the indicator. const secondParagraph = page.locator( @@ -129,20 +118,27 @@ test.describe( 'Draggable block', () => { ); const secondParagraphBound = await secondParagraph.boundingBox(); await page.mouse.move( - secondParagraphBound.x + secondParagraphBound.height * 0.5, + secondParagraphBound.x, secondParagraphBound.y + secondParagraphBound.height * 0.75 ); - await secondParagraph.hover( { - position: { - x: secondParagraphBound.width * 0.75, - y: secondParagraphBound.height * 0.75, - }, - } ); await expect( - page.locator( 'data-testid=block-list-insertion-point-indicator' ) + page.locator( 'data-testid=block-draggable-chip >> visible=true' ) ).toBeVisible(); + const indicator = page.locator( + 'data-testid=block-list-insertion-point-indicator' + ); + await expect( indicator ).toBeVisible(); + // Expect the indicator to be below the second paragraph. + await expect + .poll( () => + indicator.boundingBox().then( ( { y, height } ) => y + height ) + ) + .toBeGreaterThan( + secondParagraphBound.y + secondParagraphBound.height + ); + // Drop the paragraph block. await page.mouse.up(); From de436b96c2b36c8cdd26dae1ad3950e78b7d8656 Mon Sep 17 00:00:00 2001 From: Kai Hao Date: Tue, 6 Sep 2022 16:18:43 +0800 Subject: [PATCH 07/10] Make sure to focus on the correct paragraph block --- test/e2e/specs/editor/various/draggable-blocks.spec.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/test/e2e/specs/editor/various/draggable-blocks.spec.js b/test/e2e/specs/editor/various/draggable-blocks.spec.js index 9810e79ef4967f..06c34292fe10d0 100644 --- a/test/e2e/specs/editor/various/draggable-blocks.spec.js +++ b/test/e2e/specs/editor/various/draggable-blocks.spec.js @@ -34,6 +34,7 @@ test.describe( 'Draggable block', () => {

2

` ); + await page.focus( 'role=document[name="Paragraph block"i] >> text=2' ); await editor.showBlockToolbar(); const dragHandle = page.locator( @@ -90,7 +91,6 @@ test.describe( 'Draggable block', () => { await page.keyboard.type( '1' ); await page.keyboard.press( 'Enter' ); await page.keyboard.type( '2' ); - await page.keyboard.press( 'ArrowUp' ); // Confirm correct setup. await expect.poll( editor.getEditedPostContent ) @@ -102,6 +102,7 @@ test.describe( 'Draggable block', () => {

2

` ); + await page.focus( 'role=document[name="Paragraph block"i] >> text=1' ); await editor.showBlockToolbar(); const dragHandle = page.locator( From 8475658b93964b5f79f4e34c52ae6d666b1684f8 Mon Sep 17 00:00:00 2001 From: Kai Hao Date: Tue, 6 Sep 2022 16:45:47 +0800 Subject: [PATCH 08/10] Set viewport in test.use --- .../editor/various/draggable-blocks.spec.js | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/test/e2e/specs/editor/various/draggable-blocks.spec.js b/test/e2e/specs/editor/various/draggable-blocks.spec.js index 06c34292fe10d0..1a33d5f92e1ac5 100644 --- a/test/e2e/specs/editor/various/draggable-blocks.spec.js +++ b/test/e2e/specs/editor/various/draggable-blocks.spec.js @@ -3,16 +3,19 @@ */ const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' ); +test.use( { + // Make the viewport large enough so that a scrollbar isn't displayed. + // Otherwise, the page scrolling can interfere with the test runner's + // ability to drop a block in the right location. + viewport: { + width: 960, + height: 1024, + }, +} ); + test.describe( 'Draggable block', () => { - test.beforeEach( async ( { admin, page } ) => { + test.beforeEach( async ( { admin } ) => { await admin.createNewPost(); - // Make the viewport large enough so that a scrollbar isn't displayed. - // Otherwise, the page scrolling can interfere with the test runner's - // ability to drop a block in the right location. - await page.setViewportSize( { - width: 960, - height: 1024, - } ); } ); test( 'can drag and drop to the top of a block list', async ( { From 4895b8af7cbfe82a21b9d7673292bc89a89ea7f8 Mon Sep 17 00:00:00 2001 From: Kai Hao Date: Tue, 6 Sep 2022 21:22:17 +0800 Subject: [PATCH 09/10] Try steps --- .../specs/editor/various/draggable-blocks.spec.js | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/test/e2e/specs/editor/various/draggable-blocks.spec.js b/test/e2e/specs/editor/various/draggable-blocks.spec.js index 1a33d5f92e1ac5..7ea94b84a2da08 100644 --- a/test/e2e/specs/editor/various/draggable-blocks.spec.js +++ b/test/e2e/specs/editor/various/draggable-blocks.spec.js @@ -52,11 +52,9 @@ test.describe( 'Draggable block', () => { const firstParagraph = page.locator( 'role=document[name="Paragraph block"i] >> text=1' ); - await firstParagraph.hover( { - position: { x: 0, y: 0 }, - // The block will be blocked by toolbar popover, but it will soon disappear - // after we start dragging. - force: true, + const firstParagraphBound = await firstParagraph.boundingBox(); + await page.mouse.move( firstParagraphBound.x, firstParagraphBound.y, { + steps: 10, } ); await expect( @@ -68,7 +66,6 @@ test.describe( 'Draggable block', () => { ); await expect( indicator ).toBeVisible(); // Expect the indicator to be above the first paragraph. - const firstParagraphBound = await firstParagraph.boundingBox(); await expect .poll( () => indicator.boundingBox().then( ( { y } ) => y ) ) .toBeLessThan( firstParagraphBound.y ); @@ -123,7 +120,8 @@ test.describe( 'Draggable block', () => { const secondParagraphBound = await secondParagraph.boundingBox(); await page.mouse.move( secondParagraphBound.x, - secondParagraphBound.y + secondParagraphBound.height * 0.75 + secondParagraphBound.y + secondParagraphBound.height * 0.75, + { steps: 10 } ); await expect( From 2d99682c7b77c09e91b63817f6340a7daba7ac96 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Wed, 7 Sep 2022 10:31:43 +0800 Subject: [PATCH 10/10] Remove puppeteer test --- .../draggable-block.test.js.snap | 41 ------ .../editor/various/draggable-block.test.js | 128 ------------------ 2 files changed, 169 deletions(-) delete mode 100644 packages/e2e-tests/specs/editor/various/__snapshots__/draggable-block.test.js.snap delete mode 100644 packages/e2e-tests/specs/editor/various/draggable-block.test.js diff --git a/packages/e2e-tests/specs/editor/various/__snapshots__/draggable-block.test.js.snap b/packages/e2e-tests/specs/editor/various/__snapshots__/draggable-block.test.js.snap deleted file mode 100644 index cef8263aca7c6a..00000000000000 --- a/packages/e2e-tests/specs/editor/various/__snapshots__/draggable-block.test.js.snap +++ /dev/null @@ -1,41 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Draggable block can drag and drop to the bottom of a block list 1`] = ` -" -

1

- - - -

2

-" -`; - -exports[`Draggable block can drag and drop to the bottom of a block list 2`] = ` -" -

2

- - - -

1

-" -`; - -exports[`Draggable block can drag and drop to the top of a block list 1`] = ` -" -

1

- - - -

2

-" -`; - -exports[`Draggable block can drag and drop to the top of a block list 2`] = ` -" -

2

- - - -

1

-" -`; diff --git a/packages/e2e-tests/specs/editor/various/draggable-block.test.js b/packages/e2e-tests/specs/editor/various/draggable-block.test.js deleted file mode 100644 index 500e32c1661a39..00000000000000 --- a/packages/e2e-tests/specs/editor/various/draggable-block.test.js +++ /dev/null @@ -1,128 +0,0 @@ -/** - * WordPress dependencies - */ -import { - getEditedPostContent, - createNewPost, - deactivatePlugin, - activatePlugin, - showBlockToolbar, - setBrowserViewport, - waitForWindowDimensions, - clickBlockAppender, -} from '@wordpress/e2e-test-utils'; - -describe.skip( 'Draggable block', () => { - // Tests don't seem to pass if beforeAll and afterAll are used. - // Unsure why. - beforeEach( async () => { - await deactivatePlugin( - 'gutenberg-test-plugin-disables-the-css-animations' - ); - - // Set the viewport at a larger size than normal to ensure scrolling doesn't occur. - // Scrolling can interfere with the drag coordinates. - await page.setViewport( { width: 960, height: 1024 } ); - await waitForWindowDimensions( 960, 1024 ); - await createNewPost(); - await page.setDragInterception( true ); - } ); - - afterEach( async () => { - await page.setDragInterception( false ); - - // Reset the viewport to normal large size. - await setBrowserViewport( 'large' ); - await activatePlugin( - 'gutenberg-test-plugin-disables-the-css-animations' - ); - } ); - - it( 'can drag and drop to the top of a block list', async () => { - await clickBlockAppender(); - await page.keyboard.type( '1' ); - await page.keyboard.press( 'Enter' ); - await page.keyboard.type( '2' ); - - // Confirm correct setup. - expect( await getEditedPostContent() ).toMatchSnapshot(); - - await showBlockToolbar(); - const dragHandle = await page.waitForSelector( - '.block-editor-block-mover__drag-handle' - ); - const dragHandlePoint = await dragHandle.clickablePoint(); - - const firstParagraph = await page.$( '[data-type="core/paragraph"]' ); - const targetPoint = await firstParagraph.clickablePoint(); - const targetRect = await firstParagraph.boundingBox(); - const target = { - x: targetPoint.x, - // Drag to the top half. - y: targetPoint.y - targetRect.height * 0.25, - }; - - const dragData = await page.mouse.drag( dragHandlePoint, target ); - await page.mouse.dragEnter( target, dragData ); - await page.mouse.dragOver( target, dragData ); - - // Wait for the insertion point to be visible. - const insertionPoint = await page.waitForSelector( - '.block-editor-block-list__insertion-point' - ); - - // Expect the insertion point to be visible above the first paragraph. - const insertionPointBoundingBox = await insertionPoint.boundingBox(); - expect( insertionPointBoundingBox.y ).toBeLessThan( target.y ); - - await page.mouse.drop( target, dragData ); - - expect( await getEditedPostContent() ).toMatchSnapshot(); - } ); - - it( 'can drag and drop to the bottom of a block list', async () => { - await clickBlockAppender(); - await page.keyboard.type( '1' ); - await page.keyboard.press( 'Enter' ); - await page.keyboard.type( '2' ); - await page.keyboard.press( 'ArrowUp' ); - - // Confirm correct setup. - expect( await getEditedPostContent() ).toMatchSnapshot(); - - const [ , secondParagraph ] = await page.$$( - '[data-type="core/paragraph"]' - ); - - await showBlockToolbar(); - const dragHandle = await page.waitForSelector( - '.block-editor-block-mover__drag-handle' - ); - const dragHandlePoint = await dragHandle.clickablePoint(); - - const targetPoint = await secondParagraph.clickablePoint(); - const targetRect = await secondParagraph.boundingBox(); - const target = { - x: targetPoint.x, - // Drag to the bottom half. - y: targetPoint.y + targetRect.height * 0.25, - }; - - const dragData = await page.mouse.drag( dragHandlePoint, target ); - await page.mouse.dragEnter( target, dragData ); - await page.mouse.dragOver( target, dragData ); - - // Wait for the insertion point to be visible. - const insertionPoint = await page.waitForSelector( - '.block-editor-block-list__insertion-point' - ); - - // Expect the insertion point to be visible below the first paragraph. - const insertionPointBoundingBox = await insertionPoint.boundingBox(); - expect( insertionPointBoundingBox.y ).toBeGreaterThan( target.y ); - - await page.mouse.drop( target, dragData ); - - expect( await getEditedPostContent() ).toMatchSnapshot(); - } ); -} );