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

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

@@ -0,0 +1,326 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import React from 'react';
+
+import AuthFormBlock from '../blocks/auth-form-block';
+import OtpFormBlock from '../blocks/otp-form-block';
+import { containsAuthErrorBlock } from '../auth/form-error-context';
+import { Block } from '../theme-block';
+
+/**
+ * Where a form-level message lands.
+ *
+ * The form used to append it after everything it drew, and in a composition
+ * that is wrong twice: the CTA is one of the children, so a failed login wrote
+ * "e-posta veya şifre hatalı" BELOW the button that had just been pressed, and
+ * the padding the design puts on its own wrapper never reaches a node appended
+ * outside that wrapper — so the line also sat flush against the drawer's edge
+ * while every other line was inset by 24px.
+ *
+ * The form cannot fix either from where it stands: it does not know which child
+ * is the CTA, nor which wrapper carries the padding. So it publishes the message
+ * and a Form Error block draws it where the design says. These cases hold both
+ * halves of that contract — the block draws it, and the form stands down — plus
+ * the fallback that keeps a composition which has not placed one from going
+ * silent.
+ */
+
+const signIn = jest.fn(() =>
+  Promise.resolve({ error: 'CredentialsSignin', url: null })
+);
+
+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() })
+}));
+
+const block = (overrides: Partial<Block>): Block =>
+  ({
+    id: 'blk',
+    type: 'text',
+    label: 'Block',
+    value: '',
+    order: 0,
+    hidden: false,
+    properties: {},
+    styles: {},
+    ...overrides
+  }) as Block;
+
+const emailField = block({
+  id: 'field-email',
+  type: 'auth-field',
+  properties: { fieldType: 'email', label: 'E-mail' },
+  order: 0
+});
+
+const passwordField = block({
+  id: 'field-password',
+  type: 'auth-field',
+  properties: { fieldType: 'password', label: 'Password' },
+  order: 1
+});
+
+const errorBlock = (properties: Record<string, unknown> = {}) =>
+  block({
+    id: 'error-row',
+    type: 'auth-error',
+    label: 'Form Error',
+    properties,
+    order: 2
+  });
+
+/** The composed CTA, which is what the message used to end up underneath. */
+const ctaBlock = block({
+  id: 'cta',
+  type: 'button',
+  label: 'CTA',
+  properties: { text: 'Devam Et', tag: 'button', buttonType: 'submit' },
+  order: 3
+});
+
+const renderLoginForm = (children: Block[], isDesigner = false) =>
+  render(
+    <AuthFormBlock
+      block={
+        block({
+          id: 'auth-form-1',
+          type: 'auth-form',
+          label: 'Auth Form',
+          properties: { showSubmit: false },
+          blocks: children
+        }) as Block
+      }
+      placeholderId="placeholder-1"
+      sectionId="section-1"
+      currentBreakpoint="desktop"
+      isDesigner={isDesigner}
+    />
+  );
+
+/** Fails one submit, which is the only way to a real form-level message. */
+const failASubmit = async (container: HTMLElement) => {
+  fireEvent.change(container.querySelector('input[name="email"]')!, {
+    target: { value: 'someone@example.com' }
+  });
+  fireEvent.change(container.querySelector('input[name="password"]')!, {
+    target: { value: 'hunter2' }
+  });
+  fireEvent.submit(container.querySelector('form')!);
+
+  await waitFor(() => expect(signIn).toHaveBeenCalled());
+};
+
+beforeEach(() => {
+  signIn.mockClear();
+});
+
+describe('the Form Error block', () => {
+  it('draws the message where the design put it, and the form stops appending its own', async () => {
+    const { container } = renderLoginForm([
+      emailField,
+      passwordField,
+      errorBlock(),
+      ctaBlock
+    ]);
+
+    await failASubmit(container);
+
+    const authored = await waitFor(() =>
+      container.querySelector('[data-auth-error]')
+    );
+
+    expect(authored).not.toBeNull();
+    expect(authored).toHaveAttribute('role', 'alert');
+    expect(authored).toHaveAttribute('data-auth-error-state', 'error');
+    // The form's own node is what used to land under the button; with the block
+    // placed there must be exactly one message on the page, not two.
+    expect(container.querySelector('[data-auth-form-error]')).toBeNull();
+
+    // And it is where it was authored: BEFORE the CTA, not after it.
+    const cta = screen.getByRole('button', { name: 'Devam Et' });
+    expect(
+      authored!.compareDocumentPosition(cta) & Node.DOCUMENT_POSITION_FOLLOWING
+    ).toBeTruthy();
+  });
+
+  it("falls back to the form's own node for a composition that has not placed one", async () => {
+    const { container } = renderLoginForm([
+      emailField,
+      passwordField,
+      ctaBlock
+    ]);
+
+    await failASubmit(container);
+
+    const fallback = await waitFor(() =>
+      container.querySelector('[data-auth-form-error]')
+    );
+
+    expect(fallback).not.toBeNull();
+    expect(container.querySelector('[data-auth-error]')).toBeNull();
+    // Documented rather than desired: appended after every child, which is
+    // below the CTA. That is the placement the block exists to replace.
+    const cta = screen.getByRole('button', { name: 'Devam Et' });
+    expect(
+      fallback!.compareDocumentPosition(cta) & Node.DOCUMENT_POSITION_PRECEDING
+    ).toBeTruthy();
+  });
+
+  it('shows nothing at all until the form has something to say', () => {
+    const { container } = renderLoginForm([
+      emailField,
+      passwordField,
+      errorBlock(),
+      ctaBlock
+    ]);
+
+    expect(container.querySelector('[data-auth-error]')).toBeNull();
+    expect(container.textContent).not.toContain('went wrong');
+  });
+
+  it('draws a preview in the canvas so the state can be dressed without failing a login', () => {
+    const { container } = renderLoginForm(
+      [
+        emailField,
+        passwordField,
+        errorBlock({ previewMessage: 'Hatalı giriş.' }),
+        ctaBlock
+      ],
+      true
+    );
+
+    const preview = container.querySelector('[data-auth-error]');
+
+    expect(preview).not.toBeNull();
+    expect(preview).toHaveTextContent('Hatalı giriş.');
+    expect(preview).toHaveAttribute('data-auth-error-state', 'preview');
+    // A designer's screen reader must not announce a failure that never
+    // happened.
+    expect(preview).not.toHaveAttribute('role');
+  });
+});
+
+describe('an OTP form whose phases are composed separately', () => {
+  const phase = (key: string, children: Block[]) =>
+    block({
+      id: `phase-${key}`,
+      type: 'otp-phase',
+      label: key,
+      properties: { phaseKey: key },
+      blocks: children,
+      order: key === 'phone' ? 0 : 1
+    });
+
+  const renderOtp = (children: Block[]) =>
+    render(
+      <OtpFormBlock
+        block={
+          block({
+            id: 'otp-form-1',
+            type: 'otp-form',
+            label: 'OTP Form',
+            properties: { collectPhone: true },
+            blocks: children
+          }) as Block
+        }
+        placeholderId="placeholder-1"
+        sectionId="section-1"
+        currentBreakpoint="desktop"
+        isDesigner
+      />
+    );
+
+  it('does not draw an error block that belongs to the phase it is not showing', () => {
+    const { container } = renderOtp([
+      phase('phone', [
+        block({
+          id: 'phone-field',
+          type: 'auth-field',
+          properties: { fieldType: 'phone' }
+        })
+      ]),
+      phase('code', [errorBlock({ previewMessage: 'Kod hatalı.' })])
+    ]);
+
+    expect(container.querySelector('[data-otp-form]')).not.toBeNull();
+    // The phone phase is up, so the code phase's block is not on screen — and a
+    // block that is not rendered cannot carry the message, which is why the
+    // form asks about the RENDERED children before standing down. The rule
+    // itself is pinned on `containsAuthErrorBlock` below.
+    expect(container.querySelector('[data-auth-error]')).toBeNull();
+  });
+
+  it('stands down for an error block among the chrome both phases draw', () => {
+    const { container } = renderOtp([
+      errorBlock({ previewMessage: 'Kod hatalı.' }),
+      phase('phone', [
+        block({
+          id: 'phone-field',
+          type: 'auth-field',
+          properties: { fieldType: 'phone' }
+        })
+      ])
+    ]);
+
+    // Shared chrome renders in both halves, so the block is on screen and the
+    // canvas preview proves it is the one that will carry the message.
+    expect(container.querySelector('[data-auth-error]')).toHaveTextContent(
+      'Kod hatalı.'
+    );
+  });
+});
+
+describe('the rule the form uses to decide whether to stand down', () => {
+  const errorAt = (children: Block[]) => [
+    block({ id: 'wrapper', type: 'group', blocks: children })
+  ];
+
+  it('finds an error block however deep the composition buried it', () => {
+    expect(containsAuthErrorBlock(errorAt(errorAt([errorBlock()])))).toBe(true);
+  });
+
+  it('answers no for an error block the composition has hidden', () => {
+    // The forms filter their OWN children before asking, but the recursion did
+    // not: a Form Error tucked into a Group and then hidden counted as
+    // authored, silenced the form's built-in message, and drew nothing itself.
+    // The shopper was told nothing at all.
+    const hidden = { ...errorBlock(), hidden: true } as Block;
+
+    expect(containsAuthErrorBlock(errorAt([hidden]))).toBe(false);
+    expect(
+      containsAuthErrorBlock([
+        block({
+          id: 'wrapper',
+          type: 'group',
+          hidden: true,
+          blocks: [errorBlock()]
+        })
+      ])
+    ).toBe(false);
+  });
+
+  it('answers no for a composition that has none', () => {
+    expect(containsAuthErrorBlock(errorAt([emailField, ctaBlock]))).toBe(false);
+    expect(containsAuthErrorBlock(undefined)).toBe(false);
+    expect(containsAuthErrorBlock([])).toBe(false);
+  });
+
+  it('is asked of the rendered subset, so a hidden phase cannot silence the form', () => {
+    // What the OTP form passes while the phone phase is up: the shared chrome
+    // plus that phase. The code phase — and the error block inside it — is not
+    // in the list, so the answer is no and the form keeps its own message.
+    const sharedChrome = block({ id: 'logo', type: 'image' });
+    const phonePhase = block({
+      id: 'phase-phone',
+      type: 'otp-phase',
+      properties: { phaseKey: 'phone' },
+      blocks: [emailField]
+    });
+
+    expect(containsAuthErrorBlock([sharedChrome, phonePhase])).toBe(false);
+  });
+});

