skills.rest
zakariaf
zakariafCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

widget-golden-and-a11y-testing

Enforces disciplined Flutter widget, golden, and accessibility testing through pinned device harnesses and computed geometry assertions.

Updated Aug 22, 2026
Search Tags:#accessibility#flutter#widget testing#overflow#golden tests#wcag contrast#text scaling
One-click install
npx skills add https://github.com/zakariaf/NearlyStop --skill widget-golden-and-a11y-testing-zakariaf
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: widget-golden-and-a11y-testing
Source: https://github.com/zakariaf/NearlyStop/tree/main/.claude/skills/widget-golden-and-a11y-testing
Command: npx skills add https://github.com/zakariaf/NearlyStop --skill widget-golden-and-a11y-testing-zakariaf

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires alchemist, and includes scripts (resource) and references (resource) components.

What problem does it solve? Flutter widget tests silently pass while shipping broken layouts: the default 800x600 test surface is wider than any phone, overflow is reported only once per RenderObject, clipped text never reports an error, and the built-in contrast guideline false-passes white-on-near-white text. This Skill replaces those traps with a pinned-device harness, an overflow matrix, computed-geometry fit assertions, and pure-Dart WCAG/APCA contrast checks. ## Core Features & Use Cases - Pinned test harness: A single pumpApp harness that sets tester.view.physicalSize x devicePixelRatio and layers MediaQuery (textScaler, boldText, accessibleNavigation) above MaterialApp via copyWith. - Overflow and fit matrix: One testWidgets per (device, text scale, bold) tuple with getSize/getRect fit assertions that catch silently clipped text, plus a ban on takeException suppression, FittedBox, and text-scale clamping. - Honest accessibility gate: isSemantics node assertions, explicit getSize tap-target loops, traversal-order checks, and pure-Dart WCAG/APCA contrast tests on theme colour values instead of the known-broken textContrastGuideline. - Two golden lanes: Ahem geometry goldens plus one pinned-OS real-font lane with loadAppFonts, RTL goldens under Directionality, and CI blocking of accidental --update-goldens. - Use Case: A Flutter developer chasing an "overflowed by 47 pixels" failure at 200% text scale uses the matrix and fit assertion to find the silently clipped label, fixes the layout instead of clamping the text, and verifies the fix with scripts/check-test-hygiene.sh before the PR. ## Quick Start Ask the AI to write a Flutter widget test using the pumpApp harness that pins a 360dp device and asserts no overflow at 2.0x text scale with bold text enabled.

Frequently Asked Questions about widget-golden-and-a11y-testing

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I test Flutter widgets at different text scales without missing overflow?▼

Generate one testWidgets per (device, scale, bold) tuple rather than looping inside a single test, because RenderFlex overflow is reported only once per RenderObject. Pin the device with tester.view.physicalSize times devicePixelRatio, then assert takeException() is null plus a getSize fit check.

Why does my Flutter widget test pass but the phone layout is broken?▼

The default widget test surface is 800x600 logical pixels, wider than any phone, so content fits and the suite goes green. Pin a real device size on tester.view before pumping, and layer MediaQuery above MaterialApp using copyWith so the pinned size is not zeroed.

Should I use golden tests or computed geometry for Flutter layout testing?▼

Prefer computed geometry (getRect alignment invariants, getSize fit assertions) because it fails with an actionable message, while a golden only blesses pixels including clipped text. Reserve goldens for glyph shaping, RTL mirroring, and numeral rendering that geometry cannot see.

Can Flutter's meetsGuideline replace manual accessibility testing?▼

No. Flutter ships only four machine-checkable guidelines, the tap-target check skips nodes flush with the view edge, and textContrastGuideline has a known false-negative on low-variance backgrounds. Use them as advisory tripwires via await expectLater, and assert contrast in pure Dart on colour values.

Why is pumpAndSettle hanging in my Flutter widget test?▼

pumpAndSettle waits for all animations to finish and hangs forever on infinite splash, shimmer, or spinner indicators, with a 10-minute default timeout. Use pump() for state changes and pump(duration) or fakeAsync for timer-driven async instead.

How do I test bold text and real font widths in Flutter widget tests?▼

Call loadAppFonts() in setUpAll before the matrix. Under the default Ahem test font every glyph is a fixed em-square, so boldText and character-width differences are inert; real proportional fonts make the bold axis overflow content that passes unbolded.

Related Skills

Explore More Software Engineering Skills→
zakariafzakariaf

testing-strategy

Enforces Flutter test doctrine with fuzz tests, in-memory Drift, and headless Notifier harnesses.

Community
Advanced
zakariafzakariaf

widget-golden-and-a11y-testing

Enforces disciplined Flutter widget, golden, and accessibility testing through pinned device harnesses and computed geometry assertions.

Community
Advanced
zakariafzakariaf

calm-tokens

Implements the Calm design token set as Dart ThemeExtensions with hand-authored ColorSchemes and contrast gates.

Community
Advanced
telum-aitelum-ai
2

visual-testing-mobile-flutter

Automate Flutter visual regression testing with Golden Tests, Alchemist, and Fastlane.

Official
Intermediate