Merge pull request #1487 from headlamp-k8s/change-logo-test

Fixes for headlamp-plugin tests and story tests for change-logo and tables examples

plugins/examples/change-logo/package.json

@@ -28,6 +28,6 @@
     ]
   },
   "devDependencies": {
-    "@kinvolk/headlamp-plugin": "^0.6.1"
+    "@kinvolk/headlamp-plugin": "^0.7.2"
   }
 }

plugins/examples/change-logo/src/ReactiveLogo.stories.tsx

@@ -0,0 +1,43 @@
+import { AppLogoProps } from '@kinvolk/headlamp-plugin/lib';
+import { Meta, Story } from '@storybook/react/types-6-0';
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import { ReactiveLogo } from './index';
+
+export default {
+  title: 'ReactiveLogo',
+  component: ReactiveLogo,
+  decorators: [
+    Story => (
+      <MemoryRouter>
+        <Story />
+      </MemoryRouter>
+    ),
+  ],
+} as Meta;
+
+const Template: Story<AppLogoProps> = args => <ReactiveLogo {...args} />;
+
+export const SmallDark = Template.bind({});
+SmallDark.args = {
+  logoType: 'small',
+  themeName: 'dark',
+};
+
+export const SmallLight = Template.bind({});
+SmallLight.args = {
+  logoType: 'small',
+  themeName: 'light',
+};
+
+export const LargeDark = Template.bind({});
+LargeDark.args = {
+  logoType: 'large',
+  themeName: 'dark',
+};
+
+export const LargeLight = Template.bind({});
+LargeLight.args = {
+  logoType: 'large',
+  themeName: 'light',
+};

plugins/examples/change-logo/src/__snapshots__/ReactiveLogo.stories.storyshot

@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots ReactiveLogo Large Dark 1`] = `
+<div>
+  <p>
+    large dark theme logo
+  </p>
+</div>
+`;
+
+exports[`Storyshots ReactiveLogo Large Light 1`] = `
+<div>
+  <p>
+    large light theme logo
+  </p>
+</div>
+`;
+
+exports[`Storyshots ReactiveLogo Small Dark 1`] = `
+<div>
+  <p>
+    small dark theme logo
+  </p>
+</div>
+`;
+
+exports[`Storyshots ReactiveLogo Small Light 1`] = `
+<div>
+  <p>
+    small light theme logo
+  </p>
+</div>
+`;

plugins/examples/change-logo/src/index.tsx

@@ -30,7 +30,7 @@ function SimpleLogo(props: AppLogoProps) {
 /**
  * This logo example shows how you can customize the logo more for different conditions.
  */
-function ReactiveLogo(props: AppLogoProps) {
+export function ReactiveLogo(props: AppLogoProps) {
   const { logoType, themeName } = props;
 
   if (logoType === 'small' && themeName === 'dark') {

plugins/examples/change-logo/src/storybook.test.tsx

@@ -0,0 +1,3 @@
+import { initTests } from '@kinvolk/headlamp-plugin/config/storyshots/storyshots-test';
+
+initTests();

plugins/examples/tables/package.json

@@ -30,6 +30,6 @@
     ]
   },
   "devDependencies": {
-    "@kinvolk/headlamp-plugin": "^0.6.1"
+    "@kinvolk/headlamp-plugin": "^0.7.2"
   }
 }

plugins/examples/tables/src/ContextMenu.stories.tsx

@@ -0,0 +1,23 @@
+import { Meta, Story } from '@storybook/react/types-6-0';
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import { ContextMenu, ContextMenuProps } from './index';
+
+export default {
+  title: 'ContextMenu',
+  component: ContextMenu,
+  decorators: [
+    Story => (
+      <MemoryRouter>
+        <Story />
+      </MemoryRouter>
+    ),
+  ],
+} as Meta;
+
+const Template: Story<ContextMenuProps> = args => <ContextMenu {...args} />;
+
+export const OpenMenu = Template.bind({});
+OpenMenu.args = {
+  detailsLink: 'https://headlamp.dev/',
+};

plugins/examples/tables/src/__snapshots__/ContextMenu.stories.storyshot

@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots ContextMenu Open Menu 1`] = `
+<div>
+  <button
+    aria-label="Open pod context menu"
+    class="MuiButtonBase-root MuiIconButton-root"
+    tabindex="0"
+    title="Open pod context menu"
+    type="button"
+  >
+    <span
+      class="MuiIconButton-label"
+    >
+      <span />
+    </span>
+    <span
+      class="MuiTouchRipple-root"
+    />
+  </button>
+</div>
+`;

plugins/examples/tables/src/index.tsx

@@ -5,9 +5,15 @@ import { Menu, MenuItem, Typography } from '@material-ui/core';
 import React from 'react';
 import { useHistory } from 'react-router-dom';
 
