Fix markdown rendered and test cases

Author: nicolelim02

frontend/jest.config.ts

@@ -91,8 +91,10 @@ const config: Config = {
 
   // A map from regular expressions to module names or to arrays of module names that allow to stub out resources with a single module
   moduleNameMapper: {
-    '\\.(css)$': '<rootDir>/__mocks__/styleMock.ts',
-    '\\.(svg)$': '<rootDir>/__mocks__/styleMock.ts',
+    "\\.(css)$": "<rootDir>/__mocks__/styleMock.ts",
+    "\\.(svg)$": "<rootDir>/__mocks__/styleMock.ts",
+    // "@uiw/react-md-editor":
+    //   "<rootDir>/node_modules/@uiw/react-md-editor/esm/index",
   },
 
   // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader

frontend/package-lock.json

@@ -22,7 +22,6 @@
     "@mui/material": "^6.1.0",
     "@uiw/react-md-editor": "^4.0.4",
     "axios": "^1.7.7",
-    "markdown-to-jsx": "^7.5.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.26.2",

frontend/package.json

@@ -149,8 +149,8 @@ describe("Profiles that belong to the current authenticated user", () => {
         handleChangePasswordOpen={handleChangePasswordOpen}
       />
     );
-    const editProfileButton = screen.queryByRole("button", {
-      name: "Edit password",
+    const editProfileButton = screen.getByRole("button", {
+      name: "Change password",
     });
     expect(editProfileButton).toBeInTheDocument();
   });

frontend/src/components/ProfileSection/ProfileSection.test.tsx

@@ -28,9 +28,9 @@ describe("Question Category Auto Complete", () => {
     );
 
     const input = screen.getByLabelText("Category");
-    fireEvent.change(input, { target: { value: "Strings" } });
+    fireEvent.change(input, { target: { value: "DFS" } });
 
-    expect(screen.getByText("Strings")).toBeInTheDocument();
+    expect(screen.getByText("DFS")).toBeInTheDocument();
   });
 
   it("Adding a new category not from the category list", () => {

frontend/src/components/QuestionCategoryAutoComplete/QuestionCategoryAutoComplete.test.tsx

@@ -2,6 +2,17 @@ import { render, screen } from "@testing-library/react";
 import "@testing-library/jest-dom";
 import QuestionDetail from ".";
 
+jest.mock("@uiw/react-md-editor", () => ({
+  Markdown({
+    source,
+  }: {
+    source: string;
+    components: Partial<React.Component>;
+  }) {
+    return <div>{source}</div>;
+  },
+}));
+
 describe("Question details", () => {
   it("Question title is rendered", () => {
     const title = "Test title";

frontend/src/components/QuestionDetail/QuestionDetail.test.tsx

@@ -1,6 +1,5 @@
-import { Box, Chip, List, ListItem, Stack, Typography, useTheme } from "@mui/material";
-import Markdown from "markdown-to-jsx";
-import { grey } from "@mui/material/colors";
+import { Box, Chip, List, ListItem, Stack, Typography } from "@mui/material";
+import MDEditor from "@uiw/react-md-editor";
 
 interface QuestionDetailProps {
   title: string;
@@ -15,8 +14,6 @@ const QuestionDetail: React.FC<QuestionDetailProps> = ({
   categories,
   description,
 }) => {
-  const theme = useTheme();
-
   return (
     <Box
       sx={(theme) => ({
@@ -33,7 +30,10 @@ const QuestionDetail: React.FC<QuestionDetailProps> = ({
         <Typography component={"h1"} variant="h3">
           {title}
         </Typography>
-        <Stack direction={"row"} sx={(theme) => ({ marginTop: theme.spacing(2) })}>
+        <Stack
+          direction={"row"}
+          sx={(theme) => ({ marginTop: theme.spacing(2) })}
+        >
           {complexity && (
             <Chip
               key={complexity}
@@ -57,68 +57,56 @@ const QuestionDetail: React.FC<QuestionDetailProps> = ({
           ))}
         </Stack>
       </Box>
-      <Markdown
-        options={{
-          overrides: {
-            h1: {
-              component: Typography,
-              props: { component: "h1", variant: "h4" },
-            },
-            h2: {
-              component: Typography,
-              props: { component: "h2", variant: "h5" },
+      <Stack data-color-mode="light" paddingTop={2}>
+        <MDEditor.Markdown
+          source={description}
+          components={{
+            h1({ children }) {
+              return (
+                <Typography component={"h1"} variant="h4">
+                  {children}
+                </Typography>
+              );
             },
-            h3: {
-              component: Typography,
-              props: { component: "h3", variant: "h6" },
+            h2({ children }) {
+              return (
+                <Typography component={"h2"} variant="h5">
+                  {children}
+                </Typography>
+              );
             },
-            p: {
-              component: Typography,
+            h3({ children }) {
+              return (
+                <Typography component={"h3"} variant="h6">
+                  {children}
+                </Typography>
+              );
             },
-            ol: {
-              component: List,
-              props: {
-                component: "ol",
-                sx: {
-                  paddingLeft: theme.spacing(4),
-                  listStyleType: "decimal",
-                },
-              },
+            p({ children }) {
+              return <Typography>{children}</Typography>;
             },
-            ul: {
-              component: List,
-              props: {
-                component: "ul",
-                sx: {
-                  paddingLeft: theme.spacing(4),
-                  listStyleType: "disc",
-                },
-              },
+            ol({ children }) {
+              return (
+                <List component={"ol"} sx={{ listStyleType: "decimal" }}>
+                  {children}
+                </List>
+              );
             },
-            li: {
-              component: ListItem,
-              props: { sx: { display: "list-item" } },
+            ul({ children }) {
+              return (
+                <List component={"ul"} sx={{ listStyleType: "disc" }}>
+                  {children}
+                </List>
+              );
             },
-            code: {
-              props: {
-                style: {
-                  backgroundColor: grey[200],
-                  padding: "0.2em",
-                  borderRadius: "0.4em",
-                },
-              },
+            li({ children }) {
+              return (
+                <ListItem sx={{ display: "list-item" }}>{children}</ListItem>
+              );
             },
-            img: {
-              component: "img",
-              props: {
-                style: { height: "300px", width: "auto", objectFit: "contain" },
-              },
-            },
-          },
-        }}
-      >
-        {description}
-      </Markdown>
+          }}
+        />
+      </Stack>
     </Box>
   );
 };

frontend/src/components/QuestionDetail/index.tsx

@@ -10,6 +10,26 @@ jest.mock("../../utils/api", () => ({
 }));
 
 describe("Question Image Container", () => {
+  const mockLocalStorage = (() => {
+    let store: { [key: string]: string } = { token: "test" };
+
+    return {
+      getItem(key: string) {
+        return store[key];
+      },
+      setItem(key: string, value: string) {
+        store[key] = value;
+      },
+    };
+  })();
+
+  beforeAll(() =>
+    Object.defineProperty(window, "localStorage", {
+      value: mockLocalStorage,
+      writable: true,
+    })
+  );
+
   it("Question Image Container is rendered with no uploaded images", () => {
     const uploadedImagesUrl: string[] = [];
     const setUploadedImagesUrl = jest.fn();
@@ -102,7 +122,10 @@ describe("Question Image Container", () => {
         "/images",
         expect.any(FormData),
         expect.objectContaining({
-          headers: { "Content-Type": "multipart/form-data" },
+          headers: {
+            Authorization: `Bearer ${mockLocalStorage.getItem("token")}`,
+            "Content-Type": "multipart/form-data",
+          },
         })
       );