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

package/tests/RevocablePurpose.test.tsx

@@ -0,0 +1,146 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+
+// react-i18next is an optional peer dep that is not installed in this
+// package's node_modules. Stub it with a minimal `useTranslation` that
+// resolves the keys used by the components under test, honouring the inline
+// English fallback passed as the 2nd argument (mirrors the real i18next
+// behaviour when a key is missing).
+vi.mock('react-i18next', () => {
+  const en: Record<string, string> = {
+    modifyButton: 'Modify',
+    modifyConsent: 'Modify Consent',
+    closeModal: 'Close',
+    cancel: 'Cancel',
+    revokeConsent: 'Revoke Consent',
+    revokeConsentWarning: 'If you revoke this consent, you may lose access.',
+    aboutToModifyConsent: 'You are about to modify this consent.',
+    noDataElementsAvailable: 'No data elements available',
+    purposeNotRevocable: "This purpose can't be withdrawn directly.",
+    noActionsAvailable: 'No actions available for this record.',
+  };
+  const interpolate = (template: string, vars?: Record<string, unknown>) =>
+    template.replace(/\{\{(\w+)\}\}/g, (_match, key: string) => {
+      const value = vars?.[key];
+      return value === undefined || value === null ? '' : String(value);
+    });
+  // Supports the `t(key, fallbackString)` and `t(key, opts)` call shapes used
+  // across the components. When the key is unknown, fall back to the inline
+  // English string if one was supplied, otherwise echo the key.
+  const t = (key: string, second?: unknown, opts?: Record<string, unknown>) => {
+    const fallback = typeof second === 'string' ? second : undefined;
+    const interpolationOpts =
+      typeof second === 'object' && second !== null
+        ? (second as Record<string, unknown>)
+        : opts;
+    const template = en[key] ?? fallback ?? key;
+    return interpolate(template, interpolationOpts);
+  };
+  return {
+    useTranslation: () => ({ t, i18n: { language: 'en' } }),
+  };
+});
+
+// Icon peer deps — stub the icons used by the modal.
+vi.mock('lucide-react', () => ({
+  ChevronDownIcon: () => null,
+  X: () => null,
+  Smartphone: () => null,
+  LaptopMinimal: () => null,
+}));
+
+vi.mock('react-icons/pi', () => ({
+  PiWarningCircleBold: () => null,
+}));
+
+import { renderModifyButton } from '../src/RedactoPrivacyCenter/components/ConsentManagerCells';
+import { ModifyConsentModal } from '../src/RedactoPrivacyCenter/components/ModifyConsentModal';
+import { NavigationProvider } from '../src/RedactoPrivacyCenter/context/NavigationContext';
+import { ConsentStatusEnum } from '../src/RedactoPrivacyCenter/lib/types';
+import type { ConsentModalRecord } from '../src/RedactoPrivacyCenter/lib/types';
+
+const makeRecord = (
+  overrides: Partial<ConsentModalRecord> = {},
+): ConsentModalRecord => ({
+  purpose_uuid: 'purpose-1',
+  name: 'Marketing analytics',
+  description: 'Improve product recommendations',
+  status: ConsentStatusEnum.ACTIVE,
+  given_date: '2026-01-01T00:00:00Z',
+  valid_till: null,
+  method: 'WEB',
+  data_elements: [],
+  link_reason: null,
+  product_uuid: 'prod-1',
+  product_name: 'Acme Loyalty',
+  product_description: null,
+  nominator: null,
+  ...overrides,
+});
+
+// A TFunction-compatible stub for the pure render helper (which receives `t`
+// directly rather than via the react-i18next mock). Resolves the handful of
+// keys it uses and honours the inline English fallback like real i18next.
+const tStubKeys: Record<string, string> = {
+  modifyButton: 'Modify',
+};
+const tStub = ((key: string, second?: unknown) =>
+  tStubKeys[key] ??
+  (typeof second === 'string' ? second : key)) as unknown as Parameters<
+  typeof renderModifyButton
+>[2];
+
+describe('non-revocable purpose', () => {
+  it('renders the modify/withdraw control disabled for a non-revocable ACTIVE purpose', () => {
+    const record = makeRecord({ revocable: false });
+    render(<>{renderModifyButton(record, vi.fn(), tStub)}</>);
+
+    const button = screen.getByRole('button', { name: 'Modify' });
+    expect(button).toBeDisabled();
+    expect(button).toHaveAttribute(
+      'title',
+      "This purpose can't be withdrawn directly.",
+    );
+  });
+
+  it('does not invoke onModify when the disabled non-revocable control is clicked', () => {
+    const onModify = vi.fn();
+    const record = makeRecord({ revocable: false });
+    render(<>{renderModifyButton(record, onModify, tStub)}</>);
+
+    fireEvent.click(screen.getByRole('button', { name: 'Modify' }));
+    expect(onModify).not.toHaveBeenCalled();
+  });
+});
+
+describe('revocable purpose (regression)', () => {
+  it('renders the modify control enabled when revocable is absent (older backends)', () => {
+    const record = makeRecord(); // no `revocable` field
+    const onModify = vi.fn();
+    render(<>{renderModifyButton(record, onModify, tStub)}</>);
+
+    const button = screen.getByRole('button', { name: 'Modify' });
+    expect(button).not.toBeDisabled();
+    fireEvent.click(button);
+    expect(onModify).toHaveBeenCalledTimes(1);
+  });
+
+  it('offers the revoke action in the modal for a revocable ACTIVE record', () => {
+    const record = makeRecord({ revocable: true });
+    render(
+      <NavigationProvider>
+        <ModifyConsentModal
+          isOpen
+          onClose={vi.fn()}
+          selectedRecord={record}
+          isLoading={false}
+          onManageConsent={vi.fn()}
+        />
+      </NavigationProvider>,
+    );
+
+    expect(
+      screen.getByRole('button', { name: 'Revoke Consent' }),
+    ).toBeInTheDocument();
+  });
+});

