Skip to content

Commit

Permalink
Update e2e tests to use new puppeteer drag and drop api (#33386)
Browse files Browse the repository at this point in the history 
* Update draggable block test

* Update drag and resize utility

* Update multi-selection tests

* Switch from dragAndDrop for spacer test
  • Loading branch information
@talldan
talldan committed Jul 13, 2021
1 parent e2b5503 commit af7c07c
Show file tree
Hide file tree
Showing 3 changed files with 32 additions and 125 deletions.
15 changes: 3 additions & 12 deletions packages/e2e-test-utils/src/drag-and-resize.js
View file
Expand Up @@ -9,18 +9,9 @@
* @return {Promise} Promise resolving when drag completes.
*/
export async function dragAndResize( element, delta ) {
const {
x: elementX,
y: elementY,
width: elementWidth,
height: elementHeight,
} = await element.boundingBox();

const originX = elementX + elementWidth / 2;
const originY = elementY + elementHeight / 2;

await page.mouse.move( originX, originY );
const elementPoint = await element.clickablePoint();
await page.mouse.move( elementPoint.x, elementPoint.y );
await page.mouse.down();
await page.mouse.move( originX + delta.x, originY + delta.y );
await page.mouse.move( elementPoint.x + delta.x, elementPoint.y + delta.y );
await page.mouse.up();
}
60 changes: 10 additions & 50 deletions packages/e2e-tests/specs/editor/various/draggable-block.test.js
View file
Expand Up @@ -11,12 +11,14 @@ import {

describe( 'Draggable block', () => {
beforeAll( async () => {
await page.setDragInterception( true );
await deactivatePlugin(
'gutenberg-test-plugin-disables-the-css-animations'
);
} );

afterAll( async () => {
await page.setDragInterception( false );
await activatePlugin(
'gutenberg-test-plugin-disables-the-css-animations'
);
Expand All @@ -36,62 +38,20 @@ describe( 'Draggable block', () => {
expect( await getEditedPostContent() ).toMatchSnapshot();

await showBlockToolbar();
await page.waitForSelector( '.block-editor-block-mover__drag-handle' );

const dragHandle = await page.$(
const dragHandle = await page.waitForSelector(
'.block-editor-block-mover__drag-handle'
);
const dragHandleRect = await dragHandle.boundingBox();
const x = dragHandleRect.x + dragHandleRect.width / 2;
const y = dragHandleRect.y + dragHandleRect.height / 2;

await page.evaluate( () => {
document.addEventListener( 'dragstart', ( event ) => {
window._dataTransfer = JSON.parse(
event.dataTransfer.getData( 'wp-blocks' )
);
} );
} );

await page.mouse.move( x, y );
await page.mouse.down();

await page.mouse.move( x + 10, y + 10, { steps: 10 } );

// Confirm dragged state.
await page.waitForSelector( '.block-editor-block-mover__drag-clone' );
const dragHandlePoint = await dragHandle.clickablePoint();

const paragraph = await page.$( '[data-type="core/paragraph"]' );

const paragraphPoint = await paragraph.clickablePoint();
const paragraphRect = await paragraph.boundingBox();
const pX = paragraphRect.x + paragraphRect.width / 2;
const pY = paragraphRect.y + paragraphRect.height / 3;

// Move over upper side of the first paragraph.
await page.mouse.move( pX, pY, { steps: 10 } );

// Puppeteer fires the initial `dragstart` event, but no further events.
// Simulating the drop event works.
await paragraph.evaluate(
( element, clientX, clientY ) => {
const dataTransfer = new DataTransfer();
dataTransfer.setData(
'wp-blocks',
JSON.stringify( window._dataTransfer )
);
const event = new DragEvent( 'drop', {
bubbles: true,
clientX,
clientY,
dataTransfer,
} );
element.dispatchEvent( event );
},
pX,
pY
);

await page.mouse.up();
await page.mouse.dragAndDrop( dragHandlePoint, {
x: paragraphPoint.x,
// Drag to the top half.
y: paragraphPoint.y - paragraphRect.height / 4,
} );

expect( await getEditedPostContent() ).toMatchSnapshot();
} );
Expand Down
82 changes: 19 additions & 63 deletions packages/e2e-tests/specs/editor/various/multi-block-selection.test.js
View file
Expand Up @@ -295,23 +295,11 @@ describe( 'Multi-block selection', () => {
await page.keyboard.type( '2' );
await page.keyboard.press( 'ArrowUp' );

const [ coord1, coord2 ] = await page.evaluate( () => {
const elements = Array.from(
document.querySelectorAll( '[data-type="core/paragraph"]' )
);
const rect1 = elements[ 0 ].getBoundingClientRect();
const rect2 = elements[ 1 ].getBoundingClientRect();
return [
{
x: rect1.x + rect1.width / 2,
y: rect1.y + rect1.height / 2,
},
{
x: rect2.x + rect2.width / 2,
y: rect2.y + rect2.height / 2,
},
];
} );
const [ paragraph1, paragraph2 ] = await page.$$(
'[data-type="core/paragraph"]'
);
const coord1 = await paragraph1.clickablePoint();
const coord2 = await paragraph2.clickablePoint();

await page.mouse.move( coord1.x, coord1.y );
await page.mouse.down();
Expand Down Expand Up @@ -344,24 +332,11 @@ describe( 'Multi-block selection', () => {

await page.keyboard.type( '2' );

const [ coord1, coord2 ] = await page.evaluate( () => {
const elements = Array.from(
document.querySelectorAll( '[data-type="core/paragraph"]' )
);
const rect1 = elements[ 0 ].getBoundingClientRect();
const rect2 = elements[ 1 ].getBoundingClientRect();

return [
{
x: rect1.x + rect1.width / 2,
y: rect1.y + rect1.height / 2,
},
{
x: rect2.x + rect2.width / 2,
y: rect2.y + rect2.height / 2,
},
];
} );
const [ paragraph1, paragraph2 ] = await page.$$(
'[data-type="core/paragraph"]'
);
const coord1 = await paragraph1.clickablePoint();
const coord2 = await paragraph2.clickablePoint();

await page.mouse.move( coord1.x, coord1.y );
await page.mouse.down();
Expand Down Expand Up @@ -465,23 +440,9 @@ describe( 'Multi-block selection', () => {
await page.keyboard.press( 'Enter' );
await page.keyboard.type( '3' );

const [ coord1, coord2 ] = await page.evaluate( () => {
const elements = Array.from(
document.querySelectorAll( '[data-type="core/paragraph"]' )
);
const rect1 = elements[ 2 ].getBoundingClientRect();
const rect2 = elements[ 1 ].getBoundingClientRect();
return [
{
x: rect1.x + rect1.width / 2,
y: rect1.y + rect1.height / 2,
},
{
x: rect2.x + rect2.width / 2,
y: rect2.y + rect2.height / 2,
},
];
} );
const paragraphs = await page.$$( '[data-type="core/paragraph"]' );
const coord1 = await paragraphs[ 2 ].clickablePoint();
const coord2 = await paragraphs[ 1 ].clickablePoint();

await page.mouse.move( coord1.x, coord1.y );
await page.mouse.down();
Expand All @@ -507,17 +468,12 @@ describe( 'Multi-block selection', () => {
await pressKeyWithModifier( 'shift', 'ArrowUp' );
await testNativeSelection();
expect( await getSelectedFlatIndices() ).toEqual( [ 1, 2 ] );

const coord = await page.evaluate( () => {
const element = document.querySelector(
'[data-type="core/paragraph"]'
);
const rect = element.getBoundingClientRect();
return {
x: rect.x - 1,
y: rect.y + rect.height / 2,
};
} );
const paragraph = await page.$( '[data-type="core/paragraph"]' );
const rect = await paragraph.boundingBox();
const coord = {
x: rect.x - 1,
y: rect.y + rect.height / 2,
};

await page.mouse.click( coord.x, coord.y );

Expand Down

0 comments on commit af7c07c

Please sign in to comment.