import React from 'react'
import { mount } from '../../test/utils'

import { DisplayText } from '../DisplayText'

describe('<DisplayText />', () => {
  it('renders its children', () => {
    const mockChildren = 'mock_children'
    const app = mount(<DisplayText>{mockChildren}</DisplayText>)
    expect(app).toContainReactText(mockChildren)
  })

  it('renders a span by default', () => {
    const displayText = mount(<DisplayText>Lorem ipsum</DisplayText>)
    expect(displayText).toContainReactComponent('span')
  })

  it('renders a span when the size is xs', () => {
    const displayText = mount(
      <DisplayText size="xs">Lorem ipsum</DisplayText>
    )
    expect(displayText).toContainReactComponent('span')
  })

  it('renders a span when the size is small', () => {
    const displayText = mount(
      <DisplayText size="sm">Lorem ipsum</DisplayText>
    )
    expect(displayText).toContainReactComponent('span')
  })

  it('renders a span when the size is medium', () => {
    const displayText = mount(
      <DisplayText size="md">Lorem ipsum</DisplayText>
    )
    expect(displayText).toContainReactComponent('span')
  })

  it('renders a span when the size is large', () => {
    const displayText = mount(
      <DisplayText size="lg">Lorem ipsum</DisplayText>
    )
    expect(displayText).toContainReactComponent('span')
  })

  it('renders a span when the size is xl', () => {
    const displayText = mount(
      <DisplayText size="xl">Lorem ipsum</DisplayText>
    )
    expect(displayText).toContainReactComponent('span')
  })

  it('renders a span when the size is 2xl', () => {
    const displayText = mount(
      <DisplayText size="2xl">Lorem ipsum</DisplayText>
    )
    expect(displayText).toContainReactComponent('span')
  })

})
