From 16e926614c2bb8fbb2ab751bba8f3412da6652e1 Mon Sep 17 00:00:00 2001
From: Sergey Kozyrenko <sirozha_blr@tut.by>
Date: Tue, 21 Jul 2026 04:33:57 +0700
Subject: [PATCH] test(e2e): assert the dashboard period switch renders a
 distinct range

The period-switch test only proved the usageStatsByPeriod refetch fired; it would
still pass if the UI rendered stale data. Key the cassette's usageStatsByPeriod by
period (week vs month) with distinct date ranges, and assert the Token Usage chart
x-axis shows the month range after the switch and drops the week range.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 frontend/e2e/mocks/cassettes/dashboard.ts      | 16 +++++++++++-----
 frontend/e2e/specs/dashboard/dashboard.spec.ts |  8 +++++++-
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/frontend/e2e/mocks/cassettes/dashboard.ts b/frontend/e2e/mocks/cassettes/dashboard.ts
index 7ce6e0fd..49ca8807 100644
--- a/frontend/e2e/mocks/cassettes/dashboard.ts
+++ b/frontend/e2e/mocks/cassettes/dashboard.ts
@@ -15,7 +15,7 @@ import type {
     UsageStatsTotalDocument,
 } from '@/graphql/types';
 
-import { AgentType } from '@/graphql/types';
+import { AgentType, UsageStatsPeriod } from '@/graphql/types';
 
 import type { Cassette } from '../cassette.ts';
 
@@ -23,6 +23,9 @@ import { entity, mergeCassettes } from '../cassette.ts';
 import { baseQueries, baseRest } from './base.ts';
 
 const DATES = ['2026-01-15', '2026-01-14', '2026-01-13'];
+// The month period returns a distinct date range so the period switch is
+// asserted on rendered data (the x-axis labels), not just the refetch firing.
+const MONTH_DATES = ['2026-08-15', '2026-08-10', '2026-08-05'];
 
 const usageStats = (seed: number): UsageStatsFragmentFragment =>
     entity('UsageStats', {
@@ -34,9 +37,9 @@ const usageStats = (seed: number): UsageStatsFragmentFragment =>
         totalUsageOut: seed * 40,
     });
 
-const usageStatsByPeriod: ResultOf<typeof UsageStatsByPeriodDocument> = {
-    usageStatsByPeriod: DATES.map((date, index) => entity('DailyUsageStats', { date, stats: usageStats(index + 1) })),
-};
+const usageStatsByPeriodFor = (dates: string[]): ResultOf<typeof UsageStatsByPeriodDocument> => ({
+    usageStatsByPeriod: dates.map((date, index) => entity('DailyUsageStats', { date, stats: usageStats(index + 1) })),
+});
 
 const toolcallsStatsByPeriod: ResultOf<typeof ToolcallsStatsByPeriodDocument> = {
     toolcallsStatsByPeriod: DATES.map((date, index) =>
@@ -143,7 +146,10 @@ export const dashboardCassette = (override: Cassette = {}): Cassette =>
                 toolcallsStatsTotal: [{ data: toolcallsStatsTotal }],
                 usageStatsByAgentType: [{ data: usageStatsByAgentType }],
                 usageStatsByModel: [{ data: usageStatsByModel }],
-                usageStatsByPeriod: [{ data: usageStatsByPeriod }],
+                usageStatsByPeriod: [
+                    { data: usageStatsByPeriodFor(DATES), variables: { period: UsageStatsPeriod.Week } },
+                    { data: usageStatsByPeriodFor(MONTH_DATES), variables: { period: UsageStatsPeriod.Month } },
+                ],
                 usageStatsByProvider: [{ data: usageStatsByProvider }],
                 usageStatsTotal: [{ data: usageStatsTotal }],
             },
diff --git a/frontend/e2e/specs/dashboard/dashboard.spec.ts b/frontend/e2e/specs/dashboard/dashboard.spec.ts
index 2956ccd6..5f5a2ba3 100644
--- a/frontend/e2e/specs/dashboard/dashboard.spec.ts
+++ b/frontend/e2e/specs/dashboard/dashboard.spec.ts
@@ -39,11 +39,14 @@ test.describe('dashboard', { tag: '@coverage' }, () => {
             expectCleanPage(pageErrorLog);
         });
 
-        test('period switch refetches the charts for the month', async ({ page, pageErrorLog }) => {
+        test('period switch refetches and renders the month range', async ({ page, pageErrorLog }) => {
             await page.goto('/dashboard');
 
             await expect(page.getByRole('heading', { exact: true, name: 'Flows Activity Over Time' })).toBeVisible();
 
+            const tokenCard = cardWith(page, 'Token Usage Over Time');
+            await expect(tokenCard.getByText('Jan 15', { exact: true })).toBeVisible();
+
             const monthRequest = page.waitForRequest((request) => {
                 if (request.method() !== 'POST' || !request.url().includes('/api/v1/graphql')) {
                     return false;
@@ -62,6 +65,9 @@ test.describe('dashboard', { tag: '@coverage' }, () => {
 
             await expect(page.getByRole('tab', { name: 'Month' })).toHaveAttribute('aria-selected', 'true');
 
+            await expect(tokenCard.getByText('Aug 15', { exact: true })).toBeVisible();
+            await expect(tokenCard.getByText('Jan 15', { exact: true })).toBeHidden();
+
             for (const title of CHART_TITLES) {
                 await expect(page.getByRole('heading', { exact: true, name: title })).toBeVisible();
             }