From e66bc482b674785605ca7a6af2c995ce0dffe248 Mon Sep 17 00:00:00 2001
From: Molecule AI App-FE <app-fe@agents.moleculesai.app>
Date: Mon, 11 May 2026 12:53:15 +0000
Subject: [PATCH] fix(canvas/test): consistent fake-timer state across test
 files

Root cause of the ApprovalBanner test flakiness was mixing
vi.useRealTimers() and vi.useFakeTimers() across test files:

- PurchaseSuccessModal's afterEach called vi.useRealTimers(), leaving
  fake-timer state in an inconsistent position for the next test file.
- ApprovalBanner's afterEach also called vi.useRealTimers(), further
  polluting the state for subsequent files.

Fix: both files now consistently use vi.useFakeTimers() in
beforeEach/afterEach. Per-spy mockReset() replaces the global
vi.restoreAllMocks() in ApprovalBanner's afterEach so each test
gets a clean api mock without touching the module-level mock.

Changes:
- PurchaseSuccessModal: removed vi.restoreAllMocks() and
  vi.useRealTimers() from all afterEach/beforeEach hooks (file
  never creates spies, so restore was a no-op anyway).
- ApprovalBanner: vi.useFakeTimers() in all afterEach hooks;
  added mockGet?.mockReset() and mockPost?.mockReset() for
  per-spy cleanup; removed spurious mockGet.mockRestore() from
  one test (afterEach already handles cleanup).

Stable across 3 consecutive full-suite runs.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 .../__tests__/ApprovalBanner.test.tsx         | 20 ++++++++++---------
 .../__tests__/PurchaseSuccessModal.test.tsx   |  7 -------
 2 files changed, 11 insertions(+), 16 deletions(-)

diff --git a/canvas/src/components/__tests__/ApprovalBanner.test.tsx b/canvas/src/components/__tests__/ApprovalBanner.test.tsx
index 2a3fc758..2c962e2b 100644
--- a/canvas/src/components/__tests__/ApprovalBanner.test.tsx
+++ b/canvas/src/components/__tests__/ApprovalBanner.test.tsx
@@ -5,10 +5,10 @@
  * Covers: renders nothing when no approvals, polls /approvals/pending,
  * shows approval cards, approve/deny decisions, toast notifications.
  *
- * Note: does NOT mock @/lib/api — uses vi.spyOn on the real module.
- * vi.restoreAllMocks() is omitted from afterEach so queued mock values
- * (set up via mockResolvedValueOnce in beforeEach) are preserved for the
- * component's useEffect to consume.
+ * All blocks use vi.useFakeTimers() consistently in beforeEach/afterEach to
+ * avoid polluting the fake-timer state for subsequent test files. The
+ * vi.spyOn mocks are reset per-spy via mockReset() in afterEach so each
+ * test gets a clean mock state without touching the module-level api mock.
  */
 import React from "react";
 import { render, screen, fireEvent, cleanup, act } from "@testing-library/react";
@@ -56,7 +56,7 @@ describe("ApprovalBanner — empty state", () => {
 
   afterEach(() => {
     cleanup();
-    vi.useRealTimers();
+    vi.useFakeTimers();
   });
 
   it("renders nothing when there are no pending approvals", async () => {
@@ -84,7 +84,8 @@ describe("ApprovalBanner — renders approval cards", () => {
 
   afterEach(() => {
     cleanup();
-    vi.useRealTimers();
+    mockGet?.mockReset();
+    vi.useFakeTimers();
   });
 
   it("renders an alert card for each pending approval", async () => {
@@ -92,7 +93,6 @@ describe("ApprovalBanner — renders approval cards", () => {
     await act(async () => { await vi.runOnlyPendingTimersAsync(); });
     const alerts = screen.getAllByRole("alert");
     expect(alerts).toHaveLength(2);
-    mockGet.mockRestore();
   });
 
   it("displays the workspace name and action text", async () => {
@@ -146,7 +146,9 @@ describe("ApprovalBanner — decisions", () => {
 
   afterEach(() => {
     cleanup();
-    vi.useRealTimers();
+    mockGet?.mockReset();
+    mockPost?.mockReset();
+    vi.useFakeTimers();
   });
 
   it("calls POST /workspaces/:id/approvals/:id/decide on Approve click", async () => {
@@ -228,7 +230,7 @@ describe("ApprovalBanner — handles empty list from server", () => {
 
   afterEach(() => {
     cleanup();
-    vi.useRealTimers();
+    vi.useFakeTimers();
   });
 
   it("shows nothing when the API returns an empty array on first poll", async () => {
diff --git a/canvas/src/components/__tests__/PurchaseSuccessModal.test.tsx b/canvas/src/components/__tests__/PurchaseSuccessModal.test.tsx
index 4abdb36c..ff7e24fe 100644
--- a/canvas/src/components/__tests__/PurchaseSuccessModal.test.tsx
+++ b/canvas/src/components/__tests__/PurchaseSuccessModal.test.tsx
@@ -40,7 +40,6 @@ async function waitForDialog() {
 describe("PurchaseSuccessModal — render conditions", () => {
   afterEach(() => {
     cleanup();
-    vi.restoreAllMocks();
     clearSearch();
   });
 
@@ -108,8 +107,6 @@ describe("PurchaseSuccessModal — dismiss", () => {
 
   afterEach(() => {
     cleanup();
-    vi.restoreAllMocks();
-    vi.useRealTimers(); // ensure no fake timer leak
     clearSearch();
   });
 
@@ -172,7 +169,6 @@ describe("PurchaseSuccessModal — URL stripping", () => {
 
   afterEach(() => {
     cleanup();
-    vi.restoreAllMocks();
     clearSearch();
   });
 
@@ -198,13 +194,10 @@ describe("PurchaseSuccessModal — URL stripping", () => {
 describe("PurchaseSuccessModal — accessibility", () => {
   beforeEach(() => {
     setSearch("?purchase_success=1&item=TestItem");
-    vi.useRealTimers(); // ensure clean state
   });
 
   afterEach(() => {
     cleanup();
-    vi.restoreAllMocks();
-    vi.useRealTimers(); // ensure no fake timer leak
     clearSearch();
   });