Merge pull request #107 from microsoft/psl-frontend-testcases

Client Advisor | Frontend test cases added

Author: Roopan-Microsoft

.github/workflows/test_client_advisor.yml

@@ -0,0 +1,49 @@
+name: Unit Tests - Client Advisor
+
+on:
+  push:
+    branches: [main, dev]
+    # Trigger on changes in these specific paths
+    paths:
+      - 'ClientAdvisor/**'
+  pull_request:
+    branches: [main, dev]
+    types:
+      - opened
+      - ready_for_review
+      - reopened
+      - synchronize
+    paths:
+      - 'ClientAdvisor/**'
+
+jobs:
+  test_client_advisor:
+    
+    name: Client Advisor Tests
+    runs-on: ubuntu-latest
+    # The if condition ensures that this job only runs if changes are in the ClientAdvisor folder
+    
+    steps:
+      - uses: actions/checkout@v4
+      - name: Set up Python
+        uses: actions/setup-python@v5
+        with:
+          python-version: "3.11"
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '20'
+      - name: Install Frontend Dependencies
+        run: |
+          cd ClientAdvisor/App/frontend
+          npm install
+      - name: Run Frontend Tests with Coverage
+        run: |
+          cd ClientAdvisor/App/frontend
+          npm run test -- --coverage
+      - uses: actions/upload-artifact@v4
+        with:
+          name: client-advisor-frontend-coverage
+          path: |
+            ClientAdvisor/App/frontend/coverage/
+            ClientAdvisor/App/frontend/coverage/lcov-report/

ClientAdvisor/App/frontend/__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

ClientAdvisor/App/frontend/__mocks__/fileMock.ts

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

ClientAdvisor/App/frontend/__mocks__/mockAPIData.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;

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

@@ -2,10 +2,47 @@ 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'],
+  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/',
+  ],
 }
 
 export default config

ClientAdvisor/App/frontend/jest.config.ts

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

ClientAdvisor/App/frontend/jest.polyfills.js

@@ -140,4 +140,7 @@ export interface ClientIdRequest {
   clientName: string;
 }
 
-
+export interface GroupedChatHistory {
+  month: string
+  entries: Conversation[]
+}

ClientAdvisor/App/frontend/src/api/models.ts

@@ -201,3 +201,10 @@ sup {
     margin-bottom: 5px;
   }
 }
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
+  .answerContainer{
+      border: 2px solid WindowText;
+      background-color: Window;
+      color: WindowText;
+  }
+}