@cdc/core 4.26.1 → 4.26.2

package/.claude/agents/qa-test-developer.md

@@ -0,0 +1,126 @@
+---
+name: qa-test-developer
+description: "Use this agent when you need to add, update, or improve test coverage for components and features. This includes writing unit tests with Vitest, creating Playwright integration tests within Storybook, and coordinating visual regression testing with Backstop. Trigger this agent after implementing new components, fixing bugs, or when test coverage needs improvement.\\n\\nExamples:\\n\\n<example>\\nContext: User has just implemented a new chart component.\\nuser: \"I just created a new PieChart component in the chart package\"\\nassistant: \"I can see the new PieChart component. Let me use the qa-test-developer agent to add comprehensive test coverage for it.\"\\n<Task tool invocation to launch qa-test-developer agent>\\n</example>\\n\\n<example>\\nContext: User wants to ensure a bug fix is properly tested.\\nuser: \"I fixed a bug in the data-table sorting logic\"\\nassistant: \"Great fix! I'll use the qa-test-developer agent to add tests that verify this bug won't regress and ensure the sorting behavior is well-covered.\"\\n<Task tool invocation to launch qa-test-developer agent>\\n</example>\\n\\n<example>\\nContext: User is asking for test coverage on existing code.\\nuser: \"Can you add tests for the Dashboard layout components?\"\\nassistant: \"I'll launch the qa-test-developer agent to analyze the Dashboard components and create comprehensive unit and integration tests.\"\\n<Task tool invocation to launch qa-test-developer agent>\\n</example>\\n\\n<example>\\nContext: Proactive usage after significant code changes detected.\\nassistant: \"I notice significant changes were made to the map visualization rendering logic. Let me use the qa-test-developer agent to ensure proper test coverage for these changes.\"\\n<Task tool invocation to launch qa-test-developer agent>\\n</example>"
+model: sonnet
+memory: project
+---
+
+You are an expert QA Developer specializing in React component testing within monorepo environments. You have deep expertise in Vitest for unit testing, Playwright for integration testing within Storybook, and visual regression testing with Backstop.js. Your goal is to create comprehensive, maintainable test suites that catch bugs early and document component behavior.
+
+## Your Core Responsibilities
+
+1. **Write Unit Tests with Vitest**
+   - Create tests in `*.test.{js,jsx,ts,tsx}` files alongside the components
+   - Use the jsdom environment configured in the project
+   - Import from `testing-setup.js` when DOM matchers are needed
+   - Test component rendering, props handling, state changes, and edge cases
+   - Mock external dependencies appropriately
+   - Follow the AAA pattern: Arrange, Act, Assert
+   - Aim for meaningful coverage, not just line coverage
+
+2. **Create Playwright Integration Tests in Storybook**
+   - Write interaction tests using Storybook's play functions
+   - Test user workflows and component interactions
+   - Verify accessibility requirements
+   - Test responsive behavior when relevant
+   - Use `@storybook/test` utilities for assertions
+   - Structure tests to run with `yarn test-storybook`
+
+3. **Coordinate Backstop Visual Regression Testing**
+   - **Always ask the user** if Backstop tests should be updated or created
+   - When approved, create or update Backstop scenarios
+   - Define appropriate viewports for responsive testing
+   - Set meaningful selectors and hide dynamic elements
+   - Document any visual baseline changes needed
+
+## Testing Patterns for This Codebase
+
+### Vitest Unit Test Structure
+```typescript
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { ComponentName } from './ComponentName';
+
+describe('ComponentName', () => {
+  it('should render with default props', () => {
+    render(<ComponentName />);
+    expect(screen.getByRole('...')).toBeInTheDocument();
+  });
+
+  it('should handle user interaction', async () => {
+    const user = userEvent.setup();
+    const onAction = vi.fn();
+    render(<ComponentName onAction={onAction} />);
+    
+    await user.click(screen.getByRole('button'));
+    expect(onAction).toHaveBeenCalledTimes(1);
+  });
+});
+```
+
+### Storybook Play Function Structure
+```typescript
+import type { Meta, StoryObj } from '@storybook/react';
+import { within, userEvent, expect } from '@storybook/test';
+
+export const WithInteraction: StoryObj = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    
+    await userEvent.click(canvas.getByRole('button'));
+    await expect(canvas.getByText('Expected Result')).toBeInTheDocument();
+  },
+};
+```
+
+## Workflow
+
+1. **Analyze the Component/Feature**: Understand what needs testing by reading the implementation
+2. **Identify Test Scenarios**: List unit tests, integration tests, and potential visual tests
+3. **Write Unit Tests First**: Create comprehensive Vitest tests
+4. **Add Storybook Integration Tests**: Write play functions for user interaction flows
+5. **Ask About Backstop**: Explicitly ask the user if visual regression tests should be added/updated
+6. **Verify Tests Pass**: Run the tests to ensure they work correctly
+
+## Quality Standards
+
+- Tests should be deterministic and not flaky
+- Use meaningful test descriptions that document behavior
+- Avoid testing implementation details; test behavior
+- Mock at the boundaries (API calls, external services)
+- Keep tests focused and independent
+- Clean up after tests (no shared state pollution)
+
+## Before Completing
+
+- Ensure all new tests pass: `vitest run` or `yarn test-storybook`
+- Verify no existing tests were broken
+- Confirm test file locations follow project conventions
+- Ask about Backstop if visual changes are involved
+
+**Update your agent memory** as you discover testing patterns, common test utilities used in this codebase, component testing quirks, and established testing conventions. This builds institutional knowledge for consistent test quality across the monorepo.
+
+Examples of what to record:
+- Common mocking patterns for specific dependencies
+- Reusable test utilities in @cdc/core
+- Components that require special testing setup
+- Known flaky test patterns to avoid
+
+# Persistent Agent Memory
+
+You have a persistent Persistent Agent Memory directory at `/Users/adamdoe/Code/cdc-open-viz/packages/core/.claude/agent-memory/qa-test-developer/`. Its contents persist across conversations.
+
+As you work, consult your memory files to build on previous experience. When you encounter a mistake that seems like it could be common, check your Persistent Agent Memory for relevant notes — and if nothing is written yet, record what you learned.
+
+Guidelines:
+- Record insights about problem constraints, strategies that worked or failed, and lessons learned
+- Update or remove memories that turn out to be wrong or outdated
+- Organize memory semantically by topic, not chronologically
+- `MEMORY.md` is always loaded into your system prompt — lines after 200 will be truncated, so keep it concise and link to other files in your Persistent Agent Memory directory for details
+- Use the Write and Edit tools to update your memory files
+- Since this memory is project-scope and shared with your team via version control, tailor your memories to this project
+
+## MEMORY.md
+
+Your MEMORY.md is currently empty. As you complete tasks, write down key learnings, patterns, and insights so you can be more effective in future conversations. Anything saved in MEMORY.md will be included in your system prompt next time.

