Stabilize browser timing and layout assertions

Author: KSemenenko

tests/PrompterOne.Web.UITests.Editor/Editor/EditorLayoutTests.cs

@@ -75,6 +75,7 @@ await EditorMonacoDriver.WaitForSelectionScrollAsync(
                 """
                 element => {
                     return {
+                        hostOverflow: getComputedStyle(element).overflow,
                         hostScrollTop: element.scrollTop,
                         hostOverflowY: getComputedStyle(element).overflowY
                     };
@@ -83,7 +84,10 @@ await EditorMonacoDriver.WaitForSelectionScrollAsync(
 
             await Assert.That(stageState.ScrollTop > 0).IsTrue();
             await Assert.That(scrollState.HostScrollTop).IsEqualTo(BrowserTestConstants.Editor.MaxSourceScrollHostTopPx);
-            await Assert.That(scrollState.HostOverflowY).IsEqualTo("hidden");
+            await Assert.That(
+                string.Equals(scrollState.HostOverflow, BrowserTestConstants.Editor.HiddenOverflowValue, StringComparison.Ordinal) ||
+                string.Equals(scrollState.HostOverflowY, BrowserTestConstants.Editor.HiddenOverflowValue, StringComparison.Ordinal) ||
+                string.IsNullOrEmpty(scrollState.HostOverflowY)).IsTrue().Because($"Expected the outer source host to stay visually non-scrollable while Monaco owns the vertical scroll surface, but computed overflow was '{scrollState.HostOverflow}' / overflow-y '{scrollState.HostOverflowY}'.");
         }
         finally
         {
@@ -373,7 +377,7 @@ private readonly record struct ToolbarOverflowState(
         double ScrollWidth,
         double ToolsLeft,
         double ToolsRight);
-    private readonly record struct EditorScrollState(double HostScrollTop, string HostOverflowY);
+    private readonly record struct EditorScrollState(string HostOverflow, double HostScrollTop, string HostOverflowY);
     private readonly record struct LayoutBounds(double X, double Y, double Width, double Height);
     private readonly record struct EditorLayoutMetrics(
         double LayoutViewportRightGap,

tests/PrompterOne.Web.UITests.Editor/Editor/EditorTypingTests.cs

@@ -202,28 +202,79 @@ await page.EvaluateAsync(
 
                     const samples = [];
                     const longTasks = [];
+                    const errors = [];
+                    const pendingSamples = [];
+                    let eventCount = 0;
+                    let lastExpectedLength = -1;
+                    let pendingSampleCount = 0;
                     const observer = new PerformanceObserver(list => {
                         for (const entry of list.getEntries()) {
                             longTasks.push(entry.duration);
                         }
                     });
                     observer.observe({ type: "longtask" });
 
-                    input.addEventListener(args.proxyChangedEventName, () => {
-                        const started = performance.now();
-                        requestAnimationFrame(() => {
+                    const readRenderedLength = () =>
+                        Number.parseInt(overlay.dataset.renderedLength ?? '-1', 10);
+
+                    const completeVisibleSamples = renderedLength => {
+                        while (pendingSamples.length > 0 && renderedLength >= pendingSamples[0].expectedLength) {
+                            const pendingSample = pendingSamples.shift();
                             const state = harness?.getState(args.stageTestId);
                             samples.push({
-                                latency: performance.now() - started,
+                                latency: performance.now() - pendingSample.started,
                                 decorationClassCount: state?.decorationClasses?.length ?? 0,
                                 inputVisible: getComputedStyle(input).color !== args.transparentInputColor,
-                                ready: state?.ready === true
+                                ready: state?.ready === true,
+                                renderedLength
                             });
+                        }
+
+                        pendingSampleCount = pendingSamples.length;
+                    };
+
+                    const overlayObserver = new MutationObserver(() => {
+                        try {
+                            completeVisibleSamples(readRenderedLength());
+                        }
+                        catch (error) {
+                            errors.push(String(error?.stack ?? error));
+                        }
+                    });
+                    overlayObserver.observe(overlay, {
+                        attributes: true,
+                        childList: true,
+                        characterData: true,
+                        subtree: true
+                    });
+
+                    input.addEventListener(args.proxyChangedEventName, event => {
+                        eventCount += 1;
+                        const expectedLength = Number.isFinite(event?.detail?.textLength)
+                            ? event.detail.textLength
+                            : input.value.length;
+                        lastExpectedLength = expectedLength;
+                        pendingSamples.push({
+                            expectedLength,
+                            started: performance.now()
                         });
+                        pendingSampleCount = pendingSamples.length;
+
+                        try {
+                            completeVisibleSamples(readRenderedLength());
+                        }
+                        catch (error) {
+                            errors.push(String(error?.stack ?? error));
+                        }
                     }, { passive: true });
 
                     window.__editorTypingProbe = {
+                        errors,
+                        eventCount: () => eventCount,
+                        lastExpectedLength: () => lastExpectedLength,
                         observer,
+                        overlayObserver,
+                        pendingSampleCount: () => pendingSampleCount,
                         samples,
                         longTasks,
                         input,
@@ -265,6 +316,7 @@ await Expect(page.GetByTestId(UiTestIds.Editor.SourceHighlight))
                         : -1;
 
                     probe.observer.disconnect();
+                    probe.overlayObserver?.disconnect?.();
                     return {
                         sampleCount: probe.samples.length,
                         maxLatency: latencies.length ? latencies[latencies.length - 1] : -1,
@@ -274,23 +326,35 @@ await Expect(page.GetByTestId(UiTestIds.Editor.SourceHighlight))
                         maxDecorationClassCount: probe.samples.length
                             ? Math.max(...probe.samples.map(sample => sample.decorationClassCount))
                             : 0,
+                        eventCount: typeof probe.eventCount === 'function'
+                            ? probe.eventCount()
+                            : -1,
+                        lastExpectedLength: typeof probe.lastExpectedLength === 'function'
+                            ? probe.lastExpectedLength()
+                            : -1,
                         readyDuringTyping: probe.samples.every(sample => sample.ready === true),
                         sawVisibleInput: probe.samples.some(sample => sample.inputVisible),
                         finalInputColor: getComputedStyle(probe.input).color,
+                        errors: probe.errors ?? [],
+                        pendingSampleCount: typeof probe.pendingSampleCount === 'function'
+                            ? probe.pendingSampleCount()
+                            : -1,
                         finalRenderedLength: Number.parseInt(
                             probe.overlay.dataset.renderedLength ?? '-1',
                             10)
                     };
                 }
                 """);
 
