QA Testing

This document outlines the testing procedure for the DDD design system. The procedure ensures that all components function correctly and integrate seamlessly within DDD products.

Testing Objectives

Ensure that the coded components match the design specification.
Ensure compatibility with both React and Angular frameworks.
Validate the responsiveness and accessibility of components.
Validate the mobile version of the components.
Ensure the documentation on the design system website is accurate.

Test Cases

Component Testing

Verify that the rendered component is true to the design and styling guidelines.
Verify the component reflects the configured properties.
Verify the corresponding event is fired when interacting with the component.

Responsiveness Testing

Test components on different screen sizes (mobile, tablet, desktop).
Use browser developer tools to simulate different devices.

Accessibility Testing

Run Lighthouse audits to check accessibility scores.
Ensure all components have appropriate ARIA labels and roles.
Test keyboard navigation.
Test with NVDA for screen reader compatibility.

Cross-browser Testing

Test components on the latest versions of Chrome, Firefox, Safari, and Edge.
Test for mobile compatibility using Chrome's "device mode".
Ensure consistency in appearance and behaviour across browsers.

Bug Testing

Once the issue is fixed, reproduce it with the main branch, then verify the fix on the PR branch.
Thoroughly test the component in each aspect.

Reporting

Document updated testing results, findings, and screenshots in the pull request comments.
Any new issues discovered are documented in the GitHub project backlog.

Join design system drop in hours to get feedback on your service, propose new components or patterns, suggest changes to existing resources, ask questions, and give feedback to the design system. These sessions are for Government of Alberta product teams.
Book time in drop in hours