diff --git a/js/components/__tests__/text_input.test.js b/js/components/__tests__/text_input.test.js new file mode 100644 index 00000000..c290b23a --- /dev/null +++ b/js/components/__tests__/text_input.test.js @@ -0,0 +1,98 @@ +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) + } + }) + }) +}) diff --git a/js/lib/input_validations.js b/js/lib/input_validations.js index e2dc03b7..9f113aa6 100644 --- a/js/lib/input_validations.js +++ b/js/lib/input_validations.js @@ -106,9 +106,9 @@ export default { }, taskOrderNumber: { mask: false, - match: /^.{13}$/, - unmask: [], - validationError: 'TO number must be 13 digits', + match: /(^[0-9a-zA-Z]{13,17}$)/, + unmask: ['-'], + validationError: 'TO number must be between 13 and 17 characters', }, usPhone: { mask: [ diff --git a/tests/render_vue_component.py b/tests/render_vue_component.py index 62106a67..49fb6ee9 100644 --- a/tests/render_vue_component.py +++ b/tests/render_vue_component.py @@ -35,6 +35,7 @@ class TaskOrderPdfForm(Form): class TaskOrderForm(Form): pdf = FormField(TaskOrderPdfForm, label="task_order_pdf") + number = StringField(label="task_order_number", default="number") @pytest.fixture @@ -63,6 +64,12 @@ def multi_checkbox_input_macro(env): return getattr(multi_checkbox_template.module, "MultiCheckboxInput") +@pytest.fixture +def text_input_macro(env): + text_input_template = env.get_template("components/text_input.html") + return getattr(text_input_template.module, "TextInput") + + @pytest.fixture def initial_value_form(scope="function"): return InitialValueForm() @@ -170,3 +177,10 @@ def test_make_pop_date_range(env, app): index=1, ) write_template(pop_date_range, "pop_date_range.html") + + +def test_make_text_input_template(text_input_macro, task_order_form): + text_input_to_number = text_input_macro( + task_order_form.number, validation="taskOrderNumber" + ) + write_template(text_input_to_number, "text_input_to_number.html")