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.

Author: johan-gorter

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();
   }