From 5c2bc87e7d509b29e56971241e41b02b4ce4fd26 Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Wed, 7 Sep 2022 09:20:56 +0400 Subject: [PATCH] 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 Co-authored-by: Daniel Richards --- .../block-draggable/draggable-chip.js | 5 +- .../components/block-tools/insertion-point.js | 1 + .../draggable-block.test.js.snap | 41 ----- .../editor/various/draggable-block.test.js | 128 -------------- .../editor/various/draggable-blocks.spec.js | 156 ++++++++++++++++++ 5 files changed, 161 insertions(+), 170 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 create mode 100644 test/e2e/specs/editor/various/draggable-blocks.spec.js 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 5ba2b4b46da3a..f5d8cf5eddc91 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 && ( -

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 500e32c1661a3..0000000000000 --- 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(); - } ); -} ); 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 0000000000000..7ea94b84a2da0 --- /dev/null +++ b/test/e2e/specs/editor/various/draggable-blocks.spec.js @@ -0,0 +1,156 @@ +/** + * WordPress dependencies + */ +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 } ) => { + await admin.createNewPost(); + } ); + + 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 page.focus( 'role=document[name="Paragraph block"i] >> text=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(); + + // 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, { + steps: 10, + } ); + + await expect( + 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. + await expect + .poll( () => indicator.boundingBox().then( ( { y } ) => y ) ) + .toBeLessThan( firstParagraphBound.y ); + + // Drop the paragraph block. + await page.mouse.up(); + + await expect.poll( editor.getEditedPostContent ) + .toBe( ` +

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' ); + + // Confirm correct setup. + await expect.poll( editor.getEditedPostContent ) + .toBe( ` +

1

+ + + +

2

+` ); + + await page.focus( 'role=document[name="Paragraph block"i] >> text=1' ); + 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(); + + // 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(); + await page.mouse.move( + secondParagraphBound.x, + secondParagraphBound.y + secondParagraphBound.height * 0.75, + { steps: 10 } + ); + + await expect( + 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(); + + await expect.poll( editor.getEditedPostContent ) + .toBe( ` +

2

+ + + +

1

+` ); + } ); +} );