Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
RegistrationForm.spec.ts full test fine
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 = 'somename@example.com'
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'))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment