test: UI - Unit test cases for OptionsPanel

App/frontend-app/.gitignore

@@ -24,4 +24,5 @@ dist-ssr
 *.sw?
 
 buildandpush_dpsfronapp.ps1
-rollout.ps1
+rollout.ps1
+coverage

App/frontend-app/__mocks__/dompurify.ts

@@ -0,0 +1,5 @@
+const DOMPurify = {
+  sanitize: jest.fn((input: string) => input), // Mock implementation that returns the input
+};
+
+export default DOMPurify; // Use default export

App/frontend-app/__mocks__/fileMock.ts

@@ -0,0 +1,4 @@
+// __mocks__/fileMock.ts
+const fileMock = 'test-file-stub';
+
+export default fileMock;

App/frontend-app/__mocks__/i18n.ts

@@ -0,0 +1,19 @@
+import { initReactI18next } from "react-i18next";
+
+const i18nMock = {
+    createInstance: () => ({
+        use: () => i18nMock,
+        init: (config: Record<string, any>) => {
+            // Simulate a no-op init method
+        },
+        t: (key: string, options?: Record<string, any>) => {
+            // Return a mock translation string with interpolation handling
+            if (options?.year) {
+                return `© ${options.year}`;
+            }
+            return key;
+        },
+    }),
+};
+
+export default i18nMock;

App/frontend-app/__mocks__/react-markdown.tsx

@@ -0,0 +1,17 @@
+// __mocks__/react-markdown.tsx
+
+import React from 'react';
+
+// Mock implementation of react-markdown
+const mockNode = {
+  children: [{ value: 'console.log("Test Code");' }]
+};
+const mockProps = { className: 'language-javascript' };
+
+const ReactMarkdown: React.FC<{ children: React.ReactNode , components: any }> = ({ children,components }) => {
+  return <div data-testid="reactMockDown">
+    {components && components.code({ node: mockNode, ...mockProps })}
+    {children}</div>; // Simply render the children
+};
+
+export default ReactMarkdown;

App/frontend-app/jest.config.ts

