import React from 'react'
import Grid from '../Grid'

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

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

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

  it('renders a Grid with a grid-column-gap attribute', () => {
    const tree = shallow(<Grid gridColumnGap="20" />)
    expect(tree).toMatchSnapshot()
  })

  it('renders a Grid with a gap attribute', () => {
    const tree = shallow(<Grid gridGap="40" />)
    expect(tree).toMatchSnapshot()
  })

  it('renders a Grid with a grid-template-columns attribute', () => {
    const tree = shallow(<Grid gridTemplateColumns="1fr 64px 2fr" />)
    expect(tree).toMatchSnapshot()
  })

  it('renders a Grid with a grid-template-rows attribute', () => {
    const tree = shallow(<Grid gridTemplateRows="2fr 120px 1fr" />)
    expect(tree).toMatchSnapshot()
  })

  it('renders a Grid with a justify-items attribute', () => {
    const tree = shallow(<Grid justifyItems="center" />)
    expect(tree).toMatchSnapshot()
  })

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

  it('renders a Grid with a grid-template-areas attribute', () => {
    const tree = shallow(<Grid
      gridTemplateAreas="'header header header header'
    'main main . sidebar'
    'footer footer footer footer'"
    />)
    expect(tree).toMatchSnapshot()
  })

  it('renders a Grid with a grid-row-gap attribute', () => {
    const tree = shallow(<Grid gridRowGap="60" />)
    expect(tree).toMatchSnapshot()
  })

  it('renders a Grid with 4 columns', () => {
    const tree = shallow(<Grid cols="4" />)
    expect(tree).toMatchSnapshot()
  })

  it('renders a Grid with 4 rows', () => {
    const tree = shallow(<Grid direction="rows" cols="4" />)
    expect(tree).toMatchSnapshot()
  })
})