Add unit tests

client/package.json

@@ -56,6 +56,7 @@
     "@mui/material": "^6.1.1",
     "@mui/x-tree-view": "^7.19.0",
     "@reduxjs/toolkit": "^2.2.7",
+    "@testing-library/react-hooks": "^8.0.1",
     "@types/react-syntax-highlighter": "^15.5.13",
     "@types/remarkable": "^2.0.8",
     "@types/styled-components": "^5.1.32",

client/src/preview/components/cart/CartList.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import useCart from 'preview/store/CartAccess';
 import LibraryAsset from 'preview/util/libraryAsset';
 

client/src/preview/components/cart/ShoppingCart.tsx

@@ -1,4 +1,5 @@
-import React, { useState } from 'react';
+import * as React from 'react';
+import { useState } from 'react';
 import {
   Button,
   Dialog,

client/src/preview/route/digitaltwins/editor/EditorTab.tsx

@@ -15,7 +15,7 @@ interface EditorTabProps {
   setFileContent: Dispatch<SetStateAction<string>>;
 }
 
-const handleEditorChange = (
+export const handleEditorChange = (
   tab: string,
   value: string | undefined,
   setEditorValue: Dispatch<SetStateAction<string>>,

client/src/preview/store/assets.slice.ts

@@ -36,10 +36,17 @@ const assetsSlice = createSlice({
   },
 });
 
-export const selectAssetsByTypeAndPrivacy = (type: string, isPrivate: boolean) => createSelector(
-  (state: RootState) => state.assets.items,
-  (items: LibraryAsset[]) => items.filter(item => item.type === type && item.isPrivate === isPrivate)
-);
+export const selectAssetsByTypeAndPrivacy = (
+  type: string,
+  isPrivate: boolean,
+) =>
+  createSelector(
+    (state: RootState) => state.assets.items,
+    (items: LibraryAsset[]) =>
+      items.filter(
+        (item) => item.type === type && item.isPrivate === isPrivate,
+      ),
+  );
 
 export const selectAssetByPathAndPrivacy =
   (path: string, isPrivate: boolean) => (state: RootState) =>

client/src/preview/util/init.ts

@@ -29,7 +29,6 @@ export const fetchLibraryAssets = async (
 ) => {
   try {
     await initialGitlabInstance.init();
-    console.log(initialGitlabInstance.projectId);
     if (initialGitlabInstance.projectId) {
       const subfolders = await initialGitlabInstance.getLibrarySubfolders(
         initialGitlabInstance.projectId,
@@ -52,7 +51,6 @@ export const fetchLibraryAssets = async (
           return libraryAsset;
         }),
       );
-      console.log(assets);
       assets.forEach((asset) => dispatch(setAsset(asset)));
     } else {
       dispatch(setAssets([]));

client/test/preview/__mocks__/global_mocks.ts

@@ -129,7 +129,9 @@ export const mockDigitalTwin: DigitalTwin = {
   descriptionFiles: ['descriptionFile'],
   configFiles: ['configFile'],
   lifecycleFiles: ['lifecycleFile'],
-  assetFiles: [{ assetPath: 'assetPath', fileNames: ['assetFileName1', 'assetFileName2'] }],
+  assetFiles: [
+    { assetPath: 'assetPath', fileNames: ['assetFileName1', 'assetFileName2'] },
+  ],
 
   getDescription: jest.fn(),
   getFullDescription: jest.fn(),

client/test/preview/integration/components/asset/AssetBoard.test.tsx

@@ -4,10 +4,19 @@ import { Provider } from 'react-redux';
 import AssetBoard from 'preview/components/asset/AssetBoard';
 import { combineReducers, configureStore } from '@reduxjs/toolkit';
 import assetsReducer, { setAssets } from 'preview/store/assets.slice';
-import digitalTwinReducer, { setDigitalTwin, setShouldFetchDigitalTwins } from 'preview/store/digitalTwin.slice';
+import digitalTwinReducer, {
+  setDigitalTwin,
+  setShouldFetchDigitalTwins,
+} from 'preview/store/digitalTwin.slice';
 import snackbarSlice from 'preview/store/snackbar.slice';
-import { mockGitlabInstance, mockLibraryAsset } from 'test/preview/__mocks__/global_mocks';
-import fileSlice, { FileState, addOrUpdateFile } from 'preview/store/file.slice';
+import {
+  mockGitlabInstance,
+  mockLibraryAsset,
+} from 'test/preview/__mocks__/global_mocks';
+import fileSlice, {
+  FileState,
+  addOrUpdateFile,
+} from 'preview/store/file.slice';
 import DigitalTwin from 'preview/util/digitalTwin';
 import LibraryAsset from 'preview/util/libraryAsset';
 import libraryConfigFilesSlice from 'preview/store/libraryConfigFiles.slice';
@@ -126,25 +135,4 @@ describe('AssetBoard Integration Tests', () => {
       expect(screen.queryByText('Asset 1')).not.toBeInTheDocument();
     });
   });
-
-  /*it('shows an error message', async () => {
-    const error = 'An error occurred';
-
-    (fetchDigitalTwins as jest.Mock).mockImplementation(error);
-
-    act(() => {
-      render(
-        <Provider store={store}>
-          <AssetBoard tab="Manage" />
-        </Provider>,
-      );
-    });
-
-    // Ensure the error message is displayed
-    await waitFor(() => {
-      expect(screen.getByText(/error/i)).toBeInTheDocument(); // "error" è case-insensitive
-    });
-    
-  });
-  */
-}); // Extend the timeout to allow more time for state updates
+});

