feat: CWYD | Frontend Unit test cases

.gitignore

@@ -5,6 +5,7 @@
 
 # generated frontend files
 code/dist/
+code/frontend/coverage
 
 # User-specific files
 *.rsuser

code/frontend/__mocks__/fileMock.js

@@ -0,0 +1 @@
+module.exports = 'test-file-stub';

code/frontend/__mocks__/styleMock.js

@@ -0,0 +1 @@
+module.exports = {};

code/frontend/jest.config.ts

@@ -0,0 +1,33 @@
+import type { Config } from '@jest/types'
+
+const config: Config.InitialOptions = {
+  preset: 'ts-jest',
+  testEnvironment: 'jest-environment-jsdom',
+  moduleNameMapper: {
+    '\\.(css|less|sass|scss)$': 'identity-obj-proxy',
+    '\\.(jpg|jpeg|png|gif|svg)$': '<rootDir>/__mocks__/fileMock.js',
+    '^lodash-es$': 'lodash',
+  },
+  setupFilesAfterEnv: ['<rootDir>/setupTests.ts'],
+  testMatch: ['**/?(*.)+(spec|test).[jt]s?(x)'],
+  transform: {
+    '^.+\\.[tj]sx?$': 'ts-jest',
+  },
+  transformIgnorePatterns: [
+    '/node_modules/(?!react-markdown|vfile|unist-util-stringify-position|unist-util-visit|bail|is-plain-obj)',
+  ],
+  collectCoverageFrom: ['src/**/*.{ts,tsx,js,jsx}'],
+  coveragePathIgnorePatterns: [
+    '<rootDir>/node_modules/', // Ignore node_modules
+    '<rootDir>/__mocks__/', // Ignore mocks
+    '<rootDir>/src/api/',
+    '<rootDir>/src/mocks/',
+    '<rootDir>/src/test/',
+    '<rootDir>/src/index.tsx',
+    '<rootDir>/src/vite-env.d.ts',
+    '<rootDir>/src/components/QuestionInput/index.ts',
+    '<rootDir>/src/components/Answer/index.ts',
+  ],
+};
+
+export default config;

code/frontend/jest.polyfills.js

@@ -0,0 +1,30 @@
+/**
+ * @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 },
+})

code/frontend/package.json

@@ -7,7 +7,8 @@
         "dev": "tsc && vite",
         "build": "tsc && vite build",
         "watch": "tsc && vite build --watch",
-        "test": "vitest run"
+        "test": "jest --coverage --verbose",
+        "test:watch": "jest --coverage --verbose --watchAll"
     },
     "dependencies": {
         "@babel/traverse": "^7.25.9",
@@ -27,16 +28,30 @@
         "rehype-raw": "^7.0.0",
         "remark-gfm": "^4.0.0",
         "remark-supersub": "^1.0.0",
+        "undici": "^6.19.8",
         "uuid": "^11.0.2"
     },
     "devDependencies": {
+        "@testing-library/jest-dom": "^6.5.0",
+        "@testing-library/react": "^16.0.1",
+        "@testing-library/user-event": "^14.5.2",
+        "@types/isomorphic-fetch": "^0.0.39",
+        "@types/jest": "^29.5.13",
         "@types/lodash-es": "^4.17.12",
         "@types/node": "^22.5.5",
         "@types/react": "^18.3.12",
         "@types/react-dom": "^18.3.1",
+        "@types/testing-library__user-event": "^4.2.0",
         "@types/uuid": "^10.0.0",
+        "identity-obj-proxy": "^3.0.0",
+        "isomorphic-fetch": "^3.0.0",
+        "jest": "^29.7.0",
+        "jest-environment-jsdom": "^29.7.0",
+        "msw": "^2.4.9",
         "@vitejs/plugin-react": "^4.3.3",
         "prettier": "^3.3.3",
+        "ts-jest": "^29.2.5",
+        "ts-node": "^10.9.2",
         "typescript": "^5.6.2",
         "vite": "^5.4.10",
         "vitest": "^2.1.4"

code/frontend/setupTests.ts

@@ -0,0 +1,44 @@
+import "@testing-library/jest-dom";
+const { TextDecoder, TextEncoder } = require('node:util')
+
+import { initializeIcons } from "@fluentui/react/lib/Icons";
+initializeIcons();
+global.TextEncoder = TextEncoder;
+global.TextDecoder = TextDecoder;
+
+// Mock IntersectionObserver
+class IntersectionObserverMock {
+  callback: IntersectionObserverCallback;
+  options: IntersectionObserverInit;
+
+  root: Element | null = null; // Required property
+  rootMargin: string = '0px'; // Required property
+  thresholds: number[] = [0]; // Required property
+
+  constructor(callback: IntersectionObserverCallback, options: IntersectionObserverInit) {
+    this.callback = callback;
+    this.options = options;
+  }
+
+  observe = jest.fn((target: Element) => {
+    // Simulate intersection with an observer instance
+    this.callback([{ isIntersecting: true }] as IntersectionObserverEntry[], this as IntersectionObserver);
+  });
+
+  unobserve = jest.fn();
+  disconnect = jest.fn(); // Required method
+  takeRecords = jest.fn(); // Required method
+}
+
+// Store the original IntersectionObserver
+const originalIntersectionObserver = window.IntersectionObserver;
+
+beforeAll(() => {
+  window.IntersectionObserver = IntersectionObserverMock as any;
+});
+
+afterAll(() => {
+  // Restore the original IntersectionObserver
+  window.IntersectionObserver = originalIntersectionObserver;
+});
+

code/frontend/src/api/models.ts

@@ -10,9 +10,9 @@ export type Citation = {
     title: string | null;
     filepath: string | null;
     url: string | null;
-    metadata: string | null;
-    chunk_id: string | null;
-    reindex_id: string | null;
+    metadata: string | null | Record<string, string| number>;
+    chunk_id: string | null | number;
+    reindex_id?: string | null;
 }
 
 export type ToolMessageContent = {