import React from 'react'
import renderer from 'react-test-renderer'

import Tabs, { TabNav, TabPane } from '.'

describe('Tabs', () => {
  test('basic.', () => {
    const tree = renderer.create(
      <Tabs defaultValue="2">
        <TabPane name="选项一" value="1">
          first
        </TabPane>
        <TabPane name="选中项" value="2">
          second
        </TabPane>
        <TabPane name="选项三" value="3">
          third
        </TabPane>
      </Tabs>
    ).toJSON()
    expect(tree).toMatchSnapshot()
  })
  test('vertical', () => {
    const tree = renderer.create(
      <Tabs defaultValue="2" type="vertical">
        <TabPane name="选项一" value="1">
          first
        </TabPane>
        <TabPane name="选中项" value="2">
          second
        </TabPane>
        <TabPane name="选项三" value="3">
          third third third third third third third third third third third
          third third third third third third third third third third third
          third third third third third third third third third third third
        </TabPane>
      </Tabs>
    ).toJSON()
    expect(tree).toMatchSnapshot()
  })
  test('button like', () => {
    const tree = renderer.create(
      <Tabs defaultValue="2" type="button">
        <TabPane name="选项一" value="1">
          first
        </TabPane>
        <TabPane name="选中项" value="2">
          second
        </TabPane>
        <TabPane name="选项三" value="3">
          third
        </TabPane>
      </Tabs>
    ).toJSON()
    expect(tree).toMatchSnapshot()
  })
  test('TabNav only', () => {
    const tree = renderer.create(
      <Tabs defaultValue="1">
        <TabNav value="1">
          选项一
        </TabNav>
        <TabNav value="2">
          选项二
        </TabNav>
        <TabNav value="3">
          选项三
        </TabNav>
      </Tabs >
    ).toJSON()
    expect(tree).toMatchSnapshot()
  })
  test('extra.', () => {
    const tree = renderer.create(
      <Tabs defaultValue="2" extra="extra content">
        <TabPane name="选项一" value="1">
          first
        </TabPane>
        <TabPane name="选中项" value="2">
          second
        </TabPane>
        <TabPane name="选项三" value="3">
          third
        </TabPane>
      </Tabs>
    ).toJSON()
    expect(tree).toMatchSnapshot()
  })
})