package/src/__tests__/auth-form-validation.test.tsx

@@ -0,0 +1,204 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import React from 'react';
+
+import AuthFormBlock from '../blocks/auth-form-block';
+import { Block } from '../theme-block';
+
+/**
+ * A composed auth form validates its own fields.
+ *
+ * It used to leave the job to the browser: `required` on the inputs and no
+ * `noValidate`, so an empty submit raised the native bubble — the browser's
+ * copy, over the field, gone on the next click, and nothing a brand can style.
+ * The storefront's own auth pages draw the message under the field instead, so
+ * these hold that shape: our message, in the DOM, per field, cleared on edit.
+ */
+
+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() })
+}));
+
+const authField = (
+  id: string,
+  fieldType: string,
+  order: number,
+  properties: Record<string, unknown> = {}
+): Block => ({
+  id,
+  type: 'auth-field',
+  label: id,
+  properties: { fieldType, ...properties },
+  styles: {},
+  order,
+  hidden: false
+});
+
+const formBlock = (
+  children: Block[],
+  properties: Record<string, unknown> = {}
+): Block => ({
+  id: 'auth-form-1',
+  type: 'auth-form',
+  label: 'Auth Form',
+  properties,
+  styles: {},
+  order: 0,
+  hidden: false,
+  blocks: children
+});
+
+const renderForm = (
+  children: Block[],
+  properties: Record<string, unknown> = {}
+) =>
+  render(
+    <AuthFormBlock
+      block={formBlock(children, properties)}
+      placeholderId="placeholder-1"
+      sectionId="section-1"
+      currentBreakpoint="desktop"
+    />
+  );
+
+const composedFields = [
+  authField('field-email', 'email', 0),
+  authField('field-password', 'password', 1)
+];
+
+const submitForm = () => {
+  fireEvent.submit(document.querySelector('form') as HTMLFormElement);
+};
+
+describe('composed auth form validation', () => {
+  beforeEach(() => {
+    signIn.mockClear();
+  });
+
+  it('turns the native bubble off', () => {
+    renderForm(composedFields);
+
+    expect((document.querySelector('form') as HTMLFormElement).noValidate).toBe(
+      true
+    );
+  });
+
+  it('fills the block wrapper it sits in', () => {
+    renderForm(composedFields);
+
+    // The wrapper is a flex row and this form is its single item, so without
+    // the class the whole form shrink-wraps to its longest line of text.
+    expect(
+      (document.querySelector('form') as HTMLFormElement).classList
+    ).toContain('w-full');
+  });
+
+  it('draws its own message under every empty required field', () => {
+    renderForm(composedFields);
+
+    submitForm();
+
+    expect(screen.getAllByText('This field is required.')).toHaveLength(2);
+    expect(signIn).not.toHaveBeenCalled();
+  });
+
+  it('marks the offending input and focuses the first of them', () => {
+    renderForm(composedFields);
+
+    submitForm();
+
+    const email = document.querySelector(
+      'input[name="email"]'
+    ) as HTMLInputElement;
+
+    expect(email.getAttribute('aria-invalid')).toBe('true');
+    expect(document.activeElement).toBe(email);
+  });
+
+  it('takes the brand copy from the block', () => {
+    renderForm(composedFields, { requiredMessage: 'Bu alan gereklidir.' });
+
+    submitForm();
+
+    expect(screen.getAllByText('Bu alan gereklidir.')).toHaveLength(2);
+  });
+
+  it('separates a wrong value from a missing one', () => {
+    renderForm(composedFields, {
+      requiredMessage: 'Required.',
+      invalidMessage: 'Enter a valid e-mail.'
+    });
+
+    fireEvent.change(document.querySelector('input[name="email"]')!, {
+      target: { value: 'not-an-email' }
+    });
+    submitForm();
+
+    expect(screen.getByText('Enter a valid e-mail.')).toBeTruthy();
+    // The password is still empty, and still says so.
+    expect(screen.getByText('Required.')).toBeTruthy();
+  });
+
+  it('drops a field message as soon as that field is edited', () => {
+    renderForm(composedFields);
+
+    submitForm();
+    expect(screen.getAllByText('This field is required.')).toHaveLength(2);
+
+    // `input`, not `change`: this is what a keystroke raises.
+    fireEvent.input(document.querySelector('input[name="email"]')!, {
+      target: { value: 'shopper@example.com' }
+    });
+
+    // The password's message stays: it is still empty.
+    expect(screen.getAllByText('This field is required.')).toHaveLength(1);
+  });
+
+  it('leaves a field the designer made optional alone', () => {
+    renderForm([
+      authField('field-email', 'email', 0),
+      authField('field-phone', 'phone', 1, { required: false })
+    ]);
+
+    submitForm();
+
+    expect(screen.getAllByText('This field is required.')).toHaveLength(1);
+  });
+
+  it('submits once every field is filled in', () => {
+    renderForm(composedFields);
+
+    fireEvent.change(document.querySelector('input[name="email"]')!, {
+      target: { value: 'shopper@example.com' }
+    });
+    fireEvent.change(document.querySelector('input[name="password"]')!, {
+      target: { value: 'hunter2' }
+    });
+    submitForm();
+
+    expect(signIn).toHaveBeenCalledTimes(1);
+    expect(screen.queryByText('This field is required.')).toBeNull();
+  });
+});
+
+describe('fixed-layout auth form validation', () => {
+  beforeEach(() => {
+    signIn.mockClear();
+  });
+
+  it('draws the message under its own fields too', () => {
+    renderForm([], { requiredMessage: 'Bu alan gereklidir.' });
+
+    submitForm();
+
+    // The uncomposed form draws e-mail and password itself.
+    expect(screen.getAllByText('Bu alan gereklidir.')).toHaveLength(2);
+    expect(signIn).not.toHaveBeenCalled();
+  });
+});