docs: add more chromatic/storybook info#7337
Merged
Conversation
benelan
added
the
skip visual snapshots
driskull
approved these changes
Jul 18, 2023
jcfranco
reviewed
Jul 18, 2023
| - The `simple` story and any other significant configuration should have a matching `darkModeRTL_TestOnly` story | ||
| - In order to reduce snapshot count, dark mode and RTL visual tests have been combined | ||
|
|
||
| Any stories used for snapshot testing should have animations disabled using the `--calcite-duration-factor` CSS variable so they don't cause diffs on every build. `NoTest` stories are the only ones that should have animations. See [`loader`'s stories](../src/components/loader/loader.stories.ts) as an example for how to setup stories for components with animation. For example: |
Member
There was a problem hiding this comment.
Nitpick: setup stories ➡️ set up stories.
| - The `simple` story and any other significant configuration should have a matching `darkModeRTL_TestOnly` story | ||
| - In order to reduce snapshot count, dark mode and RTL visual tests have been combined | ||
|
|
||
| Any stories used for snapshot testing should have animations disabled using the `--calcite-duration-factor` CSS variable so they don't cause diffs on every build. `NoTest` stories are the only ones that should have animations. See [`loader`'s stories](../src/components/loader/loader.stories.ts) as an example for how to setup stories for components with animation. For example: |
Member
There was a problem hiding this comment.
What about the stories that don't have a test-related suffix? I believe those are also used for screenshot tests.
I think we can automatically disable all animations in Chromatic builds by using preview/manager templates + the screenshot test build flag:
// main.ts
module.exports = {
// ...
previewHead: (head) => (`
${head}
${
process.env.STORYBOOK_SCREENSHOT_TEST_BUILD ?
`<style>
:root {
--calcite-duration-factor: 0;
}
</style>`
: ""
}
`),
};
Contributor
Author
There was a problem hiding this comment.
What about the stories that don't have a test-related suffix? I believe those are also used for screenshot tests.
Yeah they are.
Ooh nice I can give that a try
Contributor
Author
There was a problem hiding this comment.
There is also this: https://www.chromatic.com/docs/ischromatic#use-in-storybookpreviewjs
I just didn't know about the previeHead thing
…shot-doc * origin/main: chore: release next fix(tooltip): ensure --calcite-app-z-index-tooltip is applied (#7345) docs: add warning notice to internal storybook (#7338) chore: remove references to removed cleanup script (#7339) chore: drop Airtable syncing action (#7340) chore: release next fix(color-picker): maintains correct numbering system when entering invalid RGB value (#7327) ci: notify teams about calcite-components releases only (#7317) build(deps): Bump rollup from 2.77.1 to 3.26.0 (#7264) build(deps): Bump eslint-plugin-jsdoc from 46.4.3 to 46.4.4 (#7329) build(deps): Bump semver and @types/semver (#7309)
benelan
added a commit
that referenced
this pull request
Jul 21, 2023
…visual diffs (#7348) **Related Issue:** #7337 (comment) ## Summary Uses `--calcite-duration-factor` to disable animations for all snapshots when running in Chromatic.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Related Issue: #7333
Summary