@@ -1,33 +1,77 @@
-/** @type {import('ts-jest').JestConfigWithTsJest} */
-module.exports = {
-    preset: "ts-jest",
-    testEnvironment: "jsdom",
-    setupFilesAfterEnv: ["<rootDir>/jest-setup.ts"],
-    // Test all files either suffixed with "-test.js", "-test.jsx", "-test.ts", "-test.tsx", or
-    // having ".test.js", ".test.jsx", ".test.ts", ".test.tsx" extensions
-    testRegex: ".*[-.]test\\.(js|ts)x?$",
-
-    // Generate coverage reports in textm HTML, lcov and clover format
-    coverageReporters: ["text", "html", "lcov", "clover"],
-
-    // Use the default
-    reporters: ["default"],
-
-    // Postprocess test result to create a Bamboo format compatible report
-    // testResultsProcessor: "jest-bamboo-reporter",
-
-    moduleNameMapper: {
-        // Alias @/ imports
-        "@/(.*)": "<rootDir>/src/$1",
-        // Alias #/ imports
-        "#/(.*)": "<rootDir>/test/$1",
-        // SCSS files
-        "\\.scss$": "identity-obj-proxy",
+import type { Config } from '@jest/types'
+
+const config: Config.InitialOptions = {
+  verbose: true,
+
+  preset: 'ts-jest',
+  //testEnvironment: 'jsdom',  // For React DOM testing
+  testEnvironment: 'jest-environment-jsdom',
+  testEnvironmentOptions: {
+    customExportConditions: ['']
+  },
+  moduleNameMapper: {
+    '\\.(css|less|scss)$': 'identity-obj-proxy', // For mocking static file imports
+    '^react-markdown$': '<rootDir>/__mocks__/react-markdown.tsx',
+    '^dompurify$': '<rootDir>/__mocks__/dompurify.js', // Point to the mock
+    '\\.(jpg|jpeg|png|gif|svg)$': '<rootDir>/__mocks__/fileMock.ts',
+    "^i18next$": "<rootDir>/__mocks__/i18n.ts",
+
+  },
+  setupFilesAfterEnv: ['<rootDir>/src/test/setupTests.ts'], // For setting up testing environment like jest-dom
+  transform: {
+    '^.+\\.ts(x)?$': ['ts-jest',
+      {
+        diagnostics: {
+          ignoreCodes: [1343]
+        },
+        astTransformers: {
+          before: [
+            {
+              path: 'node_modules/ts-jest-mock-import-meta',  // or, alternatively, 'ts-jest-mock-import-meta' directly, without node_modules.
+              options: { metaObjectReplacement: { env : { 'VITE_API_ENDPOINT' : 'https://mock-api-endpoint.com' }} }
+            }
+          ]
+        }
+      }
+
+    ],  // For TypeScript files
+    '^.+\\.js$': 'babel-jest',  // For JavaScript files if you have Babel 
+  },
+
+  setupFiles: ['<rootDir>/jest.polyfills.js'],
+  collectCoverage: true,
+  collectCoverageFrom: ['src/**/*.{ts,tsx}'],  // Adjust the path as needed
+  //coverageReporters: ['json', 'lcov', 'text', 'clover'],
+  coverageThreshold: {
+    global: {
+      branches: 80,
+      functions: 80,
+      lines: 80,
+      statements: 80,
     },
+  },
+
+  coveragePathIgnorePatterns: [
+    '<rootDir>/node_modules/', // Ignore node_modules
+    '<rootDir>/__mocks__/', // Ignore mocks
+    '<rootDir>/src/state/',
+    '<rootDir>/src/api/',
+    '<rootDir>/src/mocks/',
+    '<rootDir>/src/test/',
+    '<rootDir>/src/assets/',
+    '<rootDir>/src/utils/',
+    '<rootDir>/src/types/',
+
+    '<rootDir>/src/App.tsx',
+    '<rootDir>/src/AppContext.tsx',
+    '<rootDir>/src/AppRoutes.tsx',
+    '<rootDir>/src/main.tsx',
+    '<rootDir>/src/styles.tsx',
+    '<rootDir>/src/vite-env.d.ts',
+    '<rootDir>/src/components/uploadButton/uploadButton2.tsx',
+    '<rootDir>/src/components/searchResult/old.tsx',
+    '<rootDir>/src/components/chat/modelSwitch.tsx',
+  ],
+}
 
-    // Project's path which coverage will be reported
-    collectCoverageFrom: ["src/**/*.ts", "src/**/*.tsx"],
-    coveragePathIgnorePatterns: [],
-    modulePathIgnorePatterns: [],
-    testPathIgnorePatterns: [],
-};
+export default config

App/frontend-app/jest.polyfills.js

@@ -0,0 +1,28 @@
+/**
+ * @note The block below contains polyfills for Node.js globals
+ * required for Jest to function when running JSDOM tests.
+ * These HAVE to be require's and HAVE to be in this exact
+ * order, since "undici" depends on the "TextEncoder" global API.
+ *
+ * Consider migrating to a more modern test runner if
+ * you don't want to deal with this.
+ */
+
+const { TextDecoder, TextEncoder } = require('node:util')
+
+Object.defineProperties(globalThis, {
+  TextDecoder: { value: TextDecoder },
+  TextEncoder: { value: TextEncoder },
+})
+
+const { Blob } = require('node:buffer')
+const { fetch, Headers, FormData, Request, Response } = require('undici')
+
+Object.defineProperties(globalThis, {
+  fetch: { value: fetch, writable: true },
+  Blob: { value: Blob },
+  Headers: { value: Headers },
+  FormData: { value: FormData },
+  Request: { value: Request },
+  Response: { value: Response },
+})