@akinon/pz-theme 2.0.165-rc.0 → 2.0.165

package/src/__tests__/profile-form-composed.test.tsx

@@ -0,0 +1,795 @@
+import { fireEvent, render, waitFor } from '@testing-library/react';
+import React from 'react';
+
+import ProfileFormBlock, {
+  readProfilePayload
+} from '../blocks/profile-form-block';
+import RegisterFormBlock from '../blocks/register-form-block';
+import {
+  daysInMonth,
+  joinIsoDate,
+  splitIsoDate
+} from '../blocks/birth-date-selects';
+import { AUTH_CONSENT_NAMES } from '../blocks/auth-consent-block';
+import { Block } from '../theme-block';
+
+/**
+ * A profile form whose rows are blocks.
+ *
+ * The fixed profile form draws name, e-mail, phone and a native date input and
+ * nothing else, so a brand that asks for gender, a day/month/year birth date or
+ * its contact consents had to hand-write HTML and wire it with its own script.
+ * Composed, the form draws `auth-field` and `auth-consent` children instead,
+ * starts each one from the stored profile and saves what the visible ones say.
+ *
+ * What these cases pin is the save: a consent record is a legal record, so a
+ * tick the shopper never saw must never be written, and one they did see must
+ * be written exactly as they left it.
+ */
+
+const PROFILE = {
+  first_name: 'Ada',
+  last_name: 'Lovelace',
+  email: 'ada@example.com',
+  phone: '5551234567',
+  date_of_birth: '1990-04-07',
+  gender: 'female',
+  email_allowed: true,
+  sms_allowed: false,
+  call_allowed: null,
+  whatsapp_allowed: true
+};
+
+let profileResult: { data: unknown; isLoading: boolean; isError?: boolean } = {
+  data: PROFILE,
+  isLoading: false
+};
+const updateProfile = jest.fn((_body: Record<string, unknown>) => ({
+  unwrap: () => Promise.resolve({})
+}));
+
+jest.mock('@akinon/next/data/client/account', () => ({
+  useGetProfileInfoQuery: () => profileResult,
+  useUpdateProfileMutation: () => [
+    (body: Record<string, unknown>) => updateProfile(body),
+    { isLoading: false }
+  ]
+}));
+
+let sessionStatus = 'authenticated';
+const signIn = jest.fn(() => Promise.resolve({ error: null, url: '/' }));
+
+jest.mock('next-auth/react', () => ({
+  signIn: (...args: unknown[]) => signIn(...(args as [])),
+  useSession: () => ({ data: null, status: sessionStatus })
+}));
+
+jest.mock('next/navigation', () => ({
+  usePathname: () => '/',
+  useSearchParams: () => new URLSearchParams(),
+  useRouter: () => ({ push: jest.fn(), refresh: jest.fn(), replace: jest.fn() })
+}));
+
+const block = (overrides: Partial<Block>): Block =>
+  ({
+    id: 'blk',
+    type: 'text',
+    label: 'Block',
+    value: '',
+    order: 0,
+    hidden: false,
+    properties: {},
+    styles: {},
+    ...overrides
+  }) as Block;
+
+const field = (
+  fieldType: string,
+  order: number,
+  properties: Record<string, unknown> = {}
+): Block =>
+  block({
+    id: `field-${fieldType}`,
+    type: 'auth-field',
+    label: fieldType,
+    properties: { fieldType, required: false, ...properties },
+    order
+  });
+
+const channel = (
+  consentType: string,
+  order: number,
+  overrides: Partial<Block> = {}
+): Block =>
+  block({
+    id: `consent-${consentType}`,
+    type: 'auth-consent',
+    label: consentType,
+    properties: { consentType },
+    order,
+    ...overrides
+  });
+
+const renderProfile = (
+  children: Block[],
+  { isDesigner = false, properties = {} } = {}
+) =>
+  render(
+    <ProfileFormBlock
+      block={
+        block({
+          id: 'profile-1',
+          type: 'profile-form',
+          label: 'Profile Form',
+          properties,
+          blocks: children
+        }) as Block
+      }
+      placeholderId="placeholder-1"
+      sectionId="section-1"
+      currentBreakpoint="desktop"
+      isDesigner={isDesigner}
+    />
+  );
+
+const input = (container: HTMLElement, selector: string) =>
+  container.querySelector(selector) as HTMLInputElement;
+
+const datePart = (container: HTMLElement, part: string) =>
+  container.querySelector(
+    `select[data-date-part="${part}"]`
+  ) as HTMLSelectElement;
+
+const submit = (container: HTMLElement) =>
+  fireEvent.submit(container.querySelector('form')!);
+
+const lastSaved = () =>
+  updateProfile.mock.calls[updateProfile.mock.calls.length - 1][0];
+
+beforeEach(() => {
+  updateProfile.mockClear();
+  signIn.mockClear();
+  sessionStatus = 'authenticated';
+  profileResult = { data: PROFILE, isLoading: false };
+});
+
+describe('composed profile form', () => {
+  const COMPOSED = [
+    field('first_name', 0),
+    field('last_name', 1),
+    field('email', 2),
+    field('gender', 3, { choiceControl: 'radio' }),
+    field('date_of_birth', 4, { dateControl: 'selects' }),
+    channel('email', 5),
+    channel('sms', 6),
+    channel('call', 7)
+  ];
+
+  it('starts every field from the stored profile', () => {
+    const { container } = renderProfile(COMPOSED);
+
+    expect(input(container, 'input[name="first_name"]').value).toBe('Ada');
+    expect(input(container, 'input[name="last_name"]').value).toBe('Lovelace');
+    expect(input(container, 'input[value="female"]').checked).toBe(true);
+    expect(input(container, 'input[value="male"]').checked).toBe(false);
+    expect(datePart(container, 'day').value).toBe('7');
+    expect(datePart(container, 'month').value).toBe('4');
+    expect(datePart(container, 'year').value).toBe('1990');
+    expect(input(container, 'input[name="date_of_birth"]').value).toBe(
+      '1990-04-07'
+    );
+    expect(input(container, 'input[name="email_allowed"]').checked).toBe(true);
+    expect(input(container, 'input[name="sms_allowed"]').checked).toBe(false);
+    // `null` is "never asked", which must not be drawn as an agreement.
+    expect(input(container, 'input[name="call_allowed"]').checked).toBe(false);
+  });
+
+  it('shows the e-mail without letting it be edited or sent', async () => {
+    const { container } = renderProfile(COMPOSED);
+    const email = input(container, 'input[name="email"]');
+
+    expect(email.value).toBe('ada@example.com');
+    expect(email.disabled).toBe(true);
+
+    submit(container);
+
+    await waitFor(() => expect(updateProfile).toHaveBeenCalled());
+    expect(lastSaved()).not.toHaveProperty('email');
+  });
+
+  it('saves the visible answers, ticks as booleans', async () => {
+    const { container } = renderProfile(COMPOSED);
+
+    fireEvent.click(input(container, 'input[name="sms_allowed"]'));
+    fireEvent.click(input(container, 'input[name="email_allowed"]'));
+    fireEvent.click(input(container, 'input[value="male"]'));
+    fireEvent.change(datePart(container, 'year'), {
+      target: { value: '1991' }
+    });
+
+    submit(container);
+
+    await waitFor(() => expect(updateProfile).toHaveBeenCalledTimes(1));
+    expect(lastSaved()).toEqual({
+      first_name: 'Ada',
+      last_name: 'Lovelace',
+      gender: 'male',
+      date_of_birth: '1991-04-07',
+      email_allowed: false,
+      sms_allowed: true,
+      // Shown and left unticked: that is the shopper's answer now.
+      call_allowed: false
+    });
+  });
+
+  it('never writes a consent the composition does not show', async () => {
+    const { container } = renderProfile([
+      field('first_name', 0),
+      channel('email', 1),
+      // Switched off in the editor: not drawn, so not the shopper's answer.
+      channel('whatsapp', 2, { hidden: true })
+    ]);
+
+    expect(
+      container.querySelector('input[name="whatsapp_allowed"]')
+    ).toBeNull();
+
+    submit(container);
+
+    await waitFor(() => expect(updateProfile).toHaveBeenCalled());
+    const saved = lastSaved();
+
+    expect(saved).not.toHaveProperty('whatsapp_allowed');
+    expect(saved).not.toHaveProperty('sms_allowed');
+    expect(saved).not.toHaveProperty('call_allowed');
+    expect(saved).toEqual({ first_name: 'Ada', email_allowed: true });
+  });
+
+  it('re-reads the stored answer when a tick changes type on the canvas', () => {
+    const consentBlock = (consentType: string) =>
+      block({
+        id: 'profile-1',
+        type: 'profile-form',
+        label: 'Profile Form',
+        blocks: [channel(consentType, 0, { id: 'consent-1' })]
+      }) as Block;
+    const props = {
+      placeholderId: 'placeholder-1',
+      sectionId: 'section-1',
+      currentBreakpoint: 'desktop',
+      isDesigner: true
+    };
+
+    const { container, rerender } = render(
+      <ProfileFormBlock block={consentBlock('email')} {...props} />
+    );
+
+    expect(input(container, 'input[type="checkbox"]').checked).toBe(true);
+
+    // The author switches the same row to Arama, which was never answered.
+    rerender(<ProfileFormBlock block={consentBlock('call')} {...props} />);
+
+    const tick = input(container, 'input[type="checkbox"]');
+    expect(tick.name).toBe('call_allowed');
+    expect(tick.checked).toBe(false);
+  });
+
+  it('never makes a contact permission mandatory', async () => {
+    const { container } = renderProfile([
+      channel('sms', 0, {
+        // What the editor seeds on every new Consent Row.
+        properties: { consentType: 'sms', required: { desktop: true } }
+      })
+    ]);
+
+    expect(input(container, 'input[name="sms_allowed"]').required).toBe(false);
+
+    submit(container);
+
+    await waitFor(() => expect(updateProfile).toHaveBeenCalled());
+    expect(lastSaved()).toEqual({ sms_allowed: false });
+  });
+
+  it('leaves a question that was never answered out instead of blanking it', async () => {
+    // Nothing stored and nothing typed: no key is written for any of them.
+    profileResult = {
+      data: { ...PROFILE, gender: null, date_of_birth: null, phone: null },
+      isLoading: false
+    };
+
+    const { container } = renderProfile([
+      field('gender', 0, { choiceControl: 'radio' }),
+      field('date_of_birth', 1, { dateControl: 'selects' }),
+      field('phone', 2)
+    ]);
+
+    submit(container);
+
+    await waitFor(() =>
+      expect(
+        container.querySelector('[data-profile-form-success]')
+      ).not.toBeNull()
+    );
+    expect(updateProfile).not.toHaveBeenCalled();
+  });
+
+  it('asks for the rest of a half-picked birth date, under the field', async () => {
+    profileResult = {
+      data: { ...PROFILE, date_of_birth: null },
+      isLoading: false
+    };
+
+    const { container } = renderProfile(
+      [field('date_of_birth', 0, { dateControl: 'selects' })],
+      { properties: { requiredMessage: 'Zorunlu alan' } }
+    );
+
+    fireEvent.change(datePart(container, 'day'), { target: { value: '12' } });
+    submit(container);
+
+    await waitFor(() =>
+      expect(
+        container.querySelector('[data-auth-field-error="date_of_birth"]')
+          ?.textContent
+      ).toBe('Zorunlu alan')
+    );
+    expect(updateProfile).not.toHaveBeenCalled();
+
+    // Editing a part clears the field's message, like any other field.
+    fireEvent.change(datePart(container, 'month'), { target: { value: '3' } });
+
+    expect(
+      container.querySelector('[data-auth-field-error="date_of_birth"]')
+    ).toBeNull();
+  });
+
+  it('reports a required gender left unanswered', async () => {
+    profileResult = { data: { ...PROFILE, gender: null }, isLoading: false };
+
+    const { container } = renderProfile([
+      field('gender', 0, { choiceControl: 'radio', required: true })
+    ]);
+
+    submit(container);
+
+    await waitFor(() =>
+      expect(
+        container.querySelector('[data-auth-field-error="gender"]')
+      ).not.toBeNull()
+    );
+    expect(updateProfile).not.toHaveBeenCalled();
+  });
+
+  it('waits for the profile before drawing fields a save would write', () => {
+    profileResult = { data: undefined, isLoading: true };
+
+    const { container } = renderProfile(COMPOSED);
+
+    expect(container.querySelector('form')).toBeNull();
+  });
+
+  it('draws the fields on the canvas without a profile and never saves there', async () => {
+    profileResult = { data: undefined, isLoading: false };
+
+    const { container } = renderProfile(COMPOSED, { isDesigner: true });
+
+    expect(container.querySelector('input[name="first_name"]')).not.toBeNull();
+
+    submit(container);
+
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    expect(updateProfile).not.toHaveBeenCalled();
+  });
+
+  it('shows the error line when commerce refuses the save', async () => {
+    updateProfile.mockImplementationOnce(() => ({
+      unwrap: () => Promise.reject(new Error('400'))
+    }));
+
+    const { container } = renderProfile([field('first_name', 0)], {
+      properties: { errorMessage: 'Kaydedilemedi' }
+    });
+
+    submit(container);
+
+    await waitFor(() =>
+      expect(
+        container.querySelector('[data-profile-form-error]')?.textContent
+      ).toBe('Kaydedilemedi')
+    );
+  });
+
+  it('sends a box the shopper emptied, so a stored value can be cleared', async () => {
+    const { container } = renderProfile([
+      field('first_name', 0),
+      field('phone', 1)
+    ]);
+
+    fireEvent.change(input(container, 'input[name="phone"]'), {
+      target: { value: '' }
+    });
+    submit(container);
+
+    await waitFor(() => expect(updateProfile).toHaveBeenCalled());
+    expect(lastSaved()).toEqual({ first_name: 'Ada', phone: '' });
+  });
+
+  it('saves a tick whose native box the brand hid behind its own drawing', async () => {
+    const { container } = renderProfile([channel('sms', 0)]);
+    const box = input(container, 'input[name="sms_allowed"]');
+
+    // The usual custom-checkbox technique: the native input is hidden and a
+    // styled sibling is what the shopper sees and clicks.
+    box.style.display = 'none';
+    fireEvent.click(box);
+    submit(container);
+
+    await waitFor(() => expect(updateProfile).toHaveBeenCalled());
+    expect(lastSaved()).toEqual({ sms_allowed: true });
+  });
+
+  it('does not write a field whose whole row the design hid', async () => {
+    const { container } = renderProfile([
+      field('first_name', 0),
+      channel('sms', 1)
+    ]);
+
+    (
+      container.querySelector('[data-auth-consent]') as HTMLElement
+    ).style.display = 'none';
+    submit(container);
+
+    await waitFor(() => expect(updateProfile).toHaveBeenCalled());
+    expect(lastSaved()).toEqual({ first_name: 'Ada' });
+  });
+
+  it('starts and saves a custom tick by its own value', async () => {
+    profileResult = {
+      data: { ...PROFILE, newsletter: 'yes' },
+      isLoading: false
+    };
+
+    const { container } = renderProfile([
+      block({
+        id: 'consent-custom',
+        type: 'auth-consent',
+        properties: {
+          consentType: 'custom',
+          name: 'newsletter',
+          tickedValue: 'yes'
+        },
+        order: 0
+      })
+    ]);
+    const tick = input(container, 'input[name="newsletter"]');
+
+    expect(tick.checked).toBe(true);
+
+    fireEvent.click(tick);
+    submit(container);
+
+    await waitFor(() => expect(updateProfile).toHaveBeenCalled());
+    expect(lastSaved()).toEqual({ newsletter: '' });
+  });
+
+  it('shows a Form State container only in the state it is scoped to', async () => {
+    const { container } = renderProfile([
+      field('first_name', 0),
+      block({
+        id: 'state-error',
+        type: 'form-state',
+        properties: { formState: 'error' },
+        order: 1,
+        blocks: [
+          block({
+            id: 'state-error-copy',
+            type: 'text',
+            value: 'Kaydedilemedi, tekrar deneyin',
+            order: 0
+          })
+        ]
+      })
+    ]);
+
+    expect(container.textContent).not.toContain(
+      'Kaydedilemedi, tekrar deneyin'
+    );
+
+    updateProfile.mockImplementationOnce(() => ({
+      unwrap: () => Promise.reject(new Error('400'))
+    }));
+    submit(container);
+
+    await waitFor(() =>
+      expect(container.textContent).toContain('Kaydedilemedi, tekrar deneyin')
+    );
+  });
+
+  it('says the profile could not be loaded instead of drawing nothing', () => {
+    profileResult = { data: undefined, isLoading: false, isError: true };
+
+    const { container } = renderProfile([field('first_name', 0)], {
+      properties: { errorMessage: 'Bilgileriniz yüklenemedi.' }
+    });
+
+    expect(
+      container.querySelector('[data-profile-form-state="unavailable"]')
+        ?.textContent
+    ).toBe('Bilgileriniz yüklenemedi.');
+    expect(container.querySelector('form')).toBeNull();
+  });
+
+  it('keeps the fixed rows, unchanged, when the form has no children', async () => {
+    const { container } = renderProfile([], {
+      properties: { showName: false, showPhone: false, showEmail: false }
+    });
+
+    expect(container.querySelector('[data-profile-form-composed]')).toBeNull();
+    expect(container.querySelector('input[name="first_name"]')).toBeNull();
+    expect(input(container, 'input[name="date_of_birth"]').value).toBe(
+      '1990-04-07'
+    );
+
+    submit(container);
+
+    await waitFor(() => expect(updateProfile).toHaveBeenCalled());
+    // The fixed form's body is what published compositions send today.
+    expect(lastSaved()).toMatchObject({
+      first_name: 'Ada',
+      last_name: 'Lovelace',
+      date_of_birth: '1990-04-07',
+      gender: 'female',
+      sms_allowed: false,
+      email_allowed: true
+    });
+  });
+});
+
+describe('birth date selects', () => {
+  it('offers month captions when twelve are given', () => {
+    const months =
+      'Ocak,Şubat,Mart,Nisan,Mayıs,Haziran,Temmuz,Ağustos,Eylül,Ekim,Kasım,Aralık';
+    const { container } = renderProfile([
+      field('date_of_birth', 0, {
+        dateControl: 'selects',
+        monthLabels: months,
+        monthPlaceholder: 'Ay'
+      })
+    ]);
+    const options = Array.from(datePart(container, 'month').options).map(
+      (option) => option.textContent
+    );
+
+    expect(options[0]).toBe('Ay');
+    expect(options[1]).toBe('Ocak');
+    expect(options[12]).toBe('Aralık');
+  });
+
+  it('numbers the months otherwise, and bounds the years by age', () => {
+    const { container } = renderProfile([
+      field('date_of_birth', 0, {
+        dateControl: 'selects',
+        minAge: '18',
+        maxAge: '20'
+      })
+    ]);
+    const thisYear = new Date().getFullYear();
+    const years = Array.from(datePart(container, 'year').options)
+      .slice(1)
+      .map((option) => option.value);
+
+    expect(datePart(container, 'month').options[1].textContent).toBe('01');
+    // The stored 1990 is kept selectable even though it is out of range.
+    expect(years).toEqual([
+      String(thisYear - 18),
+      String(thisYear - 19),
+      String(thisYear - 20),
+      '1990'
+    ]);
+  });
+
+  it('clears a day the newly picked month cannot hold', () => {
+    profileResult = {
+      data: { ...PROFILE, date_of_birth: '1990-01-31' },
+      isLoading: false
+    };
+
+    const { container } = renderProfile([
+      field('date_of_birth', 0, { dateControl: 'selects' })
+    ]);
+
+    fireEvent.change(datePart(container, 'month'), { target: { value: '4' } });
+
+    expect(datePart(container, 'day').value).toBe('');
+    expect(input(container, 'input[name="date_of_birth"]').value).toBe('');
+  });
+
+  it('splits, joins and sizes dates', () => {
+    expect(splitIsoDate('1990-04-07T00:00:00Z')).toEqual({
+      year: '1990',
+      month: '4',
+      day: '7'
+    });
+    expect(splitIsoDate('')).toEqual({ year: '', month: '', day: '' });
+    expect(joinIsoDate('7', '4', '1990')).toBe('1990-04-07');
+    expect(joinIsoDate('7', '', '1990')).toBe('');
+    expect(daysInMonth('', '2')).toBe(29);
+    expect(daysInMonth('2023', '2')).toBe(28);
+    expect(daysInMonth('', '')).toBe(31);
+  });
+});
+
+describe('readProfilePayload', () => {
+  it('reads the first answer per name and skips empty and disabled controls', () => {
+    const form = document.createElement('form');
+
+    form.innerHTML = `
+      <input name="first_name" value="Ada" />
+      <input name="first_name" value="Copy" />
+      <input name="last_name" value="" />
+      <input name="phone" value="555" disabled />
+      <input type="radio" name="gender" value="female" />
+      <input type="radio" name="gender" value="male" checked />
+      <input type="checkbox" name="sms_allowed" />
+      <div style="display: none"><input type="checkbox" name="call_allowed" checked /></div>
+      <input name="email" value="ada@example.com" />
+    `;
+    document.body.appendChild(form);
+
+    expect(readProfilePayload(form)).toEqual({
+      first_name: 'Ada',
+      gender: 'male',
+      sms_allowed: false
+    });
+
+    form.remove();
+  });
+});
+
+describe('contact-channel ticks in a register form', () => {
+  it('lets a tick the design hid fall back to the blanket answer', async () => {
+    sessionStatus = 'unauthenticated';
+
+    const { container } = render(
+      <RegisterFormBlock
+        block={
+          block({
+            id: 'register-2',
+            type: 'register-form',
+            label: 'Register Form',
+            blocks: [
+              block({
+                id: 'f-email',
+                type: 'auth-field',
+                properties: { fieldType: 'email' },
+                order: 0
+              }),
+              block({
+                id: 'f-password',
+                type: 'auth-field',
+                properties: { fieldType: 'password' },
+                order: 1
+              }),
+              block({
+                id: 'c-legal',
+                type: 'auth-consent',
+                properties: { consentType: 'legal' },
+                order: 2
+              }),
+              block({
+                id: 'c-marketing',
+                type: 'auth-consent',
+                properties: { consentType: 'marketing' },
+                order: 3
+              }),
+              channel('sms', 4)
+            ]
+          }) as Block
+        }
+        placeholderId="placeholder-1"
+        sectionId="section-1"
+        currentBreakpoint="mobile"
+        isDesigner={false}
+      />
+    );
+
+    // The per-channel row is the desktop design; on this breakpoint it is off.
+    (
+      container.querySelector('[data-auth-consent="sms"]') as HTMLElement
+    ).style.display = 'none';
+
+    fireEvent.change(input(container, 'input[name="email"]'), {
+      target: { value: 'ada@example.com' }
+    });
+    fireEvent.change(input(container, 'input[name="password"]'), {
+      target: { value: 'hunter2' }
+    });
+    fireEvent.click(
+      input(container, `input[name="${AUTH_CONSENT_NAMES.legal}"]`)
+    );
+    fireEvent.click(
+      input(container, `input[name="${AUTH_CONSENT_NAMES.marketing}"]`)
+    );
+    fireEvent.submit(container.querySelector('form')!);
+
+    await waitFor(() => expect(signIn).toHaveBeenCalled());
+
+    const body = (signIn.mock.calls[0] as unknown[])[1] as Record<
+      string,
+      unknown
+    >;
+
+    // The shopper said yes to marketing; the hidden row does not say no.
+    expect(body.sms_allowed).toBe(true);
+  });
+
+  it('answer their own channel as a boolean', async () => {
+    sessionStatus = 'unauthenticated';
+
+    const { container } = render(
+      <RegisterFormBlock
+        block={
+          block({
+            id: 'register-1',
+            type: 'register-form',
+            label: 'Register Form',
+            blocks: [
+              block({
+                id: 'f-email',
+                type: 'auth-field',
+                properties: { fieldType: 'email' },
+                order: 0
+              }),
+              block({
+                id: 'f-password',
+                type: 'auth-field',
+                properties: { fieldType: 'password' },
+                order: 1
+              }),
+              block({
+                id: 'c-legal',
+                type: 'auth-consent',
+                properties: { consentType: 'legal' },
+                order: 2
+              }),
+              channel('sms', 3),
+              channel('whatsapp', 4)
+            ]
+          }) as Block
+        }
+        placeholderId="placeholder-1"
+        sectionId="section-1"
+        currentBreakpoint="desktop"
+        isDesigner={false}
+      />
+    );
+
+    fireEvent.change(input(container, 'input[name="email"]'), {
+      target: { value: 'ada@example.com' }
+    });
+    fireEvent.change(input(container, 'input[name="password"]'), {
+      target: { value: 'hunter2' }
+    });
+    fireEvent.click(
+      input(container, `input[name="${AUTH_CONSENT_NAMES.legal}"]`)
+    );
+    fireEvent.click(input(container, 'input[name="sms_allowed"]'));
+
+    // Unticked in a sign-up, whatever any stored profile says.
+    expect(input(container, 'input[name="whatsapp_allowed"]').checked).toBe(
+      false
+    );
+
+    fireEvent.submit(container.querySelector('form')!);
+
+    await waitFor(() => expect(signIn).toHaveBeenCalled());
+
+    const body = (signIn.mock.calls[0] as unknown[])[1] as Record<
+      string,
+      unknown
+    >;
+
+    expect(body.sms_allowed).toBe(true);
+    expect(body.whatsapp_allowed).toBe(false);
+  });
+});