mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-07 07:21:17 +08:00
Refactor test runner error handling and logging
This commit is contained in:
parent
e224aa9fd8
commit
03f205c12b
@ -85,10 +85,12 @@ export const bootTestRunner = async (channel: Channel, initEvent?: string, initA
|
||||
resolve();
|
||||
} else if (result.type === 'error') {
|
||||
killChild();
|
||||
log(`${result.message}: ${result.error}`);
|
||||
const fullMessage = `${result.message}: ${result.error}`
|
||||
log(fullMessage);
|
||||
|
||||
if (attempt >= MAX_START_ATTEMPTS) {
|
||||
log(`Aborting test runner process after ${attempt} restart attempts`);
|
||||
stderr.push(fullMessage);
|
||||
reject();
|
||||
} else if (!aborted) {
|
||||
log(`Restarting test runner process (attempt ${attempt}/${MAX_START_ATTEMPTS})`);
|
||||
|
@ -33,6 +33,7 @@ const initialTestProviderState: TestProviderState = {
|
||||
running: false,
|
||||
watching: false,
|
||||
failed: false,
|
||||
crashed: false,
|
||||
};
|
||||
|
||||
const filterNone: API_FilterFunction = () => true;
|
||||
@ -129,6 +130,7 @@ export const SidebarBottomBase = ({ api, notifications = [], status = {} }: Side
|
||||
cancelling: false,
|
||||
running: true,
|
||||
failed: false,
|
||||
crashed: false,
|
||||
};
|
||||
setTestProviders((state) => ({ ...state, [id]: { ...state[id], ...startingState } }));
|
||||
api.experimental_updateStatus(id, (state = {}) =>
|
||||
@ -171,7 +173,7 @@ export const SidebarBottomBase = ({ api, notifications = [], status = {} }: Side
|
||||
|
||||
useEffect(() => {
|
||||
const onCrashReport = ({ providerId, ...details }: { providerId: string }) => {
|
||||
updateTestProvider(providerId, { details, failed: true });
|
||||
updateTestProvider(providerId, { details, crashed: true });
|
||||
};
|
||||
|
||||
const onProgressReport = ({ providerId, ...payload }: TestingModuleProgressReportPayload) => {
|
||||
@ -226,8 +228,6 @@ export const SidebarBottomBase = ({ api, notifications = [], status = {} }: Side
|
||||
);
|
||||
};
|
||||
|
||||
const TESTING_MODULE_ID = 'storybook-testing-module';
|
||||
|
||||
export const SidebarBottom = () => {
|
||||
const api = useStorybookApi();
|
||||
const { notifications, status } = useStorybookState();
|
||||
|
@ -24,7 +24,7 @@ const spin = keyframes({
|
||||
'100%': { transform: 'rotate(360deg)' },
|
||||
});
|
||||
|
||||
const Outline = styled.div<{ failed: boolean; running: boolean }>(({ failed, running, theme }) => ({
|
||||
const Outline = styled.div<{ crashed: boolean; running: boolean }>(({ crashed, running, theme }) => ({
|
||||
position: 'relative',
|
||||
lineHeight: '20px',
|
||||
width: '100%',
|
||||
@ -33,7 +33,7 @@ const Outline = styled.div<{ failed: boolean; running: boolean }>(({ failed, run
|
||||
background: `var(--sb-sidebar-bottom-card-background, ${theme.background.content})`,
|
||||
borderRadius:
|
||||
`var(--sb-sidebar-bottom-card-border-radius, ${theme.appBorderRadius + 1}px)` as any,
|
||||
boxShadow: `inset 0 0 0 1px ${failed && !running ? theme.color.negative : theme.appBorderColor}, var(--sb-sidebar-bottom-card-box-shadow, 0 1px 2px 0 rgba(0, 0, 0, 0.05), 0px -5px 20px 10px ${theme.background.app})`,
|
||||
boxShadow: `inset 0 0 0 1px ${crashed && !running ? theme.color.negative : theme.appBorderColor}, var(--sb-sidebar-bottom-card-box-shadow, 0 1px 2px 0 rgba(0, 0, 0, 0.05), 0px -5px 20px 10px ${theme.background.app})`,
|
||||
transitionProperty: 'color, background-color, border-color, text-decoration-color, fill, stroke',
|
||||
transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
|
||||
transitionDuration: '0.15s',
|
||||
@ -49,7 +49,7 @@ const Outline = styled.div<{ failed: boolean; running: boolean }>(({ failed, run
|
||||
height: 'max(100vw, 100vh)',
|
||||
width: 'max(100vw, 100vh)',
|
||||
animation: `${spin} 3s linear infinite`,
|
||||
background: failed
|
||||
background: crashed
|
||||
? `conic-gradient(transparent 90deg, ${theme.color.orange} 150deg, ${theme.color.gold} 210deg, transparent 270deg)`
|
||||
: `conic-gradient(transparent 90deg, ${theme.color.secondary} 150deg, ${theme.color.seafoam} 210deg, transparent 270deg)`,
|
||||
opacity: 1,
|
||||
@ -171,13 +171,13 @@ const DynamicInfo = ({ state }: { state: TestProviders[keyof TestProviders] }) =
|
||||
}, []);
|
||||
return (
|
||||
<Info key={iterator}>
|
||||
<Title failed={state.failed}>{state.title(state)}</Title>
|
||||
<Title failed={state.failed || state.crashed}>{state.title(state)}</Title>
|
||||
<Description>{state.description(state)}</Description>
|
||||
</Info>
|
||||
);
|
||||
};
|
||||
|
||||
export interface TestingModuleProps {
|
||||
interface TestingModuleProps {
|
||||
testProviders: TestProviders[keyof TestProviders][];
|
||||
errorCount: number;
|
||||
errorsActive: boolean;
|
||||
@ -216,11 +216,11 @@ export const TestingModule = ({
|
||||
};
|
||||
|
||||
const running = testProviders.some((tp) => tp.running);
|
||||
const failed = testProviders.some((tp) => tp.failed);
|
||||
const crashed = testProviders.some((tp) => tp.crashed);
|
||||
const testing = testProviders.length > 0;
|
||||
|
||||
return (
|
||||
<Outline running={running} failed={failed || errorCount > 0}>
|
||||
<Outline running={running} failed={crashed}>
|
||||
<Card>
|
||||
<Collapsible
|
||||
style={{
|
||||
|
Loading…
x
Reference in New Issue
Block a user