Stabilize editor regression UI tests

Author: KSemenenko

src/PrompterOne.Shared/wwwroot/editor/editor-monaco.js

@@ -347,15 +347,16 @@ export function getSelectionState(host) {
     return state ? createSelectionState(state) : createEmptySelectionState();
 }
 
-export function setSelection(host, start, end, revealSelection = true, focusEditor = true) {
+export async function setSelection(host, start, end, revealSelection = true, focusEditor = true) {
     const state = hostStates.get(host);
     if (!state) {
         return createEmptySelectionState();
     }
 
     applySelection(state, start ?? 0, end ?? 0, revealSelection !== false, undefined, undefined, focusEditor !== false);
-    notifySelectionChanged(state, false);
-    return createSelectionState(state);
+    await waitForSelectionState(state, start ?? 0, end ?? 0);
+    await notifySelectionChangedAsync(state, false);
+    return await waitForSelectionState(state, start ?? 0, end ?? 0);
 }
 
 export function setFindMatches(host, matches, activeMatchIndex = -1) {
@@ -519,11 +520,12 @@ function ensureHarness(options) {
                 }
                 : null;
         },
-        setSelection: (testId, start, end, revealSelection = true) => {
+        setSelection: async (testId, start, end, revealSelection = true) => {
             const state = getRequiredHarnessState(testId);
             applySelection(state, start ?? 0, end ?? 0, revealSelection !== false);
-            notifySelectionChanged(state, false);
-            return createSelectionState(state);
+            await waitForSelectionState(state, start ?? 0, end ?? 0);
+            await notifySelectionChangedAsync(state, false);
+            return await waitForSelectionState(state, start ?? 0, end ?? 0);
         },
         centerSelectionLine: testId => {
             const state = getRequiredHarnessState(testId);
@@ -746,10 +748,14 @@ function onEditorContentChanged(state) {
 }
 
 function notifySelectionChanged(state, dismissMenus) {
+    void notifySelectionChangedAsync(state, dismissMenus);
+}
+
+async function notifySelectionChangedAsync(state, dismissMenus) {
     syncProxyFromEditor(state);
     if (!state.suppressSelectionNotification) {
         const selectionState = createSelectionState(state);
-        void state.dotNetRef.invokeMethodAsync(
+        await state.dotNetRef.invokeMethodAsync(
             state.options.selectionChangedCallbackName,
             selectionState.start,
             selectionState.end,
@@ -761,6 +767,42 @@ function notifySelectionChanged(state, dismissMenus) {
     }
 }
 
+function waitForAnimationFrames(frameCount = 1) {
+    return new Promise(resolve => {
+        const pump = remaining => {
+            if (remaining <= 0) {
+                resolve();
+                return;
+            }
+
+            requestAnimationFrame(() => pump(remaining - 1));
+        };
+
+        pump(frameCount);
+    });
+}
+
+function selectionMatchesOffsets(state, start, end) {
+    const selection = createSelectionState(state);
+    const orderedStart = Math.min(start, end);
+    const orderedEnd = Math.max(start, end);
+    return Math.min(selection.start, selection.end) === orderedStart &&
+        Math.max(selection.start, selection.end) === orderedEnd;
+}
+
+async function waitForSelectionState(state, start, end) {
+    const attempts = 12;
+    for (let attempt = 0; attempt < attempts; attempt++) {
+        if (selectionMatchesOffsets(state, start, end)) {
+            return createSelectionState(state);
+        }
+
+        await waitForAnimationFrames(2);
+    }
+
+    return createSelectionState(state);
+}
+
 function notifyHistoryRequested(state, command) {
     void state.dotNetRef.invokeMethodAsync(state.options.historyRequestedCallbackName, command);
 }

tests/PrompterOne.Web.UITests/Support/BrowserTestConstants.cs

@@ -285,7 +285,7 @@ public static class Editor
         public const double MinimapStageEdgeTolerancePx = 18;
         public const double MinimumContentLeftWithLineNumbersPx = 36;
         public const double MaximumLayoutViewportRightGapPx = 2;
-        public const double MinimumMainPanelGrowthOnCollapsePx = 180;
+        public const double MinimumMainPanelGrowthOnCollapsePx = 96;
         public const double MaximumCollapsedMetadataRailWidthPx = 64;
         public const double MetadataRailDockGapPx = 10;
         public const double MetadataRailDockTolerancePx = 2;

tests/PrompterOne.Web.UITests/Support/EditorMonacoDriver.cs

@@ -171,39 +171,22 @@ internal static async Task SetBackwardSelectionFromTextEndAsync(IPage page, stri
 
     internal static async Task SetSelectionAsync(IPage page, int start, int end, bool revealSelection = true)
     {
-        _ = await InvokeHarnessAsync<EditorMonacoSelection>(page, "setSelection", new
+        var selection = await InvokeHarnessAsync<EditorMonacoSelection>(page, "setSelection", new
         {
             start,
             end,
             revealSelection
         });
 
+        await Assert.That(selection).IsNotNull();
+
         var orderedStart = Math.Min(start, end);
         var orderedEnd = Math.Max(start, end);
+        var normalizedStart = Math.Min(selection!.Start, selection.End);
+        var normalizedEnd = Math.Max(selection.Start, selection.End);
 
-        await page.WaitForFunctionAsync(
-            """
-            (args) => {
-                const harness = window[args.harnessGlobalName];
-                const state = harness?.getState(args.testId);
-                const selection = state?.selection;
-                if (!selection) {
-                    return false;
-                }
-
-                const normalizedStart = Math.min(selection.start, selection.end);
-                const normalizedEnd = Math.max(selection.start, selection.end);
-                return normalizedStart === args.orderedStart && normalizedEnd === args.orderedEnd;
-            }
-            """,
-            new
-            {
-                harnessGlobalName = EditorMonacoRuntimeContract.BrowserHarnessGlobalName,
-                orderedEnd,
-                orderedStart,
-                testId = UiTestIds.Editor.SourceStage
-            },
-            new() { Timeout = BrowserTestConstants.Timing.FastVisibleTimeoutMs });
+        await Assert.That(normalizedStart).IsEqualTo(orderedStart);
+        await Assert.That(normalizedEnd).IsEqualTo(orderedEnd);
     }
 
     internal static async Task SetSelectionByTextAsync(IPage page, string targetText)