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

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

@@ -0,0 +1,313 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import React from 'react';
+
+import ForgotPasswordBlock from '../blocks/forgot-password-block';
+import {
+  __resetAuthFlowBusForTests,
+  AuthFlowIdContext,
+  getAuthFlowState
+} from '../auth/auth-flow-bus';
+import { Block } from '../theme-block';
+
+/**
+ * The password reset, element by element.
+ *
+ * Its pieces used to be style PARTS — a brand could recolour the input but not
+ * put a sentence above it explaining what the mail does, move the message out
+ * from under the button, or replace the CTA with the drawer's pinned one. Now
+ * they are blocks, the way a login form's fields already were: an `auth-field`
+ * for the address, a Form Error block for the message, an ordinary Button for
+ * the submit.
+ *
+ * What must NOT change is what reaches commerce: a composed form and a fixed
+ * one request the reset for the same address. These pin that, the two states of
+ * the journey, and the refusal that keeps the canvas from mailing a real
+ * shopper.
+ */
+
+let mutationState = { isLoading: false, isSuccess: false };
+const forgotPassword = jest.fn(() => ({ unwrap: () => Promise.resolve({}) }));
+
+/**
+ * A catch-all, not just the one hook this block calls.
+ *
+ * `jest.config`'s moduleNameMapper collapses every `@akinon/next/data/client/*`
+ * onto ONE mock file, so replacing the module for `user` replaces it for `misc`
+ * too — and a composed form draws a child Button, which reaches for a
+ * subscription hook of its own. Overriding a single export leaves every other
+ * one undefined and the child crashes.
+ */
+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, mutationState];
+      }
+      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);
+});
+
+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);
+
+/** Exactly what `forgotPasswordDefaultChildren()` seeds in the editor. */
+const SEEDED: Block[] = [
+  block({
+    id: 'field-email',
+    type: 'auth-field',
+    label: 'E-mail Field',
+    properties: { fieldType: 'email', label: 'E-mail' },
+    order: 0
+  }),
+  block({
+    id: 'form-error',
+    type: 'auth-error',
+    label: 'Form Error',
+    order: 1
+  }),
+  block({
+    id: 'submit',
+    type: 'button',
+    label: 'Submit Button',
+    properties: {
+      text: 'Send reset link',
+      tag: 'button',
+      type: 'submit'
+    },
+    order: 2
+  })
+];
+
+const renderComposed = (
+  properties: Record<string, unknown> = {},
+  children: Block[] = SEEDED,
+  options: { isDesigner?: boolean } = {}
+) =>
+  render(
+    <AuthFlowIdContext.Provider value="auth">
+      <ForgotPasswordBlock
+        block={
+          block({
+            id: 'reset-1',
+            type: 'forgot-password',
+            label: 'Forgot Password',
+            // The seeded Button is the submit, so the built-in one is off —
+            // which is what the editor sets when it drops the form.
+            properties: { showSubmit: false, ...properties },
+            blocks: children
+          }) as Block
+        }
+        placeholderId="placeholder-1"
+        sectionId="section-1"
+        currentBreakpoint="desktop"
+        isDesigner={options.isDesigner ?? false}
+      />
+    </AuthFlowIdContext.Provider>
+  );
+
+const form = () => document.querySelector('form') as HTMLFormElement;
+const emailInput = () =>
+  document.querySelector('input[name="email"]') as HTMLInputElement;
+
+beforeEach(() => {
+  __resetAuthFlowBusForTests();
+  mutationState = { isLoading: false, isSuccess: false };
+  forgotPassword.mockClear();
+  forgotPassword.mockImplementation(() => ({
+    unwrap: () => Promise.resolve({})
+  }));
+});
+
+describe('a composed password reset', () => {
+  it('draws its children instead of its own row', () => {
+    const { container } = renderComposed();
+
+    expect(
+      container.querySelector('[data-forgot-password-composed]')
+    ).not.toBeNull();
+    // The child Button, not the block's built-in submit.
+    expect(container.querySelector('[data-forgot-password-submit]')).toBeNull();
+    expect(screen.getByText('Send reset link')).toBeTruthy();
+  });
+
+  it('requests the reset for the address a child field collected', async () => {
+    renderComposed();
+
+    fireEvent.change(emailInput(), { target: { value: 'ada@example.com' } });
+    fireEvent.submit(form());
+
+    await waitFor(() => expect(forgotPassword).toHaveBeenCalled());
+    // The same body the fixed row sends — the address is read off the form
+    // rather than from state no child writes to.
+    expect(forgotPassword).toHaveBeenCalledWith({ email: 'ada@example.com' });
+  });
+
+  it('trims the address rather than sending what a stray space typed', async () => {
+    renderComposed();
+
+    fireEvent.change(emailInput(), { target: { value: ' ada@example.com ' } });
+    fireEvent.submit(form());
+
+    await waitFor(() => expect(forgotPassword).toHaveBeenCalled());
+    expect(forgotPassword).toHaveBeenCalledWith({ email: 'ada@example.com' });
+  });
+
+  it('says which field is missing instead of raising a browser bubble', async () => {
+    renderComposed({ requiredMessage: 'Bu alan zorunludur.' });
+
+    fireEvent.submit(form());
+
+    await waitFor(() =>
+      expect(screen.getByText('Bu alan zorunludur.')).toBeTruthy()
+    );
+    expect(forgotPassword).not.toHaveBeenCalled();
+  });
+
+  it('never mails a real shopper from the canvas', () => {
+    renderComposed({}, SEEDED, { isDesigner: true });
+
+    fireEvent.change(emailInput(), { target: { value: 'ada@example.com' } });
+    fireEvent.submit(form());
+
+    expect(forgotPassword).not.toHaveBeenCalled();
+  });
+
+  it('still renders its fixed row for a composition that has no children', () => {
+    const { container } = renderComposed({ showSubmit: true }, []);
+
+    expect(
+      container.querySelector('[data-forgot-password-composed]')
+    ).toBeNull();
+    expect(
+      container.querySelector('[data-forgot-password-field="email"]')
+    ).not.toBeNull();
+    expect(
+      container.querySelector('[data-forgot-password-submit]')
+    ).not.toBeNull();
+  });
+});
+
+describe('where the reset form puts its message', () => {
+  const failing = () =>
+    forgotPassword.mockImplementation(() => ({
+      unwrap: () => Promise.reject(new Error('refused'))
+    }));
+
+  it('draws it in the Form Error block, and stands its own node down', async () => {
+    failing();
+    const { container } = renderComposed({ errorLabel: 'Gönderilemedi.' });
+
+    fireEvent.change(emailInput(), { target: { value: 'ada@example.com' } });
+    fireEvent.submit(form());
+
+    await waitFor(() =>
+      expect(container.querySelector('[data-auth-error]')).not.toBeNull()
+    );
+    expect(screen.getByText('Gönderilemedi.')).toBeTruthy();
+    // Exactly one message: the fallback node is what the block exists to
+    // replace, so it must not draw beside it.
+    expect(container.querySelector('[data-forgot-password-error]')).toBeNull();
+  });
+
+  it('falls back to its own node for a composition that placed none', async () => {
+    failing();
+    const { container } = renderComposed({ errorLabel: 'Gönderilemedi.' }, [
+      SEEDED[0],
+      SEEDED[2]
+    ]);
+
+    fireEvent.change(emailInput(), { target: { value: 'ada@example.com' } });
+    fireEvent.submit(form());
+
+    await waitFor(() =>
+      expect(
+        container.querySelector('[data-forgot-password-error]')
+      ).not.toBeNull()
+    );
+    expect(screen.getByText('Gönderilemedi.')).toBeTruthy();
+  });
+});
+
+describe('the state after the mail is away', () => {
+  it('moves the flow to the step the design authored for it', async () => {
+    renderComposed({ successStepTarget: 'sent' });
+
+    fireEvent.change(emailInput(), { target: { value: 'ada@example.com' } });
+    fireEvent.submit(form());
+
+    // A step is more than a message and a link could be: the brand's own copy,
+    // illustration and CTA, authored out of ordinary blocks.
+    await waitFor(() => expect(getAuthFlowState('auth')?.active).toBe('sent'));
+  });
+
+  it('names the flow outright when the target spells one', async () => {
+    renderComposed({ successStepTarget: 'drawer:sent' });
+
+    fireEvent.change(emailInput(), { target: { value: 'ada@example.com' } });
+    fireEvent.submit(form());
+
+    await waitFor(() =>
+      expect(getAuthFlowState('drawer')?.active).toBe('sent')
+    );
+  });
+
+  it('leaves the flow alone for a form that named no step', async () => {
+    renderComposed();
+
+    fireEvent.change(emailInput(), { target: { value: 'ada@example.com' } });
+    fireEvent.submit(form());
+
+    await waitFor(() => expect(forgotPassword).toHaveBeenCalled());
+    // Nothing was navigated: the block shows its own success copy instead,
+    // which is what every published reset form does.
+    expect(getAuthFlowState('auth')).toBeNull();
+  });
+
+  it('shows its own success copy once commerce has answered', () => {
+    mutationState = { isLoading: false, isSuccess: true };
+
+    const { container } = renderComposed({
+      successLabel: 'Posta yolda.'
+    });
+
+    expect(
+      container.querySelector('[data-forgot-password-state="success"]')
+    ).not.toBeNull();
+    expect(screen.getByText('Posta yolda.')).toBeTruthy();
+    // The form is gone, so the same address cannot be submitted twice.
+    expect(document.querySelector('form')).toBeNull();
+  });
+});