Adds integration tests to client website

client/jest.config.json

@@ -4,18 +4,32 @@
   "transform": {
     "^.+\\.tsx?$": "ts-jest"
   },
-  "transformIgnorePatterns": ["/node_modules/(?![d3-shape|recharts]).+\\.js$"],
+  "transformIgnorePatterns": [
+    "/node_modules/(?![d3-shape|recharts]).+\\.js$"
+  ],
   "collectCoverage": true,
-  "coverageReporters": ["text", "cobertura", "clover", "lcov", "json"],
-  "collectCoverageFrom": ["src/**/*.{ts,tsx}"],
+  "coverageReporters": [
+    "text",
+    "cobertura",
+    "clover",
+    "lcov",
+    "json"
+  ],
+  "collectCoverageFrom": [
+    "src/**/*.{ts,tsx}"
+  ],
   "coveragePathIgnorePatterns": [
     "node_modules",
     "build",
     "src/index.tsx",
     "src/AppProvider.tsx",
     "src/store/store.ts"
   ],
-  "modulePathIgnorePatterns": ["test/e2e", "mocks", "config"],
+  "modulePathIgnorePatterns": [
+    "test/e2e",
+    "mocks",
+    "config"
+  ],
   "coverageDirectory": "<rootDir>/coverage/",
   "coverageThreshold": {
     "global": {
@@ -31,6 +45,10 @@
   },
   "verbose": true,
   "testRegex": "/test/.*\\.test.tsx?$",
-  "modulePaths": ["<rootDir>/src/"],
-  "setupFilesAfterEnv": ["<rootDir>/test/unitTests/jest.setup.ts"]
-}
+  "modulePaths": [
+    "<rootDir>/src/"
+  ],
+  "moduleNameMapper": {
+    "^test/(.*)$": "<rootDir>/test/$1"
+  }
+}

client/package.json

@@ -29,8 +29,8 @@
     "syntax": "npx eslint . --fix",
     "test:all": "yarn test:unit && yarn test:int && yarn test:e2e",
     "test:e2e": "yarn build && yarn config:test && npx kill-port 4000 && yarn start >/dev/null & playwright test && npx kill-port 4000",
