Merge pull request #23 from guanquann/frontend-testing

Add frontend testing

Author: ruiqi7

frontend/package-lock.json

@@ -39,6 +39,7 @@
     "@types/react-dom": "^18.3.0",
     "@types/uuid": "^10.0.0",
     "@vitejs/plugin-react": "^4.3.1",
+    "babel-jest": "^29.7.0",
     "eslint": "^9.9.0",
     "eslint-plugin-react-hooks": "^5.1.0-rc.0",
     "eslint-plugin-react-refresh": "^0.4.9",

frontend/package.json

@@ -0,0 +1,77 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import QuestionCategoryAutoComplete from ".";
+
+describe("Question Category Auto Complete", () => {
+  const selectedCategories: string[] = ["DFS"];
+  const setSelectedCategories = jest.fn();
+
+  it("Question Category Auto Complete is rendered", () => {
+    render(
+      <QuestionCategoryAutoComplete
+        selectedCategories={selectedCategories}
+        setSelectedCategories={setSelectedCategories}
+      />
+    );
+
+    const category = screen.getByText("DFS");
+
+    expect(category).toBeInTheDocument();
+  });
+
+  it("Adding a new category from the category list", () => {
+    render(
+      <QuestionCategoryAutoComplete
+        selectedCategories={selectedCategories}
+        setSelectedCategories={setSelectedCategories}
+      />
+    );
+
+    const input = screen.getByLabelText("Category");
+    fireEvent.change(input, { target: { value: "Strings" } });
+
+    expect(screen.getByText("Strings")).toBeInTheDocument();
+  });
+
+  it("Adding a new category not from the category list", () => {
+    const { rerender } = render(
+      <QuestionCategoryAutoComplete
+        selectedCategories={selectedCategories}
+        setSelectedCategories={setSelectedCategories}
+      />
+    );
+
+    const input = screen.getByLabelText("Category");
+    fireEvent.change(input, { target: { value: "New Category" } });
+
+    const valueAdded = 'Add: "New Category"';
+    expect(screen.getByText(valueAdded)).toBeInTheDocument();
+
+    fireEvent.click(screen.getByText(valueAdded));
+
+    const updatedCategories = [...selectedCategories, "New Category"];
+
+    rerender(
+      <QuestionCategoryAutoComplete
+        selectedCategories={updatedCategories}
+        setSelectedCategories={setSelectedCategories}
+      />
+    );
+
+    expect(screen.getByText("New Category")).toBeInTheDocument();
+  });
+
+  it("Remove a category from selected categories", () => {
+    render(
+      <QuestionCategoryAutoComplete
+        selectedCategories={selectedCategories}
+        setSelectedCategories={setSelectedCategories}
+      />
+    );
+
+    const deleteButton = screen.getByTestId("CancelIcon");
+    fireEvent.click(deleteButton);
+
+    expect(setSelectedCategories).toHaveBeenCalledWith([]);
+  });
+});

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

@@ -7,10 +7,9 @@ interface QuestionCategoryAutoCompleteProps {
   setSelectedCategories: React.Dispatch<React.SetStateAction<string[]>>;
 }
 
-const QuestionCategoryAutoComplete: React.FC<QuestionCategoryAutoCompleteProps> = ({
-  selectedCategories,
-  setSelectedCategories,
-}) => {
+const QuestionCategoryAutoComplete: React.FC<
+  QuestionCategoryAutoCompleteProps
+> = ({ selectedCategories, setSelectedCategories }) => {
   // TODO
   // Fetch category list from the server
 
@@ -25,7 +24,8 @@ const QuestionCategoryAutoComplete: React.FC<QuestionCategoryAutoCompleteProps>
       sx={{ marginTop: 2 }}
       value={selectedCategories}
       onChange={(e, newCategoriesSelected) => {
-        const newValue = newCategoriesSelected[newCategoriesSelected.length - 1];
+        const newValue =
+          newCategoriesSelected[newCategoriesSelected.length - 1];
         if (typeof newValue === "string" && newValue.startsWith(`Add: "`)) {
           const newCategory = newValue.slice(6, -1);
           categoryList.push(newCategory);
@@ -55,7 +55,8 @@ const QuestionCategoryAutoComplete: React.FC<QuestionCategoryAutoCompleteProps>
               size="small"
               label={
                 typeof option === "string" && option.startsWith(`Add: "`)
-                  ? option.slice(6, -1)
+                  ? /* c8 ignore next */
+                    option.slice(6, -1)
                   : option
               }
               key={key}

frontend/src/components/QuestionCategoryAutoComplete/index.tsx

@@ -0,0 +1,42 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import QuestionImage from ".";
+
+Object.assign(navigator, {
+  clipboard: {
+    writeText: jest.fn(),
+  },
+});
+
+describe("Question Image", () => {
+  const url = "https://example.com/image.jpg";
+  const mockHandleClickOpen = jest.fn();
+
+  it("Question Image is rendered", () => {
+    render(<QuestionImage url={url} handleClickOpen={mockHandleClickOpen} />);
+
+    const image = screen.getByAltText("question image");
+
+    expect(image).toBeInTheDocument();
+  });
+
+  it("Copy Question Image url", () => {
+    render(<QuestionImage url={url} handleClickOpen={mockHandleClickOpen} />);
+
+    const copyButton = screen.getByLabelText("copy");
+    fireEvent.click(copyButton);
+
+    expect(navigator.clipboard.writeText).toHaveBeenCalledWith(
+      `![image](${url})`
+    );
+  });
+
+  it("Expand Question Image", () => {
+    render(<QuestionImage url={url} handleClickOpen={mockHandleClickOpen} />);
+
+    const fullscreenButton = screen.getByLabelText("fullscreen");
+    fireEvent.click(fullscreenButton);
+
+    expect(mockHandleClickOpen).toHaveBeenCalledWith(url);
+  });
+});

frontend/src/components/QuestionImage/QuestionImage.test.tsx

@@ -10,7 +10,10 @@ interface QuestionImageProps {
   handleClickOpen: (url: string) => void;
 }
 
-const QuestionImage: React.FC<QuestionImageProps> = ({ url, handleClickOpen }) => {
+const QuestionImage: React.FC<QuestionImageProps> = ({
+  url,
+  handleClickOpen,
+}) => {
   return (
     <ImageListItem
       sx={{
@@ -27,7 +30,12 @@ const QuestionImage: React.FC<QuestionImageProps> = ({ url, handleClickOpen }) =
       <img
         src={url}
         loading="lazy"
-        style={{ width: "100%", height: "100%", objectFit: "cover", borderRadius: 1 }}
+        style={{
+          width: "100%",
+          height: "100%",
+          objectFit: "cover",
+          borderRadius: 1,
+        }}
         alt="question image"
       />
 
@@ -54,11 +62,16 @@ const QuestionImage: React.FC<QuestionImageProps> = ({ url, handleClickOpen }) =
             toast.success("Image URL copied to clipboard");
           }}
           sx={{ color: "#fff" }}
+          aria-label="copy"
         >
           <ContentCopyIcon />
         </IconButton>
 
-        <IconButton onClick={() => handleClickOpen(url)} sx={{ color: "#fff " }}>
+        <IconButton
+          onClick={() => handleClickOpen(url)}
+          sx={{ color: "#fff " }}
+          aria-label="fullscreen"
+        >
           <FullscreenIcon />
         </IconButton>
       </Box>