import React from 'react'
import Box from '../Box'

describe('Box', () => {
  it('renders a Box', () => {
    const tree = shallow(<Box />)
    expect(tree).toMatchSnapshot()
  })

  it('renders a Box with an order attribute', () => {
    const tree = shallow(<Box order="1" />)
    expect(tree).toMatchSnapshot()
  })

  it('renders a Box with an align-self attribute', () => {
    const tree = shallow(<Box alignSelf="flex-end" />)
    expect(tree).toMatchSnapshot()
  })

  it('renders a Box with a flex attribute', () => {
    const tree = shallow(<Box flex="1 0 auto" />)
    expect(tree).toMatchSnapshot()
  })

  it('renders a Box with a static height', () => {
    const tree = shallow(<Box height="200" />)
    expect(tree).toMatchSnapshot()
  })

  it('renders a Box with a max-width', () => {
    const tree = shallow(<Box maxWidth="120" />)
    expect(tree).toMatchSnapshot()
  })

  it('renders a Box with a min-height', () => {
    const tree = shallow(<Box minHeight="100" />)
    expect(tree).toMatchSnapshot()
  })
})