import { render } from '@testing-library/react'

import MaterialGrid from '@/components/home/MaterialGrid'

jest.mock('@/components/home/MaterialCard', () => ({
  __esModule: true,
  default: () => <article data-testid="material-card" />,
}))

describe('MaterialGrid', () => {
  test('加载骨架与素材卡片使用相同的 400px 预览高度', () => {
    const { container } = render(
      <MaterialGrid
        materials={[]}
        displayedCount={0}
        session={null}
        loading
        isTransitionLoading={false}
        playingAudioId={null}
        audioElement={null}
        audioProgress={0}
        audioCurrentTime={0}
        audioDuration={0}
        audioRef={{ current: null }}
        downloadingId={null}
        downloadProgress={0}
        themeColor="#1a1c1d"
        hasFilters={false}
        onAudioPlay={jest.fn()}
        onDownload={jest.fn()}
        onLike={jest.fn()}
        onFavorite={jest.fn()}
        onShare={jest.fn()}
        onEdit={jest.fn()}
        onDelete={jest.fn()}
        onMaterialClick={jest.fn()}
        onRetryTranscode={jest.fn()}
        showToast={jest.fn()}
      />,
    )

    const skeletonPreview = container.querySelector('article > div')
    expect(skeletonPreview).toHaveClass('h-[400px]')
    expect(skeletonPreview).not.toHaveClass('aspect-[4/3]')
  })
})