99 lines
3.0 KiB
JavaScript
99 lines
3.0 KiB
JavaScript
import { mount } from '@vue/test-utils'
|
|
|
|
import textinput from '../text_input'
|
|
|
|
import { makeTestWrapper } from '../../test_utils/component_test_helpers'
|
|
|
|
const ToNumberWrapperComponent = makeTestWrapper({
|
|
components: {
|
|
textinput,
|
|
},
|
|
templatePath: 'text_input_to_number.html',
|
|
data: function() {
|
|
const { validation, initialValue } = this.initialData
|
|
return { validation, initialValue }
|
|
},
|
|
})
|
|
|
|
describe('TextInput Validates Correctly', () => {
|
|
describe('taskOrderNumber validator', () => {
|
|
it('Should initialize with the validator and no validation icon', () => {
|
|
const wrapper = mount(ToNumberWrapperComponent, {
|
|
propsData: {
|
|
name: 'testTextInput',
|
|
initialData: {
|
|
validation: 'taskOrderNumber',
|
|
},
|
|
},
|
|
})
|
|
expect(wrapper.contains('.usa-input--success')).toBe(false)
|
|
expect(wrapper.contains('.usa-input--error')).toBe(false)
|
|
expect(wrapper.contains('.usa-input--validation--taskOrderNumber')).toBe(
|
|
true
|
|
)
|
|
})
|
|
|
|
it('Should allow valid TO numbers', () => {
|
|
const wrapper = mount(ToNumberWrapperComponent, {
|
|
propsData: {
|
|
name: 'testTextInput',
|
|
initialData: {
|
|
validation: 'taskOrderNumber',
|
|
},
|
|
},
|
|
})
|
|
|
|
var textInputField = wrapper.find('input[id="number"]')
|
|
var hiddenField = wrapper.find('input[name="number"]')
|
|
const validToNumbers = [
|
|
'12345678901234567',
|
|
'1234567890123',
|
|
'abc1234567890', // pragma: allowlist secret
|
|
'abc-1234567890',
|
|
'DC12-123-1234567890',
|
|
'fg34-987-1234567890',
|
|
]
|
|
|
|
for (const number of validToNumbers) {
|
|
// set value to be a valid TO number
|
|
textInputField.setValue(number)
|
|
// manually trigger change event in hidden fields
|
|
hiddenField.trigger('change')
|
|
// check for validation classes
|
|
expect(wrapper.contains('.usa-input--success')).toBe(true)
|
|
expect(wrapper.contains('.usa-input--error')).toBe(false)
|
|
}
|
|
})
|
|
|
|
it('Should not allow invalid TO numbers', () => {
|
|
const wrapper = mount(ToNumberWrapperComponent, {
|
|
propsData: {
|
|
name: 'testTextInput',
|
|
initialData: {
|
|
validation: 'taskOrderNumber',
|
|
},
|
|
},
|
|
})
|
|
|
|
var textInputField = wrapper.find('input[id="number"]')
|
|
var hiddenField = wrapper.find('input[name="number"]')
|
|
const invalidToNumbers = [
|
|
'1234567890',
|
|
'12345678901234567890', // pragma: allowlist secret
|
|
'123:4567890123',
|
|
'123_1234567890',
|
|
]
|
|
|
|
for (const number of invalidToNumbers) {
|
|
// set value to be a valid TO number
|
|
textInputField.setValue(number)
|
|
// manually trigger change event in hidden fields
|
|
hiddenField.trigger('change')
|
|
// check for validation classes
|
|
expect(wrapper.contains('.usa-input--success')).toBe(false)
|
|
expect(wrapper.contains('.usa-input--error')).toBe(true)
|
|
}
|
|
})
|
|
})
|
|
})
|