@akinon/pz-theme 2.0.94 → 2.0.95-beta.1

package/src/__tests__/auth-error-reading.test.ts

@@ -0,0 +1,232 @@
+import {
+  authFormMessage,
+  readAuthError,
+  readCommerceError,
+  splitByKnownFields
+} from '../auth/read-auth-error';
+
+/**
+ * What a commerce refusal says, and where it belongs on screen.
+ *
+ * The bug this replaces: all three private copies kept a message only when it
+ * was a string, and commerce sends field errors as `{ name, value: string[] }`.
+ * So "this e-mail is already registered" extracted to nothing, the empty result
+ * fell through to `String(error)`, and the shopper read the raw JSON — while the
+ * designer's authored fallback sentence never fired, because that JSON is a
+ * non-empty string.
+ */
+
+const fieldErrors = (
+  entries: { name: string; value: unknown }[]
+): string => JSON.stringify([{ type: 'field_errors', data: entries }]);
+
+describe('a field-level refusal', () => {
+  it('reads the array shape commerce actually sends, per field', () => {
+    const reading = readAuthError(
+      fieldErrors([
+        { name: 'email', value: ['A user with this e-mail already exists.'] },
+        { name: 'password', value: ['This password is too common.'] }
+      ])
+    );
+
+    expect(reading.fieldMessages).toEqual({
+      email: 'A user with this e-mail already exists.',
+      password: 'This password is too common.'
+    });
+    // Nothing is left over for the form-level slot, which is the whole point:
+    // a second generic line above the inputs would only add noise.
+    expect(reading.formMessage).toBe('');
+  });
+
+  it('keeps every sentence when a field has more than one', () => {
+    const reading = readAuthError(
+      fieldErrors([
+        { name: 'password', value: ['Too short.', 'Too common.'] }
+      ])
+    );
+
+    expect(reading.fieldMessages.password).toBe('Too short. Too common.');
+  });
+
+  it('reads a bare string and a re-encoded array the same way', () => {
+    expect(
+      readAuthError(fieldErrors([{ name: 'email', value: 'Invalid.' }]))
+        .fieldMessages.email
+    ).toBe('Invalid.');
+
+    // Some brand middleware re-encodes the array on its way through.
+    expect(
+      readAuthError(
+        fieldErrors([{ name: 'email', value: '["Invalid.","Try again."]' }])
+      ).fieldMessages.email
+    ).toBe('Invalid. Try again.');
+  });
+
+  it('never hangs a non-field message under a field', () => {
+    const reading = readAuthError(
+      fieldErrors([
+        { name: 'non_field_errors', value: ['Too many attempts.'] }
+      ])
+    );
+
+    expect(reading.fieldMessages).toEqual({});
+    expect(reading.formMessage).toBe('Too many attempts.');
+  });
+});
+
+describe('a form-level refusal', () => {
+  it('reads non_field_errors', () => {
+    expect(
+      readAuthError(
+        JSON.stringify([
+          { type: 'non_field_errors', data: ['E-mail or password is wrong.'] }
+        ])
+      ).formMessage
+    ).toBe('E-mail or password is wrong.');
+  });
+
+  it('keeps an unknown error type legible rather than dropping it', () => {
+    expect(
+      readAuthError(
+        JSON.stringify([{ type: 'brand_specific', data: 'Account locked.' }])
+      ).formMessage
+    ).toBe('Account locked.');
+  });
+
+  it('falls back to the raw detail only when nothing legible was said', () => {
+    const opaque = JSON.stringify([{ type: 'field_errors', data: [] }]);
+
+    expect(readAuthError(opaque).formMessage).toBe(opaque);
+    expect(readAuthError('CredentialsSignin').formMessage).toBe(
+      'CredentialsSignin'
+    );
+    expect(readAuthError('').formMessage).toBe('');
+  });
+});
+
+describe('the two challenges that carry no words', () => {
+  it('reports the SMS handoff separately, so a form can park its payload', () => {
+    const reading = readAuthError(JSON.stringify([{ type: 'otp' }]), {
+      otp: 'We sent you a code.'
+    });
+
+    expect(reading.hasOtpChallenge).toBe(true);
+    expect(reading.formMessage).toBe('We sent you a code.');
+  });
+
+  it('names a captcha escalation instead of printing its JSON', () => {
+    const reading = readAuthError(JSON.stringify([{ type: 'captcha' }]), {
+      captcha: 'Please complete the security check.'
+    });
+
+    expect(reading.hasCaptchaChallenge).toBe(true);
+    expect(reading.formMessage).toBe('Please complete the security check.');
+    // Without authored copy it is still a challenge, not an unreadable blob:
+    // the caller's own fallback sentence takes over.
+    expect(readAuthError(JSON.stringify([{ type: 'captcha' }])).formMessage).toBe(
+      ''
+    );
+  });
+});
+
+describe('the raw commerce body an RTK Query mutation rejects with', () => {
+  it('splits field keys from the form-level ones', () => {
+    const reading = readCommerceError({
+      email: ['No account with this address.'],
+      non_field_errors: ['Try again later.']
+    });
+
+    expect(reading.fieldMessages).toEqual({
+      email: 'No account with this address.'
+    });
+    expect(reading.formMessage).toBe('Try again later.');
+  });
+
+  it('reads DRF-style detail and a captcha redirect', () => {
+    expect(readCommerceError({ detail: 'Throttled.' }).formMessage).toBe(
+      'Throttled.'
+    );
+
+    const reading = readCommerceError(
+      { redirect_url: '/captcha/?next=/login' },
+      { captcha: 'Security check needed.' }
+    );
+
+    expect(reading.hasCaptchaChallenge).toBe(true);
+    expect(reading.formMessage).toBe('Security check needed.');
+  });
+});
+
+describe('attribution against the form on screen', () => {
+  const formWith = (names: string[]): HTMLFormElement => {
+    const form = document.createElement('form');
+
+    names.forEach((name) => {
+      const input = document.createElement('input');
+      input.name = name;
+      form.appendChild(input);
+    });
+
+    return form;
+  };
+
+  it('moves a message for a field nobody authored up to the form', () => {
+    const reading = splitByKnownFields(
+      readAuthError(
+        fieldErrors([
+          { name: 'email', value: ['Already registered.'] },
+          { name: 'tckn', value: ['This is required.'] }
+        ])
+      ),
+      formWith(['email', 'password'])
+    );
+
+    expect(reading.fieldMessages).toEqual({ email: 'Already registered.' });
+    // Not lost: a sentence hung on a name no control submits under would be a
+    // sentence the shopper never sees.
+    expect(reading.formMessage).toBe('This is required.');
+  });
+
+  it('accepts a named field set, for a handler with no form to measure', () => {
+    const reading = splitByKnownFields(
+      readAuthError(
+        fieldErrors([
+          { name: 'code', value: ['Invalid code.'] },
+          { name: 'surname', value: ['Unexpected.'] }
+        ])
+      ),
+      null,
+      ['code', 'phone']
+    );
+
+    expect(reading.fieldMessages).toEqual({ code: 'Invalid code.' });
+    expect(reading.formMessage).toBe('Unexpected.');
+  });
+
+  it('leaves the reading alone when it measured nothing', () => {
+    const reading = readAuthError(
+      fieldErrors([{ name: 'email', value: ['Already registered.'] }])
+    );
+
+    expect(splitByKnownFields(reading, null)).toBe(reading);
+  });
+});
+
+describe('the sentence a form shows above its inputs', () => {
+  it('is the authored fallback only when nothing was legible', () => {
+    const unreadable = readAuthError('CredentialsSignin');
+    const attributed = readAuthError(
+      fieldErrors([{ name: 'email', value: ['Already registered.'] }])
+    );
+
+    expect(authFormMessage(unreadable, 'Login failed.')).toBe(
+      'CredentialsSignin'
+    );
+    expect(authFormMessage(readAuthError(''), 'Login failed.')).toBe(
+      'Login failed.'
+    );
+    // Every sentence found a field, so the slot stays empty rather than
+    // repeating a generic line the shopper does not need.
+    expect(authFormMessage(attributed, 'Login failed.')).toBe('');
+  });
+});

