frontend: Add test for DetailsViewPluginRenderer

frontend/src/components/TestHelpers/theme.ts

+import { createTheme } from '@material-ui/core';
+import { green, grey, orange, red } from '@material-ui/core/colors';
+
+const commonRules = {
+  palette: {
+    primary: {
+      contrastText: '#fff',
+      main: '#2774b3',
+    },
+    primaryColor: '#000',
+    success: {
+      light: green['50'],
+      main: green['800'],
+      ...green,
+    },
+    warning: {
+      main: 'rgb(196, 69, 0)', // orange
+      light: orange['50'],
+      ...orange,
+    },
+    sidebarLink: {
+      main: grey['500'],
+      selectedBg: grey['800'],
+    },
+    error: {
+      main: red['800'],
+      light: red['50'],
+    },
+    resourceToolTip: {
+      color: 'rgba(0, 0, 0, 0.87)',
+    },
+    sidebarBg: '#000',
+    normalEventBg: '#F0F0F0',
+    chartStyles: {
+      defaultFillColor: grey['300'],
+      labelColor: '#000',
+    },
+    metadataBgColor: grey['300'],
+    headerStyle: {
+      normal: {
+        '& h6': {
+          fontSize: '1.1rem',
+        },
+      },
+      main: {
+        '& h6': {
+          fontSize: '1.87rem',
+        },
+        minHeight: '64px',
+      },
+      subsection: {
+        fontSize: '1.2rem',
+      },
+    },
+    tables: {
+      headerText: '#474747',
+    },
+  },
+  typography: {
+    fontFamily: ['Overpass', 'sans-serif'].join(', '),
+    h1: {
+      fontWeight: 700,
+      fontSize: '1.87rem',
+    },
+  },
+  shape: {
+    borderRadius: 0,
+  },
+};
+
+export const theme = createTheme(commonRules);

frontend/src/helpers/renderHelpers.test.tsx

+import { MuiThemeProvider } from '@material-ui/core/styles';
+import { render, screen } from '@testing-library/react';
+import { Provider } from 'react-redux';
+import { combineReducers, createStore } from 'redux';
+import { theme } from '../components/TestHelpers/theme';
+import uiReducer, { UIState } from '../redux/reducers/ui';
+import DetailsViewPluginRenderer from './renderHelpers';
+
+function NodeDummyComponent(props: { resource: any }) {
+  const { resource } = props;
+  return <div>I am a dummy detail view {resource.kind} component</div>;
+}
+describe('renders a detail view present in store', () => {
+  const sectionTitle = 'Plugin Appended Details View';
+  const initialState: UIState = {
+    sidebar: {
+      selected: null,
+      isVisible: false,
+      entries: {},
+    },
+    routes: {
+      // path -> component
+    },
+    views: {
+      details: {
+        headerActions: {
+          // action-name -> action-callback
+        },
+        pluginAppendedDetailViews: [
+          {
+            sectionName: 'dummy details view',
+            sectionFunc: (resource: any) => {
+              if (resource.kind === 'Node') {
+                return {
+                  title: sectionTitle,
+                  component: props => <NodeDummyComponent {...props} />,
+                };
+              }
+              return null;
+            },
+          },
+        ],
+      },
+      appBar: {
+        actions: {
+          // action-name -> action-callback
+        },
+      },
+    },
+    theme: {
+      name: '',
+    },
+  };
+  const mockStore = createStore(
+    combineReducers({
+      ui: uiReducer,
+    }),
+    { ui: initialState }
+  );
+  it('should correctly render a detail view', () => {
+    render(
+      <Provider store={mockStore}>
+        <MuiThemeProvider theme={theme}>
+          <DetailsViewPluginRenderer resource={{ kind: 'Node' }} />
+        </MuiThemeProvider>
+      </Provider>
+    );
+    expect(screen.getByText(sectionTitle)).toBeInTheDocument();
+    expect(screen.getByText('I am a dummy detail view Node component')).toBeInTheDocument();
+  });
+
+  it('should not render any details view when a desired resource is not passed', () => {
+    render(
+      <Provider store={mockStore}>
+        <MuiThemeProvider theme={theme}>
+          <DetailsViewPluginRenderer resource={{ kind: 'ConfigMap' }} />
+        </MuiThemeProvider>
+      </Provider>
+    );
+    expect(screen.queryByText(sectionTitle)).not.toBeInTheDocument();
+  });
+});