Merge pull request #20887 from calixteman/fix_intermittent_comment_sidebar

Wait a little between each key press in the test 'must check that the comment sidebar is resizable with the keyboard'

Author: timvandermeij

test/integration/comment_spec.mjs

@@ -32,6 +32,7 @@ import {
   selectEditor,
   switchToEditor,
   waitAndClick,
+  waitForBrowserTrip,
   waitForSerialized,
   waitForTimeout,
 } from "./test_utils.mjs";
@@ -570,6 +571,7 @@ describe("Comment", () => {
             const rect = await getRect(page, sidebarSelector);
             const arrowKey = extraWidth > 0 ? "ArrowLeft" : "ArrowRight";
             for (let i = 0; i < Math.abs(extraWidth); i++) {
+              await waitForBrowserTrip(page);
               await kbModifierDown(page);
               await page.keyboard.press(arrowKey);
               await kbModifierUp(page);

test/integration/stamp_editor_spec.mjs

@@ -43,6 +43,7 @@ import {
   unselectEditor,
   waitForAnnotationEditorLayer,
   waitForAnnotationModeChanged,
+  waitForBrowserTrip,
   waitForEntryInStorage,
   waitForPageRendered,
   waitForSelectedEditor,
@@ -84,14 +85,6 @@ const copyImage = async (page, imagePath, selector) => {
   await waitForImage(page, selector);
 };
 
-async function waitForTranslation(page) {
-  return page.evaluate(async () => {
-    await new Promise(resolve => {
-      window.requestAnimationFrame(resolve);
-    });
-  });
-}
-
 const switchToStamp = switchToEditor.bind(null, "Stamp");
 
 describe("Stamp Editor", () => {
@@ -1007,7 +1000,7 @@ describe("Stamp Editor", () => {
         const buttonSelector = `${editorSelector} button.altText.new`;
         await page.waitForSelector(buttonSelector, { visible: true });
 
-        await waitForTranslation(page);
+        await waitForBrowserTrip(page);
         // Check the text in the button.
         let text = await page.evaluate(
           sel => document.querySelector(sel).textContent,
@@ -1056,7 +1049,7 @@ describe("Stamp Editor", () => {
         await waitForSelectedEditor(page, editorSelector);
         await page.waitForSelector(buttonSelector, { visible: true });
 
-        await waitForTranslation(page);
+        await waitForBrowserTrip(page);
         // Check the text in the button.
         text = await page.evaluate(
           sel => document.querySelector(sel).textContent,
@@ -1098,7 +1091,7 @@ describe("Stamp Editor", () => {
         await page.click("#newAltTextSave");
         await page.waitForSelector("#newAltTextDialog", { visible: false });
 
-        await waitForTranslation(page);
+        await waitForBrowserTrip(page);
         // Check the text in the button.
         text = await page.evaluate(
           sel => document.querySelector(sel).firstChild.textContent,

test/integration/test_utils.mjs

@@ -1006,6 +1006,15 @@ async function showViewsManager(page) {
   });
 }
 
+async function waitForBrowserTrip(page) {
+  const handle = await page.evaluateHandle(() => [
+    new Promise(resolve => {
+      window.requestAnimationFrame(resolve);
+    }),
+  ]);
+  await awaitPromise(handle);
+}
+
 // Unicode bidi isolation characters, Fluent adds these markers to the text.
 const FSI = "\u2068";
 const PDI = "\u2069";
@@ -1078,6 +1087,7 @@ export {
   waitAndClick,
   waitForAnnotationEditorLayer,
   waitForAnnotationModeChanged,
+  waitForBrowserTrip,
   waitForDOMMutation,
   waitForEntryInStorage,
   waitForEvent,