import React from 'react'
import { mount } from '../../test/utils'

import { Button } from '../Button'

describe('<Button />', () => {
  describe('children', () => {
    it('renders its children', () => {
      const mockChildren = 'mock_children'
      const button = mount(<Button>{mockChildren}</Button>)
      expect(button.find('button')).toContainReactText(mockChildren)
    })
  })

  describe('url', () => {
    it('renders a link when using the url param', () => {
      const mockUrl = 'https://palenca.com'
      const button = mount(<Button url={mockUrl} />)
      expect(button).toContainReactComponent('a', { href: mockUrl })
    })
  })

  describe('disabled', () => {
    it('renders disabled button when url is not passed', () => {
      const button = mount(<Button disabled />)
      expect(button).toContainReactComponent('button', { disabled: true })
    })

    it('renders <a> without an href when url is not passed', () => {
      const button = mount(<Button disabled />)
      expect(button).toContainReactComponent('button', { disabled: true })
    })
  })

  describe('loading', () => {
    it('renders a spinner in the button', () => {
      const button = mount(<Button loading />)
      expect(button).toContainReactComponent('svg')
    })

    it('renders a spinner when url is passed', () => {
      const button = mount(<Button loading />)
      expect(button).toContainReactComponent('svg')
    })
  })

  describe('submit', () => {
    it('passes prop', () => {
      const button = mount(<Button submit />)
      expect(button).toContainReactComponent('button', { type: 'submit' })
    })
  })

  describe('external', () => {
    it('renders a <a> with rel and target when using external', () => {
      const mockUrl = 'https://palenca.com'
      const button = mount(<Button external url={mockUrl} />)
      expect(button).toContainReactComponent('a', {
        rel: 'noopener noreferrer',
        target: '_blank',
        href: mockUrl
      })
    })
  })

  describe('onClick()', () => {
    it('is called when the button is clicked', () => {
      const onClickSpy = jest.fn()
      const button = mount(<Button onClick={onClickSpy} />)
      button.find('button')!.trigger('onClick')
      expect(onClickSpy).toHaveBeenCalledTimes(1)
    })
  })
})
