import React from 'react'
import Flex from '../Flex'

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

  it('renders a Flex with an align-items attribute', () => {
    const tree = shallow(<Flex alignItems="center" />)
    expect(tree).toMatchSnapshot()
  })

  it('renders a Flex with an align-content attribute', () => {
    const tree = shallow(<Flex alignContent="space-between" />)
    expect(tree).toMatchSnapshot()
  })

  it('renders a Flex with a flex-direction attribute', () => {
    const tree = shallow(<Flex flexDirection="row" />)
    expect(tree).toMatchSnapshot()
  })

  it('renders a Flex with a justify-content attribute', () => {
    const tree = shallow(<Flex justifyContent="space-evenly" />)
    expect(tree).toMatchSnapshot()
  })

  it('renders a Flex with a wrap attribute', () => {
    const tree = shallow(<Flex flexWrap="wrap" />)
    expect(tree).toMatchSnapshot()
  })

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

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