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

package/src/__tests__/modal-login-close.test.tsx

@@ -1,366 +0,0 @@
-import { act, fireEvent, render, waitFor } from '@testing-library/react';
-import React from 'react';
-
-import AuthFormBlock from '../blocks/auth-form-block';
-import NewsletterFormBlock from '../blocks/newsletter-form-block';
-import ThemeModalMount from '../overlays/theme-modal-mount';
-import { readThemeModals, ThemeModal } from '../overlays/modal-registry';
-import {
-  __resetOverlayBusForTests,
-  getOpenModalIds,
-  isModalOpen,
-  openModal,
-  registerModalHost
-} from '../overlays/overlay-bus';
-import { clearAutoOpenRecord } from '../overlays/modal-frequency';
-import { __resetModalPreviewForTests } from '../overlays/use-modal-preview';
-import { Block } from '../theme-block';
-
-/**
- * A shopper who signs in inside the drawer is done with the drawer.
- *
- * It used to stay open over the page, and the reason was a default in the
- * wrong place: the only close a form could perform was `closeAllModals()`
- * behind an authored toggle, and that toggle is off by default — correctly,
- * since "close every modal on the page" is not something a form on a plain
- * page should do unasked. The live GANT drawer shows how that ends: its OTP
- * form has the toggle on and its login and register forms do not, so signing
- * in with an e-mail left the drawer covering the homepage.
- *
- * With the host's id in hand the two defaults stop fighting: a form closes THE
- * MODAL IT IS IN, and a form that is not in one still closes nothing.
- */
-
-const signIn = jest.fn(() => Promise.resolve({ error: null, url: '/account' }));
-
-jest.mock('next-auth/react', () => ({
-  signIn: (...args: unknown[]) => signIn(...args),
-  useSession: () => ({ data: null, status: 'unauthenticated' })
-}));
-
-const push = jest.fn();
-const refresh = jest.fn();
-
-jest.mock('next/navigation', () => ({
-  useRouter: () => ({ push, refresh, replace: jest.fn() }),
-  useSearchParams: () => new URLSearchParams(),
-  usePathname: () => '/'
-}));
-
-jest.mock('@akinon/next/hooks/use-localization', () => ({
-  useLocalization: () => ({ locale: 'en', currency: 'USD' })
-}));
-
-const subscribe = jest.fn(() => ({ unwrap: () => Promise.resolve({}) }));
-
-jest.mock('@akinon/next/data/client/misc', () => ({
-  useEmailSubscriptionMutation: () => [subscribe, { isLoading: false }]
-}));
-
-const block = (overrides: Partial<Block>): Block =>
-  ({
-    id: 'blk',
-    type: 'text',
-    label: 'Block',
-    value: '',
-    order: 0,
-    hidden: false,
-    properties: {},
-    styles: {},
-    ...overrides
-  }) as Block;
-
-const loginForm = (properties: Record<string, unknown> = {}) => (
-  <AuthFormBlock
-    block={
-      block({
-        id: 'login-1',
-        type: 'auth-form',
-        label: 'Auth Form',
-        properties
-      }) as Block
-    }
-    placeholderId="placeholder-1"
-    sectionId="section-1"
-    currentBreakpoint="desktop"
-  />
-);
-
-const mkModal = (id: string): ThemeModal =>
-  readThemeModals([{ id, name: 'Auth', presentation: 'drawer' }])[0];
-
-/** The drawer, with the login form composed inside it — the GANT shape. */
-const openDrawerWithLogin = (
-  properties: Record<string, unknown> = {},
-  modalId = 'auth-drawer'
-) => {
-  const view = render(
-    <ThemeModalMount modal={mkModal(modalId)}>
-      {loginForm(properties)}
-    </ThemeModalMount>
-  );
-
-  act(() => {
-    openModal(modalId);
-  });
-
-  return view;
-};
-
-const submit = (container: HTMLElement) => {
-  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')!);
-};
-
-beforeEach(() => {
-  signIn.mockClear();
-  push.mockClear();
-  refresh.mockClear();
-  __resetOverlayBusForTests();
-  __resetModalPreviewForTests();
-  registerModalHost();
-  clearAutoOpenRecord('auth-drawer');
-  clearAutoOpenRecord('other');
-});
-
-describe('a login inside a drawer', () => {
-  it('closes the drawer it was in, with nothing authored', async () => {
-    const { container } = openDrawerWithLogin();
-
-    expect(isModalOpen('auth-drawer')).toBe(true);
-
-    submit(container);
-
-    await waitFor(() => expect(isModalOpen('auth-drawer')).toBe(false));
-    // And the surface is gone with it, not merely marked closed.
-    expect(document.querySelector('[data-theme-modal]')).toBeNull();
-  });
-
-  it('stays on the page instead of pushing the shopper to the homepage', async () => {
-    const { container } = openDrawerWithLogin();
-
-    submit(container);
-
-    await waitFor(() => expect(refresh).toHaveBeenCalled());
-    // A sign-in inside a drawer is a detour from the page the shopper is on,
-    // so `stay` is the default THERE — the refresh is the whole navigation.
-    expect(push).not.toHaveBeenCalled();
-  });
-
-  it('still obeys a composition that asked to be sent somewhere', async () => {
-    const { container } = openDrawerWithLogin({
-      afterSignIn: 'fixed',
-      callbackUrl: '/account'
-    });
-
-    submit(container);
-
-    await waitFor(() => expect(push).toHaveBeenCalledWith('/account'));
-    // Authored destination or not, the drawer it finished in still closes.
-    expect(isModalOpen('auth-drawer')).toBe(false);
-  });
-
-  it('leaves other modals alone unless asked to close everything', async () => {
-    const { container } = openDrawerWithLogin();
-
-    act(() => {
-      openModal('other');
-    });
-
-    submit(container);
-
-    await waitFor(() => expect(isModalOpen('auth-drawer')).toBe(false));
-    // Closing the surface a form finished in is never a surprise; closing an
-    // unrelated overlay would be.
-    expect(isModalOpen('other')).toBe(true);
-  });
-
-  it('closes every open modal when the composition authored that', async () => {
-    const { container } = openDrawerWithLogin({ closeModalsOnSuccess: true });
-
-    act(() => {
-      openModal('other');
-    });
-
-    submit(container);
-
-    // The wider meaning the toggle has always had, for a form nested two
-    // overlays deep.
-    await waitFor(() => expect(getOpenModalIds()).toHaveLength(0));
-  });
-});
-
-describe('a login on a plain page', () => {
-  it('closes nothing, and keeps its historical destination', async () => {
-    const { container } = render(loginForm());
-
-    act(() => {
-      openModal('other');
-    });
-
-    submit(container);
-
-    await waitFor(() => expect(push).toHaveBeenCalledWith('/'));
-    // No host to close, so a form on a page cannot reach an overlay it knows
-    // nothing about — which is why the toggle defaults to off.
-    expect(isModalOpen('other')).toBe(true);
-  });
-});
-
-/**
- * The destination, decided on the VALUE rather than on a default.
- *
- * A host-aware DEFAULT would have been dead on arrival: the editor writes every
- * select's default into the block it inserts, so `afterSignIn` arrives as
- * `'fixed'` on every newly authored form and a host-aware default would only
- * ever apply to compositions that predate the property. Reading the resolved
- * PATH instead survives that, and it keeps an authored destination working.
- */
-describe('where a drawer sign-in leaves the shopper', () => {
-  it('goes nowhere when the destination names nowhere in particular', async () => {
-    // `/` is the shipped default that every inserted form carries.
-    const { container } = openDrawerWithLogin({ callbackUrl: '/' });
-
-    submit(container);
-
-    await waitFor(() => expect(refresh).toHaveBeenCalled());
-    expect(push).not.toHaveBeenCalled();
-  });
-
-  it('still honours a destination the brand actually chose', async () => {
-    const { container } = openDrawerWithLogin({ callbackUrl: '/account' });
-
-    submit(container);
-
-    await waitFor(() => expect(push).toHaveBeenCalledWith('/account'));
-  });
-
-  it('keeps pushing on a plain page, where `/` is a real destination', async () => {
-    const { container } = render(loginForm({ callbackUrl: '/' }));
-
-    submit(container);
-
-    await waitFor(() => expect(push).toHaveBeenCalledWith('/'));
-  });
-});
-
-/**
- * The same rule, for everything else that finishes inside a modal.
- *
- * "Only login/register/OTP" was the wrong scope: a newsletter popup, a
- * quick-view's add-to-cart and a change-password form all finish inside a
- * modal too. What differs is not the mechanism but the SUCCESS STATE — a
- * sign-in leaves nothing to read, while "thanks for subscribing" is the point
- * — so every one of them carries the same switch and only the auth forms
- * default it on.
- */
-describe('any block that finishes inside a modal', () => {
-  const newsletterInDrawer = (properties: Record<string, unknown>) => {
-    const view = render(
-      <ThemeModalMount modal={mkModal('newsletter-modal')}>
-        <NewsletterFormBlock
-          block={
-            block({
-              id: 'news-1',
-              type: 'newsletter-form',
-              label: 'Newsletter',
-              properties
-            }) as Block
-          }
-          placeholderId="placeholder-1"
-          sectionId="section-1"
-          currentBreakpoint="desktop"
-        />
-      </ThemeModalMount>
-    );
-
-    act(() => {
-      openModal('newsletter-modal');
-    });
-
-    return view;
-  };
-
-  const subscribeWith = (container: HTMLElement) => {
-    fireEvent.change(container.querySelector('input[type="email"]')!, {
-      target: { value: 'ada@example.com' }
-    });
-    fireEvent.submit(container.querySelector('form')!);
-  };
-
-  beforeEach(() => {
-    subscribe.mockClear();
-    clearAutoOpenRecord('newsletter-modal');
-  });
-
-  it('keeps the popup open by default, so the thank-you can be read', async () => {
-    const { container } = newsletterInDrawer({});
-
-    subscribeWith(container);
-
-    await waitFor(() => expect(subscribe).toHaveBeenCalled());
-    expect(isModalOpen('newsletter-modal')).toBe(true);
-  });
-
-  it('closes it when the designer asked for that', async () => {
-    const { container } = newsletterInDrawer({ closeHostModalOnSuccess: true });
-
-    subscribeWith(container);
-
-    await waitFor(() => expect(isModalOpen('newsletter-modal')).toBe(false));
-  });
-});
-
-describe('the sign-in trio, with the switch turned off', () => {
-  it('leaves the drawer open — the default is a default, not a rule', async () => {
-    const { container } = openDrawerWithLogin({
-      closeHostModalOnSuccess: false
-    });
-
-    submit(container);
-
-    await waitFor(() => expect(refresh).toHaveBeenCalled());
-    expect(isModalOpen('auth-drawer')).toBe(true);
-  });
-});
-
-describe('what must NOT close the surface', () => {
-  it('a refused sign-in leaves the drawer up, with the message in it', async () => {
-    signIn.mockImplementationOnce(() =>
-      Promise.resolve({
-        error: 'CredentialsSignin',
-        code: JSON.stringify([
-          { type: 'non_field_errors', data: ['E-mail or password is wrong.'] }
-        ])
-      })
-    );
-
-    const { container } = openDrawerWithLogin();
-
-    submit(container);
-
-    await waitFor(() =>
-      expect(
-        container.textContent?.includes('E-mail or password is wrong.')
-      ).toBe(true)
-    );
-    // Closing here would take the error away with the form that has to be
-    // corrected — the one case where an auto-close is plainly wrong.
-    expect(isModalOpen('auth-drawer')).toBe(true);
-  });
-
-  it('closes the host even when a legacy composition asked for all modals', async () => {
-    const { container } = openDrawerWithLogin({ closeModalsOnSuccess: true });
-
-    submit(container);
-
-    // Both run: the wide close is a superset, so an already-published drawer
-    // is not stuck on it. (The narrow one then finds nothing to do.)
-    await waitFor(() => expect(getOpenModalIds()).toHaveLength(0));
-  });
-});