google / google/site-kit-wp

Refactor `DataBlockGroup` VRTs to remove brittle font-reset workaround

Open
#11,057 0 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.