package/src/__tests__/auth-flow-scope.test.tsx

@@ -0,0 +1,162 @@
+import { act, fireEvent, render, screen } from '@testing-library/react';
+import React from 'react';
+
+import AuthFlowBlock from '../blocks/auth-flow-block';
+import { __resetAuthFlowBusForTests } from '../auth/auth-flow-bus';
+import { Block } from '../theme-block';
+
+/**
+ * Two journeys on one page, which is what "put it in a tab, in a modal, in a
+ * popup or on a page" invites a brand to do.
+ *
+ * They used to share their step: every flow with nothing authored fell back to
+ * one name on the bus, so a header drawer and a journey in a tab were the same
+ * journey wearing two coats — opening the drawer on "register" moved the tab's
+ * journey with it, and closing the drawer reset it under the shopper.
+ *
+ * A flow with no authored name now answers to its own BLOCK, so two of them
+ * are two journeys. Sharing stays available and stays deliberate: give both the
+ * same Flow ID, which is also what lets a trigger outside a flow name it.
+ */
+
+const textChild = (id: string, value: string): Block => ({
+  id,
+  type: 'text',
+  label: id,
+  value,
+  properties: {},
+  styles: {},
+  order: 0,
+  hidden: false
+});
+
+const step = (
+  id: string,
+  stepKey: string,
+  children: Block[],
+  order = 0
+): Block => ({
+  id,
+  type: 'auth-step',
+  label: id,
+  properties: { stepKey },
+  styles: {},
+  order,
+  hidden: false,
+  blocks: children
+});
+
+/** A step-changing control, composed the way the shipped arrangement does. */
+const stepButton = (id: string, label: string, target: string): Block => ({
+  id,
+  type: 'button',
+  label,
+  properties: {
+    text: label,
+    tag: 'button',
+    type: 'button',
+    actionType: 'auth-step',
+    actionTarget: target
+  },
+  styles: {},
+  order: 1,
+  hidden: false
+});
+
+const journey = (
+  blockId: string,
+  prefix: string,
+  properties: Record<string, unknown> = {}
+): Block => ({
+  id: blockId,
+  type: 'auth-flow',
+  label: 'Auth Flow',
+  properties: { initialStep: 'welcome', ...properties },
+  styles: {},
+  order: 0,
+  hidden: false,
+  blocks: [
+    step(
+      `${blockId}-welcome`,
+      'welcome',
+      [
+        textChild(`${blockId}-t-welcome`, `${prefix} welcome`),
+        stepButton(`${blockId}-go`, `${prefix} to register`, 'register')
+      ],
+      0
+    ),
+    step(
+      `${blockId}-register`,
+      'register',
+      [textChild(`${blockId}-t-register`, `${prefix} register`)],
+      1
+    )
+  ]
+});
+
+const renderBoth = (properties: Record<string, unknown> = {}) =>
+  render(
+    <>
+      <AuthFlowBlock
+        block={journey('flow-drawer', 'Drawer', properties)}
+        placeholderId="header"
+        sectionId="section-modal"
+        isDesigner={false}
+        selectedBlockId={null}
+      />
+      <AuthFlowBlock
+        block={journey('flow-page', 'Page', properties)}
+        placeholderId="body"
+        sectionId="section-body"
+        isDesigner={false}
+        selectedBlockId={null}
+      />
+    </>
+  );
+
+beforeEach(() => {
+  __resetAuthFlowBusForTests();
+});
+
+describe('two auth journeys on one page', () => {
+  it('move independently when neither names itself', () => {
+    renderBoth();
+
+    act(() => {
+      fireEvent.click(screen.getByText('Drawer to register'));
+    });
+
+    // The one that was clicked moved…
+    expect(screen.getByText('Drawer register')).toBeInTheDocument();
+    // …and the other is exactly where the shopper left it.
+    expect(screen.getByText('Page welcome')).toBeInTheDocument();
+    expect(screen.queryByText('Page register')).toBeNull();
+  });
+
+  it('still move together when the design says they are one journey', () => {
+    renderBoth({ flowId: 'auth' });
+
+    act(() => {
+      fireEvent.click(screen.getByText('Drawer to register'));
+    });
+
+    // Sharing is the authored case: one journey rendered twice, or a trigger
+    // outside the flow naming it.
+    expect(screen.getByText('Drawer register')).toBeInTheDocument();
+    expect(screen.getByText('Page register')).toBeInTheDocument();
+  });
+
+  it('keeps a bare step target working inside its own flow', () => {
+    // The shipped arrangement writes bare keys ('register', not 'auth:register')
+    // and resolves them against the flow the control stands in — which is what
+    // makes a block-scoped name invisible to a composition.
+    renderBoth();
+
+    act(() => {
+      fireEvent.click(screen.getByText('Page to register'));
+    });
+
+    expect(screen.getByText('Page register')).toBeInTheDocument();
+    expect(screen.getByText('Drawer welcome')).toBeInTheDocument();
+  });
+});

package/src/__tests__/auth-form-error-block.test.tsx

@@ -34,6 +34,8 @@ jest.mock('next-auth/react', () => ({
 }));
 
 jest.mock('next/navigation', () => ({
+  usePathname: () => '/',
+  useSearchParams: () => new URLSearchParams(),
   useRouter: () => ({ push: jest.fn(), refresh: jest.fn(), replace: jest.fn() })
 }));