Group Percy snapshots by test case name

[jmuzina]

Done

Groups Percy snapshots by example test case name. The example's path relative to repo root (ignoring standalone/ and query parameters) is used as a test case name.

So, for example, given snapshots of docs/examples/patterns/suru/combined?theme=light and docs/examples/standalone/patterns/suru/combined?theme=paper, both snapshots are grouped under docs/examples/patterns/suru/combined

This means we can expect each base & pattern test case to have 6 snapshots (3 per color theme in non-standalone, and another 3 in standalone), and all other test cases will have 3 snapshots.

Read Percy blog for more information on this feature.

Fixes WD-13805

QA

• Review test build with test-case grouping enabled. Ensure that snapshots are grouped as expected. Open the build info and make sure the expected number of screenshots was taken. The only change should be snapshot grouping - there are no changes to breakpoints, snapshot names, themes, etc.

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:

• PR should have one of the following labels to automatically categorise it in release notes:
  • Feature 🎁, Breaking Change 💣, Bug 🐛, Documentation 📝, Maintenance 🔨.
• Vanilla version in package.json should be updated relative to the most recent release, following semver convention:
  • if CSS class names are not changed it can be bugfix release (x.x.X)
  • if CSS class names are changed/added/removed it should be minor version (x.X.0)
  • see the wiki for more details
• Any changes to component class names (new patterns, variants, removed or added features) should be listed on the what's new page.

Screenshots

[webteam-app]

Demo

Jenkins

demos.haus

[jmuzina]

Browserstack has deployed a fix for our problem with the test case attribute - I've run a test build locally and things look as expected.