tin-react-components/src/LoginForm/test/loginForm.spec.js

All components used for Omadi apps

import React from 'react'
import { mount } from 'enzyme'
import { expect } from 'chai'
import LoginForm from '../index'

const logins = [{
  identifier: 'User Passed 1',
  password: 'Password 1'
},
{
  identifier: 'User Passed 2',
  password: 'Password 2'
}]
const errorMessages = [[
  {
    message: 'Invalid User'
  }
], [
  {
    message: 'Invalid User'
  },
  {
    message: 'Wrongo!'
  }
]]
describe('<LoginForm />', () => {
  const capturedEvents = []
  const onSubmit = ({ identifier, password }) => {
    capturedEvents.push({ identifier, password })
  }
  const parts = {}
  parts.identifier = 'div.identifier input'
  parts.password = 'div.password input'
  parts.identifierLabel = 'div.identifier label'
  parts.passwordLabel = 'div.password label'
  parts.submitButton = 'button[type="submit"]'
  const wrapper = mount(<LoginForm onSubmit={onSubmit} />)
  it('should show a form with 2 input fields and 2 labels and 1 button', () => {
    Object.keys(parts).forEach(partName => {
      const part = wrapper.find(parts[partName])
      expect(part).to.have.length(1)
    })
  })
  it('should capture the values of the inputs', () => {
    const identifier = wrapper.find(parts.identifier)
    const password = wrapper.find(parts.password)
    const button = wrapper.find(parts.submitButton)

    logins.forEach(login => {
      identifier.node.value = login.identifier
      password.node.value = login.password

      button.simulate('click')
      const event = capturedEvents[capturedEvents.length - 1]
      expect(event.identifier).to.equal(login.identifier)
      expect(event.password).to.equal(login.password)
    })
  })
  it('should show proper errors when given an error prop', () => {
    let errorElement = wrapper.find('.errors')
    errorMessages.forEach(errors => {
      expect(errorElement).to.have.length(0)
      wrapper.setProps({
        errors
      })
      errorElement = wrapper.find('.errors')
      expect(errorElement).to.have.length(1)

      // check to see if mulitple errors show up
      errorElement = wrapper.find('.errors .error')
      expect(errorElement).to.have.length(errors.length)
      wrapper.setProps({
        errors: undefined
      })
      errorElement = wrapper.find('.errors')
    })
  })
})