Merge pull request #194 from Bangarraju-Microsoft/US-9072-UT

test: Frontend Unit test cases integrated

Author: Roopan-Microsoft

.github/workflows/sync-branches.yml

@@ -7,4 +7,5 @@ __pycache__/
 static
 scripts/config.json
 venv
-myenv
+myenv
+frontend/coverage

.gitignore

@@ -72,7 +72,7 @@ https://azure.microsoft.com/en-us/explore/global-infrastructure/products-by-regi
 
 If you are using your own data, the next step is optional.
 
-4. Optional - Follow steps in [Sample data guide](./scripts/SAMPLE_DATA.md) to ingest the sample Promissory Note PDFs into the search index.
+4. Follow steps in [Sample data guide](./scripts/SAMPLE_DATA.md) to ingest the sample Promissory Note PDFs into the search index.
 
 If you want to enable authentication, you will need to add an identity provider.
 

README.md

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

frontend/__mocks__/dompurify.ts

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

frontend/__mocks__/fileMock.ts

@@ -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;

frontend/__mocks__/mockAPIData.ts

@@ -2,10 +2,55 @@ 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',
+
+  },
+  setupFilesAfterEnv: ['<rootDir>/src/test/setupTests.ts'], // For setting up testing environment like jest-dom
   transform: {
-    '^.+\\.tsx?$': 'ts-jest'
+    '^.+\\.ts(x)?$': 'ts-jest',  // For TypeScript files
+    '^.+\\.js$': 'babel-jest',  // For JavaScript files if you have Babel
   },
-  setupFilesAfterEnv: ['<rootDir>/polyfills.js']
+
+  setupFiles: ['<rootDir>/jest.polyfills.js'],
+  collectCoverage: true,
+  //collectCoverageFrom: ['src/**/*.{ts,tsx}'],  // Adjust the path as needed
+  //coverageReporters: ['json', 'lcov', 'text', 'clover'],
+
+  collectCoverageFrom: ['src/**/*.{ts,tsx,js,jsx}'],
+  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/components/QuestionInput/index.ts',
+    '<rootDir>/src/components/Answer/index.ts',
+    '<rootDir>/src/pages/NoPage.tsx',
+    '<rootDir>/src/index.tsx',
+    '<rootDir>/src/vite-env.d.ts',
+    '<rootDir>/src/helpers/'
+  ],
 }
 
 export default config

frontend/__mocks__/react-markdown.tsx

@@ -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 },
+})