import React from 'react'
import { shallow, mount } from 'enzyme'
import FeatureBox from './index'
import { Graphic, WrapperTitle, WrapperText } from './Wrappers'
import graphicsUrl from '../graphics-accessible.svg'

describe('components/BoxElements/FeatureBox', () => {
  let mountedFeatureBox

  describe('when is mounted', () => {
    beforeEach(() => {
      mountedFeatureBox = mount(
        <FeatureBox
          graphicsUrl={graphicsUrl}
          title="hello world"
          text="pim pam pum"
        />
      )
    })

    it('should display a graphic', () => {
      expect(mountedFeatureBox.find(Graphic)).toHaveLength(1)
    })

    it('should display a title', () => {
      expect(mountedFeatureBox.find(WrapperTitle).text()).toEqual('hello world')
    })

    it('should display a graphic', () => {
      expect(mountedFeatureBox.find(WrapperText).text()).toEqual('pim pam pum')
    })
  })

  it('should match snapshot', () => {
    mountedFeatureBox = shallow(
      <FeatureBox
        graphicsUrl={graphicsUrl}
        title="hello world"
        text="pim pam pum"
      />
    )
    expect(mountedFeatureBox).toMatchSnapshot()
  })
})
