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
798 stars 163 forks source link

Combine examples for Percy #5178

Closed jmuzina closed 5 days ago

jmuzina commented 1 week ago

This PR is based on the feature branch percy-examples-combination which is composed of multiple smaller PRs. This can merge after all of the split PRs have been merged.

This PR should not be directly pushed to, so that the changes it introduces can be considered to have already been reviewed & approved in split PRs.

List of PRs & completion state (please review top-to-bottom):

Snapshots state after merging ALL prs:

View report of what will be passed to Percy after merging all of these PRs. This is sourced from this test script.

Compare this vs the snapshots that are currently taken without this change, on main.

Done

Combines many of our examples into single views so many examples can be screenshotted at once. Removed theme-specific examples where possible and started using query parameters to snapshot examples in each theme, increasing test coverage and decreasing snapshots usage from ~1.4k to 814 per build.

Changed the Percy script so that it uses combined example scripts (following naming convention of combined.html. If a directory contains a combined.html, it is assumed that that combined.html includes the HTML of all other non-partial HTML files in the directory. These "combined" templates are not rendered in the examples index. Note that several templates were moved into directories so that this naming convention can work (i.e., base/headings directory contains heading- templates that were previously loosely contained in base/).

Combined screenshots inherit the breakpoints of the examples they embed. I.E., if a combined example by itself would be snapshotted at [375, 1200] widths, but it embeds an example that is "responsive" (thus needing an additional snapshot at 800px), the combined example will be snapshotted at [375, 800, 1200] widths.

This also removes theme-specific example embeds from the documentation where possible. If we want the embedded examples to be themed, we can implement theme switching for the example embeds at a later date.

redirects.yaml was updated to redirect requests for old theme-specific examples to the non-theme specific example with the proper color theme query parameter populated, and to redirect requests for examples into the proper subdirectory where necessary.

Closes WD-11673

PR Snapshots count disclaimer

This PR will cause a Percy build with MORE Percy snapshots, not less - this is because snapshots.js has to be on the default branch to be used in the workflow action. This PR modifies snapshots.js to used combined HTML where possible, but this PR is still using the old version of snapshots.js. This means there is a snapshot for each example, including combined examples and each example within them.

Here is an example of the new Percy baseline after merging this PR (will be the first Percy build to use combined examples)

QA

Check if PR is ready for release

If this PR contains Vanilla SCSS code changes, it should contain the following changes to make sure it's ready for the release:

webteam-app commented 1 week ago

Demo

Jenkins

demos.haus

jmuzina commented 6 days ago

Ran a Percy build against this PR. It does not take into account the new snapshots.js and examples.html, however, as those are not checked out by the Percy testing workflow for security reasons.

I did notice an issue with the dark logo section in standalone mode, and raised PR #5193 to fix it. This is blocked until that is merged in.