add storybook snapshot #458

naporin0624 · 2024-02-07T10:17:52Z

やったこと

storyshots の削除
story から snapshot を生成する test を作成

動作確認環境

yarn test yarn test -u が動作すること

チェックリスト

不要なチェック項目は消して構いません

破壊的変更がある場合には、対象のパッケージのメジャーバージョンが上がっていることを確認した
追加したコンポーネントが index.ts から再 export されている
README やドキュメントに影響があることを確認した

備考

snapshot を個別に出力するにあたって https://github.com/igor-dv/jest-specific-snapshot を入れたがより良いものがあったら移行したい
- storyshots で使われていた
  - https://www.npmjs.com/package/jest-specific-snapshot?activeTab=dependents
以下の jest バグを踏んだため snap への拡張子変更はやめた
- Jest detects linux .snap package file as obsolete snapshot jestjs/jest#8922

naporin0624 · 2024-02-07T10:18:16Z

.storybook/jest.setup.ts

+import { setProjectAnnotations } from '@storybook/react'
+
+import * as projectAnnotations from './preview'
+
+setProjectAnnotations(projectAnnotations)


https://storybook.js.org/docs/writing-tests/storyshots-migration-guide#import-project-level-annotations-from-storybook

If you need project-level annotations (e.g., decorators, args, styles) enabled in your ./storybook/preview.js|ts included in your tests, adjust your test set up file to import the annotations as follows:

naporin0624 · 2024-02-07T10:18:57Z

.storybook/storybook.test.ts

ref: https://storybook.js.org/docs/writing-tests/storyshots-migration-guide#jest

naporin0624 · 2024-02-07T10:20:54Z

.storybook/storybook.test.ts

+          const mounted = renderer.create(story()).toJSON()
+          // Ensures a consistent snapshot by waiting for the component to render by adding a delay of 1 ms before taking the snapshot.
+          await new Promise((resolve) => setTimeout(resolve, 1))
+          expect(mounted).toMatchSpecificSnapshot(snapshotPath)


story があるディレクトリに snapshots を作成し個別に snapshot を生成する

これしかなかったのでこれを使用したが他にいいものがあれたら変えたい
https://github.com/igor-dv/jest-specific-snapshot

github-actions · 2024-02-07T10:21:06Z

Size Change: +88 B (0%)

Total Size: 623 kB

Filename	Size	Change
`./packages/icons/dist/PixivIcon.story.d.ts`	973 B	+88 B (+10%)	⚠️

ℹ️ View Unchanged

