QA testing This page outlines the testing process for the Design System. The process ensures components function correctly and integrate within products. Testing objectives

QA testing ensures that:

  • Coded components match the design specifications
  • Components work in both React and Angular implementations
  • Components are responsive across screen sizes
  • Components meet accessibility requirements
  • Mobile behaviour is validated
  • Documentation on the Design System website is accurate
Test cases Component testing
  • Confirm the rendered component matches design and styling guidelines
  • Confirm configured properties display correctly
  • Confirm the expected event triggers when interacting with the component
Responsiveness testing
  • Test components on mobile, tablet, and desktop screen sizes
  • Use browser developer tools to simulate devices
Accessibility testing
  • Run Lighthouse audits to review accessibility scores
  • Confirm appropriate ARIA (Accessible Rich Internet Applications) roles and labels
  • Test keyboard navigation
  • Test with NVDA screen reader
Cross-browser testing
  • Test on the latest versions of Chrome, Firefox, Safari, and Edge
  • Use Chrome device mode to simulate mobile environments
  • Confirm consistent appearance and behaviour across browsers
Bug testing

When a bug is fixed:

  1. Reproduce the issue using the main branch.
  2. Verify the fix in the pull request branch.
  3. Retest the component across all relevant areas.

Confirm the issue no longer occurs.

Reporting
  • Document updated test results, findings, and screenshots in the pull request comments
  • Log newly discovered issues in GitHub
Join design system drop-in hours to:
  • Get feedback on your service
  • Propose new components or patterns
  • Suggest updates to existing resources
  • Ask questions
  • Share feedback
Drop-in sessions are available to Government of Alberta product teams. Book time in drop-in hours