129 lines
4.0 KiB
TypeScript
129 lines
4.0 KiB
TypeScript
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
|
|
);
|
|
});
|
|
});
|