package/CLAUDE.local.md

@@ -0,0 +1,67 @@
+# @cdc/core — Package Rules
+
+## Build
+- Core has **no JavaScript build step**. The build script only compiles SCSS: `sass styles/cove-main.scss dist/cove-main.css`.
+- All components, helpers, hooks, and types are imported **directly from source** by other packages. Never reference `dist/` for JS/TS imports.
+
+## Where to Put New Code
+
+| What you're adding | Where it goes |
+|---|---|
+| Shared React component | `components/<ComponentName>/` (directory with index file) |
+| Shared helper function | `helpers/<functionName>.ts` (flat file at top level) |
+| Shared custom hook | `hooks/use<Name>.ts` |
+| Shared TypeScript type | `types/<TypeName>.ts` |
+| SCSS styles | `styles/` (`base/`, `components/`, `layout/`, `themes/`, `utils/`) |
+| Color palette data | `data/colorPalettes.ts`, `data/mapColorPalettes.ts`, or `data/sharedPalettes.ts` |
+
+## Helpers Organization
+- **Flat structure**: ~49 top-level files in `helpers/`.
+- **Feature subdirectories** for complex domains:
+  - `cove/` — formatting utilities (accessibility, date, number, string)
+  - `embed/` — embed code generation, URL validation
+  - `metrics/` — analytics helpers
+  - `palettes/` — color palette migration and standardization
+  - `ver/` — version migration files (18+ migration scripts)
+  - `tests/` — shared test utilities (e.g., `testStandaloneBuild.ts`)
+- Key constants in `helpers/constants.ts` — includes `USE_V2_MIGRATION`, `EDITOR_WIDTH`, `DATA_OPERATORS`, `DATA_FUNCTIONS`, color fallbacks.
+
+## Commonly Imported Exports
+Other packages depend heavily on these — be careful when modifying:
+- **Types**: `VizFilter`, `Column`, `Table`, `General`, `Version`, `Visualization`, `FilterBehavior`, `DataSet` (imported as `Datasets`), `Action`
+- **Helpers**: `fetchRemoteData`, `filterVizData`, `DataTransform`, `getViewport`, `updateFieldFactory`, `coveUpdateWorker`, `cloneConfig`
+- **Components**: `Loading`, `EditorPanel`, `Filters`, `DataTable`, `Layout`, `ErrorBoundary`, ui elements (`Modal`, `Accordion`, `Tooltip`)
+- **Contexts**: `EditorContext` (+ `EditorDispatchContext`) — shared editor state used by `@cdc/editor`
+
+## Types Conventions
+- 32 shared type files in `types/`.
+- Other packages **extend** core types rather than duplicating (e.g., chart's `General` extends core's `General`).
+- Use `import type` for type-only imports from core.
+- Core's `Action<Type, Payload>` type is the base for all package action types.
+
+## Components (34 directories)
+Largest/most complex:
+- `DataTable/` (29 files) — shared data table with sorting, pagination, search
+- `EditorPanel/` (16 files) — shared editor panel sections
+- `Filters/` (13 files) — shared filter UI components
+- `ui/` (15 files) — low-level UI primitives (Modal, Accordion, Tooltip, Icon)
+- `elements/` — Button, Card, Confirm, Error, ScreenReaderText, SkipTo
+- `inputs/` — InputCheckbox, InputGroup, InputSelect, InputText, InputToggle
+
+## Styles Architecture
+- Entry point: `styles/cove-main.scss` (this is what the build compiles)
+- Style system in `styles/` with: `base/`, `components/`, `layout/`, `themes/`, `utils/`
+- Breakpoint mixin: `@import '@cdc/core/styles/utils/breakpoints'` — used by all packages
+- Theme colors defined in `styles/themes/_color-definitions.scss`
+- Use CSS custom properties (`var(--cool-gray-10)`) — never hardcode colors.
+
+## Shared Configuration Files
+- `generateViteConfig.js` — all packages import this for build/dev/test config. Do not modify without understanding downstream impact on every package.
+- `testing-setup.js` — provides Testing Library matchers, matchMedia mock, URL.createObjectURL mock, auto-cleanup. All packages use this via Vitest setup.
+- `devTemplate/` — HTML/CSS/JS for package dev servers (example-switching sidebar).
+
+## Pitfalls
+- Modifying any shared type (`types/*.ts`) can break multiple packages — check downstream imports first.
+- `generateViteConfig.js` externals only include `react` and `react-dom`. If a new peer dependency is added, it must be added here too.
+- The `data/` directory contains color palette definitions that affect every visualization — changes here are high-impact.
+- `helpers/ver/` contains ordered version migration scripts. New migrations must maintain the correct sequence.

