Skip to content

Introduce a helper function to draw a line in the ink editor integration tests #20519

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

Open
timvandermeij wants to merge 1 commit into
base: master
Choose a base branch
from
+58 −165
Open

Introduce a helper function to draw a line in the ink editor integration tests #20519

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
223 changes: 58 additions & 165 deletions test/integration/ink_editor_spec.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,15 @@ const commit = async page => {

const switchToInk = switchToEditor.bind(null, "Ink");

const drawLine = async (page, x0, y0, x1, y1) => {
const clickHandle = await waitForPointerUp(page);
await page.mouse.move(x0, y0);
await page.mouse.down();
await page.mouse.move(x1, y1);
await page.mouse.up();
await awaitPromise(clickHandle);
};

describe("Ink Editor", () => {
describe("Basic operations", () => {
let pages;
Expand All @@ -74,13 +83,7 @@ describe("Ink Editor", () => {
for (let i = 0; i < 3; i++) {
const x = rect.x + 100 + i * 100;
const y = rect.y + 100 + i * 100;
const clickHandle = await waitForPointerUp(page);
await page.mouse.move(x, y);
await page.mouse.down();
await page.mouse.move(x + 50, y + 50);
await page.mouse.up();
await awaitPromise(clickHandle);

await drawLine(page, x, y, x + 50, y + 50);
await commit(page);
}

Expand All @@ -107,15 +110,9 @@ describe("Ink Editor", () => {

const rect = await getRect(page, ".annotationEditorLayer");

const xStart = rect.x + 300;
const yStart = rect.y + 300;
const clickHandle = await waitForPointerUp(page);
await page.mouse.move(xStart, yStart);
await page.mouse.down();
await page.mouse.move(xStart + 50, yStart + 50);
await page.mouse.up();
await awaitPromise(clickHandle);

const x = rect.x + 300;
const y = rect.y + 300;
await drawLine(page, x, y, x + 50, y + 50);
await commit(page);

const rectBefore = await getRect(page, ".canvasWrapper .draw");
Expand Down Expand Up @@ -149,13 +146,7 @@ describe("Ink Editor", () => {

const x = rect.x + 100;
const y = rect.y + 100;
const clickHandle = await waitForPointerUp(page);
await page.mouse.move(x, y);
await page.mouse.down();
await page.mouse.move(x + 50, y + 50);
await page.mouse.up();
await awaitPromise(clickHandle);

await drawLine(page, x, y, x + 50, y + 50);
await commit(page);

const editorSelector = getEditorSelector(0);
Expand Down Expand Up @@ -205,13 +196,7 @@ describe("Ink Editor", () => {

const x = rect.x + 20;
const y = rect.y + 20;
const clickHandle = await waitForPointerUp(page);
await page.mouse.move(x, y);
await page.mouse.down();
await page.mouse.move(x + 50, y + 50);
await page.mouse.up();
await awaitPromise(clickHandle);

await drawLine(page, x, y, x + 50, y + 50);
await commit(page);

await selectAll(page);
Expand Down Expand Up @@ -244,13 +229,7 @@ describe("Ink Editor", () => {

const x = rect.x + 20;
const y = rect.y + 20;
const clickHandle = await waitForPointerUp(page);
await page.mouse.move(x, y);
await page.mouse.down();
await page.mouse.move(x + 50, y + 50);
await page.mouse.up();
await awaitPromise(clickHandle);

await drawLine(page, x, y, x + 50, y + 50);
await commit(page);

const oneToFourteen = Array.from(new Array(13).keys(), n => n + 2);
Expand Down Expand Up @@ -299,12 +278,7 @@ describe("Ink Editor", () => {

const x = rect.x + 20;
const y = rect.y + 20;
const clickHandle = await waitForPointerUp(page);
await page.mouse.move(x, y);
await page.mouse.down();
await page.mouse.move(x + 50, y + 50);
await page.mouse.up();
await awaitPromise(clickHandle);
await drawLine(page, x, y, x + 50, y + 50);

await page.mouse.click(rect.x - 10, rect.y + 10);
await page.waitForSelector(`${getEditorSelector(0)}.disabled`);
Expand All @@ -331,14 +305,9 @@ describe("Ink Editor", () => {

const rect = await getRect(page, ".annotationEditorLayer");

const xStart = rect.x + 300;
const yStart = rect.y + 300;
const clickHandle = await waitForPointerUp(page);
await page.mouse.move(xStart, yStart);
await page.mouse.down();
await page.mouse.move(xStart + 50, yStart + 50);
await page.mouse.up();
await awaitPromise(clickHandle);
const x = rect.x + 300;
const y = rect.y + 300;
await drawLine(page, x, y, x + 50, y + 50);
await commit(page);

const editorSelector = getEditorSelector(0);
Expand Down Expand Up @@ -375,14 +344,9 @@ describe("Ink Editor", () => {

const rect = await getRect(page, ".annotationEditorLayer");

const xStart = rect.x + 300;
const yStart = rect.y + 300;
const clickHandle = await waitForPointerUp(page);
await page.mouse.move(xStart, yStart);
await page.mouse.down();
await page.mouse.move(xStart + 50, yStart + 50);
await page.mouse.up();
await awaitPromise(clickHandle);
const x = rect.x + 300;
const y = rect.y + 300;
await drawLine(page, x, y, x + 50, y + 50);
await commit(page);

const editorSelector = getEditorSelector(0);
Expand Down Expand Up @@ -432,14 +396,9 @@ describe("Ink Editor", () => {

const rect = await getRect(page, ".annotationEditorLayer");

const xStart = rect.x + 300;
const yStart = rect.y + 300;
const clickHandle = await waitForPointerUp(page);
await page.mouse.move(xStart, yStart);
await page.mouse.down();
await page.mouse.move(xStart + 50, yStart + 50);
await page.mouse.up();
await awaitPromise(clickHandle);
const x = rect.x + 300;
const y = rect.y + 300;
await drawLine(page, x, y, x + 50, y + 50);
await commit(page);

const editorSelector = getEditorSelector(0);
Expand Down Expand Up @@ -483,16 +442,11 @@ describe("Ink Editor", () => {
await switchToInk(page);
const rect = await getRect(page, ".annotationEditorLayer");

let xStart = rect.x + 10;
const yStart = rect.y + 10;
let x = rect.x + 10;
const y = rect.y + 10;
for (let i = 0; i < 5; i++) {
const clickHandle = await waitForPointerUp(page);
await page.mouse.move(xStart, yStart);
await page.mouse.down();
await page.mouse.move(xStart + 50, yStart + 50);
await page.mouse.up();
await awaitPromise(clickHandle);
xStart += 70;
await drawLine(page, x, y, x + 50, y + 50);
x += 70;
}
await commit(page);

Expand Down Expand Up @@ -561,13 +515,7 @@ describe("Ink Editor", () => {

const x = rect.x + 20;
const y = rect.y + 20;
const clickHandle = await waitForPointerUp(page);
await page.mouse.move(x, y);
await page.mouse.down();
await page.mouse.move(x + 50, y + 50);
await page.mouse.up();
await awaitPromise(clickHandle);

await drawLine(page, x, y, x + 50, y + 50);
await commit(page);

const drawSelector = `.page[data-page-number = "1"] .canvasWrapper .draw`;
Expand Down Expand Up @@ -636,12 +584,7 @@ describe("Ink Editor", () => {

const x = rect.x + 20;
const y = rect.y + 20;
const clickHandle = await waitForPointerUp(page);
await page.mouse.move(x, y);
await page.mouse.down();
await page.mouse.move(x + 50, y + 50);
await page.mouse.up();
await awaitPromise(clickHandle);
await drawLine(page, x, y, x + 50, y + 50);

const drawSelector = `.canvasWrapper svg.draw path[d]:not([d=""])`;
await page.waitForSelector(drawSelector);
Expand Down Expand Up @@ -680,12 +623,7 @@ describe("Ink Editor", () => {

const x = rect.x + 20;
const y = rect.y + 20;
const clickHandle = await waitForPointerUp(page);
await page.mouse.move(x, y);
await page.mouse.down();
await page.mouse.move(x + 50, y + 50);
await page.mouse.up();
await awaitPromise(clickHandle);
await drawLine(page, x, y, x + 50, y + 50);

await page.evaluate(() => {
window.focusedIds = [];
Expand Down Expand Up @@ -884,14 +822,9 @@ describe("Ink Editor", () => {
await switchToInk(page);

const rect = await getRect(page, ".annotationEditorLayer");
const xStart = rect.x + 300;
const yStart = rect.y + 300;
const clickHandle = await waitForPointerUp(page);
await page.mouse.move(xStart, yStart);
await page.mouse.down();
await page.mouse.move(xStart + 50, yStart + 50);
await page.mouse.up();
await awaitPromise(clickHandle);
const x = rect.x + 300;
const y = rect.y + 300;
await drawLine(page, x, y, x + 50, y + 50);
await commit(page);

await page.waitForSelector(editorSelector);
Expand All @@ -918,14 +851,9 @@ describe("Ink Editor", () => {
await switchToInk(page);

const rect = await getRect(page, ".annotationEditorLayer");
const xStart = rect.x + 300;
const yStart = rect.y + 300;
const clickHandle = await waitForPointerUp(page);
await page.mouse.move(xStart, yStart);
await page.mouse.down();
await page.mouse.move(xStart + 50, yStart + 50);
await page.mouse.up();
await awaitPromise(clickHandle);
const x = rect.x + 300;
const y = rect.y + 300;
await drawLine(page, x, y, x + 50, y + 50);
await commit(page);

await page.waitForSelector(editorSelector);
Expand Down Expand Up @@ -957,14 +885,9 @@ describe("Ink Editor", () => {
await switchToInk(page);

const rect = await getRect(page, ".annotationEditorLayer");
const xStart = rect.x + 300;
const yStart = rect.y + 300;
const clickHandle = await waitForPointerUp(page);
await page.mouse.move(xStart, yStart);
await page.mouse.down();
await page.mouse.move(xStart + 50, yStart + 50);
await page.mouse.up();
await awaitPromise(clickHandle);
const x = rect.x + 300;
const y = rect.y + 300;
await drawLine(page, x, y, x + 50, y + 50);
await commit(page);

await page.waitForSelector(editorSelector);
Expand All @@ -976,14 +899,9 @@ describe("Ink Editor", () => {
await page.waitForSelector("#editorUndoBar", { visible: true });

const newRect = await getRect(page, ".annotationEditorLayer");
const newXStart = newRect.x + 300;
const newYStart = newRect.y + 300;
const newClickHandle = await waitForPointerUp(page);
await page.mouse.move(newXStart, newYStart);
await page.mouse.down();
await page.mouse.move(newXStart + 50, newYStart + 50);
await page.mouse.up();
await awaitPromise(newClickHandle);
const newX = newRect.x + 300;
const newY = newRect.y + 300;
await drawLine(page, newX, newY, newX + 50, newY + 50);
await commit(page);

await page.waitForSelector(getEditorSelector(1));
Expand Down Expand Up @@ -1014,12 +932,7 @@ describe("Ink Editor", () => {

const x = rect.x + 20;
const y = rect.y + 20;
const clickHandle = await waitForPointerUp(page);
await page.mouse.move(x, y);
await page.mouse.down();
await page.mouse.move(x + 50, y + 50);
await page.mouse.up();
await awaitPromise(clickHandle);
await drawLine(page, x, y, x + 50, y + 50);

const svgSelector = ".canvasWrapper svg.draw";
const strokeWidth = await page.$eval(svgSelector, el =>
Expand Down Expand Up @@ -1082,14 +995,9 @@ describe("Ink Editor", () => {
page,
`${pageSelector} .annotationEditorLayer`
);
const xStart = rect.x + 10;
const yStart = rect.y + 10;
const clickHandle = await waitForPointerUp(page);
await page.mouse.move(xStart, yStart);
await page.mouse.down();
await page.mouse.move(xStart + 10, yStart + 10);
await page.mouse.up();
await awaitPromise(clickHandle);
const x = rect.x + 10;
const y = rect.y + 10;
await drawLine(page, x, y, x + 10, y + 10);
await commit(page);
}

Expand Down Expand Up @@ -1148,15 +1056,10 @@ describe("Ink Editor", () => {
await switchToInk(page);

const editorLayerRect = await getRect(page, ".annotationEditorLayer");
const drawStartX = editorLayerRect.x + 100;
const drawStartY = editorLayerRect.y + 100;

const clickHandle = await waitForPointerUp(page);
await page.mouse.move(drawStartX, drawStartY);
await page.mouse.down();
await page.mouse.move(drawStartX + 50, drawStartY + 50);
await page.mouse.up();
await awaitPromise(clickHandle);

const x = editorLayerRect.x + 100;
const y = editorLayerRect.y + 100;
await drawLine(page, x, y, x + 50, y + 50);
await commit(page);

const pageFinalPosition = await getRect(
Expand Down Expand Up @@ -1257,16 +1160,10 @@ describe("Should switch from an editor and mode to others by double clicking", (
await switchToInk(page);

const editorLayerRect = await getRect(page, ".annotationEditorLayer");
const drawStartX = editorLayerRect.x + 100;
const drawStartY = editorLayerRect.y + 100;

const inkSelector = getEditorSelector(0);
const clickHandle = await waitForPointerUp(page);
await page.mouse.move(drawStartX, drawStartY);
await page.mouse.down();
await page.mouse.move(drawStartX + 50, drawStartY + 50);
await page.mouse.up();
await awaitPromise(clickHandle);
const x = editorLayerRect.x + 100;
const y = editorLayerRect.y + 100;
await drawLine(page, x, y, x + 50, y + 50);
await commit(page);

await switchToEditor("FreeText", page);
Expand All @@ -1286,6 +1183,7 @@ describe("Should switch from an editor and mode to others by double clicking", (

await page.waitForSelector("#editorInkButton:not(.toggled)");
let modeChangedHandle = await waitForAnnotationModeChanged(page);
const inkSelector = getEditorSelector(0);
await selectEditor(page, inkSelector, 2);
await awaitPromise(modeChangedHandle);
await page.waitForSelector("#editorInkButton.toggled");
Expand Down Expand Up @@ -1322,12 +1220,7 @@ describe("Ink must update its color", () => {

const x = rect.x + 20;
const y = rect.y + 20;
const clickHandle = await waitForPointerUp(page);
await page.mouse.move(x, y);
await page.mouse.down();
await page.mouse.move(x + 50, y + 50);
await page.mouse.up();
await awaitPromise(clickHandle);
await drawLine(page, x, y, x + 50, y + 50);
await commit(page);

const editorSelector = getEditorSelector(0);
Expand Down