feat(ri-050): RI-5-001 typed freshness states and stale-safe Mission Control surfaces (#1275) (#1300)

apps/web/src/spa/pages/tasks.spec.tsx

@@ -3,6 +3,9 @@ import { createRoot, type Root } from 'react-dom/client';
 import { createMemoryRouter, RouterProvider, type RouteObject } from 'react-router-dom';
 import { afterAll, afterEach, beforeAll, describe, expect, it, vi } from 'vitest';
 import { taskFixtures } from './page-fixtures';
+import { acceptSnapshot, DEFAULT_FRESHNESS_POLICY } from '@/lib/freshness/model';
+import { writeSnapshotCache } from '@/lib/freshness/snapshot-cache';
+import { validateTaskCollection } from '@/lib/freshness/validators';
 
 const { apiMock } = vi.hoisted(() => ({
   apiMock: vi.fn(),
@@ -48,6 +51,7 @@ afterEach(async () => {
   document.body.replaceChildren();
   root = null;
   apiMock.mockReset();
+  sessionStorage.clear();
 });
 
 async function renderTasksPage(): Promise<void> {
@@ -72,6 +76,13 @@ function clickButtonByText(text: string): void {
   button.dispatchEvent(new MouseEvent('click', { bubbles: true }));
 }
 
+/** Flush pending promise callbacks inside the act environment. */
+async function flushAct(): Promise<void> {
+  await act(async () => {
+    await Promise.resolve();
+  });
+}
+
 describe('TasksPage', () => {
   it('shows a visible loading state before the tasks request settles', async () => {
     const deferred = createDeferred<typeof taskFixtures>();
@@ -132,7 +143,7 @@ describe('TasksPage', () => {
     expect(container.textContent).toContain('Wire list and kanban modal interactions');
   });
 
-  it('renders a visible alert when the tasks request fails', async () => {
+  it('renders a failed fetch as an explicit unavailable state, never an empty healthy board', async () => {
     apiMock.mockRejectedValueOnce(new Error('Tasks request failed'));
 
     await renderTasksPage();
@@ -140,5 +151,80 @@ describe('TasksPage', () => {
     const alert = container.querySelector('[role="alert"]');
     expect(alert).toBeTruthy();
     expect(alert?.textContent).toContain('Tasks request failed');
+    expect(alert?.textContent).toContain('not an empty result');
+
+    // Negative controls: no board, no healthy empty-state markers, and the
+    // surface is marked unavailable rather than current.
+    expect(container.textContent).not.toContain('Not Started');
+    expect(container.textContent).not.toContain('No tasks');
+    expect(container.querySelector('[data-freshness]')?.getAttribute('data-freshness')).toBe(
+      'unavailable',
+    );
+  });
+
+  it('recovers to a current board after retrying a failed fetch', async () => {
+    apiMock
+      .mockRejectedValueOnce(new Error('Tasks request failed'))
+      .mockResolvedValueOnce(taskFixtures);
+
+    await renderTasksPage();
+    expect(container.querySelector('[role="alert"]')).toBeTruthy();
+
+    await act(async () => {
+      clickButtonByText('Retry');
+    });
+    await flushAct();
+
+    expect(container.querySelector('[role="alert"]')).toBeNull();
+    expect(container.textContent).toContain('Not Started');
+    expect(container.querySelector('[data-freshness]')?.getAttribute('data-freshness')).toBe(
+      'current',
+    );
+  });
+
+  it('labels restored last-known data as stale with source, version, and age until verified', async () => {
+    // Seed a last-known snapshot fetched five minutes ago; the page must
+    // render it only under an explicit staleness label while the fetch is
+    // still in flight.
+    const restored = acceptSnapshot({
+      value: taskFixtures,
+      validate: validateTaskCollection,
+      previous: null,
+      policy: DEFAULT_FRESHNESS_POLICY,
+      source: 'gateway:/api/tasks',
+      now: Date.now() - 5 * 60_000,
+    });
+    if (restored.outcome !== 'accepted') throw new Error('fixture setup failed');
+    writeSnapshotCache('tasks', restored.snapshot);
+
+    const deferred = createDeferred<typeof taskFixtures>();
+    apiMock.mockReturnValueOnce(deferred.promise);
+
+    await renderTasksPage();
+
+    expect(container.querySelector('[data-freshness]')?.getAttribute('data-freshness')).toBe(
+      'stale',
+    );
+    const banner = container.querySelector('[role="status"]');
+    expect(banner?.textContent).toContain('last-known');
+    expect(banner?.textContent).toContain('may be out of date');
+    expect(banner?.textContent).toContain('gateway:/api/tasks');
+    expect(banner?.textContent).toContain('snapshot v1');
+    expect(banner?.textContent).toContain('5m ago');
+
+    // Last-known data still renders as situational awareness under the label.
+    expect(container.textContent).toContain('Route /tasks');
+    expect(container.textContent).not.toContain('Loading tasks...');
+
+    // Verification lands: the banner clears and the surface becomes current.
+    await act(async () => {
+      deferred.resolve(taskFixtures);
+      await deferred.promise;
+    });
+
+    expect(container.querySelector('[role="status"]')).toBeNull();
+    expect(container.querySelector('[data-freshness]')?.getAttribute('data-freshness')).toBe(
+      'current',
+    );
   });
 });