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

refactor: add type safety for testing states

Browse Source
This commit is contained in:
Deen Denno 2021-08-13 17:37:31 -05:00 committed by Gert Hengeveld
parent c79f4ba81d
commit 0eb78d08ab
1 changed files with 17 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
addons/interactions/src/Panel.tsx
View File

@ -8,12 +8,19 @@ interface PanelProps {
active: boolean; active: boolean;
} }
enum TestingStates {
DONE = 'done',
NEXT = 'next',
PENDING = 'pending',
};
type TestState = TestingStates.DONE | TestingStates.NEXT | TestingStates.PENDING;
interface Call { interface Call {
id: string; id: string;
key: string; key: string;
args: any[]; args: any[];
intercepted?: boolean; intercepted?: boolean;
state?: string;//'done' | 'next' | 'pending'; state?: TestState;
} }
const setDebugging = (value: boolean) => (global.window.__STORYBOOK_DEBUGGING__ = !!value); const setDebugging = (value: boolean) => (global.window.__STORYBOOK_DEBUGGING__ = !!value);
@ -58,17 +65,17 @@ const Call = ({ call, nested }: { call: Call, nested?: boolean }) => {
display: nested ? "inline-block" : "flex", display: nested ? "inline-block" : "flex",
alignItems: "center", alignItems: "center",
padding: nested ? "none" : "8px 10px", padding: nested ? "none" : "8px 10px",
background: call.state === "next" ? "#FFF5CF" : "transparent", background: call.state === TestingStates.NEXT ? "#FFF5CF" : "transparent",
borderBottom: nested ? "none" : "1px solid #eee", borderBottom: nested ? "none" : "1px solid #eee",
opacity: call.state === "pending" && !nested ? 0.4 : 1, opacity: call.state === TestingStates.PENDING && !nested ? 0.4 : 1,
fontFamily: 'Monaco, monospace', fontFamily: 'Monaco, monospace',
fontSize: 12 fontSize: 12
}; };
return ( return (
<div style={style}> <div style={style}>
{!nested && call.state === "done" && <Icons icon="check" style={{ flexShrink: 0, width: 12, height: 12, padding: 1, marginRight: 5, color: 'green'}} />} {!nested && call.state === TestingStates.DONE && <Icons icon="check" style={{ flexShrink: 0, width: 12, height: 12, padding: 1, marginRight: 5, color: 'green'}} />}
{!nested && call.state === "next" && <Icons icon="stop" style={{ flexShrink: 0, width: 12, height: 12, marginRight: 5, color: 'red'}} />} {!nested && call.state === TestingStates.NEXT && <Icons icon="stop" style={{ flexShrink: 0, width: 12, height: 12, marginRight: 5, color: 'red'}} />}
{!nested && call.state === "pending" && <Icons icon="circle" style={{ flexShrink: 0, width: 12, height: 12, padding: 4, marginRight: 5, color: 'gray'}} />} {!nested && call.state === TestingStates.PENDING && <Icons icon="circle" style={{ flexShrink: 0, width: 12, height: 12, padding: 4, marginRight: 5, color: 'gray'}} />}
{call.key.split('.').flatMap((elem, index, array) => {call.key.split('.').flatMap((elem, index, array) =>
index === array.length - 1 index === array.length - 1
? [<span key={index} style={{color: "#4776D6"}}>{elem}</span>] ? [<span key={index} style={{color: "#4776D6"}}>{elem}</span>]
@ -114,11 +121,11 @@ export const Panel: React.FC<PanelProps> = (props) => {
emit(EVENTS.NEXT); emit(EVENTS.NEXT);
}; };
const mapped = log.reduce((acc, call, index) => { const mapped: Call[] = log.reduce((acc, call, index) => {
acc[index] = { ...call, state: 'done' }; acc[index] = { ...call, state: TestingStates.DONE };
return acc return acc
}, lastLog.map(call => ({ ...call, state: 'pending' }))) }, lastLog.map(call => ({ ...call, state: TestingStates.PENDING })))
if (isDebugging()) mapped[log.length - 1].state = 'next' if (isDebugging()) mapped[log.length - 1].state = TestingStates.NEXT
return ( return (
<AddonPanel {...props}> <AddonPanel {...props}>