From 50eff660b4a1293ebf9b05e8ac6c4bac5874955c Mon Sep 17 00:00:00 2001 From: adibarra <93070681+adibarra@users.noreply.github.com> Date: Sun, 22 Mar 2026 00:27:37 -0500 Subject: [PATCH 01/11] extract IntroSection component, test imports real component --- .../cypress/component/intro-section.cy.tsx | 47 +++++++++++ packages/app/src/components/intro-section.tsx | 82 +++++++++++++++++++ packages/app/src/components/page-content.tsx | 77 +---------------- 3 files changed, 131 insertions(+), 75 deletions(-) create mode 100644 packages/app/cypress/component/intro-section.cy.tsx create mode 100644 packages/app/src/components/intro-section.tsx diff --git a/packages/app/cypress/component/intro-section.cy.tsx b/packages/app/cypress/component/intro-section.cy.tsx new file mode 100644 index 0000000..bc105b0 --- /dev/null +++ b/packages/app/cypress/component/intro-section.cy.tsx @@ -0,0 +1,47 @@ +import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; + +import { IntroSection } from '@/components/intro-section'; + +const queryClient = new QueryClient({ + defaultOptions: { queries: { retry: false } }, +}); + +describe('Intro Section', () => { + beforeEach(() => { + cy.mount( + + + , + ); + }); + + it('renders the intro section card', () => { + cy.get('[data-testid="intro-section"]').should('be.visible'); + }); + + it('mentions InferenceX in the intro text', () => { + cy.get('[data-testid="intro-section"]').should('contain', 'InferenceX'); + }); + + it('describes LLM inference performance', () => { + cy.get('[data-testid="intro-section"]').should('contain', 'inference performance'); + }); + + it('mentions InferenceMAX (former name)', () => { + cy.get('[data-testid="intro-section"]').should('contain', 'InferenceMAX'); + }); + + it('contains links to v1 and v2 articles', () => { + cy.get('[data-testid="intro-link-v1"]') + .should('have.attr', 'href') + .and('include', 'semianalysis.com'); + cy.get('[data-testid="intro-link-v2"]') + .should('have.attr', 'href') + .and('include', 'semianalysis.com'); + }); + + it('article links open in a new tab', () => { + cy.get('[data-testid="intro-link-v1"]').should('have.attr', 'target', '_blank'); + cy.get('[data-testid="intro-link-v2"]').should('have.attr', 'target', '_blank'); + }); +}); diff --git a/packages/app/src/components/intro-section.tsx b/packages/app/src/components/intro-section.tsx new file mode 100644 index 0000000..6e0333c --- /dev/null +++ b/packages/app/src/components/intro-section.tsx @@ -0,0 +1,82 @@ +import { Card } from '@/components/ui/card'; +import { QuoteCarousel } from '@/components/quote-carousel'; +import { QUOTES } from '@/components/quotes/quotes-data'; + +export function IntroSection() { + return ( +
+ +

+ Open Source Continuous Inference Benchmark trusted by Operators of Trillion Dollar + GigaWatt Scale Token Factories +

+

+ As the world progresses exponentially towards AGI, software development and model releases + move at the speed of light. Existing benchmarks rapidly become obsolete due to their + static nature, and participants often submit software images purpose-built for the + benchmark itself which do not reflect real world performance. +

+

+ InferenceX™ (formerly InferenceMAX) is our independent, vendor + neutral, reproducible benchmark which addresses these issues by continuously benchmarking + inference software across a wide range of AI accelerators that are actually available to + the ML community. +

+

+ Our open data & insights are widely adopted by the ML community, capacity planning + strategy teams at trillion dollar token factories & AI Labs & at multiple billion dollar + NeoClouds. Learn more in our articles:{' '} + + v1 + + ,{' '} + + v2 + + . +

+
+ + [ + 'OpenAI', + 'Microsoft', + 'Together AI', + 'vLLM', + 'GPU Mode', + 'PyTorch Foundation', + 'Oracle', + 'CoreWeave', + 'Nebius', + 'Crusoe', + 'TensorWave', + 'SGLang', + 'WEKA', + ].includes(q.org), + )} + overrides={{ + order: ['OpenAI'], + labels: { + 'Together AI': 'Tri Dao', + 'PyTorch Foundation': 'PyTorch', + }, + }} + moreHref="/quotes" + /> +
+ +
+ ); +} diff --git a/packages/app/src/components/page-content.tsx b/packages/app/src/components/page-content.tsx index d1499fb..e111310 100644 --- a/packages/app/src/components/page-content.tsx +++ b/packages/app/src/components/page-content.tsx @@ -17,6 +17,7 @@ import InferenceChartDisplay from '@/components/inference/ui/ChartDisplay'; import { ReliabilityProvider } from '@/components/reliability/ReliabilityContext'; import ReliabilityChartDisplay from '@/components/reliability/ui/ChartDisplay'; import ThroughputCalculatorDisplay from '@/components/calculator/ThroughputCalculatorDisplay'; +import { IntroSection } from '@/components/intro-section'; import { Card } from '@/components/ui/card'; import { Label } from '@/components/ui/label'; import { @@ -27,8 +28,6 @@ import { SelectValue, } from '@/components/ui/select'; import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; -import { QuoteCarousel } from '@/components/quote-carousel'; -import { QUOTES } from '@/components/quotes/quotes-data'; import { UnofficialRunProvider } from '@/components/unofficial-run-provider'; import { getTabTitle, isValidTab } from '@/lib/tab-meta'; @@ -253,79 +252,7 @@ export function PageContent({ initialTab = 'inference' }: { initialTab?: string
-
- -

- Open Source Continuous Inference Benchmark trusted by Operators of Trillion Dollar - GigaWatt Scale Token Factories -

-

- As the world progresses exponentially towards AGI, software development and model - releases move at the speed of light. Existing benchmarks rapidly become obsolete - due to their static nature, and participants often submit software images - purpose-built for the benchmark itself which do not reflect real world - performance. -

-

- InferenceX™ (formerly InferenceMAX) is our independent, - vendor neutral, reproducible benchmark which addresses these issues by - continuously benchmarking inference software across a wide range of AI - accelerators that are actually available to the ML community. -

-

- Our open data & insights are widely adopted by the ML community, capacity planning - strategy teams at trillion dollar token factories & AI Labs & at multiple billion - dollar NeoClouds. Learn more in our articles:{' '} - - v1 - - ,{' '} - - v2 - - . -

-
- - [ - 'OpenAI', - 'Microsoft', - 'Together AI', - 'vLLM', - 'GPU Mode', - 'PyTorch Foundation', - 'Oracle', - 'CoreWeave', - 'Nebius', - 'Crusoe', - 'TensorWave', - 'SGLang', - 'WEKA', - ].includes(q.org), - )} - overrides={{ - order: ['OpenAI'], - labels: { - 'Together AI': 'Tri Dao', - 'PyTorch Foundation': 'PyTorch', - }, - }} - moreHref="/quotes" - /> -
- -
+
From 5805c5abed5e91871dfac8bba2dc0b753c58ff41 Mon Sep 17 00:00:00 2001 From: adibarra <93070681+adibarra@users.noreply.github.com> Date: Sun, 22 Mar 2026 00:32:20 -0500 Subject: [PATCH 02/11] extract ChartTabs into own component --- packages/app/src/components/chart-tabs.tsx | 239 ++++++++++++++++++ packages/app/src/components/page-content.tsx | 240 +------------------ 2 files changed, 241 insertions(+), 238 deletions(-) create mode 100644 packages/app/src/components/chart-tabs.tsx diff --git a/packages/app/src/components/chart-tabs.tsx b/packages/app/src/components/chart-tabs.tsx new file mode 100644 index 0000000..5785f51 --- /dev/null +++ b/packages/app/src/components/chart-tabs.tsx @@ -0,0 +1,239 @@ +'use client'; + +import { track } from '@/lib/analytics'; +import { useEffect, useRef, useState } from 'react'; + +import { GlobalFilterProvider } from '@/components/GlobalFilterContext'; +import { EvaluationProvider } from '@/components/evaluation/EvaluationContext'; +import EvaluationChartDisplay from '@/components/evaluation/ui/ChartDisplay'; +import { GpuSpecsContent } from '@/components/gpu-specs/gpu-specs-content'; +import GpuMetricsDisplay from '@/components/gpu-power/GpuPowerDisplay'; +import HistoricalTrendsDisplay from '@/components/trends/HistoricalTrendsDisplay'; +import { InferenceProvider } from '@/components/inference/InferenceContext'; +import InferenceChartDisplay from '@/components/inference/ui/ChartDisplay'; +import { ReliabilityProvider } from '@/components/reliability/ReliabilityContext'; +import ReliabilityChartDisplay from '@/components/reliability/ui/ChartDisplay'; +import ThroughputCalculatorDisplay from '@/components/calculator/ThroughputCalculatorDisplay'; +import { Card } from '@/components/ui/card'; +import { Label } from '@/components/ui/label'; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from '@/components/ui/select'; +import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; +import { getTabTitle, isValidTab } from '@/lib/tab-meta'; + +function getInitialTab(initialTab: string): string { + if (typeof window !== 'undefined') { + const hash = window.location.hash.slice(1); + if (hash && isValidTab(hash)) { + window.history.replaceState(null, '', `/${hash}`); + return hash; + } + } + return isValidTab(initialTab) ? initialTab : 'inference'; +} + +const POWERX_STORAGE_KEY = 'inferencex-powerx-unlocked'; +const UNLOCK_SEQUENCE = ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown']; + +function usePowerXGate(): boolean { + const [unlocked, setUnlocked] = useState(false); + const sequenceRef = useRef([]); + + // Check localStorage on mount + useEffect(() => { + if (typeof window !== 'undefined' && localStorage.getItem(POWERX_STORAGE_KEY) === '1') { + setUnlocked(true); + } + }, []); + + useEffect(() => { + if (unlocked) return; + const handleKeyDown = (e: KeyboardEvent) => { + sequenceRef.current.push(e.key); + if (sequenceRef.current.length > UNLOCK_SEQUENCE.length) { + sequenceRef.current = sequenceRef.current.slice(-UNLOCK_SEQUENCE.length); + } + if ( + sequenceRef.current.length === UNLOCK_SEQUENCE.length && + sequenceRef.current.every((k, i) => k === UNLOCK_SEQUENCE[i]) + ) { + localStorage.setItem(POWERX_STORAGE_KEY, '1'); + setUnlocked(true); + track('powerx_unlocked'); + } + }; + window.addEventListener('keydown', handleKeyDown); + return () => window.removeEventListener('keydown', handleKeyDown); + }, [unlocked]); + + return unlocked; +} + +export function ChartTabs({ initialTab }: { initialTab: string }) { + const [activeTab, setActiveTab] = useState(() => getInitialTab(initialTab)); + const powerXUnlocked = usePowerXGate(); + + useEffect(() => { + document.title = getTabTitle(activeTab); + }, [activeTab]); + + useEffect(() => { + const handlePopState = () => { + const pathTab = window.location.pathname.split('/').filter(Boolean)[0] || 'inference'; + if (isValidTab(pathTab)) { + setActiveTab(pathTab); + } + }; + window.addEventListener('popstate', handlePopState); + return () => window.removeEventListener('popstate', handlePopState); + }, []); + + const handleTabChange = (value: string) => { + setActiveTab(value); + window.history.pushState(null, '', `/${value}`); + window.dispatchEvent(new CustomEvent('inferencex:tab-change')); + track('tab_changed', { tab: value }); + }; + + return ( + + {/* Mobile: Dropdown */} +
+
+ +
+ + +
+ +
+ + {/* Desktop: Tabs */} + + + Inference Performance + + + Accuracy Evals + + + Historical Trends + + + TCO Calculator + + + GPU Reliability + + + GPU Specs + + {powerXUnlocked && ( + + PowerX + + )} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {powerXUnlocked && ( + + + + )} + + + ); +} diff --git a/packages/app/src/components/page-content.tsx b/packages/app/src/components/page-content.tsx index e111310..a11992a 100644 --- a/packages/app/src/components/page-content.tsx +++ b/packages/app/src/components/page-content.tsx @@ -1,247 +1,11 @@ 'use client'; -import { track } from '@/lib/analytics'; -import { useEffect, useRef, useState } from 'react'; - -import { GlobalFilterProvider } from '@/components/GlobalFilterContext'; -import { EvaluationProvider } from '@/components/evaluation/EvaluationContext'; -import EvaluationChartDisplay from '@/components/evaluation/ui/ChartDisplay'; -import { GpuSpecsContent } from '@/components/gpu-specs/gpu-specs-content'; -import GpuMetricsDisplay from '@/components/gpu-power/GpuPowerDisplay'; -import HistoricalTrendsDisplay from '@/components/trends/HistoricalTrendsDisplay'; +import { ChartTabs } from '@/components/chart-tabs'; import { ExportNudge } from '@/components/export-nudge'; import { GitHubStarModal } from '@/components/github-star-modal'; -import { StarNudge } from '@/components/star-nudge'; -import { InferenceProvider } from '@/components/inference/InferenceContext'; -import InferenceChartDisplay from '@/components/inference/ui/ChartDisplay'; -import { ReliabilityProvider } from '@/components/reliability/ReliabilityContext'; -import ReliabilityChartDisplay from '@/components/reliability/ui/ChartDisplay'; -import ThroughputCalculatorDisplay from '@/components/calculator/ThroughputCalculatorDisplay'; import { IntroSection } from '@/components/intro-section'; -import { Card } from '@/components/ui/card'; -import { Label } from '@/components/ui/label'; -import { - Select, - SelectContent, - SelectItem, - SelectTrigger, - SelectValue, -} from '@/components/ui/select'; -import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; +import { StarNudge } from '@/components/star-nudge'; import { UnofficialRunProvider } from '@/components/unofficial-run-provider'; -import { getTabTitle, isValidTab } from '@/lib/tab-meta'; - -function getInitialTab(initialTab: string): string { - if (typeof window !== 'undefined') { - const hash = window.location.hash.slice(1); - if (hash && isValidTab(hash)) { - window.history.replaceState(null, '', `/${hash}`); - return hash; - } - } - return isValidTab(initialTab) ? initialTab : 'inference'; -} - -const POWERX_STORAGE_KEY = 'inferencex-powerx-unlocked'; -const UNLOCK_SEQUENCE = ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown']; - -function usePowerXGate(): boolean { - const [unlocked, setUnlocked] = useState(false); - const sequenceRef = useRef([]); - - // Check localStorage on mount - useEffect(() => { - if (typeof window !== 'undefined' && localStorage.getItem(POWERX_STORAGE_KEY) === '1') { - setUnlocked(true); - } - }, []); - - useEffect(() => { - if (unlocked) return; - const handleKeyDown = (e: KeyboardEvent) => { - sequenceRef.current.push(e.key); - if (sequenceRef.current.length > UNLOCK_SEQUENCE.length) { - sequenceRef.current = sequenceRef.current.slice(-UNLOCK_SEQUENCE.length); - } - if ( - sequenceRef.current.length === UNLOCK_SEQUENCE.length && - sequenceRef.current.every((k, i) => k === UNLOCK_SEQUENCE[i]) - ) { - localStorage.setItem(POWERX_STORAGE_KEY, '1'); - setUnlocked(true); - track('powerx_unlocked'); - } - }; - window.addEventListener('keydown', handleKeyDown); - return () => window.removeEventListener('keydown', handleKeyDown); - }, [unlocked]); - - return unlocked; -} - -function ChartTabs({ initialTab }: { initialTab: string }) { - const [activeTab, setActiveTab] = useState(() => getInitialTab(initialTab)); - const powerXUnlocked = usePowerXGate(); - - useEffect(() => { - document.title = getTabTitle(activeTab); - }, [activeTab]); - - useEffect(() => { - const handlePopState = () => { - const pathTab = window.location.pathname.split('/').filter(Boolean)[0] || 'inference'; - if (isValidTab(pathTab)) { - setActiveTab(pathTab); - } - }; - window.addEventListener('popstate', handlePopState); - return () => window.removeEventListener('popstate', handlePopState); - }, []); - - const handleTabChange = (value: string) => { - setActiveTab(value); - window.history.pushState(null, '', `/${value}`); - window.dispatchEvent(new CustomEvent('inferencex:tab-change')); - track('tab_changed', { tab: value }); - }; - - return ( - - {/* Mobile: Dropdown */} -
-
- -
- - -
- -
- - {/* Desktop: Tabs */} - - - Inference Performance - - - Accuracy Evals - - - Historical Trends - - - TCO Calculator - - - GPU Reliability - - - GPU Specs - - {powerXUnlocked && ( - - PowerX - - )} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - {powerXUnlocked && ( - - - - )} - - - ); -} export function PageContent({ initialTab = 'inference' }: { initialTab?: string }) { return ( From f22c48deaab52e1d810ec3d50f3b81b7ed9d6eaf Mon Sep 17 00:00:00 2001 From: adibarra <93070681+adibarra@users.noreply.github.com> Date: Sun, 22 Mar 2026 00:35:58 -0500 Subject: [PATCH 03/11] tabs E2E: cover all tab URL updates --- packages/app/cypress/e2e/tabs.cy.ts | 61 +++++------------------------ 1 file changed, 10 insertions(+), 51 deletions(-) diff --git a/packages/app/cypress/e2e/tabs.cy.ts b/packages/app/cypress/e2e/tabs.cy.ts index 5590222..723f6e6 100644 --- a/packages/app/cypress/e2e/tabs.cy.ts +++ b/packages/app/cypress/e2e/tabs.cy.ts @@ -1,4 +1,4 @@ -describe('Chart Section Tabs', () => { +describe('Chart Section Tabs — E2E', () => { before(() => { cy.window().then((win) => { win.localStorage.setItem('inferencex-star-modal-dismissed', String(Date.now())); @@ -6,63 +6,22 @@ describe('Chart Section Tabs', () => { cy.visit('/'); }); - it('shows the tabs list on desktop', () => { - cy.get('[data-testid="chart-section-tabs"]').should('be.visible'); - }); - - it('has three tab triggers: Inference, Evaluation, Reliability', () => { - cy.get('[data-testid="tab-trigger-inference"]').should('be.visible'); - cy.get('[data-testid="tab-trigger-evaluation"]').should('be.visible'); - cy.get('[data-testid="tab-trigger-reliability"]').should('be.visible'); - }); - - it('Inference Performance tab is active by default', () => { - cy.get('[data-testid="tab-trigger-inference"]').should('have.attr', 'data-state', 'active'); - }); - - it('Evaluation and Reliability tabs are inactive by default', () => { - cy.get('[data-testid="tab-trigger-evaluation"]').should('have.attr', 'data-state', 'inactive'); - cy.get('[data-testid="tab-trigger-reliability"]').should('have.attr', 'data-state', 'inactive'); - }); - - it('clicking Evaluation tab makes it active', () => { - cy.get('[data-testid="tab-trigger-evaluation"]').click(); - cy.get('[data-testid="tab-trigger-evaluation"]').should('have.attr', 'data-state', 'active'); - cy.get('[data-testid="tab-trigger-inference"]').should('have.attr', 'data-state', 'inactive'); - }); - - it('switching to Evaluation shows Accuracy Evals content', () => { - // Already on evaluation from previous test - cy.get('[data-testid="evaluation-chart-display"]').should('exist'); - }); - - it('clicking Reliability tab makes it active', () => { - cy.get('[data-testid="tab-trigger-reliability"]').click(); - cy.get('[data-testid="tab-trigger-reliability"]').should('have.attr', 'data-state', 'active'); - }); - - it('switching to Reliability shows GPU Reliability content', () => { - // Already on reliability from previous test - cy.get('[data-testid="reliability-chart-display"]').should('exist'); - }); - - it('clicking back to Inference tab works', () => { - cy.get('[data-testid="tab-trigger-inference"]').click(); - cy.get('[data-testid="tab-trigger-inference"]').should('have.attr', 'data-state', 'active'); - }); - - it('switching to Inference shows Inference Performance content', () => { - // Already on inference from previous test - cy.get('[data-testid="inference-chart-display"]').should('exist'); - }); - it('updates the URL path when switching tabs', () => { cy.get('[data-testid="tab-trigger-evaluation"]').click(); cy.url().should('include', '/evaluation'); + cy.get('[data-testid="tab-trigger-historical"]').click(); + cy.url().should('include', '/historical'); + + cy.get('[data-testid="tab-trigger-calculator"]').click(); + cy.url().should('include', '/calculator'); + cy.get('[data-testid="tab-trigger-reliability"]').click(); cy.url().should('include', '/reliability'); + cy.get('[data-testid="tab-trigger-gpu-specs"]').click(); + cy.url().should('include', '/gpu-specs'); + cy.get('[data-testid="tab-trigger-inference"]').click(); cy.url().should('include', '/inference'); }); From f60fb85af37673b1eaaff0f7d159745a3711e4f4 Mon Sep 17 00:00:00 2001 From: adibarra <93070681+adibarra@users.noreply.github.com> Date: Sun, 22 Mar 2026 00:36:58 -0500 Subject: [PATCH 04/11] remove intro-section E2E test, replaced by component test --- packages/app/cypress/e2e/intro-section.cy.ts | 51 -------------------- 1 file changed, 51 deletions(-) delete mode 100644 packages/app/cypress/e2e/intro-section.cy.ts diff --git a/packages/app/cypress/e2e/intro-section.cy.ts b/packages/app/cypress/e2e/intro-section.cy.ts deleted file mode 100644 index 741fc12..0000000 --- a/packages/app/cypress/e2e/intro-section.cy.ts +++ /dev/null @@ -1,51 +0,0 @@ -describe('Intro Section', () => { - before(() => { - cy.window().then((win) => { - win.localStorage.setItem('inferencex-star-modal-dismissed', String(Date.now())); - }); - cy.visit('/'); - }); - - it('renders the intro section card', () => { - cy.get('[data-testid="intro-section"]').should('be.visible'); - }); - - it('mentions InferenceX in the intro text', () => { - cy.get('[data-testid="intro-section"]').should('contain', 'InferenceX'); - }); - - it('describes LLM inference performance', () => { - cy.get('[data-testid="intro-section"]').should('contain', 'inference performance'); - }); - - it('mentions InferenceMAX (formerly name)', () => { - cy.get('[data-testid="intro-section"]').should('contain', 'InferenceMAX'); - }); - - it('contains links to v1 and v2 articles', () => { - cy.get('[data-testid="intro-section"]') - .contains('v1') - .should('have.attr', 'href') - .and('include', 'semianalysis.com'); - cy.get('[data-testid="intro-section"]') - .contains('v2') - .should('have.attr', 'href') - .and('include', 'semianalysis.com'); - }); - - it('article links open in a new tab', () => { - cy.get('[data-testid="intro-section"]') - .find('a[target="_blank"]') - .should('have.length.at.least', 2); - }); - - it('appears above the chart section', () => { - cy.get('[data-testid="intro-section"]').then(($intro) => { - cy.get('[data-testid="chart-section-tabs"]').then(($tabs) => { - const introTop = $intro[0].getBoundingClientRect().top; - const tabsTop = $tabs[0].getBoundingClientRect().top; - expect(introTop).to.be.lessThan(tabsTop); - }); - }); - }); -}); From 963f3eeb619b23c3b3a7b4c71ef818985fdb2e21 Mon Sep 17 00:00:00 2001 From: adibarra <93070681+adibarra@users.noreply.github.com> Date: Sun, 22 Mar 2026 00:40:01 -0500 Subject: [PATCH 05/11] add component tests for chart-selectors, chart-buttons, date-range-picker --- .../cypress/component/chart-buttons.cy.tsx | 72 ++++++++++++ .../cypress/component/chart-selectors.cy.tsx | 104 ++++++++++++++++++ .../component/date-range-picker.cy.tsx | 90 +++++++++++++++ 3 files changed, 266 insertions(+) create mode 100644 packages/app/cypress/component/chart-buttons.cy.tsx create mode 100644 packages/app/cypress/component/chart-selectors.cy.tsx create mode 100644 packages/app/cypress/component/date-range-picker.cy.tsx diff --git a/packages/app/cypress/component/chart-buttons.cy.tsx b/packages/app/cypress/component/chart-buttons.cy.tsx new file mode 100644 index 0000000..b2f6b3a --- /dev/null +++ b/packages/app/cypress/component/chart-buttons.cy.tsx @@ -0,0 +1,72 @@ +import { ChartButtons } from '@/components/ui/chart-buttons'; + +describe('ChartButtons', () => { + describe('without CSV export', () => { + beforeEach(() => { + cy.mount( +
+
Chart content
+ +
, + ); + }); + + it('renders export button', () => { + cy.get('[data-testid="export-button"]').should('be.visible'); + }); + + it('renders zoom reset button', () => { + cy.get('[data-testid="zoom-reset-button"]').should('be.visible'); + }); + + it('zoom reset dispatches custom event', () => { + cy.window().then((win) => { + const handler = cy.stub().as('zoomReset'); + win.addEventListener('test_zoom_reset_test-chart', handler); + }); + cy.get('[data-testid="zoom-reset-button"]').click(); + cy.get('@zoomReset').should('have.been.calledOnce'); + }); + }); + + describe('with CSV export', () => { + it('shows dropdown with PNG and CSV options', () => { + const onExportCsv = cy.stub().as('csvExport'); + cy.mount( +
+
Chart content
+ +
, + ); + cy.get('[data-testid="export-button"]').click(); + cy.get('[data-testid="export-png-button"]').should('be.visible'); + cy.get('[data-testid="export-csv-button"]').should('be.visible'); + }); + + it('clicking CSV calls onExportCsv', () => { + const onExportCsv = cy.stub().as('csvExport'); + cy.mount( +
+
Chart content
+ +
, + ); + cy.get('[data-testid="export-button"]').click(); + cy.get('[data-testid="export-csv-button"]').click(); + cy.get('@csvExport').should('have.been.calledOnce'); + }); + }); + + describe('hideZoomReset', () => { + it('hides zoom reset button when hideZoomReset is true', () => { + cy.mount( +
+
Chart content
+ +
, + ); + cy.get('[data-testid="zoom-reset-button"]').should('not.exist'); + cy.get('[data-testid="export-button"]').should('be.visible'); + }); + }); +}); diff --git a/packages/app/cypress/component/chart-selectors.cy.tsx b/packages/app/cypress/component/chart-selectors.cy.tsx new file mode 100644 index 0000000..947c8e5 --- /dev/null +++ b/packages/app/cypress/component/chart-selectors.cy.tsx @@ -0,0 +1,104 @@ +import { useState } from 'react'; + +import { ModelSelector, SequenceSelector, PrecisionSelector } from '@/components/ui/chart-selectors'; +import { TooltipProvider } from '@/components/ui/tooltip'; + +function ModelSelectorHarness() { + const [value, setValue] = useState('DeepSeek-R1-0528'); + return ( + + + + ); +} + +function SequenceSelectorHarness() { + const [value, setValue] = useState('1024_128'); + return ( + + + + ); +} + +function PrecisionSelectorHarness() { + const [value, setValue] = useState(['FP8']); + return ( + + + + ); +} + +describe('Chart Selectors', () => { + describe('ModelSelector', () => { + beforeEach(() => { + cy.mount(); + }); + + it('renders with data-testid', () => { + cy.get('[data-testid="model-selector"]').should('be.visible'); + }); + + it('shows options when clicked', () => { + cy.get('[data-testid="model-selector"]').click(); + cy.get('[role="option"]').should('have.length.greaterThan', 0); + }); + + it('selecting an option updates the displayed value', () => { + cy.get('[data-testid="model-selector"]').click(); + cy.get('[role="option"]').contains('Qwen3-235B').click(); + cy.get('[data-testid="model-selector"]').should('contain', 'Qwen3-235B'); + }); + }); + + describe('SequenceSelector', () => { + beforeEach(() => { + cy.mount(); + }); + + it('renders with data-testid', () => { + cy.get('[data-testid="sequence-selector"]').should('be.visible'); + }); + + it('shows options when clicked', () => { + cy.get('[data-testid="sequence-selector"]').click(); + cy.get('[role="option"]').should('have.length', 3); + }); + + it('selecting an option updates the displayed value', () => { + cy.get('[data-testid="sequence-selector"]').click(); + cy.get('[role="option"]').last().click(); + cy.get('[data-testid="sequence-selector"]').should('not.contain', '1K / 128'); + }); + }); + + describe('PrecisionSelector', () => { + beforeEach(() => { + cy.mount(); + }); + + it('renders with data-testid', () => { + cy.get('[data-testid="precision-multiselect"]').should('be.visible'); + }); + + it('shows current selection', () => { + cy.get('[data-testid="precision-multiselect"]').should('contain', 'FP8'); + }); + }); +}); diff --git a/packages/app/cypress/component/date-range-picker.cy.tsx b/packages/app/cypress/component/date-range-picker.cy.tsx new file mode 100644 index 0000000..0bb4283 --- /dev/null +++ b/packages/app/cypress/component/date-range-picker.cy.tsx @@ -0,0 +1,90 @@ +import { useState } from 'react'; + +import { DateRangePicker, DateRange } from '@/components/ui/date-range-picker'; + +function DateRangePickerHarness({ + initialRange = { startDate: '', endDate: '' }, + availableDates, +}: { + initialRange?: DateRange; + availableDates?: string[]; +}) { + const [range, setRange] = useState(initialRange); + return ( +
+ +
+ {range.startDate && range.endDate + ? `${range.startDate} to ${range.endDate}` + : 'no range'} +
+
+ ); +} + +describe('DateRangePicker', () => { + it('renders with placeholder text', () => { + cy.mount(); + cy.get('[data-testid="date-range-wrapper"]').should('contain', 'Select date range'); + }); + + it('opens dialog when clicked', () => { + cy.mount(); + cy.contains('Select date range').click(); + cy.get('[role="dialog"]').should('be.visible'); + cy.contains('Select Date Range').should('be.visible'); + }); + + it('shows cancel and apply buttons in dialog', () => { + cy.mount(); + cy.contains('Select date range').click(); + cy.contains('button', 'Cancel').should('be.visible'); + cy.contains('button', 'Apply').should('be.visible'); + }); + + it('apply is disabled when no dates selected', () => { + cy.mount(); + cy.contains('Select date range').click(); + cy.contains('button', 'Apply').should('be.disabled'); + }); + + it('cancel closes the dialog', () => { + cy.mount(); + cy.contains('Select date range').click(); + cy.get('[role="dialog"]').should('be.visible'); + cy.contains('button', 'Cancel').click(); + cy.get('[role="dialog"]').should('not.exist'); + }); + + it('displays formatted range when dates are provided', () => { + cy.mount( + , + ); + cy.get('[data-testid="date-range-wrapper"]').should('contain', 'Jan 15, 2026'); + cy.get('[data-testid="date-range-wrapper"]').should('contain', 'Feb 20, 2026'); + }); + + it('shows quick select buttons when availableDates provided', () => { + const dates = ['2025-12-01', '2025-12-15', '2026-01-01', '2026-02-01', '2026-03-01']; + cy.mount(); + cy.contains('Select date range').click(); + cy.contains('button', 'Max Range').should('be.visible'); + }); + + it('shows overlay when no available dates', () => { + cy.mount(); + cy.contains('Select date range').click(); + cy.contains('No available dates').should('be.visible'); + }); + + it('shows overlay when only 1 available date', () => { + cy.mount(); + cy.contains('Select date range').click(); + cy.contains('Only 1 date available').should('be.visible'); + }); +}); From 831bac17443ecb235aa24f05fb25af5ec0b29521 Mon Sep 17 00:00:00 2001 From: adibarra <93070681+adibarra@users.noreply.github.com> Date: Sun, 22 Mar 2026 00:43:42 -0500 Subject: [PATCH 06/11] remove tautological tests (renders/exists checks with no behavioral value) --- .../cypress/component/chart-buttons.cy.tsx | 8 ---- .../cypress/component/chart-selectors.cy.tsx | 18 ++----- .../component/date-range-picker.cy.tsx | 11 +---- packages/app/cypress/component/footer.cy.tsx | 8 ---- packages/app/cypress/component/header.cy.tsx | 8 ---- .../cypress/component/intro-section.cy.tsx | 47 ------------------- .../app/cypress/component/mode-toggle.cy.tsx | 8 ---- .../app/cypress/component/social-share.cy.tsx | 29 ------------ 8 files changed, 6 insertions(+), 131 deletions(-) delete mode 100644 packages/app/cypress/component/intro-section.cy.tsx delete mode 100644 packages/app/cypress/component/social-share.cy.tsx diff --git a/packages/app/cypress/component/chart-buttons.cy.tsx b/packages/app/cypress/component/chart-buttons.cy.tsx index b2f6b3a..579f157 100644 --- a/packages/app/cypress/component/chart-buttons.cy.tsx +++ b/packages/app/cypress/component/chart-buttons.cy.tsx @@ -11,14 +11,6 @@ describe('ChartButtons', () => { ); }); - it('renders export button', () => { - cy.get('[data-testid="export-button"]').should('be.visible'); - }); - - it('renders zoom reset button', () => { - cy.get('[data-testid="zoom-reset-button"]').should('be.visible'); - }); - it('zoom reset dispatches custom event', () => { cy.window().then((win) => { const handler = cy.stub().as('zoomReset'); diff --git a/packages/app/cypress/component/chart-selectors.cy.tsx b/packages/app/cypress/component/chart-selectors.cy.tsx index 947c8e5..767416e 100644 --- a/packages/app/cypress/component/chart-selectors.cy.tsx +++ b/packages/app/cypress/component/chart-selectors.cy.tsx @@ -1,6 +1,10 @@ import { useState } from 'react'; -import { ModelSelector, SequenceSelector, PrecisionSelector } from '@/components/ui/chart-selectors'; +import { + ModelSelector, + SequenceSelector, + PrecisionSelector, +} from '@/components/ui/chart-selectors'; import { TooltipProvider } from '@/components/ui/tooltip'; function ModelSelectorHarness() { @@ -51,10 +55,6 @@ describe('Chart Selectors', () => { cy.mount(); }); - it('renders with data-testid', () => { - cy.get('[data-testid="model-selector"]').should('be.visible'); - }); - it('shows options when clicked', () => { cy.get('[data-testid="model-selector"]').click(); cy.get('[role="option"]').should('have.length.greaterThan', 0); @@ -72,10 +72,6 @@ describe('Chart Selectors', () => { cy.mount(); }); - it('renders with data-testid', () => { - cy.get('[data-testid="sequence-selector"]').should('be.visible'); - }); - it('shows options when clicked', () => { cy.get('[data-testid="sequence-selector"]').click(); cy.get('[role="option"]').should('have.length', 3); @@ -93,10 +89,6 @@ describe('Chart Selectors', () => { cy.mount(); }); - it('renders with data-testid', () => { - cy.get('[data-testid="precision-multiselect"]').should('be.visible'); - }); - it('shows current selection', () => { cy.get('[data-testid="precision-multiselect"]').should('contain', 'FP8'); }); diff --git a/packages/app/cypress/component/date-range-picker.cy.tsx b/packages/app/cypress/component/date-range-picker.cy.tsx index 0bb4283..d845eb6 100644 --- a/packages/app/cypress/component/date-range-picker.cy.tsx +++ b/packages/app/cypress/component/date-range-picker.cy.tsx @@ -19,9 +19,7 @@ function DateRangePickerHarness({ placeholder="Select date range" />
- {range.startDate && range.endDate - ? `${range.startDate} to ${range.endDate}` - : 'no range'} + {range.startDate && range.endDate ? `${range.startDate} to ${range.endDate}` : 'no range'}
); @@ -40,13 +38,6 @@ describe('DateRangePicker', () => { cy.contains('Select Date Range').should('be.visible'); }); - it('shows cancel and apply buttons in dialog', () => { - cy.mount(); - cy.contains('Select date range').click(); - cy.contains('button', 'Cancel').should('be.visible'); - cy.contains('button', 'Apply').should('be.visible'); - }); - it('apply is disabled when no dates selected', () => { cy.mount(); cy.contains('Select date range').click(); diff --git a/packages/app/cypress/component/footer.cy.tsx b/packages/app/cypress/component/footer.cy.tsx index 5c1dcb3..23e5eed 100644 --- a/packages/app/cypress/component/footer.cy.tsx +++ b/packages/app/cypress/component/footer.cy.tsx @@ -15,10 +15,6 @@ describe('Footer', () => { ); }); - it('renders the footer element', () => { - cy.get('[data-testid="footer"]').should('exist'); - }); - it('displays copyright notice with semianalysis.com and current year', () => { const year = new Date().getFullYear().toString(); cy.get('[data-testid="footer-copyright"]').should('contain', 'semianalysis.com'); @@ -58,10 +54,6 @@ describe('Footer', () => { .and('include', 'github.com/SemiAnalysisAI/InferenceX-app'); }); - it('shows the SemiAnalysis logo', () => { - cy.get('[data-testid="footer-brand"]').find('img[alt="SemiAnalysis logo"]').should('exist'); - }); - it('all external links open in a new tab', () => { cy.get('[data-testid="footer-links"]') .find('a[target="_blank"]') diff --git a/packages/app/cypress/component/header.cy.tsx b/packages/app/cypress/component/header.cy.tsx index e020b32..18df15a 100644 --- a/packages/app/cypress/component/header.cy.tsx +++ b/packages/app/cypress/component/header.cy.tsx @@ -18,10 +18,6 @@ describe('Header', () => { ); }); - it('renders the header element', () => { - cy.get('[data-testid="header"]').should('be.visible'); - }); - it('displays the InferenceX title', () => { cy.get('[data-testid="header"]').contains('InferenceX').should('be.visible'); }); @@ -52,10 +48,6 @@ describe('Header', () => { .and('include', 'github.com/SemiAnalysisAI/InferenceX'); }); - it('GitHub stars button has glow animation class', () => { - cy.get('[data-testid="header-star-button"]').should('have.class', 'star-button-glow'); - }); - it('shows the theme toggle button', () => { cy.get('[data-testid="theme-toggle"]').should('be.visible'); }); diff --git a/packages/app/cypress/component/intro-section.cy.tsx b/packages/app/cypress/component/intro-section.cy.tsx deleted file mode 100644 index bc105b0..0000000 --- a/packages/app/cypress/component/intro-section.cy.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; - -import { IntroSection } from '@/components/intro-section'; - -const queryClient = new QueryClient({ - defaultOptions: { queries: { retry: false } }, -}); - -describe('Intro Section', () => { - beforeEach(() => { - cy.mount( - - - , - ); - }); - - it('renders the intro section card', () => { - cy.get('[data-testid="intro-section"]').should('be.visible'); - }); - - it('mentions InferenceX in the intro text', () => { - cy.get('[data-testid="intro-section"]').should('contain', 'InferenceX'); - }); - - it('describes LLM inference performance', () => { - cy.get('[data-testid="intro-section"]').should('contain', 'inference performance'); - }); - - it('mentions InferenceMAX (former name)', () => { - cy.get('[data-testid="intro-section"]').should('contain', 'InferenceMAX'); - }); - - it('contains links to v1 and v2 articles', () => { - cy.get('[data-testid="intro-link-v1"]') - .should('have.attr', 'href') - .and('include', 'semianalysis.com'); - cy.get('[data-testid="intro-link-v2"]') - .should('have.attr', 'href') - .and('include', 'semianalysis.com'); - }); - - it('article links open in a new tab', () => { - cy.get('[data-testid="intro-link-v1"]').should('have.attr', 'target', '_blank'); - cy.get('[data-testid="intro-link-v2"]').should('have.attr', 'target', '_blank'); - }); -}); diff --git a/packages/app/cypress/component/mode-toggle.cy.tsx b/packages/app/cypress/component/mode-toggle.cy.tsx index a41e6eb..ec3d631 100644 --- a/packages/app/cypress/component/mode-toggle.cy.tsx +++ b/packages/app/cypress/component/mode-toggle.cy.tsx @@ -10,14 +10,6 @@ describe('ModeToggle', () => { ); }); - it('renders the theme toggle button', () => { - cy.get('[data-testid="theme-toggle"]').should('be.visible'); - }); - - it('has accessible aria-label', () => { - cy.get('[data-testid="theme-toggle"]').should('have.attr', 'aria-label'); - }); - it('clicking toggle switches to dark mode', () => { cy.get('html').should('not.have.class', 'dark'); cy.get('[data-testid="theme-toggle"]').click(); diff --git a/packages/app/cypress/component/social-share.cy.tsx b/packages/app/cypress/component/social-share.cy.tsx deleted file mode 100644 index 4102410..0000000 --- a/packages/app/cypress/component/social-share.cy.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { ShareTwitterButton, ShareLinkedInButton } from '@/components/share-buttons'; - -describe('Share Buttons', () => { - it('Twitter share button renders and is a button element', () => { - cy.mount(); - cy.get('[data-testid="share-twitter"]').should('exist'); - cy.get('[data-testid="share-twitter"]').should('have.prop', 'tagName', 'BUTTON'); - }); - - it('Twitter share button has a descriptive title referencing Twitter or X', () => { - cy.mount(); - cy.get('[data-testid="share-twitter"]') - .should('have.attr', 'title') - .and('match', /Twitter|X/i); - }); - - it('LinkedIn share button renders and is a button element', () => { - cy.mount(); - cy.get('[data-testid="share-linkedin"]').should('exist'); - cy.get('[data-testid="share-linkedin"]').should('have.prop', 'tagName', 'BUTTON'); - }); - - it('LinkedIn share button has a descriptive title referencing LinkedIn', () => { - cy.mount(); - cy.get('[data-testid="share-linkedin"]') - .should('have.attr', 'title') - .and('include', 'LinkedIn'); - }); -}); From 1e035b03affbbeca2ba26629e5b4f11c66515ca2 Mon Sep 17 00:00:00 2001 From: adibarra <93070681+adibarra@users.noreply.github.com> Date: Sun, 22 Mar 2026 00:45:58 -0500 Subject: [PATCH 07/11] remove E2E tests redundant with component tests --- packages/app/cypress/e2e/chart-export.cy.ts | 45 ------------ .../app/cypress/e2e/inference-controls.cy.ts | 72 ------------------- packages/app/cypress/e2e/sidebar-legend.cy.ts | 63 ---------------- 3 files changed, 180 deletions(-) delete mode 100644 packages/app/cypress/e2e/chart-export.cy.ts delete mode 100644 packages/app/cypress/e2e/inference-controls.cy.ts delete mode 100644 packages/app/cypress/e2e/sidebar-legend.cy.ts diff --git a/packages/app/cypress/e2e/chart-export.cy.ts b/packages/app/cypress/e2e/chart-export.cy.ts deleted file mode 100644 index e816217..0000000 --- a/packages/app/cypress/e2e/chart-export.cy.ts +++ /dev/null @@ -1,45 +0,0 @@ -describe('Chart Export and Share', () => { - before(() => { - cy.window().then((win) => { - win.localStorage.setItem('inferencex-star-modal-dismissed', String(Date.now())); - }); - cy.visit('/'); - cy.get('[data-testid="chart-figure"]').should('exist'); - }); - - it('shows export button on inference chart', () => { - cy.get('[data-testid="export-button"]').first().should('exist'); - }); - - it('shows zoom reset button on inference chart', () => { - cy.get('[data-testid="zoom-reset-button"]').first().should('exist'); - }); - - it('shows share button in inference chart controls', () => { - cy.get('[data-testid="share-button"]').first().should('be.visible'); - }); - - it('clicking share button copies a URL', () => { - cy.window().then((win) => { - cy.stub(win.navigator.clipboard, 'writeText').resolves(); - }); - cy.get('[data-testid="share-button"]').first().click(); - // After clicking, button should briefly show "Copied" state - cy.get('[data-testid="share-button"]').first().should('contain', 'Copied'); - }); - - it('share button reverts to Share after copy', () => { - // Previous test already clicked share; just wait for revert - cy.get('[data-testid="share-button"]').first().should('contain', 'Share'); - }); - - it('shows share button on reliability tab', () => { - cy.visit('/reliability'); - cy.get('[data-testid="share-button"]').should('be.visible'); - }); - - it('shows share button on evaluation tab', () => { - cy.visit('/evaluation'); - cy.get('[data-testid="share-button"]').should('be.visible'); - }); -}); diff --git a/packages/app/cypress/e2e/inference-controls.cy.ts b/packages/app/cypress/e2e/inference-controls.cy.ts deleted file mode 100644 index fbc24ec..0000000 --- a/packages/app/cypress/e2e/inference-controls.cy.ts +++ /dev/null @@ -1,72 +0,0 @@ -describe('Inference Chart Controls', () => { - before(() => { - cy.window().then((win) => { - win.localStorage.setItem('inferencex-star-modal-dismissed', String(Date.now())); - }); - cy.visit('/'); - cy.get('[data-testid="model-selector"]').should('be.visible'); - }); - - it('model selector has selectable options', () => { - cy.get('[data-testid="model-selector"]').click(); - cy.get('[role="option"]').should('have.length.greaterThan', 0); - cy.get('body').type('{esc}'); - }); - - it('sequence selector is visible', () => { - cy.get('[data-testid="sequence-selector"]').should('be.visible'); - }); - - it('sequence selector has options', () => { - cy.get('[data-testid="sequence-selector"]').click(); - cy.get('[role="option"]').should('have.length.greaterThan', 0); - cy.get('body').type('{esc}'); - }); - - it('Y-axis metric selector is visible', () => { - cy.get('[data-testid="yaxis-metric-selector"]').should('be.visible'); - }); - - it('Y-axis metric selector has grouped options', () => { - cy.get('[data-testid="yaxis-metric-selector"]').click(); - cy.get('[role="option"]').should('have.length.greaterThan', 1); - cy.get('body').type('{esc}'); - }); - - it('precision multi-select is visible', () => { - cy.get('[data-testid="precision-multiselect"]').should('be.visible'); - }); - - it('GPU comparison multi-select is visible', () => { - cy.get('[data-testid="gpu-multiselect"]').should('be.visible'); - }); - - // These tests mutate state — they change selector values. - // Order matters: run them last. - - it('changing model selector updates the displayed value', () => { - cy.get('[data-testid="model-selector"]') - .invoke('text') - .then((initialText) => { - cy.get('[data-testid="model-selector"]').click(); - // Pick the last option to ensure it differs from the default (first) - cy.get('[role="option"]').last().click(); - cy.get('[data-testid="model-selector"]') - .invoke('text') - .should('not.eq', initialText.trim()); - }); - }); - - it('selecting a different Y-axis metric updates the displayed value', () => { - cy.get('[data-testid="yaxis-metric-selector"]').click(); - cy.get('[role="option"]') - .eq(2) - .then(($option) => { - const optionText = $option.text().trim(); - cy.wrap($option).click(); - cy.get('[data-testid="yaxis-metric-selector"]') - .invoke('text') - .should('include', optionText); - }); - }); -}); diff --git a/packages/app/cypress/e2e/sidebar-legend.cy.ts b/packages/app/cypress/e2e/sidebar-legend.cy.ts deleted file mode 100644 index 67b588e..0000000 --- a/packages/app/cypress/e2e/sidebar-legend.cy.ts +++ /dev/null @@ -1,63 +0,0 @@ -// Core legend behavior (search, clear, expand/collapse, item toggle, reset) is covered by -// cypress/component/chart-legend.cy.tsx. These e2e tests verify integration with real data -// and page-level concerns only. -describe('Sidebar Legend (integration)', () => { - before(() => { - cy.visit('/', { - onBeforeLoad(win) { - win.localStorage.setItem('inferencex-star-modal-dismissed', String(Date.now())); - }, - }); - cy.get('.sidebar-legend').first().should('be.visible'); - }); - - it('legend populates with real GPU data from the API', () => { - cy.get('.sidebar-legend') - .first() - .within(() => { - cy.get('label').should('have.length.greaterThan', 0); - cy.get('input[type="checkbox"]').first().should('exist'); - }); - }); - - it('legend defaults to expanded state', () => { - cy.get('.sidebar-legend').first().should('have.class', 'bg-accent'); - }); - - it('label hover area does not extend beyond text width', () => { - cy.get('.sidebar-legend') - .first() - .within(() => { - cy.get('label') - .first() - .then(($label) => { - const labelWidth = $label[0].getBoundingClientRect().width; - const parentWidth = $label[0].closest('li')!.getBoundingClientRect().width; - expect(labelWidth).to.be.lessThan(parentWidth); - }); - }); - }); - - it('active items are sorted before inactive in sidebar', () => { - cy.get('.sidebar-legend') - .first() - .within(() => { - cy.get('label').should('have.length.greaterThan', 1); - cy.get('label').first().click(); - - cy.get('label').first().should('be.visible'); - cy.get('label').first().find('span').eq(1).invoke('text').should('be.a', 'string'); - }); - }); - - it('legend respects URL param for collapsed state', () => { - // Must re-visit with param — this changes the URL - cy.visit('/?i_legend=0', { - onBeforeLoad(win) { - win.localStorage.setItem('inferencex-star-modal-dismissed', String(Date.now())); - }, - }); - cy.get('.sidebar-legend').first().should('be.visible'); - cy.get('.sidebar-legend').first().should('not.have.class', 'bg-accent'); - }); -}); From f71bc31addd9a6fe4928dd671151ce420926cf94 Mon Sep 17 00:00:00 2001 From: adibarra <93070681+adibarra@users.noreply.github.com> Date: Sun, 22 Mar 2026 00:50:21 -0500 Subject: [PATCH 08/11] add data-testid to legend switches, sidebar-legend, calculator selectors --- .../calculator/ThroughputCalculatorDisplay.tsx | 15 +++++++++++++-- packages/app/src/components/ui/chart-legend.tsx | 9 +++++++-- 2 files changed, 20 insertions(+), 4 deletions(-) diff --git a/packages/app/src/components/calculator/ThroughputCalculatorDisplay.tsx b/packages/app/src/components/calculator/ThroughputCalculatorDisplay.tsx index 8aafe0a..dcde7d9 100644 --- a/packages/app/src/components/calculator/ThroughputCalculatorDisplay.tsx +++ b/packages/app/src/components/calculator/ThroughputCalculatorDisplay.tsx @@ -513,18 +513,21 @@ export default function ThroughputCalculatorDisplay() {
- + diff --git a/packages/app/src/components/ui/chart-legend.tsx b/packages/app/src/components/ui/chart-legend.tsx index c259ac5..0b40ec2 100644 --- a/packages/app/src/components/ui/chart-legend.tsx +++ b/packages/app/src/components/ui/chart-legend.tsx @@ -234,7 +234,12 @@ export default function ChartLegend({ > {switches.map((sw) => (
- +