import React from 'react'
import { create, act, ReactTestRenderer } from 'react-test-renderer'

import { Checkbox, CheckboxGroup, CheckAll } from '.'
import { Form, FormItem } from '../Form'

describe('Checkbox', () => {
  test('single checkbox.', () => {
    const tree = create(
      <Checkbox defaultChecked>Checkbox</Checkbox>
    ).toJSON()
    expect(tree).toMatchSnapshot()
  })

  test('checkbox group.', () => {
    const options = ['A', 'B', 'C', 'D']
    let renderer: ReactTestRenderer
    act(() => { // act 等 options register 完成
      renderer = create(
        <CheckboxGroup value={['A', 'B', 'C']}>
          <CheckAll />
          {options.map(v => <Checkbox key={v} value={v}>{v}</Checkbox>)}
        </CheckboxGroup>
      )
    })
    expect(renderer!.toJSON()).toMatchSnapshot()
  })

  test('sized checkbox group.', () => {
    const tree = create(
      <>
        <Form size="small" footer={null}>
          <FormItem label="checkbox group">
            {/* group size 优先于 form size */}
            <CheckboxGroup size="large">
              <Checkbox key={1} value="A">A</Checkbox>
              <Checkbox key={2} value="B">B</Checkbox>)
            </CheckboxGroup>
          </FormItem>
        </Form>
        {/* Checkbox size 优先于 group size */}
        <CheckboxGroup size="large">
          <Checkbox key={1} value="A">A</Checkbox>
          <Checkbox key={2} value="B" size="small">B</Checkbox>)
        </CheckboxGroup>
      </>
    ).toJSON()
    expect(tree).toMatchSnapshot()
  })
})