import React from 'react'
import GridBox from '../GridBox'

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

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

  it('renders a GridBox with an justify-self attribute', () => {
    const tree = shallow(<GridBox justifySelf="center" />)
    expect(tree).toMatchSnapshot()
  })

  it('renders a GridBox with an grid-column-start attribute', () => {
    const tree = shallow(<GridBox gridColumnStart="1" />)
    expect(tree).toMatchSnapshot()
  })

  it('renders a GridBox with an grid-column-end attribute', () => {
    const tree = shallow(<GridBox gridColumnEnd="span 2" />)
    expect(tree).toMatchSnapshot()
  })

  it('renders a GridBox with an grid-column attribute', () => {
    const tree = shallow(<GridBox gridColumn="1 / 3" />)
    expect(tree).toMatchSnapshot()
  })

  it('renders a GridBox with an grid-row-start attribute', () => {
    const tree = shallow(<GridBox gridRowStart="1" />)
    expect(tree).toMatchSnapshot()
  })

  it('renders a GridBox with an grid-row-end attribute', () => {
    const tree = shallow(<GridBox gridRowEnd="span 2" />)
    expect(tree).toMatchSnapshot()
  })

  it('renders a GridBox with an grid-row attribute', () => {
    const tree = shallow(<GridBox gridRow="1 / 3" />)
    expect(tree).toMatchSnapshot()
  })

  it('renders a GridBox with an grid-area attribute', () => {
    const tree = shallow(<GridBox gridArea="1 / 1 / 3 / 3" />)
    expect(tree).toMatchSnapshot()
  })
})