-    "test:int": "jest -c ./jest.integration.config.json ../test/integration --coverage",
-    "test:unit": "jest -c ./jest.config.json ../test/unitTests --coverage"
+    "test:int": "jest -c ./jest.config.json ../test/integration --setupFilesAfterEnv ./test/integration/jest.setup.ts",
+    "test:unit": "jest -c ./jest.config.json ../test/unit --setupFilesAfterEnv ./test/unit/jest.setup.ts"
   },
   "eslintConfig": {
     "extends": [
@@ -85,7 +85,7 @@
     "@testing-library/react": "^14.1.2",
     "@testing-library/user-event": "^14.5.1",
     "@types/jest": "^29.5.10",
-    "@types/react": "^18.2.38",
+    "@types/react": "^18.3.3",
     "@types/react-dom": "^18.2.17",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",

client/src/components/LinkButtons.tsx

@@ -52,14 +52,19 @@ interface LinkButtonProps {
  * <LinkButtons buttons={linkValues} size={6} />
  */ const LinkButtons = ({ buttons, size, marginRight }: LinkButtonProps) => {
   const iconButtons = getIconButtons(buttons);
+  const root = document.getElementById('root');
   return (
     <ButtonRow>
       {iconButtons.map((button, index) => (
         <div
           key={index}
           style={{ marginRight: marginRight ? `${marginRight}px` : '0px' }}
         >
-          <Tooltip key={index} title={button.link}>
+          <Tooltip
+            key={index}
+            title={button.link}
+            PopperProps={{ container: root }}
+          >
             <IconLabel>
               <IconButton
                 onClick={() => {

client/src/index.tsx

@@ -2,63 +2,13 @@ import '@fontsource/roboto';
 import * as React from 'react';
 import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 import ReactDOM from 'react-dom/client';
-import WorkBench from 'route/workbench/Workbench';
 import AppProvider from 'AppProvider';
 import { useURLbasename } from 'util/envUtil';
-import LayoutPublic from 'page/LayoutPublic';
-import PrivateRoute from 'route/auth/PrivateRoute';
-import Library from './route/library/Library';
-import DigitalTwins from './route/digitaltwins/DigitalTwins';
-import SignIn from './route/auth/Signin';
-import Account from './route/auth/Account';
+import routes from 'routes';
 
-const router = createBrowserRouter(
-  [
-    {
-      path: '/',
-      element: (
-        <LayoutPublic>
-          <SignIn />
-        </LayoutPublic>
-      ),
-    },
-    {
-      path: 'library',
-      element: (
-        <PrivateRoute>
-          <Library />
-        </PrivateRoute>
-      ),
-    },
-    {
-      path: 'digitaltwins',
-      element: (
-        <PrivateRoute>
-          <DigitalTwins />
-        </PrivateRoute>
-      ),
-    },
-    {
-      path: 'account',
-      element: (
-        <PrivateRoute>
-          <Account />
-        </PrivateRoute>
-      ),
-    },
-    {
-      path: 'workbench',
-      element: (
-        <PrivateRoute>
-          <WorkBench />
-        </PrivateRoute>
-      ),
-    },
-  ],
-  {
-    basename: `/${useURLbasename()}`,
-  },
-);
+const router = createBrowserRouter(routes, {
+  basename: `/${useURLbasename()}`,
+});
 
 const root = document.getElementById('root');
 

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

@@ -13,11 +13,11 @@ import Box from '@mui/material/Box';
 import { useAuth } from 'react-oidc-context';
 import LinkButtons from 'components/LinkButtons';
 import toolbarLinkValues from 'util/toolbarUtil';
-import { signOut } from '../util/auth/Authentication';
+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,28 +51,28 @@ 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,
   anchorElUser,
 }: MenuToolbarProps) {
   const auth = useAuth();
+  const root = document.getElementById('root');
 
   const handleSignOut = async () => {
     if (auth) {
       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"
@@ -92,7 +92,7 @@ function MenuToolbar({
 
         <Box sx={{ display: 'flex', alignItems: 'center', flexGrow: 0 }}>
           <LinkButtons buttons={toolbarLinkValues} size={2.5} />
-          <Tooltip title="Open settings">
+          <Tooltip title="Open settings" PopperProps={{ container: root }}>
             <IconButton onClick={handleOpenUserMenu}>
               <Avatar sx={{ bgcolor: deepPurple[500] }}>A</Avatar>
             </IconButton>
@@ -103,6 +103,7 @@ function MenuToolbar({
             anchorEl={anchorElUser}
             anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
             keepMounted
+            container={root}
             transformOrigin={{ vertical: 'top', horizontal: 'right' }}
             open={Boolean(anchorElUser)}
             onClose={handleCloseUserMenu}

client/src/route/auth/AuthProvider.tsx

@@ -1,18 +1,16 @@
 import * as React from 'react';
 import { AuthProvider as OIDCAuthProvider } from 'react-oidc-context';
-import { useOidcConfig } from '../../util/auth/useOidcConfig';
+import { useOidcConfig } from 'util/auth/useOidcConfig';
 
 interface AuthProviderProps {
   children: React.ReactNode;
 }
 
 const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
   const oidcConfig = useOidcConfig();
-
   if (!oidcConfig) {
     return <div>Authentication service unavailable...try again later</div>;
   }
-
   return <OIDCAuthProvider {...oidcConfig}>{children}</OIDCAuthProvider>;
 };
 

client/src/route/auth/WaitAndNavigate.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import * as React from 'react';
-import { wait } from '../../util/auth/Authentication';
+import { wait } from 'util/auth/Authentication';
 
 /* WaitNavigateAndReload was made in case of an auth.error to show the 
 error for 5 seconds and then redirect the user back to the Signin page */

client/src/route/library/Library.tsx

@@ -5,7 +5,7 @@ import Iframe from 'components/Iframe';
 import { useURLforLIB } from 'util/envUtil';
 import { Typography } from '@mui/material';
 import { useAuth } from 'react-oidc-context';
-import { getAndSetUsername } from '../../util/auth/Authentication';
+import { getAndSetUsername } from 'util/auth/Authentication';
 import { assetType, scope } from './LibraryTabData';
 
 export function createTabs() {

client/src/route/library/LibraryTabData.ts

@@ -35,6 +35,6 @@ export const scope: ITabs[] = [
   },
   {
     label: 'Common',
-    body: `These reusable assets are only visible to all users. Other users can use these assets in their digital twins.`,
+    body: `These reusable assets are visible to all users. Other users can use these assets in their digital twins.`,
   },
 ];