Refactor `DataBlockGroup` VRTs to remove brittle font-reset workaround
- Dominant language
- JavaScript
- Stars
- 1.4k
- Forks
- 384
- Avg merge
- 4d 14h
- Merged PRs (30d)
- 77
Description
## Feature Description
Currently, our BackstopJS visual regression tests use a workaround in the onReady.js script to stabilize tests for the `DataBlockGroup` component.
This script manually resets the font size on specific child elements and forces a browser re-render by resizing the viewport. As noted in the original [code review](https://github.com/google/site-kit-wp/pull/10899#discussion_r2185783079), this solution is very brittle because it relies on the internal implementation details of the component. If the component's internal class names or DOM structure were to change, these tests would break.
The goal of this issue is to investigate and implement a cleaner, more robust solution that treats the component as a black box, removing the need for this workaround. This will make our VRT suite more resilient to future component changes.
---------------
_Do not alter or remove anything below. The following sections will be managed by moderators only._
## Acceptance criteria
*
## Implementation Brief
* [ ]
### Test Coverage
*
## QA Brief
*
## Changelog entry
*
Contributor guide
Research direction
Start by reading the BackstopJS visual regression setup and the onReady.js script, then inspect how the DataBlockGroup component is exercised in its VRTs. Investigate a black-box stabilization approach that does not depend on child class names or DOM structure. Done means the brittle font-reset and viewport-resize workaround is removed while the DataBlockGroup visual regression tests remain stable.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- testing-qa
- Issue type
- Refactor
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100