client/test/preview/integration/components/asset/AssetCardExecute.test.tsx

@@ -1,25 +1,27 @@
-import {
-  combineReducers,
-  configureStore,
-} from '@reduxjs/toolkit';
+import { combineReducers, configureStore } from '@reduxjs/toolkit';
 import { fireEvent, render, screen, act } from '@testing-library/react';
 import { AssetCardExecute } from 'preview/components/asset/AssetCard';
 import * as React from 'react';
 import { Provider, useSelector } from 'react-redux';
-import assetsReducer, { selectAssetByPathAndPrivacy, setAssets } from 'preview/store/assets.slice';
+import assetsReducer, {
+  selectAssetByPathAndPrivacy,
+  setAssets,
+} from 'preview/store/assets.slice';
 import digitalTwinReducer, {
   setDigitalTwin,
 } from 'preview/store/digitalTwin.slice';
 import snackbarSlice from 'preview/store/snackbar.slice';
-import { mockDigitalTwin, mockLibraryAsset } from 'test/preview/__mocks__/global_mocks';
+import {
+  mockDigitalTwin,
+  mockLibraryAsset,
+} from 'test/preview/__mocks__/global_mocks';
 import { RootState } from 'store/store';
 
 jest.mock('react-redux', () => ({
   ...jest.requireActual('react-redux'),
   useSelector: jest.fn(),
 }));
 
