test: add token snapshot tests #8050

alisonailea · 2023-10-24T21:23:44Z

Related Issue: n/a

Summary

Adds a debugger script for calcite-design-tokens in VSCode (launch.json)
Adds snapshot tests to enforce token output

provides design tokens as a javascript object

Use-case: Design Token user want to treeshake tokens

This is not super useful but it’s better than “any”

any changes to token output should be caught and manually approved

…/token-snapshot-tests

jcfranco

Noice. I might be missing something, but I do have some questions:

What is the expected code change/PR review/test workflow? It's comparing against all output targets, so does this mean any change to tokens could potentially cause a test failure?
If ☝️ is yes, what is the difference between a. reviewing a change to the design tokens package source and b. accepting the diff from the updated snapshot? There might be a bit of redundancy between a and b.
What is the main objective of these tests? If it's to make sure the generated files are not impacted in a major way, would the components package testing help catch this type of change? If it's to make sure all changes get double checked, how can we make sure it won't get noisy and reviews will be effective?
Is there an alternative that wouldn't require us to keep a copy of all output targets as the base for snapshot tests? This would only grow as we add more tokens and output targets, right?

alisonailea · 2023-10-27T21:46:50Z

What is the expected code change/PR review/test workflow? It's comparing against all output targets, so does this mean any change to tokens could potentially cause a test failure?

Yes any change to platform outputs will cause a test failure.

If ☝️ is yes, what is the difference between a. reviewing a change to the design tokens package source and b. accepting the diff from the updated snapshot? There might be a bit of redundancy between a and b.

Because changes may be made to the token transformer which would cause a change in the output even if the tokens themselves remain the same. This also helps future proof tokens so changes aren't accidentally made in Figma and pushed up. It's a lot easier to miss mistakes on the design side.

What is the main objective of these tests? If it's to make sure the generated files are not impacted in a major way, would the components package testing help catch this type of change? If it's to make sure all changes get double checked, how can we make sure it won't get noisy and reviews will be effective?

The main objective is to catch changes made to the platform output of tokens.

Is there an alternative that wouldn't require us to keep a copy of all output targets as the base for snapshot tests? This would only grow as we add more tokens and output targets, right?

Along with being the only way to fully test tokens prior to building calcite-components as well, keeping a static record of how we expect tokens to look is valuable because it allows us to review token output from Github without pulling the branch down and building locally.

alisonailea · 2023-10-30T17:48:51Z

#7984 relies on this PR for verification. It would also help for verifying #7986. And #7986, #7984, and this PR are required to accomplish #7325

jcfranco · 2023-10-31T20:58:38Z

Thanks for the additional context. Agreed that this would be super useful for token test coverage. 🎉

I am curious to see what the update workflow ends up looking like since the snapshot test base is volatile.

jcfranco

👍

github-actions · 2023-11-08T01:44:28Z

This PR has been automatically marked as stale because it has not had recent activity. Please close your PR if it is no longer relevant. Thank you for your contributions.