Filename	Size
`./packages/foundation/dist/border-radius.d.ts`	692 B
`./packages/foundation/dist/breakpoint.d.ts`	225 B
`./packages/foundation/dist/color.d.ts`	171 B
`./packages/foundation/dist/effect.d.ts`	1.08 kB
`./packages/foundation/dist/grid.d.ts`	396 B
`./packages/foundation/dist/index.cjs.js`	2.82 kB
`./packages/foundation/dist/index.d.ts`	230 B
`./packages/foundation/dist/index.esm.js`	1.44 kB
`./packages/foundation/dist/spacing.d.ts`	305 B
`./packages/foundation/dist/typography.d.ts`	790 B
`./packages/icons-cli/dist/index.js`	20.3 kB
`./packages/icons/dist/charcoalIconFiles.d.ts`	4.61 kB
`./packages/icons/dist/index.cjs.js`	9.47 kB
`./packages/icons/dist/index.d.ts`	478 B
`./packages/icons/dist/index.esm.js`	7.96 kB
`./packages/icons/dist/loaders/CharcoalIconFilesLoader.d.ts`	7.3 kB
`./packages/icons/dist/loaders/CustomIconLoader.d.ts`	417 B
`./packages/icons/dist/loaders/index.d.ts`	181 B
`./packages/icons/dist/loaders/Loadable.d.ts`	98 B
`./packages/icons/dist/loaders/PixivIconLoadError.d.ts`	153 B
`./packages/icons/dist/PixivIcon.d.ts`	1.46 kB
`./packages/icons/dist/PixivIcon.test.d.ts`	55 B
`./packages/icons/dist/ssr.d.ts`	75 B
`./packages/react-sandbox/dist/_lib/compat.d.ts`	427 B
`./packages/react-sandbox/dist/components/Carousel/index.d.ts`	1.35 kB
`./packages/react-sandbox/dist/components/Carousel/index.story.d.ts`	188 B
`./packages/react-sandbox/dist/components/CarouselButton/index.d.ts`	619 B
`./packages/react-sandbox/dist/components/CarouselButton/index.story.d.ts`	323 B
`./packages/react-sandbox/dist/components/Filter/index.d.ts`	1.12 kB
`./packages/react-sandbox/dist/components/Filter/index.story.d.ts`	374 B
`./packages/react-sandbox/dist/components/HintText/index.d.ts`	298 B
`./packages/react-sandbox/dist/components/HintText/index.story.d.ts`	312 B
`./packages/react-sandbox/dist/components/icons/Base.d.ts`	706 B
`./packages/react-sandbox/dist/components/icons/DotsIcon.d.ts`	282 B
`./packages/react-sandbox/dist/components/icons/InfoIcon.d.ts`	87 B
`./packages/react-sandbox/dist/components/icons/NextIcon.d.ts`	281 B
`./packages/react-sandbox/dist/components/icons/WedgeIcon.d.ts`	462 B
`./packages/react-sandbox/dist/components/Layout/index.d.ts`	2.07 kB
`./packages/react-sandbox/dist/components/Layout/index.story.d.ts`	402 B
`./packages/react-sandbox/dist/components/LeftMenu/index.d.ts`	382 B
`./packages/react-sandbox/dist/components/MenuListItem/index.d.ts`	1.79 kB
`./packages/react-sandbox/dist/components/MenuListItem/index.story.d.ts`	725 B
`./packages/react-sandbox/dist/components/Pager/index.d.ts`	529 B
`./packages/react-sandbox/dist/components/Pager/index.story.d.ts`	1.08 kB
`./packages/react-sandbox/dist/components/SwitchCheckbox/index.d.ts`	340 B
`./packages/react-sandbox/dist/components/SwitchCheckbox/index.story.d.ts`	429 B
`./packages/react-sandbox/dist/components/TextEllipsis/helper.d.ts`	235 B
`./packages/react-sandbox/dist/components/TextEllipsis/index.d.ts`	381 B
`./packages/react-sandbox/dist/components/TextEllipsis/index.story.d.ts`	345 B
`./packages/react-sandbox/dist/components/WithIcon/index.d.ts`	1.07 kB
`./packages/react-sandbox/dist/components/WithIcon/index.story.d.ts`	609 B
`./packages/react-sandbox/dist/foundation/constants.d.ts`	208 B
`./packages/react-sandbox/dist/foundation/hooks.d.ts`	1.04 kB
`./packages/react-sandbox/dist/foundation/support.d.ts`	131 B
`./packages/react-sandbox/dist/foundation/utils.d.ts`	613 B
`./packages/react-sandbox/dist/hooks/index.d.ts`	148 B
`./packages/react-sandbox/dist/index.cjs.js`	64.5 kB
`./packages/react-sandbox/dist/index.d.ts`	1.34 kB
`./packages/react-sandbox/dist/index.esm.js`	55 kB
`./packages/react-sandbox/dist/misc/storybook-helper.d.ts`	343 B
`./packages/react-sandbox/dist/styled.d.ts`	12.3 kB
`./packages/react/dist/_lib/compat.d.ts`	1.54 kB
`./packages/react/dist/_lib/index.d.ts`	1.02 kB
`./packages/react/dist/_lib/useForwardedRef.d.ts`	169 B
`./packages/react/dist/components/a11y.test.d.ts`	50 B
`./packages/react/dist/components/Button/index.d.ts`	483 B
`./packages/react/dist/components/Button/index.story.d.ts`	1.05 kB
`./packages/react/dist/components/Button/lib/variantToBackground.d.ts`	209 B
`./packages/react/dist/components/Button/lib/variantToFont.d.ts`	154 B
`./packages/react/dist/components/Button/StyledButton.d.ts`	680 B
`./packages/react/dist/components/Checkbox/index.d.ts`	787 B
`./packages/react/dist/components/Checkbox/index.story.d.ts`	512 B
`./packages/react/dist/components/Clickable/index.d.ts`	747 B
`./packages/react/dist/components/Clickable/index.story.d.ts`	400 B
`./packages/react/dist/components/DropdownSelector/Divider.d.ts`	230 B
`./packages/react/dist/components/DropdownSelector/DropdownMenuItem.d.ts`	308 B
`./packages/react/dist/components/DropdownSelector/DropdownPopover.d.ts`	486 B
`./packages/react/dist/components/DropdownSelector/index.d.ts`	555 B
`./packages/react/dist/components/DropdownSelector/index.story.d.ts`	789 B
`./packages/react/dist/components/DropdownSelector/ListItem/index.d.ts`	668 B
`./packages/react/dist/components/DropdownSelector/ListItem/index.story.d.ts`	437 B
`./packages/react/dist/components/DropdownSelector/MenuItem/index.d.ts`	511 B
`./packages/react/dist/components/DropdownSelector/MenuItem/internals/handleFocusByKeyBoard.d.ts`	373 B
`./packages/react/dist/components/DropdownSelector/MenuItem/internals/useMenuItemHandleKeyDown.d.ts`	483 B
`./packages/react/dist/components/DropdownSelector/MenuItemGroup/index.d.ts`	476 B
`./packages/react/dist/components/DropdownSelector/MenuList/index.d.ts`	699 B
`./packages/react/dist/components/DropdownSelector/MenuList/index.story.d.ts`	455 B
`./packages/react/dist/components/DropdownSelector/MenuList/internals/getValuesRecursive.d.ts`	348 B
`./packages/react/dist/components/DropdownSelector/MenuList/MenuListContext.d.ts`	325 B
`./packages/react/dist/components/DropdownSelector/Popover/index.d.ts`	632 B
`./packages/react/dist/components/DropdownSelector/Popover/index.story.d.ts`	298 B
`./packages/react/dist/components/DropdownSelector/Popover/usePreventScroll.d.ts`	140 B
`./packages/react/dist/components/DropdownSelector/utils/findPreviewRecursive.d.ts`	411 B
`./packages/react/dist/components/FieldLabel/index.d.ts`	470 B
`./packages/react/dist/components/Icon/index.d.ts`	498 B
`./packages/react/dist/components/Icon/index.story.d.ts`	5.03 kB
`./packages/react/dist/components/IconButton/index.d.ts`	572 B
`./packages/react/dist/components/IconButton/index.story.d.ts`	811 B
`./packages/react/dist/components/LoadingSpinner/index.d.ts`	656 B
`./packages/react/dist/components/LoadingSpinner/index.story.d.ts`	410 B
`./packages/react/dist/components/LoadingSpinner/LoadingSpinnerIcon.story.d.ts`	459 B
`./packages/react/dist/components/Modal/__stories__/InternalScrollStory.d.ts`	189 B
`./packages/react/dist/components/Modal/Dialog/index.d.ts`	1.6 kB
`./packages/react/dist/components/Modal/index.d.ts`	1.94 kB
`./packages/react/dist/components/Modal/index.story.d.ts`	1.06 kB
`./packages/react/dist/components/Modal/ModalBackgroundContext.d.ts`	231 B
`./packages/react/dist/components/Modal/ModalPlumbing.d.ts`	510 B
`./packages/react/dist/components/MultiSelect/context.d.ts`	394 B
`./packages/react/dist/components/MultiSelect/index.d.ts`	1.2 kB
`./packages/react/dist/components/MultiSelect/index.story.d.ts`	2.11 kB
`./packages/react/dist/components/MultiSelect/index.test.d.ts`	51 B
`./packages/react/dist/components/Radio/index.d.ts`	1.07 kB
`./packages/react/dist/components/Radio/index.story.d.ts`	886 B
`./packages/react/dist/components/Radio/index.test.d.ts`	51 B
`./packages/react/dist/components/SegmentedControl/index.d.ts`	736 B
`./packages/react/dist/components/SegmentedControl/index.story.d.ts`	495 B
`./packages/react/dist/components/SegmentedControl/RadioGroupContext.d.ts`	362 B
`./packages/react/dist/components/Switch/index.d.ts`	512 B
`./packages/react/dist/components/Switch/index.story.d.ts`	553 B
`./packages/react/dist/components/TagItem/index.d.ts`	1.2 kB
`./packages/react/dist/components/TagItem/index.story.d.ts`	967 B
`./packages/react/dist/components/TextArea/index.d.ts`	1.09 kB
`./packages/react/dist/components/TextArea/TextArea.story.d.ts`	1.01 kB
`./packages/react/dist/components/TextField/index.d.ts`	1.53 kB
`./packages/react/dist/components/TextField/TextField.story.d.ts`	748 B
`./packages/react/dist/components/TextField/useFocusWithClick.d.ts`	242 B
`./packages/react/dist/core/CharcoalProvider.d.ts`	656 B
`./packages/react/dist/core/ComponentAbstraction.d.ts`	933 B
`./packages/react/dist/core/OverlayProvider.d.ts`	101 B
`./packages/react/dist/core/SSRProvider.d.ts`	88 B
`./packages/react/dist/index.cjs.js`	97.2 kB
`./packages/react/dist/index.d.ts`	2.05 kB
`./packages/react/dist/index.esm.js`	88.5 kB
`./packages/react/dist/styled.d.ts`	12.3 kB
`./packages/styled/dist/builders/border.d.ts`	685 B
`./packages/styled/dist/builders/borderRadius.d.ts`	440 B
`./packages/styled/dist/builders/colors.d.ts`	1.3 kB
`./packages/styled/dist/builders/elementEffect.d.ts`	533 B
`./packages/styled/dist/builders/o.d.ts`	5.91 kB
`./packages/styled/dist/builders/outline.d.ts`	638 B
`./packages/styled/dist/builders/size.d.ts`	1.19 kB
`./packages/styled/dist/builders/spacing.d.ts`	1.17 kB
`./packages/styled/dist/builders/transition.d.ts`	287 B
`./packages/styled/dist/builders/typography.d.ts`	624 B
`./packages/styled/dist/defineThemeVariables.test.d.ts`	66 B
`./packages/styled/dist/factories/lib.d.ts`	3.96 kB
`./packages/styled/dist/helper.d.ts`	2.01 kB
`./packages/styled/dist/index.cjs.js`	26.7 kB
`./packages/styled/dist/index.d.ts`	6.24 kB
`./packages/styled/dist/index.esm.js`	24.2 kB
`./packages/styled/dist/index.story.d.ts`	561 B
`./packages/styled/dist/index.test.d.ts`	73 B
`./packages/styled/dist/internals/index.d.ts`	1.6 kB
`./packages/styled/dist/SetThemeScript.d.ts`	905 B
`./packages/styled/dist/storyHelper.d.ts`	299 B
`./packages/styled/dist/TokenInjector.d.ts`	505 B
`./packages/styled/dist/util.d.ts`	4.24 kB
`./packages/tailwind-config/dist/_lib/compat.d.ts`	418 B
`./packages/tailwind-config/dist/_lib/TailwindBuild.d.ts`	750 B
`./packages/tailwind-config/dist/colors/plugin.d.ts`	443 B
`./packages/tailwind-config/dist/colors/plugin.test.d.ts`	52 B
`./packages/tailwind-config/dist/colors/toTailwindConfig.d.ts`	394 B
`./packages/tailwind-config/dist/colors/toTailwindConfig.test.d.ts`	62 B
`./packages/tailwind-config/dist/colors/utils.d.ts`	347 B
`./packages/tailwind-config/dist/docs/borderRadius/BorderRadius.d.ts`	119 B
`./packages/tailwind-config/dist/docs/borderRadius/index.d.ts`	175 B
`./packages/tailwind-config/dist/docs/colors/Colors.d.ts`	107 B
`./packages/tailwind-config/dist/docs/colors/index.d.ts`	201 B
`./packages/tailwind-config/dist/docs/colors/TextBgColor.d.ts`	175 B
`./packages/tailwind-config/dist/docs/colors/TextBgColor.story.d.ts`	298 B
`./packages/tailwind-config/dist/docs/colors/TextColors.d.ts`	115 B
`./packages/tailwind-config/dist/docs/gradient/Gradients.d.ts`	113 B
`./packages/tailwind-config/dist/docs/gradient/index.d.ts`	433 B
`./packages/tailwind-config/dist/docs/gradient/utils.d.ts`	120 B
`./packages/tailwind-config/dist/docs/index.d.ts`	360 B
`./packages/tailwind-config/dist/docs/screens/index.d.ts`	160 B
`./packages/tailwind-config/dist/docs/screens/Screens.d.ts`	109 B
`./packages/tailwind-config/dist/docs/spacing/index.d.ts`	160 B
`./packages/tailwind-config/dist/docs/spacing/Spacing.d.ts`	109 B
`./packages/tailwind-config/dist/docs/typography/HalfLeading.d.ts`	117 B
`./packages/tailwind-config/dist/docs/typography/index.d.ts`	346 B
`./packages/tailwind-config/dist/docs/typography/Sizes.d.ts`	105 B
`./packages/tailwind-config/dist/foundation.d.ts`	360 B
`./packages/tailwind-config/dist/gradient/plugin.d.ts`	816 B
`./packages/tailwind-config/dist/gradient/plugin.test.d.ts`	52 B
`./packages/tailwind-config/dist/index.cjs.js`	11.5 kB
`./packages/tailwind-config/dist/index.d.ts`	373 B
`./packages/tailwind-config/dist/index.esm.js`	9.6 kB
`./packages/tailwind-config/dist/index.test.d.ts`	51 B
`./packages/tailwind-config/dist/types.d.ts`	855 B
`./packages/tailwind-config/dist/typography/plugin.d.ts`	146 B
`./packages/tailwind-config/dist/util.d.ts`	656 B
`./packages/tailwind-diff/dist/commands/check.d.ts`	296 B
`./packages/tailwind-diff/dist/commands/check.js`	4.37 kB
`./packages/tailwind-diff/dist/commands/dump.d.ts`	185 B
`./packages/tailwind-diff/dist/commands/dump.js`	1.26 kB
`./packages/tailwind-diff/dist/defer.d.ts`	164 B
`./packages/tailwind-diff/dist/defer.js`	815 B
`./packages/tailwind-diff/dist/index.d.ts`	46 B
`./packages/tailwind-diff/dist/index.js`	1.84 kB
`./packages/tailwind-diff/dist/packageManager.d.ts`	323 B
`./packages/tailwind-diff/dist/packageManager.js`	1.85 kB
`./packages/tailwind-diff/dist/style.d.ts`	436 B
`./packages/tailwind-diff/dist/style.js`	2.68 kB
`./packages/tailwind-diff/dist/withPackages.d.ts`	464 B
`./packages/tailwind-diff/dist/withPackages.js`	3.24 kB
`./packages/theme/dist/abstract-theme.d.ts`	1.19 kB
`./packages/theme/dist/default.d.ts`	163 B
`./packages/theme/dist/index.cjs.js`	5.49 kB
`./packages/theme/dist/index.d.ts`	121 B
`./packages/theme/dist/index.esm.js`	3.49 kB
`./packages/theme/dist/theme.d.ts`	2.87 kB
`./packages/utils/dist/index.cjs.js`	6.81 kB
`./packages/utils/dist/index.d.ts`	3.17 kB
`./packages/utils/dist/index.esm.js`	4.67 kB

