Enzyme/React-Testing-Libary step: 1

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

// TextAreaInput.jsx
import React, { Fragment } from 'react'
import PropTypes from 'prop-types'
import InputError from './InputError'

const TextAreaInput = ({ 
  labelText, 
  id, 
  className, 
  labelClassName, 
  errorMessage, 
  disabled, 
  handleOnChange, 
  name, 
  …props 
}) => {
  let inputClassName = `input${className ? ` ${className}` : ''}`
  const forId = id || name
  
  if (errorMessage) { 
    inputClassName = `${inputClassName} red-border` 
  }
 
  if (disabled) { 
    inputClassName = `${inputClassName} disabled-input` 
  }
  
  return (
    <Fragment>
      <label className={labelClassName} htmlFor={forId} >
        {labelText}
      </label>
      <textarea
        {…props}
        className={inputClassName}
        id={forId}
        disabled={disabled}
        onChange={handleOnChange}
      />
      <InputError errorMessage={errorMessage} />
    </Fragment>
  )
}

TextAreaInput.propTypes = {
  labelText: PropTypes.string,
  errorMessage: PropTypes.string,
  value: PropTypes.string,
  id: PropTypes.string,
  placeholder: PropTypes.string,  
  className: PropTypes.string,
  labelClassName: PropTypes.string,
  disabled: PropTypes.bool,
  name: PropTypes.string.isRequired,
  handleOnChange: PropTypes.func.isRequired
}

TextAreaInput.defaultProps = {
  labelText: '',
  errorMessage: '',
  placeholder: '',
  className: '',
  labelClassName: 'large-heading',
  disabled: false
}

export default TextAreaInput

// InputError.jsx
import React from 'react'
import PropTypes from 'prop-types'

const InputError = ({ className, typographyClass, errorMessage }) => {
  const cssClasses = `${typographyClass} ${className}`
  
  if (!errorMessage) { return null }
  
  return (
    <div className={cssClasses}>
      {errorMessage}
    </div>
  )
}

InputError.propTypes = {
  className: PropTypes.string,
  errorMessage: PropTypes.string,
  typographyClass: PropTypes.string
}

InputError.defaultProps = {
  className: '',
  errorMessage: '',
  typographyClass: 'large-heading red-heading smaller-font-size unselectable'
}

export default InputError