feedback-form.test.tsx 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
  2. import * as router from "react-router";
  3. // Mock useParams before importing components
  4. vi.mock("react-router", async () => {
  5. const actual = await vi.importActual("react-router");
  6. return {
  7. ...actual as object,
  8. useParams: () => ({ conversationId: "test-conversation-id" }),
  9. };
  10. });
  11. import { screen } from "@testing-library/react";
  12. import userEvent from "@testing-library/user-event";
  13. import { renderWithProviders } from "test-utils";
  14. import { FeedbackForm } from "#/components/features/feedback/feedback-form";
  15. describe("FeedbackForm", () => {
  16. const user = userEvent.setup();
  17. const onCloseMock = vi.fn();
  18. afterEach(() => {
  19. vi.clearAllMocks();
  20. });
  21. it("should render correctly", () => {
  22. renderWithProviders(
  23. <FeedbackForm polarity="positive" onClose={onCloseMock} />,
  24. );
  25. screen.getByLabelText("Email");
  26. screen.getByLabelText("Private");
  27. screen.getByLabelText("Public");
  28. screen.getByRole("button", { name: "Submit" });
  29. screen.getByRole("button", { name: "Cancel" });
  30. });
  31. it("should switch between private and public permissions", async () => {
  32. renderWithProviders(
  33. <FeedbackForm polarity="positive" onClose={onCloseMock} />,
  34. );
  35. const privateRadio = screen.getByLabelText("Private");
  36. const publicRadio = screen.getByLabelText("Public");
  37. expect(privateRadio).toBeChecked(); // private is the default value
  38. expect(publicRadio).not.toBeChecked();
  39. await user.click(publicRadio);
  40. expect(publicRadio).toBeChecked();
  41. expect(privateRadio).not.toBeChecked();
  42. await user.click(privateRadio);
  43. expect(privateRadio).toBeChecked();
  44. expect(publicRadio).not.toBeChecked();
  45. });
  46. it("should call onClose when the close button is clicked", async () => {
  47. renderWithProviders(
  48. <FeedbackForm polarity="positive" onClose={onCloseMock} />,
  49. );
  50. await user.click(screen.getByRole("button", { name: "Cancel" }));
  51. expect(onCloseMock).toHaveBeenCalled();
  52. });
  53. });