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

package/src/__tests__/detached-submit-state.test.tsx

@@ -59,6 +59,8 @@ jest.mock('@akinon/next/data/client/user', () => {
 });
 
 jest.mock('next/navigation', () => ({
+  usePathname: () => '/',
+  useSearchParams: () => new URLSearchParams(),
   useRouter: () => ({ push: jest.fn(), refresh: jest.fn(), replace: jest.fn() })
 }));
 
@@ -72,10 +74,15 @@ const blockOf = (type: string, properties: Record<string, unknown>): Block => ({
   hidden: false
 });
 
-const renderCta = (submitFormId: string) =>
+const renderCta = (properties: string | Record<string, unknown>) =>
   render(
     <ButtonBlock
-      block={blockOf('button', { text: 'Continue', submitFormId })}
+      block={blockOf(
+        'button',
+        typeof properties === 'string'
+          ? { text: 'Continue', submitFormId: properties }
+          : { text: 'Continue', ...properties }
+      )}
       placeholderId="placeholder-1"
       sectionId="section-1"
       currentBreakpoint="desktop"
@@ -214,3 +221,74 @@ describe('a detached submit CTA', () => {
     expect(forgotPassword).not.toHaveBeenCalled();
   });
 });
+
+/**
+ * What the shopper SEES while the request is in flight.
+ *
+ * `disabled` alone changed nothing visible: a Button carries an authored
+ * background and colour, and those override what a browser paints on a
+ * disabled button — so a drawer's bottom-bar CTA stayed bright and
+ * clickable-looking for the whole POST, which is what makes someone press it
+ * twice. The state now travels as part state (so a designer can dress it) and
+ * carries a default dimming (so it reads as busy with nothing authored).
+ */
+describe('a detached CTA while its form is working', () => {
+  it('says so in its part state and dims itself', () => {
+    const { container } = renderCta({ submitFormId: 'login-form' });
+
+    const button = container.querySelector('button') as HTMLButtonElement;
+
+    expect(button.getAttribute('data-state')).toBeNull();
+
+    act(() => {
+      publishFormSubmitState('login-form', true);
+    });
+
+    expect(button.getAttribute('data-state')).toContain('loading');
+    expect(button.getAttribute('data-state')).toContain('disabled');
+    expect(button.style.opacity).toBe('0.7');
+    expect(button.style.cursor).toBe('not-allowed');
+    expect(button).toBeDisabled();
+
+    act(() => {
+      publishFormSubmitState('login-form', false);
+    });
+
+    expect(button.getAttribute('data-state')).toBeNull();
+    expect(button.style.opacity).not.toBe('0.7');
+  });
+
+  it('swaps its caption only when the designer authored one', () => {
+    const { container } = renderCta({
+      submitFormId: 'login-form',
+      text: 'Devam Et',
+      busyText: 'Gönderiliyor…'
+    });
+
+    act(() => {
+      publishFormSubmitState('login-form', true);
+    });
+
+    expect(container.textContent).toContain('Gönderiliyor…');
+
+    act(() => {
+      publishFormSubmitState('login-form', false);
+    });
+
+    expect(container.textContent).toContain('Devam Et');
+  });
+
+  it('keeps the caption put when no busy text was authored', () => {
+    const { container } = renderCta({
+      submitFormId: 'login-form',
+      text: 'Devam Et'
+    });
+
+    act(() => {
+      publishFormSubmitState('login-form', true);
+    });
+
+    // Absence-preserving, exactly like the forms' own `busyLabel`.
+    expect(container.textContent).toContain('Devam Et');
+  });
+});

package/src/__tests__/forgot-password-composed.test.tsx

@@ -67,6 +67,8 @@ jest.mock('@akinon/next/data/client/user', () => {
 });
 
 jest.mock('next/navigation', () => ({
+  usePathname: () => '/',
+  useSearchParams: () => new URLSearchParams(),
   useRouter: () => ({ push: jest.fn(), refresh: jest.fn(), replace: jest.fn() })
 }));
 

