RegistrationForm.spec.ts full test fine

RegistrationForm.spec.ts

import { createLocalVue, shallowMount } from '@vue/test-utils'
import { createBuilder, testData } from './RegistrationFormComponent.builder.js'
import RegistrationForm from './RegistrationForm.vue'
import { byTestId } from '@/utils/testUtils.js'

const localVue = createLocalVue()
const validEmail = '[email protected]'
const invalidEmail = 'invalid email'
const registerUserResponse = { status: 200 }

describe('RegistrationForm', () => {
  let wrapper

  beforeEach(() => {
    wrapper = createBuilder().build()
  })

  afterEach(() => {
    jest.resetAllMocks()
  })

  it('renders properly', () => {
    expect(getForm(wrapper).isVisible()).toBe(true)
  })

  describe('when the form is loaded', () => {
    it('should display the email label', () => {
      expect(getFormEmailLabel(wrapper).text()).toEqual('Email')
    })

    it('should display the email input', () => {
      expect(getFormEmailInput(wrapper).isVisible()).toBe(true)
    })

    it('should disable the submit button', () => {
      expect(getFormSubmitButton(wrapper).attributes('disabled')).toBe(
        'disabled'
      )
    })

    it('should display the required fields form errors', () => {
      expect(getFormErrorElem(wrapper).text()).toBe('Invalid Email.')
    })

    it('should not display the terms and conditions label', () => {
      expect(getFormTermsLabel(wrapper).exists()).toBe(false)
    })

    it('should not display the terms and conditions input', () => {
      expect(getFormTermsInput(wrapper).exists()).toBe(false)
    })
  })

  describe('when the form has terms and conditions', () => {
    beforeEach(() => {
      wrapper.setProps({ termsAndConditions: true })
    })

    it('should display the required fields form errors', () => {
      expect(getFormErrorElem(wrapper).text()).toBe(
        'Invalid Email. Please accept terms and conditions.'
      )
    })

    it('should display the terms and conditions label', () => {
      expect(getFormTermsLabel(wrapper).isVisible()).toBe(true)
    })

    it('should not display the terms and conditions input', () => {
      expect(getFormTermsInput(wrapper).isVisible()).toBe(true)
    })
  })

  describe('when the user submits a valid form', () => {
    beforeEach(() => {
      wrapper.setProps({ termsAndConditions: true })
      wrapper.setData({
        formData: { email: validEmail, termsAccepted: true }
      })
      getForm(wrapper).trigger('submit')
    })

    it('should enable the submit button', () => {
      expect(getFormSubmitButton(wrapper).attributes('disabled')).toBe(
        undefined
      )
    })

    it('should register the user by calling external API', () => {
      expect(testData.$auth.registerUser).toHaveBeenCalledWith({
        email: validEmail
      })
    })

    it('should emit the "register-update" event', () => {
      expect(wrapper.emitted()['register-update'][0]).toBe(registerUserResponse)
    })
  })

  describe('when the user submits an invalid form', () => {
    beforeEach(() => {
      wrapper.setProps({ termsAndConditions: true })
    })

    it('should disable the submit button', () => {
      expect(getFormSubmitButton(wrapper).attributes('disabled')).toBe(
        'disabled'
      )
    })

    describe('by using an invalid email', () => {
      beforeEach(() => {
        wrapper.setData({
          formData: { email: invalidEmail, termsAccepted: true }
        })
        getForm(wrapper).trigger('submit')
      })

      it('should log the appropiate error', () => {
        expect(testData.$logger.error).toHaveBeenCalledWith('Invalid Email.')
      })

      it('should not register the user', () => {
        expect(testData.$auth.registerUser).not.toHaveBeenCalled()
      })
    })

    describe('by not accepting terms and conditions', () => {
      beforeEach(() => {
        wrapper.setData({
          formData: { email: validEmail, termsAccepted: false }
        })
        getForm(wrapper).trigger('submit')
      })

      it('should log the appropiate error', () => {
        expect(testData.$logger.error).toHaveBeenCalledWith(
          'Please accept terms and conditions.'
        )
      })

      it('should not register the user', () => {
        expect(testData.$auth.registerUser).not.toHaveBeenCalled()
      })
    })
  })
})

const getForm = wrapper => wrapper.find(byTestId('registration-form'))
const getFormEmailLabel = wrapper =>
  wrapper.find(byTestId('registration-email-label'))
const getFormEmailInput = wrapper =>
  wrapper.find(byTestId('registration-email-input'))
const getFormTermsLabel = wrapper =>
  wrapper.find(byTestId('registration-terms-label'))
const getFormTermsInput = wrapper =>
  wrapper.find(byTestId('registration-terms-input'))
const getFormSubmitButton = wrapper =>
  wrapper.find(byTestId('registration-submit-button'))
const getFormErrorElem = wrapper => wrapper.find(byTestId('registration-error'))