-
 const store = configureStore({
   reducer: combineReducers({
     assets: assetsReducer,
@@ -44,18 +46,16 @@ describe('AssetCardExecute Integration Test', () => {
   beforeEach(() => {
     (useSelector as jest.MockedFunction<typeof useSelector>).mockImplementation(
       (selector: (state: RootState) => unknown) => {
-        if (selector === selectAssetByPathAndPrivacy(asset.path, asset.isPrivate)) {
+        if (
+          selector === selectAssetByPathAndPrivacy(asset.path, asset.isPrivate)
+        ) {
           return null;
         }
         return mockDigitalTwin;
       },
     );
-
-    store.dispatch(
-      setAssets([
-        mockLibraryAsset,
-      ]),
-    );
+
+    store.dispatch(setAssets([mockLibraryAsset]));
     store.dispatch(
       setDigitalTwin({
         assetName: 'Asset 1',
@@ -83,8 +83,6 @@ describe('AssetCardExecute Integration Test', () => {
       fireEvent.click(startStopButton);
     });
 
-    expect(
-      screen.getByText('Stop'),
-    ).toBeInTheDocument();
+    expect(screen.getByText('Stop')).toBeInTheDocument();
   });
 });

client/test/preview/integration/route/digitaltwins/editor/Editor.test.tsx

@@ -12,7 +12,10 @@ import fileSlice, {
 } from 'preview/store/file.slice';
 import * as React from 'react';
 import DigitalTwin from 'preview/util/digitalTwin';
-import { mockGitlabInstance, mockLibraryAsset } from 'test/preview/__mocks__/global_mocks';
+import {
+  mockGitlabInstance,
+  mockLibraryAsset,
+} from 'test/preview/__mocks__/global_mocks';
 import { handleFileClick } from 'preview/route/digitaltwins/editor/sidebarFunctions';
 import LibraryAsset from 'preview/util/libraryAsset';
 import cartSlice, { addToCart } from 'preview/store/cart.slice';

client/test/preview/integration/route/digitaltwins/editor/Sidebar.test.tsx

@@ -13,7 +13,10 @@ import {
 } from '@testing-library/react';
 import { Provider } from 'react-redux';
 import * as React from 'react';
-import { mockGitlabInstance, mockLibraryAsset } from 'test/preview/__mocks__/global_mocks';
+import {
+  mockGitlabInstance,
+  mockLibraryAsset,
+} from 'test/preview/__mocks__/global_mocks';
 import DigitalTwin from 'preview/util/digitalTwin';
 import * as SidebarFunctions from 'preview/route/digitaltwins/editor/sidebarFunctions';
 import cartSlice, { addToCart } from 'preview/store/cart.slice';
@@ -142,7 +145,7 @@ describe('Sidebar', () => {
             setIsLibraryFile={setIsLibraryFileMock}
             setLibraryAssetPath={setLibraryAssetPathMock}
             tab={'reconfigure'}
-            fileName='file1.md'
+            fileName="file1.md"
             isLibraryFile={false}
           />
         </Provider>,
@@ -170,7 +173,7 @@ describe('Sidebar', () => {
             setIsLibraryFile={setIsLibraryFileMock}
             setLibraryAssetPath={setLibraryAssetPathMock}
             tab={'create'}
-            fileName='file1.md'
+            fileName="file1.md"
             isLibraryFile={false}
           />
         </Provider>,
@@ -200,7 +203,7 @@ describe('Sidebar', () => {
             setIsLibraryFile={setIsLibraryFileMock}
             setLibraryAssetPath={setLibraryAssetPathMock}
             tab={'create'}
-            fileName='file1.md'
+            fileName="file1.md"
             isLibraryFile={false}
           />
         </Provider>,
@@ -230,7 +233,7 @@ describe('Sidebar', () => {
             setIsLibraryFile={setIsLibraryFileMock}
             setLibraryAssetPath={setLibraryAssetPathMock}
             tab={'create'}
-            fileName='file1.md'
+            fileName="file1.md"
             isLibraryFile={false}
           />
         </Provider>,

client/test/preview/integration/route/digitaltwins/editor/SidebarFunctions.test.tsx

@@ -1,4 +1,4 @@
-/*import { handleFileClick } from "preview/route/digitaltwins/editor/sidebarFunctions";
+/* import { handleFileClick } from "preview/route/digitaltwins/editor/sidebarFunctions";
 import { FileState } from "preview/store/file.slice";
 
 describe('SidebarFunctions', () => {
@@ -26,4 +26,4 @@ describe('SidebarFunctions', () => {
   expect(mockSetFileName).toHaveBeenCalledWith(fileName);
   expect(mockSetFileContent).toHaveBeenCalledWith('content');
 });
-*/
+*/

client/test/preview/integration/route/digitaltwins/manage/ConfigDialog.test.tsx

@@ -1,4 +1,4 @@
-/*import AssetBoard from 'preview/components/asset/AssetBoard';
+/* import AssetBoard from 'preview/components/asset/AssetBoard';
 import { act, render, screen, waitFor } from '@testing-library/react';
 import { Provider } from 'react-redux';
 import * as React from 'react';
@@ -163,4 +163,4 @@ describe('ReconfigureDialog', () => {
     );
   });
 });
-*/
+*/

client/test/preview/integration/route/digitaltwins/manage/DeleteDialog.test.tsx

@@ -1,4 +1,4 @@
-/*import { render, screen, waitFor } from '@testing-library/react';
+/* import { render, screen, waitFor } from '@testing-library/react';
 import * as React from 'react';
 import DigitalTwin from 'preview/util/digitalTwin';
 import { Provider } from 'react-redux';
@@ -92,4 +92,4 @@ describe('DeleteDialog', () => {
     });
   });
 });
-*/
+*/

client/test/preview/integration/route/digitaltwins/manage/DetailsDialog.test.tsx

@@ -1,4 +1,4 @@
-/*import AssetBoard from 'preview/components/asset/AssetBoard';
+/* import AssetBoard from 'preview/components/asset/AssetBoard';
 import { act, render, screen, waitFor } from '@testing-library/react';
 import { Provider } from 'react-redux';
 import * as React from 'react';
@@ -67,4 +67,4 @@ describe('DetailsDialog', () => {
     });
   });
 });
-*/
+*/

client/test/preview/integration/route/digitaltwins/manage/utils.ts

@@ -8,7 +8,10 @@ import digitalTwinReducer, {
   setDigitalTwin,
 } from 'preview/store/digitalTwin.slice';
 import snackbarReducer from 'preview/store/snackbar.slice';
-import { mockGitlabInstance, mockLibraryAsset } from 'test/preview/__mocks__/global_mocks';
+import {
+  mockGitlabInstance,
+  mockLibraryAsset,
+} from 'test/preview/__mocks__/global_mocks';
 import DigitalTwin from 'preview/util/digitalTwin';
 import LibraryAsset from 'preview/util/libraryAsset';
 

client/test/preview/unit/components/asset/AddToCartButton.test.tsx

@@ -0,0 +1,61 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import AddToCartButton from 'preview/components/asset/AddToCartButton';
+import * as React from 'react';
+import * as cartAccess from 'preview/store/CartAccess';
+import { mockLibraryAsset } from 'test/preview/__mocks__/global_mocks';
+import { useSelector } from 'react-redux';
+import { RootState } from 'store/store';
+import { selectAssetByPathAndPrivacy } from 'preview/store/assets.slice';
+
+describe('AddToCartButton', () => {
+  const addMock = jest.fn();
+  const removeMock = jest.fn();
+  const clearMock = jest.fn();
+
+  beforeEach(() => {
+    (useSelector as jest.MockedFunction<typeof useSelector>).mockImplementation(
+      (selector: (state: RootState) => unknown) => {
+        if (selector === selectAssetByPathAndPrivacy('path', true)) {
+          return mockLibraryAsset;
+        }
+        return mockLibraryAsset;
+      },
+    );
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should add asset to cart when not in cart', () => {
+    jest.spyOn(cartAccess, 'default').mockReturnValue({
+      state: { assets: [] },
+      actions: {
+        add: addMock,
+        remove: removeMock,
+        clear: clearMock,
+      },
+    });
+
+    render(<AddToCartButton assetPath="path" assetPrivacy={true} />);
+
+    fireEvent.click(screen.getByRole('button'));
+    expect(addMock).toHaveBeenCalled();
+  });
+
+  it('should remove asset to cart when not in cart', () => {
+    jest.spyOn(cartAccess, 'default').mockReturnValue({
+      state: { assets: [mockLibraryAsset] },
+      actions: {
+        add: addMock,
+        remove: removeMock,
+        clear: clearMock,
+      },
+    });
+
+    render(<AddToCartButton assetPath="path" assetPrivacy={true} />);
+
+    fireEvent.click(screen.getByRole('button'));
+    expect(removeMock).toHaveBeenCalled();
+  });
+});