GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-05 06:31:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'next' into kasper/act-fix

Browse Source
This commit is contained in:
Kasper Peulen 2024-10-29 11:34:48 +01:00 committed by GitHub
commit e15a431231
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
582 changed files with 22397 additions and 3235 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
.circleci/config.yml
View File

@ -64,7 +64,7 @@ executors:
default: "small"
working_directory: /tmp/storybook
docker:
- image: mcr.microsoft.com/playwright:v1.46.0-jammy
- image: mcr.microsoft.com/playwright:v1.48.1-jammy
environment:
NODE_OPTIONS: --max_old_space_size=6144
resource_class: <<parameters.class>>
@ -154,7 +154,7 @@ jobs:
cd code
yarn local-registry --publish
- report-workflow-on-failure
- store_artifacts:
- store_artifacts:
path: code/bench/esbuild-metafiles
- save_cache:
name: Save Yarn cache
@ -261,6 +261,7 @@ jobs:
executor:
class: xlarge
name: sb_playwright
parallelism: 4
steps:
- git-shallow-clone/checkout_advanced:
clone_options: "--depth 1 --verbose"
@ -270,15 +271,35 @@ jobs:
name: Test
command: |
cd code
yarn test --coverage
- store_test_results:
path: code/junit.xml
SHARD="$((${CIRCLE_NODE_INDEX}+1))"; yarn test --reporter=blob --shard=${SHARD}/${CIRCLE_NODE_TOTAL}
# TODO: bring coverage back later. This has caused flakiness in the tests because
# Somehow Vitest reports coverage while some tests are still running,
# then it tries to report coverage again and as result it crashes like this:
# https://app.circleci.com/pipelines/github/storybookjs/storybook/85043/workflows/4ddf7907-b93c-4b17-8fdf-fe0bd7fde905/jobs/715446
# - persist_to_workspace:
# root: .
# paths:
# - code/coverage
- persist_to_workspace:
root: .
paths:
- code/coverage
- code/.vitest-reports
- report-workflow-on-failure
- cancel-workflow-on-failure
store-test-results:
executor:
class: small
name: sb_node_22_browsers
steps:
- git-shallow-clone/checkout_advanced:
clone_options: "--depth 1 --verbose"
- attach_workspace:
at: .
- run:
name: Merge test results
command: cd code && yarn vitest run --merge-reports --reporter=junit --outputFile=junit.xml
- store_test_results:
path: code/junit.xml
coverage:
executor:
class: small
@ -654,6 +675,31 @@ jobs:
STORYBOOK_INIT_EMPTY_TYPE: << parameters.template >>
STORYBOOK_DISABLE_TELEMETRY: true
- report-workflow-on-failure
test-ui-testing-module:
executor:
name: sb_playwright
class: medium
steps:
- git-shallow-clone/checkout_advanced:
clone_options: "--depth 1 --verbose"
- attach_workspace:
at: .
- run:
name: Install dependencies
command: yarn install --no-immutable
working_directory: test-storybooks/portable-stories-kitchen-sink/react
environment:
YARN_ENABLE_IMMUTABLE_INSTALLS: false
- run:
name: Run E2E tests
command: yarn playwright-e2e
working_directory: test-storybooks/portable-stories-kitchen-sink/react
- store_test_results:
path: test-results
- store_artifacts:
path: test-storybooks/portable-stories-kitchen-sink/react/test-results/
destination: playwright
- report-workflow-on-failure
test-portable-stories:
parameters:
directory:
@ -682,7 +728,7 @@ jobs:
working_directory: test-storybooks/portable-stories-kitchen-sink/<< parameters.directory >>
- run:
name: Run Playwright CT tests
command: yarn playwright
command: yarn playwright-ct
working_directory: test-storybooks/portable-stories-kitchen-sink/<< parameters.directory >>
- run:
name: Run Cypress CT tests
@ -713,6 +759,9 @@ workflows:
- unit-tests:
requires:
- build
- store-test-results:
requires:
- unit-tests
- script-checks:
requires:
- build
@ -754,6 +803,9 @@ workflows:
parallelism: 5
requires:
- build-sandboxes
- test-ui-testing-module:
requires:
- build
- test-portable-stories:
requires:
- build
@ -782,6 +834,9 @@ workflows:
- unit-tests:
requires:
- build
- store-test-results:
requires:
- unit-tests
- script-checks:
requires:
- build
@ -825,6 +880,9 @@ workflows:
matrix:
parameters:
directory: ["react", "vue3", "nextjs", "svelte"]
- test-ui-testing-module:
requires:
- build
- bench:
parallelism: 5
requires:
@ -852,6 +910,9 @@ workflows:
- unit-tests:
requires:
- build
- store-test-results:
requires:
- unit-tests
- script-checks:
requires:
- build
@ -895,6 +956,9 @@ workflows:
matrix:
parameters:
directory: ["react", "vue3", "nextjs", "svelte"]
- test-ui-testing-module:
requires:
- build
- test-empty-init:
requires:
- build

2
.github/workflows/generate-sandboxes.yml vendored
View File

@ -29,7 +29,7 @@ jobs:
- uses: actions/checkout@v4
with:
ref: next
- uses: actions/setup-node@v4
with:
node-version-file: ".nvmrc"

10
CHANGELOG.md
View File

