search

canonical / vanilla-framework

From community websites to web applications, this CSS framework will help you achieve a consistent look and feel.
https://vanillaframework.io
GNU Lesser General Public License v3.0
824 stars 166 forks source link

Percy snapshots for tooltip should include tooltips themselves #5337

Open pastelcyborg opened 1 week ago

pastelcyborg commented 1 week ago

Describe the bug

Currently, the Percy snapshots for the tooltip component don't actually show the tooltip:

image

This is probably because the visual regression tests don't (can't?) trigger a hover state. We should figure out if we can trigger such a state in the tests, and if not, figure out some sort of workaround.

Expected behavior

Percy snapshots for tooltip component should include the tooltip itself.

syncronize-issues-to-jira[bot] commented 1 week ago

Thank you for reporting us your feedback!

The internal ticket has been created: https://warthogs.atlassian.net/browse/WD-14720.

This message was autogenerated

jmuzina commented 1 week ago

The z-index snapshot does capture an open tooltip:

Screenshot 2024-09-05 at 3 03 10 PM

It looks like we are doing this manually here: https://github.com/canonical/vanilla-framework/blob/2d015f7067dd544f4eb41cb128511b3a620c398e/templates/docs/examples/templates/z-index.html#L90-L93

The way our current Percy integration is architected relies upon pages having the needed visual state on-load based on HTML & CSS alone, there is no interactivity there.

Perhaps we could use Cypress (which we are already using, albeit minimally) to test the tooltips interactively - Percy has a Cypress integration

More simply, we could hard-code this like the z-index example, or add some flag class to the tooltips that sets them visible. But that wouldn't be testing them the way users use them, so it wouldn't be the best way of doing things.