import { describe, it, expect } from 'vitest'
import { render } from '@testing-library/react'
import { Subheader } from './subheader'

describe('<Subheader>', () => {
  it('renders children inside a Box', () => {
    const { getByText } = render(
      <Subheader>
        <span>left</span>
        <span>right</span>
      </Subheader>,
    )
    expect(getByText('left')).toBeTruthy()
    expect(getByText('right')).toBeTruthy()
  })

  it('merges caller-supplied sx onto the root', () => {
    const { container } = render(
      <Subheader sx={{ mt: 4 }}>
        <span>x</span>
      </Subheader>,
    )
    expect(container.firstChild).not.toBeNull()
    // Class-based assertions are brittle; settle for "an element renders + a
    // single child slot exists" — sx forwarding gets exercised at the
    // import/MUI level so we don't need to inspect emotion-generated class
    // names.
    expect(container.querySelectorAll('span').length).toBe(1)
  })
})