Integration test and accessibility audit for dashboard

epic-membership-recruitment-coordinator-badge-task-011 — Write widget and integration tests for the coordinator recruitment dashboard: verify stats list renders with mocked BLoC states, funnel widget shows correct percentages, date-range filter dispatches correct events, and mentor drill-down navigation works. Run WCAG 2.2 AA accessibility checks on all new screens — contrast ratios, semantic labels, touch target sizes (minimum 48x48dp). Fix any issues found.

medium priority medium complexity testing pending testing specialist Tier 4

Acceptance Criteria

Widget test: dashboard renders without error when BLoC emits RecruitmentStatsLoaded state with mocked data

Widget test: dashboard shows a loading indicator when BLoC emits RecruitmentStatsLoading state

Widget test: dashboard shows an error message when BLoC emits RecruitmentStatsError state

Widget test: funnel widget displays correct percentage values from the mocked stats (within 0.1% tolerance)

Widget test: tapping a date-range filter option dispatches the expected FilterDateRangeChanged event to the BLoC

Integration test: tapping a mentor row navigates to the mentor drill-down screen and back navigation returns to the dashboard

WCAG 2.2 AA: all text elements on the dashboard have contrast ratio >= 4.5:1 (normal text) or >= 3:1 (large text)

WCAG 2.2 AA: all interactive elements (buttons, filter chips, mentor rows) have a minimum touch target of 48x48dp

WCAG 2.2 AA: all images, icons, and charts have meaningful Semantics labels readable by screen reader (TalkBack/VoiceOver)

WCAG 2.2 AA: funnel chart is accessible — data values exposed via Semantics, not only visually encoded

All accessibility issues found during audit are fixed before task is marked complete

All tests pass in CI (flutter test) without flakiness across 3 consecutive runs

Technical Requirements

frameworks

Flutter

flutter_test

BLoC

data models

assignment

badge_definition

performance requirements

Widget tests must complete in under 5 seconds total

Dashboard must render first meaningful content within 300ms of BLoC state emission in integration test

security requirements

Test fixtures must not include real mentor names or PII — use anonymised placeholder data

No real Supabase credentials in test environment

ui components

RecruitmentStatsList

RecruitmentFunnelWidget

DateRangeFilterChips

MentorDrillDownTile

Execution Context

Execution Tier

Tier 4

Tier 4 - 323 tasks

Can start after Tier 3 completes

View Full Execution Plan

Implementation Notes

Use MockBloc (bloc_test) to inject pre-built states into the dashboard widget under test — do not instantiate real BLoC with real repositories. For funnel percentage assertions, extract the displayed text using find.text() and parse the value, comparing against the expected percentage computed from mock data. For the navigation integration test, use a real Navigator wrapped around the dashboard widget with a GoRouter test configuration. For accessibility fixes: ensure all Semantics widgets have label and hint set; for charts (fl_chart), use ExcludeSemantics on visual elements and place a companion Semantics node with a descriptive label listing the data values.

Follow the existing design token system for contrast — do not hardcode colours.

Testing Requirements

Widget tests using flutter_test and bloc_test (MockBloc pattern). Integration tests using flutter_driver or integration_test package with a real device/emulator. For accessibility: use Flutter's SemanticsChecker and the accessibility_tools package to automate contrast and touch-target checks. Manually verify VoiceOver/TalkBack labels on a physical device for the funnel chart.

Document each WCAG criterion checked and its pass/fail result in a comment block at the top of the accessibility test file.

Component

Coordinator Recruitment Dashboard

ui medium

Dependencies (3)

Build a ConversionFunnelWidget that renders three funnel stages — shared → clicked → registered — with counts and drop-off percentages. Use fl_chart or a custom Flutter painter. The widget must accept a ReferralStats model and re-render reactively when date range changes. Ensure WCAG 2.2 AA contrast for funnel stage labels and values. epic-membership-recruitment-coordinator-badge-task-004 Integrate a DateRangeFilterBar widget into the coordinator recruitment dashboard allowing selection of preset ranges (last 7 days, last 30 days, last 90 days, custom). Dispatch filter events to the BLoC and reflect the active range in the UI. Reuse existing stats period filter patterns from 452-stats-period-filter-bar for design consistency. epic-membership-recruitment-coordinator-badge-task-005 Implement the MentorReferralDetailScreen that is navigated to when a coordinator taps a mentor row in the recruitment dashboard. Show individual referral link events (issued, clicked, registered) for the selected mentor within the active date range. Fetch data via ReferralAttributionService and display in a chronological list. Include back navigation and breadcrumb. epic-membership-recruitment-coordinator-badge-task-006

Epic Risks (3)

medium impact high prob dependency

BadgeCriteriaIntegration must reference specific badge definition IDs from the badge-definition-repository for recruitment badges. If those badge definitions have not been created in the database when this epic is implemented, the integration will silently fail to award badges.

Mitigation & Contingency

Mitigation: As the first task of this epic, create the four recruitment badge definitions (seed data migration) with known, stable IDs. BadgeCriteriaIntegration hardcodes these IDs as constants. Include an assertion in the integration tests that verifies the badge definition records exist in the test database.

Contingency: If the badge definitions system does not support seeding at migration time, store the badge definition IDs in a feature-flag-style config table and look them up at runtime, falling back to a no-op with a warning log if they are absent.

medium impact medium prob technical

The coordinator dashboard aggregates referral stats across all peer mentors in an organisation. For large organisations (HLF has many peer mentors nationally), the aggregation query may be slow, causing the dashboard to feel unresponsive.

Mitigation & Contingency

Mitigation: Implement the aggregation as a Supabase database view or RPC that runs server-side with appropriate indexes on (mentor_id, org_id, created_at, event_type). Add a composite index on referral_events during the foundation epic's migration. Cache the result in the Riverpod provider with a 5-minute TTL.

Contingency: If query performance remains unacceptable at scale, materialise the aggregation in a nightly pg_cron job into a stats_cache table, and serve the dashboard from the cache with a 'last updated' timestamp shown to the coordinator.

medium impact low prob integration

The existing badge award service is implemented by the achievement-badges feature. If that feature's public API (BadgeAwardService interface) changes while this epic is in progress, the BadgeCriteriaIntegration will break at compile time or behave incorrectly at runtime.

Mitigation & Contingency

Mitigation: Confirm the BadgeAwardService interface is stable and document the exact method signatures this integration depends on. Write a narrow integration test that constructs the real BadgeAwardService against a test database to detect breaking changes immediately.

Contingency: If the badge service interface changes, adapt the BadgeCriteriaIntegration adapter class to match the new contract. The adapter pattern used here isolates the change to a single class.

Quick Links

All Tasks Execution Plan