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

package/src/__tests__/auth-step-title.test.tsx

@@ -0,0 +1,202 @@
+import { act, render, screen } from '@testing-library/react';
+import React from 'react';
+
+import AuthFlowBlock from '../blocks/auth-flow-block';
+import AuthStepTitleBlock from '../blocks/auth-step-title-block';
+import { __resetAuthFlowBusForTests, setAuthStep } from '../auth/auth-flow-bus';
+import { Block } from '../theme-block';
+
+/**
+ * One title row for a flow of several steps.
+ *
+ * A drawer that walks a shopper through steps has ONE close button and ONE
+ * title row: the row is a SIBLING of the steps, so it renders once and cannot
+ * see which step is up. Authoring the title inside each step gives no such row,
+ * and repeating the close button per step is not a shared button. So the step
+ * carries its title, the flow — the thing that decided — publishes it, and this
+ * block renders it wherever the design puts the row.
+ */
+
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({ push: jest.fn(), refresh: jest.fn() })
+}));
+
+const block = (overrides: Partial<Block>): Block =>
+  ({
+    id: 'blk',
+    type: 'text',
+    label: 'Block',
+    value: '',
+    order: 0,
+    hidden: false,
+    properties: {},
+    styles: {},
+    blocks: [],
+    ...overrides
+  }) as Block;
+
+const step = (key: string, title: string, children: Block[] = []): Block =>
+  block({
+    id: `step-${key}`,
+    type: 'auth-step',
+    label: key,
+    properties: { stepKey: key, title },
+    blocks: children.length
+      ? children
+      : [block({ id: `${key}-body`, type: 'text', value: `${key} body` })]
+  });
+
+const titleRow = block({
+  id: 'title-row',
+  type: 'auth-step-title',
+  properties: { tag: 'h2' }
+});
+
+const renderFlow = (
+  children: Block[],
+  properties: Record<string, unknown> = {}
+) =>
+  render(
+    <AuthFlowBlock
+      block={block({
+        id: 'flow',
+        type: 'auth-flow',
+        properties: { flowId: 'auth', initialStep: 'phone', ...properties },
+        blocks: children
+      })}
+      placeholderId="placeholder-1"
+      sectionId="section-1"
+      currentBreakpoint="desktop"
+    />
+  );
+
+beforeEach(() => {
+  __resetAuthFlowBusForTests();
+});
+
+describe('the shared title row', () => {
+  it('names the step the flow is showing', () => {
+    renderFlow([
+      titleRow,
+      step('phone', 'ÜYE OLUN VEYA GİRİŞ YAPIN'),
+      step('join', 'MYGANT')
+    ]);
+
+    expect(screen.getByText('ÜYE OLUN VEYA GİRİŞ YAPIN')).toBeInTheDocument();
+    // Only the active step's title: the row is one element, not one per step.
+    expect(screen.queryByText('MYGANT')).not.toBeInTheDocument();
+  });
+
+  it('follows the flow to the next step', () => {
+    renderFlow([
+      titleRow,
+      step('phone', 'ÜYE OLUN VEYA GİRİŞ YAPIN'),
+      step('join', 'MYGANT')
+    ]);
+
+    // Module state, so the re-render it triggers has to be inside act().
+    act(() => {
+      setAuthStep('auth', 'join');
+    });
+
+    expect(screen.getByText('MYGANT')).toBeInTheDocument();
+    expect(
+      screen.queryByText('ÜYE OLUN VEYA GİRİŞ YAPIN')
+    ).not.toBeInTheDocument();
+  });
+
+  it('renders once however many steps the flow has', () => {
+    renderFlow([
+      titleRow,
+      step('phone', 'Phone'),
+      step('join', 'Join'),
+      step('code', 'Code')
+    ]);
+
+    expect(document.querySelectorAll('[data-auth-step-title]')).toHaveLength(1);
+  });
+
+  it('is a heading by default, for a shopper navigating by them', () => {
+    renderFlow([titleRow, step('phone', 'Phone step')]);
+
+    expect(screen.getByRole('heading', { level: 2 })).toHaveTextContent(
+      'Phone step'
+    );
+  });
+
+  it('honours the tag a design asks for', () => {
+    renderFlow([
+      block({
+        id: 'title-row',
+        type: 'auth-step-title',
+        properties: { tag: 'p' }
+      }),
+      step('phone', 'Phone step')
+    ]);
+
+    expect(document.querySelector('p[data-auth-step-title]')).not.toBeNull();
+    expect(screen.queryByRole('heading')).toBeNull();
+  });
+
+  it('refuses a tag that is not one, rather than emitting it', () => {
+    renderFlow([
+      block({
+        id: 'title-row',
+        type: 'auth-step-title',
+        properties: { tag: 'script' }
+      }),
+      step('phone', 'Phone step')
+    ]);
+
+    expect(document.querySelector('script')).toBeNull();
+    expect(screen.getByRole('heading', { level: 2 })).toBeInTheDocument();
+  });
+
+  it('falls back to its own copy where a step carries no title', () => {
+    renderFlow([
+      block({
+        id: 'title-row',
+        type: 'auth-step-title',
+        properties: { fallbackTitle: 'Log in' }
+      }),
+      step('phone', '')
+    ]);
+
+    expect(screen.getByText('Log in')).toBeInTheDocument();
+  });
+
+  it('draws nothing at all for a shopper when there is no title', () => {
+    renderFlow([titleRow, step('phone', '')]);
+
+    // An empty heading is worse than no heading: a screen reader announces it.
+    expect(document.querySelector('[data-auth-step-title]')).toBeNull();
+  });
+
+  it('draws nothing outside a flow either', () => {
+    render(
+      <AuthStepTitleBlock
+        block={titleRow}
+        placeholderId="placeholder-1"
+        sectionId="section-1"
+        currentBreakpoint="desktop"
+      />
+    );
+
+    expect(document.querySelector('[data-auth-step-title]')).toBeNull();
+  });
+
+  it('says what it is waiting for on the canvas', () => {
+    const { container } = render(
+      <AuthStepTitleBlock
+        block={titleRow}
+        placeholderId="placeholder-1"
+        sectionId="section-1"
+        currentBreakpoint="desktop"
+        isDesigner
+      />
+    );
+
+    // Dropping a block that renders nothing looks like nothing happened.
+    expect(container.textContent).toContain('Auth Flow');
+  });
+});

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

