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

import React from 'react'
import { mount } from 'enzyme'
import { Text } from 'components'

describe('Text', () => {
  it('should render P element in the default', () => {
    const wrapper = mount(<Text>test-value</Text>)
    expect(wrapper.find('p')).not.toBe(0)
    expect(wrapper.html()).toMatchSnapshot()
    expect(() => wrapper.unmount()).not.toThrow()
  })

  it('should work with different styles', () => {
    const wrapper = mount(
      <div>
        <Text type="secondary">test-value</Text>
        <Text type="success">test-value</Text>
        <Text type="warning">test-value</Text>
        <Text type="error">test-value</Text>
      </div>,
    )
    expect(wrapper.html()).toMatchSnapshot()
    expect(() => wrapper.unmount()).not.toThrow()
  })

  it('the specified element should be rendered', () => {
    const elements = [
      'h1',
      'h2',
      'h3',
      'h4',
      'h5',
      'h6',
      'p',
      'small',
      'span',
      'del',
      'i',
      'em',
      'b',
    ]
    const wrapper = mount(
      <div>
        {elements.map((el, index) => {
          const prop = { [el]: true }
          return (
            <Text {...prop} key={`${el}-${index}`}>
              test-value
            </Text>
          )
        })}
      </div>,
    )
    expect(wrapper.html()).toMatchSnapshot()
    expect(() => wrapper.unmount()).not.toThrow()
  })

  it('the combined style should be rendered', () => {
    const wrapper = mount(
      <Text p b del>
        test-value
      </Text>,
    )
    expect(wrapper.html()).toMatchSnapshot()
    expect(() => wrapper.unmount()).not.toThrow()
  })

  it('should render default color when type missing', () => {
    const Mock = Text as any
    const wrapper = mount(<Mock type="unknow">test-value</Mock>)
    expect(wrapper.html()).toMatchSnapshot()
    expect(() => wrapper.unmount()).not.toThrow()
  })

  it('should be able to specify the size of text', () => {
    let wrapper = mount(<Text size={14}>test-value</Text>)
    expect(wrapper.html()).toMatchSnapshot()

    wrapper = mount(<Text size="12rem">test-value</Text>)
    expect(wrapper.html()).toMatchSnapshot()
    expect(() => wrapper.unmount()).not.toThrow()
  })
})