Enzyme/React-Testing-Libary Step: 13

Enzyme-React-Testing-Libary-step-13.jsx

import React from 'react'
import { cleanup, render } from 'react-testing-library'
import TextAreaInput from './TextAreaInput'

const defaultProps = {
  labelText: 'I am a label',
  name: 'comment',
  className: 'textarea-box',
  labelClassName: 'small-heading',
  handleOnChange: () => {}
}

afterEach(cleanup)

describe('TextAreaInput', () => {
  it('renders the correct label text', () => {
    const { getByText } = render(<TextAreaInput {…defaultProps} />)
    
    getByText(defaultProps.labelText)
  })
  
  it('attaches the correct class name to the label\'s class name', () => {
    const { getByText } = render(<TextAreaInput {…defaultProps} />)
    const label = getByText(defaultProps.labelText)
    
    expect(label.className).toEqual(defaultProps.labelClassName)
  })
  
  it('renders a textarea input', () => {
    const { getByLabelText } = render(<TextAreaInput {…defaultProps} />)
    const textareaInput = getByLabelText(defaultProps.labelText)
    
    expect(textareaInput).toBeDefined()
  })
  
  it('add the className prop to the textarea input\'s class name with a className prop', () => {
    const { getByLabelText } = render(<TextAreaInput {…defaultProps} />)
    const textareaInput = getByLabelText(defaultProps.labelText)
    
    expect(textareaInput.className).toEqual(`input ${defaultProps.className}`)
  })
  
  it('renders an error message when error message prop is present', () => {
    const message = 'I am an error message'
    const { getByText } = render(<TextAreaInput {…defaultProps} errorMessage={message} />)
    const errorMessage = getByText(message)
    
    expect(errorMessage).toBeDefined()
  })
  
  it('set the textarea input\'s class name to "input" when className prop is not present', () => {
    const { getByLabelText } = render(<TextAreaInput {…defaultProps} className='' />)
    const textareaInput = getByLabelText(defaultProps.labelText)
    
    expect(textareaInput.className).toEqual('input')
  })
  
  it('will use the id prop to connect label to textarea tag', () => {
    const id = 'comment_box_1'
    const { getByLabelText, getByText } = render(<TextAreaInput {…defaultProps} id={id} />)
    const label = getByText(defaultProps.labelText)
    const textareaInput = getByLabelText(defaultProps.labelText)
    
    expect(label.htmlFor).toEqual(id)
    expect(textareaInput.id).toEqual(id)
  })
  
  it('will use the name prop to connect label to textarea tag if id prop is not present', () => {
    const { getByLabelText, getByText } = render(<TextAreaInput {…defaultProps} id={null} />)
    const label = getByText(defaultProps.labelText)
    const textareaInput = getByLabelText(defaultProps.labelText)
    
    expect(label.htmlFor).toEqual(defaultProps.name)
    expect(textareaInput.id).toEqual(defaultProps.name)
  })
  
  it('has a disabled textarea if disabled prop is present', () => {
    const { getByLabelText } = render(<TextAreaInput {…defaultProps} disabled />)
    const textareaInput = getByLabelText(defaultProps.labelText)
    
    expect(textareaInput.disabled).toEqual(true)
  })
  
  it('does not have a disabled textarea input by default', () => {
    const { getByLabelText } = render(<TextAreaInput {…defaultProps} />)
    const textareaInput = getByLabelText(defaultProps.labelText)
    
    expect(textareaInput.disabled).toEqual(false)
  })
  
  it('renders a placeholder correctly', () => {
    const placeholderText = 'I am placeholder text'
    const { getByLabelText } = render(<TextAreaInput {…defaultProps} placeholder={placeholderText} />)
    const textareaInput = getByLabelText(defaultProps.labelText)
    
    expect(textareaInput.placeholder).toEqual(placeholderText)
  })
  
  it('renders the value prop in the textarea as text', () => {
    const value = 'This is a comment'
    const { getByLabelText } = render(<TextAreaInput {…defaultProps} value={value} />)
    const textareaInput = getByLabelText(defaultProps.labelText)
    
    expect(textareaInput.value).toEqual(value)
  })
})