@akinon/pz-theme 2.0.83-beta.0 → 2.0.83

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

@@ -0,0 +1,487 @@
+import { act, fireEvent, render, screen } from '@testing-library/react';
+import React from 'react';
+
+import OtpFormBlock from '../blocks/otp-form-block';
+import {
+  __resetAuthFlowBusForTests,
+  getPendingOtp,
+  setPendingOtp
+} from '../auth/auth-flow-bus';
+import { Block } from '../theme-block';
+
+/**
+ * The OTP form, element by element.
+ *
+ * Its pieces used to be style PARTS — a designer could recolour the code boxes
+ * but not move them, put copy between them, or replace the resend with the
+ * brand's own control. Now they are blocks, the way an auth form's fields
+ * became blocks: an `otp-phase` per half of the journey, `otp-code-input` for
+ * the boxes, an Auth Field for the number, ordinary Buttons for the CTA, the
+ * resend and the change-number.
+ *
+ * What has to hold: the phase decides which children draw, the boxes write into
+ * the ONE code the form verifies, the two action-driven controls reach the form
+ * they stand in, and a form with no children still renders its fixed layout
+ * exactly as every published one does.
+ */
+
+const signIn = jest.fn(() => Promise.resolve({ error: null, url: '/' }));
+
+jest.mock('next-auth/react', () => ({
+  signIn: (...args: unknown[]) => signIn(...args),
+  useSession: () => ({ data: null, status: 'unauthenticated' })
+}));
+
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({ push: jest.fn(), refresh: jest.fn(), replace: jest.fn() })
+}));
+
+let nextId = 0;
+const blockOf = (
+  type: string,
+  properties: Record<string, unknown> = {},
+  blocks?: Block[]
+): Block => ({
+  id: `${type}-${(nextId += 1)}`,
+  type,
+  label: type,
+  properties,
+  styles: {},
+  order: 0,
+  hidden: false,
+  ...(blocks ? { blocks } : {})
+});
+
+const ordered = (blocks: Block[]): Block[] =>
+  blocks.map((child, index) => ({ ...child, order: index }));
+
+const phonePhase = () =>
+  blockOf(
+    'otp-phase',
+    { phaseKey: 'phone' },
+    ordered([
+      blockOf('text', {}),
+      blockOf('auth-field', { fieldType: 'phone', label: 'Phone' }),
+      blockOf('button', { text: 'Send code', tag: 'button', type: 'submit' })
+    ])
+  );
+
+const codePhase = () =>
+  blockOf(
+    'otp-phase',
+    { phaseKey: 'code' },
+    ordered([
+      blockOf('otp-code-input', {}),
+      blockOf('button', { text: 'Resend code', actionType: 'otp-resend' }),
+      blockOf('button', {
+        text: 'Use another number',
+        actionType: 'otp-change-number'
+      }),
+      blockOf('button', { text: 'Verify', tag: 'button', type: 'submit' })
+    ])
+  );
+
+const renderComposed = (
+  properties: Record<string, unknown> = {},
+  children: Block[] = [phonePhase(), codePhase()]
+) =>
+  render(
+    <OtpFormBlock
+      block={{
+        ...blockOf('otp-form', { collectPhone: true, ...properties }),
+        blocks: ordered(children)
+      }}
+      placeholderId="placeholder-1"
+      sectionId="section-1"
+      currentBreakpoint="desktop"
+    />
+  );
+
+const form = () => document.querySelector('form') as HTMLFormElement;
+const codeBoxes = () =>
+  Array.from(
+    document.querySelectorAll<HTMLInputElement>('[data-otp-code] input')
+  );
+
+beforeEach(() => {
+  __resetAuthFlowBusForTests();
+  signIn.mockClear();
+});
+
+/** The send is a request; the phase only turns once it has answered. */
+const submitAndSettle = async () => {
+  await act(async () => {
+    fireEvent.submit(form());
+  });
+};
+
+describe('a composed OTP form', () => {
+  it('draws only the phase it is in', () => {
+    renderComposed();
+
+    expect(document.querySelector('input[name="phone"]')).toBeTruthy();
+    expect(screen.getByText('Send code')).toBeTruthy();
+    // The code half is not on screen yet.
+    expect(codeBoxes()).toHaveLength(0);
+    expect(screen.queryByText('Verify')).toBeNull();
+  });
+
+  it('fills the block wrapper, and so does each phase', () => {
+    renderComposed();
+
+    expect(form().classList).toContain('w-full');
+    expect(
+      (document.querySelector('[data-otp-phase]') as HTMLElement).classList
+    ).toContain('w-full');
+  });
+
+  it('sends the code for the number a child field collected', async () => {
+    renderComposed();
+
+    fireEvent.input(document.querySelector('input[name="phone"]')!, {
+      target: { value: '555 111 22 33' }
+    });
+    await submitAndSettle();
+
+    // Bare digits, which is what commerce validates the length of — and the
+    // journey has moved on to the code it just texted.
+    expect(getPendingOtp()?.phone).toBe('5551112233');
+    expect(codeBoxes()).toHaveLength(6);
+  });
+
+  it('says which field is missing instead of raising a browser bubble', async () => {
+    renderComposed({ requiredMessage: 'Telefon zorunludur.' });
+
+    await submitAndSettle();
+
+    expect(form().noValidate).toBe(true);
+    expect(screen.getByText('Telefon zorunludur.')).toBeTruthy();
+    // Nothing was sent, so the journey stays where it was.
+    expect(getPendingOtp()).toBeNull();
+    expect(codeBoxes()).toHaveLength(0);
+  });
+
+  it('shows the code half once a verification is pending', () => {
+    setPendingOtp({
+      kind: 'login',
+      phone: '5551112233',
+      providerId: 'default'
+    });
+    renderComposed();
+
+    expect(codeBoxes()).toHaveLength(6);
+    expect(screen.getByText('Verify')).toBeTruthy();
+    expect(document.querySelector('input[name="phone"]')).toBeNull();
+  });
+
+  it('gathers what the boxes type into one code and verifies it', () => {
+    setPendingOtp({
+      kind: 'login',
+      phone: '5551112233',
+      providerId: 'default'
+    });
+    renderComposed();
+
+    // Typing walks the caret, so every digit goes into the first empty box.
+    '123456'.split('').forEach((digit) => {
+      fireEvent.change(codeBoxes().find((box) => box.value === '')!, {
+        target: { value: digit }
+      });
+    });
+
+    expect(
+      codeBoxes()
+        .map((box) => box.value)
+        .join('')
+    ).toBe('123456');
+
+    fireEvent.submit(form());
+
+    expect(signIn).toHaveBeenCalledTimes(1);
+    expect(signIn.mock.calls[0][1]).toMatchObject({ code: '123456' });
+  });
+
+  it('names what is missing when the code is half typed', () => {
+    setPendingOtp({
+      kind: 'login',
+      phone: '5551112233',
+      providerId: 'default'
+    });
+    renderComposed({ codeIncompleteMessage: '{length} haneli kodu girin.' });
+
+    fireEvent.change(codeBoxes()[0], { target: { value: '1' } });
+    fireEvent.submit(form());
+
+    // A composed CTA cannot disable itself, so silence would read as dead.
+    expect(screen.getByText('6 haneli kodu girin.')).toBeTruthy();
+    expect(signIn).not.toHaveBeenCalled();
+  });
+
+  it('takes the shopper back to the number through an action', () => {
+    setPendingOtp({
+      kind: 'login',
+      phone: '5551112233',
+      providerId: 'default'
+    });
+    renderComposed();
+
+    fireEvent.click(screen.getByText('Use another number'));
+
+    // Back to the phone half, and the pending verification is forgotten.
+    expect(document.querySelector('input[name="phone"]')).toBeTruthy();
+    expect(codeBoxes()).toHaveLength(0);
+  });
+
+  it('locks the resend while the countdown runs', () => {
+    setPendingOtp({
+      kind: 'login',
+      phone: '5551112233',
+      providerId: 'default'
+    });
+    renderComposed({ timerSeconds: 60 });
+
+    // A Button block with no `tag` renders an anchor; what matters is that the
+    // control it renders says it cannot be used yet.
+    const resend = screen.getByText('Resend code').closest('[aria-disabled]');
+
+    expect(resend).toBeTruthy();
+  });
+
+  it('keeps drawing shared chrome in both halves', () => {
+    const banner = blockOf('text', {});
+    setPendingOtp({
+      kind: 'login',
+      phone: '5551112233',
+      providerId: 'default'
+    });
+    renderComposed({}, [banner, phonePhase(), codePhase()]);
+
+    // A child that is not a phase belongs to the whole form.
+    expect(document.querySelector('[data-otp-code]')).toBeTruthy();
+    expect(document.querySelectorAll('[data-otp-phase]')).toHaveLength(1);
+  });
+
+  it('still renders the fixed layout with no children', () => {
+    renderComposed({}, []);
+
+    expect(document.querySelector('input[name="phone"]')).toBeTruthy();
+    expect(
+      document.querySelector('[data-otp-form-submit="send"]')
+    ).toBeTruthy();
+  });
+});
+
+describe('correcting a code that is already partly typed', () => {
+  const typeInto = (index: number, value: string) =>
+    fireEvent.change(codeBoxes()[index], { target: { value } });
+
+  const shown = () =>
+    codeBoxes()
+      .map((box) => box.value || '_')
+      .join('');
+
+  beforeEach(() => {
+    setPendingOtp({
+      kind: 'login',
+      phone: '5551112233',
+      providerId: 'default'
+    });
+  });
+
+  it('writes the digit into the box it was typed in', () => {
+    renderComposed();
+
+    '123456'.split('').forEach((digit, index) => typeInto(index, digit));
+    expect(shown()).toBe('123456');
+
+    // The shopper sees the second digit is wrong and clicks it. The box is
+    // CONTROLLED, so what arrives is its own digit plus the new one — which,
+    // appended to the end of a full code, used to be capped away entirely: the
+    // keystroke did nothing at all.
+    typeInto(1, '29');
+    expect(shown()).toBe('193456');
+  });
+
+  it('does not push a correction onto the end of a half-typed code', () => {
+    renderComposed();
+
+    '123'.split('').forEach((digit, index) => typeInto(index, digit));
+    expect(shown()).toBe('123___');
+
+    // Both digits used to land at the end, turning "123" into "12319".
+    typeInto(0, '19');
+    expect(shown()).toBe('923___');
+  });
+
+  it('empties the box Backspace was pressed in, not the last one', () => {
+    renderComposed();
+
+    '123456'.split('').forEach((digit, index) => typeInto(index, digit));
+
+    fireEvent.keyDown(codeBoxes()[1], { key: 'Backspace' });
+    expect(shown()).toBe('1_3456');
+
+    // Pressed again in a box that is already empty, it steps back.
+    fireEvent.keyDown(codeBoxes()[1], { key: 'Backspace' });
+    expect(shown()).toBe('__3456');
+  });
+
+  it('will not verify a code with a hole in it', () => {
+    renderComposed({ codeIncompleteMessage: '{length} haneli kodu girin.' });
+
+    '123456'.split('').forEach((digit, index) => typeInto(index, digit));
+    fireEvent.keyDown(codeBoxes()[2], { key: 'Backspace' });
+
+    fireEvent.submit(form());
+
+    // Six characters long, five digits: a gap is not a finished code.
+    expect(screen.getByText('6 haneli kodu girin.')).toBeTruthy();
+    expect(signIn).not.toHaveBeenCalled();
+  });
+});
+
+describe('the journey a verification belongs to', () => {
+  it('ignores a verification parked by another journey', () => {
+    // One page, one slot: a header's phone-login drawer used to open straight
+    // on the code screen for a registration abandoned elsewhere on the page —
+    // and re-post it, password and all, under a code typed for something else.
+    setPendingOtp({
+      kind: 'register',
+      phone: '5551234567',
+      providerId: 'default',
+      scope: 'checkout',
+      payload: { formType: 'registration', password: 'hunter2' }
+    });
+
+    renderComposed();
+
+    // This form stands outside every flow, so the record is not its business:
+    // it starts where it always did, at the number.
+    expect(
+      document.querySelector('[data-otp-form-phase="phone"]')
+    ).toBeTruthy();
+    expect(codeBoxes()).toHaveLength(0);
+  });
+
+  it('finishes a verification parked by its own journey', () => {
+    setPendingOtp({
+      kind: 'register',
+      phone: '5551234567',
+      providerId: 'default',
+      payload: { formType: 'registration', password: 'hunter2' }
+    });
+
+    renderComposed();
+
+    expect(codeBoxes()).toHaveLength(6);
+  });
+
+  it('refuses to throw a registration away for a new number', () => {
+    // `pending.payload` is the ONLY copy of the sign-up. The fixed layout has
+    // always hidden this control during a registration; a composed one puts it
+    // on a Button the author placed, so the refusal belongs on the method.
+    setPendingOtp({
+      kind: 'register',
+      phone: '5551234567',
+      providerId: 'default',
+      payload: { formType: 'registration', password: 'hunter2' }
+    });
+
+    renderComposed();
+
+    // The control says it is unavailable rather than vanishing from a design
+    // that placed it, the way the resend does during its cooldown.
+    expect(
+      screen.getByText('Use another number').closest('[aria-disabled]')
+    ).toBeTruthy();
+
+    fireEvent.click(screen.getByText('Use another number'));
+
+    expect(getPendingOtp()).not.toBeNull();
+    expect(codeBoxes()).toHaveLength(6);
+  });
+});
+
+describe('asking for another code', () => {
+  const REGISTER_PENDING = {
+    kind: 'register' as const,
+    phone: '5551234567',
+    providerId: 'default',
+    payload: { formType: 'registration', password: 'hunter2' }
+  };
+
+  /** Run the cooldown out, which is the only thing that unlocks the control. */
+  const waitOutTheCountdown = async (seconds: number) => {
+    await act(async () => {
+      jest.advanceTimersByTime(seconds * 1000);
+    });
+  };
+
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
+  it('texts the shopper once however fast the control is clicked twice', async () => {
+    // The countdown only restarts once the request has ANSWERED, so between the
+    // click and the response the control still read as available — and a second
+    // click there is a second SMS, billed twice and counted as abuse by some
+    // backends. The window is a whole round trip, not a race.
+    let release: (value: unknown) => void = () => undefined;
+    signIn.mockImplementationOnce(
+      () =>
+        new Promise((resolve) => {
+          release = resolve;
+        }) as never
+    );
+
+    setPendingOtp(REGISTER_PENDING);
+    renderComposed({ timerSeconds: 10 });
+    await waitOutTheCountdown(10);
+
+    const resend = screen.getByText('Resend code');
+    fireEvent.click(resend);
+    fireEvent.click(resend);
+
+    expect(signIn).toHaveBeenCalledTimes(1);
+
+    await act(async () => {
+      release({ error: JSON.stringify([{ type: 'otp' }]) });
+    });
+  });
+
+  it('says so when the resend is refused, instead of restarting the wait', async () => {
+    // `signIn` RESOLVES on a refusal rather than throwing, so the response has
+    // to be read. A rate limit used to be swallowed as the expected challenge:
+    // the typed digits were wiped, the ring started again, and the shopper
+    // waited out a lockout for an SMS that was never sent.
+    setPendingOtp(REGISTER_PENDING);
+    renderComposed({ timerSeconds: 10 });
+    await waitOutTheCountdown(10);
+
+    fireEvent.change(codeBoxes()[0], { target: { value: '1' } });
+
+    signIn.mockImplementationOnce(
+      () =>
+        Promise.resolve({
+          error: 'CredentialsSignin',
+          code: JSON.stringify([{ type: 'limit', data: 'Too many attempts.' }])
+        }) as never
+    );
+
+    await act(async () => {
+      fireEvent.click(screen.getByText('Resend code'));
+    });
+
+    expect(screen.getByText('Too many attempts.')).toBeTruthy();
+    // What they had already typed is still there, and the control has not
+    // locked itself for another cooldown.
+    expect(codeBoxes()[0].value).toBe('1');
+    expect(
+      screen.getByText('Resend code').closest('[aria-disabled]')
+    ).toBeNull();
+  });
+});