Add Mobile Tests to Chromatic

danbrady commented 3 weeks ago

Description

Chromatic is currently set up to automate visual diff testing at 1200px. This has be extremely helpful for catching issues that could be easily missed with manually testing.

However, there are some components whose design significantly changes at the mobile breakpoint. For example, buttons in button group go full width on mobile, but inline-block at desktop. We witnessed an issue with icon position in mobile but not desktop. That would be great if Chromatic can catch things like that.

Considerations

In a recent month we hit about ~75% of monthly allotted amount of tests in Chromatic with only desktop tests. So we might have to consider selecting specific components to add these tests to, if that's even possible.

Task List

[ ] Add mobile configuration to Chromatic so visual diffs at a mobile viewport are captured

Acceptance Criteria

[ ] Mobile visual diffs are generated in addition to the current desktop ones.

caw310 commented 1 week ago

@danbrady would you add tasks and acceptance criteria for this?

danbrady commented 1 week ago

@caw310 Ok, I added some but, admittedly, it's basic. This is an effort we need a developer to set up. So they might have additional tasks that are required that I'm not thinking of.

caw310 commented 1 week ago

Hey team! Please add your planning poker estimate with Zenhub @Andrew565 @ataker @harshil1793 @it-harrison @jamigibbs @micahchiang @nickjg231 @powellkerry @rmessina1010 @rsmithadhoc

department-of-veterans-affairs / vets-design-system-documentation