atst/js/components/__tests__/multi_checkbox_input.test.js

103 lines
3.0 KiB
JavaScript

import { mount } from '@vue/test-utils'
import multicheckboxinput from '../multi_checkbox_input'
import { makeTestWrapper } from '../../test_utils/component_test_helpers'
const WrapperComponent = makeTestWrapper({
components: {
multicheckboxinput,
},
templatePath: 'multi_checkbox_input_template.html',
data: function() {
const { initialvalue, optional } = this.initialData
return { initialvalue, optional }
},
})
describe('MultiCheckboxInput Renders Correctly', () => {
it('Should initialize unchecked and with no validation showing', () => {
const wrapper = mount(WrapperComponent, {
propsData: {
name: 'testCheck',
initialData: {
initialvalue: [],
},
},
})
expect(wrapper.contains('.usa-input--success')).toBe(false)
expect(wrapper.contains('.usa-input--error')).toBe(false)
expect(wrapper.find('.usa-input input[value="a"]').element.checked).toBe(
false
)
expect(wrapper.find('.usa-input input[value="b"]').element.checked).toBe(
false
)
})
it('Should initialize with "a" checked', () => {
const wrapper = mount(WrapperComponent, {
propsData: {
name: 'testCheck',
initialData: {
initialvalue: ['a'],
},
},
})
expect(wrapper.find('.usa-input input[value="a"]').element.checked).toBe(
true
)
expect(wrapper.find('.usa-input input[value="b"]').element.checked).toBe(
false
)
})
})
describe('Multicheckbox shows validation states correctly', () => {
it('Should be valid when any checkbox is clicked', () => {
const wrapper = mount(WrapperComponent, {
propsData: {
name: 'testCheck',
initialData: { initialvalue: [] },
},
})
wrapper.find('.usa-input input[value="a"]').setChecked()
expect(wrapper.contains('.usa-input--success')).toBe(true)
expect(wrapper.contains('.usa-input--error')).toBe(false)
})
it('Should be invalid when no checkboxes are checked', () => {
const wrapper = mount(WrapperComponent, {
propsData: {
name: 'testCheck',
initialData: {
initialvalue: [],
},
},
})
// Check and then uncheck a checkbox
const checkboxA = wrapper.find('.usa-input input[value="a"]')
checkboxA.setChecked()
checkboxA.setChecked(false)
expect(wrapper.contains('.usa-input--error')).toBe(true)
expect(wrapper.contains('.usa-input--success')).toBe(false)
})
it('Should be valid when no checkboxes are checked but it is optional', () => {
const wrapper = mount(WrapperComponent, {
propsData: {
name: 'testCheck',
initialData: { initialvalue: [], optional: true },
},
})
// Check and then uncheck a checkbox
const checkboxA = wrapper.find('.usa-input input[value="a"]')
checkboxA.setChecked()
checkboxA.setChecked(false)
expect(wrapper.contains('.usa-input--error')).toBe(false)
expect(wrapper.contains('.usa-input--success')).toBe(true)
})
})