From 8babcded5dd7fb03256cbb3ee19263910b55f37d Mon Sep 17 00:00:00 2001 From: Tim van der Meij Date: Sat, 1 Feb 2025 19:01:54 +0100 Subject: [PATCH] Centralize the editor selector definitions in the highlight editor integration tests In most integration tests we already use the pattern of defining the editor selector once and reusing it in the rest of the test, but it's not fully consistent everywhere yet. This commit fixes that for the highlight editor integration tests, which has multiple advantages: - it improves consistency between the various editor integration tests; - it removes duplicate function calls and aligns variable definitions; - it reduces the number of `getEditorSelector` calls that contained hardcoded IDs, which helps to isolate the tests and to simplify follow-up patches. --- test/integration/highlight_editor_spec.mjs | 139 ++++++++++++--------- 1 file changed, 77 insertions(+), 62 deletions(-) diff --git a/test/integration/highlight_editor_spec.mjs b/test/integration/highlight_editor_spec.mjs index e0027dde2..c2a5da293 100644 --- a/test/integration/highlight_editor_spec.mjs +++ b/test/integration/highlight_editor_spec.mjs @@ -252,22 +252,22 @@ describe("Highlight Editor", () => { 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)}`); + + const editorSelector = getEditorSelector(1); + await page.waitForSelector(editorSelector); await page.waitForSelector( `.page[data-page-number = "14"] svg.highlightOutline.selected` ); await selectAll(page); await page.waitForSelector( - `${getEditorSelector(1)} .editToolbar button.colorPicker` - ); - await page.click( - `${getEditorSelector(1)} .editToolbar button.colorPicker` + `${editorSelector} .editToolbar button.colorPicker` ); + await page.click(`${editorSelector} .editToolbar button.colorPicker`); await page.waitForSelector( - `${getEditorSelector(1)} .editToolbar button[title = "Green"]` + `${editorSelector} .editToolbar button[title = "Green"]` ); await page.click( - `${getEditorSelector(1)} .editToolbar button[title = "Green"]` + `${editorSelector} .editToolbar button[title = "Green"]` ); await page.waitForSelector( `.page[data-page-number = "14"] svg.highlight[fill = "#53FFBC"]` @@ -489,24 +489,25 @@ describe("Highlight Editor", () => { const y = rect.y + rect.height / 2; await page.mouse.click(x, y, { count: 2, delay: 100 }); - await page.waitForSelector(`${getEditorSelector(0)}`); + const editorSelector = getEditorSelector(0); + await page.waitForSelector(editorSelector); await page.waitForSelector( `.page[data-page-number = "1"] svg.highlightOutline.selected` ); - await page.focus(getEditorSelector(0)); + await page.focus(editorSelector); - const xy = await getXY(page, getEditorSelector(0)); + const xy = await getXY(page, editorSelector); for (let i = 0; i < 5; i++) { await kbBigMoveLeft(page); } - expect(await getXY(page, getEditorSelector(0))) + expect(await getXY(page, editorSelector)) .withContext(`In ${browserName}`) .toEqual(xy); for (let i = 0; i < 5; i++) { await kbBigMoveUp(page); } - expect(await getXY(page, getEditorSelector(0))) + expect(await getXY(page, editorSelector)) .withContext(`In ${browserName}`) .toEqual(xy); }) @@ -638,10 +639,8 @@ describe("Highlight Editor", () => { await selectAll(page); - const { width: prevWidth } = await getRect( - page, - getEditorSelector(0) - ); + const editorSelector = getEditorSelector(0); + const { width: prevWidth } = await getRect(page, editorSelector); value = 24; page.evaluate(val => { @@ -661,7 +660,7 @@ describe("Highlight Editor", () => { document.querySelector(sel).getBoundingClientRect().width !== w, {}, prevWidth, - getEditorSelector(0) + editorSelector ); await waitForSerialized(page, 3); @@ -768,7 +767,8 @@ describe("Highlight Editor", () => { await page.mouse.up(); await awaitPromise(clickHandle); - await page.waitForSelector(getEditorSelector(0)); + const editorSelector = getEditorSelector(0); + await page.waitForSelector(editorSelector); await page.evaluate(() => { window.PDFViewerApplication.rotatePages(90); @@ -778,10 +778,7 @@ describe("Highlight Editor", () => { ); await selectAll(page); - const { width: prevWidth } = await getRect( - page, - getEditorSelector(0) - ); + const { width: prevWidth } = await getRect(page, editorSelector); page.evaluate(val => { window.PDFViewerApplication.eventBus.dispatch( @@ -800,10 +797,10 @@ describe("Highlight Editor", () => { document.querySelector(sel).getBoundingClientRect().width !== w, {}, prevWidth, - getEditorSelector(0) + editorSelector ); - const rectDiv = await getRect(page, getEditorSelector(0)); + const rectDiv = await getRect(page, editorSelector); const rectSVG = await getRect(page, "svg.highlight.free"); expect(Math.abs(rectDiv.x - rectSVG.x) <= 2) @@ -1043,8 +1040,10 @@ describe("Highlight Editor", () => { 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 unselectEditor(page, getEditorSelector(0)); + + const editorSelector = getEditorSelector(0); + await page.waitForSelector(editorSelector); + await unselectEditor(page, editorSelector); await setCaretAt( page, @@ -1189,11 +1188,12 @@ describe("Highlight Editor", () => { const y = rect.y + rect.height / 2; await page.mouse.click(x, y, { count: 2, delay: 100 }); - await page.waitForSelector(getEditorSelector(0)); + const editorSelector = getEditorSelector(0); + await page.waitForSelector(editorSelector); await waitForSerialized(page, 1); - await page.waitForSelector(`${getEditorSelector(0)} button.delete`); + await page.waitForSelector(`${editorSelector} button.delete`); - await page.focus(`${getEditorSelector(0)} button.delete`); + await page.focus(`${editorSelector} button.delete`); await page.keyboard.press(" "); await waitForSerialized(page, 0); @@ -1225,7 +1225,8 @@ describe("Highlight Editor", () => { { count: 2, delay: 100 } ); - await page.waitForSelector(getEditorSelector(0)); + const editorSelector = getEditorSelector(0); + await page.waitForSelector(editorSelector); rect = await getRect(page, ".annotationEditorLayer"); @@ -1241,8 +1242,8 @@ describe("Highlight Editor", () => { "#editorFreeHighlightThickness:not([disabled])" ); - await page.click(getEditorSelector(0)); - await page.waitForSelector(getEditorSelector(0)); + await page.click(editorSelector); + await page.waitForSelector(editorSelector); await page.waitForSelector("#editorFreeHighlightThickness[disabled]"); await switchToHighlight(page, /* disable */ true); @@ -1349,11 +1350,12 @@ describe("Highlight Editor", () => { const y = rect.y + rect.height / 2; await page.mouse.click(x, y, { count: 2, delay: 100 }); - await page.waitForSelector(getEditorSelector(0)); - await page.focus(`${getEditorSelector(0)} button.colorPicker`); + const editorSelector = getEditorSelector(0); + await page.waitForSelector(editorSelector); + await page.focus(`${editorSelector} button.colorPicker`); await page.keyboard.press("Escape"); - await page.focus(`${getEditorSelector(0)}:not(selectedEditor)`); + await page.focus(`${editorSelector}:not(selectedEditor)`); }) ); }); @@ -1384,9 +1386,10 @@ describe("Highlight Editor", () => { await page.mouse.up(); await awaitPromise(clickHandle); - await page.waitForSelector(getEditorSelector(0)); + const editorSelector = getEditorSelector(0); + await page.waitForSelector(editorSelector); - const { x: editorX } = await getRect(page, getEditorSelector(0)); + const { x: editorX } = await getRect(page, editorSelector); expect(editorX < rect.x) .withContext(`In ${browserName}`) @@ -1419,7 +1422,9 @@ describe("Highlight Editor", () => { await page.mouse.move(rect.x + 20, rect.y + 120); await page.mouse.up(); await awaitPromise(clickHandle); - await page.waitForSelector(getEditorSelector(0)); + + const firstEditorSelector = getEditorSelector(0); + await page.waitForSelector(firstEditorSelector); rect = await getSpanRectFromText(page, 1, "Languages"); await page.mouse.click( @@ -1427,19 +1432,21 @@ describe("Highlight Editor", () => { rect.y + rect.height / 2, { count: 2, delay: 100 } ); - await page.waitForSelector(getEditorSelector(1)); + + const secondEditorSelector = getEditorSelector(1); + await page.waitForSelector(secondEditorSelector); await page.click("#editorHighlightShowAll"); - await page.waitForSelector(`${getEditorSelector(0)}.hidden`); - await page.waitForSelector(`${getEditorSelector(1)}.hidden`); + await page.waitForSelector(`${firstEditorSelector}.hidden`); + await page.waitForSelector(`${secondEditorSelector}.hidden`); await page.click("#editorHighlightShowAll"); - await page.waitForSelector(`${getEditorSelector(0)}:not(.hidden)`); - await page.waitForSelector(`${getEditorSelector(1)}:not(.hidden)`); + await page.waitForSelector(`${firstEditorSelector}:not(.hidden)`); + await page.waitForSelector(`${secondEditorSelector}:not(.hidden)`); await page.click("#editorHighlightShowAll"); - await page.waitForSelector(`${getEditorSelector(0)}.hidden`); - await page.waitForSelector(`${getEditorSelector(1)}.hidden`); + await page.waitForSelector(`${firstEditorSelector}.hidden`); + await page.waitForSelector(`${secondEditorSelector}.hidden`); const oneToOne = Array.from(new Array(13).keys(), n => n + 2).concat( Array.from(new Array(13).keys(), n => 13 - n) @@ -1454,8 +1461,8 @@ describe("Highlight Editor", () => { } } - await page.waitForSelector(`${getEditorSelector(0)}:not(.hidden)`); - await page.waitForSelector(`${getEditorSelector(1)}:not(.hidden)`); + await page.waitForSelector(`${firstEditorSelector}:not(.hidden)`); + await page.waitForSelector(`${secondEditorSelector}:not(.hidden)`); }) ); }); @@ -1539,8 +1546,10 @@ describe("Highlight Editor", () => { 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 page.focus(getEditorSelector(1)); + + const editorSelector = getEditorSelector(1); + await page.waitForSelector(editorSelector); + await page.focus(editorSelector); await kbFocusPrevious(page); await page.waitForSelector( @@ -1548,7 +1557,7 @@ describe("Highlight Editor", () => { ); await kbFocusNext(page); - await page.waitForSelector(`${getEditorSelector(1)}:focus`); + await page.waitForSelector(`${editorSelector}:focus`); }) ); }); @@ -1574,16 +1583,18 @@ describe("Highlight Editor", () => { 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 editorSelector = getEditorSelector(0); + await page.waitForSelector(editorSelector); await waitForSerialized(page, 1); - await page.waitForSelector(`${getEditorSelector(0)} button.delete`); - await page.click(`${getEditorSelector(0)} button.delete`); + await page.waitForSelector(`${editorSelector} button.delete`); + await page.click(`${editorSelector} button.delete`); await waitForSerialized(page, 0); await kbUndo(page); await waitForSerialized(page, 1); - await page.waitForSelector(getEditorSelector(0)); + await page.waitForSelector(editorSelector); }) ); }); @@ -1618,11 +1629,13 @@ describe("Highlight Editor", () => { 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 editorSelector = getEditorSelector(0); + await page.waitForSelector(editorSelector); await waitForSerialized(page, 1); - await page.waitForSelector(`${getEditorSelector(0)} button.delete`); - await page.click(`${getEditorSelector(0)} button.delete`); + await page.waitForSelector(`${editorSelector} button.delete`); + await page.click(`${editorSelector} button.delete`); await waitForSerialized(page, 0); const twoToFourteen = Array.from(new Array(13).keys(), n => n + 2); @@ -1640,7 +1653,7 @@ describe("Highlight Editor", () => { await scrollIntoView(page, pageSelector); } - await page.waitForSelector(getEditorSelector(0)); + await page.waitForSelector(editorSelector); await page.waitForSelector( `.page[data-page-number = "1"] svg.highlight[fill = "#FFFF00"]` ); @@ -1678,11 +1691,13 @@ describe("Highlight Editor", () => { 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 editorSelector = getEditorSelector(0); + await page.waitForSelector(editorSelector); await waitForSerialized(page, 1); - await page.waitForSelector(`${getEditorSelector(0)} button.delete`); - await page.click(`${getEditorSelector(0)} button.delete`); + await page.waitForSelector(`${editorSelector} button.delete`); + await page.click(`${editorSelector} button.delete`); await waitForSerialized(page, 0); const twoToOne = Array.from(new Array(13).keys(), n => n + 2).concat( @@ -1695,7 +1710,7 @@ describe("Highlight Editor", () => { await kbUndo(page); await waitForSerialized(page, 1); - await page.waitForSelector(getEditorSelector(0)); + await page.waitForSelector(editorSelector); await page.waitForSelector( `.page[data-page-number = "1"] svg.highlight[fill = "#FFFF00"]` );