[upgrade] Start Jest test coverage (microsoft#785)

Co-authored-by: Ian Seabock (Centific Technologies Inc) <[email protected]>

frontend/jest.config.ts

@@ -0,0 +1,9 @@
+import type {Config} from '@jest/types';
+// Sync object
+const config: Config.InitialOptions = {
+  verbose: true,
+  transform: {
+    '^.+\\.tsx?$': 'ts-jest',
+  },
+};
+export default config;

frontend/package.json

@@ -6,7 +6,8 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
-    "watch": "tsc && vite build --watch"
+    "watch": "tsc && vite build --watch",
+    "test": "jest"
   },
   "dependencies": {
     "@fluentui/react": "^8.105.3",
@@ -27,12 +28,18 @@
   },
   "devDependencies": {
     "@types/dompurify": "^3.0.5",
-    "@types/lodash-es": "^4.17.7",
+    "@types/jest": "^29.5.12",
+    "@types/lodash-es": "^4.17.12",
+    "@types/mocha": "^10.0.6",
     "@types/react": "^18.0.27",
     "@types/react-dom": "^18.0.10",
     "@types/react-syntax-highlighter": "^15.5.11",
     "@vitejs/plugin-react": "^3.1.0",
+    "jest": "^29.7.0",
     "prettier": "^2.8.3",
+    "react-test-renderer": "^18.2.0",
+    "ts-jest": "^29.1.2",
+    "ts-node": "^10.9.2",
     "typescript": "^4.9.3",
     "vite": "^4.1.5"
   }

frontend/src/components/Answer/AnswerParser.test.ts

@@ -0,0 +1,69 @@
+import { parseAnswer, ParsedAnswer, enumerateCitations } from "./AnswerParser"; // Update the path accordingly
+import { cloneDeep } from "lodash";
+import { Citation, AskResponse } from "../../api"; // Ensure this path matches the location of your types
+
+const sampleCitations: Citation[] = [
+  {
+    id: "doc1",
+    filepath: "file1.pdf",
+    part_index: undefined,
+    content: "",
+    title: null,
+    url: null,
+    metadata: null,
+    chunk_id: null,
+    reindex_id: null,
+  },
+  {
+    id: "doc2",
+    filepath: "file1.pdf",
+    part_index: undefined,
+    content: "",
+    title: null,
+    url: null,
+    metadata: null,
+    chunk_id: null,
+    reindex_id: null,
+  },
+  {
+    id: "doc3",
+    filepath: "file2.pdf",
+    part_index: undefined,
+    content: "",
+    title: null,
+    url: null,
+    metadata: null,
+    chunk_id: null,
+    reindex_id: null,
+  },
+];
+
+const sampleAnswer: AskResponse = {
+  answer: "This is an example answer with citations [doc1] and [doc2].",
+  citations: cloneDeep(sampleCitations),
+};
+
+describe("enumerateCitations", () => {
+  it("assigns unique part_index based on filepath", () => {
+    const results = enumerateCitations(cloneDeep(sampleCitations));
+    expect(results[0].part_index).toEqual(1);
+    expect(results[1].part_index).toEqual(2);
+    expect(results[2].part_index).toEqual(1);
+  });
+});
+
+describe("parseAnswer", () => {
+  it("reformats the answer text and reindexes citations", () => {
+    const parsed: ParsedAnswer = parseAnswer(sampleAnswer);
+    expect(parsed.markdownFormatText).toBe(
+      "This is an example answer with citations  ^1^  and  ^2^ ."
+    );
+    expect(parsed.citations.length).toBe(2);
+    expect(parsed.citations[0].id).toBe("1");
+    expect(parsed.citations[0].reindex_id).toBe("1");
+    expect(parsed.citations[1].id).toBe("2");
+    expect(parsed.citations[1].reindex_id).toBe("2");
+    expect(parsed.citations[0].part_index).toBe(1);
+    expect(parsed.citations[1].part_index).toBe(2);
+  });
+});

frontend/src/components/Answer/AnswerParser.tsx

@@ -1,13 +1,13 @@
 import { AskResponse, Citation } from "../../api";
-import { cloneDeep } from "lodash-es";
+import { cloneDeep } from "lodash";
 
 
-type ParsedAnswer = {
+export type ParsedAnswer = {
     citations: Citation[];
     markdownFormatText: string;
 };
 
-const enumerateCitations = (citations: Citation[]) => {
+export const enumerateCitations = (citations: Citation[]) => {
     const filepathMap = new Map();
     for (const citation of citations) {
         const { filepath } = citation;

frontend/src/pages/chat/Chat.tsx

@@ -6,7 +6,7 @@ import ReactMarkdown from "react-markdown";
 import remarkGfm from 'remark-gfm'
 import rehypeRaw from "rehype-raw";
 import uuid from 'react-uuid';
-import { isEmpty } from "lodash-es";
+import { isEmpty } from "lodash";
 import DOMPurify from 'dompurify';
 
 import styles from "./Chat.module.css";

frontend/tsconfig.json

@@ -15,7 +15,7 @@
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "react-jsx",
-    "types": ["vite/client"]
+    "types": ["vite/client", "jest", "mocha"]
   },
   "include": ["src"],
   "references": [{ "path": "./tsconfig.node.json" }]

static/index.html

@@ -5,7 +5,7 @@
     <link rel="icon" type="image/x-icon" href="{{ favicon }}" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>{{ title }}</title>
-    <script type="module" crossorigin src="/assets/index-ad61b221.js"></script>
+    <script type="module" crossorigin src="/assets/index-bd3c76ae.js"></script>
     <link rel="stylesheet" href="/assets/index-81370a29.css">
   </head>
   <body>