@thorprovider/blocks 2.0.0 → 3.0.0

package/src/blocks/e-commerce/checkout-forms/checkout.test.tsx

@@ -1,478 +0,0 @@
-// @vitest-environment jsdom
-import { act } from 'react'
-import { createRoot, type Root } from 'react-dom/client'
-import { renderToStaticMarkup } from 'react-dom/server'
-import userEvent from '@testing-library/user-event'
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-import { Checkout, type CheckoutProps, type CheckoutValues } from './checkout'
-
-;(globalThis as Record<string, unknown>).IS_REACT_ACT_ENVIRONMENT = true
-
-// jsdom lacks browser APIs some shadcn/ui primitives probe on mount.
-if (!window.matchMedia) {
-  window.matchMedia = ((query: string) => ({
-    matches: false,
-    media: query,
-    onchange: null,
-    addEventListener: () => {},
-    removeEventListener: () => {},
-    addListener: () => {},
-    removeListener: () => {},
-    dispatchEvent: () => false,
-  })) as unknown as typeof window.matchMedia
-}
-
-const usd = (amount: string) => ({ amount, currencyCode: 'USD' })
-
-const formatMoney = (money: { amount: string; currencyCode: string }) =>
-  `${money.currencyCode} ${money.amount}`
-
-const emptyValues = (): CheckoutValues => ({
-  email: '',
-  firstName: '',
-  lastName: '',
-  phone: '',
-  address: '',
-  city: '',
-  state: '',
-  zipCode: '',
-  country: '',
-  paymentMethod: '',
-  saveInfo: false,
-  newsletter: false,
-  promoCode: '',
-})
-
-const values: CheckoutValues = {
-  ...emptyValues(),
-  email: 'shopper@example.com',
-  firstName: 'Ada',
-  lastName: 'Lovelace',
-  address: '1 Analytical Way',
-  city: 'London',
-  state: 'LDN',
-  zipCode: 'EC1A',
-  country: 'GB',
-  paymentMethod: 'pp_system_default',
-}
-
-const summary = {
-  items: [
-    { id: 'line_1', name: 'Drill', quantity: 2, lineTotal: usd('90.00'), unitPrice: usd('45.00') },
-    { id: 'line_2', name: 'Battery', quantity: 1, lineTotal: usd('20.00') },
-  ],
-  totals: {
-    subtotal: usd('110.00'),
-    discount: usd('10.00'),
-    tax: usd('8.00'),
-    shipping: usd('5.00'),
-    total: usd('113.00'),
-  },
-}
-
-const baseProps = (): CheckoutProps => ({
-  presentation: 'stepper',
-  values: emptyValues(),
-  onChange: () => {},
-  formatMoney,
-})
-
-const renderMarkup = (props: Partial<CheckoutProps> = {}) =>
-  renderToStaticMarkup(<Checkout {...baseProps()} {...props} />)
-
-describe('Checkout — authoritative totals', () => {
-  it('renders supplied backend totals verbatim, even when they look inconsistent', () => {
-    const html = renderMarkup({ presentation: 'single-page', orderSummary: summary })
-    expect(html).toContain('USD 110.00')
-    expect(html).toContain('USD 10.00')
-    expect(html).toContain('USD 8.00')
-    expect(html).toContain('USD 5.00')
-    expect(html).toContain('USD 113.00')
-  })
-
-  it('never fabricates a zero for an absent or malformed required total', () => {
-    const html = renderMarkup({
-      presentation: 'single-page',
-      orderSummary: {
-        items: summary.items,
-        totals: { subtotal: usd(''), total: usd('abc') },
-      },
-    })
-    expect(html).toContain('Totals are unavailable')
-    expect(html).not.toContain('USD 0')
-  })
-
-  it('preserves a legitimate zero total', () => {
-    const html = renderMarkup({
-      presentation: 'single-page',
-      orderSummary: {
-        items: summary.items,
-        totals: { subtotal: usd('0'), total: usd('0') },
-      },
-    })
-    expect(html).toContain('USD 0')
-    expect(html).not.toContain('Totals are unavailable')
-  })
-
-  it('renders the controlled pending state without amounts', () => {
-    const html = renderMarkup({ presentation: 'single-page', orderSummary: summary, totalsState: 'pending' })
-    expect(html).toContain('Updating totals')
-    expect(html).not.toContain('USD 113.00')
-  })
-
-  it('renders the controlled error state with the retry action', () => {
-    const html = renderMarkup({
-      presentation: 'single-page',
-      orderSummary: { items: summary.items },
-      totalsState: 'error',
-      onRetryTotals: () => {},
-    })
-    expect(html).toContain('We could not update the order totals')
-    expect(html).toContain('Retry')
-  })
-
-  it('renders no total row when the host supplies no totals and no retry action', () => {
-    const html = renderMarkup({ presentation: 'single-page', orderSummary: { items: summary.items } })
-    expect(html).toContain('Totals are unavailable')
-    expect(html).not.toContain('USD 0')
-  })
-})
-
-describe('Checkout — payment methods are data and carry no raw card input', () => {
-  const methods = [
-    {
-      id: 'pp_card',
-      name: 'Card',
-      type: 'card' as const,
-      isEnabled: true,
-      requiresSetup: false,
-      description: 'Pay by card',
-    },
-    {
-      id: 'pp_disabled',
-      name: 'Legacy transfer',
-      type: 'bank_transfer' as const,
-      isEnabled: false,
-      requiresSetup: false,
-      description: 'Not available in this region',
-    },
-  ]
-
-  it('renders one option per supplied method and the selected description', () => {
-    const html = renderMarkup({
-      presentation: 'single-page',
-      paymentMethods: methods,
-      values: { ...values, paymentMethod: 'pp_card' },
-    })
-    expect(html).toContain('Card')
-    expect(html).toContain('Pay by card')
-    expect(html).toContain('Legacy transfer')
-  })
-
-  it('renders no card number, expiry, CVV or cardholder input even for a card method', () => {
-    const html = renderMarkup({
-      presentation: 'single-page',
-      paymentMethods: methods,
-      values: { ...values, paymentMethod: 'pp_card' },
-    })
-    expect(html).not.toContain('checkout-card-number')
-    expect(html).not.toContain('checkout-expiry')
-    expect(html).not.toContain('checkout-cvv')
-    expect(html).not.toContain('checkout-card-name')
-    expect(html).not.toContain('CVV')
-  })
-
-  it('renders an empty state and keeps the rest of the checkout usable', () => {
-    const html = renderMarkup({ presentation: 'single-page', paymentMethods: [] })
-    expect(html).toContain('No payment methods are available for this region')
-    expect(html).toContain('Contact information')
-  })
-})
-
-describe('Checkout — truthful content and omitted unhandled controls', () => {
-  it('omits the promotional control when the host supplies no handler', () => {
-    const html = renderMarkup({ presentation: 'single-page', orderSummary: summary })
-    expect(html).not.toContain('checkout-promo-code')
-  })
-
-  it('renders the promotional control when the host wires a handler', () => {
-    const html = renderMarkup({
-      presentation: 'single-page',
-      orderSummary: summary,
-      onApplyPromo: () => {},
-    })
-    expect(html).toContain('checkout-promo-code')
-  })
-
-  it('omits consents the host did not wire and renders them when labelled', () => {
-    const withoutConsents = renderMarkup({ presentation: 'single-page' })
-    expect(withoutConsents).not.toContain('checkout-save-info')
-    expect(withoutConsents).not.toContain('checkout-newsletter')
-
-    const withConsents = renderMarkup({
-      presentation: 'single-page',
-      labels: { saveInfoLabel: 'Save my details', newsletterLabel: 'Send me offers' },
-    })
-    expect(withConsents).toContain('checkout-save-info')
-    expect(withConsents).toContain('checkout-newsletter')
-  })
-
-  it('omits absent images and keys duplicate names by backend identity', () => {
-    const html = renderMarkup({
-      presentation: 'single-page',
-      orderSummary: {
-        items: [
-          { id: 'line_1', name: 'Cable', quantity: 1, lineTotal: usd('5.00') },
-          { id: 'line_2', name: 'Cable', quantity: 2, lineTotal: usd('10.00') },
-        ],
-        totals: { subtotal: usd('15.00'), total: usd('15.00') },
-      },
-    })
-    expect(html).not.toContain('src=""')
-    expect(html.match(/Cable/g)?.length).toBe(2)
-    expect(html).not.toContain('Free shipping')
-  })
-})
-
-describe('Checkout — bounded presentations', () => {
-  it('renders only the active step in the stepper presentation', () => {
-    const html = renderMarkup({ presentation: 'stepper' })
-    expect(html).toContain('Contact information')
-    expect(html).not.toContain('Shipping address')
-    expect(html).toContain('Checkout progress')
-  })
-
-  it('renders every section in the single-page presentation with the summary first in DOM order', () => {
-    const html = renderMarkup({ presentation: 'single-page', orderSummary: summary })
-    expect(html).toContain('Contact information')
-    expect(html).toContain('Shipping address')
-    expect(html).toContain('Payment')
-    expect(html.indexOf('Order summary')).toBeLessThan(html.indexOf('Contact information'))
-  })
-
-  it('appends the review step when the review option is enabled', () => {
-    const withoutReview = renderMarkup({ presentation: 'stepper' })
-    expect(withoutReview).not.toContain('Review your order')
-
-    const withReview = renderMarkup({ presentation: 'stepper', showReviewStep: true, values })
-    expect(withReview).toContain('Review')
-  })
-
-  it('renders all supplied review values in the single-page review section', () => {
-    const html = renderMarkup({
-      presentation: 'single-page',
-      showReviewStep: true,
-      values,
-      paymentMethods: [
-        { id: 'pp_system_default', name: 'Manual TEST', type: 'cash_on_delivery', isEnabled: true, requiresSetup: false },
-      ],
-    })
-    expect(html).toContain('shopper@example.com')
-    expect(html).toContain('1 Analytical Way')
-    expect(html).toContain('Manual TEST')
-  })
-})
-
-describe('Checkout — copy and formatting', () => {
-  it('renders supplied labels instead of the defaults', () => {
-    const html = renderMarkup({
-      presentation: 'single-page',
-      labels: {
-        title: 'Finalizar compra',
-        emailLabel: 'Correo',
-        contactHeading: 'Datos de contacto',
-        completeOrderLabel: 'Confirmar pedido',
-      },
-    })
-    expect(html).toContain('Finalizar compra')
-    expect(html).toContain('Correo')
-    expect(html).toContain('Datos de contacto')
-    expect(html).toContain('Confirmar pedido')
-    expect(html).not.toContain('Contact information')
-  })
-
-  it('formats amounts through the supplied formatter without a hardcoded symbol', () => {
-    const html = renderMarkup({
-      presentation: 'single-page',
-      orderSummary: summary,
-      formatMoney: (money) => `${money.currencyCode} ${money.amount}`,
-    })
-    expect(html).toContain('USD 110.00')
-    expect(html).not.toContain('$110')
-  })
-})
-
-describe('Checkout — interactions', () => {
-  let container: HTMLElement
-  let root: Root
-  let user: ReturnType<typeof userEvent.setup>
-
-  beforeEach(() => {
-    container = document.createElement('div')
-    document.body.appendChild(container)
-    root = createRoot(container)
-    user = userEvent.setup()
-  })
-
-  afterEach(() => {
-    act(() => root.unmount())
-    container.remove()
-  })
-
-  const mount = (props: Partial<CheckoutProps> = {}) => {
-    act(() => {
-      root.render(<Checkout {...baseProps()} {...props} />)
-    })
-  }
-
-  const heading = () => container.querySelector('h2')?.textContent
-  const continueButton = () =>
-    Array.from(container.querySelectorAll('button')).find((button) =>
-      button.textContent?.includes('Continue'),
-    )!
-  const submitButton = () =>
-    Array.from(container.querySelectorAll('button')).find((button) => {
-      const text = button.textContent ?? ''
-      return text.includes('Place order') || text.includes('Placing order')
-    })!
-
-  it('does not pre-select a country, shipping option or payment method', () => {
-    mount({
-      presentation: 'single-page',
-      countries: [{ value: 'GB', label: 'United Kingdom' }],
-      shippingOptions: [{ id: 'sm_std', name: 'Standard', price: usd('5.00') }],
-      paymentMethods: [
-        { id: 'pp_card', name: 'Card', type: 'card', isEnabled: true, requiresSetup: false },
-      ],
-    })
-    const radios = Array.from(container.querySelectorAll('[role="radio"]'))
-    expect(radios.length).toBe(2)
-    expect(radios.every((radio) => radio.getAttribute('aria-checked') !== 'true')).toBe(true)
-    expect(container.querySelector('#checkout-country')?.textContent).toContain('Select a country')
-  })
-
-  it('reports every edit with its field and value in both presentations', async () => {
-    for (const presentation of ['stepper', 'single-page'] as const) {
-      const onChange = vi.fn()
-      mount({ presentation, onChange })
-      await user.type(container.querySelector('#checkout-email')!, 'a')
-      expect(onChange).toHaveBeenCalledWith('email', 'a')
-      act(() => root.unmount())
-      root = createRoot(container)
-    }
-  })
-
-  it('gates advancing on the injected validation and reports the step as a notification', async () => {
-    const onStepChange = vi.fn()
-    const validateStep = vi.fn(() => false)
-    mount({ onStepChange, validateStep })
-    await user.click(continueButton())
-    expect(heading()).toBe('Contact information')
-    expect(onStepChange).not.toHaveBeenCalled()
-
-    const validateAll = vi.fn(() => true)
-    mount({ onStepChange, validateStep: validateAll })
-    await user.click(continueButton())
-    expect(heading()).toBe('Shipping address')
-    expect(onStepChange).toHaveBeenCalledWith('shipping')
-  })
-
-  it('advances without a validation provider and moves focus to the step heading', async () => {
-    mount()
-    await user.click(continueButton())
-    expect(heading()).toBe('Shipping address')
-    expect(document.activeElement).toBe(container.querySelector('h2'))
-  })
-
-  it('marks the active step with aria-current', async () => {
-    mount({ showReviewStep: true })
-    await user.click(continueButton())
-    const current = container.querySelector('[aria-current="step"]')
-    expect(current?.textContent).toContain('Shipping')
-  })
-
-  it('requires every applicable step before reporting a submission', async () => {
-    const onSubmit = vi.fn()
-    mount({ validateStep: (step) => step !== 'payment', onSubmit })
-    await user.click(continueButton())
-    await user.click(continueButton())
-    expect(heading()).toBe('Payment')
-    await user.click(submitButton())
-    expect(onSubmit).not.toHaveBeenCalled()
-
-    mount({ validateStep: () => true, onSubmit, values })
-    await user.click(continueButton())
-    await user.click(continueButton())
-    await user.click(submitButton())
-    expect(onSubmit).toHaveBeenCalledWith(values)
-    expect(container.textContent).not.toMatch(/thank you|order confirmed|success/i)
-  })
-
-  it('blocks repeat activation while a submission is pending', async () => {
-    const onSubmit = vi.fn()
-    mount({ presentation: 'single-page', submitting: true, onSubmit })
-    const button = submitButton()
-    expect((button as HTMLButtonElement).disabled).toBe(true)
-    await user.click(button)
-    expect(onSubmit).not.toHaveBeenCalled()
-  })
-
-  it('surfaces a failed submission with recovery while keeping the entered values', async () => {
-    const onRetrySubmit = vi.fn()
-    mount({ presentation: 'single-page', values, submitError: 'Payment was declined', onRetrySubmit })
-    expect(container.querySelector('[role="alert"]')?.textContent).toContain('Payment was declined')
-    const retry = Array.from(container.querySelectorAll('button')).find((button) =>
-      button.textContent?.includes('Try again'),
-    )!
-    await user.click(retry)
-    expect(onRetrySubmit).toHaveBeenCalledTimes(1)
-    expect((container.querySelector('#checkout-email') as HTMLInputElement).value).toBe(
-      'shopper@example.com',
-    )
-  })
-
-  it('does not select a method the host marked unavailable', async () => {
-    const onChange = vi.fn()
-    mount({
-      presentation: 'single-page',
-      onChange,
-      paymentMethods: [
-        { id: 'pp_disabled', name: 'Legacy transfer', type: 'bank_transfer', isEnabled: false, requiresSetup: false },
-      ],
-    })
-    const radio = container.querySelector('#payment-pp_disabled') as HTMLButtonElement
-    expect(radio.disabled).toBe(true)
-    await user.click(radio)
-    expect(onChange).not.toHaveBeenCalledWith('paymentMethod', 'pp_disabled')
-  })
-
-  it('is fully keyboard reachable in document order', async () => {
-    mount({ presentation: 'single-page' })
-    const order: string[] = []
-    for (let step = 0; step < 30; step += 1) {
-      await user.tab()
-      const active = document.activeElement as HTMLElement | null
-      if (!active || active === document.body) break
-      order.push(active.id || active.getAttribute('role') || active.tagName)
-      if (active.textContent?.includes('Place order')) break
-    }
-    const email = order.indexOf('checkout-email')
-    const address = order.indexOf('checkout-address')
-    const submit = order.findIndex((entry) => entry === 'BUTTON' || entry.includes('Place order'))
-    expect(email).toBeGreaterThanOrEqual(0)
-    expect(address).toBeGreaterThan(email)
-    expect(submit).toBeGreaterThan(address)
-    expect(order.filter((entry) => entry.startsWith('checkout-')).length).toBeGreaterThanOrEqual(9)
-  })
-
-  it('selects a shipping option through the host callback', async () => {
-    const onSelectShippingOption = vi.fn()
-    mount({
-      presentation: 'single-page',
-      onSelectShippingOption,
-      shippingOptions: [{ id: 'sm_exp', name: 'Express', price: usd('15.00') }],
-    })
-    await user.click(container.querySelector('#shipping-sm_exp')!)
-    expect(onSelectShippingOption).toHaveBeenCalledWith('sm_exp')
-  })
-})