Skip to content

Commit 8d60914

Browse files
omacrangerLogan Grahamdiemol
authored
[Storybook] Upgrade dependencies, add examples for variations (#783)
* upgrade storybook dependencies, add examples for variations * add / setup interactions example with newest Storybook integration version * Importing SauceVisualParams * Using SAUCE_VISUAL_PROJECT * Bumping deps * Bumping more deps * A few more deps bumped --------- Co-authored-by: Logan Graham <[email protected]> Co-authored-by: Diego Molina <[email protected]> Co-authored-by: Diego Molina <[email protected]>
1 parent 57cfc81 commit 8d60914

File tree

7 files changed

+14894
-36780
lines changed

7 files changed

+14894
-36780
lines changed

‎storybook/.storybook/test-runner.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import { TestRunnerConfig } from '@storybook/test-runner';
2-
import { postVisit } from '@saucelabs/visual-storybook';
2+
import { postVisit, preVisit } from '@saucelabs/visual-storybook';
33

44
const config: TestRunnerConfig = {
5+
preVisit,
56
postVisit,
67
};
78

‎storybook/package-lock.json‎

Lines changed: 14788 additions & 36726 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎storybook/package.json‎

Lines changed: 29 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,20 @@
22
"name": "visual-storybook",
33
"version": "0.1.0",
44
"engines": {
5-
"node": "^16.13 || >=18"
5+
"node": ">=18"
66
},
77
"dependencies": {
8-
"@storybook/test": "^8.3.0",
9-
"@testing-library/jest-dom": "5.17.0",
10-
"@testing-library/react": "13.4.0",
11-
"@testing-library/user-event": "14.5.2",
12-
"@types/jest": "27.5.2",
13-
"@types/node": "20.12.3",
14-
"@types/react": "18.2.74",
15-
"@types/react-dom": "18.2.13",
16-
"react": "^18.2.0",
17-
"react-dom": "^18.2.0",
8+
"@storybook/test": "^8.6.12",
9+
"@testing-library/jest-dom": "6.6.3",
10+
"@testing-library/react": "16.3.0",
11+
"@testing-library/user-event": "14.6.1",
12+
"@types/jest": "29.5.14",
13+
"@types/node": "22.15.17",
14+
"@types/react": "19.1.3",
15+
"@types/react-dom": "19.1.4",
16+
"playwright": "1.52.0",
17+
"react": "^18.3.1",
18+
"react-dom": "^18.3.1",
1819
"react-scripts": "5.0.1",
1920
"typescript": "4.9.5",
2021
"web-vitals": "3.5.2"
@@ -27,7 +28,7 @@
2728
"storybook": "storybook dev -p 6006",
2829
"build-storybook": "storybook build",
2930
"echo": "HELLO=$SAUCE_USERNAME; echo $HELLO",
30-
"test-storybook": "SAUCE_PROJECT_NAME=\"Storybook Example for $SAUCE_USERNAME\" test-storybook -i",
31+
"test-storybook": "SAUCE_VISUAL_PROJECT=\"Storybook Example for $SAUCE_USERNAME\" test-storybook -i",
3132
"storybook-static": "npx http-server storybook-static --port 6006 --silent",
3233
"test-storybook:ci": "concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"npm run build-storybook && npm run storybook-static\" \"npx wait-on tcp:6006 && npm run test-storybook\"",
3334
"test-storybook-modified:ci": "concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"npm run build-storybook && npm run storybook-static\" \"npx wait-on tcp:6006 && npm run test-storybook\""
@@ -52,24 +53,25 @@
5253
]
5354
},
5455
"devDependencies": {
55-
"@saucelabs/visual-storybook": "0.6.1",
56-
"@storybook/addon-essentials": "^8.3.0",
57-
"@storybook/addon-interactions": "^8.3.0",
58-
"@storybook/addon-links": "^8.3.0",
59-
"@storybook/addon-onboarding": "^8.3.0",
60-
"@storybook/blocks": "^8.3.0",
61-
"@storybook/preset-create-react-app": "^8.3.0",
62-
"@storybook/react": "^8.3.0",
63-
"@storybook/react-webpack5": "^8.3.0",
64-
"@storybook/test-runner": "^0.19.1",
56+
"@saucelabs/visual-storybook": "0.10.6",
57+
"@storybook/addon-essentials": "^8.6.12",
58+
"@storybook/addon-interactions": "^8.6.12",
59+
"@storybook/addon-links": "^8.6.12",
60+
"@storybook/addon-onboarding": "^8.6.12",
61+
"@storybook/blocks": "^8.6.12",
62+
"@storybook/preset-create-react-app": "^8.6.12",
63+
"@storybook/react": "^8.6.12",
64+
"@storybook/react-webpack5": "^8.6.12",
65+
"@storybook/test-runner": "^0.22.0",
6566
"babel-plugin-named-exports-order": "0.0.2",
66-
"concurrently": "8.2.2",
67-
"eslint-plugin-storybook": "^0.8.0",
67+
"concurrently": "9.1.2",
68+
"eslint-plugin-storybook": "^0.12.0",
6869
"http-server": "14.1.1",
70+
"jest": "29.7.0",
6971
"prop-types": "15.8.1",
70-
"storybook": "^8.3.0",
71-
"wait-on": "7.2.0",
72-
"webpack": "5.89.0"
72+
"storybook": "^8.4.4",
73+
"wait-on": "8.0.3",
74+
"webpack": "5.99.8"
7375
},
7476
"packageManager": "[email protected]+sha1.75c6e8a4075abfc494770f998bf37b9ada110f51"
7577
}