* origin/main: (30 commits) test: add token snapshot tests (#8050) chore: release next fix(color-picker, popover, shell-panel, slider, tooltip): Register events on the window instead of the document (#8247) fix(list-item): Reserve space for empty open lists. (#8239) fix: dragging floating ui components (#8230) fix(list-item): an item with an empty slotted list should be openable. (#8240) fix(input): prevents mutating value on `blur` when `type="number"` (#8245) chore: release main (#8092) chore: downgrade eslint plugin after reverting breaking change (#8238) refactor(combobox): fix linting errors (#8235) chore: downgrade packages after reverting 2.0.0-next.0 change (#8237) chore: release next revert: feat(stepper-item)!: remove support for previousStep and nextStep in messages (#8222) (#8232) feat(stepper): enable responsive layout (#7744) feat(combobox): limit display of selected items with new selection-display prop (#7912) chore: release next build: update browserslist db (#8218) fix(list-item): fix rendering of open icon. (#8207) revert: feat(alert): make component responsive (#8195) fix(input-number): prevents mutating value on blur (#8226) ...

**Related Issue:** n/a ## Summary Adds a debugger script for calcite-design-tokens in VSCode (launch.json) Adds snapshot tests to enforce token output

alisonailea added 11 commits October 23, 2023 16:00

feat: add js-object platform to design token build

8c7430a

provides design tokens as a javascript object

feat: add types for js-object platform

ecc5eb6

feat: add es6 treeshake platform to design tokens

033357e

Use-case: Design Token user want to treeshake tokens

feat: add types for es6 tree-shake platform

6e858cc

This is not super useful but it’s better than “any”

chore: add json-to-ts to devDependencies

63d0500

fix: platform names and output dirs

ca5b666

chore: add JS and ES6 platforms to module exports

f93a57b

chore: revert to exporting “headless”

f8520f8

fix: normalize platform format named exports

85e7148

test: add snapshot tests for token platform output

1581600

any changes to token output should be caught and manually approved

Merge branch 'main' of github.com:Esri/calcite-components into astump…

ccaab74

…/token-snapshot-tests

alisonailea requested review from benelan, jcfranco, driskull and geospatialem as code owners October 24, 2023 21:23

alisonailea self-assigned this Oct 24, 2023

github-actions bot added the testing Issues related to automated or manual testing. label Oct 24, 2023

alisonailea added skip visual snapshots Pull requests that do not need visual regression testing. low risk Issues with low risk for consideration in low risk milestones labels Oct 24, 2023

alisonailea mentioned this pull request Oct 24, 2023

feat: update design tokens #7984

Closed

alisonailea added 3 commits October 24, 2023 14:52

test: update token snapshots

6bf8da5

Merge branch 'main' of github.com:Esri/calcite-components into astump…

c19016e

…/token-snapshot-tests

test: update token snapshots

04dae7e

jcfranco reviewed Oct 25, 2023

View reviewed changes

alisonailea requested a review from jcfranco October 30, 2023 17:46

alisonailea mentioned this pull request Oct 30, 2023

Export js format from design-tokens #7986

Closed

1 task

jcfranco approved these changes Oct 31, 2023

View reviewed changes

github-actions bot added the Stale Issues or pull requests that have not had recent activity. label Nov 8, 2023

alisonailea removed the Stale Issues or pull requests that have not had recent activity. label Nov 21, 2023

alisonailea changed the base branch from main to astump/7325-reduce-tokens-output November 22, 2023 20:08

alisonailea changed the base branch from astump/7325-reduce-tokens-output to main November 22, 2023 20:16

alisonailea merged commit a7aeb37 into main Nov 22, 2023

alisonailea deleted the astump/token-snapshot-tests branch November 22, 2023 21:06

github-actions bot added this to the 2023 December Priorities milestone Nov 22, 2023

benelan pushed a commit that referenced this pull request Nov 24, 2023

test: add token snapshot tests (#8050)

320ad70

**Related Issue:** n/a ## Summary Adds a debugger script for calcite-design-tokens in VSCode (launch.json) Adds snapshot tests to enforce token output

benelan pushed a commit that referenced this pull request Nov 24, 2023

test: add token snapshot tests (#8050)

4b4a2a7

**Related Issue:** n/a ## Summary Adds a debugger script for calcite-design-tokens in VSCode (launch.json) Adds snapshot tests to enforce token output

benelan pushed a commit that referenced this pull request Nov 26, 2023

test: add token snapshot tests (#8050)

9cf9a84

**Related Issue:** n/a ## Summary Adds a debugger script for calcite-design-tokens in VSCode (launch.json) Adds snapshot tests to enforce token output

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

test: add token snapshot tests #8050

test: add token snapshot tests #8050

alisonailea commented Oct 24, 2023

Uh oh!

jcfranco left a comment

Uh oh!

alisonailea commented Oct 27, 2023

Uh oh!

alisonailea commented Oct 30, 2023 •

edited

Loading

Uh oh!

jcfranco commented Oct 31, 2023

Uh oh!

jcfranco left a comment

Uh oh!

github-actions bot commented Nov 8, 2023

Uh oh!

Uh oh!

test: add token snapshot tests #8050

test: add token snapshot tests #8050

Conversation

alisonailea commented Oct 24, 2023

Summary

Uh oh!

jcfranco left a comment

Choose a reason for hiding this comment

Uh oh!

alisonailea commented Oct 27, 2023

Uh oh!

alisonailea commented Oct 30, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jcfranco commented Oct 31, 2023

Uh oh!

jcfranco left a comment

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Nov 8, 2023

Uh oh!

Uh oh!

alisonailea commented Oct 30, 2023 •

edited

Loading