@ -1,3 +1,13 @@
## 8.3.6
- CLI: Install Svelte CSF v5 in Svelte5 projects - [#29323](https://github.com/storybookjs/storybook/pull/29323), thanks @shilman!
- Svelte: Add v5 stories to CLI templates - [#29382](https://github.com/storybookjs/storybook/pull/29382), thanks @JReinhold!
## 8.3.5
- CLI: Update the React Native init to include v8 dependencies - [#29273](https://github.com/storybookjs/storybook/pull/29273), thanks @dannyhw!
- Vitest plugin: Fix renamed export stories - [#29250](https://github.com/storybookjs/storybook/pull/29250), thanks @shilman!
## 8.3.4
- Addon Test: Support story name as test description - [#29147](https://github.com/storybookjs/storybook/pull/29147), thanks @InfiniteXyy!

57
CHANGELOG.prerelease.md
View File

@ -1,3 +1,60 @@
## 8.4.0-beta.1
- Addon Test: Error when addon interactions exists - [#29434](https://github.com/storybookjs/storybook/pull/29434), thanks @valentinpalkovic!
- Addon Test: Escape XML when converting ANSI to HTML in test errors - [#29446](https://github.com/storybookjs/storybook/pull/29446), thanks @ghengeveld!
- Addon Test: Fix hiding stacktrace for assertion errors in test panel - [#29458](https://github.com/storybookjs/storybook/pull/29458), thanks @ghengeveld!
- CLI: Fix `yarn` detection - [#29448](https://github.com/storybookjs/storybook/pull/29448), thanks @ndelangen!
- Core: Close story status menu when selecting an item - [#29455](https://github.com/storybookjs/storybook/pull/29455), thanks @ghengeveld!
- Core: Open 'Component tests' addon panel when clicking a story status - [#29456](https://github.com/storybookjs/storybook/pull/29456), thanks @ghengeveld!
- Core: Show checkmark icon in story status dropdown and update status label for component tests - [#29451](https://github.com/storybookjs/storybook/pull/29451), thanks @ghengeveld!
- Dependencies: Upgrade VTA to v3.1.0 - [#29449](https://github.com/storybookjs/storybook/pull/29449), thanks @ghengeveld!
- Maintenance: Fix broken and outdated documentation links - [#29412](https://github.com/storybookjs/storybook/pull/29412), thanks @jonniebigodes!
## 8.4.0-beta.0
- Core: Add unified UI Testing Module - [#29241](https://github.com/storybookjs/storybook/pull/29241), thanks @yannbf!
- Svelte: Improve argTypes inference with `svelte2tsx` - support runes - [#29423](https://github.com/storybookjs/storybook/pull/29423), thanks @JReinhold!
## 8.4.0-alpha.8
- Addon-Test: Support for `@vitest/browser` v2.1.2 - [#29407](https://github.com/storybookjs/storybook/pull/29407), thanks @strozw!
- ConfigFile: Fix `export { X }` parsing - [#29344](https://github.com/storybookjs/storybook/pull/29344), thanks @vctqs1!
- Core: Fix building Storybook deleting project root files - [#29371](https://github.com/storybookjs/storybook/pull/29371), thanks @JReinhold!
- Interactions: Escape xml of interactions errors - [#29414](https://github.com/storybookjs/storybook/pull/29414), thanks @kasperpeulen!
- Svelte: Add v5 stories to CLI templates - [#29382](https://github.com/storybookjs/storybook/pull/29382), thanks @JReinhold!
- Test: Remove unused `util` dependency - [#29310](https://github.com/storybookjs/storybook/pull/29310), thanks @JReinhold!
- UI: Fix RefIndicator to use CheckIcon instead of string - [#29209](https://github.com/storybookjs/storybook/pull/29209), thanks @JSMike!
- UI: Simple tag filtering - [#29333](https://github.com/storybookjs/storybook/pull/29333), thanks @shilman!
## 8.4.0-alpha.7
- CLI: Install Svelte CSF v5 in Svelte5 projects - [#29323](https://github.com/storybookjs/storybook/pull/29323), thanks @shilman!
- Manager: Add tags property to ComponentEntry objects - [#29343](https://github.com/storybookjs/storybook/pull/29343), thanks @Sidnioulz!
## 8.4.0-alpha.6
- Addon-docs, blocks: Prebundle dependencies - [#29301](https://github.com/storybookjs/storybook/pull/29301), thanks @JReinhold!
- React: Prebundle all of `renderers/react`'s dependencies - [#29298](https://github.com/storybookjs/storybook/pull/29298), thanks @ndelangen!
- Vite: Cleanup and prebundle dependencies - [#29302](https://github.com/storybookjs/storybook/pull/29302), thanks @JReinhold!
## 8.4.0-alpha.5
- Core: Migrate from `express` to `polka` - [#29230](https://github.com/storybookjs/storybook/pull/29230), thanks @43081j!
- Core: Remove dependence on `file-system-cache` - [#29256](https://github.com/storybookjs/storybook/pull/29256), thanks @ndelangen!
## 8.4.0-alpha.4
- Blocks: Prebundle `es-toolkit` - [#29259](https://github.com/storybookjs/storybook/pull/29259), thanks @JReinhold!
- CLI: Update the React Native init to include v8 dependencies - [#29273](https://github.com/storybookjs/storybook/pull/29273), thanks @dannyhw!
- Core: Upgrade `esbuild`, broadening version range - [#29254](https://github.com/storybookjs/storybook/pull/29254), thanks @ndelangen!
- Vitest plugin: Fix renamed export stories - [#29250](https://github.com/storybookjs/storybook/pull/29250), thanks @shilman!
## 8.4.0-alpha.3
- CLI: Migrate from `chalk` to `picocolors` - [#28262](https://github.com/storybookjs/storybook/pull/28262), thanks @43081j!
- Core: Migrate from `qs` to `picoquery` - [#28315](https://github.com/storybookjs/storybook/pull/28315), thanks @43081j!
- UI: Brand image css class conflict causes image to resize on hot reloads - [#29129](https://github.com/storybookjs/storybook/pull/29129), thanks @ShreySinha02!
## 8.4.0-alpha.2
- CLI: Don't add `@storybook/addon-links` by default - [#29177](https://github.com/storybookjs/storybook/pull/29177), thanks @tobiasdiez!

9
README.md
View File

@ -86,7 +86,7 @@ View [Component Encyclopedia](https://storybook.js.org/showcase) to see how lead
Use [storybook.new](https://storybook.new) to quickly create an example project in Stackblitz.
Storybook comes with a lot of [addons](https://storybook.js.org/docs/react/configure/storybook-addons) for component design, documentation, testing, interactivity, and so on. Storybook's API makes it possible to configure and extend in various ways. It has even been extended to support React Native, Android, iOS, and Flutter development for mobile.
Storybook comes with a lot of [addons](https://storybook.js.org/docs/configure/user-interface/storybook-addons) for component design, documentation, testing, interactivity, and so on. Storybook's API makes it possible to configure and extend in various ways. It has even been extended to support React Native, Android, iOS, and Flutter development for mobile.
### Community
@ -97,10 +97,10 @@ For additional help, share your issue in [the repo's GitHub Discussions](https:/
### Supported Frameworks
| Renderer | Demo | |
|----------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------|
| -------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
| [React](code/renderers/react) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/react/latest?style=flat-square&color=blue&label)](https://next--630511d655df72125520f051.chromatic.com/) | [![React](https://img.shields.io/npm/dm/@storybook/react?style=flat-square&color=eee)](code/renderers/react) |
| [Angular](code/frameworks/angular/) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/angular/latest?style=flat-square&color=blue&label)](https://next--6322ce6af69825592bbb28fc.chromatic.com/) | [![Angular](https://img.shields.io/npm/dm/@storybook/angular?style=flat-square&color=eee)](code/frameworks/angular/) |
| [Vue 3](code/renderers/vue3) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/vue3/latest?style=flat-square&color=blue&label)](https://next--630513346a8e284ae244d415.chromatic.com/) | [![Vue 3](https://img.shields.io/npm/dm/@storybook/vue3?style=flat-square&color=eee)](code/renderers/vue3/) |
| [Vue 3](code/renderers/vue3) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/vue3/latest?style=flat-square&color=blue&label)](https://next--630513346a8e284ae244d415.chromatic.com/) | [![Vue 3](https://img.shields.io/npm/dm/@storybook/vue3?style=flat-square&color=eee)](code/renderers/vue3/) |
| [Web components](code/renderers/web-components) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/web-components/latest?style=flat-square&color=blue&label)](https://next--638db5bf49adfdfe8cf545e0.chromatic.com/) | [![Svelte](https://img.shields.io/npm/dm/@storybook/web-components?style=flat-square&color=eee)](code/renderers/web-components) |
| [React Native](https://github.com/storybookjs/react-native) | [![](https://img.shields.io/npm/v/@storybook/react-native/latest?style=flat-square&color=blue&label)](/) | [![React Native](https://img.shields.io/npm/dm/@storybook/react-native?style=flat-square&color=eee)](https://github.com/storybookjs/react-native) |
| [HTML](code/renderers/html) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/html/latest?style=flat-square&color=blue&label)](https://next--63dd39a158cf6fc05199b4bb.chromatic.com/) | [![HTML](https://img.shields.io/npm/dm/@storybook/html?style=flat-square&color=eee)](code/renderers/html) |
@ -132,7 +132,7 @@ For additional help, share your issue in [the repo's GitHub Discussions](https:/
| [storysource](code/addons/storysource/) | View the code of your stories within the Storybook UI |
| [viewport](code/addons/viewport/) | Change display sizes and layouts for responsive components using Storybook |
See [Addon / Framework Support Table](https://storybook.js.org/docs/react/api/frameworks-feature-support)
See [Addon / Framework Support Table](https://storybook.js.org/docs/configure/integration/frameworks-feature-support)
To continue improving your experience, we have to eventually deprecate or remove certain addons in favor of new and better tools.
@ -237,7 +237,6 @@ By making a recurring donation, you can support us and our work. \[[Become a bac
<a href="https://opencollective.com/storybook"><img src="https://opencollective.com/storybook/tiers/backers.svg?limit=80&button=false&avatarHeight=46&width=750"></a>
## License
[MIT](https://github.com/storybookjs/storybook/blob/main/LICENSE)

17
code/.storybook/main.ts
View File

@ -80,15 +80,22 @@ const config: StorybookConfig = {
directory: '../addons/interactions/src',
titlePrefix: 'addons/interactions',
},
// {
// directory: '../addons/interactions/template/stories',
// titlePrefix: 'addons/interactions',
// },
{
directory: '../addons/interactions/template/stories',
titlePrefix: 'addons/interactions/tests',
},
{
directory: '../addons/test/src/components',
titlePrefix: 'addons/test',
},
{
directory: '../addons/test/template/stories',
titlePrefix: 'addons/test',
},
],
addons: [
'@storybook/addon-themes',
'@storybook/addon-essentials',
'@storybook/addon-interactions',
'@storybook/addon-storysource',
'@storybook/addon-designs',
'@storybook/experimental-addon-test',

14
code/.storybook/preview.tsx
View File

@ -18,8 +18,6 @@ import { DocsContext } from '@storybook/blocks';
import { global } from '@storybook/global';
import type { Decorator, Loader, ReactRenderer } from '@storybook/react';
import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport';
import { DocsPageWrapper } from '../lib/blocks/src/components';
import { isChromatic } from './isChromatic';
@ -135,7 +133,9 @@ export const loaders = [
* The DocsContext will then be added via the decorator below.
*/
async ({ parameters: { relativeCsfPaths, attached = true } }) => {
if (!relativeCsfPaths) {
// TODO bring a better way to skip tests when running as part of the vitest plugin instead of __STORYBOOK_URL__
// eslint-disable-next-line no-underscore-dangle
if (!relativeCsfPaths || (import.meta as any).env?.__STORYBOOK_URL__) {
return {};
}
const csfFiles = await Promise.all(
@ -320,9 +320,9 @@ export const parameters = {
{ color: '#ff4785', title: 'Coral' },
{ color: '#1EA7FD', title: 'Ocean' },
{ color: 'rgb(252, 82, 31)', title: 'Orange' },
{ color: 'RGBA(255, 174, 0, 0.5)', title: 'Gold' },
{ color: 'rgba(255, 174, 0, 0.5)', title: 'Gold' },
{ color: 'hsl(101, 52%, 49%)', title: 'Green' },
{ color: 'HSLA(179,65%,53%,0.5)', title: 'Seafoam' },
{ color: 'hsla(179,65%,53%,0.5)', title: 'Seafoam' },
{ color: '#6F2CAC', title: 'Purple' },
{ color: '#2A0481', title: 'Ultraviolet' },
{ color: 'black' },
@ -338,7 +338,7 @@ export const parameters = {
'#fe4a49',
'#FED766',
'rgba(0, 159, 183, 1)',
'HSLA(240,11%,91%,0.5)',
'hsla(240,11%,91%,0.5)',
'slategray',
],
},
@ -358,3 +358,5 @@ export const parameters = {
},
},
};
export const tags = ['test', 'vitest'];

4
code/.storybook/storybook.setup.ts
View File

@ -3,6 +3,9 @@ import { beforeAll, vi, expect as vitestExpect } from 'vitest';
import { setProjectAnnotations } from '@storybook/react';
import { userEvent as storybookEvent, expect as storybookExpect } from '@storybook/test';
// eslint-disable-next-line import/namespace
import * as testAnnotations from '@storybook/experimental-addon-test/preview';
import * as coreAnnotations from '../addons/toolbars/template/stories/preview';
import * as componentAnnotations from '../core/template/stories/preview';
// register global components used in many stories
@ -17,6 +20,7 @@ const annotations = setProjectAnnotations([
// @ts-expect-error check type errors later
componentAnnotations,
coreAnnotations,
testAnnotations,
{
// experiment with injecting Vitest's interactivity API over our userEvent while tests run in browser mode
// https://vitest.dev/guide/browser/interactivity-api.html

16
code/.storybook/vitest.config.ts
View File

@ -19,11 +19,15 @@ if (process.env.INSPECT === 'true') {
export default mergeConfig(
vitestCommonConfig,
// @ts-expect-error added this because of testNamePattern below
defineProject({
plugins: [
import('@storybook/experimental-addon-test/vitest-plugin').then(({ storybookTest }) =>
storybookTest({
configDir: process.cwd(),
tags: {
include: ['vitest'],
},
})
),
...extraPlugins,
@ -31,17 +35,23 @@ export default mergeConfig(
test: {
name: 'storybook-ui',
include: [
// TODO: test all core and addon stories later
// './core/**/components/**/*.{story,stories}.?(c|m)[jt]s?(x)',
'../addons/**/src/**/*.{story,stories}.?(c|m)[jt]s?(x)',
'../addons/**/*.{story,stories}.?(c|m)[jt]s?(x)',
// '../core/template/stories/**/*.{story,stories}.?(c|m)[jt]s?(x)',
'../core/src/manager/**/*.{story,stories}.?(c|m)[jt]s?(x)',
'../core/src/preview-api/**/*.{story,stories}.?(c|m)[jt]s?(x)',
'../core/src/components/{brand,components}/**/*.{story,stories}.?(c|m)[jt]s?(x)',
],
exclude: [
...defaultExclude,
'../node_modules/**',
'**/__mockdata__/**',
'../**/__mockdata__/**',
// expected to fail in Vitest because of fetching /iframe.html to cause ECONNREFUSED
'**/Zoom.stories.tsx',
],
// TODO: bring this back once portable stories support @storybook/core/preview-api hooks
// @ts-expect-error this type does not exist but the property does!
testNamePattern: /^(?!.*(UseState)).*$/,
browser: {
enabled: true,
name: 'chromium',

97
code/.yarn/patches/@testing-library-svelte-npm-4.1.0-34b7037bc0.patch generated
View File

@ -1,97 +0,0 @@
diff --git a/package.json b/package.json
index 195dac9ee7d42fdb76bb22dc37580fa0bffd4680..980ad42f41a06023f9f7e370fd382c9217c24be5 100644
--- a/package.json
+++ b/package.json
@@ -55,7 +55,7 @@
"contributors:generate": "all-contributors generate"
},
"peerDependencies": {
- "svelte": "^3 || ^4"
+ "svelte": "^3 || ^4 || ^5"
},
"dependencies": {
"@testing-library/dom": "^9.3.1"
diff --git a/src/pure.js b/src/pure.js
index 6d4943412448c9f310f007ca7dab9d04cef90d0d..d62f4aebeb1b23ccc3c3d82aadd67075c6507c0e 100644
--- a/src/pure.js
+++ b/src/pure.js
@@ -3,7 +3,7 @@ import {
getQueriesForElement,
prettyDOM
} from '@testing-library/dom'
-import { tick } from 'svelte'
+import { tick, mount, unmount } from 'svelte'
const containerCache = new Set()
const componentCache = new Set()
@@ -54,40 +54,34 @@ const render = (
return { props: options }
}
- let component = new ComponentConstructor({
+ let component = mount(ComponentConstructor, {
target,
- ...checkProps(options)
+ ...checkProps(options),
+ ondestroy: () => componentCache.delete(component)
})
containerCache.add({ container, target, component })
componentCache.add(component)
- component.$$.on_destroy.push(() => {
- componentCache.delete(component)
- })
-
return {
container,
component,
debug: (el = container) => console.log(prettyDOM(el)),
rerender: (options) => {
- if (componentCache.has(component)) component.$destroy()
+ if (componentCache.has(component)) unmount(component)
// eslint-disable-next-line no-new
component = new ComponentConstructor({
target,
- ...checkProps(options)
+ ...checkProps(options),
+ ondestroy: () => componentCache.delete(component)
})
containerCache.add({ container, target, component })
componentCache.add(component)
-
- component.$$.on_destroy.push(() => {
- componentCache.delete(component)
- })
},
unmount: () => {
- if (componentCache.has(component)) component.$destroy()
+ if (componentCache.has(component)) unmount(component)
},
...getQueriesForElement(container, queries)
}
@@ -96,7 +90,7 @@ const render = (
const cleanupAtContainer = (cached) => {
const { target, component } = cached
- if (componentCache.has(component)) component.$destroy()
+ if (componentCache.has(component)) unmount(component)
if (target.parentNode === document.body) {
document.body.removeChild(target)
@@ -109,9 +103,10 @@ const cleanup = () => {
Array.from(containerCache.keys()).forEach(cleanupAtContainer)
}
-const act = async (fn) => {
- if (fn) {
- await fn()
+const act = (fn) => {
+ const value = fn && fn()
+ if (value !== undefined && typeof value.then === 'function') {
+ return value.then(() => tick())
}
return tick()
}

2
code/__mocks__/fs.ts
View File

@ -19,6 +19,7 @@ export const realpathSync = vi.fn();
export const readdir = vi.fn();
export const readdirSync = vi.fn();
export const readlinkSync = vi.fn();
export const mkdirSync = vi.fn();
export default {
__setMockFiles,
@ -29,4 +30,5 @@ export default {
readdir,
readdirSync,
readlinkSync,
mkdirSync,
};

2
code/addons/a11y/README.md
View File

@ -2,7 +2,7 @@
This Storybook addon can be helpful to make your UI components more accessible.
[Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support)
[Framework Support](https://storybook.js.org/docs/configure/integration/frameworks-feature-support)
![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/next/code/addons/a11y/docs/screenshot.png)

4
code/addons/a11y/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-a11y",
"version": "8.4.0-alpha.2",
"version": "8.4.0-beta.1",
"description": "Test component compliance with web accessibility standards",
"keywords": [
"a11y",
@ -60,7 +60,7 @@
},
"devDependencies": {
"@storybook/global": "^5.0.0",
"@storybook/icons": "^1.2.10",
"@storybook/icons": "^1.2.12",
"@testing-library/react": "^14.0.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",

2
code/addons/actions/ADVANCED.md
View File

@ -1,6 +1,6 @@
## Advanced/Legacy Actions usage
For basic usage, see the [documentation](https://storybook.js.org/docs/react/essentials/actions).
For basic usage, see the [documentation](https://storybook.js.org/docs/essentials/actions).
This document describes the pre-6.0 usage of the addon, and as such is no longer recommended (although it will be supported until at least 7.0).

8
code/addons/actions/README.md
View File

@ -2,19 +2,19 @@
Storybook Addon Actions can be used to display data received by event handlers in [Storybook](https://storybook.js.org).
[Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support)
[Framework Support](https://storybook.js.org/docs/configure/integration/frameworks-feature-support)
![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/next/code/addons/actions/docs/screenshot.png)
## Installation
Actions is part of [essentials](https://storybook.js.org/docs/react/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run:
Actions is part of [essentials](https://storybook.js.org/docs/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run:
```sh
npm i -D @storybook/addon-actions
```
Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/#configure-your-storybook-project):
Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/configure#configure-your-storybook-project):
```js
export default {
@ -24,4 +24,4 @@ export default {
## Usage
The basic usage is documented in the [documentation](https://storybook.js.org/docs/react/essentials/actions). For legacy usage, see the [advanced README](./ADVANCED.md).
The basic usage is documented in the [documentation](https://storybook.js.org/docs/essentials/actions). For legacy usage, see the [advanced README](./ADVANCED.md).

2
code/addons/actions/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-actions",
"version": "8.4.0-alpha.2",
"version": "8.4.0-beta.1",
"description": "Get UI feedback when an action is performed on an interactive element",
"keywords": [
"storybook",

8
code/addons/backgrounds/README.md
View File

@ -2,13 +2,13 @@
Storybook Addon Backgrounds can be used to change background colors inside the preview in [Storybook](https://storybook.js.org).
[Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support)
[Framework Support](https://storybook.js.org/docs/configure/integration/frameworks-feature-support)
![React Storybook Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/next/code/addons/backgrounds/docs/addon-backgrounds.gif)
## Installation
Backgrounds is part of [essentials](https://storybook.js.org/docs/react/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run:
Backgrounds is part of [essentials](https://storybook.js.org/docs/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run:
```sh
npm i -D @storybook/addon-backgrounds
@ -16,7 +16,7 @@ npm i -D @storybook/addon-backgrounds
## Configuration
Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/#configure-your-storybook-project):
Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/configure#configure-your-storybook-project):
```js
export default {
@ -26,4 +26,4 @@ export default {
## Usage
The usage is documented in the [documentation](https://storybook.js.org/docs/react/essentials/backgrounds).
The usage is documented in the [documentation](https://storybook.js.org/docs/essentials/backgrounds).

4
code/addons/backgrounds/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-backgrounds",
"version": "8.4.0-alpha.2",
"version": "8.4.0-beta.1",
"description": "Switch backgrounds to view components in different settings",
"keywords": [
"addon",
@ -60,7 +60,7 @@
"ts-dedent": "^2.0.0"
},
"devDependencies": {
"@storybook/icons": "^1.2.10",
"@storybook/icons": "^1.2.12",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"typescript": "^5.3.2"

16
code/addons/controls/README.md
View File

@ -2,19 +2,19 @@
[Storybook](https://storybook.js.org) Controls gives you a graphical UI to interact with a component's arguments dynamically, without needing to code. It creates an addon panel next to your component examples ("stories"), so you can edit them live.
[Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support)
[Framework Support](https://storybook.js.org/docs/configure/integration/frameworks-feature-support)
![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/next/code/addons/controls/docs/media/addon-controls-hero.gif)
## Installation
Controls is part of [essentials](https://storybook.js.org/docs/react/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run:
Controls is part of [essentials](https://storybook.js.org/docs/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run:
```sh
npm i -D @storybook/addon-controls
```
Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/#configure-your-storybook-project):
Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/configure#configure-your-storybook-project):
```js
export default {
@ -24,7 +24,7 @@ export default {
## Usage
The usage is documented in the [documentation](https://storybook.js.org/docs/react/essentials/controls).
The usage is documented in the [documentation](https://storybook.js.org/docs/essentials/controls).
## FAQs
@ -92,7 +92,7 @@ export const Reflow = () => {
};
```
And again, as above, this can be rewritten using [fully custom args](https://storybook.js.org/docs/react/essentials/controls#fully-custom-args):
And again, as above, this can be rewritten using [fully custom args](https://storybook.js.org/docs/essentials/controls#fully-custom-args):
```jsx
export const Reflow = ({ count, label, ...args }) => (
@ -123,7 +123,7 @@ Reflow.argTypes = {
There are a few known cases where controls can't be auto-generated:
- You're using a framework for which automatic generation [isn't supported](https://storybook.js.org/docs/react/api/frameworks-feature-support)
- You're using a framework for which automatic generation [isn't supported](https://storybook.js.org/docs/configure/integration/frameworks-feature-support)
- You're trying to generate controls for a component defined in an external library
With a little manual work you can still use controls in such cases. Consider the following example:
@ -147,7 +147,7 @@ Basic.args = {
};
```
The `argTypes` annotation (which can also be applied to individual stories if needed), gives Storybook the hints it needs to generate controls in these unsupported cases. See [control annotations](https://storybook.js.org/docs/react/essentials/controls#annotation) for a full list of control types.
The `argTypes` annotation (which can also be applied to individual stories if needed), gives Storybook the hints it needs to generate controls in these unsupported cases. See [control annotations](https://storybook.js.org/docs/essentials/controls#annotation) for a full list of control types.
It's also possible that your Storybook is misconfigured. If you think this might be the case, please search through Storybook's [Github issues](https://github.com/storybookjs/storybook/issues), and file a new issue if you don't find one that matches your use case.
@ -172,7 +172,7 @@ CustomControls.argTypes = {
};
```
Like [story parameters](https://storybook.js.org/docs/react/writing-stories/parameters), `args` and `argTypes` annotations are hierarchically merged, so story-level annotations overwrite component-level annotations.
Like [story parameters](https://storybook.js.org/docs/writing-stories/parameters), `args` and `argTypes` annotations are hierarchically merged, so story-level annotations overwrite component-level annotations.
### How do controls work with MDX?

4
code/addons/controls/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-controls",
"version": "8.4.0-alpha.2",
"version": "8.4.0-beta.1",
"description": "Interact with component inputs dynamically in the Storybook UI",
"keywords": [
"addon",
@ -56,7 +56,7 @@
},
"devDependencies": {
"@storybook/blocks": "workspace:*",
"@storybook/icons": "^1.2.10",
"@storybook/icons": "^1.2.12",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},

6
code/addons/docs/README.md
View File

@ -76,7 +76,7 @@ For more information on `MDX`, see the [`MDX` reference](https://github.com/stor
Storybook Docs supports all view layers that Storybook supports except for React Native (currently). There are some framework-specific features as well, such as props tables and inline story rendering. The following page captures the current state of support:
[Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support)
[Framework Support](https://storybook.js.org/docs/configure/integration/frameworks-feature-support)
**Note:** `#` = WIP support
@ -139,11 +139,11 @@ export default {
`csfPluginOptions` is an object for configuring `@storybook/csf-plugin`. When set to `null` it tells docs not to run the `csf-plugin` at all, which can be used as an optimization, or if you're already using `csf-plugin` in your `main.js`.
> With the release of version 7.0, it is no longer possible to import `.md` files directly into Storybook using the `transcludeMarkdown` [option](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#importing-plain-markdown-files-with-transcludemarkdown-has-changed). Instead, we recommend using the [`Markdown`](https://storybook.js.org/docs/react/api/doc-block-markdown) Doc Block for importing Markdown files into your Storybook documentation.
> With the release of version 7.0, it is no longer possible to import `.md` files directly into Storybook using the `transcludeMarkdown` [option](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#importing-plain-markdown-files-with-transcludemarkdown-has-changed). Instead, we recommend using the [`Markdown`](https://storybook.js.org/docs/api/doc-blocks/doc-block-markdown) Doc Block for importing Markdown files into your Storybook documentation.
## TypeScript configuration
As of SB6 [TypeScript is zero-config](https://storybook.js.org/docs/react/configure/typescript) and should work with SB Docs out of the box. For advanced configuration options, refer to the [Props documentation](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/docs/props-tables.md).
As of SB6 [TypeScript is zero-config](https://storybook.js.org/docs/configure/integration/typescript) and should work with SB Docs out of the box. For advanced configuration options, refer to the [Props documentation](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/docs/props-tables.md).
## More resources

3
code/addons/docs/angular/index.js vendored
View File

@ -1,7 +1,6 @@
/* eslint-disable no-underscore-dangle */
import { global } from '@storybook/global';
export const setCompodocJson = (compodocJson) => {
// @ts-expect-error (Converted from ts-ignore)
global.__STORYBOOK_COMPODOC_JSON__ = compodocJson;
globalThis.__STORYBOOK_COMPODOC_JSON__ = compodocJson;
};

2
code/addons/docs/docs/docspage.md
View File

@ -34,7 +34,7 @@ However, `DocsPage` brings the following improvements:
Storybook uses `component` to extract the component's description and props, and will rely on it further in future releases. We encourage you to add it to existing stories and use it in all new stories.
Here's how to set the component in [Component Story Format (CSF)](https://storybook.js.org/docs/react/api/csf):
Here's how to set the component in [Component Story Format (CSF)](https://storybook.js.org/docs/api/csf):
```js
import { Badge } from './Badge';

2
code/addons/docs/docs/mdx.md
View File

@ -149,7 +149,7 @@ You can also use the rest of the MDX features in conjunction with embedding. Tha
## Decorators and parameters
To add [decorators](https://storybook.js.org/docs/react/writing-stories/decorators) and [parameters](https://storybook.js.org/docs/react/writing-stories/parameters) in MDX:
To add [decorators](https://storybook.js.org/docs/writing-stories/decorators) and [parameters](https://storybook.js.org/docs/writing-stories/parameters) in MDX:
```md
<Meta

2
code/addons/docs/docs/multiframework.md
View File

@ -106,7 +106,7 @@ The input is the story function and the story context (id, parameters, args, etc
## Dynamic source rendering
With the release of Storybook 6.0, we've improved how stories are rendered in the [`Source` doc block](https://storybook.js.org/docs/react/api/doc-block-source). One of such improvements is the `dynamic` source type, which renders a snippet based on the output the story function.
With the release of Storybook 6.0, we've improved how stories are rendered in the [`Source` doc block](https://storybook.js.org/docs/api/doc-blocks/doc-block-source). One of such improvements is the `dynamic` source type, which renders a snippet based on the output the story function.
This dynamic rendering is framework-specific, meaning it needs a custom implementation for each framework.

26
code/addons/docs/docs/props-tables.md
View File

@ -59,7 +59,7 @@ Starting in SB 6.0, the `ArgsTable` block has built-in `Controls` (formerly know
<br/>
These controls are implemented to appear automatically in the props table when your story accepts [Storybook Args](https://storybook.js.org/docs/react/api/csf#args-story-inputs) as its input. This is done slightly differently depending on whether you're using `DocsPage` or `MDX`.
These controls are implemented to appear automatically in the props table when your story accepts [Storybook Args](https://storybook.js.org/docs/api/csf#args-story-inputs) as its input. This is done slightly differently depending on whether you're using `DocsPage` or `MDX`.
**DocsPage.** In [DocsPage](./docspage.md), simply write your story to consume args and the auto-generated props table will display controls in the right-most column:
@ -82,7 +82,7 @@ export const WithControls = (args) => <MyComponent {...args} />;
<ArgsTable story="Controls" />
```
For a very detailed walkthrough of how to write stories that use controls, read the [documentation](https://storybook.js.org/docs/react/essentials/controls).
For a very detailed walkthrough of how to write stories that use controls, read the [documentation](https://storybook.js.org/docs/essentials/controls).
## Customization
@ -187,20 +187,20 @@ This would render a row with a modified description, a type display with a dropd
> - `type: 'number'` is shorthand for `type: { name: 'number' }`
> - `control: 'radio'` is shorthand for `control: { type: 'radio' }`
Controls customization has an entire section in the [documentation](https://storybook.js.org/docs/react/essentials/controls#configuration).
Controls customization has an entire section in the [documentation](https://storybook.js.org/docs/essentials/controls#configuration).
Here are the possible customizations for the rest of the prop table:
| Field | Description |
| ---------------------------- | ---------------------------------------------------------------------------------------------------- |
| `name` | The name of the property |
| `type.required` | Whether or not the property is required |
| `description` | A markdown description for the property |
| `table.type.summary` | A short version of the type |
| `table.type.detail` | A longer version of the type (if it's a complex type) |
| `table.defaultValue.summary` | A short version of the default value |
| `table.defaultValue.detail` | A longer version of the default value (if it's a complex value) |
| `control` | See [`addon-controls` README](https://storybook.js.org/docs/react/essentials/controls#configuration) |
| Field | Description |
| ---------------------------- | ---------------------------------------------------------------------------------------------- |
| `name` | The name of the property |
| `type.required` | Whether or not the property is required |
| `description` | A markdown description for the property |
| `table.type.summary` | A short version of the type |
| `table.type.detail` | A longer version of the type (if it's a complex type) |
| `table.defaultValue.summary` | A short version of the default value |
| `table.defaultValue.detail` | A longer version of the default value (if it's a complex value) |
| `control` | See [`addon-controls` README](https://storybook.js.org/docs/essentials/controls#configuration) |
## Reporting a bug

2
code/addons/docs/docs/recipes.md
View File

@ -282,7 +282,7 @@ These two methods are complementary. The former is useful for story-specific, an
What happens if you want to add some wrapper for your MDX page, or add some other kind of React context?
When you're writing stories you can do this by adding a [decorator](https://storybook.js.org/docs/react/writing-stories/decorators), but when you're adding arbitrary JSX to your MDX documentation outside of a `<Story>` block, decorators no longer apply, and you need to use the `docs.container` parameter.
When you're writing stories you can do this by adding a [decorator](https://storybook.js.org/docs/writing-stories/decorators), but when you're adding arbitrary JSX to your MDX documentation outside of a `<Story>` block, decorators no longer apply, and you need to use the `docs.container` parameter.
The closest Docs equivalent of a decorator is the `container`, a wrapper element that is rendered around the page that is being rendered. Here's an example of adding a solid red border around the page. It uses Storybook's default page container (that sets up various contexts and other magic) and then inserts its own logic between that container and the contents of the page:

2
code/addons/docs/docs/theming.md
View File

@ -9,7 +9,7 @@
## Storybook theming
Storybook theming is the **recommended way** to theme your docs. Docs uses the same theme system as [Storybook UI](https://storybook.js.org/docs/react/configure/theming), but is themed independently from the main UI.
Storybook theming is the **recommended way** to theme your docs. Docs uses the same theme system as [Storybook UI](https://storybook.js.org/docs/configure/user-interface/theming), but is themed independently from the main UI.
Supposing you have a Storybook theme defined for the main UI in `.storybook/manager.js`:

3
code/addons/docs/ember/index.js
View File

@ -1,6 +1,5 @@
/* eslint-disable no-underscore-dangle */
import { global } from '@storybook/global';
export const setJSONDoc = (jsondoc) => {
global.__EMBER_GENERATED_DOC_JSON__ = jsondoc;
globalThis.__EMBER_GENERATED_DOC_JSON__ = jsondoc;
};

9
code/addons/docs/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-docs",
"version": "8.4.0-alpha.2",
"version": "8.4.0-beta.1",
"description": "Document component usage and properties in Markdown",
"keywords": [
"addon",
@ -100,20 +100,19 @@
"@mdx-js/react": "^3.0.0",
"@storybook/blocks": "workspace:*",
"@storybook/csf-plugin": "workspace:*",
"@storybook/global": "^5.0.0",
"@storybook/react-dom-shim": "workspace:*",
"@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
"rehype-external-links": "^3.0.0",
"rehype-slug": "^6.0.0",
"ts-dedent": "^2.0.0"
},
"devDependencies": {
"@mdx-js/mdx": "^3.0.0",
"@rollup/pluginutils": "^5.0.2",
"@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"rehype-external-links": "^3.0.0",
"rehype-slug": "^6.0.0",
"typescript": "^5.3.2",
"vite": "^4.0.4"
},

4
code/addons/docs/src/preview.ts
View File

@ -1,8 +1,6 @@
import type { PreparedStory } from 'storybook/internal/types';
import { global } from '@storybook/global';
const excludeTags = Object.entries(global.TAGS_OPTIONS ?? {}).reduce(
const excludeTags = Object.entries(globalThis.TAGS_OPTIONS ?? {}).reduce(
(acc, entry) => {
const [tag, option] = entry;
if ((option as any).excludeFromDocsStories) {

2
code/addons/docs/template/stories/docs2/button.stories.ts vendored
View File

@ -1,5 +1,3 @@
import { global as globalThis } from '@storybook/global';
export default {
component: globalThis.Components.Button,
tags: ['autodocs'],

2
code/addons/docs/template/stories/docs2/multiple-csf-files-a.stories.ts vendored
View File

@ -1,5 +1,3 @@
import { global as globalThis } from '@storybook/global';
export default {
title: 'Multiple CSF Files Same Title',
component: globalThis.Components.Html,

2
code/addons/docs/template/stories/docs2/multiple-csf-files-b.stories.ts vendored
View File

@ -1,5 +1,3 @@
import { global as globalThis } from '@storybook/global';
export default {
title: 'Multiple CSF Files Same Title',
component: globalThis.Components.Html,

1
code/addons/docs/template/stories/docspage/autoplay.stories.ts vendored
View File

@ -1,4 +1,3 @@
import { global as globalThis } from '@storybook/global';
import { expect, within } from '@storybook/test';
export default {

1
code/addons/docs/template/stories/docspage/basic.stories.ts vendored
View File

@ -1,4 +1,3 @@
import { global as globalThis } from '@storybook/global';
import { fn } from '@storybook/test';
export default {

2
code/addons/docs/template/stories/docspage/description.stories.ts vendored
View File

@ -1,5 +1,3 @@
import { global as globalThis } from '@storybook/global';
export default {
component: globalThis.Components.Button,
subcomponents: {

2
code/addons/docs/template/stories/docspage/error.stories.ts vendored
View File

@ -1,5 +1,3 @@
import { global as globalThis } from '@storybook/global';
export default {
component: globalThis.Components.Button,
tags: ['autodocs', '!test', '!vitest'],

2
code/addons/docs/template/stories/docspage/extract-description.stories.ts vendored
View File

@ -1,5 +1,3 @@
import { global as globalThis } from '@storybook/global';
export default {
component: globalThis.Components.Button,
tags: ['autodocs'],

2
code/addons/docs/template/stories/docspage/iframe.stories.ts vendored
View File

@ -1,5 +1,3 @@
import { global as globalThis } from '@storybook/global';
export default {
component: globalThis.Components.Button,
tags: ['autodocs'],

2
code/addons/docs/template/stories/docspage/overflow.stories.ts vendored
View File

@ -1,5 +1,3 @@
import { global as globalThis } from '@storybook/global';
export default {
component: globalThis.Components.Pre,
tags: ['autodocs'],

2
code/addons/docs/template/stories/docspage/override.stories.ts vendored
View File

@ -1,5 +1,3 @@
import { global as globalThis } from '@storybook/global';
// FIXME: do this using basic React functions for multi-framework
// once sandbox linking is working
//

2
code/addons/docs/template/stories/docspage/source.stories.ts vendored
View File

@ -1,7 +1,5 @@
import type { StoryContext } from 'storybook/internal/types';
import { global as globalThis } from '@storybook/global';
import { dedent } from 'ts-dedent';
export default {

3
code/addons/docs/template/stories/toc/basic.stories.ts vendored
View File

@ -1,6 +1,3 @@
import { global as globalThis } from '@storybook/global';
import { fn } from '@storybook/test';
export default {
component: globalThis.Components.Button,
tags: ['autodocs'],

2
code/addons/docs/template/stories/toc/custom-selector.stories.ts vendored
View File

@ -1,5 +1,3 @@
import { global as globalThis } from '@storybook/global';
export default {
component: globalThis.Components.Button,
tags: ['autodocs'],

2
code/addons/docs/template/stories/toc/custom-title.stories.ts vendored
View File

@ -1,5 +1,3 @@
import { global as globalThis } from '@storybook/global';
export default {
component: globalThis.Components.Button,
tags: ['autodocs'],

2
code/addons/docs/template/stories/toc/ignore-selector.stories.ts vendored
View File

@ -1,5 +1,3 @@
import { global as globalThis } from '@storybook/global';
export default {
component: globalThis.Components.Button,
tags: ['autodocs'],

2
code/addons/essentials/README.md
View File

@ -2,7 +2,7 @@
Storybook Essentials is a curated collection of addons to bring out the best of Storybook.
Each addon is documented and maintained by the core team and will be upgraded alongside Storybook as the platform evolves. We will also do our best to maintain [framework support](https://storybook.js.org/docs/react/api/frameworks-feature-support) for all of the officially supported frameworks.
Each addon is documented and maintained by the core team and will be upgraded alongside Storybook as the platform evolves. We will also do our best to maintain [framework support](https://storybook.js.org/docs/configure/integration/frameworks-feature-support) for all of the officially supported frameworks.
## Contents

2
code/addons/essentials/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-essentials",
"version": "8.4.0-alpha.2",
"version": "8.4.0-beta.1",
"description": "Curated addons to bring out the best of Storybook",
"keywords": [
"addon",

2
code/addons/gfm/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-mdx-gfm",
"version": "8.4.0-alpha.2",
"version": "8.4.0-beta.1",
"description": "GitHub Flavored Markdown in Storybook",
"keywords": [
"addon",

2
code/addons/highlight/README.md
View File

@ -8,7 +8,7 @@ Use it to call attention to particular parts of the story. Or use it to enhance
## Usage
This addon requires Storybook 6.5 or later. Highlight is part of [essentials](https://storybook.js.org/docs/react/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run the following command:
This addon requires Storybook 6.5 or later. Highlight is part of [essentials](https://storybook.js.org/docs/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run the following command:
yarn:

2
code/addons/highlight/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-highlight",
"version": "8.4.0-alpha.2",
"version": "8.4.0-beta.1",
"description": "Highlight DOM nodes within your stories",
"keywords": [
"storybook-addons",

2
code/addons/interactions/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-interactions",
"version": "8.4.0-alpha.2",
"version": "8.4.0-beta.1",
"description": "Automate, test and debug user interactions",
"keywords": [
"storybook-addons",

3
code/addons/interactions/src/preset.ts
View File

@ -18,3 +18,6 @@ export const checkActionsLoaded = (configDir: string) => {
getConfig: (configFile) => serverRequire(configFile),
});
};
// This annotation is read by addon-test, so it can throw an error if both addons are used
export const ADDON_INTERACTIONS_IN_USE = true;

1
code/addons/interactions/src/utils.ts
View File

@ -30,6 +30,7 @@ export function createAnsiToHtmlFilter(theme: StorybookTheme) {
return new Filter({
fg: theme.color.defaultText,
bg: theme.background.content,
escapeXML: true,
});
}

13
code/addons/interactions/template/stories/basics.stories.ts
View File

@ -115,10 +115,17 @@ const UserEventSetup = {
{ keys: '[TouchA>]', target: canvas.getByRole('textbox') },
{ keys: '[/TouchA]' },
]);
await user.tab();
await user.keyboard('{enter}');
const submitButton = await canvas.findByRole('button');
await expect(submitButton).toHaveFocus();
if (navigator.userAgent.toLowerCase().includes('firefox')) {
// user event has a few issues on firefox, therefore we do it differently
await fireEvent.click(submitButton);
} else {
await user.tab();
await user.keyboard('{enter}');
await expect(submitButton).toHaveFocus();
}
await expect(args.onSuccess).toHaveBeenCalled();
});
},

10
code/addons/jest/README.md
View File

@ -2,7 +2,7 @@
Storybook addon for inspecting Jest unit test results.
[Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support)
[Framework Support](https://storybook.js.org/docs/configure/integration/frameworks-feature-support)
[![Storybook Jest Addon Demo](https://raw.githubusercontent.com/storybookjs/storybook/next/code/addons/jest/docs/storybook-addon-jest.gif)](http://storybooks-official.netlify.com/?selectedKind=Addons%7Cjest&selectedStory=withTests&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Ftests%2Fpanel)
@ -20,7 +20,7 @@ Or if you're using yarn as a package manager:
## Configuration
Register the addon in your [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/#configure-your-storybook-project):
Register the addon in your [`.storybook/main.js`](https://storybook.js.org/docs/configure#configure-your-storybook-project):
```js
export default {
@ -84,7 +84,7 @@ Assuming that you have already created a test file for your component (e.g., `My
### Story-level
In your story file, add a [decorator](https://storybook.js.org/docs/react/writing-stories/decorators) to your story's default export to display the results:
In your story file, add a [decorator](https://storybook.js.org/docs/writing-stories/decorators) to your story's default export to display the results:
```js
// MyComponent.stories.js|jsx
@ -99,7 +99,7 @@ export default {
};
```
You can also add multiple tests results within your story by including the `jest` [parameter](https://storybook.js.org/docs/react/writing-stories/parameters), for example:
You can also add multiple tests results within your story by including the `jest` [parameter](https://storybook.js.org/docs/writing-stories/parameters), for example:
```js
// MyComponent.stories.js|jsx
@ -130,7 +130,7 @@ Default.parameters = {
### Global level
To avoid importing the results of the tests in each story, you can update
your [`.storybook/preview.js`](https://storybook.js.org/docs/react/configure/#configure-story-rendering) and include a decorator allowing you to display the results only for the stories that have the `jest` parameter defined:
your [`.storybook/preview.js`](https://storybook.js.org/docs/configure#configure-story-rendering) and include a decorator allowing you to display the results only for the stories that have the `jest` parameter defined:
```js
// .storybook/preview.js

4
code/addons/jest/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-jest",
"version": "8.4.0-alpha.2",
"version": "8.4.0-beta.1",
"description": "React storybook addon that show component jest report",
"keywords": [
"addon",
@ -58,7 +58,7 @@
"upath": "^2.0.1"
},
"devDependencies": {
"@storybook/icons": "^1.2.10",
"@storybook/icons": "^1.2.12",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-resize-detector": "^7.1.2",

2
code/addons/links/README.md
View File

@ -2,7 +2,7 @@
The Storybook Links addon can be used to create links that navigate between stories in [Storybook](https://storybook.js.org).
[Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support)
[Framework Support](https://storybook.js.org/docs/configure/integration/frameworks-feature-support)
## Getting Started

2
code/addons/links/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-links",
"version": "8.4.0-alpha.2",
"version": "8.4.0-beta.1",
"description": "Link stories together to build demos and prototypes with your UI components",
"keywords": [
"storybook-addons",

2
code/addons/measure/README.md
View File

@ -12,7 +12,7 @@ Storybook addon for inspecting layouts and visualizing the box model.
## Usage
This addon requires Storybook 6.3 or later. Measure is part of [essentials](https://storybook.js.org/docs/react/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run:
This addon requires Storybook 6.3 or later. Measure is part of [essentials](https://storybook.js.org/docs/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run:
```sh
npm i -D @storybook/addon-measure

4
code/addons/measure/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-measure",
"version": "8.4.0-alpha.2",
"version": "8.4.0-beta.1",
"description": "Inspect layouts by visualizing the box model",
"keywords": [
"storybook-addons",
@ -71,7 +71,7 @@
"tiny-invariant": "^1.3.1"
},
"devDependencies": {
"@storybook/icons": "^1.2.10",
"@storybook/icons": "^1.2.12",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"typescript": "^5.3.2"

4
code/addons/onboarding/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-onboarding",
"version": "8.4.0-alpha.2",
"version": "8.4.0-beta.1",
"description": "Storybook Addon Onboarding - Introduces a new onboarding experience",
"keywords": [
"storybook-addons",
@ -49,7 +49,7 @@
},
"devDependencies": {
"@radix-ui/react-dialog": "^1.0.5",
"@storybook/icons": "^1.2.10",
"@storybook/icons": "^1.2.12",
"@storybook/react": "workspace:*",
"framer-motion": "^11.0.3",
"react": "^18.2.0",

4
code/addons/outline/README.md
View File

@ -6,13 +6,13 @@ Storybook Addon Outline can be used for visually debugging CSS layout and alignm
## Usage
Requires Storybook 6.1 or later. Outline is part of [essentials](https://storybook.js.org/docs/react/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run:
Requires Storybook 6.1 or later. Outline is part of [essentials](https://storybook.js.org/docs/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run:
```sh
npm i -D @storybook/addon-outline
```
Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/#configure-your-storybook-project):
Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/configure#configure-your-storybook-project):
```js
export default {

4
code/addons/outline/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-outline",
"version": "8.4.0-alpha.2",
"version": "8.4.0-beta.1",
"description": "Outline all elements with CSS to help with layout placement and alignment",
"keywords": [
"storybook-addons",
@ -61,7 +61,7 @@
"ts-dedent": "^2.0.0"
},
"devDependencies": {
"@storybook/icons": "^1.2.10",
"@storybook/icons": "^1.2.12",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"typescript": "^5.3.2"

4
code/addons/storysource/README.md
View File

@ -2,7 +2,7 @@
This addon is used to show stories source in the addon panel.
[Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support)
[Framework Support](https://storybook.js.org/docs/configure/integration/frameworks-feature-support)
![Storysource Demo](https://raw.githubusercontent.com/storybookjs/storybook/next/code/addons/storysource/docs/demo.gif)
@ -56,7 +56,7 @@ To customize the `source-loader`, pass `loaderOptions`. Valid configurations are
## Theming
Storysource will automatically use the light or dark syntax theme based on your storybook theme. See [Theming Storybook](https://storybook.js.org/docs/react/configure/theming) for more information.
Storysource will automatically use the light or dark syntax theme based on your storybook theme. See [Theming Storybook](https://storybook.js.org/docs/configure/user-interface/theming) for more information.
![Storysource Light/Dark Themes](https://raw.githubusercontent.com/storybookjs/storybook/next/code/addons/storysource/docs/theming-light-dark.png)

2
code/addons/storysource/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-storysource",
"version": "8.4.0-alpha.2",
"version": "8.4.0-beta.1",
"description": "View a story’s source code to see how it works and paste into your app",
"keywords": [
"addon",

1
code/addons/test/manager.js Normal file
View File

@ -0,0 +1 @@
import './dist/manager';

95
code/addons/test/package.json
View File

@ -1,12 +1,13 @@
{
"name": "@storybook/experimental-addon-test",
"version": "8.4.0-alpha.2",
"version": "8.4.0-beta.1",
"description": "Integrate Vitest with Storybook",
"keywords": [
"storybook-addons",
"addon-test",
"vitest",
"testing"
"testing",
"test"
],
"homepage": "https://github.com/storybookjs/storybook/tree/next/code/addons/test",
"bugs": {
@ -22,39 +23,43 @@
"url": "https://opencollective.com/storybook"
},
"license": "MIT",
"type": "module",
"exports": {
".": {
"types": "./dist/index.d.ts",
"import": "./dist/index.js",
"require": "./dist/index.cjs"
"import": "./dist/index.mjs",
"require": "./dist/index.js"
},
"./vitest-plugin": {
"types": "./dist/vitest-plugin/index.d.ts",
"import": "./dist/vitest-plugin/index.js",
"require": "./dist/vitest-plugin/index.cjs"
"import": "./dist/vitest-plugin/index.mjs",
"require": "./dist/vitest-plugin/index.js"
},
"./internal/global-setup": {
"types": "./dist/vitest-plugin/global-setup.d.ts",
"import": "./dist/vitest-plugin/global-setup.js",
"require": "./dist/vitest-plugin/global-setup.cjs"
"import": "./dist/vitest-plugin/global-setup.mjs",
"require": "./dist/vitest-plugin/global-setup.js"
},
"./internal/setup-file": {
"types": "./dist/vitest-plugin/setup-file.d.ts",
"import": "./dist/vitest-plugin/setup-file.js"
"import": "./dist/vitest-plugin/setup-file.mjs"
},
"./internal/test-utils": {
"types": "./dist/vitest-plugin/test-utils.d.ts",
"import": "./dist/vitest-plugin/test-utils.js",
"require": "./dist/vitest-plugin/test-utils.cjs"
"import": "./dist/vitest-plugin/test-utils.mjs",
"require": "./dist/vitest-plugin/test-utils.js"
},
"./preview": {
"types": "./dist/preview.d.ts",
"import": "./dist/preview.mjs",
"require": "./dist/preview.js"
},
"./manager": "./dist/manager.js",
"./preset": "./dist/preset.cjs",
"./postinstall": "./dist/postinstall.cjs",
"./preset": "./dist/preset.js",
"./postinstall": "./dist/postinstall.js",
"./package.json": "./package.json"
},
"main": "dist/index.cjs",
"module": "dist/index.js",
"main": "dist/index.js",
"module": "dist/index.mjs",
"types": "dist/index.d.ts",
"files": [
"dist/**/*",
@ -70,22 +75,55 @@
"prep": "jiti ../../../scripts/prepare/addon-bundle.ts"
},
"dependencies": {
"@storybook/csf": "^0.1.11"
"@storybook/csf": "^0.1.11",
"@storybook/global": "^5.0.0",
"@storybook/icons": "^1.2.12",
"@storybook/instrumenter": "workspace:*",
"@storybook/test": "workspace:*",
"@storybook/theming": "workspace:*",
"polished": "^4.2.2",
"prompts": "^2.4.0",
"ts-dedent": "^2.2.0"
},
"devDependencies": {
"@devtools-ds/object-inspector": "^1.1.2",
"@storybook/icons": "^1.2.12",
"@types/node": "^22.0.0",
"@types/semver": "^7",
"@vitest/browser": "^2.0.0",
"@vitest/browser": "^2.1.3",
"@vitest/runner": "^2.1.3",
"ansi-to-html": "^0.7.2",
"boxen": "^8.0.1",
"es-toolkit": "^1.22.0",
"execa": "^8.0.1",
"find-up": "^7.0.0",
"formik": "^2.2.9",
"picocolors": "^1.1.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"semver": "^7.6.3",
"tinyrainbow": "^1.2.0",
"slash": "^5.0.0",
"strip-ansi": "^7.1.0",
"ts-dedent": "^2.2.0",
"vitest": "^2.0.0"
"typescript": "^5.3.2",
"vitest": "^2.1.3"
},
"peerDependencies": {
"@vitest/browser": "^2.0.0",
"@vitest/browser": "^2.1.1",
"@vitest/runner": "^2.1.1",
"storybook": "workspace:^",
"vitest": "^2.0.0"
"vitest": "^2.1.1"
},
"peerDependenciesMeta": {
"@vitest/browser": {
"optional": true
},
"@vitest/runner": {
"optional": true
},
"vitest": {
"optional": true
}
},
"publishConfig": {
"access": "public"
@ -99,11 +137,22 @@
"managerEntries": [
"./src/manager.tsx"
],
"previewEntries": [
"./src/preview.ts"
],
"nodeEntries": [
"./src/preset.ts",
"./src/vitest-plugin/index.ts",
"./src/vitest-plugin/global-setup.ts",
"./src/postinstall.ts"
"./src/postinstall.ts",
"./src/node/vitest.ts"
]
},
"storybook": {
"displayName": "Test",
"unsupportedFrameworks": [
"react-native"
],
"icon": "https://user-images.githubusercontent.com/263385/101991666-479cc600-3c7c-11eb-837b-be4e5ffa1bb8.png"
}
}

10
code/addons/test/preset.js Normal file
View File

@ -0,0 +1,10 @@
const { checkActionsLoaded } = require('./dist/preset');
function previewAnnotations(entry = [], options) {
checkActionsLoaded(options.configDir);
return entry;
}
module.exports = {
previewAnnotations,
};

1
code/addons/test/preview.js Normal file
View File

@ -0,0 +1 @@
export * from './dist/preview';

292
code/addons/test/src/Panel.test.ts Normal file
View File

@ -0,0 +1,292 @@
// @vitest-environment happy-dom
import { describe, expect, it } from 'vitest';
import { type Call, CallStates, type LogItem } from '@storybook/instrumenter';
import { getInteractions } from './Panel';
describe('Panel', () => {
describe('getInteractions', () => {
const log: LogItem[] = [
{
callId: 'story--id [4] findByText',
status: CallStates.DONE,
ancestors: [],
},
{
callId: 'story--id [5] click',
status: CallStates.DONE,
ancestors: [],
},
{
callId: 'story--id [6] waitFor',
status: CallStates.DONE,
ancestors: [],
},
{
callId: 'story--id [6] waitFor [2] toHaveBeenCalledWith',
status: CallStates.DONE,
ancestors: ['story--id [6] waitFor'],
},
];
const calls = new Map<Call['id'], Call>(
[
{
id: 'story--id [0] action',
storyId: 'story--id',
ancestors: [],
cursor: 0,
path: [],
method: 'action',
args: [{ __function__: { name: 'onSubmit' } }],
interceptable: false,
retain: true,
},
{
id: 'story--id [1] action',
storyId: 'story--id',
ancestors: [],
cursor: 1,
path: [],
method: 'action',
args: [{ __function__: { name: 'onTransactionStart' } }],
interceptable: false,
retain: true,
},
{
id: 'story--id [2] action',
storyId: 'story--id',
ancestors: [],
cursor: 2,
path: [],
method: 'action',
args: [{ __function__: { name: 'onTransactionEnd' } }],
interceptable: false,
retain: true,
},
{
id: 'story--id [3] within',
storyId: 'story--id',
ancestors: [],
cursor: 3,
path: [],
method: 'within',
args: [{ __element__: { localName: 'div', id: 'root', innerText: 'Click' } }],
interceptable: false,
retain: false,
},
{
id: 'story--id [4] findByText',
storyId: 'story--id',
ancestors: [],
cursor: 4,
path: [{ __callId__: 'story--id [3] within' }],
method: 'findByText',
args: ['Click'],
interceptable: true,
retain: false,
},
{
id: 'story--id [5] click',
storyId: 'story--id',
ancestors: [],
cursor: 5,
path: ['userEvent'],
method: 'click',
args: [{ __element__: { localName: 'button', innerText: 'Click' } }],
interceptable: true,
retain: false,
},
{
id: 'story--id [6] waitFor [0] expect',
storyId: 'story--id',
ancestors: ['story--id [6] waitFor'],
cursor: 0,
path: [],
method: 'expect',
args: [{ __callId__: 'story--id [0] action', retain: true }],
interceptable: true,
retain: false,
},
{
id: 'story--id [6] waitFor [1] stringMatching',
storyId: 'story--id',
ancestors: ['story--id [6] waitFor'],
cursor: 1,
path: ['expect'],
method: 'stringMatching',
args: [{ __regexp__: { flags: 'gi', source: '([A-Z])\\w+' } }],
interceptable: false,
retain: false,
},
{
id: 'story--id [6] waitFor [2] toHaveBeenCalledWith',
storyId: 'story--id',
ancestors: ['story--id [6] waitFor'],
cursor: 2,
path: [{ __callId__: 'story--id [6] waitFor [0] expect' }],
method: 'toHaveBeenCalledWith',
args: [{ __callId__: 'story--id [6] waitFor [1] stringMatching', retain: false }],
interceptable: true,
retain: false,
},
{
id: 'story--id [6] waitFor',
storyId: 'story--id',
ancestors: [],
cursor: 6,
path: [],
method: 'waitFor',
args: [{ __function__: { name: '' } }],
interceptable: true,
retain: false,
},
].map((v) => [v.id, v])
);
const collapsed = new Set<Call['id']>();
const setCollapsed = () => {};
it('returns list of interactions', () => {
expect(getInteractions({ log, calls, collapsed, setCollapsed })).toEqual([
{
...calls.get('story--id [4] findByText'),
status: CallStates.DONE,
childCallIds: undefined,
isHidden: false,
isCollapsed: false,
toggleCollapsed: expect.any(Function),
},
{
...calls.get('story--id [5] click'),
status: CallStates.DONE,
childCallIds: undefined,
isHidden: false,
isCollapsed: false,
toggleCollapsed: expect.any(Function),
},
{
...calls.get('story--id [6] waitFor'),
status: CallStates.DONE,
childCallIds: ['story--id [6] waitFor [2] toHaveBeenCalledWith'],
isHidden: false,
isCollapsed: false,
toggleCollapsed: expect.any(Function),
},
{
...calls.get('story--id [6] waitFor [2] toHaveBeenCalledWith'),
status: CallStates.DONE,
childCallIds: undefined,
isHidden: false,
isCollapsed: false,
toggleCollapsed: expect.any(Function),
},
]);
});
it('hides calls for which the parent is collapsed', () => {
const withCollapsed = new Set<Call['id']>(['story--id [6] waitFor']);
expect(getInteractions({ log, calls, collapsed: withCollapsed, setCollapsed })).toEqual([
expect.objectContaining({
...calls.get('story--id [4] findByText'),
childCallIds: undefined,
isCollapsed: false,
isHidden: false,
}),
expect.objectContaining({
...calls.get('story--id [5] click'),
childCallIds: undefined,
isCollapsed: false,
isHidden: false,
}),
expect.objectContaining({
...calls.get('story--id [6] waitFor'),
childCallIds: ['story--id [6] waitFor [2] toHaveBeenCalledWith'],
isCollapsed: true,
isHidden: false,
}),
expect.objectContaining({
...calls.get('story--id [6] waitFor [2] toHaveBeenCalledWith'),
childCallIds: undefined,
isCollapsed: false,
isHidden: true,
}),
]);
});
it('uses status from log', () => {
const withError = log.slice(0, 3).concat({ ...log[3], status: CallStates.ERROR });
expect(getInteractions({ log: withError, calls, collapsed, setCollapsed })).toEqual([
expect.objectContaining({
id: 'story--id [4] findByText',
status: CallStates.DONE,
}),
expect.objectContaining({
id: 'story--id [5] click',
status: CallStates.DONE,
}),
expect.objectContaining({
id: 'story--id [6] waitFor',
status: CallStates.DONE,
}),
expect.objectContaining({
id: 'story--id [6] waitFor [2] toHaveBeenCalledWith',
status: CallStates.ERROR,
}),
]);
});
it('keeps status active for errored child calls while parent is active', () => {
const withActiveError = log.slice(0, 2).concat([
{ ...log[2], status: CallStates.ACTIVE },
{ ...log[3], status: CallStates.ERROR },
]);
expect(getInteractions({ log: withActiveError, calls, collapsed, setCollapsed })).toEqual([
expect.objectContaining({
id: 'story--id [4] findByText',
status: CallStates.DONE,
}),
expect.objectContaining({
id: 'story--id [5] click',
status: CallStates.DONE,
}),
expect.objectContaining({
id: 'story--id [6] waitFor',
status: CallStates.ACTIVE,
}),
expect.objectContaining({
id: 'story--id [6] waitFor [2] toHaveBeenCalledWith',
status: CallStates.ACTIVE, // not ERROR
}),
]);
});
it('does not override child status other than error for active parent', () => {
const withActiveWaiting = log.slice(0, 2).concat([
{ ...log[2], status: CallStates.ACTIVE },
{ ...log[3], status: CallStates.WAITING },
]);
expect(getInteractions({ log: withActiveWaiting, calls, collapsed, setCollapsed })).toEqual([
expect.objectContaining({
id: 'story--id [4] findByText',
status: CallStates.DONE,
}),
expect.objectContaining({
id: 'story--id [5] click',
status: CallStates.DONE,
}),
expect.objectContaining({
id: 'story--id [6] waitFor',
status: CallStates.ACTIVE,
}),
expect.objectContaining({
id: 'story--id [6] waitFor [2] toHaveBeenCalledWith',
status: CallStates.WAITING,
}),
]);
});
});
});

298
code/addons/test/src/Panel.tsx Normal file
View File

@ -0,0 +1,298 @@
import type { Dispatch, SetStateAction } from 'react';
import React, { Fragment, memo, useEffect, useMemo, useRef, useState } from 'react';
import {
FORCE_REMOUNT,
PLAY_FUNCTION_THREW_EXCEPTION,
STORY_RENDER_PHASE_CHANGED,
STORY_THREW_EXCEPTION,
UNHANDLED_ERRORS_WHILE_PLAYING,
} from 'storybook/internal/core-events';
import {
useAddonState,
useChannel,
useParameter,
useStorybookState,
} from 'storybook/internal/manager-api';
import { global } from '@storybook/global';
import { type Call, CallStates, EVENTS, type LogItem } from '@storybook/instrumenter';
import type { API_StatusValue } from '@storybook/types';
import { InteractionsPanel } from './components/InteractionsPanel';
import { ADDON_ID, TEST_PROVIDER_ID } from './constants';
interface Interaction extends Call {
status: Call['status'];
childCallIds: Call['id'][];
isHidden: boolean;
isCollapsed: boolean;
toggleCollapsed: () => void;
}
const INITIAL_CONTROL_STATES = {
start: false,
back: false,
goto: false,
next: false,
end: false,
};
const statusMap: Record<CallStates, API_StatusValue> = {
[CallStates.DONE]: 'success',
[CallStates.ERROR]: 'error',
[CallStates.ACTIVE]: 'pending',
[CallStates.WAITING]: 'pending',
};
export const getInteractions = ({
log,
calls,
collapsed,
setCollapsed,
}: {
log: LogItem[];
calls: Map<Call['id'], Call>;
collapsed: Set<Call['id']>;
setCollapsed: Dispatch<SetStateAction<Set<string>>>;
}) => {
const callsById = new Map<Call['id'], Call>();
const childCallMap = new Map<Call['id'], Call['id'][]>();
return log
.map<Call & { isHidden: boolean }>(({ callId, ancestors, status }) => {
let isHidden = false;
ancestors.forEach((ancestor) => {
if (collapsed.has(ancestor)) {
isHidden = true;
}
childCallMap.set(ancestor, (childCallMap.get(ancestor) || []).concat(callId));
});
return { ...calls.get(callId), status, isHidden };
})
.map<Interaction>((call) => {
const status =
call.status === CallStates.ERROR &&
callsById.get(call.ancestors.slice(-1)[0])?.status === CallStates.ACTIVE
? CallStates.ACTIVE
: call.status;
callsById.set(call.id, { ...call, status });
return {
...call,
status,
childCallIds: childCallMap.get(call.id),
isCollapsed: collapsed.has(call.id),
toggleCollapsed: () =>
setCollapsed((ids) => {
if (ids.has(call.id)) {
ids.delete(call.id);
} else {
ids.add(call.id);
}
return new Set(ids);
}),
};
});
};
export const Panel = memo<{ storyId: string }>(function PanelMemoized({ storyId }) {
const { status: storyStatuses } = useStorybookState();
// shared state
const [addonState, set] = useAddonState(ADDON_ID, {
controlStates: INITIAL_CONTROL_STATES,
isErrored: false,
pausedAt: undefined,
interactions: [],
isPlaying: false,
hasException: false,
caughtException: undefined,
interactionsCount: 0,
unhandledErrors: undefined,
});
// local state
const [scrollTarget, setScrollTarget] = useState<HTMLElement | undefined>(undefined);
const [collapsed, setCollapsed] = useState<Set<Call['id']>>(new Set());
const {
controlStates = INITIAL_CONTROL_STATES,
isErrored = false,
pausedAt = undefined,
interactions = [],
isPlaying = false,
caughtException = undefined,
unhandledErrors = undefined,
} = addonState;
// Log and calls are tracked in a ref so we don't needlessly rerender.
const log = useRef<LogItem[]>([]);
const calls = useRef<Map<Call['id'], Omit<Call, 'status'>>>(new Map());
const setCall = ({ status, ...call }: Call) => calls.current.set(call.id, call);
const endRef = useRef();
useEffect(() => {
let observer: IntersectionObserver;
if (global.IntersectionObserver) {
observer = new global.IntersectionObserver(
([end]: any) => setScrollTarget(end.isIntersecting ? undefined : end.target),
{ root: global.document.querySelector('#panel-tab-content') }
);
if (endRef.current) {
observer.observe(endRef.current);
}
}
return () => observer?.disconnect();
}, []);
const emit = useChannel(
{
[EVENTS.CALL]: setCall,
[EVENTS.SYNC]: (payload) => {
set((s) => {
const list = getInteractions({
log: payload.logItems,
calls: calls.current,
collapsed,
setCollapsed,
});
return {
...s,
controlStates: payload.controlStates,
pausedAt: payload.pausedAt,
interactions: list,
interactionsCount: list.filter(({ method }) => method !== 'step').length,
};
});
log.current = payload.logItems;
},
[STORY_RENDER_PHASE_CHANGED]: (event) => {
if (event.newPhase === 'preparing') {
set({
controlStates: INITIAL_CONTROL_STATES,
isErrored: false,
pausedAt: undefined,
interactions: [],
isPlaying: false,
hasException: false,
caughtException: undefined,
interactionsCount: 0,
unhandledErrors: undefined,
});
return;
}
set((s) => {
const newState: typeof s = {
...s,
isPlaying: event.newPhase === 'playing',
pausedAt: undefined,
...(event.newPhase === 'rendering'
? {
isErrored: false,
caughtException: undefined,
}
: {}),
};
return newState;
});
},
[STORY_THREW_EXCEPTION]: () => {
set((s) => ({ ...s, isErrored: true, hasException: true }));
},
[PLAY_FUNCTION_THREW_EXCEPTION]: (e) => {
set((s) => ({ ...s, caughtException: e, hasException: true }));
},
[UNHANDLED_ERRORS_WHILE_PLAYING]: (e) => {
set((s) => ({ ...s, unhandledErrors: e, hasException: true }));
},
},
[collapsed]
);
useEffect(() => {
set((s) => {
const list = getInteractions({
log: log.current,
calls: calls.current,
collapsed,
setCollapsed,
});
return {
...s,
interactions: list,
interactionsCount: list.filter(({ method }) => method !== 'step').length,
};
});
}, [collapsed]);
const controls = useMemo(
() => ({
start: () => emit(EVENTS.START, { storyId }),
back: () => emit(EVENTS.BACK, { storyId }),
goto: (callId: string) => emit(EVENTS.GOTO, { storyId, callId }),
next: () => emit(EVENTS.NEXT, { storyId }),
end: () => emit(EVENTS.END, { storyId }),
rerun: () => {
emit(FORCE_REMOUNT, { storyId });
},
}),
[storyId]
);
const storyFilePath = useParameter('fileName', '');
const [fileName] = storyFilePath.toString().split('/').slice(-1);
const scrollToTarget = () => scrollTarget?.scrollIntoView({ behavior: 'smooth', block: 'end' });
const hasException =
!!caughtException ||
!!unhandledErrors ||
interactions.some((v) => v.status === CallStates.ERROR);
const storyStatus = storyStatuses[storyId]?.[TEST_PROVIDER_ID];
const browserTestStatus = React.useMemo<CallStates | null>(() => {
if (!isPlaying && (interactions.length > 0 || hasException)) {
return hasException ? CallStates.ERROR : CallStates.DONE;
}
return isPlaying ? CallStates.ACTIVE : null;
}, [isPlaying, interactions, hasException]);
const hasResultMismatch = React.useMemo(() => {
return (
browserTestStatus !== null &&
browserTestStatus !== CallStates.ACTIVE &&
storyStatus?.status !== undefined &&
statusMap[browserTestStatus] !== storyStatus.status
);
}, [browserTestStatus, storyStatus]);
if (isErrored) {
return <Fragment key="component-tests" />;
}
return (
<Fragment key="component-tests">
<InteractionsPanel
hasResultMismatch={hasResultMismatch}
browserTestStatus={browserTestStatus}
calls={calls.current}
controls={controls}
controlStates={controlStates}
interactions={interactions}
fileName={fileName}
hasException={hasException}
caughtException={caughtException}
unhandledErrors={unhandledErrors}
isPlaying={isPlaying}
pausedAt={pausedAt}
endRef={endRef}
onScrollToEnd={scrollTarget && scrollToTarget}
storyId={storyId}
testRunId={storyStatus?.data?.testRunId}
/>
</Fragment>
);
});

69
code/addons/test/src/components/EmptyState.tsx Normal file
View File

@ -0,0 +1,69 @@
import React, { useEffect, useState } from 'react';
import { EmptyTabContent, Link } from 'storybook/internal/components';
import { useStorybookApi } from 'storybook/internal/manager-api';
import { styled } from 'storybook/internal/theming';
import { DocumentIcon, VideoIcon } from '@storybook/icons';
import { DOCUMENTATION_LINK, TUTORIAL_VIDEO_LINK } from '../constants';
const Links = styled.div(({ theme }) => ({
display: 'flex',
fontSize: theme.typography.size.s2 - 1,
gap: 25,
}));
const Divider = styled.div(({ theme }) => ({
width: 1,
height: 16,
backgroundColor: theme.appBorderColor,
}));
export const Empty = () => {
const [isLoading, setIsLoading] = useState(true);
const api = useStorybookApi();
const docsUrl = api.getDocsUrl({
subpath: DOCUMENTATION_LINK,
versioned: true,
renderer: true,
});
// We are adding a small delay to avoid flickering when the story is loading.
// It takes a bit of time for the controls to appear, so we don't want
// to show the empty state for a split second.
useEffect(() => {
const load = setTimeout(() => {
setIsLoading(false);
}, 100);
return () => clearTimeout(load);
}, []);
if (isLoading) {
return null;
}
return (
<EmptyTabContent
title="Interaction testing"
description={
<>
Interaction tests allow you to verify the functional aspects of UIs. Write a play function
for your story and you&apos;ll see it run here.
</>
}
footer={
<Links>
<Link href={TUTORIAL_VIDEO_LINK} target="_blank" withArrow>
<VideoIcon /> Watch 8m video
</Link>
<Divider />
<Link href={docsUrl} target="_blank" withArrow>
<DocumentIcon /> Read docs
</Link>
</Links>
}
/>
);
};

82
code/addons/test/src/components/GlobalErrorModal.stories.tsx Normal file
View File

@ -0,0 +1,82 @@
import React, { useState } from 'react';
import { ManagerContext } from 'storybook/internal/manager-api';
import type { Meta, StoryObj } from '@storybook/react';
import { expect, fn, userEvent, within } from '@storybook/test';
import dedent from 'ts-dedent';
import { GlobalErrorModal } from './GlobalErrorModal';
type Story = StoryObj<typeof meta>;
const managerContext: any = {
state: {},
api: {
getDocsUrl: fn(({ subpath }) => `https://storybook.js.org/docs/${subpath}`).mockName(
'api::getDocsUrl'
),
},
};
const meta = {
component: GlobalErrorModal,
decorators: [
(storyFn) => (
<ManagerContext.Provider value={managerContext}>
<div
style={{
width: '100%',
minWidth: '1200px',
height: '800px',
background:
'repeating-linear-gradient(45deg, #000000, #ffffff 50px, #ffffff 50px, #ffffff 80px)',
}}
>
{storyFn()}
</div>
</ManagerContext.Provider>
),
],
args: {
onRerun: fn(),
onClose: fn(),
open: false,
},
} satisfies Meta<typeof GlobalErrorModal>;
export default meta;
export const Default: Story = {
args: {
error: dedent`
ReferenceError: FAIL is not defined
at Constraint.execute (the-best-file.js:525:2)
at Constraint.recalculate (the-best-file.js:424:21)
at Planner.addPropagate (the-best-file.js:701:6)
at Constraint.satisfy (the-best-file.js:184:15)
at Planner.incrementalAdd (the-best-file.js:591:21)
at Constraint.addConstraint (the-best-file.js:162:10)
at Constraint.BinaryConstraint (the-best-file.js:346:7)
at Constraint.EqualityConstraint (the-best-file.js:515:38)
at chainTest (the-best-file.js:807:6)
at deltaBlue (the-best-file.js:879:2)`,
},
render: (props) => {
const [isOpen, setOpen] = useState(false);
return (
<>
<GlobalErrorModal {...props} open={isOpen} />
<button onClick={() => setOpen(true)}>Open modal</button>
</>
);
},
play: async ({ canvasElement }) => {
const canvas = within(canvasElement.parentElement!);
const button = canvas.getByText('Open modal');
await userEvent.click(button);
await expect(canvas.findByText('Storybook Tests error details')).resolves.toBeInTheDocument();
},
};

91
code/addons/test/src/components/GlobalErrorModal.tsx Normal file
View File

@ -0,0 +1,91 @@
import React from 'react';
import { Button, IconButton, Modal } from 'storybook/internal/components';
import { useStorybookApi } from 'storybook/internal/manager-api';
import { CloseIcon, SyncIcon } from '@storybook/icons';
import { styled } from '@storybook/theming';
import { DOCUMENTATION_FATAL_ERROR_LINK } from '../constants';
interface GlobalErrorModalProps {
error: string;
open: boolean;
onClose: () => void;
onRerun: () => void;
}
const ModalBar = styled.div({
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
padding: '6px 6px 6px 20px',
});
const ModalActionBar = styled.div({
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
});
const ModalTitle = styled.div(({ theme: { typography } }) => ({
fontSize: typography.size.s2,
fontWeight: typography.weight.bold,
}));
const ModalStackTrace = styled.pre(({ theme }) => ({
whiteSpace: 'pre-wrap',
overflow: 'auto',
maxHeight: '60vh',
margin: 0,
padding: `20px`,
fontFamily: theme.typography.fonts.mono,
fontSize: '12px',
borderTop: `1px solid ${theme.appBorderColor}`,
borderRadius: 0,
}));
const TroubleshootLink = styled.a(({ theme }) => ({
color: theme.color.defaultText,
}));
export function GlobalErrorModal({ onRerun, onClose, error, open }: GlobalErrorModalProps) {
const api = useStorybookApi();
const troubleshootURL = api.getDocsUrl({
subpath: DOCUMENTATION_FATAL_ERROR_LINK,
versioned: true,
renderer: true,
});
return (
<Modal onEscapeKeyDown={onClose} onInteractOutside={onClose} open={open}>
<ModalBar>
<ModalTitle>Storybook Tests error details</ModalTitle>
<ModalActionBar>
<Button onClick={onRerun} variant="ghost">
<SyncIcon />
Rerun
</Button>
<Button variant="ghost" asChild>
<a target="_blank" href={troubleshootURL} rel="noreferrer">
Troubleshoot
</a>
</Button>
<IconButton onClick={onClose}>
<CloseIcon />
</IconButton>
</ModalActionBar>
</ModalBar>
<ModalStackTrace>
{error}
<br />
<br />
Troubleshoot:{' '}
<TroubleshootLink target="_blank" href={troubleshootURL}>
{troubleshootURL}
</TroubleshootLink>
</ModalStackTrace>
</Modal>
);
}

63
code/addons/test/src/components/Interaction.stories.tsx Normal file
View File

@ -0,0 +1,63 @@
import { CallStates } from '@storybook/instrumenter';
import type { Meta, StoryObj } from '@storybook/react';
import { expect, userEvent, within } from '@storybook/test';
import { getCalls } from '../mocks';
import { Interaction } from './Interaction';
import SubnavStories from './Subnav.stories';
type Story = StoryObj<typeof Interaction>;
export default {
title: 'Interaction',
component: Interaction,
args: {
callsById: new Map(getCalls(CallStates.DONE).map((call) => [call.id, call])),
controls: SubnavStories.args.controls,
controlStates: SubnavStories.args.controlStates,
},
} as Meta<typeof Interaction>;
export const Active: Story = {
args: {
call: getCalls(CallStates.ACTIVE).slice(-1)[0],
},
};
export const Waiting: Story = {
args: {
call: getCalls(CallStates.WAITING).slice(-1)[0],
},
};
export const Failed: Story = {
args: {
call: getCalls(CallStates.ERROR).slice(-1)[0],
},
};
export const Done: Story = {
args: {
call: getCalls(CallStates.DONE).slice(-1)[0],
},
};
export const WithParent: Story = {
args: {
call: { ...getCalls(CallStates.DONE).slice(-1)[0], ancestors: ['parent-id'] },
},
};
export const Disabled: Story = {
args: { ...Done.args, controlStates: { ...SubnavStories.args.controlStates, goto: false } },
};
export const Hovered: Story = {
...Done,
globals: { sb_theme: 'light' },
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
await userEvent.hover(canvas.getByRole('button'));
await expect(canvas.getByTestId('icon-active')).toBeInTheDocument();
},
};

208
code/addons/test/src/components/Interaction.tsx Normal file
View File

@ -0,0 +1,208 @@
import * as React from 'react';
import { IconButton, TooltipNote, WithTooltip } from 'storybook/internal/components';
import { styled, typography } from 'storybook/internal/theming';
import { ListUnorderedIcon } from '@storybook/icons';
import { type Call, CallStates, type ControlStates } from '@storybook/instrumenter';
import { transparentize } from 'polished';
import { isChaiError, isJestError, useAnsiToHtmlFilter } from '../utils';
import type { Controls } from './InteractionsPanel';
import { MatcherResult } from './MatcherResult';
import { MethodCall } from './MethodCall';
import { StatusIcon } from './StatusIcon';
const MethodCallWrapper = styled.div(() => ({
fontFamily: typography.fonts.mono,
fontSize: typography.size.s1,
overflowWrap: 'break-word',
inlineSize: 'calc( 100% - 40px )',
}));
const RowContainer = styled('div', {
shouldForwardProp: (prop) => !['call', 'pausedAt'].includes(prop.toString()),
})<{ call: Call; pausedAt: Call['id'] }>(
({ theme, call }) => ({
position: 'relative',
display: 'flex',
flexDirection: 'column',
borderBottom: `1px solid ${theme.appBorderColor}`,
fontFamily: typography.fonts.base,
fontSize: 13,
...(call.status === CallStates.ERROR && {
backgroundColor:
theme.base === 'dark'
? transparentize(0.93, theme.color.negative)
: theme.background.warning,
}),
paddingLeft: call.ancestors.length * 20,
}),
({ theme, call, pausedAt }) =>
pausedAt === call.id && {
'&::before': {
content: '""',
position: 'absolute',
top: -5,
zIndex: 1,
borderTop: '4.5px solid transparent',
borderLeft: `7px solid ${theme.color.warning}`,
borderBottom: '4.5px solid transparent',
},
'&::after': {
content: '""',
position: 'absolute',
top: -1,
zIndex: 1,
width: '100%',
borderTop: `1.5px solid ${theme.color.warning}`,
},
}
);
const RowHeader = styled.div<{ isInteractive: boolean }>(({ theme, isInteractive }) => ({
display: 'flex',
'&:hover': isInteractive ? {} : { background: theme.background.hoverable },
}));
const RowLabel = styled('button', {
shouldForwardProp: (prop) => !['call'].includes(prop.toString()),
})<React.ButtonHTMLAttributes<HTMLButtonElement> & { call: Call }>(({ theme, disabled, call }) => ({
flex: 1,
display: 'grid',
background: 'none',
border: 0,
gridTemplateColumns: '15px 1fr',
alignItems: 'center',
minHeight: 40,
margin: 0,
padding: '8px 15px',
textAlign: 'start',
cursor: disabled || call.status === CallStates.ERROR ? 'default' : 'pointer',
'&:focus-visible': {
outline: 0,
boxShadow: `inset 3px 0 0 0 ${
call.status === CallStates.ERROR ? theme.color.warning : theme.color.secondary
}`,
background: call.status === CallStates.ERROR ? 'transparent' : theme.background.hoverable,
},
'& > div': {
opacity: call.status === CallStates.WAITING ? 0.5 : 1,
},
}));
const RowActions = styled.div({
padding: 6,
});
export const StyledIconButton = styled(IconButton as any)(({ theme }) => ({
color: theme.textMutedColor,
margin: '0 3px',
}));
const Note = styled(TooltipNote)(({ theme }) => ({
fontFamily: theme.typography.fonts.base,
}));
const RowMessage = styled('div')(({ theme }) => ({
padding: '8px 10px 8px 36px',
fontSize: typography.size.s1,
color: theme.color.defaultText,
pre: {
margin: 0,
padding: 0,
},
}));
export const Exception = ({ exception }: { exception: Call['exception'] }) => {
const filter = useAnsiToHtmlFilter();
if (isJestError(exception)) {
return <MatcherResult {...exception} />;
}
if (isChaiError(exception)) {
return (
<RowMessage>
<MatcherResult
message={`${exception.message}${exception.diff ? `\n\n${exception.diff}` : ''}`}
style={{ padding: 0 }}
/>
<p>See the full stack trace in the browser console.</p>
</RowMessage>
);
}
const paragraphs = exception.message.split('\n\n');
const more = paragraphs.length > 1;
return (
<RowMessage>
<pre dangerouslySetInnerHTML={{ __html: filter.toHtml(paragraphs[0]) }}></pre>
{more && <p>See the full stack trace in the browser console.</p>}
</RowMessage>
);
};
export const Interaction = ({
call,
callsById,
controls,
controlStates,
childCallIds,
isHidden,
isCollapsed,
toggleCollapsed,
pausedAt,
}: {
call: Call;
callsById: Map<Call['id'], Call>;
controls: Controls;
controlStates: ControlStates;
childCallIds?: Call['id'][];
isHidden: boolean;
isCollapsed: boolean;
toggleCollapsed: () => void;
pausedAt?: Call['id'];
}) => {
const [isHovered, setIsHovered] = React.useState(false);
const isInteractive = !controlStates.goto || !call.interceptable || !!call.ancestors.length;
if (isHidden) {
return null;
}
return (
<RowContainer call={call} pausedAt={pausedAt}>
<RowHeader isInteractive={isInteractive}>
<RowLabel
aria-label="Interaction step"
call={call}
onClick={() => controls.goto(call.id)}
disabled={isInteractive}
onMouseEnter={() => controlStates.goto && setIsHovered(true)}
onMouseLeave={() => controlStates.goto && setIsHovered(false)}
>
<StatusIcon status={isHovered ? CallStates.ACTIVE : call.status} />
<MethodCallWrapper style={{ marginLeft: 6, marginBottom: 1 }}>
<MethodCall call={call} callsById={callsById} />
</MethodCallWrapper>
</RowLabel>
<RowActions>
{childCallIds?.length > 0 && (
<WithTooltip
hasChrome={false}
tooltip={<Note note={`${isCollapsed ? 'Show' : 'Hide'} interactions`} />}
>
<StyledIconButton onClick={toggleCollapsed}>
<ListUnorderedIcon />
</StyledIconButton>
</WithTooltip>
)}
</RowActions>
</RowHeader>
{call.status === CallStates.ERROR && call.exception?.callId === call.id && (
<Exception exception={call.exception} />
)}
</RowContainer>
);
};

159
code/addons/test/src/components/InteractionsPanel.stories.tsx Normal file
View File

@ -0,0 +1,159 @@
import React from 'react';
import { ManagerContext } from 'storybook/internal/manager-api';
import { styled } from 'storybook/internal/theming';
import { CallStates } from '@storybook/instrumenter';
import type { Meta, StoryObj } from '@storybook/react';
import { expect, fn, userEvent, waitFor, within } from '@storybook/test';
import { isChromatic } from '../../../../.storybook/isChromatic';
import { getCalls, getInteractions } from '../mocks';
import { InteractionsPanel } from './InteractionsPanel';
import SubnavStories from './Subnav.stories';
const StyledWrapper = styled.div(({ theme }) => ({
backgroundColor: theme.background.content,
color: theme.color.defaultText,
display: 'block',
height: '100%',
position: 'absolute',
left: 0,
right: 0,
bottom: 0,
overflow: 'auto',
}));
const interactions = getInteractions(CallStates.DONE);
const managerContext: any = {
state: {},
api: {
getDocsUrl: fn().mockName('api::getDocsUrl'),
emit: fn().mockName('api::emit'),
},
};
const meta = {
title: 'InteractionsPanel',
component: InteractionsPanel,
decorators: [
(Story: any) => (
<ManagerContext.Provider value={managerContext}>
<StyledWrapper id="panel-tab-content">
<Story />
</StyledWrapper>
</ManagerContext.Provider>
),
],
parameters: { layout: 'fullscreen' },
args: {
calls: new Map(getCalls(CallStates.DONE).map((call) => [call.id, call])),
controls: SubnavStories.args.controls,
controlStates: SubnavStories.args.controlStates,
interactions,
fileName: 'addon-interactions.stories.tsx',
hasException: false,
isPlaying: false,
onScrollToEnd: () => {},
endRef: null,
// prop for the AddonPanel used as wrapper of Panel
active: true,
storyId: 'story-id',
},
} as Meta<typeof InteractionsPanel>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Passing: Story = {
args: {
browserTestStatus: CallStates.DONE,
interactions: getInteractions(CallStates.DONE),
},
play: async ({ args, canvasElement }) => {
if (isChromatic()) {
return;
}
const canvas = within(canvasElement);
await waitFor(async () => {
await userEvent.click(canvas.getByLabelText('Go to start'));
await expect(args.controls.start).toHaveBeenCalled();
});
await waitFor(async () => {
await userEvent.click(canvas.getByLabelText('Go back'));
await expect(args.controls.back).toHaveBeenCalled();
});
await waitFor(async () => {
await userEvent.click(canvas.getByLabelText('Go forward'));
await expect(args.controls.next).not.toHaveBeenCalled();
});
await waitFor(async () => {
await userEvent.click(canvas.getByLabelText('Go to end'));
await expect(args.controls.end).not.toHaveBeenCalled();
});
await waitFor(async () => {
await userEvent.click(canvas.getByLabelText('Rerun'));
await expect(args.controls.rerun).toHaveBeenCalled();
});
},
};
export const Paused: Story = {
args: {
browserTestStatus: CallStates.ACTIVE,
isPlaying: true,
interactions: getInteractions(CallStates.WAITING),
controlStates: {
start: false,
back: false,
goto: true,
next: true,
end: true,
},
pausedAt: interactions[interactions.length - 1].id,
},
};
export const Playing: Story = {
args: {
browserTestStatus: CallStates.ACTIVE,
isPlaying: true,
interactions: getInteractions(CallStates.ACTIVE),
},
};
export const Failed: Story = {
args: {
browserTestStatus: CallStates.ERROR,
hasException: true,
interactions: getInteractions(CallStates.ERROR),
},
};
export const CaughtException: Story = {
args: {
browserTestStatus: CallStates.ERROR,
hasException: true,
interactions: [],
caughtException: new TypeError("Cannot read properties of undefined (reading 'args')"),
},
};
export const DiscrepancyResult: Story = {
args: {
...Failed.args,
hasResultMismatch: true,
},
};
export const Empty: Story = {
args: {
interactions: [],
},
};

193
code/addons/test/src/components/InteractionsPanel.tsx Normal file
View File

@ -0,0 +1,193 @@
import * as React from 'react';
import { styled } from 'storybook/internal/theming';
import type { StoryId } from 'storybook/internal/types';
import type { CallStates } from '@storybook/instrumenter';
import { type Call, type ControlStates } from '@storybook/instrumenter';
import { transparentize } from 'polished';
import { isTestAssertionError, useAnsiToHtmlFilter } from '../utils';
import { Empty } from './EmptyState';
import { Interaction } from './Interaction';
import { Subnav } from './Subnav';
import { TestDiscrepancyMessage } from './TestDiscrepancyMessage';
export interface Controls {
start: (args: any) => void;
back: (args: any) => void;
goto: (args: any) => void;
next: (args: any) => void;
end: (args: any) => void;
rerun: (args: any) => void;
}
interface InteractionsPanelProps {
controls: Controls;
controlStates: ControlStates;
interactions: (Call & {
status?: CallStates;
childCallIds: Call['id'][];
isHidden: boolean;
isCollapsed: boolean;
toggleCollapsed: () => void;
})[];
fileName?: string;
hasException?: boolean;
caughtException?: Error;
unhandledErrors?: SerializedError[];
isPlaying?: boolean;
pausedAt?: Call['id'];
calls: Map<string, any>;
endRef?: React.Ref<HTMLDivElement>;
onScrollToEnd?: () => void;
hasResultMismatch?: boolean;
browserTestStatus?: CallStates;
storyId: StoryId;
testRunId: string;
}
const Container = styled.div(({ theme }) => ({
height: '100%',
background: theme.background.content,
}));
const CaughtException = styled.div(({ theme }) => ({
borderBottom: `1px solid ${theme.appBorderColor}`,
backgroundColor:
theme.base === 'dark' ? transparentize(0.93, theme.color.negative) : theme.background.warning,
padding: 15,
fontSize: theme.typography.size.s2 - 1,
lineHeight: '19px',
}));
const CaughtExceptionCode = styled.code(({ theme }) => ({
margin: '0 1px',
padding: 3,
fontSize: theme.typography.size.s1 - 1,
lineHeight: 1,
verticalAlign: 'top',
background: 'rgba(0, 0, 0, 0.05)',
border: `1px solid ${theme.appBorderColor}`,
borderRadius: 3,
}));
const CaughtExceptionTitle = styled.div({
paddingBottom: 4,
fontWeight: 'bold',
});
const CaughtExceptionDescription = styled.p({
margin: 0,
padding: '0 0 20px',
});
const CaughtExceptionStack = styled.pre(({ theme }) => ({
margin: 0,
padding: 0,
'&:not(:last-child)': {
paddingBottom: 16,
},
fontSize: theme.typography.size.s1 - 1,
}));
export const InteractionsPanel: React.FC<InteractionsPanelProps> = React.memo(
function InteractionsPanel({
calls,
controls,
controlStates,
interactions,
fileName,
hasException,
caughtException,
unhandledErrors,
isPlaying,
pausedAt,
onScrollToEnd,
endRef,
hasResultMismatch,
browserTestStatus,
storyId,
testRunId,
}) {
const filter = useAnsiToHtmlFilter();
return (
<Container>
{hasResultMismatch && (
<TestDiscrepancyMessage
browserTestStatus={browserTestStatus}
storyId={storyId}
testRunId={testRunId}
/>
)}
{(interactions.length > 0 || hasException) && (
<Subnav
controls={controls}
controlStates={controlStates}
status={browserTestStatus}
storyFileName={fileName}
onScrollToEnd={onScrollToEnd}
/>
)}
<div aria-label="Interactions list">
{interactions.map((call) => (
<Interaction
key={call.id}
call={call}
callsById={calls}
controls={controls}
controlStates={controlStates}
childCallIds={call.childCallIds}
isHidden={call.isHidden}
isCollapsed={call.isCollapsed}
toggleCollapsed={call.toggleCollapsed}
pausedAt={pausedAt}
/>
))}
</div>
{caughtException && !isTestAssertionError(caughtException) && (
<CaughtException>
<CaughtExceptionTitle>
Caught exception in <CaughtExceptionCode>play</CaughtExceptionCode> function
</CaughtExceptionTitle>
<CaughtExceptionStack
data-chromatic="ignore"
dangerouslySetInnerHTML={{
__html: filter.toHtml(printSerializedError(caughtException)),
}}
></CaughtExceptionStack>
</CaughtException>
)}
{unhandledErrors && (
<CaughtException>
<CaughtExceptionTitle>Unhandled Errors</CaughtExceptionTitle>
<CaughtExceptionDescription>
Found {unhandledErrors.length} unhandled error{unhandledErrors.length > 1 ? 's' : ''}{' '}
while running the play function. This might cause false positive assertions. Resolve
unhandled errors or ignore unhandled errors with setting the
<CaughtExceptionCode>test.dangerouslyIgnoreUnhandledErrors</CaughtExceptionCode>{' '}
parameter to <CaughtExceptionCode>true</CaughtExceptionCode>.
</CaughtExceptionDescription>
{unhandledErrors.map((error, i) => (
<CaughtExceptionStack key={i} data-chromatic="ignore">
{printSerializedError(error)}
</CaughtExceptionStack>
))}
</CaughtException>
)}
<div ref={endRef} />
{!isPlaying && !caughtException && interactions.length === 0 && <Empty />}
</Container>
);
}
);
interface SerializedError {
name: string;
stack?: string;
message: string;
}
function printSerializedError(error: SerializedError) {
return error.stack || `${error.name}: ${error.message}`;
}

93
code/addons/test/src/components/List.tsx Normal file
View File

@ -0,0 +1,93 @@
import React, { Fragment, useState } from 'react';
import { convert, styled, themes } from 'storybook/internal/theming';
import { ChevronSmallDownIcon } from '@storybook/icons';
const ListWrapper = styled.ul({
listStyle: 'none',
fontSize: 14,
padding: 0,
margin: 0,
});
const Wrapper = styled.div({
display: 'flex',
width: '100%',
borderBottom: `1px solid ${convert(themes.light).appBorderColor}`,
'&:hover': {
background: convert(themes.light).background.hoverable,
},
});
const Icon = styled(ChevronSmallDownIcon)({
color: convert(themes.light).textMutedColor,
marginRight: 10,
transition: 'transform 0.1s ease-in-out',
alignSelf: 'center',
display: 'inline-flex',
});
const HeaderBar = styled.div({
padding: convert(themes.light).layoutMargin,
paddingLeft: convert(themes.light).layoutMargin - 3,
background: 'none',
color: 'inherit',
textAlign: 'left',
cursor: 'pointer',
borderLeft: '3px solid transparent',
width: '100%',
'&:focus': {
outline: '0 none',
borderLeft: `3px solid ${convert(themes.light).color.secondary}`,
},
});
const Description = styled.div({
padding: convert(themes.light).layoutMargin,
marginBottom: convert(themes.light).layoutMargin,
fontStyle: 'italic',
});
type Item = {
title: string;
description: string;
};
interface ListItemProps {
item: Item;
}
export const ListItem: React.FC<ListItemProps> = ({ item }) => {
const [open, onToggle] = useState(false);
return (
<Fragment>
<Wrapper>
<HeaderBar onClick={() => onToggle(!open)} role="button">
<Icon
color={convert(themes.light).appBorderColor}
style={{
transform: `rotate(${open ? 0 : -90}deg)`,
}}
/>
{item.title}
</HeaderBar>
</Wrapper>
{open ? <Description>{item.description}</Description> : null}
</Fragment>
);
};
interface ListProps {
items: Item[];
}
export const List: React.FC<ListProps> = ({ items }) => (
<ListWrapper>
{items.map((item) => (
<ListItem key={item.title + item.description} item={item} />
))}
</ListWrapper>
);

113
code/addons/test/src/components/MatcherResult.stories.tsx Normal file
View File

@ -0,0 +1,113 @@
import React from 'react';
import { styled } from 'storybook/internal/theming';
import { dedent } from 'ts-dedent';
import { MatcherResult } from './MatcherResult';
const StyledWrapper = styled.div(({ theme }) => ({
backgroundColor: theme.background.content,
padding: '12px 0',
boxShadow: `0 0 0 1px ${theme.appBorderColor}`,
color: theme.color.defaultText,
fontSize: 13,
}));
export default {
title: 'MatcherResult',
component: MatcherResult,
decorators: [
(Story: any) => (
<StyledWrapper>
<Story />
</StyledWrapper>
),
],
parameters: {
layout: 'fullscreen',
},
};
export const Expected = {
args: {
message: dedent`
expected last "spy" call to have been called with [ { …(2) } ]
- Expected:
Array [
Object {
"email": "michael@chromatic.com",
"password": "testpasswordthatwontfail",
},
]
+ Received:
undefined
`,
},
};
export const ExpectedReceived = {
args: {
message: dedent`
expected last "spy" call to have been called with []
- Expected
+ Received
- Array []
+ Array [
+ Object {
+ "email": "michael@chromatic.com",
+ "password": "testpasswordthatwontfail",
+ },
+ ]
`,
},
};
export const ExpectedNumberOfCalls = {
args: {
message: dedent`
expected "spy" to not be called at all, but actually been called 1 times
Received:
1st spy call:
Array [
Object {
"email": "michael@chromatic.com",
"password": "testpasswordthatwontfail",
},
]
Number of calls: 1
`,
},
};
export const Diff = {
args: {
message: dedent`
expected "spy" to be called with arguments: [ { …(2) } ]
Received:
1st spy call:
Array [
Object {
- "email": "michael@chromaui.com",
+ "email": "michael@chromatic.com",
"password": "testpasswordthatwontfail",
},
]
Number of calls: 1
`,
},
};

146
code/addons/test/src/components/MatcherResult.tsx Normal file
View File

@ -0,0 +1,146 @@
import React from 'react';
import { styled, typography } from 'storybook/internal/theming';
import { useAnsiToHtmlFilter } from '../utils';
import { Node } from './MethodCall';
const getParams = (line: string, fromIndex = 0): string => {
for (let i = fromIndex, depth = 1; i < line.length; i += 1) {
if (line[i] === '(') {
depth += 1;
} else if (line[i] === ')') {
depth -= 1;
}
if (depth === 0) {
return line.slice(fromIndex, i);
}
}
return '';
};
const parseValue = (value: string): any => {
try {
return value === 'undefined' ? undefined : JSON.parse(value);
} catch (e) {
return value;
}
};
const StyledExpected = styled.span(({ theme }) => ({
color: theme.base === 'light' ? theme.color.positiveText : theme.color.positive,
}));
const StyledReceived = styled.span(({ theme }) => ({
color: theme.base === 'light' ? theme.color.negativeText : theme.color.negative,
}));
export const Received = ({ value, parsed }: { value: any; parsed?: boolean }) =>
parsed ? (
<Node showObjectInspector value={value} style={{ color: '#D43900' }} />
) : (
<StyledReceived>{value}</StyledReceived>
);
export const Expected = ({ value, parsed }: { value: any; parsed?: boolean }) => {
if (parsed) {
if (typeof value === 'string' && value.startsWith('called with')) {
return <>{value}</>;
}
return <Node showObjectInspector value={value} style={{ color: '#16B242' }} />;
}
return <StyledExpected>{value}</StyledExpected>;
};
export const MatcherResult = ({
message,
style = {},
}: {
message: string;
style?: React.CSSProperties;
}) => {
const filter = useAnsiToHtmlFilter();
const lines = message.split('\n');
return (
<pre
style={{
margin: 0,
padding: '8px 10px 8px 36px',
fontSize: typography.size.s1,
...style,
}}
>
{lines.flatMap((line: string, index: number) => {
if (line.startsWith('expect(')) {
const received = getParams(line, 7);
const remainderIndex = received && 7 + received.length;
const matcher = received && line.slice(remainderIndex).match(/\.(to|last|nth)[A-Z]\w+\(/);
if (matcher) {
const expectedIndex = remainderIndex + matcher.index + matcher[0].length;
const expected = getParams(line, expectedIndex);
if (expected) {
return [
'expect(',
<Received key={`received_${received}`} value={received} />,
line.slice(remainderIndex, expectedIndex),
<Expected key={`expected_${expected}`} value={expected} />,
line.slice(expectedIndex + expected.length),
<br key={`br${index}`} />,
];
}
}
}
if (line.match(/^\s*- /)) {
return [<Expected key={line + index} value={line} />, <br key={`br${index}`} />];
}
if (line.match(/^\s*\+ /) || line.match(/^Received: $/)) {
return [<Received key={line + index} value={line} />, <br key={`br${index}`} />];
}
const [, assertionLabel, assertionValue] = line.match(/^(Expected|Received): (.*)$/) || [];
if (assertionLabel && assertionValue) {
return assertionLabel === 'Expected'
? [
'Expected: ',
<Expected key={line + index} value={parseValue(assertionValue)} parsed />,
<br key={`br${index}`} />,
]
: [
'Received: ',
<Received key={line + index} value={parseValue(assertionValue)} parsed />,
<br key={`br${index}`} />,
];
}
const [, prefix, numberOfCalls] =
line.match(/(Expected number|Received number|Number) of calls: (\d+)$/i) || [];
if (prefix && numberOfCalls) {
return [
`${prefix} of calls: `,
<Node key={line + index} value={Number(numberOfCalls)} />,
<br key={`br${index}`} />,
];
}
const [, receivedValue] = line.match(/^Received has value: (.+)$/) || [];
if (receivedValue) {
return [
'Received has value: ',
<Node key={line + index} value={parseValue(receivedValue)} />,
<br key={`br${index}`} />,
];
}
return [
<span
key={line + index}
dangerouslySetInnerHTML={{ __html: filter.toHtml(line) }}
></span>,
<br key={`br${index}`} />,
];
})}
</pre>
);
};

219
code/addons/test/src/components/MethodCall.stories.tsx Normal file
View File

@ -0,0 +1,219 @@
import React from 'react';
import { styled, typography } from 'storybook/internal/theming';
import type { Call } from '@storybook/instrumenter';
import { MethodCall, Node } from './MethodCall';
const StyledWrapper = styled.div(({ theme }) => ({
backgroundColor: theme.background.content,
padding: '20px',
boxShadow: `0 0 0 1px ${theme.appBorderColor}`,
color: theme.color.defaultText,
fontFamily: typography.fonts.mono,
fontSize: typography.size.s1,
}));
export default {
title: 'MethodCall',
component: MethodCall,
decorators: [
(Story: any) => (
<StyledWrapper>
<Story />
</StyledWrapper>
),
],
parameters: {
layout: 'fullscreen',
},
};
export const Args = () => (
<div style={{ display: 'inline-flex', flexDirection: 'column', gap: 10 }}>
<Node value={null} />
<Node value={undefined} />
<Node value="Hello world" />
<Node value="https://github.com/storybookjs/storybook/blob/next/README.md" />
<Node value="012345678901234567890123456789012345678901234567890123456789" />
{}
<Node value={true} />
<Node value={false} />
<Node value={12345} />
<Node value={['foo', 1, { hello: 'world' }]} />
<Node value={[...Array(23)].map((_, i) => i)} />
<Node value={{ hello: 'world' }} />
<Node value={{ hello: 'world', arr: [1, 2, 3], more: true }} />
<Node value={{ hello: 'world', arr: [1, 2, 3], more: true }} showObjectInspector />
<Node
value={{
hello: 'world',
arr: [1, 2, 3],
more: true,
regex: /regex/,
class: class DummyClass {},
fn: () => 123,
asyncFn: async () => 'hello',
}}
showObjectInspector
/>
<Node value={{ __class__: { name: 'FooBar' } }} />
<Node value={{ __function__: { name: 'goFaster' } }} />
<Node value={{ __function__: { name: '' } }} />
<Node value={{ __element__: { localName: 'hr' } }} />
<Node value={{ __element__: { localName: 'foo', prefix: 'x' } }} />
<Node value={{ __element__: { localName: 'div', id: 'foo' } }} />
<Node value={{ __element__: { localName: 'span', classNames: ['foo', 'bar'] } }} />
<Node value={{ __element__: { localName: 'button', innerText: 'Click me' } }} />
<Node
value={{ __date__: { value: new Date(Date.UTC(2012, 11, 20, 0, 0, 0)).toISOString() } }}
/>
<Node value={{ __date__: { value: new Date(1600000000000).toISOString() } }} />
<Node value={{ __date__: { value: new Date(1600000000123).toISOString() } }} />
<Node value={{ __error__: { name: 'EvalError', message: '' } }} />
<Node value={{ __error__: { name: 'SyntaxError', message: "Can't do that" } }} />
<Node
value={{
__error__: { name: 'TypeError', message: "Cannot read property 'foo' of undefined" },
}}
/>
<Node
value={{
__error__: { name: 'ReferenceError', message: 'Invalid left-hand side in assignment' },
}}
/>
<Node
value={{
__error__: {
name: 'Error',
message:
"XMLHttpRequest cannot load https://example.com. No 'Access-Control-Allow-Origin' header is present on the requested resource.",
},
}}
/>
<Node value={{ __regexp__: { flags: 'i', source: 'hello' } }} />
<Node value={{ __regexp__: { flags: '', source: 'src(.*)\\.js$' } }} />
<Node value={{ __symbol__: { description: '' } }} />
<Node value={{ __symbol__: { description: 'Hello world' } }} />
</div>
);
const calls: Call[] = [
{
cursor: 0,
id: '1',
ancestors: [],
path: ['screen'],
method: 'getByText',
storyId: 'kind--story',
args: ['Click'],
interceptable: false,
retain: false,
},
{
cursor: 1,
id: '2',
ancestors: [],
path: ['userEvent'],
method: 'click',
storyId: 'kind--story',
args: [{ __callId__: '1' }],
interceptable: true,
retain: false,
},
{
cursor: 2,
id: '3',
ancestors: [],
path: [],
method: 'expect',
storyId: 'kind--story',
args: [true],
interceptable: true,
retain: false,
},
{
cursor: 3,
id: '4',
ancestors: [],
path: [{ __callId__: '3' }, 'not'],
method: 'toBe',
storyId: 'kind--story',
args: [false],
interceptable: true,
retain: false,
},
{
cursor: 4,
id: '5',
ancestors: [],
path: ['jest'],
method: 'fn',
storyId: 'kind--story',
args: [{ __function__: { name: 'actionHandler' } }],
interceptable: false,
retain: false,
},
{
cursor: 5,
id: '6',
ancestors: [],
path: [],
method: 'expect',
storyId: 'kind--story',
args: [{ __callId__: '5' }],
interceptable: false,
retain: false,
},
{
cursor: 6,
id: '7',
ancestors: [],
path: ['expect'],
method: 'stringMatching',
storyId: 'kind--story',
args: [{ __regexp__: { flags: 'i', source: 'hello' } }],
interceptable: false,
retain: false,
},
{
cursor: 7,
id: '8',
ancestors: [],
path: [{ __callId__: '6' }, 'not'],
method: 'toHaveBeenCalledWith',
storyId: 'kind--story',
args: [
{ __callId__: '7' },
[
{ __error__: { name: 'Error', message: "Cannot read property 'foo' of undefined" } },
{ __symbol__: { description: 'Hello world' } },
],
],
interceptable: false,
retain: false,
},
{
cursor: 8,
id: '9',
ancestors: [],
path: [],
method: 'step',
storyId: 'kind--story',
args: ['Custom step label', { __function__: { name: '' } }],
interceptable: true,
retain: false,
},
];
const callsById = calls.reduce((acc, call) => {
acc.set(call.id, call);
return acc;
}, new Map<Call['id'], Call>());
export const Step = () => <MethodCall call={callsById.get('9')} callsById={callsById} />;
export const Simple = () => <MethodCall call={callsById.get('1')} callsById={callsById} />;
export const Nested = () => <MethodCall call={callsById.get('2')} callsById={callsById} />;
export const Chained = () => <MethodCall call={callsById.get('4')} callsById={callsById} />;
export const Complex = () => <MethodCall call={callsById.get('8')} callsById={callsById} />;

465
code/addons/test/src/components/MethodCall.tsx Normal file
View File

@ -0,0 +1,465 @@
import type { ReactElement } from 'react';
import React, { Fragment } from 'react';
import { useTheme } from 'storybook/internal/theming';
import type { Call, CallRef, ElementRef } from '@storybook/instrumenter';
import { ObjectInspector } from '@devtools-ds/object-inspector';
const colorsLight = {
base: '#444',
nullish: '#7D99AA',
string: '#16B242',
number: '#5D40D0',
boolean: '#f41840',
objectkey: '#698394',
instance: '#A15C20',
function: '#EA7509',
muted: '#7D99AA',
tag: {
name: '#6F2CAC',
suffix: '#1F99E5',
},
date: '#459D9C',
error: {
name: '#D43900',
message: '#444',
},
regex: {
source: '#A15C20',
flags: '#EA7509',
},
meta: '#EA7509',
method: '#0271B6',
};
const colorsDark = {
base: '#eee',
nullish: '#aaa',
string: '#5FE584',
number: '#6ba5ff',
boolean: '#ff4191',
objectkey: '#accfe6',
instance: '#E3B551',
function: '#E3B551',
muted: '#aaa',
tag: {
name: '#f57bff',
suffix: '#8EB5FF',
},
date: '#70D4D3',
error: {
name: '#f40',
message: '#eee',
},
regex: {
source: '#FAD483',
flags: '#E3B551',
},
meta: '#FAD483',
method: '#5EC1FF',
};
const useThemeColors = () => {
const { base } = useTheme();
return base === 'dark' ? colorsDark : colorsLight;
};
const special = /[^A-Z0-9]/i;
const trimEnd = /[\s.,…]+$/gm;
const ellipsize = (string: string, maxlength: number): string => {
if (string.length <= maxlength) {
return string;
}
for (let i = maxlength - 1; i >= 0; i -= 1) {
if (special.test(string[i]) && i > 10) {
return `${string.slice(0, i).replace(trimEnd, '')}…`;
}
}
return `${string.slice(0, maxlength).replace(trimEnd, '')}…`;
};
const stringify = (value: any) => {
try {
return JSON.stringify(value, null, 1);
} catch (e) {
return String(value);
}
};
const interleave = (nodes: ReactElement[], separator: ReactElement) =>
nodes.flatMap((node, index) =>
index === nodes.length - 1
? [node]
: [node, React.cloneElement(separator, { key: `sep${index}` })]
);
export const Node = ({
value,
nested,
showObjectInspector,
callsById,
...props
}: {
value: any;
nested?: boolean;
/** Shows an object inspector instead of just printing the object. Only available for Objects */
showObjectInspector?: boolean;
callsById?: Map<Call['id'], Call>;
[props: string]: any;
}) => {
switch (true) {
case value === null:
return <NullNode {...props} />;
case value === undefined:
return <UndefinedNode {...props} />;
case Array.isArray(value):
return <ArrayNode {...props} value={value} callsById={callsById} />;
case typeof value === 'string':
return <StringNode {...props} value={value} />;
case typeof value === 'number':
return <NumberNode {...props} value={value} />;
case typeof value === 'boolean':
return <BooleanNode {...props} value={value} />;
/* eslint-disable no-underscore-dangle */
case Object.prototype.hasOwnProperty.call(value, '__date__'):
return <DateNode {...props} {...value.__date__} />;
case Object.prototype.hasOwnProperty.call(value, '__error__'):
return <ErrorNode {...props} {...value.__error__} />;
case Object.prototype.hasOwnProperty.call(value, '__regexp__'):
return <RegExpNode {...props} {...value.__regexp__} />;
case Object.prototype.hasOwnProperty.call(value, '__function__'):
return <FunctionNode {...props} {...value.__function__} />;
case Object.prototype.hasOwnProperty.call(value, '__symbol__'):
return <SymbolNode {...props} {...value.__symbol__} />;
case Object.prototype.hasOwnProperty.call(value, '__element__'):
return <ElementNode {...props} {...value.__element__} />;
case Object.prototype.hasOwnProperty.call(value, '__class__'):
return <ClassNode {...props} {...value.__class__} />;
case Object.prototype.hasOwnProperty.call(value, '__callId__'):
return <MethodCall call={callsById.get(value.__callId__)} callsById={callsById} />;
/* eslint-enable no-underscore-dangle */
case Object.prototype.toString.call(value) === '[object Object]':
return (
<ObjectNode
value={value}
showInspector={showObjectInspector}
callsById={callsById}
{...props}
/>
);
default:
return <OtherNode value={value} {...props} />;
}
};
export const NullNode = (props: object) => {
const colors = useThemeColors();
return (
<span style={{ color: colors.nullish }} {...props}>
null
</span>
);
};
export const UndefinedNode = (props: object) => {
const colors = useThemeColors();
return (
<span style={{ color: colors.nullish }} {...props}>
undefined
</span>
);
};
export const StringNode = ({ value, ...props }: { value: string }) => {
const colors = useThemeColors();
return (
<span style={{ color: colors.string }} {...props}>
{JSON.stringify(ellipsize(value, 50))}
</span>
);
};
export const NumberNode = ({ value, ...props }: { value: number }) => {
const colors = useThemeColors();
return (
<span style={{ color: colors.number }} {...props}>
{value}
</span>
);
};
export const BooleanNode = ({ value, ...props }: { value: boolean }) => {
const colors = useThemeColors();
return (
<span style={{ color: colors.boolean }} {...props}>
{String(value)}
</span>
);
};
export const ArrayNode = ({
value,
nested = false,
callsById,
}: {
value: any[];
nested?: boolean;
callsById?: Map<Call['id'], Call>;
}) => {
const colors = useThemeColors();
if (nested) {
return <span style={{ color: colors.base }}>[…]</span>;
}
const nodes = value
.slice(0, 3)
.map((v, index) => (
<Node key={`${index}--${JSON.stringify(v)}`} value={v} nested callsById={callsById} />
));
const nodelist = interleave(nodes, <span>, </span>);
if (value.length <= 3) {
return <span style={{ color: colors.base }}>[{nodelist}]</span>;
}
return (
<span style={{ color: colors.base }}>
({value.length}) [{nodelist}, …]
</span>
);
};
export const ObjectNode = ({
showInspector,
value,
callsById,
nested = false,
}: {
showInspector?: boolean;
value: object;
nested?: boolean;
callsById?: Map<Call['id'], Call>;
}) => {
const isDarkMode = useTheme().base === 'dark';
const colors = useThemeColors();
if (showInspector) {
return (
<>
<ObjectInspector
id="interactions-object-inspector"
data={value}
includePrototypes={false}
colorScheme={isDarkMode ? 'dark' : 'light'}
/>
</>
);
}
if (nested) {
return <span style={{ color: colors.base }}>{'{…}'}</span>;
}
const nodelist = interleave(
Object.entries(value)
.slice(0, 2)
.map(([k, v]) => (
<Fragment key={k}>
<span style={{ color: colors.objectkey }}>{k}: </span>
<Node value={v} callsById={callsById} nested />
</Fragment>
)),
<span>, </span>
);
if (Object.keys(value).length <= 2) {
return (
<span style={{ color: colors.base }}>
{'{ '}
{nodelist}
{' }'}
</span>
);
}
return (
<span style={{ color: colors.base }}>
({Object.keys(value).length}) {'{ '}
{nodelist}
{', … }'}
</span>
);
};
export const ClassNode = ({ name }: { name: string }) => {
const colors = useThemeColors();
return <span style={{ color: colors.instance }}>{name}</span>;
};
export const FunctionNode = ({ name }: { name: string }) => {
const colors = useThemeColors();
return name ? (
<span style={{ color: colors.function }}>{name}</span>
) : (
<span style={{ color: colors.nullish, fontStyle: 'italic' }}>anonymous</span>
);
};
export const ElementNode = ({
prefix,
localName,
id,
classNames = [],
innerText,
}: ElementRef['__element__']) => {
const name = prefix ? `${prefix}:${localName}` : localName;
const colors = useThemeColors();
return (
<span style={{ wordBreak: 'keep-all' }}>
<span key={`${name}_lt`} style={{ color: colors.muted }}>
&lt;
</span>
<span key={`${name}_tag`} style={{ color: colors.tag.name }}>
{name}
</span>
<span key={`${name}_suffix`} style={{ color: colors.tag.suffix }}>
{id ? `#${id}` : classNames.reduce((acc, className) => `${acc}.${className}`, '')}
</span>
<span key={`${name}_gt`} style={{ color: colors.muted }}>
&gt;
</span>
{!id && classNames.length === 0 && innerText && (
<>
<span key={`${name}_text`}>{innerText}</span>
<span key={`${name}_close_lt`} style={{ color: colors.muted }}>
&lt;
</span>
<span key={`${name}_close_tag`} style={{ color: colors.tag.name }}>
/{name}
</span>
<span key={`${name}_close_gt`} style={{ color: colors.muted }}>
&gt;
</span>
</>
)}
</span>
);
};
export const DateNode = ({ value }: { value: string }) => {
const [date, time, ms] = value.split(/[T.Z]/);
const colors = useThemeColors();
return (
<span style={{ whiteSpace: 'nowrap', color: colors.date }}>
{date}
<span style={{ opacity: 0.7 }}>T</span>
{time === '00:00:00' ? <span style={{ opacity: 0.7 }}>{time}</span> : time}
{ms === '000' ? <span style={{ opacity: 0.7 }}>.{ms}</span> : `.${ms}`}
<span style={{ opacity: 0.7 }}>Z</span>
</span>
);
};
export const ErrorNode = ({ name, message }: { name: string; message: string }) => {
const colors = useThemeColors();
return (
<span style={{ color: colors.error.name }}>
{name}
{message && ': '}
{message && (
<span style={{ color: colors.error.message }} title={message.length > 50 ? message : ''}>
{ellipsize(message, 50)}
</span>
)}
</span>
);
};
export const RegExpNode = ({ flags, source }: { flags: string; source: string }) => {
const colors = useThemeColors();
return (
<span style={{ whiteSpace: 'nowrap', color: colors.regex.flags }}>
/<span style={{ color: colors.regex.source }}>{source}</span>/{flags}
</span>
);
};
export const SymbolNode = ({ description }: { description: string }) => {
const colors = useThemeColors();
return (
<span style={{ whiteSpace: 'nowrap', color: colors.instance }}>
Symbol(
{description && <span style={{ color: colors.meta }}>"{description}"</span>})
</span>
);
};
export const OtherNode = ({ value }: { value: any }) => {
const colors = useThemeColors();
return <span style={{ color: colors.meta }}>{stringify(value)}</span>;
};
export const StepNode = ({ label }: { label: string }) => {
const colors = useThemeColors();
const { typography } = useTheme();
return (
<span
style={{
color: colors.base,
fontFamily: typography.fonts.base,
fontSize: typography.size.s2 - 1,
}}
>
{label}
</span>
);
};
export const MethodCall = ({
call,
callsById,
}: {
call?: Call;
callsById: Map<Call['id'], Call>;
}) => {
// Call might be undefined during initial render, can be safely ignored.
if (!call) {
return null;
}
if (call.method === 'step' && call.path.length === 0) {
return <StepNode label={call.args[0]} />;
}
const path = call.path.flatMap((elem, index) => {
// eslint-disable-next-line no-underscore-dangle
const callId = (elem as CallRef).__callId__;
return [
callId ? (
<MethodCall key={`elem${index}`} call={callsById.get(callId)} callsById={callsById} />
) : (
<span key={`elem${index}`}>{elem as any}</span>
),
<wbr key={`wbr${index}`} />,
<span key={`dot${index}`}>.</span>,
];
});
const args = call.args.flatMap((arg, index, array) => {
const node = <Node key={`node${index}`} value={arg} callsById={callsById} />;
return index < array.length - 1
? [node, <span key={`comma${index}`}>,&nbsp;</span>, <wbr key={`wbr${index}`} />]
: [node];
});
const colors = useThemeColors();
return (
<>
<span style={{ color: colors.base }}>{path}</span>
<span style={{ color: colors.method }}>{call.method}</span>
<span style={{ color: colors.base }}>
(<wbr />
{args}
<wbr />)
</span>
</>
);
};

25
code/addons/test/src/components/StatusBadge.stories.tsx Normal file
View File

@ -0,0 +1,25 @@
import { CallStates } from '@storybook/instrumenter';
import { StatusBadge } from './StatusBadge';
export default {
title: 'StatusBadge',
component: StatusBadge,
parameters: { layout: 'padded' },
};
export const Pass = {
args: { status: CallStates.DONE },
};
export const Active = {
args: { status: CallStates.ACTIVE },
};
export const Waiting = {
args: { status: CallStates.WAITING },
};
export const Fail = {
args: { status: CallStates.ERROR },
};

45
code/addons/test/src/components/StatusBadge.tsx Normal file
View File

@ -0,0 +1,45 @@
import React from 'react';
import { styled, typography } from 'storybook/internal/theming';
import { type Call, CallStates } from '@storybook/instrumenter';
export interface StatusBadgeProps {
status: Call['status'];
}
const StyledBadge = styled.div<StatusBadgeProps>(({ theme, status }) => {
const backgroundColor = {
[CallStates.DONE]: theme.color.positive,
[CallStates.ERROR]: theme.color.negative,
[CallStates.ACTIVE]: theme.color.warning,
[CallStates.WAITING]: theme.color.warning,
}[status];
return {
padding: '4px 6px 4px 8px;',
borderRadius: '4px',
backgroundColor,
color: 'white',
fontFamily: typography.fonts.base,
textTransform: 'uppercase',
fontSize: typography.size.s1,
letterSpacing: 3,
fontWeight: typography.weight.bold,
width: 65,
textAlign: 'center',
};
});
export const StatusBadge: React.FC<StatusBadgeProps> = ({ status }) => {
const badgeText = {
[CallStates.DONE]: 'Pass',
[CallStates.ERROR]: 'Fail',
[CallStates.ACTIVE]: 'Runs',
[CallStates.WAITING]: 'Runs',
}[status];
return (
<StyledBadge aria-label="Status of the test run" status={status}>
{badgeText}
</StyledBadge>
);
};

24
code/addons/test/src/components/StatusIcon.stories.tsx Normal file
View File

@ -0,0 +1,24 @@
import { CallStates } from '@storybook/instrumenter';
import { StatusIcon } from './StatusIcon';
export default {
title: 'StatusIcon',
component: StatusIcon,
};
export const Pending = {
args: { status: CallStates.WAITING },
};
export const Active = {
args: { status: CallStates.ACTIVE },
};
export const Error = {
args: { status: CallStates.ERROR },
};
export const Done = {
args: { status: CallStates.DONE },
};

46
code/addons/test/src/components/StatusIcon.tsx Normal file
View File

@ -0,0 +1,46 @@
import React from 'react';
import { styled, useTheme } from 'storybook/internal/theming';
import { CheckIcon, CircleIcon, PlayIcon, StopAltIcon } from '@storybook/icons';
import { type Call, CallStates } from '@storybook/instrumenter';
import { transparentize } from 'polished';
export interface StatusIconProps {
status: Call['status'];
}
const WarningContainer = styled.div({
width: 14,
height: 14,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
});
export const StatusIcon: React.FC<StatusIconProps> = ({ status }) => {
const theme = useTheme();
switch (status) {
case CallStates.DONE: {
return <CheckIcon color={theme.color.positive} data-testid="icon-done" />;
}
case CallStates.ERROR: {
return <StopAltIcon color={theme.color.negative} data-testid="icon-error" />;
}
case CallStates.ACTIVE: {
return <PlayIcon color={theme.color.secondary} data-testid="icon-active" />;
}
case CallStates.WAITING: {
return (
<WarningContainer data-testid="icon-waiting">
<CircleIcon color={transparentize(0.5, '#CCCCCC')} size={6} />
</WarningContainer>
);
}
default: {
return null;
}
}
};

91
code/addons/test/src/components/Subnav.stories.tsx Normal file
View File

@ -0,0 +1,91 @@
import { CallStates } from '@storybook/instrumenter';
import { action } from '@storybook/addon-actions';
import { parameters } from '../preview';
import { Subnav } from './Subnav';
export default {
title: 'Subnav',
component: Subnav,
parameters: {
layout: 'fullscreen',
},
args: {
controls: {
start: action('start'),
back: action('back'),
goto: action('goto'),
next: action('next'),
end: action('end'),
rerun: action('rerun'),
},
controlStates: {
start: true,
back: true,
goto: true,
next: false,
end: false,
},
storyFileName: 'Subnav.stories.tsx',
hasNext: true,
hasPrevious: true,
},
};
export const Pass = {
args: {
status: CallStates.DONE,
},
};
export const Fail = {
args: {
status: CallStates.ERROR,
},
};
export const Runs = {
args: {
status: CallStates.WAITING,
},
};
export const AtStart = {
args: {
status: CallStates.WAITING,
controlStates: {
start: false,
back: false,
goto: true,
next: true,
end: true,
},
},
};
export const Midway = {
args: {
status: CallStates.WAITING,
controlStates: {
start: true,
back: true,
goto: true,
next: true,
end: true,
},
},
};
export const Locked = {
args: {
status: CallStates.ACTIVE,
controlStates: {
start: false,
back: false,
goto: false,
next: false,
end: false,
},
},
};

193
code/addons/test/src/components/Subnav.tsx Normal file
View File

@ -0,0 +1,193 @@
import type { ComponentProps } from 'react';
import React from 'react';
import {
Bar,
Button,
IconButton,
P,
Separator,
TooltipNote,
WithTooltip,
} from 'storybook/internal/components';
import { styled } from 'storybook/internal/theming';
import {
FastForwardIcon,
PlayBackIcon,
PlayNextIcon,
RewindIcon,
SyncIcon,
} from '@storybook/icons';
import type { Call, ControlStates } from '@storybook/instrumenter';
import { CallStates } from '@storybook/instrumenter';
import type { Controls } from './InteractionsPanel';
import { StatusBadge } from './StatusBadge';
const SubnavWrapper = styled.div(({ theme }) => ({
background: theme.background.app,
borderBottom: `1px solid ${theme.appBorderColor}`,
position: 'sticky',
top: 0,
zIndex: 1,
}));
const StyledSubnav = styled.nav(({ theme }) => ({
height: 40,
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
paddingLeft: 15,
}));
export interface SubnavProps {
controls: Controls;
controlStates: ControlStates;
status: Call['status'];
storyFileName?: string;
onScrollToEnd?: () => void;
}
const StyledButton = styled(Button)(({ theme }) => ({
borderRadius: 4,
padding: 6,
color: theme.textMutedColor,
'&:not(:disabled)': {
'&:hover,&:focus-visible': {
color: theme.color.secondary,
},
},
}));
const Note = styled(TooltipNote)(({ theme }) => ({
fontFamily: theme.typography.fonts.base,
}));
export const StyledIconButton = styled(IconButton as any)(({ theme }) => ({
color: theme.textMutedColor,
margin: '0 3px',
}));
const StyledSeparator = styled(Separator)({
marginTop: 0,
});
const StyledLocation = styled(P)(({ theme }) => ({
color: theme.textMutedColor,
justifyContent: 'flex-end',
textAlign: 'right',
whiteSpace: 'nowrap',
marginTop: 'auto',
marginBottom: 1,
paddingRight: 15,
fontSize: 13,
}));
const Group = styled.div({
display: 'flex',
alignItems: 'center',
});
const RewindButton = styled(StyledIconButton)({
marginLeft: 9,
});
const JumpToEndButton = styled(StyledButton)({
marginLeft: 9,
marginRight: 9,
marginBottom: 1,
lineHeight: '12px',
});
interface AnimatedButtonProps {
animating?: boolean;
}
const RerunButton = styled(StyledIconButton)<
AnimatedButtonProps & ComponentProps<typeof StyledIconButton>
>(({ theme, animating, disabled }) => ({
opacity: disabled ? 0.5 : 1,
svg: {
animation: animating && `${theme.animation.rotate360} 200ms ease-out`,
},
}));
export const Subnav: React.FC<SubnavProps> = ({
controls,
controlStates,
status,
storyFileName,
onScrollToEnd,
}) => {
const buttonText = status === CallStates.ERROR ? 'Scroll to error' : 'Scroll to end';
return (
<SubnavWrapper>
<Bar>
<StyledSubnav>
<Group>
<StatusBadge status={status} />
<JumpToEndButton onClick={onScrollToEnd} disabled={!onScrollToEnd}>
{buttonText}
</JumpToEndButton>
<StyledSeparator />
<WithTooltip trigger="hover" hasChrome={false} tooltip={<Note note="Go to start" />}>
<RewindButton
aria-label="Go to start"
onClick={controls.start}
disabled={!controlStates.start}
>
<RewindIcon />
</RewindButton>
</WithTooltip>
<WithTooltip trigger="hover" hasChrome={false} tooltip={<Note note="Go back" />}>
<StyledIconButton
aria-label="Go back"
onClick={controls.back}
disabled={!controlStates.back}
>
<PlayBackIcon />
</StyledIconButton>
</WithTooltip>
<WithTooltip trigger="hover" hasChrome={false} tooltip={<Note note="Go forward" />}>
<StyledIconButton
aria-label="Go forward"
onClick={controls.next}
disabled={!controlStates.next}
>
<PlayNextIcon />
</StyledIconButton>
</WithTooltip>
<WithTooltip trigger="hover" hasChrome={false} tooltip={<Note note="Go to end" />}>
<StyledIconButton
aria-label="Go to end"
onClick={controls.end}
disabled={!controlStates.end}
>
<FastForwardIcon />
</StyledIconButton>
</WithTooltip>
<WithTooltip trigger="hover" hasChrome={false} tooltip={<Note note="Rerun" />}>
<RerunButton aria-label="Rerun" onClick={controls.rerun}>
<SyncIcon />
</RerunButton>
</WithTooltip>
</Group>
{storyFileName && (
<Group>
<StyledLocation>{storyFileName}</StyledLocation>
</Group>
)}
</StyledSubnav>
</Bar>
</SubnavWrapper>
);
};

46
code/addons/test/src/components/TestDiscrepancyMessage.stories.tsx Normal file
View File

@ -0,0 +1,46 @@
import React from 'react';
import { ManagerContext } from 'storybook/internal/manager-api';
import { CallStates } from '@storybook/instrumenter';
import type { Meta, StoryObj } from '@storybook/react';
import { fn } from '@storybook/test';
import { TestDiscrepancyMessage } from './TestDiscrepancyMessage';
type Story = StoryObj<typeof TestDiscrepancyMessage>;
const managerContext: any = {
state: {},
api: {
getDocsUrl: fn().mockName('api::getDocsUrl'),
emit: fn().mockName('api::emit'),
},
};
export default {
title: 'TestDiscrepancyMessage',
component: TestDiscrepancyMessage,
parameters: {
layout: 'fullscreen',
},
args: {
storyId: 'story-id',
},
decorators: [
(storyFn) => (
<ManagerContext.Provider value={managerContext}>{storyFn()}</ManagerContext.Provider>
),
],
} as Meta<typeof TestDiscrepancyMessage>;
export const BrowserPassedCliFailed: Story = {
args: {
browserTestStatus: CallStates.DONE,
},
};
export const CliFailedBrowserPassed: Story = {
args: {
browserTestStatus: CallStates.ERROR,
},
};

74
code/addons/test/src/components/TestDiscrepancyMessage.tsx Normal file
View File

@ -0,0 +1,74 @@
import React, { useEffect } from 'react';
import { Link } from 'storybook/internal/components';
import { useStorybookApi } from 'storybook/internal/manager-api';
import { styled } from 'storybook/internal/theming';
import type { StoryId } from 'storybook/internal/types';
import { CallStates } from '@storybook/instrumenter';
import { DOCUMENTATION_DISCREPANCY_LINK, STORYBOOK_ADDON_TEST_CHANNEL } from '../constants';
const Wrapper = styled.div(({ theme: { color, typography, background } }) => ({
textAlign: 'start',
padding: '11px 15px',
fontSize: `${typography.size.s2}px`,
fontWeight: typography.weight.regular,
lineHeight: '1rem',
background: background.app,
borderBottom: `1px solid ${color.border}`,
color: color.defaultText,
backgroundClip: 'padding-box',
position: 'relative',
code: {
fontSize: `${typography.size.s1 - 1}px`,
color: 'inherit',
margin: '0 0.2em',
padding: '0 0.2em',
background: 'rgba(255, 255, 255, 0.8)',
borderRadius: '2px',
boxShadow: '0 0 0 1px rgba(0, 0, 0, 0.1)',
},
}));
interface TestDiscrepancyMessageProps {
browserTestStatus: CallStates;
storyId: StoryId;
testRunId: string;
}
export const TestDiscrepancyMessage = ({
browserTestStatus,
storyId,
testRunId,
}: TestDiscrepancyMessageProps) => {
const api = useStorybookApi();
const docsUrl = api.getDocsUrl({
subpath: DOCUMENTATION_DISCREPANCY_LINK,
versioned: true,
renderer: true,
});
const message = `This component test passed in ${browserTestStatus === CallStates.DONE ? 'this browser' : 'CLI'}, but the tests failed in ${browserTestStatus === CallStates.ERROR ? 'this browser' : 'CLI'}.`;
useEffect(
() =>
api.emit(STORYBOOK_ADDON_TEST_CHANNEL, {
type: 'test-discrepancy',
payload: {
browserStatus: browserTestStatus === CallStates.DONE ? 'PASS' : 'FAIL',
cliStatus: browserTestStatus === CallStates.DONE ? 'FAIL' : 'PASS',
storyId,
testRunId,
},
}),
[api, browserTestStatus, storyId, testRunId]
);
return (
<Wrapper>
{message}{' '}
<Link href={docsUrl} target="_blank" withArrow>
Learn what could cause this
</Link>
</Wrapper>
);
};

10
code/addons/test/src/constants.ts
View File

@ -1 +1,9 @@
export const ADDON_ID = 'storybook/vitest';
export const ADDON_ID = 'storybook/test';
export const TEST_PROVIDER_ID = `${ADDON_ID}/test-provider`;
export const PANEL_ID = `${ADDON_ID}/panel`;
export const STORYBOOK_ADDON_TEST_CHANNEL = 'STORYBOOK_ADDON_TEST_CHANNEL';
export const TUTORIAL_VIDEO_LINK = 'https://youtu.be/Waht9qq7AoA';
export const DOCUMENTATION_LINK = 'writing-tests/test-addon';
export const DOCUMENTATION_DISCREPANCY_LINK = `${DOCUMENTATION_LINK}#what-happens-when-there-are-different-test-results-in-multiple-environments`;
export const DOCUMENTATION_FATAL_ERROR_LINK = `${DOCUMENTATION_LINK}#what-happens-if-vitest-itself-has-an-error`;

7
code/addons/test/src/logger.ts Normal file
View File

@ -0,0 +1,7 @@
import picocolors from 'picocolors';
import { ADDON_ID } from './constants';
export const log = (message: any) => {
console.log(`${picocolors.magenta(ADDON_ID)}: ${message.toString().trim()}`);
};

201
code/addons/test/src/manager.tsx
View File

@ -1,5 +1,200 @@
import { type API, addons } from 'storybook/internal/manager-api';
import React, { useCallback, useEffect, useState } from 'react';
import { ADDON_ID } from './constants';
import { AddonPanel, Badge, Link as LinkComponent, Spaced } from 'storybook/internal/components';
import { TESTING_MODULE_RUN_ALL_REQUEST } from 'storybook/internal/core-events';
import type { Combo } from 'storybook/internal/manager-api';
import { Consumer, addons, types, useAddonState } from 'storybook/internal/manager-api';
import {
type API_StatusObject,
type API_StatusValue,
type Addon_TestProviderType,
Addon_TypesEnum,
} from 'storybook/internal/types';
addons.register(ADDON_ID, () => {});
import { Panel } from './Panel';
import { GlobalErrorModal } from './components/GlobalErrorModal';
import { ADDON_ID, PANEL_ID, TEST_PROVIDER_ID } from './constants';
import type { TestResult } from './node/reporter';
function Title() {
const [addonState = {}] = useAddonState(ADDON_ID);
const { hasException, interactionsCount } = addonState as any;
return (
<div>
<Spaced col={1}>
<span style={{ display: 'inline-block', verticalAlign: 'middle' }}>Component tests</span>
{interactionsCount && !hasException ? (
<Badge status="neutral">{interactionsCount}</Badge>
) : null}
{hasException ? <Badge status="negative">{interactionsCount}</Badge> : null}
</Spaced>
</div>
);
}
const statusMap: Record<any['status'], API_StatusValue> = {
failed: 'error',
passed: 'success',
pending: 'pending',
};
export function getRelativeTimeString(date: Date): string {
const delta = Math.round((date.getTime() - Date.now()) / 1000);
const cutoffs = [60, 3600, 86400, 86400 * 7, 86400 * 30, 86400 * 365, Infinity];
const units: Intl.RelativeTimeFormatUnit[] = [
'second',
'minute',
'hour',
'day',
'week',
'month',
'year',
];
const unitIndex = cutoffs.findIndex((cutoff) => cutoff > Math.abs(delta));
const divisor = unitIndex ? cutoffs[unitIndex - 1] : 1;
const rtf = new Intl.RelativeTimeFormat('en', { numeric: 'auto' });
return rtf.format(Math.floor(delta / divisor), units[unitIndex]);
}
const RelativeTime = ({ timestamp, testCount }: { timestamp: Date; testCount: number }) => {
const [relativeTimeString, setRelativeTimeString] = useState(null);
useEffect(() => {
if (timestamp) {
setRelativeTimeString(getRelativeTimeString(timestamp).replace(/^now$/, 'just now'));
const interval = setInterval(() => {
setRelativeTimeString(getRelativeTimeString(timestamp).replace(/^now$/, 'just now'));
}, 10000);
return () => clearInterval(interval);
}
}, [timestamp]);
return (
relativeTimeString &&
`Ran ${testCount} ${testCount === 1 ? 'test' : 'tests'} ${relativeTimeString}`
);
};
addons.register(ADDON_ID, (api) => {
const openAddonPanel = () => {
api.setSelectedPanel(PANEL_ID);
api.togglePanel(true);
};
addons.add(TEST_PROVIDER_ID, {
type: Addon_TypesEnum.experimental_TEST_PROVIDER,
runnable: true,
watchable: true,
name: 'Component tests',
title: ({ crashed, failed }) =>
crashed || failed ? 'Component tests failed' : 'Component tests',
description: ({ failed, running, watching, progress, crashed, details }) => {
const [isModalOpen, setIsModalOpen] = useState(false);
const errorMessage = details?.error?.message;
let message: string | React.ReactNode = 'Not run';
if (running) {
message = progress
? `Testing... ${progress.numPassedTests}/${progress.numTotalTests}`
: 'Starting...';
} else if (failed && !errorMessage) {
message = 'Component tests failed';
} else if (crashed || (failed && errorMessage)) {
message = (
<>
<LinkComponent
isButton
onClick={() => {
setIsModalOpen(true);
}}
>
{details?.error?.name || 'View full error'}
</LinkComponent>
</>
);
} else if (progress?.finishedAt) {
message = (
<RelativeTime
timestamp={new Date(progress.finishedAt)}
testCount={progress.numTotalTests}
/>
);
} else if (watching) {
message = 'Watching for file changes';
}
return (
<>
{message}
<GlobalErrorModal
error={errorMessage}
open={isModalOpen}
onClose={() => {
setIsModalOpen(false);
}}
onRerun={() => {
setIsModalOpen(false);
api
.getChannel()
.emit(TESTING_MODULE_RUN_ALL_REQUEST, { providerId: TEST_PROVIDER_ID });
}}
/>
</>
);
},
mapStatusUpdate: (state) =>
Object.fromEntries(
(state.details.testResults || []).flatMap((testResult) =>
testResult.results
.map(({ storyId, status, testRunId, ...rest }) => {
if (storyId) {
const statusObject: API_StatusObject = {
title: 'Component tests',
status: statusMap[status],
description:
'failureMessages' in rest && rest.failureMessages?.length
? rest.failureMessages.join('\n')
: '',
data: {
testRunId,
},
onClick: openAddonPanel,
};
return [storyId, statusObject];
}
})
.filter(Boolean)
)
),
} as Addon_TestProviderType<{
testResults: TestResult[];
error?: { message: string; name: string };
}>);
addons.add(PANEL_ID, {
type: types.PANEL,
title: Title,
match: ({ viewMode }) => viewMode === 'story',
render: ({ active }) => {
const newLocal = useCallback(({ state }: Combo) => {
return {
storyId: state.storyId,
};
}, []);
return (
<AddonPanel active={active}>
<Consumer filter={newLocal}>{({ storyId }) => <Panel storyId={storyId} />}</Consumer>
</AddonPanel>
);
},
});
});

148
code/addons/test/src/mocks/index.ts Normal file
View File

@ -0,0 +1,148 @@
import { type Call, CallStates } from '@storybook/instrumenter';
export const getCalls = (finalStatus: CallStates) => {
const calls: Call[] = [
{
id: 'story--id [3] step',
storyId: 'story--id',
cursor: 1,
ancestors: [],
path: [],
method: 'step',
args: ['Click button', { __function__: { name: '' } }],
interceptable: true,
retain: false,
status: CallStates.DONE,
},
{
id: 'story--id [3] step [1] within',
storyId: 'story--id',
cursor: 3,
ancestors: ['story--id [3] step'],
path: [],
method: 'within',
args: [{ __element__: { localName: 'div', id: 'root' } }],
interceptable: false,
retain: false,
status: CallStates.DONE,
},
{
id: 'story--id [3] step [2] findByText',
storyId: 'story--id',
cursor: 4,
ancestors: ['story--id [3] step'],
path: [{ __callId__: 'story--id [3] step [1] within' }],
method: 'findByText',
args: ['Click'],
interceptable: true,
retain: false,
status: CallStates.DONE,
},
{
id: 'story--id [3] step [3] click',
storyId: 'story--id',
cursor: 5,
ancestors: ['story--id [3] step'],
path: ['userEvent'],
method: 'click',
args: [{ __element__: { localName: 'button', innerText: 'Click' } }],
interceptable: true,
retain: false,
status: CallStates.DONE,
},
{
id: 'story--id [6] waitFor',
storyId: 'story--id',
cursor: 6,
ancestors: [],
path: [],
method: 'waitFor',
args: [{ __function__: { name: '' } }],
interceptable: true,
retain: false,
status: CallStates.DONE,
},
{
id: 'story--id [6] waitFor [0] expect',
storyId: 'story--id',
cursor: 1,
ancestors: ['story--id [6] waitFor'],
path: [],
method: 'expect',
args: [{ __function__: { name: 'handleSubmit' } }],
interceptable: false,
retain: false,
status: CallStates.DONE,
},
{
id: 'story--id [6] waitFor [1] stringMatching',
storyId: 'story--id',
cursor: 2,
ancestors: ['story--id [6] waitFor'],
path: ['expect'],
method: 'stringMatching',
args: [{ __regexp__: { flags: 'gi', source: '([A-Z])w+' } }],
interceptable: false,
retain: false,
status: CallStates.DONE,
},
{
id: 'story--id [6] waitFor [2] toHaveBeenCalledWith',
storyId: 'story--id',
cursor: 3,
ancestors: ['story--id [6] waitFor'],
path: [{ __callId__: 'story--id [6] waitFor [0] expect' }],
method: 'toHaveBeenCalledWith',
args: [{ __callId__: 'story--id [6] waitFor [1] stringMatching', retain: false }],
interceptable: true,
retain: false,
status: CallStates.DONE,
},
{
id: 'story--id [7] expect',
storyId: 'story--id',
cursor: 7,
ancestors: [],
path: [],
method: 'expect',
args: [{ __function__: { name: 'handleReset' } }],
interceptable: false,
retain: false,
status: CallStates.DONE,
},
{
id: 'story--id [8] toHaveBeenCalled',
storyId: 'story--id',
cursor: 8,
ancestors: [],
path: [{ __callId__: 'story--id [7] expect' }, 'not'],
method: 'toHaveBeenCalled',
args: [],
interceptable: true,
retain: false,
status: finalStatus,
},
];
if (finalStatus === CallStates.ERROR) {
calls[calls.length - 1].exception = {
name: 'Error',
stack: '',
message: 'Oops!',
callId: calls[calls.length - 1].id,
};
}
return calls;
};
export const getInteractions = (finalStatus: CallStates) =>
getCalls(finalStatus)
.filter((call) => call.interceptable)
.map((call) => ({
...call,
childCallIds: [],
isCollapsed: false,
isHidden: false,
toggleCollapsed: () => {},
}));

137
code/addons/test/src/node/boot-test-runner.test.ts Normal file
View File

@ -0,0 +1,137 @@
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
import { Channel, type ChannelTransport } from '@storybook/core/channels';
import {
TESTING_MODULE_CANCEL_TEST_RUN_REQUEST,
TESTING_MODULE_PROGRESS_REPORT,
TESTING_MODULE_RUN_ALL_REQUEST,
TESTING_MODULE_RUN_REQUEST,
TESTING_MODULE_WATCH_MODE_REQUEST,
} from '@storybook/core/core-events';
// eslint-disable-next-line depend/ban-dependencies
import { execaNode } from 'execa';
import { log } from '../logger';
import { killTestRunner, runTestRunner } from './boot-test-runner';
let stdout: (chunk: any) => void;
let stderr: (chunk: any) => void;
let message: (event: any) => void;
const child = vi.hoisted(() => ({
stdout: {
on: vi.fn((event, callback) => {
stdout = callback;
}),
},
stderr: {
on: vi.fn((event, callback) => {
stderr = callback;
}),
},
on: vi.fn((event, callback) => {
message = callback;
}),
send: vi.fn(),
kill: vi.fn(),
}));
vi.mock('execa', () => ({
execaNode: vi.fn().mockReturnValue(child),
}));
vi.mock('../logger', () => ({
log: vi.fn(),
}));
beforeEach(() => {
vi.useFakeTimers();
killTestRunner();
});
afterEach(() => {
vi.useRealTimers();
});
const transport = { setHandler: vi.fn(), send: vi.fn() } satisfies ChannelTransport;
const mockChannel = new Channel({ transport });
describe('bootTestRunner', () => {
it('should execute vitest.js', async () => {
runTestRunner(mockChannel);
expect(execaNode).toHaveBeenCalledWith(expect.stringMatching(/vitest\.mjs$/));
});
it('should log stdout and stderr', async () => {
runTestRunner(mockChannel);
stdout('foo');
stderr('bar');
expect(log).toHaveBeenCalledWith('foo');
expect(log).toHaveBeenCalledWith('bar');
});
it('should wait for vitest to be ready', async () => {
let ready;
const promise = runTestRunner(mockChannel).then(() => {
ready = true;
});
expect(ready).toBeUndefined();
message({ type: 'ready' });
await expect(promise).resolves.toBeUndefined();
expect(ready).toBe(true);
});
it('should abort if vitest doesn’t become ready in time', async () => {
const promise = runTestRunner(mockChannel);
vi.advanceTimersByTime(30001);
await expect(promise).rejects.toThrow();
});
it('should forward channel events', async () => {
runTestRunner(mockChannel);
message({ type: 'ready' });
message({ type: TESTING_MODULE_PROGRESS_REPORT, args: ['foo'] });
expect(mockChannel.last(TESTING_MODULE_PROGRESS_REPORT)).toEqual(['foo']);
mockChannel.emit(TESTING_MODULE_RUN_REQUEST, 'foo');
expect(child.send).toHaveBeenCalledWith({
args: ['foo'],
from: 'server',
type: TESTING_MODULE_RUN_REQUEST,
});
mockChannel.emit(TESTING_MODULE_RUN_ALL_REQUEST, 'bar');
expect(child.send).toHaveBeenCalledWith({
args: ['bar'],
from: 'server',
type: TESTING_MODULE_RUN_ALL_REQUEST,
});
mockChannel.emit(TESTING_MODULE_WATCH_MODE_REQUEST, 'baz');
expect(child.send).toHaveBeenCalledWith({
args: ['baz'],
from: 'server',
type: TESTING_MODULE_WATCH_MODE_REQUEST,
});
mockChannel.emit(TESTING_MODULE_CANCEL_TEST_RUN_REQUEST, 'qux');
expect(child.send).toHaveBeenCalledWith({
args: ['qux'],
from: 'server',
type: TESTING_MODULE_CANCEL_TEST_RUN_REQUEST,
});
});
it('should resend init event', async () => {
runTestRunner(mockChannel, 'init', ['foo']);
message({ type: 'ready' });
expect(child.send).toHaveBeenCalledWith({
args: ['foo'],
from: 'server',
type: 'init',
});
});
});

142
code/addons/test/src/node/boot-test-runner.ts Normal file
View File

@ -0,0 +1,142 @@
import { type ChildProcess } from 'node:child_process';
import { join } from 'node:path';
import type { Channel } from 'storybook/internal/channels';
import {
TESTING_MODULE_CANCEL_TEST_RUN_REQUEST,
TESTING_MODULE_CRASH_REPORT,
TESTING_MODULE_RUN_ALL_REQUEST,
TESTING_MODULE_RUN_REQUEST,
TESTING_MODULE_WATCH_MODE_REQUEST,
type TestingModuleCrashReportPayload,
} from 'storybook/internal/core-events';
// eslint-disable-next-line depend/ban-dependencies
import { execaNode } from 'execa';
import { TEST_PROVIDER_ID } from '../constants';
import { log } from '../logger';
const MAX_START_TIME = 30000;
// This path is a bit confusing, but essentially `boot-test-runner` gets bundled into the preset bundle
// which is at the root. Then, from the root, we want to load `node/vitest.mjs`
const vitestModulePath = join(__dirname, 'node', 'vitest.mjs');
let child: null | ChildProcess;
let ready = false;
const bootTestRunner = async (channel: Channel, initEvent?: string, initArgs?: any[]) => {
let stderr: string[] = [];
function reportFatalError(e: any) {
channel.emit(TESTING_MODULE_CRASH_REPORT, {
providerId: TEST_PROVIDER_ID,
error: {
message: String(e),
},
} as TestingModuleCrashReportPayload);
}
const forwardRun = (...args: any[]) =>
child?.send({ args, from: 'server', type: TESTING_MODULE_RUN_REQUEST });
const forwardRunAll = (...args: any[]) =>
child?.send({ args, from: 'server', type: TESTING_MODULE_RUN_ALL_REQUEST });
const forwardWatchMode = (...args: any[]) =>
child?.send({ args, from: 'server', type: TESTING_MODULE_WATCH_MODE_REQUEST });
const forwardCancel = (...args: any[]) =>
child?.send({ args, from: 'server', type: TESTING_MODULE_CANCEL_TEST_RUN_REQUEST });
const killChild = () => {
channel.off(TESTING_MODULE_RUN_REQUEST, forwardRun);
channel.off(TESTING_MODULE_RUN_ALL_REQUEST, forwardRunAll);
channel.off(TESTING_MODULE_WATCH_MODE_REQUEST, forwardWatchMode);
channel.off(TESTING_MODULE_CANCEL_TEST_RUN_REQUEST, forwardCancel);
child?.kill();
child = null;
};
const exit = (code = 0) => {
killChild();
process.exit(code);
};
process.on('exit', exit);
process.on('SIGINT', () => exit(0));
process.on('SIGTERM', () => exit(0));
const startChildProcess = () =>
new Promise<void>((resolve, reject) => {
child = execaNode(vitestModulePath);
stderr = [];
child.stdout?.on('data', log);
child.stderr?.on('data', (data) => {
// Ignore deprecation warnings which appear in yellow ANSI color
if (!data.toString().match(/^\u001B\[33m/)) {
log(data);
stderr.push(data.toString());
}
});
child.on('message', (result: any) => {
if (result.type === 'ready') {
// Resend the event that triggered the boot sequence, now that the child is ready to handle it
if (initEvent && initArgs) {
child?.send({ type: initEvent, args: initArgs, from: 'server' });
}
// Forward all events from the channel to the child process
channel.on(TESTING_MODULE_RUN_REQUEST, forwardRun);
channel.on(TESTING_MODULE_RUN_ALL_REQUEST, forwardRunAll);
channel.on(TESTING_MODULE_WATCH_MODE_REQUEST, forwardWatchMode);
channel.on(TESTING_MODULE_CANCEL_TEST_RUN_REQUEST, forwardCancel);
resolve();
} else if (result.type === 'error') {
killChild();
log(result.message);
log(result.error);
// Reject if the child process reports an error before it's ready
if (!ready) {
reject(new Error(`${result.message}\n${result.error}`));
} else {
reportFatalError(result.error);
}
} else {
channel.emit(result.type, ...result.args);
}
});
});
const timeout = new Promise((_, reject) =>
setTimeout(
reject,
MAX_START_TIME,
// eslint-disable-next-line local-rules/no-uncategorized-errors
new Error(
`Aborting test runner process because it took longer than ${MAX_START_TIME / 1000} seconds to start.`
)
)
);
await Promise.race([startChildProcess(), timeout]).catch((e) => {
reportFatalError(e);
throw e;
});
};
export const runTestRunner = async (channel: Channel, initEvent?: string, initArgs?: any[]) => {
if (!child) {
ready = false;
await bootTestRunner(channel, initEvent, initArgs);
ready = true;
}
};
export const killTestRunner = () => {
if (child) {
child.kill();
child = null;
}
};

242
code/addons/test/src/node/reporter.ts Normal file
View File

@ -0,0 +1,242 @@
import type { TaskState } from 'vitest';
import type { Vitest } from 'vitest/node';
import { type Reporter } from 'vitest/reporters';
import type {
TestingModuleProgressReportPayload,
TestingModuleProgressReportProgress,
} from 'storybook/internal/core-events';
import type { API_StatusUpdate } from '@storybook/types';
import type { Suite } from '@vitest/runner';
// TODO
// We can theoretically avoid the `@vitest/runner` dependency by copying over the necessary
// functions from the `@vitest/runner` package. It is not complex and does not have
// any significant dependencies.
import { getTests } from '@vitest/runner/utils';
import { throttle } from 'es-toolkit';
import { TEST_PROVIDER_ID } from '../constants';
import type { TestManager } from './test-manager';
export type TestResultResult =
| {
status: 'success' | 'pending';
storyId: string;
testRunId: string;
duration: number;
}
| {
status: 'failed';
storyId: string;
duration: number;
testRunId: string;
failureMessages: string[];
};
export type TestResult = {
results: TestResultResult[];
startTime: number;
endTime: number;
status: 'passed' | 'failed';
message?: string;
};
const StatusMap: Record<
TaskState,
'passed' | 'failed' | 'skipped' | 'pending' | 'todo' | 'disabled'
> = {
fail: 'failed',
only: 'pending',
pass: 'passed',
run: 'pending',
skip: 'skipped',
todo: 'todo',
};
export class StorybookReporter implements Reporter {
testStatusData: API_StatusUpdate = {};
start = 0;
ctx!: Vitest;
sendReport: (payload: TestingModuleProgressReportPayload) => void;
constructor(private testManager: TestManager) {
this.sendReport = throttle((payload) => this.testManager.sendProgressReport(payload), 200);
}
onInit(ctx: Vitest) {
this.ctx = ctx;
this.start = Date.now();
}
getProgressReport(finishedAt?: number) {
const files = this.ctx.state.getFiles();
const fileTests = getTests(files);
// The number of total tests is dynamic and can change during the run
const numTotalTests = fileTests.length;
const numFailedTests = fileTests.filter((t) => t.result?.state === 'fail').length;
const numPassedTests = fileTests.filter((t) => t.result?.state === 'pass').length;
const numPendingTests = fileTests.filter(
(t) => t.result?.state === 'run' || t.mode === 'skip' || t.result?.state === 'skip'
).length;
const testResults: TestResult[] = [];
for (const file of files) {
const tests = getTests([file]);
let startTime = tests.reduce(
(prev, next) => Math.min(prev, next.result?.startTime ?? Number.POSITIVE_INFINITY),
Number.POSITIVE_INFINITY
);
if (startTime === Number.POSITIVE_INFINITY) {
startTime = this.start;
}
const endTime = tests.reduce(
(prev, next) =>
Math.max(prev, (next.result?.startTime ?? 0) + (next.result?.duration ?? 0)),
startTime
);
const assertionResults = tests.flatMap<TestResultResult>((t) => {
const ancestorTitles: string[] = [];
let iter: Suite | undefined = t.suite;
while (iter) {
ancestorTitles.push(iter.name);
iter = iter.suite;
}
ancestorTitles.reverse();
const status = StatusMap[t.result?.state || t.mode] || 'skipped';
const storyId = (t.meta as any).storyId as string;
const duration = t.result?.duration || 0;
const testRunId = this.start.toString();
switch (status) {
case 'passed':
case 'pending':
return [{ status, storyId, duration, testRunId } as TestResultResult];
case 'failed':
const failureMessages = t.result?.errors?.map((e) => e.stack || e.message) || [];
return [{ status, storyId, duration, failureMessages, testRunId } as TestResultResult];
default:
return [];
}
});
const hasFailedTests = tests.some((t) => t.result?.state === 'fail');
testResults.push({
results: assertionResults,
startTime,
endTime,
status: file.result?.state === 'fail' || hasFailedTests ? 'failed' : 'passed',
message: file.result?.errors?.[0]?.stack || file.result?.errors?.[0]?.message,
});
}
return {
cancellable: !finishedAt,
progress: {
numFailedTests,
numPassedTests,
numPendingTests,
numTotalTests,
startedAt: this.start,
finishedAt,
} as TestingModuleProgressReportProgress,
details: {
testResults,
},
};
}
async onTaskUpdate() {
try {
this.sendReport({
providerId: TEST_PROVIDER_ID,
status: 'pending',
...this.getProgressReport(),
});
} catch (e) {
this.sendReport({
providerId: TEST_PROVIDER_ID,
status: 'failed',
error:
e instanceof Error
? { name: 'Failed to gather test results', message: e.message, stack: e.stack }
: { name: 'Failed to gather test results', message: String(e) },
});
}
}
// TODO
// Clearing the whole internal state of Vitest might be too aggressive
// Essentially, we want to reset the calculated total number of tests and the
// test results when a new test run starts, so that the getProgressReport
// method can calculate the correct values
async clearVitestState() {
this.ctx.state.filesMap.clear();
this.ctx.state.pathsSet.clear();
this.ctx.state.idMap.clear();
this.ctx.state.errorsSet.clear();
this.ctx.state.processTimeoutCauses.clear();
}
async onFinished() {
const unhandledErrors = this.ctx.state.getUnhandledErrors();
if (unhandledErrors?.length) {
this.testManager.reportFatalError(
`Vitest caught ${unhandledErrors.length} unhandled error${unhandledErrors?.length > 1 ? 's' : ''} during the test run.`,
unhandledErrors[0]
);
} else {
const isCancelled = this.ctx.isCancelling;
const report = this.getProgressReport(Date.now());
const testSuiteFailures = report.details.testResults.filter(
(t) => t.status === 'failed' && t.results.length === 0
);
const reducedTestSuiteFailures = new Set<string>();
testSuiteFailures.forEach((t) => {
reducedTestSuiteFailures.add(t.message);
});
if (isCancelled) {
this.sendReport({
providerId: TEST_PROVIDER_ID,
status: 'cancelled',
...report,
});
} else if (reducedTestSuiteFailures.size > 0) {
const message = Array.from(reducedTestSuiteFailures).reduce(
(acc, curr) => `${acc}\n${curr}`,
''
);
this.sendReport({
providerId: TEST_PROVIDER_ID,
status: 'failed',
error: {
name: `${reducedTestSuiteFailures.size} component ${reducedTestSuiteFailures.size === 1 ? 'test' : 'tests'} failed`,
message: message,
},
});
} else {
this.sendReport({
providerId: TEST_PROVIDER_ID,
status: 'success',
...report,
});
}
}
this.clearVitestState();
}
}

Some files were not shown because too many files have changed in this diff Show More