Unverified Commit 52db0360 authored by Joaquim Rocha's avatar Joaquim Rocha Committed by GitHub
Browse files

Merge pull request #757 from kinvolk/test-cleanup

frontend: fix test warnings so running tests is less chatty
Showing with 1053 additions and 138 deletions
+1053 -138
import React from 'react';
import themesConf from '../src/lib/themes';
import { ThemeProvider, StylesProvider } from '@material-ui/core/styles';
import { initialize, mswDecorator } from 'msw-storybook-addon';
import { rest } from 'msw'
// https://github.com/mswjs/msw-storybook-addon
initialize();
const darkTheme = themesConf['dark'];
const lightTheme = themesConf['light'];
......@@ -29,7 +34,7 @@ const withThemeProvider = (Story, context) => {
)
}
};
export const decorators = [withThemeProvider];
export const decorators = [withThemeProvider, mswDecorator];
export const globalTypes = {
theme: {
......@@ -51,4 +56,22 @@ export const parameters = {
],
},
actions: { argTypesRegex: '^on[A-Z].*' },
// https://github.com/mswjs/msw-storybook-addon#composing-request-handlers
msw: {
handlers: [
rest.get('https://api.iconify.design/mdi.json', (_req, res, ctx) => {
return res(ctx.json({}));
}),
rest.get('http://localhost/api/v1/namespaces', (_req, res, ctx) => {
return res(ctx.json({}));
}),
rest.get('http://localhost/api/v1/events', (_req, res, ctx) => {
return res(ctx.json({}));
}),
rest.post('http://localhost/apis/authorization.k8s.io/v1/selfsubjectaccessreviews', (_req, res, ctx) => {
return res(ctx.json({status: 200}));
}),
]
},
};
This diff is collapsed.
......@@ -90,7 +90,7 @@
"start": "react-scripts start",
"prebuild": "npm run make-version",
"build": "if-env PUBLIC_URL react-scripts build || cross-env PUBLIC_URL=./ react-scripts build --max_old_space_size=768 && rimraf build/frontend/index.baseUrl.html",
"test": "cross-env TEST_TZ=true react-scripts test",
"test": "cross-env UNDER_TEST=true react-scripts test",
"eject": "react-scripts eject",
"lint": "eslint -c package.json --ext .js,.ts,.tsx src/ ../app/electron ../plugins/headlamp-plugin --ignore-pattern ../plugins/headlamp-plugin/template",
"format": "prettier --config package.json --write src ../app/electron ../plugins/headlamp-plugin/bin ../plugins/headlamp-plugin/lib ../plugins/headlamp-plugin/config ../plugins/headlamp-plugin/template ../plugins/headlamp-plugin/test*.js",
......@@ -191,6 +191,8 @@
"husky": "^4.3.8",
"i18next-parser": "^4.7.0",
"lint-staged": "^10.5.4",
"msw": "^0.47.4",
"msw-storybook-addon": "^1.6.3",
"prettier": "^2.4.1",
"resize-observer-polyfill": "^1.5.1",
"typedoc": "^0.22.10",
......
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots TopBar No Token 1`] = `
<div
id="root"
>
<div>
<nav
aria-label="Appbar Tools"
class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appbar makeStyles-appbar mui-fixed MuiPaper-elevation1"
......@@ -116,9 +114,7 @@ exports[`Storyshots TopBar No Token 1`] = `
`;
exports[`Storyshots TopBar One Cluster 1`] = `
<div
id="root"
>
<div>
<nav
aria-label="Appbar Tools"
class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appbar makeStyles-appbar mui-fixed MuiPaper-elevation1"
......@@ -231,9 +227,7 @@ exports[`Storyshots TopBar One Cluster 1`] = `
`;
exports[`Storyshots TopBar Token 1`] = `
<div
id="root"
>
<div>
<nav
aria-label="Appbar Tools"
class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appbar makeStyles-appbar mui-fixed MuiPaper-elevation1"
......@@ -346,9 +340,7 @@ exports[`Storyshots TopBar Token 1`] = `
`;
exports[`Storyshots TopBar Two Cluster 1`] = `
<div
id="root"
>
<div>
<nav
aria-label="Appbar Tools"
class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appbar makeStyles-appbar mui-fixed MuiPaper-elevation1"
......
......@@ -2,6 +2,6 @@
exports[`Storyshots Version Dialog Version Dialog 1`] = `
<div
id="root"
aria-hidden="true"
/>
`;
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots DetailsViewSection Match Render It 1`] = `
<div
id="root"
/>
`;
exports[`Storyshots DetailsViewSection Match Render It 1`] = `<div />`;
exports[`Storyshots DetailsViewSection No Match No Render 1`] = `
<div
id="root"
/>
`;
exports[`Storyshots DetailsViewSection No Match No Render 1`] = `<div />`;
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Sidebar/Sidebar Closed 1`] = `
<div
id="root"
>
<div>
<div
class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer makeStyles-drawerClose"
>
......@@ -753,9 +751,7 @@ exports[`Storyshots Sidebar/Sidebar Closed 1`] = `
`;
exports[`Storyshots Sidebar/Sidebar Open 1`] = `
<div
id="root"
>
<div>
<div
class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer makeStyles-drawerOpen"
>
......
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Sidebar/SidebarItem Selected 1`] = `
<div
id="root"
>
<div>
<div
class="MuiGrid-root MuiGrid-item"
style="background-color: rgba(0, 0, 0, 0.87);"
......@@ -44,9 +42,7 @@ exports[`Storyshots Sidebar/SidebarItem Selected 1`] = `
`;
exports[`Storyshots Sidebar/SidebarItem Sublist 1`] = `
<div
id="root"
>
<div>
<div
class="MuiGrid-root MuiGrid-item"
style="background-color: rgba(0, 0, 0, 0.87);"
......@@ -130,9 +126,7 @@ exports[`Storyshots Sidebar/SidebarItem Sublist 1`] = `
`;
exports[`Storyshots Sidebar/SidebarItem Sublist Expanded 1`] = `
<div
id="root"
>
<div>
<div
class="MuiGrid-root MuiGrid-item"
style="background-color: rgba(0, 0, 0, 0.87);"
......@@ -216,9 +210,7 @@ exports[`Storyshots Sidebar/SidebarItem Sublist Expanded 1`] = `
`;
exports[`Storyshots Sidebar/SidebarItem Unselected 1`] = `
<div
id="root"
>
<div>
<div
class="MuiGrid-root MuiGrid-item"
style="background-color: rgba(0, 0, 0, 0.87);"
......
......@@ -2,7 +2,7 @@
exports[`Storyshots AuthToken Show Actions 1`] = `
<div
id="root"
aria-hidden="true"
>
<main
class="MuiBox-root MuiBox-root"
......@@ -12,7 +12,7 @@ exports[`Storyshots AuthToken Show Actions 1`] = `
exports[`Storyshots AuthToken Show Error 1`] = `
<div
id="root"
aria-hidden="true"
>
<main
class="MuiBox-root MuiBox-root"
......
......@@ -2,30 +2,30 @@
exports[`Storyshots AuthChooser An Error 1`] = `
<div
id="root"
aria-hidden="true"
/>
`;
exports[`Storyshots AuthChooser Auth Typeoidc 1`] = `
<div
id="root"
aria-hidden="true"
/>
`;
exports[`Storyshots AuthChooser Basic Auth Chooser 1`] = `
<div
id="root"
aria-hidden="true"
/>
`;
exports[`Storyshots AuthChooser Have Clusters 1`] = `
<div
id="root"
aria-hidden="true"
/>
`;
exports[`Storyshots AuthChooser Testing 1`] = `
<div
id="root"
aria-hidden="true"
/>
`;
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots common/ActionButton Basic 1`] = `
<div
id="root"
>
<div>
<button
aria-label="Some label"
class="MuiButtonBase-root MuiIconButton-root"
......@@ -24,9 +22,7 @@ exports[`Storyshots common/ActionButton Basic 1`] = `
`;
exports[`Storyshots common/ActionButton Large And Colorful 1`] = `
<div
id="root"
>
<div>
<button
aria-label="Some label"
class="MuiButtonBase-root MuiIconButton-root"
......@@ -47,9 +43,7 @@ exports[`Storyshots common/ActionButton Large And Colorful 1`] = `
`;
exports[`Storyshots common/ActionButton Long Description 1`] = `
<div
id="root"
>
<div>
<button
aria-label="Some label"
class="MuiButtonBase-root MuiIconButton-root"
......
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Charts/PercentageBar No Data 1`] = `
<div
id="root"
>
<div>
<div
class="recharts-responsive-container makeStyles-container"
style="width: 95%; height: 20px;"
......@@ -12,9 +10,7 @@ exports[`Storyshots Charts/PercentageBar No Data 1`] = `
`;
exports[`Storyshots Charts/PercentageBar Percent 50 1`] = `
<div
id="root"
>
<div>
<div
class="recharts-responsive-container makeStyles-container"
style="width: 95%; height: 20px;"
......@@ -23,9 +19,7 @@ exports[`Storyshots Charts/PercentageBar Percent 50 1`] = `
`;
exports[`Storyshots Charts/PercentageBar Percent 100 1`] = `
<div
id="root"
>
<div>
<div
class="recharts-responsive-container makeStyles-container"
style="width: 95%; height: 20px;"
......@@ -34,9 +28,7 @@ exports[`Storyshots Charts/PercentageBar Percent 100 1`] = `
`;
exports[`Storyshots Charts/PercentageBar Tooltip 1`] = `
<div
id="root"
>
<div>
<div
class="recharts-responsive-container makeStyles-container"
style="width: 95%; height: 20px;"
......
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Charts/PercentageCircle No Data 1`] = `
<div
id="root"
>
<div>
<div
aria-busy="true"
aria-live="polite"
......@@ -43,9 +41,7 @@ exports[`Storyshots Charts/PercentageCircle No Data 1`] = `
`;
exports[`Storyshots Charts/PercentageCircle Percent 50 1`] = `
<div
id="root"
>
<div>
<div
aria-busy="false"
aria-live="polite"
......@@ -127,9 +123,7 @@ exports[`Storyshots Charts/PercentageCircle Percent 50 1`] = `
`;
exports[`Storyshots Charts/PercentageCircle Percent 100 1`] = `
<div
id="root"
>
<div>
<div
aria-busy="false"
aria-live="polite"
......
......@@ -60,7 +60,11 @@ export function DialogTitle(props: OurDialogTitleProps) {
</Grid>
{buttons && buttons.length > 0 && (
<Grid item>
<Box>{buttons}</Box>
<Box>
{buttons.map((button, index) => {
return <React.Fragment key={index}>{button}</React.Fragment>;
})}
</Box>
</Grid>
)}
</Grid>
......
......@@ -19,30 +19,42 @@ const Template: Story<ErrorBoundaryProps> = args => (
<i>This is not failing.</i>
</ErrorBoundary>
);
export const NoProblem = Template.bind({});
const NoProblem = Template.bind({});
NoProblem.args = {};
const BrokenTemplate: Story<ErrorBoundaryProps> = args => (
<ErrorBoundary {...args}>
<BrokenComponent />
</ErrorBoundary>
);
export const BrokenNoFallback = BrokenTemplate.bind({});
BrokenNoFallback.args = {};
// Do not run these under test, because they emit lots of console.error logs.
// It's still useful to run them in the storybook, to see and test them manually.
type StoryOrNull = Story<ErrorBoundaryProps> | (() => void);
let BrokenNoFallback: StoryOrNull = () => 'disabled under test to avoid console spam';
let BrokenFallback: StoryOrNull = () => 'disabled under test to avoid console spam';
let BrokenFallbackElement: StoryOrNull = () => 'disabled under test to avoid console spam';
const BrokenFallbackTemplate: Story<ErrorBoundaryProps> = args => (
<ErrorBoundary {...args}>
<BrokenComponent />
</ErrorBoundary>
);
export const BrokenFallback = BrokenFallbackTemplate.bind({});
BrokenFallback.args = {
fallback: ({ error }: { error: Error }) => {
return <div>This is a fallback. Error msg: "{error}"</div>;
},
};
export const BrokenFallbackElement = BrokenFallbackTemplate.bind({});
BrokenFallback.args = {
fallback: <p>A simple element</p>,
};
if (process.env.UNDER_TEST !== 'true') {
// These are only seen in the storybook, not under test.
const BrokenTemplate: Story<ErrorBoundaryProps> = args => (
<ErrorBoundary {...args}>
<BrokenComponent />
</ErrorBoundary>
);
BrokenNoFallback = BrokenTemplate.bind({});
BrokenNoFallback.args = {};
const BrokenFallbackTemplate: Story<ErrorBoundaryProps> = args => (
<ErrorBoundary {...args}>
<BrokenComponent />
</ErrorBoundary>
);
BrokenFallback = BrokenFallbackTemplate.bind({});
BrokenFallback.args = {
fallback: ({ error }: { error: Error }) => {
return <div>This is a fallback. Error msg: "{error}"</div>;
},
};
BrokenFallbackElement = BrokenFallbackTemplate.bind({});
BrokenFallback.args = {
fallback: <p>A simple element</p>,
};
}
export { NoProblem, BrokenNoFallback, BrokenFallback, BrokenFallbackElement };
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots common/ErrorBoundary Broken Fallback 1`] = `
<div
id="root"
>
<p>
A simple element
</p>
<div>
disabled under test to avoid console spam
</div>
`;
exports[`Storyshots common/ErrorBoundary Broken Fallback Element 1`] = `
<div
id="root"
/>
<div>
disabled under test to avoid console spam
</div>
`;
exports[`Storyshots common/ErrorBoundary Broken No Fallback 1`] = `
<div
id="root"
/>
<div>
disabled under test to avoid console spam
</div>
`;
exports[`Storyshots common/ErrorBoundary No Problem 1`] = `
<div
id="root"
>
<div>
<i>
This is not failing.
</i>
......
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Label/HeaderLabel Header Label 1`] = `
<div
id="root"
>
<div>
<div
class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-column MuiGrid-align-items-xs-center"
>
......@@ -34,9 +32,7 @@ exports[`Storyshots Label/HeaderLabel Header Label 1`] = `
`;
exports[`Storyshots Label/HeaderLabel Header Label Tool Tip 1`] = `
<div
id="root"
>
<div>
<div
class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-column MuiGrid-align-items-xs-center"
>
......
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Label/HoverInfoLabel Hover Info Label 1`] = `
<div
id="root"
>
<div>
<p
class="MuiTypography-root makeStyles-noWrap MuiTypography-body1"
title="hover info"
......@@ -15,9 +13,7 @@ exports[`Storyshots Label/HoverInfoLabel Hover Info Label 1`] = `
`;
exports[`Storyshots Label/HoverInfoLabel Hover Info Label Info 1`] = `
<div
id="root"
>
<div>
<p
class="MuiTypography-root makeStyles-noWrap MuiTypography-body1"
>
......
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Label/InfoLabel Info Label 1`] = `
<div
id="root"
>
<div>
<div
class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-2 MuiGrid-item MuiGrid-align-items-xs-flex-start"
>
......
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Label/NameLabel Name Label 1`] = `
<div
id="root"
>
<div>
<span
class="MuiTypography-root makeStyles-nameLabel MuiTypography-body1"
>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment