@startsimpli/ui 0.4.6 → 0.4.8

package/src/components/compose/__tests__/compose.test.tsx

@@ -0,0 +1,656 @@
+import { render, screen, fireEvent, act, waitFor } from '@testing-library/react'
+import { renderHook } from '@testing-library/react'
+import { useAutoSave } from '../useAutoSave'
+import { SendConfirmationDialog } from '../send-confirmation-dialog'
+import { ComposeHeader } from '../compose-header'
+import { SaveStatusIndicator } from '../save-status-indicator'
+import { SubjectInput } from '../subject-input'
+import { ComposeLoading } from '../compose-loading'
+
+// Mock Radix portal to render inline for all dialog tests
+jest.mock('@radix-ui/react-dialog', () => {
+  const actual = jest.requireActual('@radix-ui/react-dialog')
+  return {
+    ...actual,
+    Portal: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+  }
+})
+
+// ---------------------------------------------------------------------------
+// useAutoSave
+// ---------------------------------------------------------------------------
+
+describe('useAutoSave', () => {
+  beforeEach(() => {
+    jest.useFakeTimers()
+  })
+
+  afterEach(() => {
+    jest.runOnlyPendingTimers()
+    jest.useRealTimers()
+  })
+
+  it('initializes with no unsaved changes when content matches snapshot', () => {
+    const onSave = jest.fn().mockResolvedValue(undefined)
+    const { result } = renderHook(() =>
+      useAutoSave({ serializedContent: '', onSave, delay: 1000 })
+    )
+    // lastSavedContentRef starts as '' and serializedContent is '' — no changes
+    expect(result.current.hasUnsavedChanges).toBe(false)
+  })
+
+  it('detects unsaved changes when serializedContent differs from snapshot', () => {
+    const onSave = jest.fn().mockResolvedValue(undefined)
+    const { result } = renderHook(() =>
+      useAutoSave({ serializedContent: 'hello world', onSave, delay: 1000 })
+    )
+    // lastSavedContentRef.current is '' but serializedContent is 'hello world'
+    expect(result.current.hasUnsavedChanges).toBe(true)
+  })
+
+  it('fires onSave after the debounce delay when content has changed', async () => {
+    const onSave = jest.fn().mockResolvedValue(undefined)
+    renderHook(() =>
+      useAutoSave({ serializedContent: 'changed', onSave, delay: 1000 })
+    )
+    expect(onSave).not.toHaveBeenCalled()
+    act(() => {
+      jest.advanceTimersByTime(1000)
+    })
+    expect(onSave).toHaveBeenCalledTimes(1)
+    expect(onSave).toHaveBeenCalledWith(false)
+  })
+
+  it('does not fire onSave when content matches the snapshot', () => {
+    const onSave = jest.fn().mockResolvedValue(undefined)
+    const { result } = renderHook(() =>
+      useAutoSave({ serializedContent: '', onSave, delay: 1000 })
+    )
+    // Take a snapshot of the initial content so they match
+    act(() => {
+      result.current.snapshotContent('')
+    })
+    act(() => {
+      jest.advanceTimersByTime(2000)
+    })
+    expect(onSave).not.toHaveBeenCalled()
+  })
+
+  it('tracks that snapshotContent updates the saved-content reference', () => {
+    // snapshotContent stores the "known saved" baseline in a ref.
+    // The hasUnsavedChanges flag is derived by comparing serializedContent to
+    // that ref inside a useEffect. This test verifies the snapshot mechanism:
+    // start with no changes, take a snapshot of new content, then verify the
+    // hook re-evaluates when content changes relative to that snapshot.
+    const onSave = jest.fn().mockResolvedValue(undefined)
+    const { result, rerender } = renderHook(
+      ({ content }: { content: string }) =>
+        useAutoSave({ serializedContent: content, onSave, delay: 1000 }),
+      { initialProps: { content: '' } }
+    )
+    // Empty string matches initial ref — no unsaved changes
+    expect(result.current.hasUnsavedChanges).toBe(false)
+
+    // Snapshot '' as the saved state, then change content to 'edited'
+    act(() => {
+      result.current.snapshotContent('')
+      rerender({ content: 'edited' })
+    })
+    // 'edited' !== '' (snapshotted) — changes should now be detected
+    expect(result.current.hasUnsavedChanges).toBe(true)
+  })
+
+  it('debounces: only fires once when content changes rapidly', () => {
+    const onSave = jest.fn().mockResolvedValue(undefined)
+    const { rerender } = renderHook(
+      ({ content }: { content: string }) =>
+        useAutoSave({ serializedContent: content, onSave, delay: 1000 }),
+      { initialProps: { content: 'v1' } }
+    )
+    rerender({ content: 'v2' })
+    rerender({ content: 'v3' })
+    act(() => {
+      jest.advanceTimersByTime(1000)
+    })
+    expect(onSave).toHaveBeenCalledTimes(1)
+  })
+
+  it('uses default delay of 30000ms when no delay is provided', () => {
+    const onSave = jest.fn().mockResolvedValue(undefined)
+    renderHook(() =>
+      useAutoSave({ serializedContent: 'some content', onSave })
+    )
+    act(() => {
+      jest.advanceTimersByTime(29999)
+    })
+    expect(onSave).not.toHaveBeenCalled()
+    act(() => {
+      jest.advanceTimersByTime(1)
+    })
+    expect(onSave).toHaveBeenCalledTimes(1)
+  })
+
+  it('clears the timer on unmount to prevent calling save after cleanup', () => {
+    const onSave = jest.fn().mockResolvedValue(undefined)
+    const { unmount } = renderHook(() =>
+      useAutoSave({ serializedContent: 'will unmount', onSave, delay: 1000 })
+    )
+    unmount()
+    act(() => {
+      jest.advanceTimersByTime(2000)
+    })
+    expect(onSave).not.toHaveBeenCalled()
+  })
+
+  describe('setSaving / setLastSaved', () => {
+    it('exposes setSaving to update saving state', () => {
+      const onSave = jest.fn().mockResolvedValue(undefined)
+      const { result } = renderHook(() =>
+        useAutoSave({ serializedContent: '', onSave, delay: 1000 })
+      )
+      expect(result.current.saving).toBe(false)
+      act(() => {
+        result.current.setSaving(true)
+      })
+      expect(result.current.saving).toBe(true)
+    })
+
+    it('exposes setLastSaved to update lastSaved date', () => {
+      const onSave = jest.fn().mockResolvedValue(undefined)
+      const { result } = renderHook(() =>
+        useAutoSave({ serializedContent: '', onSave, delay: 1000 })
+      )
+      expect(result.current.lastSaved).toBeNull()
+      const now = new Date()
+      act(() => {
+        result.current.setLastSaved(now)
+      })
+      expect(result.current.lastSaved).toBe(now)
+    })
+  })
+
+  describe('formatLastSaved', () => {
+    it('returns null when lastSaved is null', () => {
+      const onSave = jest.fn().mockResolvedValue(undefined)
+      const { result } = renderHook(() =>
+        useAutoSave({ serializedContent: '', onSave })
+      )
+      expect(result.current.formatLastSaved()).toBeNull()
+    })
+
+    it('returns "just now" when saved less than 60 seconds ago', () => {
+      const onSave = jest.fn().mockResolvedValue(undefined)
+      const { result } = renderHook(() =>
+        useAutoSave({ serializedContent: '', onSave })
+      )
+      act(() => {
+        result.current.setLastSaved(new Date(Date.now() - 30000))
+      })
+      expect(result.current.formatLastSaved()).toBe('just now')
+    })
+
+    it('returns minutes ago when saved between 1 and 60 minutes ago', () => {
+      const onSave = jest.fn().mockResolvedValue(undefined)
+      const { result } = renderHook(() =>
+        useAutoSave({ serializedContent: '', onSave })
+      )
+      act(() => {
+        result.current.setLastSaved(new Date(Date.now() - 5 * 60000))
+      })
+      expect(result.current.formatLastSaved()).toBe('5m ago')
+    })
+
+    it('returns locale time string when saved more than 60 minutes ago', () => {
+      const onSave = jest.fn().mockResolvedValue(undefined)
+      const { result } = renderHook(() =>
+        useAutoSave({ serializedContent: '', onSave })
+      )
+      const savedDate = new Date(Date.now() - 2 * 3600000)
+      act(() => {
+        result.current.setLastSaved(savedDate)
+      })
+      expect(result.current.formatLastSaved()).toBe(savedDate.toLocaleTimeString())
+    })
+
+    it('returns null for an invalid Date', () => {
+      const onSave = jest.fn().mockResolvedValue(undefined)
+      const { result } = renderHook(() =>
+        useAutoSave({ serializedContent: '', onSave })
+      )
+      act(() => {
+        result.current.setLastSaved(new Date('invalid'))
+      })
+      expect(result.current.formatLastSaved()).toBeNull()
+    })
+  })
+
+  describe('beforeunload listener', () => {
+    it('adds a beforeunload listener when there are unsaved changes', () => {
+      const addSpy = jest.spyOn(window, 'addEventListener')
+      const onSave = jest.fn().mockResolvedValue(undefined)
+      renderHook(() =>
+        useAutoSave({ serializedContent: 'unsaved', onSave, delay: 1000 })
+      )
+      const calls = addSpy.mock.calls.filter(([event]) => event === 'beforeunload')
+      expect(calls.length).toBeGreaterThan(0)
+      addSpy.mockRestore()
+    })
+
+    it('prevents navigation when there are unsaved changes', () => {
+      const onSave = jest.fn().mockResolvedValue(undefined)
+      renderHook(() =>
+        useAutoSave({ serializedContent: 'unsaved', onSave, delay: 1000 })
+      )
+      const event = new Event('beforeunload') as BeforeUnloadEvent
+      Object.defineProperty(event, 'returnValue', { writable: true, value: '' })
+      const preventDefaultSpy = jest.spyOn(event, 'preventDefault')
+      window.dispatchEvent(event)
+      expect(preventDefaultSpy).toHaveBeenCalled()
+    })
+
+    it('removes the beforeunload listener on unmount', () => {
+      const removeSpy = jest.spyOn(window, 'removeEventListener')
+      const onSave = jest.fn().mockResolvedValue(undefined)
+      const { unmount } = renderHook(() =>
+        useAutoSave({ serializedContent: 'unsaved', onSave, delay: 1000 })
+      )
+      unmount()
+      const calls = removeSpy.mock.calls.filter(([event]) => event === 'beforeunload')
+      expect(calls.length).toBeGreaterThan(0)
+      removeSpy.mockRestore()
+    })
+  })
+})
+
+// ---------------------------------------------------------------------------
+// SendConfirmationDialog
+// ---------------------------------------------------------------------------
+
+describe('SendConfirmationDialog', () => {
+  const defaultProps = {
+    open: true,
+    onOpenChange: jest.fn(),
+    onConfirm: jest.fn(),
+    sending: false,
+    summaryItems: [
+      { label: 'Recipients', value: '42 contacts' },
+      { label: 'Subject', value: 'Q1 Update' },
+    ],
+  }
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('renders the default title', () => {
+    render(<SendConfirmationDialog {...defaultProps} />)
+    expect(screen.getByText('Send Update')).toBeInTheDocument()
+  })
+
+  it('renders a custom title', () => {
+    render(<SendConfirmationDialog {...defaultProps} title="Send Campaign" />)
+    expect(screen.getByText('Send Campaign')).toBeInTheDocument()
+  })
+
+  it('renders the default description', () => {
+    render(<SendConfirmationDialog {...defaultProps} />)
+    expect(screen.getByText('Are you ready to send this?')).toBeInTheDocument()
+  })
+
+  it('renders a custom description', () => {
+    render(
+      <SendConfirmationDialog {...defaultProps} description="Please confirm the send." />
+    )
+    expect(screen.getByText('Please confirm the send.')).toBeInTheDocument()
+  })
+
+  it('renders all summary item labels and values', () => {
+    render(<SendConfirmationDialog {...defaultProps} />)
+    expect(screen.getByText('Recipients:')).toBeInTheDocument()
+    expect(screen.getByText('42 contacts')).toBeInTheDocument()
+    expect(screen.getByText('Subject:')).toBeInTheDocument()
+    expect(screen.getByText('Q1 Update')).toBeInTheDocument()
+  })
+
+  it('renders the default warning message', () => {
+    render(<SendConfirmationDialog {...defaultProps} />)
+    expect(
+      screen.getByText(/Emails will be sent immediately/)
+    ).toBeInTheDocument()
+  })
+
+  it('renders a custom warning message', () => {
+    render(
+      <SendConfirmationDialog {...defaultProps} warningMessage="This action cannot be undone." />
+    )
+    expect(screen.getByText('This action cannot be undone.')).toBeInTheDocument()
+  })
+
+  it('does not render a warning block when warningMessage is empty string', () => {
+    const { container } = render(
+      <SendConfirmationDialog {...defaultProps} warningMessage="" />
+    )
+    expect(container.querySelector('.bg-amber-50')).not.toBeInTheDocument()
+  })
+
+  it('calls onConfirm when "Send Now" is clicked', () => {
+    render(<SendConfirmationDialog {...defaultProps} />)
+    fireEvent.click(screen.getByText('Send Now'))
+    expect(defaultProps.onConfirm).toHaveBeenCalledTimes(1)
+  })
+
+  it('calls onOpenChange(false) when Cancel is clicked', () => {
+    render(<SendConfirmationDialog {...defaultProps} />)
+    fireEvent.click(screen.getByText('Cancel'))
+    expect(defaultProps.onOpenChange).toHaveBeenCalledWith(false)
+  })
+
+  it('disables both buttons while sending', () => {
+    render(<SendConfirmationDialog {...defaultProps} sending />)
+    const cancelBtn = screen.getByText('Cancel').closest('button')
+    const sendingBtn = screen.getByText('Sending...').closest('button')
+    expect(cancelBtn).toBeDisabled()
+    expect(sendingBtn).toBeDisabled()
+  })
+
+  it('shows "Sending..." with a spinner while sending', () => {
+    const { container } = render(<SendConfirmationDialog {...defaultProps} sending />)
+    expect(screen.getByText('Sending...')).toBeInTheDocument()
+    expect(container.querySelector('.animate-spin')).toBeInTheDocument()
+  })
+
+  it('shows "Send Now" when not sending', () => {
+    render(<SendConfirmationDialog {...defaultProps} />)
+    expect(screen.getByText('Send Now')).toBeInTheDocument()
+    expect(screen.queryByText('Sending...')).not.toBeInTheDocument()
+  })
+
+  it('renders multiple summary items correctly', () => {
+    const items = [
+      { label: 'To', value: '100 contacts' },
+      { label: 'From', value: 'hello@example.com' },
+      { label: 'Schedule', value: 'Immediately' },
+    ]
+    render(<SendConfirmationDialog {...defaultProps} summaryItems={items} />)
+    expect(screen.getByText('To:')).toBeInTheDocument()
+    expect(screen.getByText('100 contacts')).toBeInTheDocument()
+    expect(screen.getByText('From:')).toBeInTheDocument()
+    expect(screen.getByText('hello@example.com')).toBeInTheDocument()
+    expect(screen.getByText('Schedule:')).toBeInTheDocument()
+    expect(screen.getByText('Immediately')).toBeInTheDocument()
+  })
+
+  it('does not render when open is false', () => {
+    render(<SendConfirmationDialog {...defaultProps} open={false} />)
+    expect(screen.queryByText('Send Update')).not.toBeInTheDocument()
+  })
+})
+
+// ---------------------------------------------------------------------------
+// ComposeHeader
+// ---------------------------------------------------------------------------
+
+describe('ComposeHeader', () => {
+  const defaultProps = {
+    title: 'Monthly Newsletter',
+    saving: false,
+    lastSavedLabel: null,
+    hasUnsavedChanges: false,
+    canSend: true,
+    onBack: jest.fn(),
+    onSave: jest.fn(),
+    onPreview: jest.fn(),
+    onSend: jest.fn(),
+  }
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('renders the title', () => {
+    render(<ComposeHeader {...defaultProps} />)
+    expect(screen.getByText('Monthly Newsletter')).toBeInTheDocument()
+  })
+
+  it('calls onBack when the back button is clicked', () => {
+    render(<ComposeHeader {...defaultProps} />)
+    // ArrowLeft icon button — find by its container role since it has no label text
+    const buttons = screen.getAllByRole('button')
+    // First button is the back button (ghost icon button)
+    fireEvent.click(buttons[0])
+    expect(defaultProps.onBack).toHaveBeenCalledTimes(1)
+  })
+
+  it('calls onSave when Save is clicked', () => {
+    render(<ComposeHeader {...defaultProps} />)
+    fireEvent.click(screen.getByText('Save'))
+    expect(defaultProps.onSave).toHaveBeenCalledTimes(1)
+  })
+
+  it('calls onPreview when Preview is clicked', () => {
+    render(<ComposeHeader {...defaultProps} />)
+    fireEvent.click(screen.getByText('Preview'))
+    expect(defaultProps.onPreview).toHaveBeenCalledTimes(1)
+  })
+
+  it('calls onSend when Send is clicked', () => {
+    render(<ComposeHeader {...defaultProps} />)
+    fireEvent.click(screen.getByText('Send'))
+    expect(defaultProps.onSend).toHaveBeenCalledTimes(1)
+  })
+
+  it('disables Save button while saving', () => {
+    render(<ComposeHeader {...defaultProps} saving />)
+    const saveBtn = screen.getByText('Save').closest('button')
+    expect(saveBtn).toBeDisabled()
+  })
+
+  it('disables Send button when canSend is false', () => {
+    render(<ComposeHeader {...defaultProps} canSend={false} />)
+    const sendBtn = screen.getByText('Send').closest('button')
+    expect(sendBtn).toBeDisabled()
+  })
+
+  it('enables Send button when canSend is true', () => {
+    render(<ComposeHeader {...defaultProps} canSend />)
+    const sendBtn = screen.getByText('Send').closest('button')
+    expect(sendBtn).not.toBeDisabled()
+  })
+
+  it('renders extraActions when provided', () => {
+    render(
+      <ComposeHeader
+        {...defaultProps}
+        extraActions={<button data-testid="extra-action">Schedule</button>}
+      />
+    )
+    expect(screen.getByTestId('extra-action')).toBeInTheDocument()
+  })
+
+  it('renders SaveStatusIndicator with the correct props (saving state)', () => {
+    render(<ComposeHeader {...defaultProps} saving />)
+    expect(screen.getByText('Saving...')).toBeInTheDocument()
+  })
+
+  it('renders SaveStatusIndicator with lastSavedLabel', () => {
+    render(<ComposeHeader {...defaultProps} lastSavedLabel="just now" />)
+    expect(screen.getByText('Saved just now')).toBeInTheDocument()
+  })
+
+  it('renders SaveStatusIndicator showing unsaved changes', () => {
+    render(<ComposeHeader {...defaultProps} hasUnsavedChanges />)
+    expect(screen.getByText('Unsaved changes')).toBeInTheDocument()
+  })
+})
+
+// ---------------------------------------------------------------------------
+// SaveStatusIndicator
+// ---------------------------------------------------------------------------
+
+describe('SaveStatusIndicator', () => {
+  it('shows "Saving..." when saving is true', () => {
+    render(
+      <SaveStatusIndicator saving lastSavedLabel={null} hasUnsavedChanges={false} />
+    )
+    expect(screen.getByText('Saving...')).toBeInTheDocument()
+  })
+
+  it('shows a spinning loader icon when saving', () => {
+    const { container } = render(
+      <SaveStatusIndicator saving lastSavedLabel={null} hasUnsavedChanges={false} />
+    )
+    expect(container.querySelector('.animate-spin')).toBeInTheDocument()
+  })
+
+  it('shows "Saved <label>" when lastSavedLabel is provided and not saving', () => {
+    render(
+      <SaveStatusIndicator saving={false} lastSavedLabel="just now" hasUnsavedChanges={false} />
+    )
+    expect(screen.getByText('Saved just now')).toBeInTheDocument()
+  })
+
+  it('shows "Unsaved changes" when hasUnsavedChanges is true and no lastSavedLabel', () => {
+    render(
+      <SaveStatusIndicator saving={false} lastSavedLabel={null} hasUnsavedChanges />
+    )
+    expect(screen.getByText('Unsaved changes')).toBeInTheDocument()
+  })
+
+  it('shows "New draft" when not saving, no lastSavedLabel, no unsaved changes', () => {
+    render(
+      <SaveStatusIndicator saving={false} lastSavedLabel={null} hasUnsavedChanges={false} />
+    )
+    expect(screen.getByText('New draft')).toBeInTheDocument()
+  })
+
+  it('prioritizes "Saving..." over other states when saving=true', () => {
+    render(
+      <SaveStatusIndicator saving lastSavedLabel="just now" hasUnsavedChanges />
+    )
+    expect(screen.getByText('Saving...')).toBeInTheDocument()
+    expect(screen.queryByText('Saved just now')).not.toBeInTheDocument()
+    expect(screen.queryByText('Unsaved changes')).not.toBeInTheDocument()
+  })
+
+  it('prioritizes lastSavedLabel over unsaved changes when not saving', () => {
+    render(
+      <SaveStatusIndicator saving={false} lastSavedLabel="5m ago" hasUnsavedChanges />
+    )
+    expect(screen.getByText('Saved 5m ago')).toBeInTheDocument()
+    expect(screen.queryByText('Unsaved changes')).not.toBeInTheDocument()
+  })
+
+  it('shows amber dot for unsaved changes', () => {
+    const { container } = render(
+      <SaveStatusIndicator saving={false} lastSavedLabel={null} hasUnsavedChanges />
+    )
+    expect(container.querySelector('.bg-amber-400')).toBeInTheDocument()
+  })
+
+  it('shows green dot when lastSavedLabel is set', () => {
+    const { container } = render(
+      <SaveStatusIndicator saving={false} lastSavedLabel="just now" hasUnsavedChanges={false} />
+    )
+    expect(container.querySelector('.bg-green-500')).toBeInTheDocument()
+  })
+
+  it('shows a bordered dot (new draft state) when no changes and no lastSavedLabel', () => {
+    const { container } = render(
+      <SaveStatusIndicator saving={false} lastSavedLabel={null} hasUnsavedChanges={false} />
+    )
+    const dot = container.querySelector('.border.border-muted-foreground')
+    expect(dot).toBeInTheDocument()
+  })
+})
+
+// ---------------------------------------------------------------------------
+// SubjectInput
+// ---------------------------------------------------------------------------
+
+describe('SubjectInput', () => {
+  it('renders an input with the given value', () => {
+    render(<SubjectInput value="Hello World" onChange={jest.fn()} />)
+    const input = screen.getByRole('textbox')
+    expect(input).toHaveValue('Hello World')
+  })
+
+  it('renders an empty input when value is empty string', () => {
+    render(<SubjectInput value="" onChange={jest.fn()} />)
+    expect(screen.getByRole('textbox')).toHaveValue('')
+  })
+
+  it('calls onChange with the new value when user types', () => {
+    const onChange = jest.fn()
+    render(<SubjectInput value="" onChange={onChange} />)
+    fireEvent.change(screen.getByRole('textbox'), { target: { value: 'New subject' } })
+    expect(onChange).toHaveBeenCalledWith('New subject')
+    expect(onChange).toHaveBeenCalledTimes(1)
+  })
+
+  it('renders with the default placeholder', () => {
+    render(<SubjectInput value="" onChange={jest.fn()} />)
+    expect(screen.getByPlaceholderText('Subject line...')).toBeInTheDocument()
+  })
+
+  it('renders with a custom placeholder', () => {
+    render(
+      <SubjectInput value="" onChange={jest.fn()} placeholder="Enter subject..." />
+    )
+    expect(screen.getByPlaceholderText('Enter subject...')).toBeInTheDocument()
+  })
+
+  it('has id="subject" for label association', () => {
+    render(<SubjectInput value="Test" onChange={jest.fn()} />)
+    expect(screen.getByRole('textbox')).toHaveAttribute('id', 'subject')
+  })
+
+  it('does not call onChange when value prop changes without user interaction', () => {
+    const onChange = jest.fn()
+    const { rerender } = render(<SubjectInput value="v1" onChange={onChange} />)
+    rerender(<SubjectInput value="v2" onChange={onChange} />)
+    expect(onChange).not.toHaveBeenCalled()
+  })
+})
+
+// ---------------------------------------------------------------------------
+// ComposeLoading
+// ---------------------------------------------------------------------------
+
+describe('ComposeLoading', () => {
+  it('renders without crashing', () => {
+    const { container } = render(<ComposeLoading />)
+    expect(container.firstChild).toBeInTheDocument()
+  })
+
+  it('renders within a padded container', () => {
+    const { container } = render(<ComposeLoading />)
+    expect(container.querySelector('.p-6')).toBeInTheDocument()
+  })
+
+  it('renders an animate-pulse wrapper for the skeleton', () => {
+    const { container } = render(<ComposeLoading />)
+    expect(container.querySelector('.animate-pulse')).toBeInTheDocument()
+  })
+
+  it('renders three distinct skeleton blocks', () => {
+    const { container } = render(<ComposeLoading />)
+    // header skeleton, subject/toolbar skeleton, body skeleton
+    const skeletonBlocks = container.querySelectorAll('.animate-pulse > div')
+    expect(skeletonBlocks.length).toBe(3)
+  })
+
+  it('renders the header skeleton with a narrower width', () => {
+    const { container } = render(<ComposeLoading />)
+    const headerBlock = container.querySelector('.w-1\\/4')
+    expect(headerBlock).toBeInTheDocument()
+  })
+
+  it('renders full-width skeleton blocks for content areas', () => {
+    const { container } = render(<ComposeLoading />)
+    const animatePulse = container.querySelector('.animate-pulse')
+    const divs = animatePulse?.querySelectorAll(':scope > div')
+    // Blocks 2 and 3 should not have a width constraint (full width)
+    expect(divs?.[1]).not.toHaveClass('w-1/4')
+    expect(divs?.[2]).not.toHaveClass('w-1/4')
+  })
+})