admin/components/forms/ConsumerFormLayout.test.tsx

import { cleanup, render, screen } from '@testing-library/react'
import { afterEach, describe, expect, it } from 'vitest'

import { ConsumerFormActions, ConsumerFormSection, ConsumerFormShell } from '@/components/forms/ConsumerFormLayout'

afterEach(cleanup)

describe('ConsumerFormLayout', () => {
  it('provides a labelled surface for related fields', () => {
    render(
      <ConsumerFormSection
        description="توضیح بخش"
        title="اطلاعات شخصی"
      >
        <label htmlFor="name">نام</label>
        <input id="name" />
      </ConsumerFormSection>
    )

    expect(screen.getByRole('heading', { level: 2, name: 'اطلاعات شخصی' })).toBeInTheDocument()
    expect(screen.getByText('توضیح بخش')).toBeInTheDocument()
    expect(screen.getByRole('textbox', { name: 'نام' })).toBeInTheDocument()
  })

  it('keeps helper content next to form actions', () => {
    render(
      <ConsumerFormActions helper={<span>تغییرات ذخیره‌نشده دارید</span>}>
        <button type="submit">ذخیره</button>
      </ConsumerFormActions>
    )

    expect(screen.getByText('تغییرات ذخیره‌نشده دارید')).toBeInTheDocument()
    expect(screen.getByRole('button', { name: 'ذخیره' })).toBeInTheDocument()
  })

  it('provides one consistent shell for task-oriented consumer forms', () => {
    render(
      <ConsumerFormShell
        description="فرم را مرحله‌به‌مرحله کامل کنید"
        progress={<div>مرحله ۱ از ۴</div>}
        status="ذخیره خودکار"
        title="ساخت رویداد"
        utilityAction={<button type="button">شروع از ابتدا</button>}
      >
        <p>محتوای فرم</p>
      </ConsumerFormShell>
    )

    expect(screen.getByRole('heading', { level: 1, name: 'ساخت رویداد' })).toBeInTheDocument()
    expect(screen.getByText('ذخیره خودکار')).toBeInTheDocument()
    expect(screen.getByText('مرحله ۱ از ۴')).toBeInTheDocument()
    expect(screen.getByRole('button', { name: 'شروع از ابتدا' })).toBeInTheDocument()
  })

  it('can keep form chrome static while the body scrolls independently', () => {
    const { container } = render(
      <ConsumerFormShell
        scrollable
        progress={<div>مراحل ساخت</div>}
        title="ساخت رویداد"
      >
        <p>محتوای بلند فرم</p>
      </ConsumerFormShell>
    )

    const scrollport = container.querySelector('.overflow-y-auto')

    expect(scrollport).toHaveTextContent('محتوای بلند فرم')
    expect(scrollport).not.toContainElement(screen.getByText('مراحل ساخت'))
  })
})