import * as React from 'react'
import {render, screen} from '@testing-library/react'

import {GridItem} from '..'

describe(`GridItem`, () => {
  it(`passes through props and is positioned`, () => {
    render(
      <GridItem data-hitarea="test" className={`otherClass`}>
        test
      </GridItem>
    )
    const element = screen.getByText(`test`)
    expect(element).toBeInTheDocument()
    expect(element).toHaveClass(`otherClass`)
    // arbitrary props are passed through to the underlying element
    expect(element).toHaveAttribute(`data-hitarea`, `test`)
  })

  it(`can change the type of element it outputs`, () => {
    render(<GridItem tag="section">test</GridItem>)
    const element = screen.getByText(`test`)
    expect(element.tagName).toEqual(`SECTION`)
  })
})