Merge pull request #215 from microsoft/dev

fix: merging dev changes to main branch

Author: Roopan-Microsoft

.github/workflows/docker-build-and-push.yml

@@ -1,17 +1,19 @@
 name: Build and Push Docker Image
 
 on:
+  push:
+    branches: [main, dev, demo]
   pull_request:
-    types: [closed]
-    branches:
-      - main
-      - dev
-      - demo
-  workflow_dispatch: # Add this line to enable manual triggering
+    branches: [main, dev, demo]
+    types:
+      - opened
+      - ready_for_review
+      - reopened
+      - synchronize
+  merge_group:
 
 jobs:
   build-and-push:
-    if: github.event.pull_request.merged == true || github.event_name == 'workflow_dispatch'
     runs-on: ubuntu-latest
 
     steps:
@@ -37,26 +39,24 @@ jobs:
           username: ${{ secrets.ACR_DEV_USERNAME }}
           password: ${{ secrets.ACR_DEV_PASSWORD }}
 
-      - name: Set Docker image tag
-        id: docker_tag
-        run: |
-          if [[ "${{ github.ref }}" == "refs/heads/main" ]]; then
-            echo "TAG=latest" >> $GITHUB_ENV
-          elif [[ "${{ github.ref }}" == "refs/heads/dev" ]]; then
-            echo "TAG=dev" >> $GITHUB_ENV
-          elif [[ "${{ github.ref }}" == "refs/heads/demo" ]]; then
-            echo "TAG=demo" >> $GITHUB_ENV
-          fi
-
-      - name: Build and push Docker image
-        if: ${{ github.ref_name == 'main' }}
-        run: |
-          docker build -t ${{ secrets.ACR_LOGIN_SERVER }}/webapp:${{ env.TAG }} -f WebApp.Dockerfile .
-          docker push ${{ secrets.ACR_LOGIN_SERVER }}/webapp:${{ env.TAG }}
+      - name: Get current date
+        id: date
+        run: echo "date=$(date +'%Y-%m-%d')" >> $GITHUB_OUTPUT
 
-      - name: Build and push Docker image (Dev/Demo)
-        if: ${{ github.ref_name == 'dev' || github.ref_name == 'demo' }}
-        run: |
-          docker build -t ${{ secrets.ACR_LOGIN_SERVER }}/webapp:latest -f WebApp.Dockerfile .
-          docker push ${{ secrets.ACR_LOGIN_SERVER }}/webapp:latest
-          
+      - name: Get registry
+        id: registry
+        run: echo "registry=${{ github.ref_name == 'main' && secrets.ACR_LOGIN_SERVER || secrets.ACR_DEV_LOGIN_SERVER }}" >> $GITHUB_OUTPUT
+
+      - name: Determine Tag Name Based on Branch
+        id: determine_tag
+        run: echo "tagname=${{ github.ref_name == 'main' && 'latest' || github.ref_name == 'dev' && 'dev' || github.ref_name == 'demo' && 'demo' || github.head_ref || 'default' }}" >> $GITHUB_OUTPUT
+
+      - name: Build Docker Image and optionally push
+        uses: docker/build-push-action@v6
+        with:
+          context: .
+          file: WebApp.Dockerfile
+          push: ${{ github.ref_name == 'main' || github.ref_name == 'dev' || github.ref_name == 'demo' }}
+          tags: |
+            ${{ steps.registry.outputs.registry }}/webapp:${{ steps.determine_tag.outputs.tagname }}
+            ${{ steps.registry.outputs.registry }}/webapp:${{ steps.determine_tag.outputs.tagname }}_${{ steps.date.outputs.date }}_${{ github.run_number }}

.gitignore

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

WebApp.Dockerfile

@@ -7,6 +7,7 @@ USER node
 RUN npm ci  
 COPY --chown=node:node ./frontend/ ./frontend  
 WORKDIR /home/node/app/frontend
+RUN npm install --save-dev @types/node @types/jest
 RUN NODE_OPTIONS=--max_old_space_size=8192 npm run build
 
 FROM python:3.11-alpine 
@@ -27,4 +28,4 @@ COPY --from=frontend /home/node/app/static  /usr/src/app/static/
 WORKDIR /usr/src/app  
 EXPOSE 80  
 
-CMD ["gunicorn"  , "-b", "0.0.0.0:80", "app:app"]
+CMD ["gunicorn"  , "-b", "0.0.0.0:80", "app: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

frontend/__mocks__/fileMock.ts

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

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;

frontend/__mocks__/react-markdown.tsx

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