Centralize the editor selector definitions in the highlight editor in…

…tegration 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

@@ -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,27 +1422,31 @@ 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(
             rect.x + rect.width / 2,
             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,16 +1546,18 @@ 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(
             `.page[data-page-number="1"] > .textLayer:focus`
           );
 
           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"]`
           );