4858 interaction testing

[RyanMunsch]

Chromatic

https://4858-interaction-testing--65a6e2ed2314f7b8f98609d8.chromatic.com

Description

DO NOT MERGE - Testing/proof-of-concept for implementation of interaction testing for Storybook/Chromatic

This pull request serves as prototype and proof-of-concept for Storybook interaction testing for VA web components, with a focus on va-accordion, va-additional-info, and va-omb-info (components that were highlight as needing a snapshot after interaction. It also standardizes the use of data-testid attributes across these components to facilitate more reliable testing. Additionally, several configuration and dependency updates have been made to support these enhancements.

Interaction Testing Enhancements:

• Added new Storybook interaction test stories for va-accordion, va-additional-info, and va-omb-info, covering accessibility, internationalization, and user interactions. These stories utilize the shadow-dom-testing-library to enable querying inside web component shadow roots. [1] [2] [3]

Testability Improvements to Web Components:

• Added data-testid attributes to the Host elements of va-accordion, va-accordion-item, va-additional-info, and va-omb-info to improve selector reliability in both E2E and Storybook interaction tests. [1] [2] [3] [4]
• Updated E2E test files to expect the new data-testid attributes, ensuring consistency between unit, E2E, and interaction tests. [1] [2] [3] [4] [5] [6] [7]

Storybook Configuration and Dependency Updates:

• Added shadow-dom-testing-library as a dev dependency to support shadow DOM querying in interaction tests.
• Updated Storybook configuration to include the new "Interaction Tests" section in the sidebar and improved the addons array formatting for clarity. [1] [2]
• Added @stencil/react-output-target as a dependency in the web components package, likely to support React bindings for Stencil components.

Related tickets and links

Closes department-of-veterans-affairs/vets-design-system-documentation#4858

Screenshots

• When there is a failing interaction test, it will be flagged in the CI jobs and prevent a merge from being allowed until it is resolved.

• For some reason, Chromatic will only flag that a test is an interaction test if it fails. I spent a good while trying to get it to recognize all these new tests as interaction tests, but didn't have any success. This may be intentional on their part, but I couldn't find any documentation that said that this is the case.

• Another pain point that I ran into is not being able to get Chromatic to allow the tests to be "played" on the dashboard for any builds, despite the fact that the page that showcases the interaction tests feature on the Chromatic site shows these controls. I spent a good amount of time trying to get to the bottom of this but to no avail. I am wondering if this is due to the fact that the /storybook package in the repo is using Webpack instead of Vite - the Storybook docs strongly suggest using Vite instead.

• Both failing test and passing tests are observable on the Chromatic deploy of Storybook:

Failing interaction test

Passing interaction test

Testing and review

Approvals

See the QA Checklists section below for suggested approvals. Use your best judgment if additional reviews are needed. When in doubt, request a review.

Approval groups

Add approval groups to the PR as needed:

• Engineering: platform-design-system-fe
• Accessibility: platform-design-system-a11y
• Design: platform-design-system-designer

QA checklists

Use the QA checklists below as guides, not rules. Not all checklists will apply to every PR but there could be some overlap.

In all scenarios, changes should be fully tested by the author and verified by the reviewer(s); functionality, responsiveness, etc.

✨ New Component Added

• The PR has the minor label
• The component matches the Figma designs.
• All properties, custom events, and utility functions have e2e and/or unit tests
• A new Storybook page has been added for the component
• Tested in all VA breakpoints.
• Chromatic UI Tests have run and snapshot changes have been accepted by the design reviewer
• Tested in vets-website using Verdaccio
• Engineering has approved the PR
• Design has approved the PR
• Accessibility has approved the PR

🌱 New Component Variation Added

• The PR has the minor label
• The variation matches its Figma design.
• Any new properties, custom events, or utility functions have e2e and/or unit tests
• A new story has been added to the component's existing Storybook page
• Any Chromatic UI snapshot changes have been accepted by a design reviewer
• Tested in vets-website using Verdaccio
• Engineering has approved the PR
• Design has approved the PR

🐞 Component Fix

• The PR has the patch label
• Any new properties, custom events, or utility functions have e2e and/or unit tests
• Any markup changes are evaluated for impact on vets-website.
  • Will any vets-website tests fail from the change?
• Any Chromatic UI snapshot changes have been reviewed and approved by a designer if necessary
• Engineering has approved the PR

♿️ Component Fix - Accessibility

• The PR has the patch label
• Any new properties, custom events, or utility functions have e2e and/or unit tests
• Any Chromatic UI snapshot changes have been reviewed and approved by a designer if necessary
• Engineering has approved the PR
• Accessibility has approved the PR

🚨 Component Fix - Breaking API Change

• The PR has the major label
• vets-website and content-build have been evaluated to determine the impact of the breaking change
• Any new properties, custom events, or utility functions have e2e and/or unit tests
• Any Chromatic UI snapshot changes have been reviewed and approved by a designer if necessary
• Tested in vets-website using Verdaccio
• Engineering has approved the PR

🔧 Component Update - Non-Breaking API Change

• The PR has the minor label
• Any new properties, custom events, or utility functions have e2e and/or unit tests
• Any Chromatic UI snapshot changes have been reviewed and approved by a designer if necessary
• Engineering has approved the PR

📖 Storybook Update

• The PR has the ignore-for-release label
• Any Chromatic UI snapshot changes have been reviewed and approved by a designer if necessary
• Engineering has approved the PR

🎨 CSS-Library Update

• The PR has the css-library label
• vets-website and content-build have been checked to determine the impact of any breaking changes
• Engineering has approved the PR