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

package/src/RedactoNoticeConsent/RedactoNoticeConsent.test.tsx

@@ -1,1186 +0,0 @@
-import "@testing-library/jest-dom";
-import {
-  act,
-  fireEvent,
-  render,
-  screen,
-  waitFor,
-} from "@testing-library/react";
-import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import {
-  defaultProps,
-  mockConsentContent,
-  mockMagicLinkContent,
-  mockMinorConsentContent,
-  mockReconsentContent,
-} from "../../tests/mocks";
-import { RedactoNoticeConsent } from "./RedactoNoticeConsent";
-import * as api from "./api";
-import type { ConsentContent } from "./api/types";
-
-// Mock the API functions
-vi.mock("./api", () => ({
-  fetchConsentContent: vi.fn(),
-  submitConsentEvent: vi.fn(),
-  clearApiCache: vi.fn(),
-  fetchTTSAudioUrls: vi.fn(),
-  initiateGuardianVerification: vi.fn(),
-  verifyGuardianStatus: vi.fn(),
-}));
-
-// Mock jwt-decode
-vi.mock("jwt-decode", () => ({
-  jwtDecode: vi.fn(() => ({
-    organisation_uuid: "org-123",
-    workspace_uuid: "workspace-123",
-    user_uuid: "user-123",
-  })),
-}));
-
-// Mock the logo import correctly for ES modules
-vi.mock("./assets/redacto-logo.png", () => ({
-  default: "mocked-logo.png",
-}));
-
-// Mock injectCheckboxStyles to avoid DOM manipulation in tests
-vi.mock("./injectStyles", () => ({
-  injectCheckboxStyles: vi.fn(),
-}));
-
-// Mock storage service
-vi.mock("./services/storage", () => ({
-  saveConsentState: vi.fn(),
-  getConsentState: vi.fn(() => null),
-  clearConsentState: vi.fn(),
-  updateConsentState: vi.fn(),
-  hasPendingVerification: vi.fn(() => false),
-  getVerificationResult: vi.fn(() => null),
-  getVerificationReference: vi.fn(() => null),
-}));
-
-// Mock window.open for popup tests
-const mockWindowOpen = vi.fn(() => ({
-  closed: false,
-  focus: vi.fn(),
-  close: vi.fn(),
-}));
-Object.defineProperty(window, 'open', {
-  writable: true,
-  value: mockWindowOpen,
-});
-
-describe("RedactoNoticeConsent", () => {
-  const mockedApi = vi.mocked(api);
-  
-  const setupCommonMocks = () => {
-    // Mock API calls synchronously to avoid act() warnings
-    mockedApi.fetchConsentContent.mockResolvedValue(mockConsentContent);
-    mockedApi.submitConsentEvent.mockResolvedValue(undefined);
-    // Mock TTS audio URLs API
-    mockedApi.fetchTTSAudioUrls.mockResolvedValue({
-      code: 200,
-      status: "success",
-      detail: {
-        uuid: "notice-123",
-        language: "en",
-        notice_text_audio_url: "",
-        additional_text_audio_url: "",
-        notice_summary_audio_url: "",
-        confirm_button_text_audio_url: "",
-        decline_button_text_audio_url: "",
-        privacy_policy_prefix_text_audio_url: "",
-        privacy_policy_anchor_text_audio_url: "",
-        purpose_section_heading_audio_url: "",
-        notice_banner_heading_audio_url: "",
-        purposes_audio: {
-          "purpose-1": { name_audio_url: "", description_audio_url: "" },
-          "purpose-2": { name_audio_url: "", description_audio_url: "" },
-        },
-        data_elements_audio: {},
-      },
-    });
-    // Mock guardian verification APIs (DigiLocker flow)
-    mockedApi.initiateGuardianVerification.mockResolvedValue({
-      success: true,
-      already_verified: false,
-      session_token: "gvs_test-session-token",
-      digilocker_redirect_url: "https://digilocker.example.com/authorize?session=xyz",
-      expires_at: new Date(Date.now() + 600000).toISOString(),
-      guardian_info_uuid: "test-guardian-uuid",
-    });
-    mockedApi.verifyGuardianStatus.mockResolvedValue({
-      status: "verified" as const,
-      guardian_info_uuid: "test-guardian-uuid",
-      verification_reference: "VER_ABC123",
-      guardian_details: {
-        verified_name: "John Doe",
-        is_guardian_adult: true,
-        verified_at: new Date().toISOString(),
-        verification_reference: "VER_ABC123",
-      },
-      error: null,
-      error_code: null,
-      can_retry: false,
-    });
-  };
-
-  beforeEach(() => {
-    vi.resetAllMocks();
-    mockWindowOpen.mockClear();
-    setupCommonMocks();
-  });
-
-  afterEach(() => {
-    vi.clearAllMocks();
-  });
-
-  it("renders loading state initially", () => {
-    act(() => {
-      render(<RedactoNoticeConsent {...defaultProps} />);
-    });
-    expect(screen.getByText("Loading...")).toBeInTheDocument();
-  });
-
-  it("renders consent content after loading", async () => {
-    await act(async () => {
-      render(<RedactoNoticeConsent {...defaultProps} />);
-    });
-    await waitFor(
-      () => {
-        expect(screen.getByText("Privacy Notice")).toBeInTheDocument();
-        expect(
-          screen.getByText(/We care about your privacy/i)
-        ).toBeInTheDocument();
-        expect(
-          screen.getByRole("link", { name: /Privacy Policy/i })
-        ).toBeInTheDocument();
-        expect(screen.getByText("Marketing")).toBeInTheDocument();
-      },
-      { timeout: 3000 }
-    );
-  });
-
-  it("displays logo from content", async () => {
-    const { unmount } = render(<RedactoNoticeConsent {...defaultProps} />);
-    await waitFor(
-      () => {
-        const logo = screen.getByAltText("Redacto 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(<RedactoNoticeConsent {...defaultProps} />);
-    await waitFor(
-      () => {
-        const logo = screen.getByAltText("Redacto Logo");
-        expect(logo).toHaveAttribute("src", "mocked-logo.png");
-      },
-      { timeout: 3000 }
-    );
-    unmount();
-  });
-
-  it("handles language selection", async () => {
-    await act(async () => {
-      render(<RedactoNoticeConsent {...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.getByText("[Política de Privacidad]")
-        ).toBeInTheDocument();
-        expect(
-          screen.getByText("Gestionar Consentimiento")
-        ).toBeInTheDocument();
-      },
-      { timeout: 3000 }
-    );
-  });
-
-  it("toggles purpose collapse", async () => {
-    render(<RedactoNoticeConsent {...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(<RedactoNoticeConsent {...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 () => {
-    await act(async () => {
-      render(<RedactoNoticeConsent {...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 () => {
-    await act(async () => {
-      render(<RedactoNoticeConsent {...defaultProps} />);
-    });
-    await waitFor(
-      () => {
-        expect(screen.getByText("Accept")).toBeInTheDocument();
-      },
-      { timeout: 3000 }
-    );
-
-    await act(async () => {
-      fireEvent.click(screen.getByText("Accept"));
-    });
-    await waitFor(
-      () => {
-        expect(api.submitConsentEvent).toHaveBeenCalledWith({
-          accessToken: "mock-token",
-          baseUrl: undefined,
-          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,
-          meta_data: undefined,
-          guardianVerificationReference: undefined,
-          signal: expect.any(AbortSignal),
-        });
-        expect(defaultProps.onAccept).toHaveBeenCalled();
-      },
-      { timeout: 3000 }
-    );
-  });
-
-  it("calls onDecline on decline", async () => {
-    render(<RedactoNoticeConsent {...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(<RedactoNoticeConsent {...defaultProps} />);
-    });
-    await waitFor(
-      () => {
-        expect(defaultProps.onAccept).toHaveBeenCalled();
-        expect(screen.queryByText("Privacy Notice")).not.toBeInTheDocument();
-      },
-      { timeout: 3000 }
-    );
-  });
-
-  it("handles other errors", async () => {
-    mockedApi.fetchConsentContent.mockRejectedValueOnce(
-      new Error("Network Error")
-    );
-    await act(async () => {
-      render(<RedactoNoticeConsent {...defaultProps} />);
-    });
-    await waitFor(
-      () => {
-        expect(defaultProps.onError).toHaveBeenCalledWith(expect.any(Error));
-      },
-      { timeout: 3000 }
-    );
-  });
-
-  it("applies custom styles from settings", async () => {
-    render(<RedactoNoticeConsent {...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 }
-    );
-  });
-
-  describe("reconsent functionality", () => {
-    beforeEach(() => {
-      vi.resetAllMocks();
-      mockWindowOpen.mockClear();
-      setupCommonMocks();
-      mockedApi.fetchConsentContent.mockResolvedValue(mockReconsentContent);
-    });
-
-    it("shows reconsent UI with visual indicators for different consent states", async () => {
-      render(<RedactoNoticeConsent {...defaultProps} />);
-      await waitFor(
-        () => {
-          expect(screen.getByText("Marketing")).toBeInTheDocument();
-          expect(screen.getByText("Analytics")).toBeInTheDocument();
-        },
-        { timeout: 3000 }
-      );
-
-      // Check that both purposes are displayed in the reconsent UI
-      expect(screen.getByText("Marketing")).toBeInTheDocument();
-      expect(screen.getByText("Analytics")).toBeInTheDocument();
-    });
-
-    it("allows reconsent UI to render without errors", async () => {
-      render(<RedactoNoticeConsent {...defaultProps} />);
-      await waitFor(
-        () => {
-          expect(screen.getByText("Marketing")).toBeInTheDocument();
-        },
-        { timeout: 3000 }
-      );
-
-      // Verify the reconsent UI renders successfully with visual indicators
-      expect(screen.getByText("Analytics")).toBeInTheDocument();
-      // Verify both purposes are present in the reconsent layout
-      const purposes = screen.getAllByText(/Marketing|Analytics/);
-      expect(purposes).toHaveLength(2);
-    });
-
-    it("passes validate_against parameter to API", async () => {
-      await act(async () => {
-        render(
-          <RedactoNoticeConsent {...defaultProps} validateAgainst="required" />
-        );
-      });
-      await waitFor(
-        () => {
-          expect(api.fetchConsentContent).toHaveBeenCalledWith({
-            noticeId: "notice-123",
-            accessToken: "mock-token",
-            refreshToken: "mock-refresh-token",
-            baseUrl: defaultProps.ledgerBaseUrl,
-            language: "en",
-            specific_uuid: undefined,
-            validate_against: "required",
-            include_fully_consented_data: false,
-            signal: expect.any(AbortSignal),
-          });
-        },
-        { timeout: 3000 }
-      );
-    });
-
-    it("defaults to validate_against 'all' when not specified", async () => {
-      await act(async () => {
-        render(<RedactoNoticeConsent {...defaultProps} />);
-      });
-      await waitFor(
-        () => {
-          expect(api.fetchConsentContent).toHaveBeenCalledWith({
-            noticeId: "notice-123",
-            accessToken: "mock-token",
-            refreshToken: "mock-refresh-token",
-            baseUrl: defaultProps.ledgerBaseUrl,
-            language: "en",
-            specific_uuid: undefined,
-            validate_against: "all",
-            include_fully_consented_data: false,
-            signal: expect.any(AbortSignal),
-          });
-        },
-        { timeout: 3000 }
-      );
-    });
-  });
-
-  describe("ledger routing", () => {
-    it("routes the standard notice fetch to the ledger base url", async () => {
-      await act(async () => {
-        render(<RedactoNoticeConsent {...defaultProps} />);
-      });
-      await waitFor(
-        () => {
-          expect(api.fetchConsentContent).toHaveBeenCalledWith(
-            expect.objectContaining({ baseUrl: defaultProps.ledgerBaseUrl })
-          );
-        },
-        { timeout: 3000 }
-      );
-    });
-
-    it("keeps the magic-link flow (applicationId) on the consent server", async () => {
-      await act(async () => {
-        render(
-          <RedactoNoticeConsent {...defaultProps} applicationId="app-xyz" />
-        );
-      });
-      await waitFor(
-        () => {
-          expect(api.fetchConsentContent).toHaveBeenCalledWith(
-            expect.objectContaining({
-              // defaultProps has no baseUrl, so the magic-link flow routes the
-              // fetch to baseUrl=undefined (the consent server / SDK default),
-              // i.e. NOT ledgerBaseUrl — same as the submitConsentEvent
-              // assertion above. The point is the ledger routing is bypassed.
-              baseUrl: undefined,
-              specific_uuid: "app-xyz",
-            })
-          );
-        },
-        { timeout: 3000 }
-      );
-    });
-  });
-
-  describe("includeFullyConsentedData (magic link flow)", () => {
-    beforeEach(() => {
-      mockedApi.fetchTTSAudioUrls.mockResolvedValue({
-        code: 200,
-        status: "success",
-        detail: {
-          uuid: "notice-123",
-          language: "en",
-          notice_text_audio_url: "",
-          additional_text_audio_url: "",
-          notice_summary_audio_url: "",
-          confirm_button_text_audio_url: "",
-          decline_button_text_audio_url: "",
-          privacy_policy_prefix_text_audio_url: "",
-          privacy_policy_anchor_text_audio_url: "",
-          purpose_section_heading_audio_url: "",
-          notice_banner_heading_audio_url: "",
-          purposes_audio: {
-            "purpose-1": { name_audio_url: "", description_audio_url: "" },
-            "purpose-2": { name_audio_url: "", description_audio_url: "" },
-          },
-          data_elements_audio: {},
-        },
-      });
-    });
-
-    it("passes include_fully_consented_data=true to API when prop is true", async () => {
-      mockedApi.fetchConsentContent.mockResolvedValue(mockMagicLinkContent);
-      render(
-        <RedactoNoticeConsent
-          {...defaultProps}
-          includeFullyConsentedData={true}
-        />
-      );
-      await waitFor(
-        () => {
-          expect(api.fetchConsentContent).toHaveBeenCalledWith({
-            noticeId: "notice-123",
-            accessToken: "mock-token",
-            refreshToken: "mock-refresh-token",
-            baseUrl: defaultProps.ledgerBaseUrl,
-            language: "en",
-            specific_uuid: undefined,
-            validate_against: "all",
-            include_fully_consented_data: true,
-            signal: expect.any(AbortSignal),
-          });
-        },
-        { timeout: 3000 }
-      );
-    });
-  });
-
-  describe("age verification and minor consent functionality", () => {
-    beforeEach(() => {
-      vi.resetAllMocks();
-      mockWindowOpen.mockClear();
-      setupCommonMocks();
-      mockedApi.fetchConsentContent.mockResolvedValue(mockMinorConsentContent);
-    });
-
-    it("shows age verification when is_minor is true", async () => {
-      render(<RedactoNoticeConsent {...defaultProps} />);
-      await waitFor(
-        () => {
-          expect(
-            screen.getByText("Age Verification Required")
-          ).toBeInTheDocument();
-          expect(
-            screen.getByText(/Are you 18 years of age or older/)
-          ).toBeInTheDocument();
-        },
-        { timeout: 3000 }
-      );
-    });
-
-    it("shows age verification fields", async () => {
-      render(<RedactoNoticeConsent {...defaultProps} />);
-      await waitFor(
-        () => {
-          expect(
-            screen.getByText("Age Verification Required")
-          ).toBeInTheDocument();
-          expect(screen.getByText("Yes, I am 18 or older")).toBeInTheDocument();
-          expect(screen.getByText("No, I am under 18")).toBeInTheDocument();
-          expect(screen.getByAltText("Redacto Logo")).toBeInTheDocument();
-        },
-        { timeout: 3000 }
-      );
-    });
-
-    it("proceeds to consent form when user clicks Yes (18+)", async () => {
-      render(<RedactoNoticeConsent {...defaultProps} />);
-      await waitFor(
-        () => {
-          expect(
-            screen.getByText("Age Verification Required")
-          ).toBeInTheDocument();
-        },
-        { timeout: 3000 }
-      );
-
-      const yesButton = screen.getByText("Yes, I am 18 or older");
-      fireEvent.click(yesButton);
-
-      // Should transition directly to consent form
-      await waitFor(
-        () => {
-          expect(screen.getByText("Privacy Notice")).toBeInTheDocument();
-          expect(
-            screen.queryByText("Age Verification Required")
-          ).not.toBeInTheDocument();
-          expect(
-            screen.queryByText("Guardian Verification")
-          ).not.toBeInTheDocument();
-        },
-        { timeout: 3000 }
-      );
-
-      // Verify the adult can submit consent without guardian verification
-      const acceptButton = screen.getByText("Accept");
-      fireEvent.click(acceptButton);
-
-      await waitFor(
-        () => {
-          expect(mockedApi.submitConsentEvent).toHaveBeenCalledWith(
-            expect.objectContaining({
-              accessToken: "mock-token",
-              noticeUuid: "notice-123",
-              declined: false,
-              guardianVerificationReference: undefined,
-            })
-          );
-          expect(defaultProps.onAccept).toHaveBeenCalled();
-        },
-        { timeout: 3000 }
-      );
-    });
-
-    it("shows guardian form when user clicks No (under 18)", async () => {
-      render(<RedactoNoticeConsent {...defaultProps} />);
-      await waitFor(
-        () => {
-          expect(
-            screen.getByText("Age Verification Required")
-          ).toBeInTheDocument();
-        },
-        { timeout: 3000 }
-      );
-
-      const noButton = screen.getByText("No, I am under 18");
-      fireEvent.click(noButton);
-
-      // Should transition to guardian form
-      await waitFor(
-        () => {
-          expect(
-            screen.getByText("Guardian Verification")
-          ).toBeInTheDocument();
-          expect(
-            screen.queryByText("Age Verification Required")
-          ).not.toBeInTheDocument();
-        },
-        { timeout: 3000 }
-      );
-    });
-
-    it("completes full minor flow: age verification -> guardian form -> verification screen", async () => {
-      render(<RedactoNoticeConsent {...defaultProps} />);
-      await waitFor(
-        () => {
-          expect(
-            screen.getByText("Age Verification Required")
-          ).toBeInTheDocument();
-        },
-        { timeout: 3000 }
-      );
-
-      // Click No to proceed to guardian form
-      const noButton = screen.getByText("No, I am under 18");
-      fireEvent.click(noButton);
-
-      // Should show guardian form
-      await waitFor(
-        () => {
-          expect(
-            screen.getByText("Guardian Verification")
-          ).toBeInTheDocument();
-          expect(
-            screen.getByText(/a legal guardian must verify/i)
-          ).toBeInTheDocument();
-        },
-        { timeout: 3000 }
-      );
-
-      // Fill out guardian form
-      const nameInput = screen.getByLabelText(/Guardian's Full Name/i);
-      const contactInput = screen.getByLabelText(/Guardian's Phone Number/i);
-      fireEvent.change(nameInput, { target: { value: "John Doe" } });
-      fireEvent.change(contactInput, { target: { value: "john@example.com" } });
-      // Select "Father" from the custom dropdown
-      const relationshipDropdown = screen.getByRole("combobox", { name: /Relationship/i });
-      fireEvent.click(relationshipDropdown);
-      fireEvent.click(screen.getByRole("option", { name: "Father" }));
-
-      const nextButton = screen.getByText("Verify via DigiLocker");
-      fireEvent.click(nextButton);
-
-      // Should transition to verification screen (guardian form text should be gone)
-      await waitFor(
-        () => {
-          expect(
-            screen.queryByText(/a legal guardian must verify/i)
-          ).not.toBeInTheDocument();
-        },
-        { timeout: 3000 }
-      );
-    });
-
-    it("displays guardian form fields after age verification", async () => {
-      render(<RedactoNoticeConsent {...defaultProps} />);
-      await waitFor(
-        () => {
-          expect(
-            screen.getByText("Age Verification Required")
-          ).toBeInTheDocument();
-        },
-        { timeout: 3000 }
-      );
-
-      // Navigate to guardian form
-      const noButton = screen.getByText("No, I am under 18");
-      fireEvent.click(noButton);
-
-      await waitFor(
-        () => {
-          expect(screen.getByAltText("Logo")).toBeInTheDocument();
-          expect(
-            screen.getByLabelText(/Guardian's Full Name/i)
-          ).toBeInTheDocument();
-          expect(
-            screen.getByLabelText(/Guardian's Phone Number/i)
-          ).toBeInTheDocument();
-          expect(
-            screen.getByRole("combobox", { name: /Relationship/i })
-          ).toBeInTheDocument();
-          expect(screen.getByText("Verify via DigiLocker")).toBeInTheDocument();
-          expect(screen.getByText("Cancel")).toBeInTheDocument();
-        },
-        { timeout: 3000 }
-      );
-    });
-
-    it("validates guardian form fields", async () => {
-      render(<RedactoNoticeConsent {...defaultProps} />);
-      await waitFor(
-        () => {
-          expect(
-            screen.getByText("Age Verification Required")
-          ).toBeInTheDocument();
-        },
-        { timeout: 3000 }
-      );
-
-      // Navigate to guardian form
-      const noButton = screen.getByText("No, I am under 18");
-      fireEvent.click(noButton);
-
-      await waitFor(
-        () => {
-          expect(
-            screen.getByText("Guardian Verification")
-          ).toBeInTheDocument();
-        },
-        { timeout: 3000 }
-      );
-
-      const nextButton = screen.getByText("Verify via DigiLocker");
-      fireEvent.click(nextButton);
-
-      await waitFor(
-        () => {
-          expect(
-            screen.getByText("Guardian name is required")
-          ).toBeInTheDocument();
-          expect(
-            screen.getByText("Guardian contact is required")
-          ).toBeInTheDocument();
-          expect(
-            screen.getByText("Relationship to guardian is required")
-          ).toBeInTheDocument();
-        },
-        { timeout: 3000 }
-      );
-    });
-
-    it("transitions to verification screen after filling guardian form", async () => {
-      render(<RedactoNoticeConsent {...defaultProps} />);
-      await waitFor(
-        () => {
-          expect(
-            screen.getByText("Age Verification Required")
-          ).toBeInTheDocument();
-        },
-        { timeout: 3000 }
-      );
-
-      // Navigate to guardian form
-      const noButton = screen.getByText("No, I am under 18");
-      fireEvent.click(noButton);
-
-      await waitFor(
-        () => {
-          expect(
-            screen.getByText("Guardian Verification")
-          ).toBeInTheDocument();
-        },
-        { timeout: 3000 }
-      );
-
-      // Fill out guardian form
-      const nameInput = screen.getByLabelText(/Guardian's Full Name/i);
-      const contactInput = screen.getByLabelText(/Guardian's Phone Number/i);
-      fireEvent.change(nameInput, { target: { value: "John Doe" } });
-      fireEvent.change(contactInput, { target: { value: "john@example.com" } });
-      // Select "Father" from the custom dropdown
-      const relationshipDropdown = screen.getByRole("combobox", { name: /Relationship/i });
-      fireEvent.click(relationshipDropdown);
-      fireEvent.click(screen.getByRole("option", { name: "Father" }));
-
-      const nextButton = screen.getByText("Verify via DigiLocker");
-      fireEvent.click(nextButton);
-
-      // Should transition to verification screen (guardian form fields should be gone)
-      await waitFor(
-        () => {
-          expect(
-            screen.queryByLabelText(/Guardian's Full Name/i)
-          ).not.toBeInTheDocument();
-        },
-        { timeout: 3000 }
-      );
-    });
-
-    it("validates whitespace-only input as empty", async () => {
-      render(<RedactoNoticeConsent {...defaultProps} />);
-      await waitFor(
-        () => {
-          expect(
-            screen.getByText("Age Verification Required")
-          ).toBeInTheDocument();
-        },
-        { timeout: 3000 }
-      );
-
-      // Navigate to guardian form
-      const noButton = screen.getByText("No, I am under 18");
-      fireEvent.click(noButton);
-
-      await waitFor(
-        () => {
-          expect(
-            screen.getByText("Guardian Verification")
-          ).toBeInTheDocument();
-        },
-        { timeout: 3000 }
-      );
-
-      // Fill fields with only whitespace (leave relationship empty — don't select anything)
-      const nameInput = screen.getByLabelText(/Guardian's Full Name/i);
-      const contactInput = screen.getByLabelText(/Guardian's Phone Number/i);
-
-      fireEvent.change(nameInput, { target: { value: "   " } });
-      fireEvent.change(contactInput, { target: { value: "\t\t" } });
-
-      const nextButton = screen.getByText("Verify via DigiLocker");
-      fireEvent.click(nextButton);
-
-      // Should still show validation errors for whitespace-only input
-      await waitFor(
-        () => {
-          expect(
-            screen.getByText("Guardian name is required")
-          ).toBeInTheDocument();
-          expect(
-            screen.getByText("Guardian contact is required")
-          ).toBeInTheDocument();
-          expect(
-            screen.getByText("Relationship to guardian is required")
-          ).toBeInTheDocument();
-        },
-        { timeout: 3000 }
-      );
-    });
-
-    it("clears validation errors when user starts typing", async () => {
-      render(<RedactoNoticeConsent {...defaultProps} />);
-      await waitFor(
-        () => {
-          expect(
-            screen.getByText("Age Verification Required")
-          ).toBeInTheDocument();
-        },
-        { timeout: 3000 }
-      );
-
-      // Navigate to guardian form
-      const noButton = screen.getByText("No, I am under 18");
-      fireEvent.click(noButton);
-
-      await waitFor(
-        () => {
-          expect(
-            screen.getByText("Guardian Verification")
-          ).toBeInTheDocument();
-        },
-        { timeout: 3000 }
-      );
-
-      // Click next with empty fields to trigger errors
-      const nextButton = screen.getByText("Verify via DigiLocker");
-      fireEvent.click(nextButton);
-
-      await waitFor(
-        () => {
-          expect(
-            screen.getByText("Guardian name is required")
-          ).toBeInTheDocument();
-        },
-        { timeout: 3000 }
-      );
-
-      // Start typing in name field
-      const nameInput = screen.getByLabelText(/Guardian's Full Name/i);
-      fireEvent.change(nameInput, { target: { value: "J" } });
-
-      // Error should be cleared
-      await waitFor(
-        () => {
-          expect(
-            screen.queryByText("Guardian name is required")
-          ).not.toBeInTheDocument();
-        },
-        { timeout: 3000 }
-      );
-    });
-
-    it("calls onDecline when cancel is clicked in guardian form", async () => {
-      render(<RedactoNoticeConsent {...defaultProps} />);
-      await waitFor(
-        () => {
-          expect(
-            screen.getByText("Age Verification Required")
-          ).toBeInTheDocument();
-        },
-        { timeout: 3000 }
-      );
-
-      // Navigate to guardian form
-      const noButton = screen.getByText("No, I am under 18");
-      fireEvent.click(noButton);
-
-      await waitFor(
-        () => {
-          expect(
-            screen.getByText("Guardian Verification")
-          ).toBeInTheDocument();
-        },
-        { timeout: 3000 }
-      );
-
-      const cancelButton = screen.getByText("Cancel");
-      fireEvent.click(cancelButton);
-
-      await waitFor(
-        () => {
-          expect(defaultProps.onDecline).toHaveBeenCalled();
-        },
-        { timeout: 3000 }
-      );
-    });
-
-    it("maintains focus when typing in guardian form fields", async () => {
-      render(<RedactoNoticeConsent {...defaultProps} />);
-      await waitFor(
-        () => {
-          expect(
-            screen.getByText("Age Verification Required")
-          ).toBeInTheDocument();
-        },
-        { timeout: 3000 }
-      );
-
-      // Navigate to guardian form
-      const noButton = screen.getByText("No, I am under 18");
-      fireEvent.click(noButton);
-
-      await waitFor(
-        () => {
-          expect(
-            screen.getByText("Guardian Verification")
-          ).toBeInTheDocument();
-        },
-        { timeout: 3000 }
-      );
-
-      const contactInput = screen.getByLabelText(/Guardian's Phone Number/i);
-
-      // Focus on contact field and type
-      contactInput.focus();
-      fireEvent.change(contactInput, { target: { value: "j" } });
-
-      // Verify the input still has focus and value
-      expect(contactInput).toHaveFocus();
-      expect(contactInput).toHaveValue("j");
-
-      // Continue typing
-      fireEvent.change(contactInput, { target: { value: "john@example.com" } });
-
-      // Verify the input still has focus and updated value
-      expect(contactInput).toHaveFocus();
-      expect(contactInput).toHaveValue("john@example.com");
-
-      // Test other fields maintain focus too
-      const nameInput = screen.getByLabelText(/Guardian's Full Name/i);
-      nameInput.focus();
-      fireEvent.change(nameInput, { target: { value: "J" } });
-
-      expect(nameInput).toHaveFocus();
-      expect(nameInput).toHaveValue("J");
-    });
-
-    it("calls initiateGuardianVerification with correct params", async () => {
-      render(<RedactoNoticeConsent {...defaultProps} />);
-      await waitFor(
-        () => {
-          expect(
-            screen.getByText("Age Verification Required")
-          ).toBeInTheDocument();
-        },
-        { timeout: 3000 }
-      );
-
-      // Navigate to guardian form
-      const noButton = screen.getByText("No, I am under 18");
-      fireEvent.click(noButton);
-
-      await waitFor(
-        () => {
-          expect(
-            screen.getByText("Guardian Verification")
-          ).toBeInTheDocument();
-        },
-        { timeout: 3000 }
-      );
-
-      // Fill out guardian form
-      const nameInput = screen.getByLabelText(/Guardian's Full Name/i);
-      const contactInput = screen.getByLabelText(/Guardian's Phone Number/i);
-      fireEvent.change(nameInput, { target: { value: "John Doe" } });
-      fireEvent.change(contactInput, { target: { value: "john@example.com" } });
-      // Select "Father" from the custom dropdown
-      const relationshipDropdown = screen.getByRole("combobox", { name: /Relationship/i });
-      fireEvent.click(relationshipDropdown);
-      fireEvent.click(screen.getByRole("option", { name: "Father" }));
-
-      const nextButton = screen.getByText("Verify via DigiLocker");
-      fireEvent.click(nextButton);
-
-      // Verify initiateGuardianVerification was called with correct params
-      await waitFor(
-        () => {
-          expect(api.initiateGuardianVerification).toHaveBeenCalledWith(
-            expect.objectContaining({
-              accessToken: "mock-token",
-              guardianName: "John Doe",
-              guardianContact: "john@example.com",
-              guardianRelationship: "Father",
-            })
-          );
-        },
-        { timeout: 3000 }
-      );
-    });
-  });
-});