package/tests/RevokeWarningMessage.test.tsx

@@ -0,0 +1,151 @@
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+
+// react-i18next is an optional peer dep that is not installed in this
+// package's node_modules. Stub it with a minimal `useTranslation` that
+// resolves the keys used by the components under test, honouring the inline
+// English fallback passed as the 2nd argument (mirrors the real i18next
+// behaviour when a key is missing).
+vi.mock('react-i18next', () => {
+  const en: Record<string, string> = {
+    modifyConsent: 'Modify Consent',
+    closeModal: 'Close',
+    cancel: 'Cancel',
+    revokeConsent: 'Revoke Consent',
+    revokeConsentWarning: 'If you revoke this consent, you may lose access.',
+    regrantConsent: 'Regrant Consent',
+    regrantConsentWarning: 'Regranting will restore this consent.',
+    aboutToModifyConsent: 'You are about to modify this consent.',
+    aboutToRegrantConsent: 'You are about to regrant this consent.',
+    noDataElementsAvailable: 'No data elements available',
+    noActionsAvailable: 'No actions available for this record.',
+  };
+  const interpolate = (template: string, vars?: Record<string, unknown>) =>
+    template.replace(/\{\{(\w+)\}\}/g, (_match, key: string) => {
+      const value = vars?.[key];
+      return value === undefined || value === null ? '' : String(value);
+    });
+  // Supports the `t(key, fallbackString)` and `t(key, opts)` call shapes used
+  // across the components. When the key is unknown, fall back to the inline
+  // English string if one was supplied, otherwise echo the key.
+  const t = (key: string, second?: unknown, opts?: Record<string, unknown>) => {
+    const fallback = typeof second === 'string' ? second : undefined;
+    const interpolationOpts =
+      typeof second === 'object' && second !== null
+        ? (second as Record<string, unknown>)
+        : opts;
+    const template = en[key] ?? fallback ?? key;
+    return interpolate(template, interpolationOpts);
+  };
+  return {
+    useTranslation: () => ({ t, i18n: { language: 'en' } }),
+  };
+});
+
+// Icon peer deps — stub the icons used by the modal.
+vi.mock('lucide-react', () => ({
+  ChevronDownIcon: () => null,
+  X: () => null,
+  Smartphone: () => null,
+  LaptopMinimal: () => null,
+}));
+
+vi.mock('react-icons/pi', () => ({
+  PiWarningCircleBold: () => null,
+}));
+
+import { ModifyConsentModal } from '../src/RedactoPrivacyCenter/components/ModifyConsentModal';
+import { NavigationProvider } from '../src/RedactoPrivacyCenter/context/NavigationContext';
+import { ConsentStatusEnum } from '../src/RedactoPrivacyCenter/lib/types';
+import type { ConsentModalRecord } from '../src/RedactoPrivacyCenter/lib/types';
+
+const DEFAULT_WARNING = 'If you revoke this consent, you may lose access.';
+const CUSTOM_WARNING =
+  'Revoking marketing consent will stop all promotional emails immediately.';
+
+const makeRecord = (
+  overrides: Partial<ConsentModalRecord> = {},
+): ConsentModalRecord => ({
+  purpose_uuid: 'purpose-1',
+  name: 'Marketing analytics',
+  description: 'Improve product recommendations',
+  status: ConsentStatusEnum.ACTIVE,
+  given_date: '2026-01-01T00:00:00Z',
+  valid_till: null,
+  method: 'WEB',
+  data_elements: [],
+  link_reason: null,
+  product_uuid: 'prod-1',
+  product_name: 'Acme Loyalty',
+  product_description: null,
+  nominator: null,
+  ...overrides,
+});
+
+const renderModal = (record: ConsentModalRecord) =>
+  render(
+    <NavigationProvider>
+      <ModifyConsentModal
+        isOpen
+        onClose={vi.fn()}
+        selectedRecord={record}
+        isLoading={false}
+        onManageConsent={vi.fn()}
+      />
+    </NavigationProvider>,
+  );
+
+describe('per-purpose revoke warning message', () => {
+  it('shows the custom warning when revoke_warning_message is set on a revoke record', () => {
+    renderModal(makeRecord({ revoke_warning_message: CUSTOM_WARNING }));
+
+    expect(screen.getByText(CUSTOM_WARNING)).toBeInTheDocument();
+    // The localized default must be suppressed when a custom message exists.
+    expect(screen.queryByText(DEFAULT_WARNING)).not.toBeInTheDocument();
+    // Button label is untouched — still the default revoke copy.
+    expect(
+      screen.getByRole('button', { name: 'Revoke Consent' }),
+    ).toBeInTheDocument();
+  });
+
+  it('shows the localized default warning when revoke_warning_message is null', () => {
+    renderModal(makeRecord({ revoke_warning_message: null }));
+
+    expect(screen.getByText(DEFAULT_WARNING)).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: 'Revoke Consent' }),
+    ).toBeInTheDocument();
+  });
+
+  it('shows the localized default warning when revoke_warning_message is an empty string', () => {
+    renderModal(makeRecord({ revoke_warning_message: '' }));
+
+    expect(screen.getByText(DEFAULT_WARNING)).toBeInTheDocument();
+  });
+
+  it('shows the localized default warning when revoke_warning_message is absent (older backends)', () => {
+    renderModal(makeRecord()); // no `revoke_warning_message` field
+
+    expect(screen.getByText(DEFAULT_WARNING)).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: 'Revoke Consent' }),
+    ).toBeInTheDocument();
+  });
+
+  it('does not apply the custom revoke warning to the regrant branch', () => {
+    // A withdrawn record uses the regrant action; the per-purpose revoke
+    // message must never leak into the regrant warning.
+    renderModal(
+      makeRecord({
+        status: ConsentStatusEnum.WITHDRAWN,
+        revoke_warning_message: CUSTOM_WARNING,
+      }),
+    );
+
+    expect(screen.getByText('Regranting will restore this consent.')).toBeInTheDocument();
+    expect(screen.queryByText(CUSTOM_WARNING)).not.toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: 'Regrant Consent' }),
+    ).toBeInTheDocument();
+  });
+});