mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-05 08:01:20 +08:00
Remove addon-interactions
This commit is contained in:
Valentin Palkovic
parent
6b500b1600
commit
c63bfd6b06
@ -21,7 +21,6 @@
|
||||
# /code/addons/essentials/ @valentinpalkovic @ndelangen
|
||||
# /code/addons/gfm/ @ndelangen @valentinpalkovic
|
||||
# /code/addons/highlight/ @yannbf @valentinpalkovic
|
||||
# /code/addons/interactions/ @yannbf @ndelangen
|
||||
# /code/addons/jest/ @ndelangen
|
||||
# /code/addons/links/ @yannbf @JReinhold
|
||||
# /code/addons/measure/ @yannbf @valentinpalkovic
|
||||
|
||||
@ -73,14 +73,6 @@ const config = defineMain({
|
||||
directory: '../addons/onboarding/src',
|
||||
titlePrefix: 'addons/onboarding',
|
||||
},
|
||||
{
|
||||
directory: '../addons/interactions/src',
|
||||
titlePrefix: 'addons/interactions',
|
||||
},
|
||||
{
|
||||
directory: '../addons/interactions/template/stories',
|
||||
titlePrefix: 'addons/interactions/tests',
|
||||
},
|
||||
{
|
||||
directory: '../addons/test/src/components',
|
||||
titlePrefix: 'addons/test',
|
||||
|
||||
@ -1,55 +0,0 @@
|
||||
# Storybook Addon Interactions
|
||||
|
||||
Storybook Addon Interactions enables visual debugging of interactions and tests in [Storybook](https://storybook.js.org).
|
||||
|
||||
|
||||
|
||||
## Installation
|
||||
|
||||
Install this addon by adding the `@storybook/addon-interactions` dependency:
|
||||
|
||||
```sh
|
||||
yarn add -D @storybook/addon-interactions
|
||||
```
|
||||
|
||||
within `.storybook/main.js`:
|
||||
|
||||
```js
|
||||
export default {
|
||||
addons: ['@storybook/addon-interactions'],
|
||||
};
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
Interactions relies on "instrumented" versions of Vitest and Testing Library, that you import from `storybook/test` instead of their original package. You can then use these libraries in your `play` function.
|
||||
|
||||
```js
|
||||
import { expect, fn, userEvent, within } from 'storybook/test';
|
||||
import { Button } from './Button';
|
||||
|
||||
export default {
|
||||
title: 'Button',
|
||||
component: Button,
|
||||
args: {
|
||||
onClick: fn(),
|
||||
},
|
||||
};
|
||||
|
||||
const Template = (args) => <Button {...args} />;
|
||||
|
||||
export const Demo = Template.bind({});
|
||||
Demo.play = async ({ args, canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
await userEvent.click(canvas.getByRole('button'));
|
||||
await expect(args.onClick).toHaveBeenCalled();
|
||||
};
|
||||
```
|
||||
|
||||
In order to enable step-through debugging in the addon panel, calls to `userEvent.*`, `fireEvent`, `findBy*`, `waitFor*` and `expect` have to
|
||||
be `await`-ed. While debugging, these functions return a Promise that won't resolve until you continue to the next step.
|
||||
|
||||
While you can technically use `screen`, it's recommended to use `within(canvasElement)`. Besides giving you a better error
|
||||
message when a DOM element can't be found, it will also ensure your play function is compatible with Storybook Docs.
|
||||
|
||||
Note that the `fn` function will assign a spy to your arg, so that you can assert invocations.
|
||||
@ -1 +0,0 @@
|
||||
import './dist/manager';
|
||||
@ -1,107 +0,0 @@
|
||||
{
|
||||
"name": "@storybook/addon-interactions",
|
||||
"version": "9.0.0-alpha.8",
|
||||
"description": "Automate, test and debug user interactions",
|
||||
"keywords": [
|
||||
"storybook-addons",
|
||||
"data-state",
|
||||
"test"
|
||||
],
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/next/code/addons/interactions",
|
||||
"bugs": {
|
||||
"url": "https://github.com/storybookjs/storybook/issues"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybookjs/storybook.git",
|
||||
"directory": "code/addons/interactions"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/storybook"
|
||||
},
|
||||
"license": "MIT",
|
||||
"exports": {
|
||||
".": {
|
||||
"types": "./dist/index.d.ts",
|
||||
"import": "./dist/index.mjs",
|
||||
"require": "./dist/index.js"
|
||||
},
|
||||
"./preview": {
|
||||
"types": "./dist/preview.d.ts",
|
||||
"import": "./dist/preview.mjs",
|
||||
"require": "./dist/preview.js"
|
||||
},
|
||||
"./manager": "./dist/manager.js",
|
||||
"./preset": "./dist/preset.js",
|
||||
"./register.js": "./dist/manager.js",
|
||||
"./package.json": "./package.json"
|
||||
},
|
||||
"main": "dist/index.js",
|
||||
"module": "dist/index.mjs",
|
||||
"types": "dist/index.d.ts",
|
||||
"typesVersions": {
|
||||
"*": {
|
||||
"*": [
|
||||
"dist/index.d.ts"
|
||||
],
|
||||
"preview": [
|
||||
"dist/preview.d.ts"
|
||||
]
|
||||
}
|
||||
},
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"README.md",
|
||||
"*.js",
|
||||
"*.d.ts",
|
||||
"!src/**/*"
|
||||
],
|
||||
"scripts": {
|
||||
"check": "jiti ../../../scripts/prepare/check.ts",
|
||||
"prep": "jiti ../../../scripts/prepare/addon-bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/global": "^5.0.0",
|
||||
"polished": "^4.2.2",
|
||||
"ts-dedent": "^2.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@devtools-ds/object-inspector": "^1.1.2",
|
||||
"@storybook/icons": "^1.4.0",
|
||||
"@types/node": "^22.0.0",
|
||||
"ansi-to-html": "^0.7.2",
|
||||
"formik": "^2.2.9",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"typescript": "^5.7.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"storybook": "workspace:^"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"bundler": {
|
||||
"exportEntries": [
|
||||
"./src/index.ts"
|
||||
],
|
||||
"managerEntries": [
|
||||
"./src/manager.tsx"
|
||||
],
|
||||
"previewEntries": [
|
||||
"./src/preview.ts"
|
||||
],
|
||||
"nodeEntries": [
|
||||
"./src/preset.ts"
|
||||
]
|
||||
},
|
||||
"gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16",
|
||||
"storybook": {
|
||||
"displayName": "Interactions",
|
||||
"unsupportedFrameworks": [
|
||||
"react-native"
|
||||
],
|
||||
"icon": "https://user-images.githubusercontent.com/263385/101991666-479cc600-3c7c-11eb-837b-be4e5ffa1bb8.png"
|
||||
}
|
||||
}
|
||||
@ -1 +0,0 @@
|
||||
module.exports = require('./dist/preset');
|
||||
@ -1 +0,0 @@
|
||||
export * from './dist/preview';
|
||||
@ -1,8 +0,0 @@
|
||||
{
|
||||
"name": "addon-interactions",
|
||||
"$schema": "../../node_modules/nx/schemas/project-schema.json",
|
||||
"projectType": "library",
|
||||
"targets": {
|
||||
"build": {}
|
||||
}
|
||||
}
|
||||
@ -1,292 +0,0 @@
|
||||
// @vitest-environment happy-dom
|
||||
import { describe, expect, it } from 'vitest';
|
||||
|
||||
import { type Call, CallStates, type LogItem } from 'storybook/internal/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,
|
||||
}),
|
||||
]);
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -1,262 +0,0 @@
|
||||
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 { type Call, CallStates, EVENTS, type LogItem } from 'storybook/internal/instrumenter';
|
||||
|
||||
import { global } from '@storybook/global';
|
||||
|
||||
import { useAddonState, useChannel, useParameter } from 'storybook/manager-api';
|
||||
|
||||
import { InteractionsPanel } from './components/InteractionsPanel';
|
||||
import { ADDON_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,
|
||||
};
|
||||
|
||||
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 }) {
|
||||
// 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);
|
||||
|
||||
if (isErrored) {
|
||||
return <Fragment key="interactions" />;
|
||||
}
|
||||
|
||||
return (
|
||||
<Fragment key="interactions">
|
||||
<InteractionsPanel
|
||||
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}
|
||||
/>
|
||||
</Fragment>
|
||||
);
|
||||
});
|
||||
@ -1,70 +0,0 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
|
||||
import { EmptyTabContent, Link } from 'storybook/internal/components';
|
||||
|
||||
import { DocumentIcon, VideoIcon } from '@storybook/icons';
|
||||
|
||||
import { useStorybookApi } from 'storybook/manager-api';
|
||||
import { styled } from 'storybook/theming';
|
||||
|
||||
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'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>
|
||||
}
|
||||
/>
|
||||
);
|
||||
};
|
||||
@ -1,65 +0,0 @@
|
||||
import { CallStates } from 'storybook/internal/instrumenter';
|
||||
|
||||
import type { Meta, StoryObj } from '@storybook/react-vite';
|
||||
|
||||
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();
|
||||
},
|
||||
};
|
||||
@ -1,208 +0,0 @@
|
||||
import * as React from 'react';
|
||||
|
||||
import { IconButton, TooltipNote, WithTooltip } from 'storybook/internal/components';
|
||||
import { type Call, CallStates, type ControlStates } from 'storybook/internal/instrumenter';
|
||||
|
||||
import { ListUnorderedIcon } from '@storybook/icons';
|
||||
|
||||
import { transparentize } from 'polished';
|
||||
import { styled, typography } from 'storybook/theming';
|
||||
|
||||
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 ?? 0) * 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>
|
||||
);
|
||||
};
|
||||
@ -1,137 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
import { CallStates } from 'storybook/internal/instrumenter';
|
||||
|
||||
import type { Meta, StoryObj } from '@storybook/react-vite';
|
||||
|
||||
import { expect, userEvent, waitFor, within } from 'storybook/test';
|
||||
import { styled } from 'storybook/theming';
|
||||
|
||||
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 meta = {
|
||||
title: 'InteractionsPanel',
|
||||
component: InteractionsPanel,
|
||||
decorators: [
|
||||
(Story: any) => (
|
||||
<StyledWrapper id="panel-tab-content">
|
||||
<Story />
|
||||
</StyledWrapper>
|
||||
),
|
||||
],
|
||||
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,
|
||||
},
|
||||
} as Meta<typeof InteractionsPanel>;
|
||||
|
||||
export default meta;
|
||||
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
export const Passing: Story = {
|
||||
args: {
|
||||
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: {
|
||||
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: {
|
||||
isPlaying: true,
|
||||
interactions: getInteractions(CallStates.ACTIVE),
|
||||
},
|
||||
};
|
||||
|
||||
export const Failed: Story = {
|
||||
args: {
|
||||
hasException: true,
|
||||
interactions: getInteractions(CallStates.ERROR),
|
||||
},
|
||||
};
|
||||
|
||||
// export const NoInteractions: Story = {
|
||||
// args: {
|
||||
// interactions: [],
|
||||
// },
|
||||
// };
|
||||
|
||||
export const CaughtException: Story = {
|
||||
args: {
|
||||
hasException: true,
|
||||
interactions: [],
|
||||
caughtException: new TypeError("Cannot read properties of undefined (reading 'args')"),
|
||||
},
|
||||
};
|
||||
@ -1,175 +0,0 @@
|
||||
import * as React from 'react';
|
||||
|
||||
import { type Call, CallStates, type ControlStates } from 'storybook/internal/instrumenter';
|
||||
|
||||
import { transparentize } from 'polished';
|
||||
import { styled } from 'storybook/theming';
|
||||
|
||||
import { isTestAssertionError, useAnsiToHtmlFilter } from '../utils';
|
||||
import { Empty } from './EmptyState';
|
||||
import { Interaction } from './Interaction';
|
||||
import { Subnav } from './Subnav';
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
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,
|
||||
}) {
|
||||
const filter = useAnsiToHtmlFilter();
|
||||
return (
|
||||
<Container>
|
||||
{(interactions.length > 0 || hasException) && (
|
||||
<Subnav
|
||||
controls={controls}
|
||||
controlStates={controlStates}
|
||||
status={
|
||||
isPlaying ? CallStates.ACTIVE : hasException ? CallStates.ERROR : CallStates.DONE
|
||||
}
|
||||
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}`;
|
||||
}
|
||||
@ -1,93 +0,0 @@
|
||||
import React, { Fragment, useState } from 'react';
|
||||
|
||||
import { ChevronSmallDownIcon } from '@storybook/icons';
|
||||
|
||||
import { convert, styled, themes } from 'storybook/theming';
|
||||
|
||||
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>
|
||||
);
|
||||
@ -1,112 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
import { styled } from 'storybook/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
|
||||
`,
|
||||
},
|
||||
};
|
||||
@ -1,146 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
import { styled, typography } from 'storybook/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>
|
||||
);
|
||||
};
|
||||
@ -1,219 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
import type { Call } from 'storybook/internal/instrumenter';
|
||||
|
||||
import { styled, typography } from 'storybook/theming';
|
||||
|
||||
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) } }} />
|
||||
<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} />;
|
||||
@ -1,465 +0,0 @@
|
||||
import type { ReactElement } from 'react';
|
||||
import React, { Fragment } from 'react';
|
||||
|
||||
import type { Call, CallRef, ElementRef } from 'storybook/internal/instrumenter';
|
||||
|
||||
import { ObjectInspector } from '@devtools-ds/object-inspector';
|
||||
import { useTheme } from 'storybook/theming';
|
||||
|
||||
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 }}>
|
||||
<
|
||||
</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 }}>
|
||||
>
|
||||
</span>
|
||||
{!id && classNames.length === 0 && innerText && (
|
||||
<>
|
||||
<span key={`${name}_text`}>{innerText}</span>
|
||||
<span key={`${name}_close_lt`} style={{ color: colors.muted }}>
|
||||
<
|
||||
</span>
|
||||
<span key={`${name}_close_tag`} style={{ color: colors.tag.name }}>
|
||||
/{name}
|
||||
</span>
|
||||
<span key={`${name}_close_gt`} style={{ color: colors.muted }}>
|
||||
>
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
export const DateNode = ({ value }: { value: string | Date }) => {
|
||||
const string = value instanceof Date ? value.toISOString() : value;
|
||||
const [date, time, ms] = string.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}`}>, </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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@ -1,25 +0,0 @@
|
||||
import { CallStates } from 'storybook/internal/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 },
|
||||
};
|
||||
@ -1,45 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
import { type Call, CallStates } from 'storybook/internal/instrumenter';
|
||||
|
||||
import { styled, typography } from 'storybook/theming';
|
||||
|
||||
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>
|
||||
);
|
||||
};
|
||||
@ -1,24 +0,0 @@
|
||||
import { CallStates } from 'storybook/internal/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 },
|
||||
};
|
||||
@ -1,46 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
import { type Call, CallStates } from 'storybook/internal/instrumenter';
|
||||
|
||||
import { CheckIcon, CircleIcon, PlayIcon, StopAltIcon } from '@storybook/icons';
|
||||
|
||||
import { transparentize } from 'polished';
|
||||
import { styled, useTheme } from 'storybook/theming';
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -1,91 +0,0 @@
|
||||
import { CallStates } from 'storybook/internal/instrumenter';
|
||||
|
||||
import { action } from 'storybook/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,
|
||||
},
|
||||
},
|
||||
};
|
||||
@ -1,194 +0,0 @@
|
||||
import type { ComponentProps } from 'react';
|
||||
import React from 'react';
|
||||
|
||||
import {
|
||||
Bar,
|
||||
Button,
|
||||
IconButton,
|
||||
P,
|
||||
Separator,
|
||||
TooltipNote,
|
||||
WithTooltip,
|
||||
} from 'storybook/internal/components';
|
||||
import type { Call, ControlStates } from 'storybook/internal/instrumenter';
|
||||
import { CallStates } from 'storybook/internal/instrumenter';
|
||||
|
||||
import {
|
||||
FastForwardIcon,
|
||||
PlayBackIcon,
|
||||
PlayNextIcon,
|
||||
RewindIcon,
|
||||
SyncIcon,
|
||||
} from '@storybook/icons';
|
||||
|
||||
import { styled } from 'storybook/theming';
|
||||
|
||||
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>
|
||||
);
|
||||
};
|
||||
@ -1,5 +0,0 @@
|
||||
export const ADDON_ID = 'storybook/interactions';
|
||||
export const PANEL_ID = `${ADDON_ID}/panel`;
|
||||
|
||||
export const TUTORIAL_VIDEO_LINK = 'https://youtu.be/Waht9qq7AoA';
|
||||
export const DOCUMENTATION_LINK = 'writing-tests/interaction-testing';
|
||||
@ -1,5 +0,0 @@
|
||||
import { definePreview } from 'storybook/preview-api';
|
||||
|
||||
import * as addonAnnotations from './preview';
|
||||
|
||||
export default () => definePreview(addonAnnotations);
|
||||
@ -1,47 +0,0 @@
|
||||
import React, { useCallback } from 'react';
|
||||
|
||||
import { AddonPanel, Badge, Spaced } from 'storybook/internal/components';
|
||||
|
||||
import type { Combo } from 'storybook/manager-api';
|
||||
import { Consumer, addons, types, useAddonState } from 'storybook/manager-api';
|
||||
|
||||
import { Panel } from './Panel';
|
||||
import { ADDON_ID, PANEL_ID } from './constants';
|
||||
|
||||
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' }}>Interactions</span>
|
||||
{interactionsCount && !hasException ? (
|
||||
<Badge status="neutral">{interactionsCount}</Badge>
|
||||
) : null}
|
||||
{hasException ? <Badge status="negative">{interactionsCount}</Badge> : null}
|
||||
</Spaced>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
addons.register(ADDON_ID, (api) => {
|
||||
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>
|
||||
);
|
||||
},
|
||||
});
|
||||
});
|
||||
@ -1,148 +0,0 @@
|
||||
import { type Call, CallStates } from 'storybook/internal/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: [] as any[],
|
||||
isCollapsed: false,
|
||||
isHidden: false,
|
||||
toggleCollapsed: () => {},
|
||||
}));
|
||||
@ -1,2 +0,0 @@
|
||||
// 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,21 +0,0 @@
|
||||
import { instrument } from 'storybook/internal/instrumenter';
|
||||
import type { PlayFunction, StepLabel, StepRunner, StoryContext } from 'storybook/internal/types';
|
||||
|
||||
import type { InteractionsParameters } from './types';
|
||||
|
||||
export const runStep = instrument(
|
||||
{
|
||||
// It seems like the label is unused, but the instrumenter has access to it
|
||||
// The context will be bounded later in StoryRender, so that the user can write just:
|
||||
// await step("label", (context) => {
|
||||
// // labeled step
|
||||
// });
|
||||
step: (label: StepLabel, play: PlayFunction, context: StoryContext) => play(context),
|
||||
},
|
||||
{ intercept: true }
|
||||
// perhaps csf types need to be updated? StepRunner expects Promise<void> and not Promise<void> | void
|
||||
).step as StepRunner;
|
||||
|
||||
export const parameters: InteractionsParameters['test'] = {
|
||||
throwPlayFunctionExceptions: false,
|
||||
};
|
||||
@ -1,20 +0,0 @@
|
||||
/** Interaction Testing Theme PLACEHOLDER until SB is updated <3 */
|
||||
interface Colors {
|
||||
pure?: {
|
||||
gray?: any;
|
||||
};
|
||||
}
|
||||
|
||||
export const colors: Colors = {
|
||||
pure: {
|
||||
gray: {
|
||||
500: '#CCCCCC',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const theme = {
|
||||
colors,
|
||||
};
|
||||
|
||||
export default theme;
|
||||
@ -1,14 +0,0 @@
|
||||
export interface InteractionsParameters {
|
||||
/**
|
||||
* Interactions configuration
|
||||
*
|
||||
* @see https://storybook.js.org/docs/essentials/interactions
|
||||
*/
|
||||
test: {
|
||||
/** Ignore unhandled errors during test execution */
|
||||
dangerouslyIgnoreUnhandledErrors?: boolean;
|
||||
|
||||
/** Whether to throw exceptions coming from the play function */
|
||||
throwPlayFunctionExceptions?: boolean;
|
||||
};
|
||||
}
|
||||
@ -1,39 +0,0 @@
|
||||
import Filter from 'ansi-to-html';
|
||||
import { type StorybookTheme, useTheme } from 'storybook/theming';
|
||||
|
||||
export function isTestAssertionError(error: unknown) {
|
||||
return isChaiError(error) || isJestError(error);
|
||||
}
|
||||
|
||||
export function isChaiError(error: unknown) {
|
||||
return (
|
||||
error &&
|
||||
typeof error === 'object' &&
|
||||
'name' in error &&
|
||||
typeof error.name === 'string' &&
|
||||
error.name === 'AssertionError'
|
||||
);
|
||||
}
|
||||
|
||||
export function isJestError(error: unknown) {
|
||||
return (
|
||||
error &&
|
||||
typeof error === 'object' &&
|
||||
'message' in error &&
|
||||
typeof error.message === 'string' &&
|
||||
error.message.startsWith('expect(')
|
||||
);
|
||||
}
|
||||
|
||||
export function createAnsiToHtmlFilter(theme: StorybookTheme) {
|
||||
return new Filter({
|
||||
fg: theme.color.defaultText,
|
||||
bg: theme.background.content,
|
||||
escapeXML: true,
|
||||
});
|
||||
}
|
||||
|
||||
export function useAnsiToHtmlFilter() {
|
||||
const theme = useTheme();
|
||||
return createAnsiToHtmlFilter(theme);
|
||||
}
|
||||
@ -1,135 +0,0 @@
|
||||
import { global as globalThis } from '@storybook/global';
|
||||
|
||||
import {
|
||||
expect,
|
||||
fireEvent,
|
||||
fn,
|
||||
userEvent as testUserEvent,
|
||||
waitFor,
|
||||
waitForElementToBeRemoved,
|
||||
within,
|
||||
} from 'storybook/test';
|
||||
|
||||
export default {
|
||||
component: globalThis.Components.Form,
|
||||
args: {
|
||||
onSuccess: fn(),
|
||||
},
|
||||
globals: {
|
||||
sb_theme: 'light',
|
||||
},
|
||||
};
|
||||
|
||||
export const Validation = {
|
||||
play: async (context) => {
|
||||
const { args, canvasElement, step } = context;
|
||||
const canvas = within(canvasElement);
|
||||
|
||||
await step('Submit', async () => fireEvent.click(canvas.getByRole('button')));
|
||||
|
||||
await expect(args.onSuccess).not.toHaveBeenCalled();
|
||||
},
|
||||
};
|
||||
|
||||
export const Type = {
|
||||
play: async ({ canvasElement, userEvent }) => {
|
||||
const canvas = within(canvasElement);
|
||||
await userEvent.type(canvas.getByTestId('value'), 'foobar');
|
||||
},
|
||||
};
|
||||
|
||||
export const Step = {
|
||||
play: async ({ step }) => {
|
||||
await step('Enter value', Type.play);
|
||||
},
|
||||
};
|
||||
|
||||
export const TypeAndClear = {
|
||||
play: async ({ canvasElement, userEvent }) => {
|
||||
const canvas = within(canvasElement);
|
||||
await userEvent.type(canvas.getByTestId('value'), 'initial value');
|
||||
await userEvent.clear(canvas.getByTestId('value'));
|
||||
await userEvent.type(canvas.getByTestId('value'), 'final value');
|
||||
},
|
||||
};
|
||||
|
||||
export const Callback = {
|
||||
play: async ({ args, canvasElement, step }) => {
|
||||
const canvas = within(canvasElement);
|
||||
await step('Enter value', Type.play);
|
||||
|
||||
await step('Submit', async () => {
|
||||
await fireEvent.click(canvas.getByRole('button'));
|
||||
});
|
||||
|
||||
await expect(args.onSuccess).toHaveBeenCalled();
|
||||
},
|
||||
};
|
||||
|
||||
// NOTE: of course you can use `findByText()` to implicitly waitFor, but we want
|
||||
// an explicit test here
|
||||
export const SyncWaitFor = {
|
||||
play: async ({ canvasElement, step }) => {
|
||||
const canvas = within(canvasElement);
|
||||
await step('Submit form', Callback.play);
|
||||
await waitFor(() => canvas.getByText('Completed!!'));
|
||||
},
|
||||
};
|
||||
|
||||
export const AsyncWaitFor = {
|
||||
play: async ({ canvasElement, step }) => {
|
||||
const canvas = within(canvasElement);
|
||||
await step('Submit form', Callback.play);
|
||||
await waitFor(async () => canvas.getByText('Completed!!'));
|
||||
},
|
||||
};
|
||||
|
||||
export const WaitForElementToBeRemoved = {
|
||||
play: async ({ canvasElement, step }) => {
|
||||
const canvas = within(canvasElement);
|
||||
await step('SyncWaitFor play fn', SyncWaitFor.play);
|
||||
await waitForElementToBeRemoved(() => canvas.queryByText('Completed!!'), {
|
||||
timeout: 2000,
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
export const WithLoaders = {
|
||||
loaders: [async () => new Promise((resolve) => setTimeout(resolve, 2000))],
|
||||
play: async ({ step }) => {
|
||||
await step('Submit form', Callback.play);
|
||||
},
|
||||
};
|
||||
|
||||
const UserEventSetup = {
|
||||
play: async (context) => {
|
||||
const { args, canvasElement, step, userEvent } = context;
|
||||
const canvas = within(canvasElement);
|
||||
await step('Select and type on input using user-event v14 setup', async () => {
|
||||
const input = canvas.getByRole('textbox');
|
||||
await userEvent.click(input);
|
||||
await userEvent.type(input, 'Typing ...');
|
||||
});
|
||||
await step('Tab and press enter on submit button', async () => {
|
||||
// Vitest's userEvent does not support pointer events, so we use storybook's
|
||||
await testUserEvent.pointer([
|
||||
{ keys: '[TouchA>]', target: canvas.getByRole('textbox') },
|
||||
{ keys: '[/TouchA]' },
|
||||
]);
|
||||
const submitButton = await canvas.findByRole('button');
|
||||
|
||||
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 userEvent.tab();
|
||||
await userEvent.keyboard('{enter}');
|
||||
await expect(submitButton).toHaveFocus();
|
||||
}
|
||||
|
||||
await expect(args.onSuccess).toHaveBeenCalled();
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
export { UserEventSetup };
|
||||
@ -1,27 +0,0 @@
|
||||
import { global as globalThis } from '@storybook/global';
|
||||
|
||||
import { userEvent, within } from 'storybook/test';
|
||||
|
||||
export default {
|
||||
component: globalThis.Components.Button,
|
||||
args: {
|
||||
label: 'Button',
|
||||
// onClick: fn(), <-- this is intentionally missing to trigger an unhandled error
|
||||
},
|
||||
argTypes: {
|
||||
onClick: { type: 'function' },
|
||||
},
|
||||
parameters: {
|
||||
actions: { argTypesRegex: '^on[A-Z].*' },
|
||||
chromatic: { disable: true },
|
||||
},
|
||||
tags: ['!test', '!vitest'],
|
||||
};
|
||||
|
||||
export const Default = {
|
||||
play: async (context) => {
|
||||
const { args, canvasElement } = context;
|
||||
const canvas = within(canvasElement);
|
||||
await userEvent.click(canvas.getByRole('button'));
|
||||
},
|
||||
};
|
||||
@ -1,7 +0,0 @@
|
||||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"strict": false
|
||||
},
|
||||
"include": ["src/**/*"]
|
||||
}
|
||||
@ -1,10 +0,0 @@
|
||||
import { defineConfig, mergeConfig } from 'vitest/config';
|
||||
|
||||
import { vitestCommonConfig } from '../../vitest.workspace';
|
||||
|
||||
export default mergeConfig(
|
||||
vitestCommonConfig,
|
||||
defineConfig({
|
||||
// Add custom config here
|
||||
})
|
||||
);
|
||||
@ -34,7 +34,6 @@ import { getAddonNames } from './utils';
|
||||
const ADDON_NAME = '@storybook/addon-test' as const;
|
||||
const EXTENSIONS = ['.ts', '.tsx', '.js', '.jsx', '.cts', '.mts', '.cjs', '.mjs'];
|
||||
|
||||
const addonInteractionsName = '@storybook/addon-interactions';
|
||||
const addonA11yName = '@storybook/addon-a11y';
|
||||
|
||||
const findFile = async (basename: string, extensions = EXTENSIONS) =>
|
||||
@ -210,38 +209,6 @@ export default async function postInstall(options: PostinstallOptions) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (info.hasAddonInteractions) {
|
||||
let shouldUninstall = options.yes;
|
||||
if (!options.yes) {
|
||||
printInfo(
|
||||
'⚠️ Attention',
|
||||
dedent`
|
||||
We have detected that you're using ${addonInteractionsName}.
|
||||
The Storybook test addon is a replacement for the interactions addon, so you must uninstall and unregister it in order to use the test addon correctly. This can be done automatically.
|
||||
|
||||
More info: ${picocolors.cyan('https://storybook.js.org/docs/writing-tests/test-addon')}
|
||||
`
|
||||
);
|
||||
|
||||
const response = isInteractive
|
||||
? await prompts({
|
||||
type: 'confirm',
|
||||
name: 'shouldUninstall',
|
||||
message: `Would you like me to remove and unregister ${addonInteractionsName}? Press N to abort the entire installation.`,
|
||||
initial: true,
|
||||
})
|
||||
: { shouldUninstall: true };
|
||||
|
||||
shouldUninstall = response.shouldUninstall;
|
||||
}
|
||||
|
||||
if (shouldUninstall) {
|
||||
await $({
|
||||
stdio: 'inherit',
|
||||
})`storybook remove ${addonInteractionsName} --package-manager ${options.packageManager} --config-dir ${options.configDir}`;
|
||||
}
|
||||
}
|
||||
|
||||
if (info.frameworkPackageName === '@storybook/nextjs') {
|
||||
printInfo(
|
||||
'🍿 Just so you know...',
|
||||
@ -564,8 +531,6 @@ async function getStorybookInfo({ configDir, packageManager: pkgMgr }: Postinsta
|
||||
isCritical: true,
|
||||
});
|
||||
|
||||
const hasAddonInteractions = !!(await presets.apply('ADDON_INTERACTIONS_IN_USE', false));
|
||||
|
||||
const core = await presets.apply('core', {});
|
||||
|
||||
const { builder, renderer } = core;
|
||||
@ -593,7 +558,6 @@ async function getStorybookInfo({ configDir, packageManager: pkgMgr }: Postinsta
|
||||
frameworkPackageName,
|
||||
builderPackageName,
|
||||
rendererPackageName,
|
||||
hasAddonInteractions,
|
||||
addons: getAddonNames(config),
|
||||
};
|
||||
}
|
||||
|
||||
@ -180,24 +180,3 @@ export const staticDirs: PresetPropertyFn<'staticDirs'> = async (values = [], op
|
||||
...values,
|
||||
];
|
||||
};
|
||||
|
||||
export const managerEntries: PresetProperty<'managerEntries'> = async (entry = [], options) => {
|
||||
// Throw an error when addon-interactions is used.
|
||||
// This is done by reading an annotation defined in addon-interactions, which although not ideal,
|
||||
// is a way to handle addon conflict without having to worry about the order of which they are registered
|
||||
const annotation = await options.presets.apply('ADDON_INTERACTIONS_IN_USE', false);
|
||||
if (annotation) {
|
||||
// eslint-disable-next-line local-rules/no-uncategorized-errors
|
||||
const error = new Error(
|
||||
dedent`
|
||||
You have both "@storybook/addon-interactions" and "@storybook/addon-test" listed as addons in your Storybook config. This is not allowed, as @storybook/addon-test is a replacement for @storybook/addon-interactions.
|
||||
Please remove "@storybook/addon-interactions" from the addons array in your main Storybook config at ${options.configDir} and remove the dependency from your package.json file.
|
||||
`
|
||||
);
|
||||
error.name = 'AddonConflictError';
|
||||
throw error;
|
||||
}
|
||||
|
||||
// for whatever reason seems like the return type of managerEntries is not correct (it expects never instead of string[])
|
||||
return entry as never;
|
||||
};
|
||||
|
||||
@ -50,7 +50,7 @@ npx storybook@latest init --builder vite && npm run storybook
|
||||
5. Remove Storybook Webpack cache (`rm -rf node_modules/.cache`)
|
||||
6. Update your `/public/index.html` file for Vite (be sure there are no `%PUBLIC_URL%` inside it, which is a CRA variable)
|
||||
7. Be sure that any files containing JSX syntax use a `.jsx` or `.tsx` file extension, which [Vite requires](https://vitejs.dev/guide/features.html#jsx). This includes `.storybook/preview.jsx` if it contains JSX syntax.
|
||||
8. If you are using `@storybook/addon-interactions`, for now you'll need to add a [workaround](https://github.com/storybookjs/storybook/issues/18399) for jest-mock relying on the node `global` variable by creating a `.storybook/preview-head.html` file containing the following:
|
||||
8. For now you'll need to add a [workaround](https://github.com/storybookjs/storybook/issues/18399) for jest-mock relying on the node `global` variable by creating a `.storybook/preview-head.html` file containing the following:
|
||||
|
||||
```html
|
||||
<script>
|
||||
|
||||
@ -26,7 +26,6 @@ const INCLUDE_CANDIDATES = [
|
||||
'@storybook/addon-essentials/outline/preview',
|
||||
'@storybook/addon-essentials/viewport/preview',
|
||||
'@storybook/addon-highlight/preview',
|
||||
'@storybook/addon-interactions/preview',
|
||||
'@storybook/addon-links/preview',
|
||||
'@storybook/addon-measure/preview',
|
||||
'@storybook/addon-outline/preview',
|
||||
|
||||
@ -316,23 +316,6 @@ describe('NPM Proxy', () => {
|
||||
"unrelated-and-should-be-filtered": {
|
||||
"version": "1.0.0"
|
||||
},
|
||||
"@storybook/addon-interactions": {
|
||||
"version": "7.0.0-rc.7",
|
||||
"resolved": "https://registry.npmjs.org/@storybook/addon-interactions/-/addon-interactions-7.0.0-rc.7.tgz",
|
||||
"overridden": false,
|
||||
"dependencies": {
|
||||
"@storybook/package": {
|
||||
"version": "6.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@storybook/package/-/core-7.0.0-rc.7.tgz",
|
||||
"overridden": false,
|
||||
"dependencies": {
|
||||
"@storybook/channels": {
|
||||
"version": "7.0.0-rc.7"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"@storybook/package": {
|
||||
"version": "7.0.0-beta.11",
|
||||
"resolved": "https://registry.npmjs.org/@storybook/package/-/core-7.0.0-beta.11.tgz",
|
||||
@ -369,12 +352,6 @@ describe('NPM Proxy', () => {
|
||||
{
|
||||
"dedupeCommand": "npm dedupe",
|
||||
"dependencies": {
|
||||
"@storybook/addon-interactions": [
|
||||
{
|
||||
"location": "",
|
||||
"version": "7.0.0-rc.7",
|
||||
},
|
||||
],
|
||||
"@storybook/channels": [
|
||||
{
|
||||
"location": "",
|
||||
|
||||
@ -246,10 +246,10 @@ describe('PNPM Proxy', () => {
|
||||
}
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addon-interactions": {
|
||||
"from": "@storybook/addon-interactions",
|
||||
"@storybook/addon-example": {
|
||||
"from": "@storybook/addon-example",
|
||||
"version": "7.0.0-beta.13",
|
||||
"resolved": "https://registry.npmjs.org/@storybook/addon-interactions/-/addon-interactions-7.0.0-beta.13.tgz",
|
||||
"resolved": "https://registry.npmjs.org/@storybook/addon-example/-/addon-example-7.0.0-beta.13.tgz",
|
||||
"dependencies": {
|
||||
"@storybook/package": {
|
||||
"from": "@storybook/package",
|
||||
@ -314,7 +314,7 @@ describe('PNPM Proxy', () => {
|
||||
{
|
||||
"dedupeCommand": "pnpm dedupe",
|
||||
"dependencies": {
|
||||
"@storybook/addon-interactions": [
|
||||
"@storybook/addon-example": [
|
||||
{
|
||||
"location": "",
|
||||
"version": "7.0.0-beta.13",
|
||||
|
||||
@ -210,7 +210,7 @@ describe('Yarn 1 Proxy', () => {
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "@storybook/addon-interactions@7.0.0-beta.19",
|
||||
"name": "@storybook/addon-example@7.0.0-beta.19",
|
||||
"children": [
|
||||
{
|
||||
"name": "@storybook/package@7.0.0-beta.19",
|
||||
@ -229,7 +229,7 @@ describe('Yarn 1 Proxy', () => {
|
||||
{
|
||||
"dedupeCommand": "yarn dedupe",
|
||||
"dependencies": {
|
||||
"@storybook/addon-interactions": [
|
||||
"@storybook/addon-example": [
|
||||
{
|
||||
"location": "",
|
||||
"version": "7.0.0-beta.19",
|
||||
|
||||
@ -38,7 +38,6 @@ vi.mock('./utils/safeResolve', () => {
|
||||
'@storybook/addon-docs',
|
||||
'@storybook/addon-cool',
|
||||
'@storybook/addon-docs/preset',
|
||||
'@storybook/addon-interactions/preset',
|
||||
'@storybook/addon-essentials',
|
||||
'@storybook/addon-knobs/manager',
|
||||
'@storybook/addon-knobs/register',
|
||||
@ -446,10 +445,9 @@ describe('loadPreset', () => {
|
||||
mockPreset('@storybook/addon-docs/preset', {});
|
||||
mockPreset('addon-foo/register.js', {});
|
||||
mockPreset('@storybook/addon-cool', {});
|
||||
mockPreset('@storybook/addon-interactions/preset', {});
|
||||
mockPreset('addon-bar', {
|
||||
addons: ['@storybook/addon-cool'],
|
||||
presets: ['@storybook/addon-interactions/preset'],
|
||||
presets: [],
|
||||
});
|
||||
mockPreset('addon-baz/register.js', {});
|
||||
mockPreset('@storybook/addon-notes/register-panel', {});
|
||||
@ -541,11 +539,6 @@ describe('loadPreset', () => {
|
||||
managerEntries: [normalize('addon-foo/register')],
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '@storybook/addon-interactions/preset',
|
||||
options: {},
|
||||
preset: {},
|
||||
},
|
||||
{
|
||||
name: '@storybook/addon-cool',
|
||||
options: {},
|
||||
@ -667,11 +660,6 @@ describe('loadPreset', () => {
|
||||
"options": {},
|
||||
"preset": {},
|
||||
},
|
||||
{
|
||||
"name": "@storybook/addon-interactions/preset",
|
||||
"options": {},
|
||||
"preset": {},
|
||||
},
|
||||
{
|
||||
"name": "@storybook/addon-cool",
|
||||
"options": {},
|
||||
|
||||
@ -47,22 +47,8 @@ afterEach(() => {
|
||||
describe.each([
|
||||
['docs', 'controls', ['docs', 'controls']],
|
||||
['docs', 'controls', ['docs', 'foo/node_modules/@storybook/addon-controls']],
|
||||
[
|
||||
'actions',
|
||||
'interactions',
|
||||
[
|
||||
'foo\\node_modules\\@storybook\\addon-essentials',
|
||||
'foo\\node_modules\\@storybook\\addon-interactions',
|
||||
],
|
||||
],
|
||||
[
|
||||
'actions',
|
||||
'interactions',
|
||||
[
|
||||
'foo\\\\node_modules\\\\@storybook\\\\addon-essentials',
|
||||
'foo\\\\node_modules\\\\@storybook\\\\addon-interactions',
|
||||
],
|
||||
],
|
||||
['actions', 'interactions', ['foo\\node_modules\\@storybook\\addon-essentials']],
|
||||
['actions', 'interactions', ['foo\\\\node_modules\\\\@storybook\\\\addon-essentials']],
|
||||
['docs', 'controls', [{ name: '@storybook/addon-docs' }, 'controls']],
|
||||
['docs', 'controls', ['essentials', 'controls']],
|
||||
['docs', 'controls', ['essentials']],
|
||||
|
||||
@ -7,7 +7,6 @@ export default {
|
||||
'@storybook/addon-essentials': '9.0.0-alpha.8',
|
||||
'@storybook/addon-mdx-gfm': '9.0.0-alpha.8',
|
||||
'@storybook/addon-highlight': '9.0.0-alpha.8',
|
||||
'@storybook/addon-interactions': '9.0.0-alpha.8',
|
||||
'@storybook/addon-jest': '9.0.0-alpha.8',
|
||||
'@storybook/addon-links': '9.0.0-alpha.8',
|
||||
'@storybook/addon-measure': '9.0.0-alpha.8',
|
||||
|
||||
@ -18,7 +18,6 @@ const config: StorybookConfig = {
|
||||
},
|
||||
},
|
||||
'@storybook/addon-essentials',
|
||||
'@storybook/addon-interactions',
|
||||
'@storybook/addon-storysource',
|
||||
'@storybook/addon-jest',
|
||||
'@storybook/addon-a11y',
|
||||
|
||||
@ -458,7 +458,7 @@ export class Instrumenter {
|
||||
|
||||
// TODO This function should not needed anymore, as the channel already serializes values with telejson
|
||||
// Possibly we need to add HTMLElement support to telejson though
|
||||
// Keeping this function here, as removing it means we need to refactor the deserializing that happens in addon-interactions
|
||||
// Keeping this function here, as removing it means we need to refactor the deserializing that happens in core interactions
|
||||
const maximumDepth = 25; // mimicks the max depth of telejson
|
||||
const serializeValues = (value: any, depth: number, seen: unknown[]): any => {
|
||||
if (seen.includes(value)) {
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
// @TODO: use addon-interactions and remove the rule disable above
|
||||
import React from 'react';
|
||||
|
||||
import type { Meta, StoryFn, StoryObj } from '@storybook/react-vite';
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
// @TODO: use addon-interactions and remove the rule disable above
|
||||
import React, { useState } from 'react';
|
||||
|
||||
import type { Meta, StoryObj } from '@storybook/react-vite';
|
||||
|
||||
@ -11,8 +11,8 @@ import type { Renderer, StepRunner } from 'storybook/internal/types';
|
||||
* step('label', () => {});
|
||||
* ```
|
||||
*
|
||||
* ...and runs it. The prototypical example is from `@storybook/addon-interactions` where the step
|
||||
* runner will decorate all instrumented code inside the step with information about the label.
|
||||
* ...and runs it. The prototypical example is from `core/interactions` where the step runner will
|
||||
* decorate all instrumented code inside the step with information about the label.
|
||||
*
|
||||
* In theory it is possible to have more than one addon that wants to run steps; they can be
|
||||
* composed together in a similar fashion to decorators. In some ways step runners are like
|
||||
|
||||
@ -5,7 +5,7 @@ The `storybook/test` package contains utilities for testing your stories inside
|
||||
## Usage
|
||||
|
||||
The test package exports instrumented versions of [@vitest/spy](https://vitest.dev/api/mock.html), [@vitest/expect](https://vitest.dev/api/expect.html) (based on [chai](https://www.chaijs.com/)), [@testing-library/dom](https://testing-library.com/docs/dom-testing-library/intro) and [@testing-library/user-event](https://testing-library.com/docs/user-event/intro).
|
||||
The instrumentation makes sure you can debug those methods in the [addon-interactions](https://storybook.js.org/addons/@storybook/addon-interactions) panel.
|
||||
The instrumentation makes sure you can debug those methods in the [interactions](https://storybook.js.org/addons/@storybook/addon-interactions) panel.
|
||||
|
||||
```ts
|
||||
// Button.stories.ts
|
||||
|
||||
@ -6,12 +6,7 @@ import { SbPage, hasVitestIntegration } from './util';
|
||||
const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:8001';
|
||||
const templateName = process.env.STORYBOOK_TEMPLATE_NAME || '';
|
||||
|
||||
test.describe('addon-interactions', () => {
|
||||
test.skip(
|
||||
hasVitestIntegration,
|
||||
`Skipping ${templateName}, which does not have addon-interactions set up.`
|
||||
);
|
||||
|
||||
test.describe('interactions', () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.goto(storybookUrl);
|
||||
await new SbPage(page, expect).waitUntilLoaded();
|
||||
@ -21,7 +16,7 @@ test.describe('addon-interactions', () => {
|
||||
// templateName is e.g. 'vue-cli/default-js'
|
||||
test.skip(
|
||||
/^(lit)/i.test(`${templateName}`),
|
||||
`Skipping ${templateName}, which does not support addon-interactions`
|
||||
`Skipping ${templateName}, which does not support interactions`
|
||||
);
|
||||
test.skip(
|
||||
templateName.includes('react-native-web'),
|
||||
@ -53,7 +48,7 @@ test.describe('addon-interactions', () => {
|
||||
// templateName is e.g. 'vue-cli/default-js'
|
||||
test.skip(
|
||||
/^(lit)/i.test(`${templateName}`),
|
||||
`Skipping ${templateName}, which does not support addon-interactions`
|
||||
`Skipping ${templateName}, which does not support interactions`
|
||||
);
|
||||
test.skip(
|
||||
browserName === 'firefox',
|
||||
@ -131,7 +126,7 @@ test.describe('addon-interactions', () => {
|
||||
test('should show unhandled errors', async ({ page }) => {
|
||||
test.skip(
|
||||
/^(lit)/i.test(`${templateName}`),
|
||||
`Skipping ${templateName}, which does not support addon-interactions`
|
||||
`Skipping ${templateName}, which does not support interactions`
|
||||
);
|
||||
// We trigger the implicit action error here, but angular works a bit different with implicit actions.
|
||||
test.skip(/^(angular)/i.test(`${templateName}`));
|
||||
|
||||
@ -7,11 +7,6 @@ const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:8001';
|
||||
const templateName = process.env.STORYBOOK_TEMPLATE_NAME || '';
|
||||
|
||||
test.describe('addon-test', () => {
|
||||
test.skip(
|
||||
!hasVitestIntegration,
|
||||
`Skipping ${templateName}, which does not have addon-test set up.`
|
||||
);
|
||||
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.goto(storybookUrl);
|
||||
await new SbPage(page, expect).waitUntilLoaded();
|
||||
|
||||
@ -78,10 +78,10 @@ type CLIOptions = {
|
||||
*
|
||||
* ```sh
|
||||
* sb add "@storybook/addon-docs"
|
||||
* sb add "@storybook/addon-interactions@7.0.1"
|
||||
* sb add "@storybook/addon-test@9.0.1"
|
||||
* ```
|
||||
*
|
||||
* If there is no version specifier and it's a storybook addon, it will try to use the version
|
||||
* If there is no version specifier and it's a Storybook addon, it will try to use the version
|
||||
* specifier matching your current Storybook install version.
|
||||
*/
|
||||
export async function add(
|
||||
|
||||
@ -4,11 +4,7 @@ const wrapForPnp = (packageName) => dirname(require.resolve(join(packageName, 'p
|
||||
|
||||
const config = {
|
||||
stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
|
||||
addons: [
|
||||
wrapForPnp('@storybook/addon-links'),
|
||||
wrapForPnp('@storybook/addon-essentials'),
|
||||
wrapForPnp('@storybook/addon-interactions'),
|
||||
],
|
||||
addons: [wrapForPnp('@storybook/addon-links'), wrapForPnp('@storybook/addon-essentials')],
|
||||
framework: {
|
||||
name: wrapForPnp('@storybook/angular'),
|
||||
options: {},
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
const config = {
|
||||
stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
|
||||
addons: ['@storybook/addon-essentials', '@storybook/addon-interactions'],
|
||||
addons: ['@storybook/addon-essentials', '@storybook/addon-test'],
|
||||
framework: {
|
||||
name: '@storybook/angular',
|
||||
options: {},
|
||||
|
||||
@ -301,11 +301,6 @@ export async function baseGenerator(
|
||||
...extraAddonsToInstall,
|
||||
].filter(Boolean);
|
||||
|
||||
if (hasInteractiveStories(rendererId) && !features.includes('test')) {
|
||||
addons.push('@storybook/addon-interactions');
|
||||
addonPackages.push('@storybook/addon-interactions');
|
||||
}
|
||||
|
||||
const packageJson = await packageManager.retrievePackageJson();
|
||||
const installedDependencies = new Set(
|
||||
Object.keys({ ...packageJson.dependencies, ...packageJson.devDependencies })
|
||||
|
||||
@ -90,7 +90,6 @@ describe('configureMain', () => {
|
||||
addons: [
|
||||
"%%path.dirname(require.resolve(path.join('@storybook/addon-essentials', 'package.json')))%%",
|
||||
"%%path.dirname(require.resolve(path.join('@storybook/preset-create-react-app', 'package.json')))%%",
|
||||
"%%path.dirname(require.resolve(path.join('@storybook/addon-interactions', 'package.json')))%%",
|
||||
],
|
||||
storybookConfigFolder: '.storybook',
|
||||
framework: {
|
||||
@ -115,7 +114,6 @@ describe('configureMain', () => {
|
||||
"addons": [
|
||||
path.dirname(require.resolve(path.join('@storybook/addon-essentials', 'package.json'))),
|
||||
path.dirname(require.resolve(path.join('@storybook/preset-create-react-app', 'package.json'))),
|
||||
path.dirname(require.resolve(path.join('@storybook/addon-interactions', 'package.json')))
|
||||
],
|
||||
"framework": {
|
||||
"name": path.dirname(require.resolve(path.join('@storybook/react-webpack5', 'package.json')))
|
||||
|
||||
@ -108,7 +108,6 @@
|
||||
"@storybook/addon-docs": "workspace:*",
|
||||
"@storybook/addon-essentials": "workspace:*",
|
||||
"@storybook/addon-highlight": "workspace:*",
|
||||
"@storybook/addon-interactions": "workspace:*",
|
||||
"@storybook/addon-jest": "workspace:*",
|
||||
"@storybook/addon-links": "workspace:*",
|
||||
"@storybook/addon-mdx-gfm": "workspace:*",
|
||||
|
||||
@ -5,7 +5,6 @@
|
||||
"implicitDependencies": [
|
||||
"core",
|
||||
"addon-essentials",
|
||||
"addon-interactions",
|
||||
"addon-links",
|
||||
"addon-onboarding",
|
||||
"blocks",
|
||||
|
||||
@ -5,7 +5,6 @@
|
||||
"implicitDependencies": [
|
||||
"core",
|
||||
"addon-essentials",
|
||||
"addon-interactions",
|
||||
"addon-links",
|
||||
"addon-onboarding",
|
||||
"blocks",
|
||||
|
||||
@ -5,7 +5,6 @@
|
||||
"implicitDependencies": [
|
||||
"core",
|
||||
"addon-essentials",
|
||||
"addon-interactions",
|
||||
"addon-links",
|
||||
"addon-onboarding",
|
||||
"blocks",
|
||||
|
||||
@ -5,7 +5,6 @@
|
||||
"implicitDependencies": [
|
||||
"core",
|
||||
"addon-essentials",
|
||||
"addon-interactions",
|
||||
"addon-links",
|
||||
"addon-onboarding",
|
||||
"blocks",
|
||||
|
||||
@ -5,7 +5,6 @@
|
||||
"implicitDependencies": [
|
||||
"core",
|
||||
"addon-essentials",
|
||||
"addon-interactions",
|
||||
"addon-links",
|
||||
"addon-onboarding",
|
||||
"blocks",
|
||||
|
||||
@ -5,7 +5,6 @@
|
||||
"implicitDependencies": [
|
||||
"core",
|
||||
"addon-essentials",
|
||||
"addon-interactions",
|
||||
"addon-links",
|
||||
"addon-onboarding",
|
||||
"blocks",
|
||||
|
||||
@ -5,7 +5,6 @@
|
||||
"implicitDependencies": [
|
||||
"core",
|
||||
"addon-essentials",
|
||||
"addon-interactions",
|
||||
"addon-links",
|
||||
"addon-onboarding",
|
||||
"blocks",
|
||||
|
||||
@ -5,7 +5,6 @@
|
||||
"implicitDependencies": [
|
||||
"core",
|
||||
"addon-essentials",
|
||||
"addon-interactions",
|
||||
"addon-links",
|
||||
"addon-onboarding",
|
||||
"blocks",
|
||||
|
||||
@ -5,7 +5,6 @@
|
||||
"implicitDependencies": [
|
||||
"core",
|
||||
"addon-essentials",
|
||||
"addon-interactions",
|
||||
"addon-links",
|
||||
"addon-onboarding",
|
||||
"blocks",
|
||||
|
||||
@ -5,7 +5,6 @@
|
||||
"implicitDependencies": [
|
||||
"core",
|
||||
"addon-essentials",
|
||||
"addon-interactions",
|
||||
"addon-links",
|
||||
"addon-onboarding",
|
||||
"blocks",
|
||||
|
||||
@ -5,7 +5,6 @@
|
||||
"implicitDependencies": [
|
||||
"core",
|
||||
"addon-essentials",
|
||||
"addon-interactions",
|
||||
"addon-links",
|
||||
"addon-onboarding",
|
||||
"blocks",
|
||||
|
||||
@ -5,7 +5,6 @@
|
||||
"implicitDependencies": [
|
||||
"core",
|
||||
"addon-essentials",
|
||||
"addon-interactions",
|
||||
"addon-links",
|
||||
"addon-onboarding",
|
||||
"blocks",
|
||||
|
||||
@ -5,7 +5,6 @@
|
||||
"implicitDependencies": [
|
||||
"core",
|
||||
"addon-essentials",
|
||||
"addon-interactions",
|
||||
"addon-links",
|
||||
"addon-onboarding",
|
||||
"blocks",
|
||||
|
||||
@ -5,7 +5,6 @@
|
||||
"implicitDependencies": [
|
||||
"core",
|
||||
"addon-essentials",
|
||||
"addon-interactions",
|
||||
"addon-links",
|
||||
"addon-onboarding",
|
||||
"blocks",
|
||||
|
||||
@ -5,7 +5,6 @@
|
||||
"implicitDependencies": [
|
||||
"core",
|
||||
"addon-essentials",
|
||||
"addon-interactions",
|
||||
"addon-links",
|
||||
"addon-onboarding",
|
||||
"blocks",
|
||||
|
||||
@ -5,7 +5,6 @@
|
||||
"implicitDependencies": [
|
||||
"core",
|
||||
"addon-essentials",
|
||||
"addon-interactions",
|
||||
"addon-links",
|
||||
"addon-onboarding",
|
||||
"blocks",
|
||||
|
||||
@ -5,7 +5,6 @@
|
||||
"implicitDependencies": [
|
||||
"core",
|
||||
"addon-essentials",
|
||||
"addon-interactions",
|
||||
"addon-links",
|
||||
"addon-onboarding",
|
||||
"blocks",
|
||||
|
||||
@ -5,7 +5,6 @@
|
||||
"implicitDependencies": [
|
||||
"core",
|
||||
"addon-essentials",
|
||||
"addon-interactions",
|
||||
"addon-links",
|
||||
"addon-onboarding",
|
||||
"blocks",
|
||||
|
||||
@ -5,7 +5,6 @@
|
||||
"implicitDependencies": [
|
||||
"core",
|
||||
"addon-essentials",
|
||||
"addon-interactions",
|
||||
"addon-links",
|
||||
"addon-onboarding",
|
||||
"blocks",
|
||||
|
||||
@ -5,7 +5,6 @@
|
||||
"implicitDependencies": [
|
||||
"core",
|
||||
"addon-essentials",
|
||||
"addon-interactions",
|
||||
"addon-links",
|
||||
"addon-onboarding",
|
||||
"blocks",
|
||||
|
||||
@ -5,7 +5,6 @@
|
||||
"implicitDependencies": [
|
||||
"core",
|
||||
"addon-essentials",
|
||||
"addon-interactions",
|
||||
"addon-links",
|
||||
"addon-onboarding",
|
||||
"blocks",
|
||||
|
||||
@ -5,7 +5,6 @@
|
||||
"implicitDependencies": [
|
||||
"core",
|
||||
"addon-essentials",
|
||||
"addon-interactions",
|
||||
"addon-links",
|
||||
"addon-onboarding",
|
||||
"blocks",
|
||||
|
||||
@ -5,7 +5,6 @@
|
||||
"implicitDependencies": [
|
||||
"core",
|
||||
"addon-essentials",
|
||||
"addon-interactions",
|
||||
"addon-links",
|
||||
"addon-onboarding",
|
||||
"blocks",
|
||||
|
||||
@ -5,7 +5,6 @@
|
||||
"implicitDependencies": [
|
||||
"core",
|
||||
"addon-essentials",
|
||||
"addon-interactions",
|
||||
"addon-links",
|
||||
"addon-onboarding",
|
||||
"blocks",
|
||||
|
||||
@ -5,7 +5,6 @@
|
||||
"implicitDependencies": [
|
||||
"core",
|
||||
"addon-essentials",
|
||||
"addon-interactions",
|
||||
"addon-links",
|
||||
"addon-onboarding",
|
||||
"blocks",
|
||||
|
||||
@ -5,7 +5,6 @@
|
||||
"implicitDependencies": [
|
||||
"core",
|
||||
"addon-essentials",
|
||||
"addon-interactions",
|
||||
"addon-links",
|
||||
"addon-onboarding",
|
||||
"blocks",
|
||||
|
||||
@ -5,7 +5,6 @@
|
||||
"implicitDependencies": [
|
||||
"core",
|
||||
"addon-essentials",
|
||||
"addon-interactions",
|
||||
"addon-links",
|
||||
"addon-onboarding",
|
||||
"blocks",
|
||||
|
||||
@ -5,7 +5,6 @@
|
||||
"implicitDependencies": [
|
||||
"core",
|
||||
"addon-essentials",
|
||||
"addon-interactions",
|
||||
"addon-links",
|
||||
"addon-onboarding",
|
||||
"blocks"
|
||||
|
||||
@ -5,7 +5,6 @@
|
||||
"implicitDependencies": [
|
||||
"core",
|
||||
"addon-essentials",
|
||||
"addon-interactions",
|
||||
"addon-links",
|
||||
"addon-onboarding",
|
||||
"blocks",
|
||||
|
||||
@ -5,7 +5,6 @@
|
||||
"implicitDependencies": [
|
||||
"core",
|
||||
"addon-essentials",
|
||||
"addon-interactions",
|
||||
"addon-links",
|
||||
"addon-onboarding",
|
||||
"blocks",
|
||||
|
||||
@ -5,7 +5,6 @@
|
||||
"implicitDependencies": [
|
||||
"core",
|
||||
"addon-essentials",
|
||||
"addon-interactions",
|
||||
"addon-links",
|
||||
"addon-onboarding",
|
||||
"blocks",
|
||||
|
||||
@ -5,7 +5,6 @@
|
||||
"implicitDependencies": [
|
||||
"core",
|
||||
"addon-essentials",
|
||||
"addon-interactions",
|
||||
"addon-links",
|
||||
"addon-onboarding",
|
||||
"blocks",
|
||||
|
||||
@ -5,7 +5,6 @@
|
||||
"implicitDependencies": [
|
||||
"core",
|
||||
"addon-essentials",
|
||||
"addon-interactions",
|
||||
"addon-links",
|
||||
"addon-onboarding",
|
||||
"blocks"
|
||||
|
||||
@ -5,7 +5,6 @@
|
||||
"implicitDependencies": [
|
||||
"core",
|
||||
"addon-essentials",
|
||||
"addon-interactions",
|
||||
"addon-links",
|
||||
"addon-onboarding",
|
||||
"blocks"
|
||||
|
||||
@ -5,7 +5,6 @@
|
||||
"implicitDependencies": [
|
||||
"core",
|
||||
"addon-essentials",
|
||||
"addon-interactions",
|
||||
"addon-links",
|
||||
"addon-onboarding",
|
||||
"blocks",
|
||||
|
||||
@ -5,7 +5,6 @@
|
||||
"implicitDependencies": [
|
||||
"core",
|
||||
"addon-essentials",
|
||||
"addon-interactions",
|
||||
"addon-links",
|
||||
"addon-onboarding",
|
||||
"blocks",
|
||||
|
||||
@ -5,7 +5,6 @@
|
||||
"implicitDependencies": [
|
||||
"core",
|
||||
"addon-essentials",
|
||||
"addon-interactions",
|
||||
"addon-links",
|
||||
"addon-onboarding",
|
||||
"blocks",
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user