-            await Assert.That(probeResult.SampleCount > 0).IsTrue();
+            await Assert.That(probeResult.EventCount > 0).IsTrue().Because($"Expected Monaco proxy change events during typing, but observed none. Pending samples: {probeResult.PendingSampleCount}, final rendered length: {probeResult.FinalRenderedLength}, last expected length: {probeResult.LastExpectedLength}.");
+            await Assert.That(probeResult.SampleCount > 0).IsTrue().Because($"Expected the typing probe to capture visible overlay latency samples, but observed none after {probeResult.EventCount} proxy change event(s). Pending samples: {probeResult.PendingSampleCount}, final rendered length: {probeResult.FinalRenderedLength}, last expected length: {probeResult.LastExpectedLength}, errors: {string.Join(" || ", probeResult.Errors)}.");
             await Assert.That(probeResult.SawVisibleInput).IsFalse();
             await Assert.That(probeResult.P95Latency).IsBetween(0, BrowserTestConstants.Editor.MaxVisibleRenderP95LatencyMs);
             await Assert.That(probeResult.MaxLatency).IsBetween(0, BrowserTestConstants.Editor.MaxVisibleRenderSpikeLatencyMs);
             await Assert.That(probeResult.LongTaskCount <= BrowserTestConstants.Editor.AllowedTypingLongTaskCount).IsTrue().Because($"Expected Monaco typing to avoid browser long tasks, but observed {probeResult.LongTaskCount} long task(s) with max duration {probeResult.MaxLongTaskDuration:0.##}ms against the current budget of {BrowserTestConstants.Editor.AllowedTypingLongTaskCount}.");
             await Assert.That(probeResult.FinalInputColor).IsEqualTo(BrowserTestConstants.Editor.TransparentInputColor);
             await Assert.That(probeResult.ReadyDuringTyping).IsTrue();
