mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-06 06:51:17 +08:00
Merge branch 'next' into future/base
This commit is contained in:
Michael Shilman
commit
cc4a40b279
@ -4,7 +4,7 @@ import { ComponentStoryObj, ComponentMeta } from '@storybook/react';
|
||||
import { CallStates } from '@storybook/instrumenter';
|
||||
import { styled } from '@storybook/theming';
|
||||
|
||||
import { getCall } from './mocks';
|
||||
import { getCalls, getInteractions } from './mocks';
|
||||
import { AddonPanelPure } from './Panel';
|
||||
import SubnavStories from './components/Subnav/Subnav.stories';
|
||||
|
||||
@ -20,6 +20,8 @@ const StyledWrapper = styled.div(({ theme }) => ({
|
||||
overflow: 'auto',
|
||||
}));
|
||||
|
||||
const interactions = getInteractions(CallStates.DONE);
|
||||
|
||||
export default {
|
||||
title: 'Addons/Interactions/Panel',
|
||||
component: AddonPanelPure,
|
||||
@ -34,10 +36,10 @@ export default {
|
||||
layout: 'fullscreen',
|
||||
},
|
||||
args: {
|
||||
calls: new Map(),
|
||||
calls: new Map(getCalls(CallStates.DONE).map((call) => [call.id, call])),
|
||||
controls: SubnavStories.args.controls,
|
||||
controlStates: SubnavStories.args.controlStates,
|
||||
interactions: [getCall(CallStates.DONE)],
|
||||
interactions,
|
||||
fileName: 'addon-interactions.stories.tsx',
|
||||
hasException: false,
|
||||
isPlaying: false,
|
||||
@ -52,14 +54,14 @@ type Story = ComponentStoryObj<typeof AddonPanelPure>;
|
||||
|
||||
export const Passing: Story = {
|
||||
args: {
|
||||
interactions: [getCall(CallStates.DONE)],
|
||||
interactions: getInteractions(CallStates.DONE),
|
||||
},
|
||||
};
|
||||
|
||||
export const Paused: Story = {
|
||||
args: {
|
||||
isPlaying: true,
|
||||
interactions: [getCall(CallStates.WAITING)],
|
||||
interactions: getInteractions(CallStates.WAITING),
|
||||
controlStates: {
|
||||
debugger: true,
|
||||
start: false,
|
||||
@ -68,20 +70,21 @@ export const Paused: Story = {
|
||||
next: true,
|
||||
end: true,
|
||||
},
|
||||
pausedAt: interactions[interactions.length - 1].id,
|
||||
},
|
||||
};
|
||||
|
||||
export const Playing: Story = {
|
||||
args: {
|
||||
isPlaying: true,
|
||||
interactions: [getCall(CallStates.ACTIVE)],
|
||||
interactions: getInteractions(CallStates.ACTIVE),
|
||||
},
|
||||
};
|
||||
|
||||
export const Failed: Story = {
|
||||
args: {
|
||||
hasException: true,
|
||||
interactions: [getCall(CallStates.ERROR)],
|
||||
interactions: getInteractions(CallStates.ERROR),
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
@ -28,10 +28,16 @@ interface InteractionsPanelProps {
|
||||
active: boolean;
|
||||
controls: Controls;
|
||||
controlStates: ControlStates;
|
||||
interactions: (Call & { status?: CallStates })[];
|
||||
interactions: (Call & {
|
||||
status?: CallStates;
|
||||
childCallIds: Call['id'][];
|
||||
isCollapsed: boolean;
|
||||
toggleCollapsed: () => void;
|
||||
})[];
|
||||
fileName?: string;
|
||||
hasException?: boolean;
|
||||
isPlaying?: boolean;
|
||||
pausedAt?: Call['id'];
|
||||
calls: Map<string, any>;
|
||||
endRef?: React.Ref<HTMLDivElement>;
|
||||
onScrollToEnd?: () => void;
|
||||
@ -66,6 +72,7 @@ export const AddonPanelPure: React.FC<InteractionsPanelProps> = React.memo(
|
||||
fileName,
|
||||
hasException,
|
||||
isPlaying,
|
||||
pausedAt,
|
||||
onScrollToEnd,
|
||||
endRef,
|
||||
isRerunAnimating,
|
||||
@ -87,15 +94,21 @@ export const AddonPanelPure: React.FC<InteractionsPanelProps> = React.memo(
|
||||
setIsRerunAnimating={setIsRerunAnimating}
|
||||
/>
|
||||
)}
|
||||
{interactions.map((call) => (
|
||||
<Interaction
|
||||
key={call.id}
|
||||
call={call}
|
||||
callsById={calls}
|
||||
controls={controls}
|
||||
controlStates={controlStates}
|
||||
/>
|
||||
))}
|
||||
<div>
|
||||
{interactions.map((call) => (
|
||||
<Interaction
|
||||
key={call.id}
|
||||
call={call}
|
||||
callsById={calls}
|
||||
controls={controls}
|
||||
controlStates={controlStates}
|
||||
childCallIds={call.childCallIds}
|
||||
isCollapsed={call.isCollapsed}
|
||||
toggleCollapsed={call.toggleCollapsed}
|
||||
pausedAt={pausedAt}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<div ref={endRef} />
|
||||
{!isPlaying && interactions.length === 0 && (
|
||||
<Placeholder>
|
||||
@ -116,16 +129,36 @@ export const AddonPanelPure: React.FC<InteractionsPanelProps> = React.memo(
|
||||
export const Panel: React.FC<AddonPanelProps> = (props) => {
|
||||
const [storyId, setStoryId] = React.useState<StoryId>();
|
||||
const [controlStates, setControlStates] = React.useState<ControlStates>(INITIAL_CONTROL_STATES);
|
||||
const [pausedAt, setPausedAt] = React.useState<Call['id']>();
|
||||
const [isPlaying, setPlaying] = React.useState(false);
|
||||
const [isRerunAnimating, setIsRerunAnimating] = React.useState(false);
|
||||
const [scrollTarget, setScrollTarget] = React.useState<HTMLElement>();
|
||||
const [collapsed, setCollapsed] = React.useState<Set<Call['id']>>(new Set());
|
||||
|
||||
// Calls are tracked in a ref so we don't needlessly rerender.
|
||||
const calls = React.useRef<Map<Call['id'], Omit<Call, 'status'>>>(new Map());
|
||||
const setCall = ({ status, ...call }: Call) => calls.current.set(call.id, call);
|
||||
|
||||
const [log, setLog] = React.useState<LogItem[]>([]);
|
||||
const interactions = log.map(({ callId, status }) => ({ ...calls.current.get(callId), status }));
|
||||
const childCallMap = new Map<Call['id'], Call['id'][]>();
|
||||
const interactions = log
|
||||
.filter((call) => {
|
||||
if (!call.parentId) return true;
|
||||
childCallMap.set(call.parentId, (childCallMap.get(call.parentId) || []).concat(call.callId));
|
||||
return !collapsed.has(call.parentId);
|
||||
})
|
||||
.map(({ callId, status }) => ({
|
||||
...calls.current.get(callId),
|
||||
status,
|
||||
childCallIds: childCallMap.get(callId),
|
||||
isCollapsed: collapsed.has(callId),
|
||||
toggleCollapsed: () =>
|
||||
setCollapsed((ids) => {
|
||||
if (ids.has(callId)) ids.delete(callId);
|
||||
else ids.add(callId);
|
||||
return new Set(ids);
|
||||
}),
|
||||
}));
|
||||
|
||||
const endRef = React.useRef();
|
||||
React.useEffect(() => {
|
||||
@ -146,10 +179,12 @@ export const Panel: React.FC<AddonPanelProps> = (props) => {
|
||||
[EVENTS.SYNC]: (payload) => {
|
||||
setControlStates(payload.controlStates);
|
||||
setLog(payload.logItems);
|
||||
setPausedAt(payload.pausedAt);
|
||||
},
|
||||
[STORY_RENDER_PHASE_CHANGED]: (event) => {
|
||||
setStoryId(event.storyId);
|
||||
setPlaying(event.newPhase === 'playing');
|
||||
setPausedAt(undefined);
|
||||
},
|
||||
},
|
||||
[]
|
||||
@ -191,6 +226,7 @@ export const Panel: React.FC<AddonPanelProps> = (props) => {
|
||||
fileName={fileName}
|
||||
hasException={hasException}
|
||||
isPlaying={isPlaying}
|
||||
pausedAt={pausedAt}
|
||||
endRef={endRef}
|
||||
onScrollToEnd={scrollTarget && scrollToTarget}
|
||||
isRerunAnimating={isRerunAnimating}
|
||||
|
||||
@ -131,7 +131,7 @@ export const StandardEmailFailed: CSF3Story = {
|
||||
await userEvent.click(canvas.getByRole('button', { name: /create account/i }));
|
||||
|
||||
await canvas.findByText('Please enter a correctly formatted email address');
|
||||
expect(args.onSubmit).not.toHaveBeenCalled();
|
||||
await expect(args.onSubmit).not.toHaveBeenCalled();
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@ import { ComponentStoryObj, ComponentMeta } from '@storybook/react';
|
||||
import { expect } from '@storybook/jest';
|
||||
import { CallStates } from '@storybook/instrumenter';
|
||||
import { userEvent, within } from '@storybook/testing-library';
|
||||
import { getCall } from '../../mocks';
|
||||
import { getCalls } from '../../mocks';
|
||||
|
||||
import { Interaction } from './Interaction';
|
||||
import SubnavStories from '../Subnav/Subnav.stories';
|
||||
@ -13,7 +13,7 @@ export default {
|
||||
title: 'Addons/Interactions/Interaction',
|
||||
component: Interaction,
|
||||
args: {
|
||||
callsById: new Map(),
|
||||
callsById: new Map(getCalls(CallStates.DONE).map((call) => [call.id, call])),
|
||||
controls: SubnavStories.args.controls,
|
||||
controlStates: SubnavStories.args.controlStates,
|
||||
},
|
||||
@ -21,25 +21,31 @@ export default {
|
||||
|
||||
export const Active: Story = {
|
||||
args: {
|
||||
call: getCall(CallStates.ACTIVE),
|
||||
call: getCalls(CallStates.ACTIVE).slice(-1)[0],
|
||||
},
|
||||
};
|
||||
|
||||
export const Waiting: Story = {
|
||||
args: {
|
||||
call: getCall(CallStates.WAITING),
|
||||
call: getCalls(CallStates.WAITING).slice(-1)[0],
|
||||
},
|
||||
};
|
||||
|
||||
export const Failed: Story = {
|
||||
args: {
|
||||
call: getCall(CallStates.ERROR),
|
||||
call: getCalls(CallStates.ERROR).slice(-1)[0],
|
||||
},
|
||||
};
|
||||
|
||||
export const Done: Story = {
|
||||
args: {
|
||||
call: getCall(CallStates.DONE),
|
||||
call: getCalls(CallStates.DONE).slice(-1)[0],
|
||||
},
|
||||
};
|
||||
|
||||
export const WithParent: Story = {
|
||||
args: {
|
||||
call: { ...getCalls(CallStates.DONE).slice(-1)[0], parentId: 'parent-id' },
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import * as React from 'react';
|
||||
import { IconButton, Icons, TooltipNote, WithTooltip } from '@storybook/components';
|
||||
import { Call, CallStates, ControlStates } from '@storybook/instrumenter';
|
||||
import { styled, typography } from '@storybook/theming';
|
||||
import { transparentize } from 'polished';
|
||||
@ -15,23 +16,55 @@ const MethodCallWrapper = styled.div(() => ({
|
||||
inlineSize: 'calc( 100% - 40px )',
|
||||
}));
|
||||
|
||||
const RowContainer = styled('div', { shouldForwardProp: (prop) => !['call'].includes(prop) })<{
|
||||
call: Call;
|
||||
}>(({ theme, call }) => ({
|
||||
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,
|
||||
const RowContainer = styled('div', {
|
||||
shouldForwardProp: (prop) => !['call', 'pausedAt'].includes(prop),
|
||||
})<{ 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.parentId ? 20 : 0,
|
||||
}),
|
||||
({ 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<{ disabled: boolean }>(({ theme, disabled }) => ({
|
||||
display: 'flex',
|
||||
'&:hover': disabled ? {} : { background: theme.background.hoverable },
|
||||
}));
|
||||
|
||||
const RowLabel = styled('button', { shouldForwardProp: (prop) => !['call'].includes(prop) })<
|
||||
React.ButtonHTMLAttributes<HTMLButtonElement> & { call: Call }
|
||||
>(({ theme, disabled, call }) => ({
|
||||
flex: 1,
|
||||
display: 'grid',
|
||||
background: 'none',
|
||||
border: 0,
|
||||
@ -42,7 +75,6 @@ const RowLabel = styled('button', { shouldForwardProp: (prop) => !['call'].inclu
|
||||
padding: '8px 15px',
|
||||
textAlign: 'start',
|
||||
cursor: disabled || call.status === CallStates.ERROR ? 'default' : 'pointer',
|
||||
'&:hover': disabled ? {} : { background: theme.background.hoverable },
|
||||
'&:focus-visible': {
|
||||
outline: 0,
|
||||
boxShadow: `inset 3px 0 0 0 ${
|
||||
@ -55,45 +87,101 @@ const RowLabel = styled('button', { shouldForwardProp: (prop) => !['call'].inclu
|
||||
},
|
||||
}));
|
||||
|
||||
const RowMessage = styled('pre')({
|
||||
margin: 0,
|
||||
padding: '8px 10px 8px 30px',
|
||||
const RowActions = styled.div(({ theme }) => ({
|
||||
padding: 6,
|
||||
}));
|
||||
|
||||
export const StyledIconButton = styled(IconButton as any)(({ theme }) => ({
|
||||
color: theme.color.mediumdark,
|
||||
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,
|
||||
});
|
||||
pre: {
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
},
|
||||
p: {
|
||||
color: theme.color.dark,
|
||||
},
|
||||
}));
|
||||
|
||||
const Exception = ({ exception }: { exception: Call['exception'] }) => {
|
||||
if (exception.message.startsWith('expect(')) {
|
||||
return <MatcherResult {...exception} />;
|
||||
}
|
||||
const paragraphs = exception.message.split('\n\n');
|
||||
const more = paragraphs.length > 1;
|
||||
return (
|
||||
<RowMessage>
|
||||
<pre>{paragraphs[0]}</pre>
|
||||
{more && <p>See the full stack trace in the browser console.</p>}
|
||||
</RowMessage>
|
||||
);
|
||||
};
|
||||
|
||||
export const Interaction = ({
|
||||
call,
|
||||
callsById,
|
||||
controls,
|
||||
controlStates,
|
||||
childCallIds,
|
||||
isCollapsed,
|
||||
toggleCollapsed,
|
||||
pausedAt,
|
||||
}: {
|
||||
call: Call;
|
||||
callsById: Map<Call['id'], Call>;
|
||||
controls: Controls;
|
||||
controlStates: ControlStates;
|
||||
childCallIds?: Call['id'][];
|
||||
isCollapsed: boolean;
|
||||
toggleCollapsed: () => void;
|
||||
pausedAt?: Call['id'];
|
||||
}) => {
|
||||
const [isHovered, setIsHovered] = React.useState(false);
|
||||
return (
|
||||
<RowContainer call={call}>
|
||||
<RowLabel
|
||||
call={call}
|
||||
onClick={() => controls.goto(call.id)}
|
||||
disabled={!controlStates.goto}
|
||||
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>
|
||||
{call.status === CallStates.ERROR &&
|
||||
call.exception &&
|
||||
(call.exception.message.startsWith('expect(') ? (
|
||||
<MatcherResult {...call.exception} />
|
||||
) : (
|
||||
<RowMessage>{call.exception.message}</RowMessage>
|
||||
))}
|
||||
<RowContainer call={call} pausedAt={pausedAt}>
|
||||
<RowHeader disabled={!controlStates.goto || !call.interceptable || !!call.parentId}>
|
||||
<RowLabel
|
||||
call={call}
|
||||
onClick={() => controls.goto(call.id)}
|
||||
disabled={!controlStates.goto || !call.interceptable || !!call.parentId}
|
||||
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 (${childCallIds.length})`}
|
||||
/>
|
||||
}
|
||||
>
|
||||
<StyledIconButton containsIcon onClick={toggleCollapsed}>
|
||||
<Icons icon="listunordered" />
|
||||
</StyledIconButton>
|
||||
</WithTooltip>
|
||||
)}
|
||||
</RowActions>
|
||||
</RowHeader>
|
||||
|
||||
{call.status === CallStates.ERROR && call.exception?.callId === call.id && (
|
||||
<Exception exception={call.exception} />
|
||||
)}
|
||||
</RowContainer>
|
||||
);
|
||||
};
|
||||
|
||||
@ -50,7 +50,7 @@ export const MatcherResult = ({ message }: { message: string }) => {
|
||||
<pre
|
||||
style={{
|
||||
margin: 0,
|
||||
padding: '8px 10px 8px 30px',
|
||||
padding: '8px 10px 8px 36px',
|
||||
fontSize: typography.size.s1,
|
||||
}}
|
||||
>
|
||||
|
||||
@ -27,7 +27,6 @@ export default {
|
||||
},
|
||||
};
|
||||
|
||||
class FooBar {}
|
||||
export const Args = () => (
|
||||
<div style={{ display: 'inline-flex', flexDirection: 'column', gap: 10 }}>
|
||||
<Node value={null} />
|
||||
@ -56,37 +55,49 @@ export const Args = () => (
|
||||
}}
|
||||
showObjectInspector
|
||||
/>
|
||||
<Node value={new FooBar()} />
|
||||
<Node value={function goFaster() {}} />
|
||||
<Node value={{ __class__: { name: 'FooBar' } }} />
|
||||
<Node value={{ __function__: { name: 'goFaster' } }} />
|
||||
<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={new Date(Date.UTC(2012, 11, 20, 0, 0, 0))} />
|
||||
<Node value={new Date(1600000000000)} />
|
||||
<Node value={new Date(1600000000123)} />
|
||||
<Node value={new EvalError()} />
|
||||
<Node value={new SyntaxError("Can't do that")} />
|
||||
<Node value={new TypeError("Cannot read property 'foo' of undefined")} />
|
||||
<Node value={new ReferenceError('Invalid left-hand side in assignment')} />
|
||||
<Node
|
||||
value={
|
||||
new Error(
|
||||
"XMLHttpRequest cannot load https://example.com. No 'Access-Control-Allow-Origin' header is present on the requested resource."
|
||||
)
|
||||
}
|
||||
value={{ __date__: { value: new Date(Date.UTC(2012, 11, 20, 0, 0, 0)).toISOString() } }}
|
||||
/>
|
||||
<Node value={/hello/i} />
|
||||
<Node value={new RegExp(`src(.*)\\.js$`)} />
|
||||
{/* eslint-disable-next-line symbol-description */}
|
||||
<Node value={Symbol()} />
|
||||
<Node value={Symbol('Hello world')} />
|
||||
<Node value={{ __date__: { value: new Date(1600000000000).toISOString() } }} />
|
||||
<Node value={{ __date__: { value: new Date(1600000000123).toISOString() } }} />
|
||||
<Node value={{ __error__: { name: 'EvalError', message: '' } }} />
|
||||
<Node value={{ __error__: { name: 'SyntaxError', message: "Can't do that" } }} />
|
||||
<Node
|
||||
value={{
|
||||
__error__: { name: 'TypeError', message: "Cannot read property 'foo' of undefined" },
|
||||
}}
|
||||
/>
|
||||
<Node
|
||||
value={{
|
||||
__error__: { name: 'ReferenceError', message: 'Invalid left-hand side in assignment' },
|
||||
}}
|
||||
/>
|
||||
<Node
|
||||
value={{
|
||||
__error__: {
|
||||
name: 'Error',
|
||||
message:
|
||||
"XMLHttpRequest cannot load https://example.com. No 'Access-Control-Allow-Origin' header is present on the requested resource.",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<Node value={{ __regexp__: { flags: 'i', source: 'hello' } }} />
|
||||
<Node value={{ __regexp__: { flags: '', source: 'src(.*)\\.js$' } }} />
|
||||
<Node value={{ __symbol__: { description: '' } }} />
|
||||
<Node value={{ __symbol__: { description: 'Hello world' } }} />
|
||||
</div>
|
||||
);
|
||||
|
||||
const calls: Call[] = [
|
||||
{
|
||||
cursor: 0,
|
||||
id: '1',
|
||||
path: ['screen'],
|
||||
method: 'getByText',
|
||||
@ -96,6 +107,7 @@ const calls: Call[] = [
|
||||
retain: false,
|
||||
},
|
||||
{
|
||||
cursor: 1,
|
||||
id: '2',
|
||||
path: ['userEvent'],
|
||||
method: 'click',
|
||||
@ -105,6 +117,7 @@ const calls: Call[] = [
|
||||
retain: false,
|
||||
},
|
||||
{
|
||||
cursor: 2,
|
||||
id: '3',
|
||||
path: [],
|
||||
method: 'expect',
|
||||
@ -114,6 +127,7 @@ const calls: Call[] = [
|
||||
retain: false,
|
||||
},
|
||||
{
|
||||
cursor: 3,
|
||||
id: '4',
|
||||
path: [{ __callId__: '3' }, 'not'],
|
||||
method: 'toBe',
|
||||
@ -123,15 +137,17 @@ const calls: Call[] = [
|
||||
retain: false,
|
||||
},
|
||||
{
|
||||
cursor: 4,
|
||||
id: '5',
|
||||
path: ['jest'],
|
||||
method: 'fn',
|
||||
storyId: 'kind--story',
|
||||
args: [function actionHandler() {}],
|
||||
args: [{ __function__: { name: 'actionHandler' } }],
|
||||
interceptable: false,
|
||||
retain: false,
|
||||
},
|
||||
{
|
||||
cursor: 5,
|
||||
id: '6',
|
||||
path: [],
|
||||
method: 'expect',
|
||||
@ -141,20 +157,28 @@ const calls: Call[] = [
|
||||
retain: false,
|
||||
},
|
||||
{
|
||||
cursor: 6,
|
||||
id: '7',
|
||||
path: ['expect'],
|
||||
method: 'stringMatching',
|
||||
storyId: 'kind--story',
|
||||
args: [/hello/i],
|
||||
args: [{ __regexp__: { flags: 'i', source: 'hello' } }],
|
||||
interceptable: false,
|
||||
retain: false,
|
||||
},
|
||||
{
|
||||
cursor: 7,
|
||||
id: '8',
|
||||
path: [{ __callId__: '6' }, 'not'],
|
||||
method: 'toHaveBeenCalledWith',
|
||||
storyId: 'kind--story',
|
||||
args: [{ __callId__: '7' }, new Error("Cannot read property 'foo' of undefined")],
|
||||
args: [
|
||||
{ __callId__: '7' },
|
||||
[
|
||||
{ __error__: { name: 'Error', message: "Cannot read property 'foo' of undefined" } },
|
||||
{ __symbol__: { description: 'Hello world' } },
|
||||
],
|
||||
],
|
||||
interceptable: false,
|
||||
retain: false,
|
||||
},
|
||||
|
||||
@ -111,32 +111,34 @@ export const Node = ({
|
||||
return <NullNode {...props} />;
|
||||
case value === undefined:
|
||||
return <UndefinedNode {...props} />;
|
||||
case Array.isArray(value):
|
||||
return <ArrayNode {...props} value={value} />;
|
||||
case typeof value === 'string':
|
||||
return <StringNode value={value} {...props} />;
|
||||
return <StringNode {...props} value={value} />;
|
||||
case typeof value === 'number':
|
||||
return <NumberNode value={value} {...props} />;
|
||||
return <NumberNode {...props} value={value} />;
|
||||
case typeof value === 'boolean':
|
||||
return <BooleanNode value={value} {...props} />;
|
||||
case typeof value === 'function':
|
||||
return <FunctionNode value={value} {...props} />;
|
||||
case value instanceof Array:
|
||||
return <ArrayNode value={value} {...props} />;
|
||||
case value instanceof Date:
|
||||
return <DateNode value={value} {...props} />;
|
||||
case value instanceof Error:
|
||||
return <ErrorNode value={value} {...props} />;
|
||||
case value instanceof RegExp:
|
||||
return <RegExpNode value={value} {...props} />;
|
||||
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__'):
|
||||
// eslint-disable-next-line no-underscore-dangle
|
||||
return <ElementNode value={value.__element__} {...props} />;
|
||||
return <ElementNode {...props} {...value.__element__} />;
|
||||
case Object.prototype.hasOwnProperty.call(value, '__class__'):
|
||||
return <ClassNode {...props} {...value.__class__} />;
|
||||
case Object.prototype.hasOwnProperty.call(value, '__callId__'):
|
||||
// eslint-disable-next-line no-underscore-dangle
|
||||
return <MethodCall call={callsById.get(value.__callId__)} callsById={callsById} />;
|
||||
case typeof value === 'object' &&
|
||||
value.constructor?.name &&
|
||||
value.constructor?.name !== 'Object':
|
||||
return <ClassNode value={value} {...props} />;
|
||||
/* eslint-enable no-underscore-dangle */
|
||||
|
||||
case Object.prototype.toString.call(value) === '[object Object]':
|
||||
return <ObjectNode value={value} showInspector={showObjectInspector} {...props} />;
|
||||
default:
|
||||
@ -263,18 +265,27 @@ export const ObjectNode = ({
|
||||
);
|
||||
};
|
||||
|
||||
export const ClassNode = ({ value }: { value: Record<string, any> }) => {
|
||||
export const ClassNode = ({ name }: { name: string }) => {
|
||||
const colors = useThemeColors();
|
||||
return <span style={{ color: colors.instance }}>{value.constructor.name}</span>;
|
||||
return <span style={{ color: colors.instance }}>{name}</span>;
|
||||
};
|
||||
|
||||
export const FunctionNode = ({ value }: { value: Function }) => {
|
||||
export const FunctionNode = ({ name }: { name: string }) => {
|
||||
const colors = useThemeColors();
|
||||
return <span style={{ color: colors.function }}>{value.name || 'anonymous'}</span>;
|
||||
return name ? (
|
||||
<span style={{ color: colors.function }}>{name}</span>
|
||||
) : (
|
||||
<span style={{ color: colors.nullish, fontStyle: 'italic' }}>anonymous</span>
|
||||
);
|
||||
};
|
||||
|
||||
export const ElementNode = ({ value }: { value: ElementRef['__element__'] }) => {
|
||||
const { prefix, localName, id, classNames = [], innerText } = value;
|
||||
export const ElementNode = ({
|
||||
prefix,
|
||||
localName,
|
||||
id,
|
||||
classNames = [],
|
||||
innerText,
|
||||
}: ElementRef['__element__']) => {
|
||||
const name = prefix ? `${prefix}:${localName}` : localName;
|
||||
const colors = useThemeColors();
|
||||
return (
|
||||
@ -309,8 +320,8 @@ export const ElementNode = ({ value }: { value: ElementRef['__element__'] }) =>
|
||||
);
|
||||
};
|
||||
|
||||
export const DateNode = ({ value }: { value: Date }) => {
|
||||
const [date, time, ms] = value.toISOString().split(/[T.Z]/);
|
||||
export const DateNode = ({ value }: { value: string }) => {
|
||||
const [date, time, ms] = value.split(/[T.Z]/);
|
||||
const colors = useThemeColors();
|
||||
return (
|
||||
<span style={{ whiteSpace: 'nowrap', color: colors.date }}>
|
||||
@ -323,42 +334,36 @@ export const DateNode = ({ value }: { value: Date }) => {
|
||||
);
|
||||
};
|
||||
|
||||
export const ErrorNode = ({ value }: { value: Error }) => {
|
||||
export const ErrorNode = ({ name, message }: { name: string; message: string }) => {
|
||||
const colors = useThemeColors();
|
||||
return (
|
||||
<span style={{ color: colors.error.name }}>
|
||||
{value.name}
|
||||
{value.message && ': '}
|
||||
{value.message && (
|
||||
<span
|
||||
style={{ color: colors.error.message }}
|
||||
title={value.message.length > 50 ? value.message : ''}
|
||||
>
|
||||
{ellipsize(value.message, 50)}
|
||||
{name}
|
||||
{message && ': '}
|
||||
{message && (
|
||||
<span style={{ color: colors.error.message }} title={message.length > 50 ? message : ''}>
|
||||
{ellipsize(message, 50)}
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
export const RegExpNode = ({ value }: { value: RegExp }) => {
|
||||
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 }}>{value.source}</span>/{value.flags}
|
||||
/<span style={{ color: colors.regex.source }}>{source}</span>/{flags}
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
export const SymbolNode = ({ value }: { value: symbol }) => {
|
||||
export const SymbolNode = ({ description }: { description: string }) => {
|
||||
const colors = useThemeColors();
|
||||
return (
|
||||
<span style={{ whiteSpace: 'nowrap', color: colors.instance }}>
|
||||
Symbol(
|
||||
{value.description && (
|
||||
<span style={{ color: colors.meta }}>{JSON.stringify(value.description)}</span>
|
||||
)}
|
||||
)
|
||||
{description && <span style={{ color: colors.meta }}>"{description}"</span>})
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
@ -12,6 +12,7 @@ export default {
|
||||
goto: action('goto'),
|
||||
next: action('next'),
|
||||
end: action('end'),
|
||||
rerun: action('rerun'),
|
||||
},
|
||||
controlStates: {
|
||||
debugger: true,
|
||||
|
||||
@ -1,31 +1,122 @@
|
||||
import { CallStates, Call } from '@storybook/instrumenter';
|
||||
|
||||
export const getCall = (status: CallStates): Call => {
|
||||
const defaultData = {
|
||||
id: 'addons-interactions-accountform--standard-email-filled [3] change',
|
||||
cursor: 0,
|
||||
path: ['fireEvent'],
|
||||
method: 'change',
|
||||
storyId: 'addons-interactions-accountform--standard-email-filled',
|
||||
args: [
|
||||
{
|
||||
__callId__: 'addons-interactions-accountform--standard-email-filled [2] getByTestId',
|
||||
retain: false,
|
||||
},
|
||||
{
|
||||
target: {
|
||||
value: 'michael@chromatic.com',
|
||||
},
|
||||
},
|
||||
],
|
||||
interceptable: true,
|
||||
retain: false,
|
||||
status,
|
||||
};
|
||||
export const getCalls = (finalStatus: CallStates) => {
|
||||
const calls: Call[] = [
|
||||
{
|
||||
id: 'story--id [3] within',
|
||||
storyId: 'story--id',
|
||||
cursor: 3,
|
||||
path: [],
|
||||
method: 'within',
|
||||
args: [{ __element__: { localName: 'div', id: 'root' } }],
|
||||
interceptable: false,
|
||||
retain: false,
|
||||
status: CallStates.DONE,
|
||||
},
|
||||
{
|
||||
id: 'story--id [4] findByText',
|
||||
storyId: 'story--id',
|
||||
cursor: 4,
|
||||
path: [{ __callId__: 'story--id [3] within' }],
|
||||
method: 'findByText',
|
||||
args: ['Click'],
|
||||
interceptable: true,
|
||||
retain: false,
|
||||
status: CallStates.DONE,
|
||||
},
|
||||
{
|
||||
id: 'story--id [5] click',
|
||||
storyId: 'story--id',
|
||||
cursor: 5,
|
||||
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,
|
||||
path: [],
|
||||
method: 'waitFor',
|
||||
args: [{ __function__: { name: '' } }],
|
||||
interceptable: true,
|
||||
retain: false,
|
||||
status: CallStates.DONE,
|
||||
},
|
||||
{
|
||||
id: 'story--id [6] waitFor [0] expect',
|
||||
parentId: 'story--id [6] waitFor',
|
||||
storyId: 'story--id',
|
||||
cursor: 1,
|
||||
path: [],
|
||||
method: 'expect',
|
||||
args: [{ __function__: { name: 'handleSubmit' } }],
|
||||
interceptable: false,
|
||||
retain: false,
|
||||
status: CallStates.DONE,
|
||||
},
|
||||
{
|
||||
id: 'story--id [6] waitFor [1] stringMatching',
|
||||
parentId: 'story--id [6] waitFor',
|
||||
storyId: 'story--id',
|
||||
cursor: 2,
|
||||
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',
|
||||
parentId: 'story--id [6] waitFor',
|
||||
storyId: 'story--id',
|
||||
cursor: 3,
|
||||
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,
|
||||
path: [],
|
||||
method: 'expect',
|
||||
args: [{ __function__: { name: 'handleReset' } }],
|
||||
interceptable: false,
|
||||
retain: false,
|
||||
status: CallStates.DONE,
|
||||
},
|
||||
{
|
||||
id: 'story--id [8] toHaveBeenCalled',
|
||||
storyId: 'story--id',
|
||||
cursor: 8,
|
||||
path: [{ __callId__: 'story--id [7] expect' }, 'not'],
|
||||
method: 'toHaveBeenCalled',
|
||||
args: [],
|
||||
interceptable: true,
|
||||
retain: false,
|
||||
status: finalStatus,
|
||||
},
|
||||
];
|
||||
|
||||
const overrides = CallStates.ERROR
|
||||
? { exception: { name: 'Error', stack: '', message: "Things didn't work!" } }
|
||||
: {};
|
||||
if (finalStatus === CallStates.ERROR) {
|
||||
calls[calls.length - 1].exception = {
|
||||
name: 'Error',
|
||||
stack: '',
|
||||
message: 'Oops!',
|
||||
callId: calls[calls.length - 1].id,
|
||||
};
|
||||
}
|
||||
|
||||
return { ...defaultData, ...overrides };
|
||||
return calls;
|
||||
};
|
||||
|
||||
export const getInteractions = (finalStatus: CallStates) =>
|
||||
getCalls(finalStatus).filter((call) => call.interceptable);
|
||||
|
||||
@ -43,8 +43,9 @@ Start your Storybook with:
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'angular/storybook-run-dev.with-builder.js.mdx',
|
||||
'common/storybook-run-dev.npm.js.mdx',
|
||||
'common/storybook-run-dev.yarn.js.mdx',
|
||||
'common/storybook-run-dev.npm.js.mdx',
|
||||
|
||||
]}
|
||||
/>
|
||||
|
||||
@ -302,4 +303,4 @@ As the test runner is based on Playwright, you might need to use specific docker
|
||||
- [Accessibility tests](./accessibility-testing.md) for accessibility
|
||||
- [Interaction tests](./interaction-testing.md) for user behavior simulation
|
||||
- [Snapshot tests](./snapshot-testing.md) for rendering errors and warnings
|
||||
- [Import stories in other tests](./importing-stories-in-tests.md) for other tools
|
||||
- [Import stories in other tests](./importing-stories-in-tests.md) for other tools
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
/* eslint-disable no-underscore-dangle */
|
||||
|
||||
import { addons, mockChannel } from '@storybook/addons';
|
||||
import { logger } from '@storybook/client-logger';
|
||||
import {
|
||||
FORCE_REMOUNT,
|
||||
SET_CURRENT_STORY,
|
||||
@ -11,6 +12,8 @@ import global from 'global';
|
||||
import { EVENTS, Instrumenter } from './instrumenter';
|
||||
import type { Options } from './types';
|
||||
|
||||
jest.mock('@storybook/client-logger');
|
||||
|
||||
const callSpy = jest.fn();
|
||||
const syncSpy = jest.fn();
|
||||
const forceRemountSpy = jest.fn();
|
||||
@ -39,6 +42,8 @@ let instrumenter: Instrumenter;
|
||||
const instrument = <TObj extends Record<string, any>>(obj: TObj, options: Options = {}) =>
|
||||
instrumenter.instrument(obj, options);
|
||||
|
||||
const tick = () => new Promise((resolve) => setTimeout(resolve, 0));
|
||||
|
||||
beforeEach(() => {
|
||||
jest.useRealTimers();
|
||||
callSpy.mockClear();
|
||||
@ -296,25 +301,40 @@ describe('Instrumenter', () => {
|
||||
);
|
||||
});
|
||||
|
||||
it('catches thrown errors and returns the error', () => {
|
||||
it('catches thrown errors and throws an ignoredException instead', () => {
|
||||
const { fn } = instrument({
|
||||
fn: () => {
|
||||
throw new Error('Boom!');
|
||||
},
|
||||
});
|
||||
expect(fn()).toEqual(new Error('Boom!'));
|
||||
expect(() => setRenderPhase('played')).toThrow(new Error('Boom!'));
|
||||
expect(fn).toThrow('ignoredException');
|
||||
});
|
||||
|
||||
it('forwards nested exceptions', () => {
|
||||
it('catches nested exceptions and throws an ignoredException instead', () => {
|
||||
const { fn1, fn2 } = instrument({
|
||||
fn1: (...args: any) => {}, // doesn't forward args
|
||||
fn1: (_: any) => {},
|
||||
fn2: () => {
|
||||
throw new Error('Boom!');
|
||||
},
|
||||
});
|
||||
expect(fn1(fn2())).toEqual(new Error('Boom!'));
|
||||
expect(() => setRenderPhase('played')).toThrow(new Error('Boom!'));
|
||||
expect(() => fn1(fn2())).toThrow('ignoredException');
|
||||
});
|
||||
|
||||
it('bubbles child exceptions up to parent (in callback)', () => {
|
||||
const { fn1, fn2 } = instrument({
|
||||
fn1: jest.fn((callback: Function) => callback()),
|
||||
fn2: () => {
|
||||
throw new Error('Boom!');
|
||||
},
|
||||
});
|
||||
expect(() =>
|
||||
fn1(() => {
|
||||
fn2();
|
||||
})
|
||||
).toThrow('ignoredException');
|
||||
expect(fn1).toHaveBeenCalled();
|
||||
expect(logger.warn).toHaveBeenCalledWith(new Error('Boom!'));
|
||||
expect((logger.warn as any).mock.calls[0][0].callId).toBe('kind--story [0] fn1 [0] fn2');
|
||||
});
|
||||
|
||||
it("re-throws anything that isn't an error", () => {
|
||||
@ -357,6 +377,45 @@ describe('Instrumenter', () => {
|
||||
describe('with intercept: true', () => {
|
||||
const options = { intercept: true };
|
||||
|
||||
it('only includes intercepted calls in the log', async () => {
|
||||
const fn = (callback?: Function) => callback && callback();
|
||||
const { fn1, fn2 } = instrument({ fn1: fn, fn2: fn }, options);
|
||||
const { fn3 } = instrument({ fn3: fn }, { intercept: false });
|
||||
fn1();
|
||||
fn2();
|
||||
fn3();
|
||||
await tick();
|
||||
expect(syncSpy).toHaveBeenCalledWith(
|
||||
expect.objectContaining({
|
||||
logItems: [
|
||||
{ callId: 'kind--story [0] fn1', status: 'done' },
|
||||
{ callId: 'kind--story [1] fn2', status: 'done' },
|
||||
],
|
||||
})
|
||||
);
|
||||
});
|
||||
|
||||
it('also includes child calls in the log', async () => {
|
||||
const fn = (callback?: Function) => callback && callback();
|
||||
const { fn1, fn2 } = instrument({ fn1: fn, fn2: fn }, options);
|
||||
fn1(() => {
|
||||
fn2();
|
||||
});
|
||||
await tick();
|
||||
expect(syncSpy).toHaveBeenCalledWith(
|
||||
expect.objectContaining({
|
||||
logItems: [
|
||||
{ callId: 'kind--story [0] fn1', status: 'done' },
|
||||
{
|
||||
callId: 'kind--story [0] fn1 [0] fn2',
|
||||
status: 'done',
|
||||
parentId: 'kind--story [0] fn1',
|
||||
},
|
||||
],
|
||||
})
|
||||
);
|
||||
});
|
||||
|
||||
it('emits a call event with error data when the function throws', () => {
|
||||
const { fn } = instrument(
|
||||
{
|
||||
@ -374,35 +433,11 @@ describe('Instrumenter', () => {
|
||||
name: 'Error',
|
||||
message: 'Boom!',
|
||||
stack: expect.stringContaining('Error: Boom!'),
|
||||
callId: 'kind--story [0] fn',
|
||||
},
|
||||
})
|
||||
);
|
||||
});
|
||||
|
||||
it('catches thrown errors and throws an ignoredException instead', () => {
|
||||
const { fn } = instrument(
|
||||
{
|
||||
fn: () => {
|
||||
throw new Error('Boom!');
|
||||
},
|
||||
},
|
||||
options
|
||||
);
|
||||
expect(fn).toThrow('ignoredException');
|
||||
});
|
||||
|
||||
it('catches forwarded exceptions and throws an ignoredException instead', () => {
|
||||
const { fn1, fn2 } = instrument(
|
||||
{
|
||||
fn1: (_: any) => {},
|
||||
fn2: () => {
|
||||
throw new Error('Boom!');
|
||||
},
|
||||
},
|
||||
options
|
||||
);
|
||||
expect(() => fn1(fn2())).toThrow('ignoredException');
|
||||
});
|
||||
});
|
||||
|
||||
describe('while debugging', () => {
|
||||
@ -443,12 +478,13 @@ describe('Instrumenter', () => {
|
||||
});
|
||||
|
||||
it.skip('starts debugging at the first non-nested interceptable call', () => {
|
||||
const { fn } = instrument({ fn: jest.fn((...args: any) => args) }, { intercept: true });
|
||||
fn(fn(), fn()); // setup the dependencies
|
||||
const fn = (...args) => args;
|
||||
const { fn1, fn2, fn3 } = instrument({ fn1: fn, fn2: fn, fn3: fn }, { intercept: true });
|
||||
fn3(fn1(), fn2()); // setup the dependencies
|
||||
addons.getChannel().emit(EVENTS.START, { storyId });
|
||||
const a = fn('a');
|
||||
const b = fn('b');
|
||||
const c = fn(a, b);
|
||||
const a = fn1('a');
|
||||
const b = fn2('b');
|
||||
const c = fn3(a, b);
|
||||
expect(a).toEqual(['a']);
|
||||
expect(b).toEqual(['b']);
|
||||
expect(c).toEqual(expect.any(Promise));
|
||||
@ -476,13 +512,13 @@ describe('Instrumenter', () => {
|
||||
expect(fn).toHaveBeenCalledTimes(0);
|
||||
|
||||
addons.getChannel().emit(EVENTS.NEXT, { storyId });
|
||||
await new Promise((resolve) => setTimeout(resolve, 0));
|
||||
await tick();
|
||||
|
||||
expect(mockedInstrumentedFn).toHaveBeenCalledTimes(2);
|
||||
expect(fn).toHaveBeenCalledTimes(1);
|
||||
|
||||
addons.getChannel().emit(EVENTS.END, { storyId });
|
||||
await new Promise((resolve) => setTimeout(resolve, 0));
|
||||
await tick();
|
||||
|
||||
expect(mockedInstrumentedFn).toHaveBeenCalledTimes(3);
|
||||
expect(fn).toHaveBeenCalledTimes(3);
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
/* eslint-disable no-underscore-dangle */
|
||||
import { addons, Channel } from '@storybook/addons';
|
||||
import type { StoryId } from '@storybook/addons';
|
||||
import { once } from '@storybook/client-logger';
|
||||
import { logger, once } from '@storybook/client-logger';
|
||||
import {
|
||||
FORCE_REMOUNT,
|
||||
IGNORED_EXCEPTION,
|
||||
@ -10,7 +10,7 @@ import {
|
||||
} from '@storybook/core-events';
|
||||
import global from 'global';
|
||||
|
||||
import { Call, CallRef, CallStates, State, Options, ControlStates, LogItem } from './types';
|
||||
import { Call, CallRef, CallStates, ControlStates, LogItem, Options, State } from './types';
|
||||
|
||||
export const EVENTS = {
|
||||
CALL: 'instrumenter/call',
|
||||
@ -73,7 +73,6 @@ const getInitialState = (): State => ({
|
||||
playUntil: undefined,
|
||||
resolvers: {},
|
||||
syncTimeout: undefined,
|
||||
forwardedException: undefined,
|
||||
});
|
||||
|
||||
const getRetainedState = (state: State, isDebugging = false) => {
|
||||
@ -132,7 +131,7 @@ export class Instrumenter {
|
||||
|
||||
// Start with a clean slate before playing after a remount, and stop debugging when done.
|
||||
this.channel.on(STORY_RENDER_PHASE_CHANGED, ({ storyId, newPhase }) => {
|
||||
const { isDebugging, forwardedException } = this.getState(storyId);
|
||||
const { isDebugging } = this.getState(storyId);
|
||||
this.setState(storyId, { renderPhase: newPhase });
|
||||
if (newPhase === 'playing') {
|
||||
resetState({ storyId, isDebugging });
|
||||
@ -142,10 +141,13 @@ export class Instrumenter {
|
||||
isLocked: false,
|
||||
isPlaying: false,
|
||||
isDebugging: false,
|
||||
forwardedException: undefined,
|
||||
});
|
||||
// Rethrow any unhandled forwarded exception so it doesn't go unnoticed.
|
||||
if (forwardedException) throw forwardedException;
|
||||
}
|
||||
if (newPhase === 'errored') {
|
||||
this.setState(storyId, {
|
||||
isLocked: false,
|
||||
isPlaying: false,
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
@ -172,7 +174,7 @@ export class Instrumenter {
|
||||
playUntil ||
|
||||
shadowCalls
|
||||
.slice(0, firstRowIndex)
|
||||
.filter((call) => call.interceptable)
|
||||
.filter((call) => call.interceptable && !call.parentId)
|
||||
.slice(-1)[0]?.id,
|
||||
};
|
||||
});
|
||||
@ -182,12 +184,12 @@ export class Instrumenter {
|
||||
};
|
||||
|
||||
const back = ({ storyId }: { storyId: string }) => {
|
||||
const { isDebugging } = this.getState(storyId);
|
||||
const log = this.getLog(storyId);
|
||||
const next = isDebugging
|
||||
? log.findIndex(({ status }) => status === CallStates.WAITING)
|
||||
: log.length;
|
||||
start({ storyId, playUntil: log[next - 2]?.callId });
|
||||
const log = this.getLog(storyId).filter((call) => !call.parentId);
|
||||
const last = log.reduceRight((res, item, index) => {
|
||||
if (res >= 0 || item.status === CallStates.WAITING) return res;
|
||||
return index;
|
||||
}, -1);
|
||||
start({ storyId, playUntil: log[last - 1]?.callId });
|
||||
};
|
||||
|
||||
const goto = ({ storyId, callId }: { storyId: string; callId: Call['id'] }) => {
|
||||
@ -269,8 +271,8 @@ export class Instrumenter {
|
||||
seen.add((node as CallRef).__callId__);
|
||||
}
|
||||
});
|
||||
if (call.interceptable && !seen.has(call.id)) {
|
||||
acc.unshift({ callId: call.id, status: call.status });
|
||||
if ((call.interceptable || call.exception) && !seen.has(call.id)) {
|
||||
acc.unshift({ callId: call.id, status: call.status, parentId: call.parentId });
|
||||
seen.add(call.id);
|
||||
}
|
||||
return acc;
|
||||
@ -333,7 +335,8 @@ export class Instrumenter {
|
||||
const { path = [], intercept = false, retain = false } = options;
|
||||
const interceptable = typeof intercept === 'function' ? intercept(method, path) : intercept;
|
||||
const call: Call = { id, parentId, storyId, cursor, path, method, args, interceptable, retain };
|
||||
const result = (interceptable ? this.intercept : this.invoke).call(this, fn, call, options);
|
||||
const interceptOrInvoke = interceptable && !parentId ? this.intercept : this.invoke;
|
||||
const result = interceptOrInvoke.call(this, fn, call, options);
|
||||
return this.instrument(result, { ...options, mutate: true, path: [{ __callId__: call.id }] });
|
||||
}
|
||||
|
||||
@ -370,25 +373,50 @@ export class Instrumenter {
|
||||
// const { abortSignal } = global.window.__STORYBOOK_PREVIEW__ || {};
|
||||
// if (abortSignal && abortSignal.aborted) throw IGNORED_EXCEPTION;
|
||||
|
||||
const { callRefsByResult, forwardedException, renderPhase } = this.getState(call.storyId);
|
||||
const { callRefsByResult, renderPhase } = this.getState(call.storyId);
|
||||
|
||||
const info: Call = {
|
||||
...call,
|
||||
// Map args that originate from a tracked function call to a call reference to enable nesting.
|
||||
// These values are often not fully serializable anyway (e.g. HTML elements).
|
||||
args: call.args.map((arg) => {
|
||||
if (callRefsByResult.has(arg)) {
|
||||
return callRefsByResult.get(arg);
|
||||
}
|
||||
if (arg instanceof global.window.HTMLElement) {
|
||||
const { prefix, localName, id, classList, innerText } = arg;
|
||||
const classNames = Array.from(classList);
|
||||
return { __element__: { prefix, localName, id, classNames, innerText } };
|
||||
}
|
||||
return arg;
|
||||
}),
|
||||
// Map complex values to a JSON-serializable representation.
|
||||
const serializeValues = (value: any): any => {
|
||||
if (callRefsByResult.has(value)) {
|
||||
return callRefsByResult.get(value);
|
||||
}
|
||||
if (value instanceof Array) {
|
||||
return value.map(serializeValues);
|
||||
}
|
||||
if (value instanceof Date) {
|
||||
return { __date__: { value: value.toISOString() } };
|
||||
}
|
||||
if (value instanceof Error) {
|
||||
const { name, message, stack } = value;
|
||||
return { __error__: { name, message, stack } };
|
||||
}
|
||||
if (value instanceof RegExp) {
|
||||
const { flags, source } = value;
|
||||
return { __regexp__: { flags, source } };
|
||||
}
|
||||
if (value instanceof global.window.HTMLElement) {
|
||||
const { prefix, localName, id, classList, innerText } = value;
|
||||
const classNames = Array.from(classList);
|
||||
return { __element__: { prefix, localName, id, classNames, innerText } };
|
||||
}
|
||||
if (typeof value === 'function') {
|
||||
return { __function__: { name: value.name } };
|
||||
}
|
||||
if (typeof value === 'symbol') {
|
||||
return { __symbol__: { description: value.description } };
|
||||
}
|
||||
if (
|
||||
typeof value === 'object' &&
|
||||
value?.constructor?.name &&
|
||||
value?.constructor?.name !== 'Object'
|
||||
) {
|
||||
return { __class__: { name: value.constructor.name } };
|
||||
}
|
||||
return value;
|
||||
};
|
||||
|
||||
const info: Call = { ...call, args: call.args.map(serializeValues) };
|
||||
|
||||
// Mark any ancestor calls as "chained upon" so we won't attempt to defer it later.
|
||||
call.path.forEach((ref: any) => {
|
||||
if (ref?.__callId__) {
|
||||
@ -398,10 +426,10 @@ export class Instrumenter {
|
||||
}
|
||||
});
|
||||
|
||||
const handleException = (e: unknown) => {
|
||||
const handleException = (e: any) => {
|
||||
if (e instanceof Error) {
|
||||
const { name, message, stack } = e;
|
||||
const exception = { name, message, stack };
|
||||
const { name, message, stack, callId = call.id } = e as Error & { callId: Call['id'] };
|
||||
const exception = { name, message, stack, callId };
|
||||
this.update({ ...info, status: CallStates.ERROR, exception });
|
||||
|
||||
// Always track errors to their originating call.
|
||||
@ -412,50 +440,56 @@ export class Instrumenter {
|
||||
]),
|
||||
}));
|
||||
|
||||
// We need to throw to break out of the play function, but we don't want to trigger a redbox
|
||||
// so we throw an ignoredException, which is caught and silently ignored by Storybook.
|
||||
if (call.interceptable && e !== alreadyCompletedException) {
|
||||
throw IGNORED_EXCEPTION;
|
||||
// Exceptions inside callbacks should bubble up to the parent call.
|
||||
if (call.parentId) {
|
||||
Object.defineProperty(e, 'callId', { value: call.id });
|
||||
throw e;
|
||||
}
|
||||
|
||||
// Non-interceptable calls need their exceptions forwarded to the next interceptable call.
|
||||
// In case no interceptable call picks it up, it'll get rethrown in the "completed" phase.
|
||||
this.setState(call.storyId, { forwardedException: e });
|
||||
return e;
|
||||
// We need to throw to break out of the play function, but we don't want to trigger a redbox
|
||||
// so we throw an ignoredException, which is caught and silently ignored by Storybook.
|
||||
if (e !== alreadyCompletedException) {
|
||||
logger.warn(e);
|
||||
throw IGNORED_EXCEPTION;
|
||||
}
|
||||
}
|
||||
throw e;
|
||||
};
|
||||
|
||||
try {
|
||||
// An earlier, non-interceptable call might have forwarded an exception.
|
||||
if (forwardedException) {
|
||||
this.setState(call.storyId, { forwardedException: undefined });
|
||||
throw forwardedException;
|
||||
}
|
||||
|
||||
if (renderPhase === 'played' && !call.retain) {
|
||||
throw alreadyCompletedException;
|
||||
}
|
||||
|
||||
const finalArgs = options.getArgs
|
||||
// Some libraries override function args through the `getArgs` option.
|
||||
const actualArgs = options.getArgs
|
||||
? options.getArgs(call, this.getState(call.storyId))
|
||||
: call.args;
|
||||
const result = fn(
|
||||
// Wrap any callback functions to provide a way to access their "parent" call.
|
||||
// This is picked up in the `track` function and used for call metadata.
|
||||
...finalArgs.map((arg: any) => {
|
||||
if (typeof arg !== 'function' || Object.keys(arg).length) return arg;
|
||||
return (...args: any) => {
|
||||
const { cursor, parentId } = this.getState(call.storyId);
|
||||
this.setState(call.storyId, { cursor: 0, parentId: call.id });
|
||||
const restore = () => this.setState(call.storyId, { cursor, parentId });
|
||||
const res = arg(...args);
|
||||
if (res instanceof Promise) res.then(restore, restore);
|
||||
else restore();
|
||||
return res;
|
||||
};
|
||||
})
|
||||
);
|
||||
|
||||
// Wrap any callback functions to provide a way to access their "parent" call.
|
||||
// This is picked up in the `track` function and used for call metadata.
|
||||
const finalArgs = actualArgs.map((arg: any) => {
|
||||
// We only want to wrap plain functions, not objects.
|
||||
if (typeof arg !== 'function' || Object.keys(arg).length) return arg;
|
||||
|
||||
return (...args: any) => {
|
||||
// Set the cursor and parentId for calls that happen inside the callback.
|
||||
const { cursor, parentId } = this.getState(call.storyId);
|
||||
this.setState(call.storyId, { cursor: 0, parentId: call.id });
|
||||
const restore = () => this.setState(call.storyId, { cursor, parentId });
|
||||
|
||||
// Invoke the actual callback function.
|
||||
const res = arg(...args);
|
||||
|
||||
// Reset cursor and parentId to their original values before we entered the callback.
|
||||
if (res instanceof Promise) res.then(restore, restore);
|
||||
else restore();
|
||||
|
||||
return res;
|
||||
};
|
||||
});
|
||||
|
||||
const result = fn(...finalArgs);
|
||||
|
||||
// Track the result so we can trace later uses of it back to the originating call.
|
||||
// Primitive results (undefined, null, boolean, string, number, BigInt) are ignored.
|
||||
@ -510,6 +544,9 @@ export class Instrumenter {
|
||||
sync(storyId: StoryId) {
|
||||
const { isLocked, isPlaying } = this.getState(storyId);
|
||||
const logItems: LogItem[] = this.getLog(storyId);
|
||||
const pausedAt = logItems
|
||||
.filter(({ parentId }) => !parentId)
|
||||
.find((item) => item.status === CallStates.WAITING)?.callId;
|
||||
|
||||
const hasActive = logItems.some((item) => item.status === CallStates.ACTIVE);
|
||||
if (debuggerDisabled || isLocked || hasActive || logItems.length === 0) {
|
||||
@ -528,7 +565,8 @@ export class Instrumenter {
|
||||
next: isPlaying,
|
||||
end: isPlaying,
|
||||
};
|
||||
this.channel.emit(EVENTS.SYNC, { controlStates, logItems });
|
||||
|
||||
this.channel.emit(EVENTS.SYNC, { controlStates, logItems, pausedAt });
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -11,7 +11,12 @@ export interface Call {
|
||||
interceptable: boolean;
|
||||
retain: boolean;
|
||||
status?: CallStates.DONE | CallStates.ERROR | CallStates.ACTIVE | CallStates.WAITING;
|
||||
exception?: Error;
|
||||
exception?: {
|
||||
name: Error['name'];
|
||||
message: Error['message'];
|
||||
stack: Error['stack'];
|
||||
callId: Call['id'];
|
||||
};
|
||||
}
|
||||
|
||||
export enum CallStates {
|
||||
@ -47,6 +52,7 @@ export interface ControlStates {
|
||||
export interface LogItem {
|
||||
callId: Call['id'];
|
||||
status: Call['status'];
|
||||
parentId?: Call['id'];
|
||||
}
|
||||
|
||||
export interface Payload {
|
||||
|
||||
@ -20,6 +20,7 @@ const SkipToSidebarLink = styled(Button)(({ theme }) => ({
|
||||
display: 'none',
|
||||
'@media (min-width: 600px)': {
|
||||
position: 'absolute',
|
||||
display: 'block',
|
||||
top: 10,
|
||||
right: 15,
|
||||
padding: '10px 15px',
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user