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

import TabGroup, { Tab } from '@/components/common/TabGroup'

describe ('TabGroup', () => {
  it ('uses the init tab and switches tabs when clicked', () => {
    render (
        <TabGroup>
          <Tab name="A">Alpha</Tab>
          <Tab name="B" init>Beta</Tab>
        </TabGroup>,
    )

    expect (screen.queryByText ('Alpha')).not.toBeInTheDocument ()
    expect (screen.getByText ('Beta')).toBeInTheDocument ()

    fireEvent.click (screen.getByText ('A'))

    expect (screen.getByText ('Alpha')).toBeInTheDocument ()
    expect (screen.queryByText ('Beta')).not.toBeInTheDocument ()
  })

  it ('renders tabs as buttons and shows the right addon', () => {
    render (
        <TabGroup rightAddon={<span>件数 20</span>}>
          <Tab name="広場">Plaza</Tab>
        </TabGroup>,
    )

    expect (screen.getByRole ('button', { name: '広場' })).toBeInTheDocument ()
    expect (screen.queryByRole ('link', { name: '広場' })).not.toBeInTheDocument ()
    expect (screen.getByText ('件数 20')).toBeInTheDocument ()
  })
})