package/src/__tests__/form-state-composition.test.tsx

@@ -0,0 +1,484 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import React from 'react';
+
+import AuthFormBlock from '../blocks/auth-form-block';
+import ForgotPasswordBlock from '../blocks/forgot-password-block';
+import ResetPasswordBlock from '../blocks/reset-password-block';
+import {
+  containsFormStateBlock,
+  matchesFormState
+} from '../auth/form-state-context';
+import { __resetAuthFlowBusForTests } from '../auth/auth-flow-bus';
+import { Block } from '../theme-block';
+
+/**
+ * A form's OTHER screens, composed the way its normal one already was.
+ *
+ * The fields, the message and the CTA had been blocks for a while. Every other
+ * state was still the form's own markup with one authored string in it: one
+ * sentence for the confirmation, one for a dead link, one for "checking", and
+ * a busy moment nobody could dress at all. So a brand could build its login
+ * screen and could not build the screen it turns into — which is what the
+ * complaint "I want to build these screens one by one, from the success
+ * message to the error; the success message should be a text if I want and a
+ * component if I want" is about.
+ *
+ * A Form State container is that: a named column the form draws when it is on
+ * that screen, holding whatever the designer puts in it.
+ */
+
+let forgotState = { isLoading: false, isSuccess: false };
+const forgotPassword = jest.fn(() => ({ unwrap: () => Promise.resolve({}) }));
+
+const passwordReset = jest.fn();
+const unwrap = jest.fn();
+let resetState = { isLoading: false, isSuccess: false };
+let validation: {
+  data?: { validlink: boolean };
+  isLoading: boolean;
+  isError: boolean;
+} = { data: { validlink: true }, isLoading: false, isError: false };
+
+/** One mock for both forms; see the note in auth-form-success-block.test.tsx. */
+jest.mock('@akinon/next/data/client/user', () => {
+  const handler = {
+    get(_target: unknown, prop: string) {
+      if (prop === '__esModule') return true;
+      if (typeof prop !== 'string') return undefined;
+      if (prop === 'useForgotPasswordMutation') {
+        return () => [forgotPassword, forgotState];
+      }
+      if (prop === 'usePasswordResetMutation') {
+        return () => [
+          (...args: unknown[]) => {
+            passwordReset(...args);
+
+            return { unwrap };
+          },
+          resetState
+        ];
+      }
+      if (prop === 'useGetValidatePasswordResetTokenQuery') {
+        return () => validation;
+      }
+      if (prop.endsWith('Mutation')) {
+        return () => [
+          jest.fn(() => ({ unwrap: () => Promise.resolve({}) })),
+          { isLoading: false, isSuccess: false, isError: false }
+        ];
+      }
+      if (prop.endsWith('Query')) {
+        return () => ({
+          data: undefined,
+          isLoading: false,
+          isSuccess: true,
+          refetch: jest.fn()
+        });
+      }
+      return () => undefined;
+    }
+  };
+
+  return new Proxy({}, handler);
+});
+
+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', () => ({
+  useParams: () => ({ id: ['tok', 'abc123'] }),
+  usePathname: () => '/users/reset/tok/abc123',
+  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 text = (id: string, value: string, order = 0) =>
+  block({ id, type: 'text', label: 'Text', value, order });
+
+/** A screen the designer composed: a container plus whatever is inside it. */
+const stateBox = (
+  formState: string,
+  children: Block[],
+  order = 0,
+  overrides: Partial<Block> = {}
+) =>
+  block({
+    id: `box-${formState}`,
+    type: 'form-state',
+    label: 'Form State',
+    properties: { formState },
+    blocks: children,
+    order,
+    ...overrides
+  });
+
+const emailField = block({
+  id: 'field-email',
+  type: 'auth-field',
+  label: 'E-mail Field',
+  properties: { fieldType: 'email', label: 'E-mail' },
+  order: 0
+});
+
+const renderForgot = (
+  children: Block[],
+  properties: Record<string, unknown> = {},
+  options: { isDesigner?: boolean; selectedBlockId?: string } = {}
+) =>
+  render(
+    <ForgotPasswordBlock
+      block={
+        block({
+          id: 'forgot-1',
+          type: 'forgot-password',
+          label: 'Forgot Password',
+          properties: { showSubmit: false, ...properties },
+          blocks: children
+        }) as Block
+      }
+      placeholderId="placeholder-1"
+      sectionId="section-1"
+      currentBreakpoint="desktop"
+      isDesigner={options.isDesigner ?? false}
+      selectedBlockId={options.selectedBlockId}
+    />
+  );
+
+const renderReset = (
+  children: Block[],
+  properties: Record<string, unknown> = {}
+) =>
+  render(
+    <ResetPasswordBlock
+      block={
+        block({
+          id: 'reset-1',
+          type: 'reset-password',
+          label: 'Reset Password',
+          properties: { showSubmit: false, ...properties },
+          blocks: children
+        }) as Block
+      }
+      placeholderId="placeholder-1"
+      sectionId="section-1"
+      currentBreakpoint="desktop"
+    />
+  );
+
+beforeEach(() => {
+  __resetAuthFlowBusForTests();
+  forgotState = { isLoading: false, isSuccess: false };
+  resetState = { isLoading: false, isSuccess: false };
+  validation = { data: { validlink: true }, isLoading: false, isError: false };
+  forgotPassword.mockClear();
+  forgotPassword.mockImplementation(() => ({
+    unwrap: () => Promise.resolve({})
+  }));
+  passwordReset.mockClear();
+  unwrap.mockReset();
+  unwrap.mockResolvedValue(undefined);
+  signIn.mockClear();
+  signIn.mockImplementation(() => Promise.resolve({ error: null, url: '/' }));
+});
+
+describe('which screen a container belongs to', () => {
+  const filling = { screen: 'form' as const, busy: false, hasError: false };
+
+  it('keeps the form on screen while it is busy and while it was refused', () => {
+    // The rule the whole shape exists for: a single exclusive state would take
+    // the fields away the moment commerce answered with a message.
+    expect(matchesFormState('form', { ...filling, busy: true })).toBe(true);
+    expect(matchesFormState('form', { ...filling, hasError: true })).toBe(true);
+  });
+
+  it('shows the busy and refused screens only when they are true', () => {
+    expect(matchesFormState('busy', filling)).toBe(false);
+    expect(matchesFormState('busy', { ...filling, busy: true })).toBe(true);
+    expect(matchesFormState('error', filling)).toBe(false);
+    expect(matchesFormState('error', { ...filling, hasError: true })).toBe(
+      true
+    );
+  });
+
+  it('does not carry them onto a finished form', () => {
+    const done = { screen: 'success' as const, busy: true, hasError: true };
+
+    // "Busy" and "refused" happen WHILE filling. On the confirmation they are
+    // leftovers, and a spinner over a success screen is a bug.
+    expect(matchesFormState('busy', done)).toBe(false);
+    expect(matchesFormState('error', done)).toBe(false);
+    expect(matchesFormState('form', done)).toBe(false);
+    expect(matchesFormState('success', done)).toBe(true);
+  });
+
+  it('treats the four screens as exclusive', () => {
+    const expired = { screen: 'expired' as const, busy: false, hasError: false };
+
+    expect(matchesFormState('expired', expired)).toBe(true);
+    expect(matchesFormState('success', expired)).toBe(false);
+    expect(matchesFormState('checking', expired)).toBe(false);
+  });
+
+  it('draws nothing for a state it does not recognise', () => {
+    // A container written by a newer editor was scoped deliberately; drawing it
+    // on every screen would be worse than drawing it nowhere.
+    expect(matchesFormState('whenever', filling)).toBe(false);
+  });
+});
+
+describe('finding a composed screen', () => {
+  it('finds one at any depth, and only for the state asked about', () => {
+    const children = [
+      block({
+        id: 'group',
+        type: 'group',
+        blocks: [stateBox('success', [text('t', 'Done')])]
+      })
+    ];
+
+    expect(containsFormStateBlock(children, 'success')).toBe(true);
+    expect(containsFormStateBlock(children, 'expired')).toBe(false);
+  });
+
+  it('ignores a hidden container, which draws nothing wherever it sits', () => {
+    const children = [
+      stateBox('success', [text('t', 'Done')], 0, { hidden: true })
+    ];
+
+    // Standing the built-in confirmation down for a container that draws
+    // nothing would leave the shopper with no answer at all.
+    expect(containsFormStateBlock(children, 'success')).toBe(false);
+  });
+});
+
+describe('a password-reset request whose screens are composed', () => {
+  const composition = [
+    stateBox('form', [emailField], 0),
+    stateBox('success', [text('done', 'Kutunuzu kontrol edin.')], 1)
+  ];
+
+  it('shows the form screen and nothing else before anything happens', () => {
+    const { container } = renderForgot(composition);
+
+    expect(container.querySelector('input[name="email"]')).not.toBeNull();
+    expect(screen.queryByText('Kutunuzu kontrol edin.')).toBeNull();
+  });
+
+  it('swaps to the composed confirmation, fields and all', () => {
+    forgotState = { isLoading: false, isSuccess: true };
+
+    const { container } = renderForgot(composition, {
+      successLabel: 'Bir bağlantı yolda.'
+    });
+
+    // The composition's own screen — a Text block here, but it could as well be
+    // an icon, a heading and a Button, which is the whole point.
+    expect(screen.getByText('Kutunuzu kontrol edin.')).toBeInTheDocument();
+    // The fields went with the screen they were scoped to.
+    expect(container.querySelector('input[name="email"]')).toBeNull();
+    // And the form's own sentence is not drawn on top of it.
+    expect(screen.queryByText('Bir bağlantı yolda.')).toBeNull();
+  });
+
+  it('drops the built-in submit, which would be an orphan there', () => {
+    forgotState = { isLoading: false, isSuccess: true };
+
+    const { container } = renderForgot(composition, { showSubmit: true });
+
+    expect(
+      container.querySelector('[data-forgot-password-submit]')
+    ).toBeNull();
+  });
+
+  it('keeps the fields when a refusal comes back', async () => {
+    forgotPassword.mockImplementation(() => ({
+      unwrap: () =>
+        Promise.reject({ data: { non_field_errors: ['Bilinmeyen adres.'] } })
+    }));
+
+    const { container } = renderForgot([
+      ...composition,
+      stateBox('error', [text('oops', 'Bir şeyler ters gitti.')], 2)
+    ]);
+
+    fireEvent.change(container.querySelector('input[name="email"]')!, {
+      target: { value: 'ada@example.com' }
+    });
+    fireEvent.submit(container.querySelector('form')!);
+
+    await waitFor(() =>
+      expect(screen.getByText('Bir şeyler ters gitti.')).toBeInTheDocument()
+    );
+    // The one thing a refusal must never do: take away what has to be corrected.
+    expect(container.querySelector('input[name="email"]')).not.toBeNull();
+  });
+
+  it('shows the busy screen while the request is in flight', () => {
+    forgotState = { isLoading: true, isSuccess: false };
+
+    renderForgot([
+      ...composition,
+      stateBox('busy', [text('wait', 'Gönderiliyor…')], 2)
+    ]);
+
+    expect(screen.getByText('Gönderiliyor…')).toBeInTheDocument();
+  });
+
+  it('draws a child that is not a container on every screen', () => {
+    forgotState = { isLoading: false, isSuccess: true };
+
+    renderForgot([...composition, text('logo', 'GANT', 2)]);
+
+    // Shared chrome: a logo, a title, a support line — the same rule the OTP
+    // form applies to a child that is not a phase.
+    expect(screen.getByText('GANT')).toBeInTheDocument();
+    expect(screen.getByText('Kutunuzu kontrol edin.')).toBeInTheDocument();
+  });
+
+  it('shows a screen being edited in the canvas, previewed or not', () => {
+    renderForgot(composition, {}, {
+      isDesigner: true,
+      selectedBlockId: 'done'
+    });
+
+    // The form is in its normal state, but the designer is inside the success
+    // screen — so it is drawn, or it could not be dressed at all.
+    expect(screen.getByText('Kutunuzu kontrol edin.')).toBeInTheDocument();
+  });
+});
+
+describe('the screen the reset mail lands on', () => {
+  const passwordBox = block({
+    id: 'field-password',
+    type: 'auth-field',
+    label: 'Password',
+    properties: { fieldType: 'password', label: 'New password' },
+    order: 0
+  });
+
+  it('composes the dead-link screen instead of the built-in sentence', () => {
+    validation = {
+      data: { validlink: false },
+      isLoading: false,
+      isError: false
+    };
+
+    const { container } = renderReset(
+      [
+        stateBox('form', [passwordBox], 0),
+        stateBox('expired', [text('dead', 'Bağlantının süresi geçmiş.')], 1)
+      ],
+      { expiredLabel: 'This link has expired.' }
+    );
+
+    expect(screen.getByText('Bağlantının süresi geçmiş.')).toBeInTheDocument();
+    expect(screen.queryByText('This link has expired.')).toBeNull();
+    // Nothing to submit on a dead link.
+    expect(container.querySelector('input[name="password"]')).toBeNull();
+    expect(container.querySelector('[data-reset-password-submit]')).toBeNull();
+  });
+
+  it('composes the checking screen too', () => {
+    validation = { data: undefined, isLoading: true, isError: false };
+
+    renderReset([
+      stateBox('form', [passwordBox], 0),
+      stateBox('checking', [text('wait', 'Bağlantı kontrol ediliyor…')], 1)
+    ]);
+
+    expect(
+      screen.getByText('Bağlantı kontrol ediliyor…')
+    ).toBeInTheDocument();
+  });
+
+  it('still falls back to the built-in screens where none was composed', () => {
+    validation = {
+      data: { validlink: false },
+      isLoading: false,
+      isError: false
+    };
+
+    renderReset([stateBox('form', [passwordBox], 0)], {
+      expiredLabel: 'This link has expired.'
+    });
+
+    // The fence: a composition that scoped only its form keeps every screen it
+    // had before.
+    expect(screen.getByText('This link has expired.')).toBeInTheDocument();
+  });
+});
+
+describe('a login form, which has no confirmation to compose', () => {
+  it('scopes the refusal without taking the fields away', async () => {
+    signIn.mockImplementation(() =>
+      Promise.resolve({
+        error: 'CredentialsSignin',
+        code: JSON.stringify([
+          { type: 'non_field_errors', data: ['E-posta veya şifre hatalı.'] }
+        ])
+      })
+    );
+
+    const { container } = render(
+      <AuthFormBlock
+        block={
+          block({
+            id: 'login-1',
+            type: 'auth-form',
+            label: 'Auth Form',
+            properties: { showSubmit: true },
+            blocks: [
+              stateBox(
+                'form',
+                [
+                  emailField,
+                  block({
+                    id: 'field-password',
+                    type: 'auth-field',
+                    properties: { fieldType: 'password', label: 'Password' },
+                    order: 1
+                  })
+                ],
+                0
+              ),
+              stateBox('error', [text('box', 'Tekrar deneyin.')], 1)
+            ]
+          }) as Block
+        }
+        placeholderId="placeholder-1"
+        sectionId="section-1"
+        currentBreakpoint="desktop"
+      />
+    );
+
+    fireEvent.change(container.querySelector('input[name="email"]')!, {
+      target: { value: 'ada@example.com' }
+    });
+    fireEvent.change(container.querySelector('input[name="password"]')!, {
+      target: { value: 'hunter2' }
+    });
+    fireEvent.submit(container.querySelector('form')!);
+
+    await waitFor(() =>
+      expect(screen.getByText('Tekrar deneyin.')).toBeInTheDocument()
+    );
+    expect(container.querySelector('input[name="email"]')).not.toBeNull();
+  });
+});