package/_stories/Gallery.Charts.stories.tsx

@@ -50,42 +50,42 @@ const testChartRendering = async (canvasElement: HTMLElement, storyName: string)
 
 // Bar Charts
 export const Bar_Chart_Time_Based: Story = {
-  render: () => <Chart configUrl="https://www.cdc.gov/cove/examples/Example_Bar_Chart.json" />,
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/Example_Bar_Chart.json' />,
   play: async ({ canvasElement }) => {
     await testChartRendering(canvasElement, 'Bar Chart Time Based')
   }
 }
 
 export const Bar_Chart_Categorical: Story = {
-  render: () => <Chart configUrl="https://www.cdc.gov/cove/examples/example-category-bar-char.json" />,
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/example-category-bar-char.json' />,
   play: async ({ canvasElement }) => {
     await testChartRendering(canvasElement, 'Bar Chart Categorical')
   }
 }
 
 export const Bar_Chart_With_Highlighted_Value: Story = {
-  render: () => <Chart configUrl="https://www.cdc.gov/cove/examples/bar-chart-with-highlighte.json" />,
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/bar-chart-with-highlighte.json' />,
   play: async ({ canvasElement }) => {
     await testChartRendering(canvasElement, 'Bar Chart With Highlighted Value')
   }
 }
 
 export const Bar_Chart_With_Confidence_Intervals: Story = {
-  render: () => <Chart configUrl="https://www.cdc.gov/cove/examples/Example_Bar_CI_1.json" />,
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/Example_Bar_CI_1.json' />,
   play: async ({ canvasElement }) => {
     await testChartRendering(canvasElement, 'Bar Chart With Confidence Intervals')
   }
 }
 
 export const Bar_Chart_With_Suppressed_Values: Story = {
-  render: () => <Chart configUrl="https://www.cdc.gov/cove/examples/bar-chart-with-suppressed-values.json" />,
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/bar-chart-with-suppressed-values.json' />,
   play: async ({ canvasElement }) => {
     await testChartRendering(canvasElement, 'Bar Chart With Suppressed Values')
   }
 }
 
 export const Horizontal_Bar_Chart: Story = {
-  render: () => <Chart configUrl="https://www.cdc.gov/cove/examples/Horizontal_Bar_Chart_Viz.json" />,
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/Horizontal_Bar_Chart_Viz.json' />,
   play: async ({ canvasElement }) => {
     await testChartRendering(canvasElement, 'Horizontal Bar Chart')
   }
@@ -93,14 +93,14 @@ export const Horizontal_Bar_Chart: Story = {
 
 // Box and Whiskers Plots
 export const Box_Plot_With_Outliers: Story = {
-  render: () => <Chart configUrl="https://www.cdc.gov/cove/examples/box-plot-outliers.json" />,
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/box-plot-outliers.json' />,
   play: async ({ canvasElement }) => {
     await testChartRendering(canvasElement, 'Box Plot With Outliers')
   }
 }
 
 export const Horizontal_Box_Plot: Story = {
-  render: () => <Chart configUrl="https://www.cdc.gov/cove/examples/horizontal-box-plot.json" />,
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/horizontal-box-plot.json' />,
   play: async ({ canvasElement }) => {
     await testChartRendering(canvasElement, 'Horizontal Box Plot')
   }
@@ -108,7 +108,7 @@ export const Horizontal_Box_Plot: Story = {
 
 // Bump Chart
 export const Bump_Chart: Story = {
-  render: () => <Chart configUrl="https://www.cdc.gov/cove/examples/bump-chart.json" />,
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/bump-chart.json' />,
   play: async ({ canvasElement }) => {
     await testChartRendering(canvasElement, 'Bump Chart')
   }
@@ -116,14 +116,14 @@ export const Bump_Chart: Story = {
 
 // Combo Bar/Line Charts
 export const Combo_Bar_And_Area: Story = {
-  render: () => <Chart configUrl="https://www.cdc.gov/cove/examples/Combo_Bar_Line_Viz.json" />,
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/Combo_Bar_Line_Viz.json' />,
   play: async ({ canvasElement }) => {
     await testChartRendering(canvasElement, 'Combo Bar And Area')
   }
 }
 
 export const Epi_Style_Bar_Chart: Story = {
-  render: () => <Chart configUrl="https://www.cdc.gov/cove/examples/example-epi-style-bar-chart.json" />,
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/example-epi-style-bar-chart.json' />,
   play: async ({ canvasElement }) => {
     await testChartRendering(canvasElement, 'Epi Style Bar Chart')
   }
@@ -131,7 +131,7 @@ export const Epi_Style_Bar_Chart: Story = {
 
 // Deviation Bar Chart
 export const Deviation_Bar_Chart: Story = {
-  render: () => <Chart configUrl="https://www.cdc.gov/cove/examples/example-deviation-bar-chart.json" />,
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/example-deviation-bar-chart.json' />,
   play: async ({ canvasElement }) => {
     await testChartRendering(canvasElement, 'Deviation Bar Chart')
   }
@@ -139,14 +139,14 @@ export const Deviation_Bar_Chart: Story = {
 
 // Forecast Charts
 export const Forecast_Chart_Single_CI: Story = {
-  render: () => <Chart configUrl="https://www.cdc.gov/cove/examples/forecast-chart-one-CI.json" />,
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/forecast-chart-one-CI.json' />,
   play: async ({ canvasElement }) => {
     await testChartRendering(canvasElement, 'Forecast Chart Single CI')
   }
 }
 
 export const Forecast_Chart_Multiple_CIs: Story = {
-  render: () => <Chart configUrl="https://www.cdc.gov/cove/examples/forecast-chart-2-CIs.json" />,
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/forecast-chart-2-CIs.json' />,
   play: async ({ canvasElement }) => {
     await testChartRendering(canvasElement, 'Forecast Chart Multiple CIs')
   }
@@ -154,42 +154,42 @@ export const Forecast_Chart_Multiple_CIs: Story = {
 
 // Line Charts
 export const Line_Chart_Standard: Story = {
-  render: () => <Chart configUrl="https://www.cdc.gov/cove/examples/Line_Chart_Viz.json" />,
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/Line_Chart_Viz.json' />,
   play: async ({ canvasElement }) => {
     await testChartRendering(canvasElement, 'Line Chart Standard')
   }
 }
 
 export const Line_Chart_With_Regions: Story = {
-  render: () => <Chart configUrl="https://www.cdc.gov/cove/examples/Line_Chart_Regions_Viz.json" />,
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/Line_Chart_Regions_Viz.json' />,
   play: async ({ canvasElement }) => {
     await testChartRendering(canvasElement, 'Line Chart With Regions')
   }
 }
 
 export const Line_Chart_Isolated: Story = {
-  render: () => <Chart configUrl="https://www.cdc.gov/cove/examples/Line_Chart_Isolated.json" />,
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/Line_Chart_Isolated.json' />,
   play: async ({ canvasElement }) => {
     await testChartRendering(canvasElement, 'Line Chart Isolated')
   }
 }
 
 export const Line_Chart_Line_Weights: Story = {
-  render: () => <Chart configUrl="https://www.cdc.gov/cove/examples/Line_Chart_Line_Weights.json" />,
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/Line_Chart_Line_Weights.json' />,
   play: async ({ canvasElement }) => {
     await testChartRendering(canvasElement, 'Line Chart Line Weights')
   }
 }
 
 export const Line_Chart_With_Open_Circles: Story = {
-  render: () => <Chart configUrl="https://www.cdc.gov/cove/examples/line-chart-with-open-circles.json" />,
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/line-chart-with-open-circles.json' />,
   play: async ({ canvasElement }) => {
     await testChartRendering(canvasElement, 'Line Chart With Open Circles')
   }
 }
 
 export const Line_Chart_With_Suppression: Story = {
-  render: () => <Chart configUrl="https://www.cdc.gov/cove/examples/line-chart-with-suppression.json" />,
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/line-chart-with-suppression.json' />,
   play: async ({ canvasElement }) => {
     await testChartRendering(canvasElement, 'Line Chart With Suppression')
   }
@@ -197,7 +197,7 @@ export const Line_Chart_With_Suppression: Story = {
 
 // Lollipop Bar Chart
 export const Lollipop_Horizontal_Bar_Chart: Story = {
-  render: () => <Chart configUrl="https://www.cdc.gov/cove/examples/lollipop-style-horizontal-bar-chart.json" />,
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/lollipop-style-horizontal-bar-chart.json' />,
   play: async ({ canvasElement }) => {
     await testChartRendering(canvasElement, 'Lollipop Horizontal Bar Chart')
   }
@@ -205,14 +205,14 @@ export const Lollipop_Horizontal_Bar_Chart: Story = {
 
 // Pie and Donut Charts
 export const Pie_Chart: Story = {
-  render: () => <Chart configUrl="https://www.cdc.gov/cove/examples/Example_Pie_viz.json" />,
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/Example_Pie_viz.json' />,
   play: async ({ canvasElement }) => {
     await testChartRendering(canvasElement, 'Pie Chart')
   }
 }
 
 export const Donut_Chart: Story = {
-  render: () => <Chart configUrl="https://www.cdc.gov/cove/examples/Donut-Chart.json" />,
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/Donut-Chart.json' />,
   play: async ({ canvasElement }) => {
     await testChartRendering(canvasElement, 'Donut Chart')
   }
@@ -220,50 +220,43 @@ export const Donut_Chart: Story = {
 
 // Scatter Plots
 export const Scatter_Plot_Negative_Trend: Story = {
-  render: () => <Chart configUrl="https://www.cdc.gov/cove/examples/scatter-plot-negative-trend.json" />,
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/scatter-plot-negative-trend.json' />,
   play: async ({ canvasElement }) => {
     await testChartRendering(canvasElement, 'Scatter Plot Negative Trend')
   }
 }
 
 export const Scatter_Plot_Multi_Series: Story = {
-  render: () => <Chart configUrl="https://www.cdc.gov/cove/examples/scatter-plot-multi-series.json" />,
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/scatter-plot-multi-series.json' />,
   play: async ({ canvasElement }) => {
     await testChartRendering(canvasElement, 'Scatter Plot Multi Series')
   }
 }
 
 export const Scatter_Plot_Nonlinear_Trend: Story = {
-  render: () => <Chart configUrl="https://www.cdc.gov/cove/examples/scatter-plot-nonlinear-trend.json" />,
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/scatter-plot-nonlinear-trend.json' />,
   play: async ({ canvasElement }) => {
     await testChartRendering(canvasElement, 'Scatter Plot Nonlinear Trend')
   }
 }
 
 // Sparklines
-export const Sparkline_Dashboard: Story = {
-  render: () => <Chart configUrl="https://www.cdc.gov/cove/examples/sparkline-dash.json" />,
-  play: async ({ canvasElement }) => {
-    await testChartRendering(canvasElement, 'Sparkline Dashboard')
-  }
-}
-
 export const Sparkline_2016_Outreach_Var2: Story = {
-  render: () => <Chart configUrl="https://www.cdc.gov/cove/examples/2016-outreach-2.json" />,
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/2016-outreach-2.json' />,
   play: async ({ canvasElement }) => {
     await testChartRendering(canvasElement, 'Sparkline 2016 Outreach Var2')
   }
 }
 
 export const Sparkline_2016_Outreach_Var3: Story = {
-  render: () => <Chart configUrl="https://www.cdc.gov/cove/examples/2016-outreach-3.json" />,
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/2016-outreach-3.json' />,
   play: async ({ canvasElement }) => {
     await testChartRendering(canvasElement, 'Sparkline 2016 Outreach Var3')
   }
 }
 
 export const Sparkline_2016_Outreach_Var4: Story = {
-  render: () => <Chart configUrl="https://www.cdc.gov/cove/examples/2016-outreach-4.json" />,
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/2016-outreach-4.json' />,
   play: async ({ canvasElement }) => {
     await testChartRendering(canvasElement, 'Sparkline 2016 Outreach Var4')
   }
@@ -271,21 +264,21 @@ export const Sparkline_2016_Outreach_Var4: Story = {
 
 // Stacked Area Charts
 export const Stacked_Area_Chart: Story = {
-  render: () => <Chart configUrl="https://www.cdc.gov/cove/examples/example-stacked-area-chart.json" />,
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/example-stacked-area-chart.json' />,
   play: async ({ canvasElement }) => {
     await testChartRendering(canvasElement, 'Stacked Area Chart')
   }
 }
 
 export const Area_Chart_With_Annotations: Story = {
-  render: () => <Chart configUrl="https://www.cdc.gov/cove/examples/area-chart-with-annotations_1.json" />,
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/area-chart-with-annotations_1.json' />,
   play: async ({ canvasElement }) => {
     await testChartRendering(canvasElement, 'Area Chart With Annotations')
   }
 }
 
 export const Area_Chart_With_Categorical_Axis: Story = {
-  render: () => <Chart configUrl="https://www.cdc.gov/cove/examples/example-area-chart-with-cat-axis.json" />,
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/example-area-chart-with-cat-axis.json' />,
   play: async ({ canvasElement }) => {
     await testChartRendering(canvasElement, 'Area Chart With Categorical Axis')
   }
@@ -293,14 +286,14 @@ export const Area_Chart_With_Categorical_Axis: Story = {
 
 // Stacked Bar Charts
 export const Stacked_Horizontal_Bar_Chart: Story = {
-  render: () => <Chart configUrl="https://www.cdc.gov/cove/examples/example-stacked-horizontal-chart.json" />,
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/example-stacked-horizontal-chart.json' />,
   play: async ({ canvasElement }) => {
     await testChartRendering(canvasElement, 'Stacked Horizontal Bar Chart')
   }
 }
 
 export const Stacked_Vertical_Bar_Chart: Story = {
-  render: () => <Chart configUrl="https://www.cdc.gov/cove/examples/Stacked_Bar_Viz.json" />,
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/Stacked_Bar_Viz.json' />,
   play: async ({ canvasElement }) => {
     await testChartRendering(canvasElement, 'Stacked Vertical Bar Chart')
   }

package/_stories/Gallery.DataBite.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
-import { within, expect } from 'storybook/test'
+import { within, expect, waitFor } from 'storybook/test'
 import DataBite from '@cdc/data-bite'
 
 // Fallback step function for test descriptions
@@ -31,8 +31,7 @@ const testDataBiteRendering = async (canvasElement: HTMLElement, storyName: stri
   const canvas = within(canvasElement)
 
   await step('Wait for data bite to render', async () => {
-    const dataBiteElement = await canvas.findByRole('img', { hidden: true }, { timeout: 10000 })
-    expect(dataBiteElement).toBeInTheDocument()
+    await waitFor(() => expect(canvasElement.querySelector('.bite-content')).toBeInTheDocument(), { timeout: 10000 })
   })
 
   await step('Verify COVE module wrapper is present', async () => {
@@ -44,28 +43,36 @@ const testDataBiteRendering = async (canvasElement: HTMLElement, storyName: stri
 }
 
 export const Data_Bite_Circle_Average: Story = {
-  render: () => <DataBite configUrl="https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/Data_Bite_Circle_Average.json" />,
+  render: () => (
+    <DataBite configUrl='https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/Data_Bite_Circle_Average.json' />
+  ),
   play: async ({ canvasElement }) => {
     await testDataBiteRendering(canvasElement, 'Data Bite Circle Average')
   }
 }
 
 export const Data_Bite_Text_Max_Pic: Story = {
-  render: () => <DataBite configUrl="https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/Data_Bite_Text_Max_Pic.json" />,
+  render: () => (
+    <DataBite configUrl='https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/Data_Bite_Text_Max_Pic.json' />
+  ),
   play: async ({ canvasElement }) => {
     await testDataBiteRendering(canvasElement, 'Data Bite Text Max Pic')
   }
 }
 
 export const Data_Bite_Circle_Sum: Story = {
-  render: () => <DataBite configUrl="https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/Data_Bite_Circle_Sum.json" />,
+  render: () => (
+    <DataBite configUrl='https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/Data_Bite_Circle_Sum.json' />
+  ),
   play: async ({ canvasElement }) => {
     await testDataBiteRendering(canvasElement, 'Data Bite Circle Sum')
   }
 }
 
 export const Data_Bite_Text_Average_Pic: Story = {
-  render: () => <DataBite configUrl="https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/Data_Bite_Text_Average_Pic.json" />,
+  render: () => (
+    <DataBite configUrl='https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/Data_Bite_Text_Average_Pic.json' />
+  ),
   play: async ({ canvasElement }) => {
     await testDataBiteRendering(canvasElement, 'Data Bite Text Average Pic')
   }