_{compressed-size-action}

github-actions · 2024-02-07T10:21:12Z

Visit the preview URL for this PR (updated for commit 234d218):

https://pixiv-charcoal-web--pr458-feat-add-storybook-s-e9gv5jgv.web.app

_{(expires Thu, 15 Feb 2024 06:57:17 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 314b26d3adca98a761c7e4d9922ebb206ff024a0}

jest bug issue: jestjs/jest#8922

…storybook-snapshot

naporin0624 added 4 commits February 7, 2024 19:14

chore: add test workspace .storybook directory

e6b6691

chore: create storybook setup file

64acc81

feat: create storybook snapshot test

d906b87

chore: icon disable parameter

52b06f7

naporin0624 temporarily deployed to preview-channel February 7, 2024 10:17 — with GitHub Actions Inactive

naporin0624 commented Feb 7, 2024

View reviewed changes

.storybook/storybook.test.ts

Copy link

Member Author

naporin0624 Feb 7, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ref: https://storybook.js.org/docs/writing-tests/storyshots-migration-guide#jest

naporin0624 commented Feb 7, 2024

View reviewed changes

naporin0624 added 3 commits February 7, 2024 19:25

chore: rename snapshot ext

1d837e7

chore: change ext

fd99299

chore: update snapshot

57511a3

naporin0624 temporarily deployed to preview-channel February 7, 2024 10:31 — with GitHub Actions Inactive

chore: remove storyshots modules

4e19010

naporin0624 self-assigned this Feb 7, 2024

naporin0624 added the patch label Feb 7, 2024

naporin0624 temporarily deployed to preview-channel February 7, 2024 10:33 — with GitHub Actions Inactive

naporin0624 added 4 commits February 8, 2024 15:07

chore: add @types/jest-specific-snapshot

8c327e3

chore: refactor storybook.test.ts

ef5961b

chore: change snapshot ext

4b2bb5a

jest bug issue: jestjs/jest#8922

chore: update snapshot

3c5c25c

naporin0624 temporarily deployed to preview-channel February 8, 2024 06:12 — with GitHub Actions Inactive

chore: add build to test job

dfd979e

naporin0624 temporarily deployed to preview-channel February 8, 2024 06:15 — with GitHub Actions Inactive

chore: remove snap ext snapshot

8942bd7

naporin0624 temporarily deployed to preview-channel February 8, 2024 06:17 — with GitHub Actions Inactive

naporin0624 marked this pull request as ready for review February 8, 2024 06:21

naporin0624 requested review from toshusai and mimokmt February 8, 2024 06:21

toshusai approved these changes Feb 8, 2024

View reviewed changes

Merge branch 'main' of ssh://github.com/pixiv/charcoal into feat/add-…

234d218

…storybook-snapshot

naporin0624 deployed to preview-channel February 8, 2024 06:54 — with GitHub Actions View deployment

mimokmt approved these changes Feb 8, 2024

View reviewed changes

naporin0624 merged commit 580bba0 into main Feb 8, 2024
10 checks passed

naporin0624 deleted the feat/add-storybook-snapshot branch February 8, 2024 07:19

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

add storybook snapshot #458

add storybook snapshot #458

naporin0624 commented Feb 7, 2024 •

edited

naporin0624 Feb 7, 2024 •

edited

naporin0624 Feb 7, 2024

naporin0624 Feb 7, 2024

github-actions bot commented Feb 7, 2024 •

edited

github-actions bot commented Feb 7, 2024 •

edited

add storybook snapshot #458

add storybook snapshot #458

Conversation

naporin0624 commented Feb 7, 2024 • edited

やったこと

動作確認環境

チェックリスト

備考

naporin0624 Feb 7, 2024 • edited

Choose a reason for hiding this comment

naporin0624 Feb 7, 2024

Choose a reason for hiding this comment

naporin0624 Feb 7, 2024

Choose a reason for hiding this comment

github-actions bot commented Feb 7, 2024 • edited

github-actions bot commented Feb 7, 2024 • edited

naporin0624 commented Feb 7, 2024 •

edited

naporin0624 Feb 7, 2024 •

edited

github-actions bot commented Feb 7, 2024 •

edited

github-actions bot commented Feb 7, 2024 •

edited