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
850 stars 169 forks source link

Percy snapshots for tooltip should include tooltips themselves #5337

Open pastelcyborg opened 2 months ago

pastelcyborg commented 2 months 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 2 months 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 2 months 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.

bartaz commented 2 months ago

Triage: high effort to fix in CSS hover tooltips. We may try to do fix it in the "detached" tooltip example, as there we can control visibility from markup. Maybe we can have a copy of detached example where tooltips are made visible by default.