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

package/src/__tests__/password-reset-step.test.tsx

@@ -0,0 +1,269 @@
+import { cleanup, fireEvent, render, screen } from '@testing-library/react';
+import React from 'react';
+
+import AuthFormBlock from '../blocks/auth-form-block';
+import ForgotPasswordBlock from '../blocks/forgot-password-block';
+import {
+  __resetAuthFlowBusForTests,
+  AuthFlowIdContext,
+  getAuthFlowState
+} from '../auth/auth-flow-bus';
+import { Block } from '../theme-block';
+
+/**
+ * Password reset AS A STEP of the flow, rather than a page the drawer sends
+ * the shopper away to.
+ *
+ * The two ends of that journey are what these cover: the login form's "forgot
+ * password?" moving the flow instead of navigating, and the reset form offering
+ * the way back once the mail is on its way. Both are opt-in — a form with no
+ * step named behaves exactly as it did, which is what keeps published auth
+ * PAGES (where navigating is correct) working.
+ */
+
+let mutationState = { isLoading: false, isSuccess: false };
+const forgotPassword = jest.fn(() => ({ unwrap: () => Promise.resolve({}) }));
+
+jest.mock('@akinon/next/data/client/user', () => ({
+  useForgotPasswordMutation: () => [forgotPassword, mutationState]
+}));
+
+jest.mock('next-auth/react', () => ({
+  signIn: jest.fn(() => Promise.resolve({ error: null, url: '/' })),
+  useSession: () => ({ data: null, status: 'unauthenticated' })
+}));
+
+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 renderForgotPassword = (
+  properties: Record<string, unknown> = {},
+  options: { isDesigner?: boolean; flowId?: string } = {}
+) =>
+  render(
+    <AuthFlowIdContext.Provider value={options.flowId ?? 'auth'}>
+      <ForgotPasswordBlock
+        block={blockOf('forgot-password', properties)}
+        placeholderId="placeholder-1"
+        sectionId="section-1"
+        currentBreakpoint="desktop"
+        isDesigner={options.isDesigner ?? false}
+      />
+    </AuthFlowIdContext.Provider>
+  );
+
+const renderLoginForm = (
+  properties: Record<string, unknown> = {},
+  options: { flowId?: string; children?: Block[] } = {}
+) =>
+  render(
+    <AuthFlowIdContext.Provider value={options.flowId ?? 'auth'}>
+      <AuthFormBlock
+        block={{
+          ...blockOf('auth-form', { mode: 'login', ...properties }),
+          blocks: options.children
+        }}
+        placeholderId="placeholder-1"
+        sectionId="section-1"
+        currentBreakpoint="desktop"
+      />
+    </AuthFlowIdContext.Provider>
+  );
+
+/** The shape every dropped Auth Form now has: its fields are child blocks. */
+const composedFields: Block[] = [
+  {
+    id: 'field-email',
+    type: 'auth-field',
+    label: 'E-mail Field',
+    properties: { fieldType: 'email' },
+    styles: {},
+    order: 0,
+    hidden: false
+  },
+  {
+    id: 'field-password',
+    type: 'auth-field',
+    label: 'Password Field',
+    properties: { fieldType: 'password' },
+    styles: {},
+    order: 1,
+    hidden: false
+  }
+];
+
+beforeEach(() => {
+  __resetAuthFlowBusForTests();
+  mutationState = { isLoading: false, isSuccess: false };
+  forgotPassword.mockClear();
+});
+
+describe('the login form reaching the reset step', () => {
+  it('moves the flow instead of navigating when a step is named', () => {
+    renderLoginForm({
+      showForgotPassword: true,
+      forgotPasswordStepTarget: 'reset'
+    });
+
+    const control = screen.getByText('Forgot password?');
+
+    // A button, not an anchor: nothing to navigate to.
+    expect(control.tagName).toBe('BUTTON');
+    expect(control.getAttribute('type')).toBe('button');
+
+    fireEvent.click(control);
+
+    expect(getAuthFlowState('auth')?.active).toBe('reset');
+  });
+
+  it('reads flow:step so a form outside the flow can still send it', () => {
+    renderLoginForm(
+      {
+        showForgotPassword: true,
+        forgotPasswordStepTarget: 'auth:reset'
+      },
+      { flowId: '' }
+    );
+
+    fireEvent.click(screen.getByText('Forgot password?'));
+
+    expect(getAuthFlowState('auth')?.active).toBe('reset');
+  });
+
+  it('draws the control on a composed form too', () => {
+    // The arrangement's login form has auth-field children, and a control that
+    // only exists on the fixed layout would leave `Forgot Password Step` doing
+    // nothing exactly where the journey needs it.
+    renderLoginForm(
+      {
+        showForgotPassword: true,
+        forgotPasswordStepTarget: 'reset'
+      },
+      { children: composedFields }
+    );
+
+    // Composed: the fields came from the children.
+    expect(document.querySelectorAll('input[name]')).toHaveLength(2);
+
+    fireEvent.click(screen.getByText('Forgot password?'));
+
+    expect(getAuthFlowState('auth')?.active).toBe('reset');
+  });
+
+  it('stays a navigating link when no step is named', () => {
+    renderLoginForm({
+      showForgotPassword: true,
+      forgotPasswordUrl: '/auth/forgot-password'
+    });
+
+    const control = screen.getByText('Forgot password?');
+
+    expect(control.tagName).toBe('A');
+    expect(control.getAttribute('href')).toBe('/auth/forgot-password');
+  });
+});
+
+describe('the reset form as a step', () => {
+  it('draws its own message instead of the browser bubble', () => {
+    renderForgotPassword({ requiredMessage: 'Bu alan gereklidir.' });
+
+    fireEvent.submit(document.querySelector('form') as HTMLFormElement);
+
+    expect((document.querySelector('form') as HTMLFormElement).noValidate).toBe(
+      true
+    );
+    expect(screen.getByText('Bu alan gereklidir.')).toBeTruthy();
+    // Nothing was asked of commerce.
+    expect(forgotPassword).not.toHaveBeenCalled();
+  });
+
+  it('fills the block wrapper in both of its states', () => {
+    renderForgotPassword();
+    expect(
+      (document.querySelector('form') as HTMLFormElement).classList
+    ).toContain('w-full');
+
+    cleanup();
+    mutationState = { isLoading: false, isSuccess: true };
+    renderForgotPassword();
+    expect(
+      (
+        document.querySelector(
+          '[data-forgot-password-state="success"]'
+        ) as HTMLElement
+      ).classList
+    ).toContain('w-full');
+  });
+
+  it('sends the mail once the address is there', () => {
+    renderForgotPassword();
+
+    fireEvent.change(document.querySelector('input[name="email"]')!, {
+      target: { value: 'shopper@example.com' }
+    });
+    fireEvent.submit(document.querySelector('form') as HTMLFormElement);
+
+    expect(forgotPassword).toHaveBeenCalledWith({
+      email: 'shopper@example.com'
+    });
+  });
+
+  it('offers the way back from the success state', () => {
+    mutationState = { isLoading: false, isSuccess: true };
+    renderForgotPassword({
+      backStepTarget: 'login',
+      backLabel: 'Girişe dön'
+    });
+
+    const back = screen.getByText('Girişe dön');
+    fireEvent.click(back);
+
+    expect(getAuthFlowState('auth')?.active).toBe('login');
+  });
+
+  it('keeps the success state as it was when no step is named', () => {
+    mutationState = { isLoading: false, isSuccess: true };
+    renderForgotPassword();
+
+    expect(
+      document.querySelector('[data-forgot-password-state="success"]')
+    ).toBeTruthy();
+    expect(document.querySelector('[data-forgot-password-back]')).toBeNull();
+  });
+
+  it('shows the back control in the designer without moving the flow', () => {
+    renderForgotPassword(
+      { backStepTarget: 'login', previewSuccess: true },
+      { isDesigner: true }
+    );
+
+    fireEvent.click(screen.getByText('Back to log in'));
+
+    // The canvas has its own step switcher; a click here must not move the
+    // flow under the designer's feet.
+    expect(getAuthFlowState('auth')).toBeNull();
+  });
+
+  it('hands its submit to a Button elsewhere on the page', () => {
+    renderForgotPassword({
+      formHtmlId: 'reset-form',
+      showSubmit: false
+    });
+
+    expect((document.querySelector('form') as HTMLFormElement).id).toBe(
+      'reset-form'
+    );
+    expect(document.querySelector('[data-forgot-password-submit]')).toBeNull();
+  });
+});