Switch to Axios, Panel component test

frontend/src/components/Panel/Panel.test.tsx

@@ -0,0 +1,128 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { fireEvent, render } from "@testing-library/react";
+import { getArticle } from "../../lib/api";
+import { Language } from "../../lib/types";
+import useNavState from "../../store/navStore";
+import useUIStore from "../../store/uiStore";
+import Panel from "./Panel";
+
+jest.mock("../../store/uiStore");
+jest.mock("../../store/navStore");
+jest.mock("../../lib/api");
+jest.mock("../../constants", () =>
+  Promise.resolve({
+    API_URL: "http://localhost:8000/api", // Mock the API_URL to a local server for testing
+  })
+);
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: false,
+    },
+  },
+});
+const renderWithClient = (ui: React.ReactElement) => {
+  const { rerender, ...result } = render(
+    <QueryClientProvider client={queryClient}>{ui}</QueryClientProvider>
+  );
+  return {
+    ...result,
+    rerender: (rerenderUi: React.ReactElement) =>
+      rerender(
+        <QueryClientProvider client={queryClient}>
+          {rerenderUi}
+        </QueryClientProvider>
+      ),
+  };
+};
+
+const wrapper = ({ children }) => (
+  <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+);
+
+describe("Panel Component", () => {
+  const mockSetSelectedParagraphId = jest.fn();
+  const mockUseUIStore = {
+    selectedParagraphId: null,
+    setSelectedParagraphId: mockSetSelectedParagraphId,
+  };
+  const mockNavState = {
+    celexId: "123",
+    articleId: 1,
+  };
+
+  beforeEach(() => {
+    jest.mocked(useNavState).mockReturnValue(mockNavState);
+    jest.mocked(useUIStore).mockReturnValue(mockUseUIStore);
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+    queryClient.clear();
+  });
+
+  test("renders loading state", () => {
+    (getArticle as jest.Mock).mockReturnValue(new Promise(() => {}));
+    const { getByText } = render(<Panel />, { wrapper });
+    expect(getByText("Loading...")).toBeInTheDocument();
+  });
+
+  test("renders error state", async () => {
+    (getArticle as jest.Mock).mockRejectedValue(new Error("Failed to fetch"));
+    const { findByText } = renderWithClient(<Panel />);
+    expect(
+      await findByText("An error has occurred: Failed to fetch")
+    ).toBeInTheDocument();
+  });
+
+  test("renders article content", async () => {
+    const mockData = `<div class='paragraph' data-paragraph-id='1'>Test Content</div>`;
+    jest.mocked(getArticle).mockResolvedValue(mockData);
+
+    const result = renderWithClient(<Panel />);
+    expect(await result.findByText("Test Content")).toBeInTheDocument();
+  });
+
+  test("highlights a paragraph on click", async () => {
+    const mockData = `
+            <div class='paragraph' data-paragraph-id='1'>Paragraph 1</div>
+            <div class='paragraph' data-paragraph-id='2'>Paragraph 2</div>
+        `;
+    (getArticle as jest.Mock).mockResolvedValue(mockData);
+
+    const result = renderWithClient(<Panel />);
+
+    const paragraph1 = await result.findByText("Paragraph 1");
+    const paragraph2 = await result.findByText("Paragraph 2");
+
+    fireEvent.click(paragraph1);
+    expect(paragraph1.classList.contains("highlight")).toBe(true);
+    expect(paragraph2.classList.contains("highlight")).toBe(false);
+    expect(mockSetSelectedParagraphId).toHaveBeenCalledWith("1");
+
+    fireEvent.click(paragraph2);
+    expect(paragraph1.classList.contains("highlight")).toBe(false);
+    expect(paragraph2.classList.contains("highlight")).toBe(true);
+    expect(mockSetSelectedParagraphId).toHaveBeenCalledWith("2");
+  });
+
+  test("renders LanguageSwitcher and updates language", async () => {
+    jest
+      .mocked(getArticle)
+      .mockResolvedValue(
+        "<div class='paragraph' data-paragraph-id='1'>Test Content</div>"
+      );
+    const result = renderWithClient(<Panel language={Language.FRA} />);
+
+    const languageSwitcher = await result.findByRole("combobox");
+    expect(languageSwitcher).toBeInTheDocument();
+
+    fireEvent.change(languageSwitcher, { target: { value: Language.ENG } });
+    expect(jest.mocked(getArticle)).toHaveBeenCalledWith(
+      "123",
+      1,
+      Language.ENG
+    );
+  });
+});