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

import { ServiceButton } from '../ServiceButton'
import { Avatar } from '../../Avatar/Avatar'

describe('<ServiceButton />', () => {
  describe('title', () => {
    it('renders a title text', () => {
      const title = 'Lorem ipsum'
      const button = mount(<ServiceButton title={title} />)
      expect(button).toContainReactComponent('span')
    })
  })

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

  describe('source', () => {
    it('renders an Avatar when source is string', () => {
      const src = 'https://placekitten.com/200/300'
      const button = mount(<ServiceButton source={src} />)
      expect(button).toContainReactComponent(Avatar)
    })
  })

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