import { create } from 'react-test-renderer'
import { toMultiState as toState } from '../Select/state'
import SelectDropDown from '../SelectDropDown'
import { Button, ButtonProps, ButtonWrapper } from './ButtonComponent'

const expectReactSnapshot = (Component, props) => {
  const html = create(Component, props)
  expect(html).toMatchSnapshot()
}

describe('DropDown', () => {
  describe('views', () => {
    it('renders with empty safely', () => {
      const list = []
      expectReactSnapshot(SelectDropDown, { list })
    })
    // supports isSelected
    it('renders with the list', () => {
      const list = [
        {
          isSelected: true,
          label: '',
          value: '',
        },
      ]
      const html = create(SelectDropDown, { list })
      expect(html).toMatchSnapshot()
    })
  })
  describe('state', () => {
    const list = [
      {
        isSelected: true,
        label: 'canada',
        value: 'eh',
      },
    ]
    const state = toState({ list })

    it('can set the name', () => {
      state.setLabel('canada')
      expect(state.name).toEqual('canada')
    })
    it('can set the value', () => {
      state.setValue('eh')
      expect(state.value).toEqual('eh')
    })

    describe('actions', () => {
      it('initially is hidden', () => {
        expect(state.isVisible).toEqual(true)
      })
      it('should close the dropdown when you click an item', () => {
        state.handleItemClick()
        expect(state.value).toEqual('eh')
      })
      it('should handleFilterToggle', () => {
        state.handleFilterToggle()
        expect(state.isVisible).toEqual(true)
      })
    })
  })
})