From 70016494f2a85314e1ffae3782b211228783a374 Mon Sep 17 00:00:00 2001
From: Johan Gorter <johan-gorter@users.noreply.github.com>
Date: Wed, 14 Jan 2026 17:53:08 +0100
Subject: [PATCH] fix: ensure maquette renders between fill and keypress to
 prevent flaky test

Maquette only updates the DOM input value if it differs from the previous
render's value (to preserve cursor position). When fill() and press('Enter')
happen without an intervening render, this race condition occurs:

1. Initial render has value: '', previousValue = ''
2. fill() sets DOM value, schedules render
3. press('Enter') fires BEFORE animation frame
4. Handler clears newTodoTitle to ''
5. Render happens with value: ''
6. propValue ('') === previousValue (''), so DOM is NOT updated!

The fix adds a waitForAnimationFrame() after fill() to ensure maquette
renders the filled value before pressing Enter, so previousValue is updated.
---
 browser-tests/tests/TodoPage.ts | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/browser-tests/tests/TodoPage.ts b/browser-tests/tests/TodoPage.ts
index 5a96c5f..3481602 100644
--- a/browser-tests/tests/TodoPage.ts
+++ b/browser-tests/tests/TodoPage.ts
@@ -36,11 +36,14 @@ export class TodoPage {
   }
 
   /**
-   * Wait for one animation frame to allow maquette to render
+   * Wait for two animation frames to allow maquette to render
    */
   async waitForAnimationFrame(): Promise<void> {
     await this.page.evaluate(
-      () => new Promise((resolve) => requestAnimationFrame(() => resolve(undefined)))
+      () =>
+        new Promise((resolve) =>
+          requestAnimationFrame(() => requestAnimationFrame(() => resolve(undefined)))
+        )
     );
   }
 
@@ -72,8 +75,13 @@ export class TodoPage {
    */
   async addTodo(text: string): Promise<void> {
     await this.newTodoInput.fill(text);
+    // Wait for maquette to render the filled value before pressing Enter.
+    // This is important because maquette only updates the DOM value if it
+    // differs from the previous render. Without this wait, the Enter keypress
+    // could happen before maquette renders, causing it to skip the DOM update.
+    await this.waitForAnimationFrame();
     await this.newTodoInput.press("Enter");
-    // Wait for maquette to render
+    // Wait for maquette to render after clearing
     await this.waitForAnimationFrame();
   }