import * as React from 'react'
import { shallow } from 'enzyme'

import Banner from '..'

describe('packages/ui', () => {
  describe('Banner', () => {
    it('renders correctly with a selected value', () => {
      const element = (
        <Banner name="test-banner" hasCloseButton>
          {({ name }) => <p>Test the {name}</p>}
        </Banner>
      )
      const wrapper = shallow(element)
      expect(wrapper).toMatchSnapshot()
    })

    it('renders without a close button', () => {
      const element = (
        <Banner name="test-banner" hasCloseButton={false}>
          {({ name }) => <p>Test the {name}</p>}
        </Banner>
      )
      const wrapper = shallow(element)
      expect(wrapper).toMatchSnapshot()
    })

    it('renders without a class name', () => {
      const element = (
        <Banner
          name="test-banner"
          hasCloseButton={false}
          className="test-class-name"
        >
          {({ name }) => <p>Test the {name}</p>}
        </Banner>
      )
      const wrapper = shallow(element)
      expect(wrapper).toMatchSnapshot()
    })

    it('reads from state and renders null', () => {
      const element = (
        <Banner name="test-banner" hasCloseButton>
          {({ name }) => <p>Test the {name}</p>}
        </Banner>
      )
      const wrapper = shallow(element)
      wrapper.setState({ bannerHasBeenClosed: true })
      expect(wrapper).toMatchSnapshot()
    })
  })
})