Fix test case errors

Author: nicolelim02

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

@@ -1,51 +1,57 @@
-import { fireEvent, render, screen } from "@testing-library/react";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
 import "@testing-library/jest-dom";
 import QuestionCategoryAutoComplete from ".";
 
+jest.mock("../../utils/api", () => ({
+  questionClient: {
+    get: jest.fn().mockResolvedValue({ data: { categories: ["DFS"] } }),
+  },
+}));
+
 describe("Question Category Auto Complete", () => {
   const selectedCategories: string[] = ["DFS"];
   const setSelectedCategories = jest.fn();
 
-  it("Question Category Auto Complete is rendered", () => {
+  it("Question Category Auto Complete is rendered", async () => {
     render(
       <QuestionCategoryAutoComplete
         selectedCategories={selectedCategories}
         setSelectedCategories={setSelectedCategories}
-      />,
+      />
     );
 
-    const category = screen.getByText("DFS");
+    const category = await screen.findByText("DFS");
 
     expect(category).toBeInTheDocument();
   });
 
-  it("Adding a new category from the category list", () => {
+  it("Adding a new category from the category list", async () => {
     render(
       <QuestionCategoryAutoComplete
         selectedCategories={selectedCategories}
         setSelectedCategories={setSelectedCategories}
-      />,
+      />
     );
 
     const input = screen.getByLabelText("Category");
     fireEvent.change(input, { target: { value: "DFS" } });
 
-    expect(screen.getByText("DFS")).toBeInTheDocument();
+    await waitFor(() => expect(screen.getByText("DFS")).toBeInTheDocument());
   });
 
-  it("Adding a new category not from the category list", () => {
+  it("Adding a new category not from the category list", async () => {
     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();
+    expect(await screen.findByText(valueAdded)).toBeInTheDocument();
 
     fireEvent.click(screen.getByText(valueAdded));
 
@@ -55,23 +61,23 @@ describe("Question Category Auto Complete", () => {
       <QuestionCategoryAutoComplete
         selectedCategories={updatedCategories}
         setSelectedCategories={setSelectedCategories}
-      />,
+      />
     );
 
     expect(screen.getByText("New Category")).toBeInTheDocument();
   });
 
-  it("Remove a category from selected categories", () => {
+  it("Remove a category from selected categories", async () => {
     render(
       <QuestionCategoryAutoComplete
         selectedCategories={selectedCategories}
         setSelectedCategories={setSelectedCategories}
-      />,
+      />
     );
 
     const deleteButton = screen.getByTestId("CancelIcon");
     fireEvent.click(deleteButton);
 
-    expect(setSelectedCategories).toHaveBeenCalledWith([]);
+    await waitFor(() => expect(setSelectedCategories).toHaveBeenCalledWith([]));
   });
 });