import React from 'react'
import { mount } from 'enzyme'
import { IconButton, ICON_BUTTON_VARIANTS } from '../lib/index'
import { Help } from '@kyper/icon/Help'

describe('@kyper/button', () => {
  let wrapper

  let defaultProps

  beforeEach(() => {
    defaultProps = {
      ['aria-label']: 'button to click',
      largeTouchTarget: true,
      onClick: jest.fn(),
    }
  })

  it('should render children with default button type and props', () => {
    wrapper = mount(
      <IconButton {...defaultProps}>
        <Help />
      </IconButton>,
    )
    expect(wrapper.html()).toContain('svg')
    expect(wrapper.html()).toContain('type="button"')
    expect(wrapper.html()).toContain('kyper-icon-button')
    expect(wrapper.find('button').prop('aria-label')).toEqual('button to click')
    expect(wrapper.find(IconButton).prop('largeTouchTarget')).toEqual(true)
  })

  it('should not fire the onClick when disabled and contain aria-disabled prop', () => {
    wrapper = mount(
      <IconButton {...defaultProps} disabled={true}>
        <Help />
      </IconButton>,
    )

    expect(wrapper.html()).toContain('aria-disabled')
    wrapper.find(IconButton).simulate('click')
    expect(defaultProps.onClick).not.toHaveBeenCalled()
  })

  it('should fire onClick when clicked', () => {
    wrapper = mount(
      <IconButton {...defaultProps}>
        <Help />
      </IconButton>,
    )

    wrapper.find(IconButton).simulate('click')
    expect(defaultProps.onClick).toHaveBeenCalled()
  })

  it('should have variant prop', () => {
    wrapper = mount(
      <IconButton {...defaultProps} variant={ICON_BUTTON_VARIANTS.TRANSPARENT}>
        <Help />
      </IconButton>,
    )

    expect(wrapper.prop('variant')).toEqual(ICON_BUTTON_VARIANTS.TRANSPARENT)
  })

  it('should append the className prop to the list of class names', () => {
    wrapper = mount(
      <IconButton {...defaultProps} className="test-className">
        <Help />
      </IconButton>,
    )

    expect(wrapper.find('button').hasClass('test-className')).toEqual(true)
    // verifies that the kyper-icon-button class hasn't been removed
    expect(wrapper.find('button').hasClass('kyper-icon-button')).toEqual(true)
  })

  it('should be able to pass through other props', () => {
    wrapper = mount(
      <IconButton {...defaultProps} style={{ color: 'blue' }}>
        <Help />
      </IconButton>,
    )

    expect(wrapper.html()).toContain('blue')
  })
})
