Update TO number validator to account for dashes and variable character length

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)
+      }
+    })
+  })
+})

js/lib/input_validations.js

@@ -106,9 +106,9 @@ export default {
   },
   taskOrderNumber: {
     mask: false,
-    match: /^.{13}$/,
+    match: /(^[0-9a-zA-Z]{13,17}$)/,
-    unmask: [],
+    unmask: ['-'],
-    validationError: 'TO number must be 13 digits',
+    validationError: 'TO number must be between 13 and 17 characters',
   },
   usPhone: {
     mask: [

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")