Rename variables, add more toolbar tests and refactor

client/src/page/DrawerComponent.tsx

@@ -7,10 +7,10 @@ import { transition } from './MenuToolbar';
 import MenuItems from './MenuItems';
 import DrawerHeaderComponent from './DrawerHeaderComponent';
 
-const drawerWidth = 240;
+const drawerwidth = 240;
 
 const openedMixin = (theme: Theme): CSSObject => ({
-  width: drawerWidth,
+  width: drawerwidth,
   transition: transition({ theme, open: true }),
   overflowX: 'hidden',
 });
@@ -27,7 +27,7 @@ const closedMixin = (theme: Theme): CSSObject => ({
 const Drawer = styled(MuiDrawer, {
   shouldForwardProp: (prop) => prop !== 'open',
 })(({ theme, open }) => ({
-  width: drawerWidth,
+  width: drawerwidth,
   flexShrink: 0,
   whiteSpace: 'nowrap',
   boxSizing: 'border-box',

client/src/page/Menu.tsx

@@ -7,7 +7,7 @@ import { RootState } from 'store/store';
 import MenuToolbar from './MenuToolbar';
 import DrawerComponent from './DrawerComponent';
 
-const drawerWidth = 240;
+const drawerwidth = 240;
 
 const hooks = () => {
   const theme = useTheme();
@@ -29,7 +29,7 @@ function MiniDrawer() {
     <Box sx={{ display: 'flex' }}>
       <MenuToolbar
         open={menuState.isOpen}
-        drawerWidth={drawerWidth}
+        drawerwidth={drawerwidth}
         handleCloseUserMenu={handleCloseUserMenu}
         handleDrawerOpen={handleDrawerOpen}
         handleOpenUserMenu={handleOpenUserMenu}

client/src/page/MenuToolbar.tsx

@@ -17,7 +17,7 @@ import { signOut } from '../util/auth/Authentication';
 
 interface AppBarProps extends MuiAppBarProps {
   open?: boolean;
-  drawerWidth: number;
+  drawerwidth: number;
 }
 
 const transition = ({
@@ -36,12 +36,12 @@ const transition = ({
 
 const AppBar = styled(MuiAppBar, {
   shouldForwardProp: (prop) => prop !== 'open',
-})<AppBarProps>(({ theme, open, drawerWidth }) => ({
+})<AppBarProps>(({ theme, open, drawerwidth }) => ({
   zIndex: theme.zIndex.drawer + 1,
   transition: transition({ theme, open }),
   ...(open && {
-    marginLeft: drawerWidth,
-    width: `calc(100% - ${drawerWidth}px)`,
+    marginLeft: drawerwidth,
+    width: `calc(100% - ${drawerwidth}px)`,
     transition: transition({ theme, open }),
   }),
 }));
@@ -51,13 +51,13 @@ interface MenuToolbarProps {
   handleDrawerOpen: () => void;
   handleOpenUserMenu: (event: React.MouseEvent<HTMLButtonElement>) => void;
   handleCloseUserMenu: () => void;
-  drawerWidth: number;
+  drawerwidth: number;
   anchorElUser: HTMLElement | null;
 }
 
 function MenuToolbar({
   open,
-  drawerWidth,
+  drawerwidth,
   handleCloseUserMenu,
   handleOpenUserMenu,
   handleDrawerOpen,
@@ -70,9 +70,8 @@ function MenuToolbar({
       await signOut(auth);
     }
   };
-
   return (
-    <AppBar position="fixed" open={open} drawerWidth={drawerWidth}>
+    <AppBar position="fixed" open={open} drawerwidth={drawerwidth}>
       <Toolbar sx={{ display: 'flex', justifyContent: 'space-between' }}>
         <IconButton
           color="inherit"

client/test/integration/DigitalTwins.test.tsx

@@ -1,19 +1,21 @@
 import * as React from 'react';
-import {
-  getDefaultNormalizer,
-  fireEvent,
-  render,
-  screen,
-  within,
-  cleanup,
-} from '@testing-library/react';
+import { fireEvent, screen, within } from '@testing-library/react';
 import tabs from 'route/digitaltwins/DigitalTwinTabData';
 import DigitalTwins from 'route/digitaltwins/DigitalTwins';
-import { MemoryRouter } from 'react-router-dom';
 import { useAuth } from 'react-oidc-context';
 import { useSelector } from 'react-redux';
 import { RootState } from 'store/store';
-import { testFooter, testMenu, testToolbar } from './integrationTestUtils';
+import {
+  closestDiv,
+  itShowsTheParagraphOfToTheSelectedTab,
+  normalizer,
+  renderWithMemoryRouter,
+  testLayout,
+} from './integrationTestUtils';
+
+jest.mock('components/LinkButtons', () => ({
+  ...jest.requireActual('components/LinkButtons'),
+}));
 
 jest.mock('page/Layout', () => ({
   ...jest.requireActual('page/Layout'),
@@ -40,17 +42,6 @@ jest.mock('../../src/util/auth/Authentication', () => ({
 }));
 
 describe('Digital Twins', () => {
-  const uiToRender = (
-    <MemoryRouter>
-      <DigitalTwins />
-    </MemoryRouter>
-  );
-
-  const normalizer = getDefaultNormalizer({
-    trim: false,
-    collapseWhitespace: false,
-  });
-
   beforeEach(() => {
     (useAuth as jest.Mock).mockReturnValue({ user: {} });
     (useSelector as jest.Mock).mockImplementation(
@@ -60,73 +51,41 @@ describe('Digital Twins', () => {
           auth: { userName: '' },
         }),
     );
-    render(uiToRender);
+    renderWithMemoryRouter(<DigitalTwins />);
   });
 
   it('renders the Digital Twins page and Layout correctly', () => {
-    cleanup();
-    const { container } = render(uiToRender);
-
-    testMenu();
-    testToolbar(container);
-    testFooter();
+    testLayout();
 
     const tablists = screen.getAllByRole('tablist');
     expect(tablists).toHaveLength(2);
 
     // The div of the Digital Twins (Create, Execute and Analyze) tabs
-    const mainTabsDiv = tablists[0].closest('div');
-    expect(mainTabsDiv).toBeInTheDocument();
-
-    const mainTablist = within(mainTabsDiv!).getAllByRole('tablist')[0];
+    const mainTabsDiv = closestDiv(tablists[0]);
+    const mainTablist = within(mainTabsDiv).getAllByRole('tablist')[0];
     const mainTabs = within(mainTablist).getAllByRole('tab');
     expect(mainTabs).toHaveLength(3);
 
-    mainTabs.forEach((tab, i) => {
-      expect(tab).toHaveTextContent(tabs[i].label);
+    mainTabs.forEach((tab, tabIndex) => {
+      expect(tab).toHaveTextContent(tabs[tabIndex].label);
     });
 
     const mainParagraph = screen.getByText(tabs[0].body, { normalizer });
     expect(mainParagraph).toBeInTheDocument();
 
-    const mainParagraphDiv = mainParagraph.closest('div');
-    expect(mainParagraphDiv).toBeInTheDocument();
-
-    const iframe = within(mainParagraphDiv!).getByTitle(
+    const mainParagraphDiv = closestDiv(mainParagraph);
+    const iframe = within(mainParagraphDiv).getByTitle(
       /JupyterLight-Demo-Create/i,
     );
     expect(iframe).toBeInTheDocument();
     expect(iframe).toHaveProperty('src', 'https://example.com/URL_DT');
   });
 
-  it('shows the paragraph correlating to the tab that is selected', () => {
-    const tablistsData = [tabs];
-    for (let i = 0; i < tablistsData.length; i += 1) {
-      const tablistData = tablistsData[i];
-      for (let j = 0; j < tablistsData[i].length; j += 1) {
-        const tabData = tablistData[j];
-        const isFirstTab = j === 0;
-        const tab = screen.getByRole('tab', {
-          name: tabData.label,
-          selected: isFirstTab,
-        });
-        expect(tab).toBeInTheDocument();
-
-        fireEvent.click(tab);
-
-        const tabParagraph = screen.getByText(tabData.body, {
-          normalizer,
-        });
-
-        expect(tabParagraph).toBeInTheDocument();
-      }
-    }
-  });
+  itShowsTheParagraphOfToTheSelectedTab([tabs]);
 
-  it('changes iframe src according to the the selected tab', () => {
-    for (let i = 0; i < tabs.length; i += 1) {
-      const tabsData = tabs[i];
-      const isFirstTab = i === 0;
+  it('changes iframe src according to the selected tab', () => {
+    tabs.forEach((tabsData, tabsIndex) => {
+      const isFirstTab = tabsIndex === 0;
       const tab = screen.getByRole('tab', {
         name: tabsData.label,
         selected: isFirstTab,
@@ -135,6 +94,6 @@ describe('Digital Twins', () => {
       const iframe = screen.getByTitle(`JupyterLight-Demo-${tabsData.label}`);
       expect(iframe).toBeInTheDocument();
       expect(iframe).toHaveProperty('src', `https://example.com/URL_DT`);
-    }
+    });
   });
 });