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

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

@@ -1,484 +0,0 @@
-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();
-  });
-});