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/"
+  ],
+  "setupFilesAfterEnv": [
+    "<rootDir>/test/unitTests/jest.setup.ts"
+  ]
+}

client/jest.integration.config.json

@@ -1,29 +1,46 @@
 {
-    "preset": "ts-jest",
-    "testEnvironment": "jsdom",
-    "transform": {
-      "^.+\\.tsx?$": "ts-jest"
-    },
-    "transformIgnorePatterns": ["/node_modules/(?![d3-shape|recharts]).+\\.js$"],
-    "collectCoverage": false,
-    "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"],
-    "coverageDirectory": "<rootDir>/coverage/",
-    "globals": {
-      "window.ENV.SERVER_HOSTNAME": "localhost",
-      "window.ENV.SERVER_PORT": 3500
-    },
-    "verbose": true,
-    "testRegex": "/test/.*\\.test.tsx?$",
-    "modulePaths": ["<rootDir>/src/"],
-    "setupFilesAfterEnv": ["<rootDir>/test/unitTests/jest.setup.ts"]
-  }
-
+  "preset": "ts-jest",
+  "testEnvironment": "jsdom",
+  "transform": {
+    "^.+\\.tsx?$": "ts-jest"
+  },
+  "transformIgnorePatterns": [
+    "/node_modules/(?![d3-shape|recharts]).+\\.js$"
+  ],
+  "collectCoverage": false,
+  "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"
+  ],
+  "coverageDirectory": "<rootDir>/coverage/",
+  "globals": {
+    "window.ENV.SERVER_HOSTNAME": "localhost",
+    "window.ENV.SERVER_PORT": 3500
+  },
+  "verbose": true,
+  "testRegex": "/test/.*\\.test.tsx?$",
+  "modulePaths": [
+    "<rootDir>/src/"
+  ],
+  "setupFilesAfterEnv": [
+    "<rootDir>/test/integration/jest.setup.ts"
+  ]
+}

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/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,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/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.`,
   },
 ];

client/test/integration/authRedux.test.tsx → client/test/integration/Auth/authRedux.test.tsx

@@ -2,22 +2,24 @@ import * as React from 'react';
 import { createStore } from 'redux';
 import { screen } from '@testing-library/react';
 import { useAuth } from 'react-oidc-context';
-import PrivateRoute from '../../src/route/auth/PrivateRoute';
-import Library from '../../src/route/library/Library';
-import authReducer from '../../src/store/auth.slice';
-import { renderWithRouter } from '../unitTests/testUtils';
+import PrivateRoute from 'route/auth/PrivateRoute';
+import Library from 'route/library/Library';
+import authReducer from 'store/auth.slice';
+import { renderWithRouter } from '../../unitTests/testUtils';
+import { userMock } from '../../unitTests/__mocks__/global_mocks';
 
-jest.mock('react-oidc-context', () => ({
-  useAuth: jest.fn(),
+jest.mock('util/auth/Authentication', () => ({
+  getAndSetUsername: jest.fn(),
 }));
 
 jest.mock('react-redux', () => ({
   ...jest.requireActual('react-redux'),
   useDispatch: jest.fn(),
 }));
 
-jest.mock('../../src/util/auth/Authentication', () => ({
-  getAndSetUsername: jest.fn(),
+jest.mock('page/Menu', () => ({
+  __esModule: true,
+  default: () => <div data-testid="menu" />,
 }));
 
 const store = createStore(authReducer);
@@ -27,13 +29,6 @@ type AuthState = {
 };
 
 const setupTest = (authState: AuthState) => {
-  const userMock = {
-    profile: {
-      profile: 'example/username',
-    },
-    access_token: 'example_token',
-  };
-
   (useAuth as jest.Mock).mockReturnValue({ ...authState, user: userMock });
 
   if (authState.isAuthenticated) {

client/test/integration/Routes/DigitalTwins.test.tsx

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import { screen, within } from '@testing-library/react';
+import tabs from 'route/digitaltwins/DigitalTwinTabData';
+import DigitalTwins from 'route/digitaltwins/DigitalTwins';
+import userEvent from '@testing-library/user-event';
+import {
+  closestDiv,
+  itShowsTheParagraphOfToTheSelectedTab,
+  normalizer,
+  setupIntegrationTest,
+  testLayout,
+} from '../integrationTestUtils';
+
+const setup = () => setupIntegrationTest(<DigitalTwins />);
+
+describe('Digital Twins', () => {
+  beforeEach(() => {
+    setup();
+  });
+
+  it('renders the Digital Twins page and Layout correctly', async () => {
+    await testLayout();
+
+    const tablists = screen.getAllByRole('tablist');
+    expect(tablists).toHaveLength(2);
+
+    // The div of the Digital Twins (Create, Execute and Analyze) tabs
+    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, tabIndex) => {
+      expect(tab).toHaveTextContent(tabs[tabIndex].label);
+    });
+
+    const mainParagraph = screen.getByText(tabs[0].body, { normalizer });
+    expect(mainParagraph).toBeInTheDocument();
+
+    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');
+  }, 7000);
+
+  it('shows the paragraph of to the selected tab', async () => {
+    await itShowsTheParagraphOfToTheSelectedTab([tabs]);
+  });
+
+  /* eslint-disable no-await-in-loop */
+  it('changes iframe src according to the selected tab', async () => {
+    for (let tabsIndex = 0; tabsIndex < tabs.length; tabsIndex += 1) {
+      const tabsData = tabs[tabsIndex];
+      const isFirstTab = tabsIndex === 0;
+      const tab = screen.getByRole('tab', {
+        name: tabsData.label,
+        selected: isFirstTab,
+      });
+      await userEvent.click(tab);
+      const iframe = screen.getByTitle(`JupyterLight-Demo-${tabsData.label}`);
+      expect(iframe).toBeInTheDocument();
+      expect(iframe).toHaveProperty('src', `https://example.com/URL_DT`);
+    }
+  });
+  /* eslint-enable no-await-in-loop */
+});