‎storybook/src/stories/Button.stories.ts‎

Lines changed: 64 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,77 @@
11
import type { Meta, StoryObj } from "@storybook/react";
2-
2+
import { takeVisualSnapshot } from "@saucelabs/visual-storybook/play";
3+
import { SauceVisualParams } from "@saucelabs/visual-storybook";
34
import { Button } from "./Button";
5+
import { expect, userEvent, within } from '@storybook/test';
46

57
// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
68
const meta = {
79
title: "Example/Button",
810
component: Button,
11+
play: async ({ canvasElement }) => {
12+
const canvas = within(canvasElement);
13+
const button = canvas.getByRole('button');
14+
await userEvent.hover(button);
15+
16+
// Take a screenshot of the focus behavior
17+
await button.focus();
18+
await expect(button).toHaveFocus();
19+
await takeVisualSnapshot('Button Focused');
20+
21+
await userEvent.click(button);
22+
await takeVisualSnapshot('Button Clicked / Active');
23+
24+
// Unfocus the element to reset it for the remaining screenshots / variations
25+
await button.blur();
26+
},
927
parameters: {
1028
// Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
1129
layout: "centered",
30+
sauceVisual: {
31+
variations: [
32+
{
33+
// Prefixes the story name with `[disabled]` -- eg: `Example/Button/[disabled] Button`.
34+
prefix: '[disabled] ',
35+
args: {
36+
disabled: true,
37+
},
38+
},
39+
// Examples to test multiple sizes of a single component
40+
{
41+
prefix: '[small] ',
42+
args: {
43+
size: "small",
44+
},
45+
},
46+
{
47+
prefix: '[medium] ',
48+
args: {
49+
size: "medium",
50+
},
51+
},
52+
{
53+
prefix: '[large] ',
54+
args: {
55+
size: "large",
56+
},
57+
},
58+
{
59+
// postfixes the story name with ` Primary` -- eg: `Example/Button/Button Primary`.
60+
postfix: ' Primary',
61+
args: {
62+
primary: true,
63+
},
64+
},
65+
{
66+
// Overrides the name completely. -- eg `Example/Button/Btn primary=true`
67+
name: 'Btn primary=true',
68+
args: {
69+
primary: true,
70+
},
71+
},
72+
],
73+
} satisfies SauceVisualParams<Meta<typeof Button>['args']>,
1274
},
13-
// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
14-
tags: ["autodocs"],
1575
// More on argTypes: https://storybook.js.org/docs/react/api/argtypes
1676
argTypes: {
1777
backgroundColor: { control: "color" },
@@ -21,30 +81,8 @@ const meta = {
2181
export default meta;
2282
type Story = StoryObj<typeof meta>;
2383

24-
// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
25-
export const Primary: Story = {
26-
args: {
27-
primary: true,
28-
label: "Button",
29-
},
30-
};
31-
32-
export const Secondary: Story = {
84+
export const _Button: Story = {
3385
args: {
3486
label: "Button",
3587
},
3688
};
37-
38-
export const Large: Story = {
39-
args: {
40-
size: "large",
41-
label: "Button!",
42-
},
43-
};
44-
45-
export const Small: Story = {
46-
args: {
47-
size: "small",
48-
label: "Button!",
49-
},
50-
};

‎storybook/src/stories/Button.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ interface ButtonProps {
2222
* Optional click handler
2323
*/
2424
onClick?: () => void;
25+
disabled?: boolean;
2526
}
2627

2728
/**

‎storybook/src/stories/button.css‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,12 @@
77
display: inline-block;
88
line-height: 1;
99
}
10+
.storybook-button:hover {
11+
background: #f1f1f1;
12+
}
13+
.storybook-button:focus {
14+
box-shadow: 0 0 10px blue;
15+
}
1016
.storybook-button--primary {
1117
color: white;
1218
background-color: #1ea7fd;
@@ -28,3 +34,6 @@
2834
font-size: 16px;
2935
padding: 12px 24px;
3036
}
37+
.storybook-button:disabled {
38+
background: #e8e8e8;
39+
}

‎storybook/test-runner-jest.config.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ module.exports = {
1717
devices: [ 'Desktop Edge', 'Desktop Firefox', 'Desktop Chrome', 'Desktop Safari', 'Pixel 5', 'iPhone 14 Pro Max'],
1818
},
1919
},
20+
testTimeout: 60_000,
2021

2122
/** Add your own overrides below
2223
* @see https://jestjs.io/docs/configuration

0 commit comments

Comments
 (0)