react/components/row/__tests__/index.test.tsx

import React from 'react'
import { mount } from 'enzyme'
import { Row, Col } from 'components'

describe('Row', () => {
  it('should render correctly', () => {
    const wrapper = mount(<Row>row</Row>)
    expect(wrapper.html()).toMatchSnapshot()
    expect(() => wrapper.unmount()).not.toThrow()
  })

  it('should be render differnet components', () => {
    const wrapper = mount(<Row>row</Row>)
    wrapper.setProps({ component: 'span' })
    expect(wrapper.find('span').length).not.toBe(0)

    wrapper.setProps({ component: 'p' })
    expect(wrapper.find('p').length).not.toBe(0)

    wrapper.setProps({ component: 'details' })
    expect(wrapper.find('details').length).not.toBe(0)
  })

  it('the children should be aligned correctly', () => {
    const wrapper = mount(
      <div>
        <Row justify="end">
          <Col />
        </Row>
        <Row justify="center">
          <Col />
        </Row>
        <Row justify="space-around">
          <Col />
        </Row>
        <Row justify="space-between">
          <Col />
        </Row>
        <Row align="top">
          <Col />
        </Row>
        <Row align="middle">
          <Col />
        </Row>
        <Row align="bottom">
          <Col />
        </Row>
      </div>,
    )
    expect(wrapper.html()).toMatchSnapshot()
    expect(() => wrapper.unmount()).not.toThrow()
  })

  it('the children should have the correct spacing', () => {
    const wrapper = mount(
      <div>
        <Row gap={1}>
          <Col />
        </Row>
        <Row gap={2}>
          <Col />
        </Row>
        <Row gap={10}>
          <Col />
        </Row>
      </div>,
    )
    expect(wrapper.html()).toMatchSnapshot()
    expect(() => wrapper.unmount()).not.toThrow()
  })

  it('should work with nested', () => {
    const wrapper = mount(
      <Row>
        <Row>
          <Row>
            <Col>
              <Row>row</Row>
            </Col>
          </Row>
        </Row>
      </Row>,
    )
    expect(wrapper.html()).toMatchSnapshot()
    expect(() => wrapper.unmount()).not.toThrow()
  })
})