@@ -0,0 +1,216 @@
+import { act, fireEvent, render, screen } from '@testing-library/react';
+import React from 'react';
+
+import ButtonBlock from '../blocks/button-block';
+import ForgotPasswordBlock from '../blocks/forgot-password-block';
+import {
+  __resetFormSubmitBusForTests,
+  isFormSubmitting,
+  publishFormSubmitState
+} from '../auth/form-submit-bus';
+import { Block } from '../theme-block';
+
+/**
+ * The bottom-bar CTA: a Button that submits a form living somewhere else on the
+ * page, through the native `form` attribute.
+ *
+ * Its own submit button knows when to grey itself out — the state is right
+ * there. A detached CTA is outside that form, often outside its React root, so
+ * it stayed bright and clickable for the whole request. Pressing it again did
+ * nothing (every submit handler guards), and "nothing" is what reads as broken.
+ */
+
+let mutationState = { isLoading: false, isSuccess: false };
+const forgotPassword = jest.fn(() => ({ unwrap: () => Promise.resolve({}) }));
+
+/**
+ * Every `@akinon/next/data/client/*` path resolves to ONE mock module, so
+ * replacing the user path replaces it for the button block's own hook too.
+ * The factory therefore keeps the shared proxy's behaviour and only pins the
+ * one hook these tests drive.
+ */
+jest.mock('@akinon/next/data/client/user', () => {
+  const queryResult = () => ({
+    data: undefined,
+    isLoading: false,
+    isSuccess: true,
+    refetch: jest.fn()
+  });
+  const mutationTuple = () => [
+    jest.fn(() => ({ unwrap: () => Promise.resolve({}) })),
+    { isLoading: false, isSuccess: false, reset: jest.fn() }
+  ];
+
+  return new Proxy(
+    {},
+    {
+      get(_target, prop) {
+        if (prop === '__esModule') return true;
+        if (typeof prop !== 'string') return undefined;
+        if (prop === 'useForgotPasswordMutation') {
+          return () => [forgotPassword, mutationState];
+        }
+        if (prop.endsWith('Mutation')) return () => mutationTuple();
+        if (prop.endsWith('Query')) return () => queryResult();
+        return () => undefined;
+      }
+    }
+  );
+});
+
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({ push: jest.fn(), refresh: jest.fn(), replace: jest.fn() })
+}));
+
+const blockOf = (type: string, properties: Record<string, unknown>): Block => ({
+  id: `${type}-1`,
+  type,
+  label: type,
+  properties,
+  styles: {},
+  order: 0,
+  hidden: false
+});
+
+const renderCta = (submitFormId: string) =>
+  render(
+    <ButtonBlock
+      block={blockOf('button', { text: 'Continue', submitFormId })}
+      placeholderId="placeholder-1"
+      sectionId="section-1"
+      currentBreakpoint="desktop"
+    />
+  );
+
+const cta = () => document.querySelector('button') as HTMLButtonElement;
+
+beforeEach(() => {
+  __resetFormSubmitBusForTests();
+  mutationState = { isLoading: false, isSuccess: false };
+  forgotPassword.mockClear();
+});
+
+describe('a detached submit CTA', () => {
+  it('submits the named form natively', () => {
+    renderCta('reset-form');
+
+    // The native `form` attribute is what lets it live outside the form.
+    expect(cta().getAttribute('form')).toBe('reset-form');
+    expect(cta().getAttribute('type')).toBe('submit');
+    expect(cta().disabled).toBe(false);
+  });
+
+  it('greys out while that form is working', () => {
+    renderCta('reset-form');
+
+    act(() => {
+      publishFormSubmitState('reset-form', true);
+    });
+
+    expect(cta().disabled).toBe(true);
+    expect(cta().getAttribute('aria-busy')).toBe('true');
+
+    act(() => {
+      publishFormSubmitState('reset-form', false);
+    });
+
+    expect(cta().disabled).toBe(false);
+  });
+
+  it('ignores a different form going busy', () => {
+    renderCta('reset-form');
+
+    act(() => {
+      publishFormSubmitState('login-form', true);
+    });
+
+    expect(cta().disabled).toBe(false);
+  });
+
+  it('is published by the form that owns the id', () => {
+    mutationState = { isLoading: true, isSuccess: false };
+
+    render(
+      <ForgotPasswordBlock
+        block={blockOf('forgot-password', { formHtmlId: 'reset-form' })}
+        placeholderId="placeholder-1"
+        sectionId="section-1"
+        currentBreakpoint="desktop"
+      />
+    );
+
+    expect(isFormSubmitting('reset-form')).toBe(true);
+  });
+
+  it('stops claiming to be busy once the form leaves the page', () => {
+    mutationState = { isLoading: true, isSuccess: false };
+
+    const view = render(
+      <ForgotPasswordBlock
+        block={blockOf('forgot-password', { formHtmlId: 'reset-form' })}
+        placeholderId="placeholder-1"
+        sectionId="section-1"
+        currentBreakpoint="desktop"
+      />
+    );
+
+    expect(isFormSubmitting('reset-form')).toBe(true);
+
+    view.unmount();
+
+    // A closed drawer must not leave every CTA on the page disabled.
+    expect(isFormSubmitting('reset-form')).toBe(false);
+  });
+
+  it('leaves an ordinary button alone', () => {
+    render(
+      <ButtonBlock
+        block={blockOf('button', { text: 'Shop', tag: 'button' })}
+        placeholderId="placeholder-1"
+        sectionId="section-1"
+        currentBreakpoint="desktop"
+      />
+    );
+
+    act(() => {
+      publishFormSubmitState('reset-form', true);
+    });
+
+    expect(cta().disabled).toBe(false);
+  });
+
+  it('does not fire the form twice when the CTA is pressed again', () => {
+    mutationState = { isLoading: true, isSuccess: false };
+
+    render(
+      <>
+        <ForgotPasswordBlock
+          block={blockOf('forgot-password', {
+            formHtmlId: 'reset-form',
+            showSubmit: false
+          })}
+          placeholderId="placeholder-1"
+          sectionId="section-1"
+          currentBreakpoint="desktop"
+        />
+        <ButtonBlock
+          block={blockOf('button', {
+            text: 'Continue',
+            submitFormId: 'reset-form'
+          })}
+          placeholderId="placeholder-1"
+          sectionId="section-1"
+          currentBreakpoint="desktop"
+        />
+      </>
+    );
+
+    const button = screen.getByText('Continue').closest('button');
+
+    expect(button?.disabled).toBe(true);
+
+    fireEvent.click(button as HTMLButtonElement);
+
+    expect(forgotPassword).not.toHaveBeenCalled();
+  });
+});