panel-testing-strategy

# Panel testing strategy This skill builds on **`frontend-testing-strategy`** — read that first for the general principles every Grafana frontend test is held to (the inverted testing diamond, asserting real behavior instead of existence, avoiding AI slop, verifying a test reaches its target branch, generic anti-flake rules, and the SDLC-phase gating). This skill covers what's specific to visualization code on top of that: data-frame/panel-prop builders, the canvas draw-call snapshot harness, panel accessibility and interaction-snapshot E2E, and canvas/uPlot-specific anti-flake rules. The visualization codeowner paths are opted into the gating `check-frontend-test-coverage.yml` check, so coverage that drops fails CI. ## Step 1 — Set up data with the repo's builders Build data frames with the `@grafana/data` builders — **pick one and don't mix** `toDataFrame` and `createDataFrame` in the same file: ```ts import { createDataFrame, toDataFrame, arrayToDataFrame, FieldType, LoadingState } from '@grafana/data'; ``` Use a **single canonical builder per file** with a `Partial<>` overrides object, rather than bespoke frames per test: ```ts function makeFrame(overrides: Partial<Options> = {}) { /* … */ } ``` To render a panel component, use the shared panel-props builder instead of hand-rolling props: ```ts import { getPanelProps } from '../test-utils'; // public/app/plugins/panel/test-utils.ts render(<BarChartPanel {...getPanelProps(defaultOptions, { fieldConfig })} />); ``...