@redacto.io/consent-sdk-react 10.0.0-beta.8 → 10.0.0

package/src/RedactoNoticeConsentInline/RedactoNoticeConsentInline.test.tsx

@@ -1,369 +0,0 @@
-import {
-  render,
-  screen,
-  fireEvent,
-  waitFor,
-  act,
-} from "@testing-library/react";
-import { vi, expect, it, describe, beforeEach, afterEach } from "vitest";
-import { RedactoConsentInline } from "./RedactoNoticeConsentInline";
-import * as api from "./api";
-import type { ConsentContent } from "./api/types";
-import { defaultProps, mockConsentContent } from "../../tests/mocks";
-import "@testing-library/jest-dom";
-
-// Mock the API functions
-vi.mock("./api", () => ({
-  fetchConsentContent: vi.fn(),
-  submitConsentEvent: vi.fn(),
-}));
-
-// Mock the logo import correctly for ES modules
-vi.mock("./assets/redacto-logo.png", () => ({
-  default: "mocked-logo.png",
-}));
-
-describe("RedactoConsentInline", () => {
-  const mockedApi = vi.mocked(api, { partial: true });
-  beforeEach(() => {
-    vi.clearAllMocks();
-    mockedApi.fetchConsentContent.mockResolvedValue(mockConsentContent);
-    mockedApi.submitConsentEvent.mockResolvedValue(undefined);
-  });
-
-  afterEach(() => {
-    vi.restoreAllMocks();
-  });
-
-  it("renders loading state initially", () => {
-    render(<RedactoConsentInline {...defaultProps} />);
-    expect(screen.getByText("Loading...")).toBeInTheDocument();
-  });
-
-  it("renders consent content after loading", async () => {
-    render(<RedactoConsentInline {...defaultProps} />);
-    await waitFor(
-      () => {
-        expect(screen.getByText("Your Privacy Matters")).toBeInTheDocument();
-        expect(
-          screen.getByText(/We care about your privacy/i)
-        ).toBeInTheDocument();
-        expect(
-          screen.getByRole("link", { name: /Privacy Policy/i })
-        ).toBeInTheDocument();
-        expect(
-          screen.getByRole("link", { name: /Vendors List/i })
-        ).toBeInTheDocument();
-        expect(screen.getByText("Manage What You Share")).toBeInTheDocument();
-        expect(screen.getByText("Marketing")).toBeInTheDocument();
-      },
-      { timeout: 3000 }
-    );
-  });
-
-  it("displays logo from content", async () => {
-    const { unmount } = render(<RedactoConsentInline {...defaultProps} />);
-    await waitFor(
-      () => {
-        const logo = screen.getByAltText("logo");
-        expect(logo).toHaveAttribute("src", "https://example.com/logo.png");
-      },
-      { timeout: 3000 }
-    );
-    unmount();
-  });
-
-  it("displays fallback logo when no content logo provided", async () => {
-    const noLogoContent: ConsentContent = {
-      ...mockConsentContent,
-      detail: {
-        ...mockConsentContent.detail,
-        active_config: {
-          ...mockConsentContent.detail.active_config,
-          logo_url: "",
-        },
-      },
-    };
-    mockedApi.fetchConsentContent.mockResolvedValueOnce(noLogoContent);
-    const { unmount } = render(<RedactoConsentInline {...defaultProps} />);
-    await waitFor(
-      () => {
-        const logo = screen.getByAltText("logo");
-        expect(logo).toHaveAttribute("src", "mocked-logo.png");
-      },
-      { timeout: 3000 }
-    );
-    unmount();
-  });
-
-  it("handles language selection", async () => {
-    render(<RedactoConsentInline {...defaultProps} />);
-    await waitFor(
-      () => {
-        expect(screen.getByRole("button", { name: "en" })).toBeInTheDocument();
-      },
-      { timeout: 3000 }
-    );
-
-    await act(async () => {
-      fireEvent.click(screen.getByRole("button", { name: "en" }));
-    });
-    await waitFor(
-      () => {
-        expect(screen.getByRole("option", { name: "es" })).toBeInTheDocument();
-      },
-      { timeout: 3000 }
-    );
-    await act(async () => {
-      fireEvent.click(screen.getByText("es"));
-    });
-
-    await waitFor(
-      () => {
-        expect(
-          screen.getByText(/Nos importa tu privacidad/i)
-        ).toBeInTheDocument();
-        expect(
-          screen.getByRole("link", { name: /Política de Privacidad/i })
-        ).toBeInTheDocument();
-        expect(
-          screen.getByText("Gestionar Consentimiento")
-        ).toBeInTheDocument();
-      },
-      { timeout: 3000 }
-    );
-  });
-
-  it("toggles purpose collapse", async () => {
-    render(<RedactoConsentInline {...defaultProps} />);
-    await waitFor(
-      () => {
-        expect(screen.getByText("Marketing")).toBeInTheDocument();
-      },
-      { timeout: 3000 }
-    );
-
-    const marketingHeading = screen.getByText("Marketing");
-    const collapseDiv = marketingHeading
-      .closest('div[style*="cursor: pointer"]')
-      ?.querySelector("svg");
-    if (!collapseDiv) throw new Error("Collapse div not found");
-
-    await act(async () => {
-      fireEvent.click(collapseDiv);
-    });
-    await waitFor(
-      () => {
-        expect(screen.getByText("Email")).toBeInTheDocument();
-        expect(screen.getByText("Phone")).toBeInTheDocument();
-      },
-      { timeout: 3000 }
-    );
-
-    await act(async () => {
-      fireEvent.click(collapseDiv);
-    });
-    await waitFor(
-      () => {
-        expect(screen.queryByText("Email")).not.toBeInTheDocument();
-      },
-      { timeout: 3000 }
-    );
-  });
-
-  it("handles purpose checkbox interaction", async () => {
-    render(<RedactoConsentInline {...defaultProps} />);
-    await waitFor(
-      () => {
-        expect(screen.getByText("Marketing")).toBeInTheDocument();
-      },
-      { timeout: 3000 }
-    );
-
-    const marketingHeading = screen.getByText("Marketing");
-    const purposeCheckbox = marketingHeading
-      .closest('div[style*="justify-content: space-between"]')
-      ?.querySelector('input[type="checkbox"]');
-    if (!purposeCheckbox) throw new Error("Purpose checkbox not found");
-
-    expect(purposeCheckbox).not.toBeChecked();
-    await act(async () => {
-      fireEvent.click(purposeCheckbox);
-    });
-    expect(purposeCheckbox).toBeChecked();
-
-    await act(async () => {
-      fireEvent.click(purposeCheckbox);
-    });
-    expect(purposeCheckbox).not.toBeChecked();
-  });
-
-  it("disables required data element checkboxes", async () => {
-    render(<RedactoConsentInline {...defaultProps} />);
-    await waitFor(
-      () => {
-        expect(screen.getByText("Marketing")).toBeInTheDocument();
-      },
-      { timeout: 3000 }
-    );
-
-    const marketingHeading = screen.getByText("Marketing");
-    const collapseDiv = marketingHeading
-      .closest('div[style*="cursor: pointer"]')
-      ?.querySelector("svg");
-    if (!collapseDiv) throw new Error("Collapse div not found");
-    await act(async () => {
-      fireEvent.click(collapseDiv);
-    });
-
-    await waitFor(
-      () => {
-        const emailText = screen.getByText("Email");
-        const emailCheckbox = emailText
-          .closest('div[style*="align-items: center"]')
-          ?.querySelector('input[type="checkbox"]');
-        if (!emailCheckbox) throw new Error("Email checkbox not found");
-
-        const phoneText = screen.getByText(/Phone/);
-        const phoneCheckbox = phoneText
-          .closest('div[style*="align-items: center"]')
-          ?.querySelector('input[type="checkbox"]');
-        if (!phoneCheckbox) throw new Error("Phone checkbox not found");
-
-        expect(phoneCheckbox).toBeDisabled();
-        expect(phoneCheckbox).toBeChecked();
-
-        expect(emailCheckbox).not.toBeDisabled();
-        fireEvent.click(emailCheckbox);
-        expect(emailCheckbox).toBeChecked();
-      },
-      { timeout: 3000 }
-    );
-  });
-
-  it("calls submitConsentEvent on accept", async () => {
-    render(<RedactoConsentInline {...defaultProps} />);
-    await waitFor(
-      () => {
-        expect(screen.getByText("Accept")).toBeInTheDocument();
-      },
-      { timeout: 3000 }
-    );
-
-    await act(async () => {
-      fireEvent.click(screen.getByText("Accept"));
-    });
-    await waitFor(
-      () => {
-        expect(api.submitConsentEvent).toHaveBeenCalledWith({
-          org_uuid: "org-123",
-          workspace_uuid: "workspace-123",
-          noticeUuid: "notice-123",
-          purposes: [
-            {
-              uuid: "purpose-1",
-              name: "Marketing",
-              description: "We use data for marketing purposes.",
-              industries: "Marketing",
-              data_elements: [
-                {
-                  uuid: "element-1",
-                  name: "Email",
-                  required: false,
-                  description: null,
-                  industries: null,
-                  enabled: true,
-                  selected: false,
-                },
-                {
-                  uuid: "element-2",
-                  name: "Phone",
-                  required: true,
-                  description: null,
-                  industries: null,
-                  enabled: true,
-                  selected: true,
-                },
-              ],
-              selected: false,
-            },
-          ],
-          declined: false,
-        });
-        expect(defaultProps.onAccept).toHaveBeenCalled();
-      },
-      { timeout: 3000 }
-    );
-  });
-
-  it("calls onDecline on decline", async () => {
-    render(<RedactoConsentInline {...defaultProps} />);
-    await waitFor(
-      () => {
-        expect(screen.getByText("Decline")).toBeInTheDocument();
-      },
-      { timeout: 3000 }
-    );
-
-    await act(async () => {
-      fireEvent.click(screen.getByText("Decline"));
-    });
-    await waitFor(
-      () => {
-        expect(defaultProps.onDecline).toHaveBeenCalled();
-      },
-      { timeout: 3000 }
-    );
-  });
-
-  it("handles 409 conflict error (already consented)", async () => {
-    mockedApi.fetchConsentContent.mockRejectedValueOnce({ status: 409 });
-    await act(async () => {
-      render(<RedactoConsentInline {...defaultProps} />);
-    });
-    await waitFor(
-      () => {
-        expect(defaultProps.onAccept).toHaveBeenCalled();
-        expect(
-          screen.queryByText("Your Privacy Matters")
-        ).not.toBeInTheDocument();
-      },
-      { timeout: 3000 }
-    );
-  });
-
-  it("handles other errors", async () => {
-    mockedApi.fetchConsentContent.mockRejectedValueOnce(
-      new Error("Network Error")
-    );
-    await act(async () => {
-      render(<RedactoConsentInline {...defaultProps} />);
-    });
-    await waitFor(
-      () => {
-        expect(defaultProps.onError).toHaveBeenCalledWith(expect.any(Error));
-      },
-      { timeout: 3000 }
-    );
-  });
-
-  it("applies custom styles from settings", async () => {
-    render(<RedactoConsentInline {...defaultProps} />);
-    await waitFor(
-      () => {
-        const modal = screen.getByRole("dialog");
-        expect(modal).toHaveStyle({
-          backgroundColor: "#ffffff",
-          borderRadius: "8px",
-        });
-
-        const acceptButton = screen.getByText("Accept");
-        expect(acceptButton).toHaveStyle({
-          backgroundColor: "#4f87ff",
-          color: "#ffffff",
-        });
-      },
-      { timeout: 3000 }
-    );
-  });
-});