-// Will show a 3-dot menu with two options: Details and Delete.
-function ContextMenu(props: { pod: Pod }) {
-  const { pod } = props;
+export interface ContextMenuProps {
+  detailsLink: string;
+}
+
+/**
+ * Will show a 3-dot menu with two options: Details and Delete.
+ */
+export function ContextMenu(props: ContextMenuProps) {
+  const { detailsLink } = props;
   const [anchorEl, setAnchorEl] = React.useState(null);
   const history = useHistory();
 
@@ -29,7 +35,7 @@ function ContextMenu(props: { pod: Pod }) {
       <Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleClose}>
         <MenuItem
           onClick={() => {
-            history.push(pod.getDetailsLink());
+            history.push(detailsLink);
           }}
         >
           <Typography>Details</Typography>
@@ -66,7 +72,7 @@ registerResourceTableColumnsProcessor(function setupContextMenuForPodsList({ id,
     columns.push({
       label: '',
       getter: (pod: Pod) => {
-        return <ContextMenu pod={pod} />;
+        return <ContextMenu detailsLink={pod.getDetailsLink()} />;
       },
     });
   }

plugins/examples/tables/src/storybook.test.tsx

@@ -0,0 +1,3 @@
+import { initTests } from '@kinvolk/headlamp-plugin/config/storyshots/storyshots-test';
+
+initTests();

plugins/headlamp-plugin/bin/headlamp-plugin.js

@@ -296,9 +296,10 @@ function start() {
  * @param packageFolder {string} - folder where the package, or folder of packages is.
  * @param scriptName {string} - name of the script to run.
  * @param cmdLine {string} - command line to run.
+ * @param env {object} - environment variables to run the command with.
  * @returns {0 | 1} - Exit code, where 0 is success, 1 is failure.
  */
-function runScriptOnPackages(packageFolder, scriptName, cmdLine) {
+function runScriptOnPackages(packageFolder, scriptName, cmdLine, env) {
   if (!fs.existsSync(packageFolder)) {
     console.error(`"${packageFolder}" does not exist. Not ${scriptName}-ing.`);
     return 1;
@@ -378,6 +379,7 @@ function runScriptOnPackages(packageFolder, scriptName, cmdLine) {
       child_process.execSync(cmdLineToUse, {
         stdio: 'inherit',
         encoding: 'utf8',
+        env: { ...process.env, ...(env || {}) },
       });
     } catch (e) {
       console.error(`Problem running ${scriptName} inside of "${folder}"\r\n`);
@@ -516,7 +518,7 @@ function format(packageFolder, check) {
   const cmdLine = check
     ? `prettier --config package.json --check src`
     : 'prettier --config package.json --write src';
-  return runScriptOnPackages(packageFolder, 'format', cmdLine);
+  return runScriptOnPackages(packageFolder, 'format', cmdLine, {});
 }
 
 /**
@@ -822,7 +824,7 @@ function lint(packageFolder, fix) {
   const script = `eslint -c package.json --max-warnings 0 --ext .js,.ts,.tsx src/${
     fix ? ' --fix' : ''
   }`;
-  return runScriptOnPackages(packageFolder, 'lint', script);
+  return runScriptOnPackages(packageFolder, 'lint', script, {});
 }
 
 /**
@@ -833,7 +835,7 @@ function lint(packageFolder, fix) {
  */
 function tsc(packageFolder) {
   const script = 'tsc --noEmit';
-  return runScriptOnPackages(packageFolder, 'tsc', script);
+  return runScriptOnPackages(packageFolder, 'tsc', script, {});
 }
 
 /**
@@ -872,7 +874,7 @@ function storybook(packageFolder) {
  */
 function storybook_build(packageFolder) {
   const script = `build-storybook -c node_modules/@kinvolk/headlamp-plugin/config/.storybook`;
-  return runScriptOnPackages(packageFolder, 'storybook-build', script);
+  return runScriptOnPackages(packageFolder, 'storybook-build', script, {});
 }
 
 /**
@@ -882,8 +884,8 @@ function storybook_build(packageFolder) {
  * @returns {0 | 1} Exit code, where 0 is success, 1 is failure.
  */
 function test(packageFolder) {
-  const script = `react-scripts test --transformIgnorePatterns "/node_modules/(?!d3|internmap|react-markdown|xterm|github-markdown-css|vfile|unist-.+|unified|bail|is-plain-obj|trough|remark-.+|mdast-util-.+|micromark|parse-entities|character-entities|property-information|comma-separated-tokens|hast-util-whitespace|remark-.+|space-separated-tokens|decode-named-character-reference|@kinvolk/headlamp-plugin)"`;
-  return runScriptOnPackages(packageFolder, 'test', script);
+  const script = `react-scripts test --transformIgnorePatterns "/node_modules/(?!monaco-editor|spacetime|d3|internmap|react-markdown|xterm|github-markdown-css|vfile|unist-.+|unified|bail|is-plain-obj|trough|remark-.+|mdast-util-.+|micromark|parse-entities|character-entities|property-information|comma-separated-tokens|hast-util-whitespace|remark-.+|space-separated-tokens|decode-named-character-reference|@kinvolk/headlamp-plugin)"`;
+  return runScriptOnPackages(packageFolder, 'test', script, { UNDER_TEST: 'true' });
 }
 
 const headlampPluginBin = fs.realpathSync(process.argv[1]);