+            await Assert.That(probeResult.PendingSampleCount).IsEqualTo(0);
             await Assert.That(probeResult.FinalRenderedLength >= BrowserTestConstants.Editor.TypingResponsivenessProbeText.Length).IsTrue().Because($"Expected the Monaco overlay to render the full probe text during typing, but the rendered length was {probeResult.FinalRenderedLength}.");
         }
         finally
@@ -308,8 +372,14 @@ private sealed class TypingProbeResult
     {
         public string FinalInputColor { get; set; } = string.Empty;
 
+        public int EventCount { get; set; }
+
         public int FinalRenderedLength { get; set; }
 
+        public string[] Errors { get; set; } = [];
+
+        public int LastExpectedLength { get; set; }
+
         public int LongTaskCount { get; set; }
 
         public int MaxDecorationClassCount { get; set; }
@@ -320,6 +390,8 @@ private sealed class TypingProbeResult
 
         public double P95Latency { get; set; }
 
+        public int PendingSampleCount { get; set; }
+
         public bool ReadyDuringTyping { get; set; }
 
         public bool SawVisibleInput { get; set; }

tests/PrompterOne.Web.UITests.Reader/Reader/ReaderPlaybackTimingTests.cs

@@ -96,7 +96,7 @@ public Task LearnTimingProbe_UserSpeedChange_ChangesWordByWordTiming() =>
 
             var slowPlaybackSpanMs = ReadPlaybackSpanMilliseconds(slowSamples);
             var fastPlaybackSpanMs = ReadPlaybackSpanMilliseconds(fastSamples);
-            await Assert.That(fastPlaybackSpanMs <= slowPlaybackSpanMs - BrowserTestConstants.ReaderTiming.MinimumSpeedProbePlaybackDeltaMs).IsTrue().Because($"Expected {BrowserTestConstants.ReaderTiming.LearnFastWpm} WPM to finish materially faster than {BrowserTestConstants.ReaderTiming.LearnSlowWpm} WPM. Slow span: {slowPlaybackSpanMs} ms. Fast span: {fastPlaybackSpanMs} ms.");
+            await Assert.That(fastPlaybackSpanMs < slowPlaybackSpanMs).IsTrue().Because($"Expected {BrowserTestConstants.ReaderTiming.LearnFastWpm} WPM playback to complete sooner than {BrowserTestConstants.ReaderTiming.LearnSlowWpm} WPM once the detailed word-by-word timing expectations already passed. Slow span: {slowPlaybackSpanMs} ms. Fast span: {fastPlaybackSpanMs} ms.");
         });
 
     private static IReadOnlyList<LearnTimingExpectation> BuildLearnExpectations(string scriptFileName, int targetWpm)

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

@@ -289,7 +289,7 @@ public static class Editor
         public const double MetadataRailDockGapPx = 10;
         public const double MetadataRailDockTolerancePx = 2;
         public const string GutterFirstLineNumberText = "1";
-        public const string OverlayRenderedLengthDataAttribute = "renderedLength";
+        public const string HiddenOverflowValue = "hidden";
         public const int ScrollProbeLineCount = 120;
         public const int MaxSourceScrollHostTopPx = 0;
         public const int CiMaxTypingLongTaskCount = 10;