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

package/src/__tests__/register-form-composed.test.tsx

@@ -0,0 +1,739 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import React from 'react';
+
+import RegisterFormBlock from '../blocks/register-form-block';
+import { AUTH_CONSENT_NAMES } from '../blocks/auth-consent-block';
+import {
+  __resetAuthFlowBusForTests,
+  getAuthFlowState,
+  getPendingOtp
+} from '../auth/auth-flow-bus';
+import { Block } from '../theme-block';
+
+/**
+ * A registration whose rows are blocks.
+ *
+ * The login form composes: an `auth-field` per input, arranged and dressed like
+ * any other block. The register form did not, so a composition could rewrite
+ * its e-mail row but had to take the form's own consent row — the one row a
+ * legal team actually rewrites — and could not reorder, relabel or restyle any
+ * of it.
+ *
+ * What must NOT change is the body that reaches commerce: a composed form and a
+ * fixed one register the same shopper the same way, ticks turned into the flags
+ * commerce names individually. These cases pin exactly that, plus the two
+ * refusals (no agreement, no submit in the canvas) and the SMS handoff.
+ */
+
+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() })
+}));
+
+const block = (overrides: Partial<Block>): Block =>
+  ({
+    id: 'blk',
+    type: 'text',
+    label: 'Block',
+    value: '',
+    order: 0,
+    hidden: false,
+    properties: {},
+    styles: {},
+    ...overrides
+  }) as Block;
+
+const field = (fieldType: string, order: number): Block =>
+  block({
+    id: `field-${fieldType}`,
+    type: 'auth-field',
+    label: fieldType,
+    properties: { fieldType },
+    order
+  });
+
+const consent = (
+  consentType: 'legal' | 'marketing',
+  order: number,
+  properties: Record<string, unknown> = {}
+): Block =>
+  block({
+    id: `consent-${consentType}`,
+    type: 'auth-consent',
+    label: consentType,
+    properties: { consentType, ...properties },
+    order
+  });
+
+const renderComposed = (children: Block[], properties = {}) =>
+  render(
+    <RegisterFormBlock
+      block={
+        block({
+          id: 'register-1',
+          type: 'register-form',
+          label: 'Register Form',
+          properties,
+          blocks: children
+        }) as Block
+      }
+      placeholderId="placeholder-1"
+      sectionId="section-1"
+      currentBreakpoint="desktop"
+    />
+  );
+
+const COMPOSED = [
+  field('first_name', 0),
+  field('last_name', 1),
+  field('email', 2),
+  field('password', 3),
+  field('phone', 4),
+  consent('legal', 5),
+  consent('marketing', 6)
+];
+
+const fill = (container: HTMLElement, values: Record<string, string>) => {
+  Object.entries(values).forEach(([name, value]) => {
+    const input = container.querySelector(
+      `input[name="${name}"]`
+    ) as HTMLInputElement;
+    fireEvent.change(input, { target: { value } });
+  });
+};
+
+const tick = (container: HTMLElement, name: string) =>
+  fireEvent.click(container.querySelector(`input[name="${name}"]`)!);
+
+const submitted = () => signIn.mock.calls[0][1] as Record<string, unknown>;
+
+beforeEach(() => {
+  signIn.mockClear();
+  push.mockClear();
+  refresh.mockClear();
+  __resetAuthFlowBusForTests();
+});
+
+describe('a composed register form', () => {
+  it('draws its children instead of its own rows', () => {
+    const { container } = renderComposed(COMPOSED);
+
+    expect(
+      container.querySelector('[data-register-form-composed]')
+    ).not.toBeNull();
+    // The fixed rows are the thing a composition replaces, so none of them may
+    // also be on the page — a shopper filling in two e-mail inputs is the bug
+    // this asserts against.
+    expect(
+      container.querySelectorAll('[data-register-form-field]')
+    ).toHaveLength(0);
+    expect(container.querySelectorAll('input[name="email"]')).toHaveLength(1);
+    expect(container.querySelectorAll('[data-auth-consent]')).toHaveLength(2);
+  });
+
+  it('posts the same body a fixed form posts, ticks turned into flags', async () => {
+    const { container } = renderComposed(COMPOSED);
+
+    fill(container, {
+      first_name: 'Ada',
+      last_name: 'Lovelace',
+      email: 'ada@example.com',
+      password: 'hunter2',
+      phone: '(555) 123 45 67'
+    });
+    tick(container, AUTH_CONSENT_NAMES.legal);
+    tick(container, AUTH_CONSENT_NAMES.marketing);
+
+    fireEvent.submit(container.querySelector('form')!);
+
+    await waitFor(() => expect(signIn).toHaveBeenCalled());
+
+    expect(submitted()).toMatchObject({
+      formType: 'registration',
+      first_name: 'Ada',
+      last_name: 'Lovelace',
+      email: 'ada@example.com',
+      password: 'hunter2',
+      // Bare digits: the mask a brand renders around the input would fail
+      // commerce's length check.
+      phone: '5551234567',
+      is_allowed: true,
+      confirm: true,
+      email_allowed: true,
+      sms_allowed: true,
+      call_allowed: true,
+      whatsapp_allowed: true,
+      permissions: 'on'
+    });
+  });
+
+  it('sends the marketing flags off, and no permissions key at all, when that tick is left alone', async () => {
+    const { container } = renderComposed(COMPOSED);
+
+    fill(container, {
+      first_name: 'Ada',
+      last_name: 'Lovelace',
+      email: 'ada@example.com',
+      password: 'hunter2',
+      phone: '5551234567'
+    });
+    tick(container, AUTH_CONSENT_NAMES.legal);
+
+    fireEvent.submit(container.querySelector('form')!);
+
+    await waitFor(() => expect(signIn).toHaveBeenCalled());
+
+    const body = submitted();
+
+    expect(body).toMatchObject({
+      is_allowed: true,
+      email_allowed: false,
+      sms_allowed: false,
+      call_allowed: false,
+      whatsapp_allowed: false
+    });
+    // Absent rather than falsy: the brand's own view deletes the key.
+    expect(body).not.toHaveProperty('permissions');
+    // And the raw checkbox entries must not travel — `is_allowed: 'on'` is not
+    // what commerce reads.
+    expect(body.is_allowed).not.toBe('on');
+  });
+
+  it('refuses to register anyone who has not agreed, and says which sentence they missed', async () => {
+    const { container } = renderComposed(COMPOSED, {
+      consentRequiredLabel: 'Üyelik sözleşmesini kabul etmelisiniz.'
+    });
+
+    fill(container, {
+      first_name: 'Ada',
+      last_name: 'Lovelace',
+      email: 'ada@example.com',
+      password: 'hunter2'
+    });
+
+    fireEvent.submit(container.querySelector('form')!);
+
+    await waitFor(() =>
+      expect(
+        screen.getByText('Üyelik sözleşmesini kabul etmelisiniz.')
+      ).toBeInTheDocument()
+    );
+    expect(signIn).not.toHaveBeenCalled();
+  });
+
+  it('never submits from the canvas, where it would create a real account', () => {
+    const { container } = render(
+      <RegisterFormBlock
+        block={
+          block({
+            id: 'register-1',
+            type: 'register-form',
+            label: 'Register Form',
+            blocks: COMPOSED
+          }) as Block
+        }
+        placeholderId="placeholder-1"
+        sectionId="section-1"
+        currentBreakpoint="desktop"
+        isDesigner
+      />
+    );
+
+    fireEvent.submit(container.querySelector('form')!);
+
+    expect(signIn).not.toHaveBeenCalled();
+  });
+
+  it('still renders its fixed rows for a composition that has no children', () => {
+    const { container } = renderComposed([]);
+
+    expect(container.querySelector('[data-register-form-composed]')).toBeNull();
+    expect(
+      container.querySelectorAll('[data-register-form-field]').length
+    ).toBeGreaterThan(0);
+  });
+});
+
+describe('the consent block on its own terms', () => {
+  it('requires the legal tick and leaves the marketing one optional', () => {
+    const { container } = renderComposed([
+      consent('legal', 0),
+      consent('marketing', 1)
+    ]);
+
+    expect(
+      container.querySelector(`input[name="${AUTH_CONSENT_NAMES.legal}"]`)
+    ).toBeRequired();
+    expect(
+      container.querySelector(`input[name="${AUTH_CONSENT_NAMES.marketing}"]`)
+    ).not.toBeRequired();
+  });
+
+  it('lets a brand whose agreement is not mandatory say so', () => {
+    const { container } = renderComposed([
+      consent('legal', 0, { required: false })
+    ]);
+
+    expect(
+      container.querySelector(`input[name="${AUTH_CONSENT_NAMES.legal}"]`)
+    ).not.toBeRequired();
+  });
+
+  it('carries the sentence the author wrote', () => {
+    const { container } = renderComposed([
+      consent('legal', 0, { text: 'Kuralları okudum ve kabul ediyorum.' })
+    ]);
+
+    expect(container).toHaveTextContent('Kuralları okudum ve kabul ediyorum.');
+  });
+});
+
+describe('the SMS handoff from a composed registration', () => {
+  /** Commerce accepts the sign-up and answers with an `otp` challenge. */
+  const challenge = () =>
+    signIn.mockImplementationOnce(() =>
+      Promise.resolve({
+        error: 'CredentialsSignin',
+        code: JSON.stringify([{ type: 'otp' }]),
+        url: null
+      })
+    );
+
+  const completeAndSubmit = (container: HTMLElement) => {
+    fill(container, {
+      first_name: 'Ada',
+      last_name: 'Lovelace',
+      email: 'ada@example.com',
+      password: 'hunter2',
+      phone: '(555) 123 45 67'
+    });
+    tick(container, AUTH_CONSENT_NAMES.legal);
+    fireEvent.submit(container.querySelector('form')!);
+  };
+
+  it('parks the whole attempt on the bus so an OTP block can finish it', async () => {
+    challenge();
+
+    const { container } = renderComposed(COMPOSED);
+    completeAndSubmit(container);
+
+    await waitFor(() => expect(getPendingOtp()).not.toBeNull());
+
+    const pending = getPendingOtp()!;
+
+    expect(pending.kind).toBe('register');
+    // Bare digits, because this is the number the code is sent to.
+    expect(pending.phone).toBe('5551234567');
+    // The payload is re-submitted with the code, so it has to be the same body
+    // the sign-up used — password included, which is why it never outlives the
+    // journey (see `registerAuthFlowMount`).
+    expect(pending.payload).toMatchObject({
+      formType: 'registration',
+      email: 'ada@example.com',
+      is_allowed: true
+    });
+  });
+
+  it('moves the flow to the step holding the verification, when one was named', async () => {
+    challenge();
+
+    const { container } = renderComposed(COMPOSED, {
+      otpStepTarget: 'auth:verify'
+    });
+    completeAndSubmit(container);
+
+    await waitFor(() =>
+      expect(getAuthFlowState('auth')?.active).toBe('verify')
+    );
+    // The challenge is a handoff, not a failure: nothing is written into the
+    // form's own error line.
+    expect(container.querySelector('[data-register-form-error]')).toBeNull();
+  });
+});
+
+describe("the answers the brand's own design asks for", () => {
+  const DESIGNED = [
+    field('gender', 0),
+    field('email', 1),
+    field('first_name', 2),
+    field('last_name', 3),
+    field('phone', 4),
+    field('date_of_birth', 5),
+    field('password', 6),
+    consent('legal', 7)
+  ];
+
+  it('collects a gender as one of the two values commerce stores', async () => {
+    const { container } = renderComposed(DESIGNED);
+
+    const select = container.querySelector(
+      'select[name="gender"]'
+    ) as HTMLSelectElement;
+
+    // A select rather than a text box: the account page reads these strings
+    // back, so a composition must not be able to invent a third one.
+    expect(select).not.toBeNull();
+    expect(Array.from(select.options).map((option) => option.value)).toEqual([
+      '',
+      'female',
+      'male'
+    ]);
+
+    fireEvent.change(select, { target: { value: 'female' } });
+    fill(container, {
+      email: 'ada@example.com',
+      first_name: 'Ada',
+      last_name: 'Lovelace',
+      phone: '5551234567',
+      date_of_birth: '1815-12-10',
+      password: 'hunter2'
+    });
+    tick(container, AUTH_CONSENT_NAMES.legal);
+
+    fireEvent.submit(container.querySelector('form')!);
+
+    await waitFor(() => expect(signIn).toHaveBeenCalled());
+
+    expect(submitted()).toMatchObject({
+      gender: 'female',
+      // The native control's own value format, which is already the one
+      // commerce keeps — nothing reformats it on the way out.
+      date_of_birth: '1815-12-10'
+    });
+  });
+
+  it('leaves the two optional answers optional', () => {
+    const { container } = renderComposed([
+      field('gender', 0),
+      field('date_of_birth', 1)
+    ]);
+
+    // Required is the field's own toggle and defaults to on; what matters here
+    // is that a shopper CAN be asked for these without being forced, which is
+    // what the seeded composition does.
+    expect(container.querySelector('select[name="gender"]')).not.toBeNull();
+    expect(
+      container.querySelector('input[name="date_of_birth"]')
+    ).toHaveAttribute('type', 'date');
+  });
+
+  it('lets a brand caption the two values in its own language', () => {
+    const { container } = renderComposed([
+      block({
+        id: 'field-gender',
+        type: 'auth-field',
+        properties: {
+          fieldType: 'gender',
+          femaleLabel: 'Kadın',
+          maleLabel: 'Erkek',
+          placeholder: 'Cinsiyet'
+        },
+        order: 0
+      })
+    ]);
+
+    const options = Array.from(
+      container.querySelectorAll('select[name="gender"] option')
+    ).map((option) => option.textContent);
+
+    expect(options).toEqual(['Cinsiyet', 'Kadın', 'Erkek']);
+  });
+});
+
+describe('a field or a tick the list has never heard of', () => {
+  const customField = (
+    name: string,
+    order: number,
+    properties: Record<string, unknown> = {}
+  ) =>
+    block({
+      id: `field-${name || 'unnamed'}`,
+      type: 'auth-field',
+      properties: { fieldType: 'custom', name, ...properties },
+      order
+    });
+
+  const customConsent = (
+    name: string,
+    order: number,
+    properties: Record<string, unknown> = {}
+  ) =>
+    block({
+      id: `consent-${name || 'unnamed'}`,
+      type: 'auth-consent',
+      properties: { consentType: 'custom', name, ...properties },
+      order
+    });
+
+  it('submits a custom field under the name the author typed', async () => {
+    const { container } = renderComposed([
+      field('email', 0),
+      field('password', 1),
+      customField('tckn', 2, { label: 'National ID', inputType: 'number' }),
+      consent('legal', 3)
+    ]);
+
+    const input = container.querySelector('input[name="tckn"]');
+    expect(input).toHaveAttribute('type', 'number');
+
+    fill(container, {
+      email: 'ada@example.com',
+      password: 'hunter2',
+      tckn: '12345678901'
+    });
+    tick(container, AUTH_CONSENT_NAMES.legal);
+    fireEvent.submit(container.querySelector('form')!);
+
+    await waitFor(() => expect(signIn).toHaveBeenCalled());
+    // Straight through: the form forwards every named control it finds, which
+    // is what makes a new field an editor job instead of a release.
+    expect(submitted()).toMatchObject({ tckn: '12345678901' });
+  });
+
+  it('draws nothing for a custom field nobody has named', () => {
+    const { container } = renderComposed([customField('', 0)]);
+
+    // An input with no name collects into the void; a shopper must not be given
+    // one to fill in.
+    expect(container.querySelectorAll('input')).toHaveLength(0);
+  });
+
+  it('sends a custom tick as the value the author chose, and omits it when unticked', async () => {
+    const children = [
+      field('email', 0),
+      field('password', 1),
+      consent('legal', 2),
+      customConsent('kvkk_approved', 3, { tickedValue: 'on' })
+    ];
+
+    const first = renderComposed(children);
+    fill(first.container, { email: 'a@b.com', password: 'hunter2' });
+    tick(first.container, AUTH_CONSENT_NAMES.legal);
+    fireEvent.submit(first.container.querySelector('form')!);
+
+    await waitFor(() => expect(signIn).toHaveBeenCalled());
+    // Unticked: absent altogether, exactly like the marketing flag's key.
+    expect(submitted()).not.toHaveProperty('kvkk_approved');
+
+    signIn.mockClear();
+    first.unmount();
+
+    const second = renderComposed(children);
+    fill(second.container, { email: 'a@b.com', password: 'hunter2' });
+    tick(second.container, AUTH_CONSENT_NAMES.legal);
+    tick(second.container, 'kvkk_approved');
+    fireEvent.submit(second.container.querySelector('form')!);
+
+    await waitFor(() => expect(signIn).toHaveBeenCalled());
+    expect(submitted()).toMatchObject({ kvkk_approved: 'on' });
+  });
+
+  it('defaults a custom tick to true, which is what an agreement is stored as', () => {
+    const { container } = renderComposed([customConsent('kvkk_approved', 0)]);
+
+    expect(
+      container.querySelector('input[name="kvkk_approved"]')
+    ).toHaveAttribute('value', 'true');
+  });
+
+  it('draws nothing for a custom tick nobody has named', () => {
+    const { container } = renderComposed([customConsent('', 0)]);
+
+    expect(container.querySelectorAll('input[type="checkbox"]')).toHaveLength(
+      0
+    );
+  });
+});
+
+describe('the body a composition posts', () => {
+  const customField = (
+    name: string,
+    order: number,
+    properties: Record<string, unknown> = {}
+  ) =>
+    block({
+      id: `field-custom-${name || 'unnamed'}`,
+      type: 'auth-field',
+      properties: { fieldType: 'custom', name, ...properties },
+      order
+    });
+
+  it('leaves an optional answer out rather than posting an empty one', async () => {
+    // The two answers the design frames a sign-up with are optional, so a
+    // shopper skipping them is the ordinary case — and a gender left on its
+    // empty option is not a choice commerce can store. The fixed rows never
+    // sent these keys, and the form already deletes `permissions` rather than
+    // send a falsy one; this is the same rule.
+    const optional = (fieldType: string, order: number) =>
+      block({
+        id: `field-${fieldType}`,
+        type: 'auth-field',
+        properties: { fieldType, required: false },
+        order
+      });
+
+    const { container } = renderComposed([
+      optional('gender', 0),
+      field('email', 1),
+      field('password', 2),
+      optional('date_of_birth', 3),
+      consent('legal', 4)
+    ]);
+
+    fill(container, { email: 'ada@example.com', password: 'hunter2' });
+    tick(container, AUTH_CONSENT_NAMES.legal);
+    fireEvent.submit(container.querySelector('form')!);
+
+    await waitFor(() => expect(signIn).toHaveBeenCalled());
+    expect(submitted()).not.toHaveProperty('gender');
+    expect(submitted()).not.toHaveProperty('date_of_birth');
+    expect(submitted()).toMatchObject({ email: 'ada@example.com' });
+  });
+
+  it('refuses a field named after the protocol instead of letting it through', async () => {
+    // `formType` picks the commerce endpoint and `redirect` decides whether
+    // next-auth hands back a response at all — a field named after either is
+    // not an extra answer, it is a different request.
+    const { container } = renderComposed([
+      field('email', 0),
+      field('password', 1),
+      customField('formType', 2, { label: 'Form type' }),
+      customField('redirect', 3, { label: 'Redirect' }),
+      consent('legal', 4)
+    ]);
+
+    fill(container, {
+      email: 'ada@example.com',
+      password: 'hunter2',
+      formType: 'oops',
+      redirect: 'yes'
+    });
+    tick(container, AUTH_CONSENT_NAMES.legal);
+    fireEvent.submit(container.querySelector('form')!);
+
+    await waitFor(() => expect(signIn).toHaveBeenCalled());
+    expect(submitted()).toMatchObject({ formType: 'registration' });
+    // False, not the string: a truthy `redirect` navigates away instead of
+    // answering, and the form would never see its own errors again.
+    expect(submitted().redirect).toBe(false);
+    expect(submitted().callbackUrl).toBe('/');
+  });
+
+  it('keeps what the shopper typed when a field name is duplicated', async () => {
+    // A row copied with Duplicate, or a breakpoint twin: two controls answer to
+    // one name and only one of them is filled in. `collectAuthFieldErrors`
+    // already resolves that duplicate first-one-wins; the body used to take the
+    // LAST, which is typically the empty one.
+    const { container } = renderComposed([
+      field('email', 0),
+      field('password', 1),
+      customField('email', 2, { label: 'E-mail again', required: false }),
+      consent('legal', 3)
+    ]);
+
+    const emails = container.querySelectorAll('input[name="email"]');
+    expect(emails).toHaveLength(2);
+
+    fireEvent.change(emails[0], { target: { value: 'ada@example.com' } });
+    fill(container, { password: 'hunter2' });
+    tick(container, AUTH_CONSENT_NAMES.legal);
+    fireEvent.submit(container.querySelector('form')!);
+
+    await waitFor(() => expect(signIn).toHaveBeenCalled());
+    expect(submitted()).toMatchObject({ email: 'ada@example.com' });
+  });
+});
+
+describe('an agreement the brand does not insist on', () => {
+  it('registers without the tick when the row says it is optional', async () => {
+    // The editor offers "turn it off for an optional tick" and the block
+    // promises a brand in a market where the agreement is not mandatory can say
+    // so. The refusal used to run whatever the row said, so the toggle changed
+    // which message appeared and nothing else.
+    const { container } = renderComposed([
+      field('email', 0),
+      field('password', 1),
+      consent('legal', 2, { required: false })
+    ]);
+
+    fill(container, { email: 'ada@example.com', password: 'hunter2' });
+    fireEvent.submit(container.querySelector('form')!);
+
+    await waitFor(() => expect(signIn).toHaveBeenCalled());
+    // The shopper's actual answer travels, rather than a yes nobody gave.
+    expect(submitted()).toMatchObject({ is_allowed: false, confirm: false });
+  });
+
+  it('still refuses when the row is the mandatory one it is by default', async () => {
+    const { container } = renderComposed(
+      [field('email', 0), field('password', 1), consent('legal', 2)],
+      { consentRequiredLabel: 'Üyelik sözleşmesini kabul etmelisiniz.' }
+    );
+
+    fill(container, { email: 'ada@example.com', password: 'hunter2' });
+    fireEvent.submit(container.querySelector('form')!);
+
+    // A required tick is caught as the row's own missing answer, so the
+    // sentence lands under it rather than at the foot of the form.
+    await waitFor(() =>
+      expect(
+        screen.getByText('Üyelik sözleşmesini kabul etmelisiniz.')
+      ).toBeInTheDocument()
+    );
+    expect(signIn).not.toHaveBeenCalled();
+  });
+
+  it('registers a composition that does not ask the question at all', async () => {
+    // No consent row means the brand is not asking — which is what a childless
+    // form does too, and it registers. The refusal used to fire anyway, telling
+    // the shopper to accept an agreement that was nowhere on screen and leaving
+    // them no way to ever submit.
+    const { container } = renderComposed([
+      field('email', 0),
+      field('password', 1)
+    ]);
+
+    fill(container, { email: 'ada@example.com', password: 'hunter2' });
+    fireEvent.submit(container.querySelector('form')!);
+
+    await waitFor(() => expect(signIn).toHaveBeenCalled());
+    expect(submitted()).toMatchObject({ is_allowed: true, confirm: true });
+  });
+});
+
+describe('a field the design has taken off this breakpoint', () => {
+  it('does not hold the form hostage to a control nobody can see', async () => {
+    // The editor's Visibility setting is CSS: it writes `display: none` onto
+    // the block wrapper and leaves the control in the form. `willValidate` does
+    // not care about CSS, so a required field hidden on mobile refused every
+    // submit there — with the explanation drawn inside the hidden wrapper, and
+    // `focus()` a no-op on an element that is not rendered.
+    const { container } = renderComposed([
+      field('email', 0),
+      field('password', 1),
+      field('phone', 2),
+      consent('legal', 3)
+    ]);
+
+    const phone = container.querySelector(
+      'input[name="phone"]'
+    ) as HTMLInputElement;
+    (phone.closest('label') as HTMLElement).style.display = 'none';
+
+    fill(container, { email: 'ada@example.com', password: 'hunter2' });
+    tick(container, AUTH_CONSENT_NAMES.legal);
+    fireEvent.submit(container.querySelector('form')!);
+
+    await waitFor(() => expect(signIn).toHaveBeenCalled());
+    expect(submitted()).not.toHaveProperty('phone');
+  });
+});