Merge pull request #757 from kinvolk/test-cleanup

frontend: fix test warnings so running tests is less chatty

frontend/.storybook/preview.tsx

 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}));
+      }),
+    ]
+  },
 };

frontend/package.json

@@ -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",

frontend/src/components/App/__snapshots__/TopBar.stories.storyshot

 // 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"

frontend/src/components/App/__snapshots__/VersionDialog.stories.storyshot

@@ -2,6 +2,6 @@
 
 exports[`Storyshots Version Dialog Version Dialog 1`] = `
 <div
-  id="root"
+  aria-hidden="true"
 />
 `;

frontend/src/components/DetailsViewSection/__snapshots__/DetailsViewSection.stories.storyshot

 // 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 />`;

frontend/src/components/Sidebar/__snapshots__/Sidebar.stories.storyshot

 // 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"
   >

frontend/src/components/Sidebar/__snapshots__/Sidebaritem.stories.storyshot

 // 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);"

frontend/src/components/account/__snapshots__/AuthToken.stories.storyshot

@@ -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"

frontend/src/components/authchooser/__snapshots__/AuthChooser.stories.storyshot

@@ -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"
 />
 `;

frontend/src/components/common/ActionButton/__snapshots__/ActionButton.stories.storyshot

 // 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"

frontend/src/components/common/Chart.stories/__snapshots__/PercentBar.stories.storyshot

 // 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;"

frontend/src/components/common/Chart.stories/__snapshots__/PercentageCircle.stories.storyshot

 // 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"

frontend/src/components/common/Dialog.tsx

@@ -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>

frontend/src/components/common/ErrorBoundary/ErrorBoundary.stories.tsx

@@ -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 };

frontend/src/components/common/ErrorBoundary/__snapshots__/ErrorBoundary.stories.storyshot

 // 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>

frontend/src/components/common/Label.stories/__snapshots__/HeaderLabel.stories.storyshot

 // 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"
   >

frontend/src/components/common/Label.stories/__snapshots__/HoverInfoLabel.stories.storyshot

 // 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"
   >

frontend/src/components/common/Label.stories/__snapshots__/InfoLabel.stories.storyshot

 // 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"
   >

frontend/src/components/common/Label.stories/__snapshots__/NameLabel.stories.storyshot

 // 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"
   >