Beanz/pdf.js
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add a highlightSpan function in order to simplify a bit the integration tests

Browse Source
This commit is contained in:
Calixte Denizet 2025-10-12 13:24:30 +02:00
parent b87c999815
commit 9205305dbb
4 changed files with 102 additions and 318 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/display/editor/tools.js
View File

@ -53,6 +53,9 @@ class IdManager {
Object.defineProperty(this, "reset", { Object.defineProperty(this, "reset", {
value: () => (this.#id = 0), value: () => (this.#id = 0),
}); });
Object.defineProperty(this, "getNextId", {
value: () => this.#id,
});
} }
} }
@ -906,6 +909,9 @@ class AnnotationEditorUIManager {
this.#idManager.reset(); this.#idManager.reset();
}, },
}); });
Object.defineProperty(this, "getNextEditorId", {
value: () => this.#idManager.getNextId(),
});
} }
} }

56
test/integration/comment_spec.mjs
View File

@ -20,7 +20,7 @@ import {
dragAndDrop, dragAndDrop,
getEditorSelector, getEditorSelector,
getRect, getRect,
getSpanRectFromText, highlightSpan,
loadAndWait, loadAndWait,
scrollIntoView, scrollIntoView,
selectEditor, selectEditor,
@ -35,14 +35,6 @@ const switchToStamp = switchToEditor.bind(null, "Stamp");
const switchToComment = switchToEditor.bind(null, "Comment"); const switchToComment = switchToEditor.bind(null, "Comment");
const switchToFreeText = switchToEditor.bind(null, "FreeText"); const switchToFreeText = switchToEditor.bind(null, "FreeText");
const highlightSpan = async (page, pageIndex, text) => {
const rect = await getSpanRectFromText(page, pageIndex, text);
const x = rect.x + rect.width / 2;
const y = rect.y + rect.height / 2;
await page.mouse.click(x, y, { count: 2, delay: 100 });
await page.waitForSelector(getEditorSelector(0));
};
const editComment = async (page, editorSelector, comment) => { const editComment = async (page, editorSelector, comment) => {
const commentButtonSelector = `${editorSelector} button.comment`; const commentButtonSelector = `${editorSelector} button.comment`;
await waitAndClick(page, commentButtonSelector); await waitAndClick(page, commentButtonSelector);
@ -82,16 +74,7 @@ describe("Comment", () => {
await switchToHighlight(page); await switchToHighlight(page);
await scrollIntoView(page, ".textLayer span:last-of-type"); await scrollIntoView(page, ".textLayer span:last-of-type");
const rect = await getSpanRectFromText(page, 1, "..."); await highlightSpan(page, 1, "...");
const x = rect.x + rect.width / 2;
const y = rect.y + rect.height / 2;
// Here and elsewhere, we add a small delay between press and release
// to make sure that a pointerup event is triggered after
// selectionchange.
// It works with a value of 1ms, but we use 100ms to be sure.
await page.mouse.click(x, y, { count: 2, delay: 100 });
await page.waitForSelector(getEditorSelector(0));
const commentButtonSelector = `${getEditorSelector(0)} button.comment`; const commentButtonSelector = `${getEditorSelector(0)} button.comment`;
await waitAndClick(page, commentButtonSelector); await waitAndClick(page, commentButtonSelector);
@ -137,12 +120,7 @@ describe("Comment", () => {
await switchToHighlight(page); await switchToHighlight(page);
await scrollIntoView(page, ".textLayer span:nth-of-type(4)"); await scrollIntoView(page, ".textLayer span:nth-of-type(4)");
const rect = await getSpanRectFromText(page, 1, "World"); await highlightSpan(page, 1, "World");
const x = rect.x + rect.width / 2;
const y = rect.y + rect.height / 2;
await page.mouse.click(x, y, { count: 2, delay: 100 });
await page.waitForSelector(getEditorSelector(0));
const commentButtonSelector = `${getEditorSelector(0)} button.comment`; const commentButtonSelector = `${getEditorSelector(0)} button.comment`;
await waitAndClick(page, commentButtonSelector); await waitAndClick(page, commentButtonSelector);
@ -272,7 +250,7 @@ describe("Comment", () => {
pages = await loadAndWait( pages = await loadAndWait(
"tracemonkey.pdf", "tracemonkey.pdf",
".annotationEditorLayer", ".annotationEditorLayer",
"page-width", "page-fit",
null, null,
{ enableComment: true } { enableComment: true }
); );
@ -286,12 +264,7 @@ describe("Comment", () => {
await Promise.all( await Promise.all(
pages.map(async ([browserName, page]) => { pages.map(async ([browserName, page]) => {
await switchToHighlight(page); await switchToHighlight(page);
await highlightSpan(page, 1, "Languages");
const rect = await getSpanRectFromText(page, 1, "Languages");
const x = rect.x + rect.width / 2;
const y = rect.y + rect.height / 2;
await page.mouse.click(x, y, { count: 2, delay: 100 });
await page.waitForSelector(getEditorSelector(0));
let commentButtonSelector = `${getEditorSelector(0)} button.comment`; let commentButtonSelector = `${getEditorSelector(0)} button.comment`;
await page.waitForSelector(commentButtonSelector, { visible: true }); await page.waitForSelector(commentButtonSelector, { visible: true });
@ -329,12 +302,7 @@ describe("Comment", () => {
await Promise.all( await Promise.all(
pages.map(async ([browserName, page]) => { pages.map(async ([browserName, page]) => {
await switchToHighlight(page); await switchToHighlight(page);
await highlightSpan(page, 1, "Abstract");
const rect = await getSpanRectFromText(page, 1, "Abstract");
const x = rect.x + rect.width / 2;
const y = rect.y + rect.height / 2;
await page.mouse.click(x, y, { count: 2, delay: 100 });
await page.waitForSelector(getEditorSelector(0));
const comment = "Hello world!"; const comment = "Hello world!";
await editComment(page, getEditorSelector(0), comment); await editComment(page, getEditorSelector(0), comment);
@ -426,12 +394,7 @@ describe("Comment", () => {
await Promise.all( await Promise.all(
pages.map(async ([browserName, page]) => { pages.map(async ([browserName, page]) => {
await switchToHighlight(page); await switchToHighlight(page);
await highlightSpan(page, 1, "Languages");
const rect = await getSpanRectFromText(page, 1, "Languages");
const x = rect.x + rect.width / 2;
const y = rect.y + rect.height / 2;
await page.mouse.click(x, y, { count: 2, delay: 100 });
await page.waitForSelector(getEditorSelector(0));
const commentButtonSelector = `${getEditorSelector(0)} button.comment`; const commentButtonSelector = `${getEditorSelector(0)} button.comment`;
await waitAndClick(page, commentButtonSelector); await waitAndClick(page, commentButtonSelector);
@ -539,7 +502,7 @@ describe("Comment", () => {
pages = await loadAndWait( pages = await loadAndWait(
"comments.pdf", "comments.pdf",
".annotationEditorLayer", ".annotationEditorLayer",
"page-width", "page-fit",
null, null,
{ enableComment: true } { enableComment: true }
); );
@ -607,7 +570,6 @@ describe("Comment", () => {
await switchToHighlight(page); await switchToHighlight(page);
await highlightSpan(page, 1, "Languages"); await highlightSpan(page, 1, "Languages");
const editorSelector = getEditorSelector(9); const editorSelector = getEditorSelector(9);
await page.waitForSelector(editorSelector);
const commentButtonSelector = `${editorSelector} button.comment`; const commentButtonSelector = `${editorSelector} button.comment`;
await waitAndClick(page, commentButtonSelector); await waitAndClick(page, commentButtonSelector);
@ -662,7 +624,7 @@ describe("Comment", () => {
pages = await loadAndWait( pages = await loadAndWait(
"tracemonkey.pdf", "tracemonkey.pdf",
".annotationEditorLayer", ".annotationEditorLayer",
"page-width", "page-fit",
null, null,
{ enableComment: true } { enableComment: true }
); );

333
test/integration/highlight_editor_spec.mjs
View File

@ -23,6 +23,7 @@ import {
getSerialized, getSerialized,
getSpanRectFromText, getSpanRectFromText,
getXY, getXY,
highlightSpan,
kbBigMoveLeft, kbBigMoveLeft,
kbBigMoveUp, kbBigMoveUp,
kbFocusNext, kbFocusNext,
@ -69,17 +70,7 @@ describe("Highlight Editor", () => {
pages.map(async ([browserName, page]) => { pages.map(async ([browserName, page]) => {
await switchToHighlight(page); await switchToHighlight(page);
const rect = await getSpanRectFromText(page, 1, "Abstract"); await highlightSpan(page, 1, "Abstract");
const x = rect.x + rect.width / 2;
const y = rect.y + rect.height / 2;
// Here and elsewhere, we add a small delay between press and release
// to make sure that a pointerup event is triggered after
// selectionchange.
// It works with a value of 1ms, but we use 100ms to be sure.
await page.mouse.click(x, y, { count: 2, delay: 100 });
await page.waitForSelector(`${getEditorSelector(0)}`);
await page.waitForFunction( await page.waitForFunction(
`document.getElementById("viewer-alert").textContent === "Highlight added"` `document.getElementById("viewer-alert").textContent === "Highlight added"`
); );
@ -119,12 +110,7 @@ describe("Highlight Editor", () => {
pages.map(async ([browserName, page]) => { pages.map(async ([browserName, page]) => {
await switchToHighlight(page); await switchToHighlight(page);
const rect = await getSpanRectFromText(page, 1, "Abstract"); await highlightSpan(page, 1, "Abstract");
const x = rect.x + rect.width / 2;
const y = rect.y + rect.height / 2;
await page.mouse.click(x, y, { count: 2, delay: 100 });
await page.waitForSelector(`${getEditorSelector(0)}`);
await page.waitForSelector( await page.waitForSelector(
`.page[data-page-number = "1"] svg.highlightOutline.selected` `.page[data-page-number = "1"] svg.highlightOutline.selected`
); );
@ -169,12 +155,7 @@ describe("Highlight Editor", () => {
pages.map(async ([browserName, page]) => { pages.map(async ([browserName, page]) => {
await switchToHighlight(page); await switchToHighlight(page);
const rect = await getSpanRectFromText(page, 1, "Abstract"); await highlightSpan(page, 1, "Abstract");
const x = rect.x + rect.width / 2;
const y = rect.y + rect.height / 2;
await page.mouse.click(x, y, { count: 2, delay: 100 });
await page.waitForSelector(`${getEditorSelector(0)}`);
await page.waitForSelector( await page.waitForSelector(
`.page[data-page-number = "1"] svg.highlightOutline.selected` `.page[data-page-number = "1"] svg.highlightOutline.selected`
); );
@ -214,12 +195,7 @@ describe("Highlight Editor", () => {
pages.map(async ([browserName, page]) => { pages.map(async ([browserName, page]) => {
await switchToHighlight(page); await switchToHighlight(page);
let rect = await getSpanRectFromText(page, 1, "Abstract"); await highlightSpan(page, 1, "Abstract");
let x = rect.x + rect.width / 2;
let y = rect.y + rect.height / 2;
await page.mouse.click(x, y, { count: 2, delay: 100 });
await page.waitForSelector(`${getEditorSelector(0)}`);
await page.waitForSelector( await page.waitForSelector(
`.page[data-page-number = "1"] svg.highlightOutline.selected` `.page[data-page-number = "1"] svg.highlightOutline.selected`
); );
@ -237,13 +213,8 @@ describe("Highlight Editor", () => {
`.page[data-page-number = "14"] .textLayer .endOfContent` `.page[data-page-number = "14"] .textLayer .endOfContent`
); );
rect = await getSpanRectFromText(page, 14, "References"); await highlightSpan(page, 14, "References");
x = rect.x + rect.width / 2;
y = rect.y + rect.height / 2;
await page.mouse.click(x, y, { count: 2, delay: 100 });
const editorSelector = getEditorSelector(1); const editorSelector = getEditorSelector(1);
await page.waitForSelector(editorSelector);
await page.waitForSelector( await page.waitForSelector(
`.page[data-page-number = "14"] svg.highlightOutline.selected` `.page[data-page-number = "14"] svg.highlightOutline.selected`
); );
@ -302,12 +273,7 @@ describe("Highlight Editor", () => {
pages.map(async ([browserName, page]) => { pages.map(async ([browserName, page]) => {
await switchToHighlight(page); await switchToHighlight(page);
const rect = await getSpanRectFromText(page, 1, "Abstract"); await highlightSpan(page, 1, "Abstract");
const x = rect.x + rect.width / 2;
const y = rect.y + rect.height / 2;
await page.mouse.click(x, y, { count: 2, delay: 100 });
await page.waitForSelector(`${getEditorSelector(0)}`);
await page.waitForSelector( await page.waitForSelector(
`.page[data-page-number = "1"] svg.highlightOutline.selected` `.page[data-page-number = "1"] svg.highlightOutline.selected`
); );
@ -363,12 +329,7 @@ describe("Highlight Editor", () => {
await switchToHighlight(page); await switchToHighlight(page);
const sel = getEditorSelector(0); const sel = getEditorSelector(0);
const rect = await getSpanRectFromText(page, 1, "Abstract"); await highlightSpan(page, 1, "Abstract");
const x = rect.x + rect.width / 2;
const y = rect.y + rect.height / 2;
await page.mouse.click(x, y, { count: 2, delay: 100 });
await page.waitForSelector(sel);
await page.waitForSelector( await page.waitForSelector(
`.page[data-page-number = "1"] svg.highlightOutline.selected` `.page[data-page-number = "1"] svg.highlightOutline.selected`
); );
@ -473,13 +434,8 @@ describe("Highlight Editor", () => {
pages.map(async ([browserName, page]) => { pages.map(async ([browserName, page]) => {
await switchToHighlight(page); await switchToHighlight(page);
const rect = await getSpanRectFromText(page, 1, "Abstract"); await highlightSpan(page, 1, "Abstract");
const x = rect.x + rect.width / 2;
const y = rect.y + rect.height / 2;
await page.mouse.click(x, y, { count: 2, delay: 100 });
const editorSelector = getEditorSelector(0); const editorSelector = getEditorSelector(0);
await page.waitForSelector(editorSelector);
await page.waitForSelector( await page.waitForSelector(
`.page[data-page-number = "1"] svg.highlightOutline.selected` `.page[data-page-number = "1"] svg.highlightOutline.selected`
); );
@ -521,12 +477,7 @@ describe("Highlight Editor", () => {
await switchToHighlight(page); await switchToHighlight(page);
const sel = getEditorSelector(0); const sel = getEditorSelector(0);
const rect = await getSpanRectFromText(page, 1, "Abstract"); await highlightSpan(page, 1, "Abstract");
const x = rect.x + rect.width / 2;
const y = rect.y + rect.height / 2;
await page.mouse.click(x, y, { count: 2, delay: 100 });
await page.waitForSelector(sel);
await page.waitForSelector( await page.waitForSelector(
`.page[data-page-number = "1"] svg.highlightOutline.selected` `.page[data-page-number = "1"] svg.highlightOutline.selected`
); );
@ -536,7 +487,8 @@ describe("Highlight Editor", () => {
await page.waitForSelector( await page.waitForSelector(
`${sel} .editToolbar button[title = "Red"]` `${sel} .editToolbar button[title = "Red"]`
); );
await page.mouse.click(x, y - rect.height); const rect = await getSpanRectFromText(page, 1, "Abstract");
await page.mouse.click(rect.x, rect.y - rect.height);
await page.waitForSelector( await page.waitForSelector(
`${sel} .editToolbar button.colorPicker .dropdown.hidden` `${sel} .editToolbar button.colorPicker .dropdown.hidden`
); );
@ -562,17 +514,16 @@ describe("Highlight Editor", () => {
await switchToHighlight(page); await switchToHighlight(page);
const sel = getEditorSelector(0); const sel = getEditorSelector(0);
const rect = await getSpanRectFromText(page, 1, "Abstract"); await highlightSpan(page, 1, "Abstract");
const x = rect.x + rect.width / 2;
const y = rect.y + rect.height / 2;
await page.mouse.click(x, y, { count: 2, delay: 100 });
await page.waitForSelector(sel);
await page.waitForSelector( await page.waitForSelector(
`.page[data-page-number = "1"] svg.highlightOutline.selected` `.page[data-page-number = "1"] svg.highlightOutline.selected`
); );
await page.waitForSelector(`${sel} .editToolbar button.colorPicker`); await page.waitForSelector(`${sel} .editToolbar button.colorPicker`);
const rect = await getSpanRectFromText(page, 1, "Abstract");
const x = rect.x + rect.width / 2;
const y = rect.y + rect.height / 2;
await page.mouse.click(x, y - rect.height); await page.mouse.click(x, y - rect.height);
await page.waitForSelector( await page.waitForSelector(
`.page[data-page-number = "1"] svg.highlightOutline:not(.selected)` `.page[data-page-number = "1"] svg.highlightOutline:not(.selected)`
@ -831,16 +782,7 @@ describe("Highlight Editor", () => {
pages.map(async ([browserName, page]) => { pages.map(async ([browserName, page]) => {
await switchToHighlight(page); await switchToHighlight(page);
const rect = await getSpanRectFromText( await highlightSpan(page, 1, "Questions courantes", 0.75, 0.5);
page,
1,
"Questions courantes"
);
const x = rect.x + 0.75 * rect.width;
const y = rect.y + rect.height / 2;
await page.mouse.click(x, y, { count: 2, delay: 100 });
await page.waitForSelector(`${getEditorSelector(0)}`);
const usedColor = await page.evaluate(() => { const usedColor = await page.evaluate(() => {
const highlight = document.querySelector( const highlight = document.querySelector(
`.page[data-page-number = "1"] .canvasWrapper > svg.highlight` `.page[data-page-number = "1"] .canvasWrapper > svg.highlight`
@ -1015,13 +957,8 @@ describe("Highlight Editor", () => {
pages.map(async ([browserName, page]) => { pages.map(async ([browserName, page]) => {
await switchToHighlight(page); await switchToHighlight(page);
const rect = await getSpanRectFromText(page, 1, "Abstract"); await highlightSpan(page, 1, "Abstract");
const x = rect.x + rect.width / 2;
const y = rect.y + rect.height / 2;
await page.mouse.click(x, y, { count: 2, delay: 100 });
const editorSelector = getEditorSelector(0); const editorSelector = getEditorSelector(0);
await page.waitForSelector(editorSelector);
await unselectEditor(page, editorSelector); await unselectEditor(page, editorSelector);
await setCaretAt( await setCaretAt(
@ -1160,13 +1097,8 @@ describe("Highlight Editor", () => {
pages.map(async ([browserName, page]) => { pages.map(async ([browserName, page]) => {
await switchToHighlight(page); await switchToHighlight(page);
const rect = await getSpanRectFromText(page, 1, "Abstract"); await highlightSpan(page, 1, "Abstract");
const x = rect.x + rect.width / 2;
const y = rect.y + rect.height / 2;
await page.mouse.click(x, y, { count: 2, delay: 100 });
const editorSelector = getEditorSelector(0); const editorSelector = getEditorSelector(0);
await page.waitForSelector(editorSelector);
await waitForSerialized(page, 1); await waitForSerialized(page, 1);
await page.waitForSelector(`${editorSelector} button.deleteButton`); await page.waitForSelector(`${editorSelector} button.deleteButton`);
@ -1195,17 +1127,10 @@ describe("Highlight Editor", () => {
pages.map(async ([browserName, page]) => { pages.map(async ([browserName, page]) => {
await switchToHighlight(page); await switchToHighlight(page);
let rect = await getSpanRectFromText(page, 1, "Abstract"); await highlightSpan(page, 1, "Abstract");
await page.mouse.click(
rect.x + rect.width / 2,
rect.y + rect.height / 2,
{ count: 2, delay: 100 }
);
const editorSelector = getEditorSelector(0); const editorSelector = getEditorSelector(0);
await page.waitForSelector(editorSelector);
rect = await getRect(page, ".annotationEditorLayer"); const rect = await getRect(page, ".annotationEditorLayer");
const clickHandle = await waitForPointerUp(page); const clickHandle = await waitForPointerUp(page);
await page.mouse.move(rect.x + 5, rect.y + 5); await page.mouse.move(rect.x + 5, rect.y + 5);
@ -1250,14 +1175,7 @@ describe("Highlight Editor", () => {
pages.map(async ([browserName, page]) => { pages.map(async ([browserName, page]) => {
await switchToHighlight(page); await switchToHighlight(page);
const rect = await getSpanRectFromText(page, 1, "Languages"); await highlightSpan(page, 1, "Languages");
await page.mouse.click(
rect.x + rect.width / 2,
rect.y + rect.height / 2,
{ count: 2, delay: 100 }
);
await page.waitForSelector(getEditorSelector(0));
await waitForSerialized(page, 1); await waitForSerialized(page, 1);
const quadPoints = await getFirstSerialized(page, e => e.quadPoints); const quadPoints = await getFirstSerialized(page, e => e.quadPoints);
// Expected quadPoints tL, tR, bL, bR with bL coordinate. // Expected quadPoints tL, tR, bL, bR with bL coordinate.
@ -1286,14 +1204,7 @@ describe("Highlight Editor", () => {
pages.map(async ([browserName, page]) => { pages.map(async ([browserName, page]) => {
await switchToHighlight(page); await switchToHighlight(page);
const rect = await getSpanRectFromText(page, 1, "Hello World"); await highlightSpan(page, 1, "Hello World", 0.25);
await page.mouse.click(
rect.x + rect.width / 4,
rect.y + rect.height / 2,
{ count: 2, delay: 100 }
);
await page.waitForSelector(getEditorSelector(0));
await waitForSerialized(page, 1); await waitForSerialized(page, 1);
const quadPoints = await getFirstSerialized(page, e => e.quadPoints); const quadPoints = await getFirstSerialized(page, e => e.quadPoints);
// Expected quadPoints tL, tR, bL, bR with bL coordinate. // Expected quadPoints tL, tR, bL, bR with bL coordinate.
@ -1322,13 +1233,8 @@ describe("Highlight Editor", () => {
pages.map(async ([browserName, page]) => { pages.map(async ([browserName, page]) => {
await switchToHighlight(page); await switchToHighlight(page);
const rect = await getSpanRectFromText(page, 1, "Abstract"); await highlightSpan(page, 1, "Abstract");
const x = rect.x + rect.width / 2;
const y = rect.y + rect.height / 2;
await page.mouse.click(x, y, { count: 2, delay: 100 });
const editorSelector = getEditorSelector(0); const editorSelector = getEditorSelector(0);
await page.waitForSelector(editorSelector);
await page.focus(`${editorSelector} button.colorPicker`); await page.focus(`${editorSelector} button.colorPicker`);
await page.keyboard.press("Escape"); await page.keyboard.press("Escape");
@ -1392,7 +1298,7 @@ describe("Highlight Editor", () => {
pages.map(async ([browserName, page]) => { pages.map(async ([browserName, page]) => {
await switchToHighlight(page); await switchToHighlight(page);
let rect = await getRect(page, ".annotationEditorLayer"); const rect = await getRect(page, ".annotationEditorLayer");
const clickHandle = await waitForPointerUp(page); const clickHandle = await waitForPointerUp(page);
await page.mouse.move(rect.x + 20, rect.y + 20); await page.mouse.move(rect.x + 20, rect.y + 20);
await page.mouse.down(); await page.mouse.down();
@ -1403,15 +1309,8 @@ describe("Highlight Editor", () => {
const firstEditorSelector = getEditorSelector(0); const firstEditorSelector = getEditorSelector(0);
await page.waitForSelector(firstEditorSelector); await page.waitForSelector(firstEditorSelector);
rect = await getSpanRectFromText(page, 1, "Languages"); await highlightSpan(page, 1, "Languages");
await page.mouse.click(
rect.x + rect.width / 2,
rect.y + rect.height / 2,
{ count: 2, delay: 100 }
);
const secondEditorSelector = getEditorSelector(1); const secondEditorSelector = getEditorSelector(1);
await page.waitForSelector(secondEditorSelector);
await page.click("#editorHighlightShowAll"); await page.click("#editorHighlightShowAll");
await page.waitForSelector(`${firstEditorSelector}.hidden`); await page.waitForSelector(`${firstEditorSelector}.hidden`);
@ -1513,19 +1412,10 @@ describe("Highlight Editor", () => {
pages.map(async ([browserName, page]) => { pages.map(async ([browserName, page]) => {
await switchToHighlight(page); await switchToHighlight(page);
let rect = await getSpanRectFromText(page, 1, "Abstract"); await highlightSpan(page, 1, "Abstract");
let x = rect.x + rect.width / 2; await highlightSpan(page, 1, "Languages");
let y = rect.y + rect.height / 2;
await page.mouse.click(x, y, { count: 2, delay: 100 });
await page.waitForSelector(getEditorSelector(0));
rect = await getSpanRectFromText(page, 1, "Languages");
x = rect.x + rect.width / 2;
y = rect.y + rect.height / 2;
await page.mouse.click(x, y, { count: 2, delay: 100 });
const editorSelector = getEditorSelector(1); const editorSelector = getEditorSelector(1);
await page.waitForSelector(editorSelector);
await page.focus(editorSelector); await page.focus(editorSelector);
await kbFocusPrevious(page); await kbFocusPrevious(page);
@ -1556,13 +1446,8 @@ describe("Highlight Editor", () => {
pages.map(async ([browserName, page]) => { pages.map(async ([browserName, page]) => {
await switchToHighlight(page); await switchToHighlight(page);
const rect = await getSpanRectFromText(page, 1, "Abstract"); await highlightSpan(page, 1, "Abstract");
const x = rect.x + rect.width / 2;
const y = rect.y + rect.height / 2;
await page.mouse.click(x, y, { count: 2, delay: 100 });
const editorSelector = getEditorSelector(0); const editorSelector = getEditorSelector(0);
await page.waitForSelector(editorSelector);
await waitForSerialized(page, 1); await waitForSerialized(page, 1);
await page.waitForSelector(`${editorSelector} button.deleteButton`); await page.waitForSelector(`${editorSelector} button.deleteButton`);
@ -1602,13 +1487,8 @@ describe("Highlight Editor", () => {
pages.map(async ([browserName, page]) => { pages.map(async ([browserName, page]) => {
await switchToHighlight(page); await switchToHighlight(page);
const rect = await getSpanRectFromText(page, 1, "Abstract"); await highlightSpan(page, 1, "Abstract");
const x = rect.x + rect.width / 2;
const y = rect.y + rect.height / 2;
await page.mouse.click(x, y, { count: 2, delay: 100 });
const editorSelector = getEditorSelector(0); const editorSelector = getEditorSelector(0);
await page.waitForSelector(editorSelector);
await waitForSerialized(page, 1); await waitForSerialized(page, 1);
await page.waitForSelector(`${editorSelector} button.deleteButton`); await page.waitForSelector(`${editorSelector} button.deleteButton`);
@ -1664,13 +1544,8 @@ describe("Highlight Editor", () => {
pages.map(async ([browserName, page]) => { pages.map(async ([browserName, page]) => {
await switchToHighlight(page); await switchToHighlight(page);
const rect = await getSpanRectFromText(page, 1, "Abstract"); await highlightSpan(page, 1, "Abstract");
const x = rect.x + rect.width / 2;
const y = rect.y + rect.height / 2;
await page.mouse.click(x, y, { count: 2, delay: 100 });
const editorSelector = getEditorSelector(0); const editorSelector = getEditorSelector(0);
await page.waitForSelector(editorSelector);
await waitForSerialized(page, 1); await waitForSerialized(page, 1);
await page.waitForSelector(`${editorSelector} button.deleteButton`); await page.waitForSelector(`${editorSelector} button.deleteButton`);
@ -1789,17 +1664,15 @@ describe("Highlight Editor", () => {
pages.map(async ([browserName, page]) => { pages.map(async ([browserName, page]) => {
await switchToHighlight(page); await switchToHighlight(page);
const rect = await getSpanRectFromText(page, 1, "Abstract"); await highlightSpan(page, 1, "Abstract");
const editorSelector = getEditorSelector(0); const editorSelector = getEditorSelector(0);
const x = rect.x + rect.width / 2;
let y = rect.y + rect.height / 2;
await page.mouse.click(x, y, { count: 2, delay: 100 });
await page.waitForSelector(editorSelector);
await waitForSerialized(page, 1); await waitForSerialized(page, 1);
await unselectEditor(page, editorSelector); await unselectEditor(page, editorSelector);
const clickHandle = await waitForPointerUp(page); const clickHandle = await waitForPointerUp(page);
y = rect.y - rect.height; const rect = await getSpanRectFromText(page, 1, "Abstract");
const x = rect.x + rect.width / 2;
let y = rect.y - rect.height;
await page.mouse.move(x, y); await page.mouse.move(x, y);
const counterHandle = await page.evaluateHandle(sel => { const counterHandle = await page.evaluateHandle(sel => {
@ -2201,11 +2074,7 @@ describe("Highlight Editor", () => {
pages.map(async ([browserName, page]) => { pages.map(async ([browserName, page]) => {
await switchToHighlight(page); await switchToHighlight(page);
const rect = await getSpanRectFromText(page, 1, "Abstract"); await highlightSpan(page, 1, "Abstract");
const x = rect.x + rect.width / 2;
const y = rect.y + rect.height / 2;
await page.mouse.click(x, y, { count: 2, delay: 100 });
await page.waitForSelector(editorSelector);
await waitForSerialized(page, 1); await waitForSerialized(page, 1);
await page.waitForSelector(`${editorSelector} button.deleteButton`); await page.waitForSelector(`${editorSelector} button.deleteButton`);
@ -2231,11 +2100,7 @@ describe("Highlight Editor", () => {
pages.map(async ([browserName, page]) => { pages.map(async ([browserName, page]) => {
await switchToHighlight(page); await switchToHighlight(page);
const rect = await getSpanRectFromText(page, 1, "Abstract"); await highlightSpan(page, 1, "Abstract");
const x = rect.x + rect.width / 2;
const y = rect.y + rect.height / 2;
await page.mouse.click(x, y, { count: 2, delay: 100 });
await page.waitForSelector(editorSelector);
await waitForSerialized(page, 1); await waitForSerialized(page, 1);
await page.waitForSelector(`${editorSelector} button.deleteButton`); await page.waitForSelector(`${editorSelector} button.deleteButton`);
@ -2257,11 +2122,7 @@ describe("Highlight Editor", () => {
pages.map(async ([browserName, page]) => { pages.map(async ([browserName, page]) => {
await switchToHighlight(page); await switchToHighlight(page);
const rect = await getSpanRectFromText(page, 1, "Abstract"); await highlightSpan(page, 1, "Abstract");
const x = rect.x + rect.width / 2;
const y = rect.y + rect.height / 2;
await page.mouse.click(x, y, { count: 2, delay: 100 });
await page.waitForSelector(editorSelector);
await waitForSerialized(page, 1); await waitForSerialized(page, 1);
await page.waitForSelector(`${editorSelector} button.deleteButton`); await page.waitForSelector(`${editorSelector} button.deleteButton`);
@ -2283,24 +2144,20 @@ describe("Highlight Editor", () => {
pages.map(async ([browserName, page]) => { pages.map(async ([browserName, page]) => {
await switchToHighlight(page); await switchToHighlight(page);
const rect = await getSpanRectFromText(page, 1, "Abstract"); await highlightSpan(page, 1, "Abstract");
const x = rect.x + rect.width / 2;
const y = rect.y + rect.height / 2;
await page.mouse.click(x, y, { count: 2, delay: 100 });
await page.waitForSelector(editorSelector);
await waitForSerialized(page, 1); await waitForSerialized(page, 1);
await page.waitForSelector(`${editorSelector} button.deleteButton`); await page.waitForSelector(`${editorSelector} button.deleteButton`);
await page.click(`${editorSelector} button.deleteButton`); await page.click(`${editorSelector} button.deleteButton`);
await waitForSerialized(page, 0);
await page.waitForSelector("#editorUndoBar", { visible: true }); await page.waitForSelector("#editorUndoBar", { visible: true });
const newRect = await getSpanRectFromText(page, 1, "Introduction"); // TODO: remove the timeout and try to figure out a way to ensure that
const newX = newRect.x + newRect.width / 2; // the previous operations are fully processed before creating a new
const newY = newRect.y + newRect.height / 2; // highlight.
await page.mouse.click(newX, newY, { count: 2, delay: 100 }); // eslint-disable-next-line no-restricted-syntax
await waitForTimeout(100);
await page.waitForSelector(getEditorSelector(1)); await highlightSpan(page, 1, "Introduction");
await page.waitForSelector("#editorUndoBar", { hidden: true }); await page.waitForSelector("#editorUndoBar", { hidden: true });
}) })
); );
@ -2311,11 +2168,7 @@ describe("Highlight Editor", () => {
pages.map(async ([browserName, page]) => { pages.map(async ([browserName, page]) => {
await switchToHighlight(page); await switchToHighlight(page);
const rect = await getSpanRectFromText(page, 1, "Abstract"); await highlightSpan(page, 1, "Abstract");
const x = rect.x + rect.width / 2;
const y = rect.y + rect.height / 2;
await page.mouse.click(x, y, { count: 2, delay: 100 });
await page.waitForSelector(editorSelector);
await waitForSerialized(page, 1); await waitForSerialized(page, 1);
await page.waitForSelector(`${editorSelector} button.deleteButton`); await page.waitForSelector(`${editorSelector} button.deleteButton`);
@ -2334,11 +2187,7 @@ describe("Highlight Editor", () => {
pages.map(async ([browserName, page]) => { pages.map(async ([browserName, page]) => {
await switchToHighlight(page); await switchToHighlight(page);
const rect = await getSpanRectFromText(page, 1, "Abstract"); await highlightSpan(page, 1, "Abstract");
const x = rect.x + rect.width / 2;
const y = rect.y + rect.height / 2;
await page.mouse.click(x, y, { count: 2, delay: 100 });
await page.waitForSelector(editorSelector);
await waitForSerialized(page, 1); await waitForSerialized(page, 1);
await page.waitForSelector(`${editorSelector} button.deleteButton`); await page.waitForSelector(`${editorSelector} button.deleteButton`);
@ -2357,11 +2206,7 @@ describe("Highlight Editor", () => {
pages.map(async ([browserName, page]) => { pages.map(async ([browserName, page]) => {
await switchToHighlight(page); await switchToHighlight(page);
const rect = await getSpanRectFromText(page, 1, "Abstract"); await highlightSpan(page, 1, "Abstract");
const x = rect.x + rect.width / 2;
const y = rect.y + rect.height / 2;
await page.mouse.click(x, y, { count: 2, delay: 100 });
await page.waitForSelector(editorSelector);
await waitForSerialized(page, 1); await waitForSerialized(page, 1);
await page.waitForSelector(`${editorSelector} button.deleteButton`); await page.waitForSelector(`${editorSelector} button.deleteButton`);
@ -2380,11 +2225,7 @@ describe("Highlight Editor", () => {
pages.map(async ([browserName, page]) => { pages.map(async ([browserName, page]) => {
await switchToHighlight(page); await switchToHighlight(page);
const rect = await getSpanRectFromText(page, 1, "Abstract"); await highlightSpan(page, 1, "Abstract");
const x = rect.x + rect.width / 2;
const y = rect.y + rect.height / 2;
await page.mouse.click(x, y, { count: 2, delay: 100 });
await page.waitForSelector(editorSelector);
await waitForSerialized(page, 1); await waitForSerialized(page, 1);
await page.waitForSelector(`${editorSelector} button.deleteButton`); await page.waitForSelector(`${editorSelector} button.deleteButton`);
@ -2404,11 +2245,7 @@ describe("Highlight Editor", () => {
pages.map(async ([browserName, page]) => { pages.map(async ([browserName, page]) => {
await switchToHighlight(page); await switchToHighlight(page);
const rect = await getSpanRectFromText(page, 1, "Abstract"); await highlightSpan(page, 1, "Abstract");
const x = rect.x + rect.width / 2;
const y = rect.y + rect.height / 2;
await page.mouse.click(x, y, { count: 2, delay: 100 });
await page.waitForSelector(editorSelector);
await waitForSerialized(page, 1); await waitForSerialized(page, 1);
await page.waitForSelector(`${editorSelector} button.deleteButton`); await page.waitForSelector(`${editorSelector} button.deleteButton`);
@ -2427,11 +2264,7 @@ describe("Highlight Editor", () => {
pages.map(async ([browserName, page]) => { pages.map(async ([browserName, page]) => {
await switchToHighlight(page); await switchToHighlight(page);
const rect = await getSpanRectFromText(page, 1, "Abstract"); await highlightSpan(page, 1, "Abstract");
const x = rect.x + rect.width / 2;
const y = rect.y + rect.height / 2;
await page.mouse.click(x, y, { count: 2, delay: 100 });
await page.waitForSelector(editorSelector);
await waitForSerialized(page, 1); await waitForSerialized(page, 1);
await page.waitForSelector(`${editorSelector} button.deleteButton`); await page.waitForSelector(`${editorSelector} button.deleteButton`);
@ -2487,11 +2320,7 @@ describe("Highlight Editor", () => {
pages.map(async ([browserName, page]) => { pages.map(async ([browserName, page]) => {
await switchToHighlight(page); await switchToHighlight(page);
const rect = await getSpanRectFromText(page, 1, "Abstract"); await highlightSpan(page, 1, "Abstract");
const x = rect.x + rect.width / 2;
const y = rect.y + rect.height / 2;
await page.mouse.click(x, y, { count: 2, delay: 100 });
await page.waitForSelector(editorSelector);
await waitForSerialized(page, 1); await waitForSerialized(page, 1);
await page.waitForSelector(`${editorSelector} button.deleteButton`); await page.waitForSelector(`${editorSelector} button.deleteButton`);
@ -2520,17 +2349,8 @@ describe("Highlight Editor", () => {
pages.map(async ([browserName, page]) => { pages.map(async ([browserName, page]) => {
await switchToHighlight(page); await switchToHighlight(page);
let rect = await getSpanRectFromText(page, 1, "Abstract"); await highlightSpan(page, 1, "Abstract");
let x = rect.x + rect.width / 2; await highlightSpan(page, 1, "Languages");
let y = rect.y + rect.height / 2;
await page.mouse.click(x, y, { count: 2, delay: 100 });
await page.waitForSelector(editorSelector);
rect = await getSpanRectFromText(page, 1, "Languages");
x = rect.x + rect.width / 2;
y = rect.y + rect.height / 2;
await page.mouse.click(x, y, { count: 2, delay: 100 });
await page.waitForSelector(getEditorSelector(1));
await selectAll(page); await selectAll(page);
await page.waitForSelector(`${editorSelector} button.deleteButton`); await page.waitForSelector(`${editorSelector} button.deleteButton`);
@ -2564,11 +2384,7 @@ describe("Highlight Editor", () => {
pages.map(async ([browserName, page]) => { pages.map(async ([browserName, page]) => {
await switchToHighlight(page); await switchToHighlight(page);
const rect = await getSpanRectFromText(page, 1, "Abstract"); await highlightSpan(page, 1, "Abstract");
const x = rect.x + rect.width / 2;
const y = rect.y + rect.height / 2;
await page.mouse.click(x, y, { count: 2, delay: 100 });
await page.waitForSelector(editorSelector);
await waitForSerialized(page, 1); await waitForSerialized(page, 1);
await page.waitForSelector(`${editorSelector} button.deleteButton`); await page.waitForSelector(`${editorSelector} button.deleteButton`);
@ -2611,11 +2427,7 @@ describe("Highlight Editor", () => {
pages.map(async ([browserName, page]) => { pages.map(async ([browserName, page]) => {
await switchToHighlight(page); await switchToHighlight(page);
const rect = await getSpanRectFromText(page, 1, "Abstract"); await highlightSpan(page, 1, "Abstract");
const x = rect.x + rect.width / 2;
const y = rect.y + rect.height / 2;
await page.mouse.click(x, y, { count: 2, delay: 100 });
await page.waitForSelector(editorSelector);
await waitForSerialized(page, 1); await waitForSerialized(page, 1);
await page.waitForSelector(`${editorSelector} button.deleteButton`); await page.waitForSelector(`${editorSelector} button.deleteButton`);
@ -2738,10 +2550,7 @@ describe("Highlight Editor", () => {
pages.map(async ([browserName, page]) => { pages.map(async ([browserName, page]) => {
await switchToHighlight(page); await switchToHighlight(page);
const rect = await getSpanRectFromText(page, 1, "Abstract"); await highlightSpan(page, 1, "Abstract");
const x = rect.x + rect.width / 2;
const y = rect.y + rect.height / 2;
await page.mouse.click(x, y, { count: 2, delay: 100 });
const highlightSelector = `.page[data-page-number = "1"] .canvasWrapper > svg.highlight`; const highlightSelector = `.page[data-page-number = "1"] .canvasWrapper > svg.highlight`;
await page.waitForSelector(`${highlightSelector}[fill = "#AB0000"]`); await page.waitForSelector(`${highlightSelector}[fill = "#AB0000"]`);
@ -2782,13 +2591,7 @@ describe("Highlight Editor", () => {
pages.map(async ([browserName, page]) => { pages.map(async ([browserName, page]) => {
await switchToHighlight(page); await switchToHighlight(page);
const rect = await getSpanRectFromText(page, 1, "Abstract"); await highlightSpan(page, 1, "Abstract");
const x = rect.x + rect.width / 2;
const y = rect.y + rect.height / 2;
await page.mouse.click(x, y, { count: 2, delay: 100 });
const editorSelector = getEditorSelector(0);
await page.waitForSelector(editorSelector);
await page.waitForSelector( await page.waitForSelector(
`.page[data-page-number = "1"] svg.highlightOutline.selected` `.page[data-page-number = "1"] svg.highlightOutline.selected`
); );
@ -2977,27 +2780,15 @@ describe("Highlight Editor", () => {
pages.map(async ([browserName, page]) => { pages.map(async ([browserName, page]) => {
await switchToHighlight(page); await switchToHighlight(page);
let rect = await getSpanRectFromText(page, 1, "Languages"); await highlightSpan(page, 1, "Languages");
await page.mouse.click(
rect.x + rect.width / 2,
rect.y + rect.height / 2,
{ count: 2, delay: 100 }
);
const editorSelector0 = getEditorSelector(0); const editorSelector0 = getEditorSelector(0);
await page.waitForSelector(editorSelector0);
rect = await getSpanRectFromText(page, 1, "Abstract"); await highlightSpan(page, 1, "Abstract");
await page.mouse.click(
rect.x + rect.width / 2,
rect.y + rect.height / 2,
{ count: 2, delay: 100 }
);
const editorSelector1 = getEditorSelector(1); const editorSelector1 = getEditorSelector(1);
await page.waitForSelector(editorSelector1);
await switchToEditor("Ink", page); await switchToEditor("Ink", page);
rect = await getSpanRectFromText( const rect = await getSpanRectFromText(
page, page,
1, 1,
"University of California, Irvine" "University of California, Irvine"

25
test/integration/test_utils.mjs
View File

@ -887,6 +887,30 @@ async function moveEditor(page, selector, n, pressKey) {
} }
} }
async function getNextEditorId(page) {
return page.evaluate(() =>
window.PDFViewerApplication.pdfViewer._layerProperties.annotationEditorUIManager.getNextEditorId()
);
}
async function highlightSpan(
page,
pageIndex,
text,
xRatio = 0.5,
yRatio = 0.5
) {
const nextId = await getNextEditorId(page);
const rect = await getSpanRectFromText(page, pageIndex, text);
const x = rect.x + rect.width * xRatio;
const y = rect.y + rect.height * yRatio;
// We add a small delay between press and release to make sure that a
// pointerup event is triggered after selectionchange.
// It works with a value of 1ms, but we use 100ms to be sure.
await page.mouse.click(x, y, { count: 2, delay: 100 });
await page.waitForSelector(getEditorSelector(nextId));
}
// Unicode bidi isolation characters, Fluent adds these markers to the text. // Unicode bidi isolation characters, Fluent adds these markers to the text.
const FSI = "\u2068"; const FSI = "\u2068";
const PDI = "\u2069"; const PDI = "\u2069";
@ -917,6 +941,7 @@ export {
getSerialized, getSerialized,
getSpanRectFromText, getSpanRectFromText,
getXY, getXY,
highlightSpan,
isCanvasMonochrome, isCanvasMonochrome,
kbBigMoveDown, kbBigMoveDown,
kbBigMoveLeft, kbBigMoveLeft,