Fix uploader test and refactor makeTestWrapper to accept data fn

js/components/__tests__/checkbox_input.test.js

@@ -9,6 +9,9 @@ const WrapperComponent = makeTestWrapper({
     checkboxinput,
   },
   templatePath: 'checkbox_input_template.html',
+  data: function() {
+    return { initialvalue: this.initialData }
+  }
 })
 
 describe('CheckboxInput Renders Correctly', () => {

js/components/__tests__/upload_input.test.js

@@ -7,18 +7,24 @@ import { makeTestWrapper } from '../../test_utils/component_test_helpers'
 const UploadWrapper = makeTestWrapper({
   components: { uploadinput },
   templatePath: 'upload_input_template.html',
+  data: function() {
+    return { initialvalue: this.initialData.initialvalue, token: this.token }
+  }
 })
 
 const UploadErrorWrapper = makeTestWrapper({
   components: { uploadinput },
   templatePath: 'upload_input_error_template.html',
+  data: function() {
+    return { initialvalue: null, token: null }
+  }
 })
 
 describe('UploadInput Test', () => {
   it('should show input and button when no attachment present', () => {
     const wrapper = mount(UploadWrapper, {
       propsData: {
-        initialData: null,
+        initialData: { initialvalue: null, token: "token" },
       },
     })
 
@@ -29,7 +35,7 @@ describe('UploadInput Test', () => {
   it('should show file name and hide input', () => {
     const wrapper = mount(UploadWrapper, {
       propsData: {
-        initialData: 'somepdf.pdf',
+        initialData: { initialvalue: "somepdf.pdf", token: "token" }
       },
     })
 
@@ -41,7 +47,11 @@ describe('UploadInput Test', () => {
   })
 
   it('should correctly display error treatment', () => {
-    const wrapper = mount(UploadErrorWrapper)
+    const wrapper = mount(UploadErrorWrapper, {
+      propsData: {
+        initialData: { initialvalue: "somepdf.pdf", token: "token" }
+      }
+    })
 
     const messageArea = wrapper.find('.usa-input__message')
     expect(messageArea.html()).toContain('Test Error Message')

js/test_templates/upload_input_error_template.html

@@ -4,8 +4,10 @@
     v-bind:initial-errors='true'
   
   v-bind:watch='false'
-  name='errorfield'
+  name='pdf'
   :optional='false'
+  v-bind:token='token'
+  v-bind:object-name='"object_name"'
   >
   <div>
     <div v-show="hasAttachment" class="uploaded-file">
@@ -19,7 +21,7 @@
       
       
       <div v-if="!hideInput" class="upload-widget">
-        <label class="upload-label" for="errorfield">
+        <label class="upload-label" for="pdf">
           <span class="upload-button">
             Browse
           </span>
@@ -36,13 +38,16 @@
           v-on:change="addAttachment"
           ref="attachmentInput"
           accept=""
-          id="errorfield"
+          id="pdf"
-          name="errorfield"
+          name="pdf"
           aria-label="Task Order Upload"
+          v-bind:value="attachment"
           type="file">
+          <input type="hidden" name="pdf-filename" id="pdf-filename" ref="attachmentFilename">
+          <input type="hidden" name="pdf-object_name" id="pdf-object_name" ref="attachmentObjectName">
       </div>
       
-        <span v-show="showErrors" class="usa-input__message">Test Error Message</span>
+        <span v-show="showErrors" class="usa-input__message">[&#39;Test Error Message&#39;]</span>
       
     </div>
   </div>

js/test_templates/upload_input_template.html

@@ -4,8 +4,10 @@
     v-bind:initial-data='initialvalue'
   
   v-bind:watch='false'
-  name='datafield'
+  name='pdf'
   :optional='false'
+  v-bind:token='token'
+  v-bind:object-name='"object_name"'
   >
   <div>
     <div v-show="hasAttachment" class="uploaded-file">
@@ -19,7 +21,7 @@
       
       
       <div v-if="!hideInput" class="upload-widget">
-        <label class="upload-label" for="datafield">
+        <label class="upload-label" for="pdf">
           <span class="upload-button">
             Browse
           </span>
@@ -29,10 +31,13 @@
           v-on:change="addAttachment"
           ref="attachmentInput"
           accept=""
-          id="datafield"
+          id="pdf"
-          name="datafield"
+          name="pdf"
           aria-label="Task Order Upload"
+          v-bind:value="attachment"
           type="file">
+          <input type="hidden" name="pdf-filename" id="pdf-filename" ref="attachmentFilename">
+          <input type="hidden" name="pdf-object_name" id="pdf-object_name" ref="attachmentObjectName">
       </div>
       
     </div>

js/test_utils/component_test_helpers.js

@@ -16,7 +16,7 @@ to be passed as a prop to checkboxinput at mount time
     v-bind:initial-checked='initialvalue'
     >
 */
-const makeTestWrapper = ({ components, templatePath }) => {
+const makeTestWrapper = ({ components, templatePath, data }) => {
   const templateString = fs.readFileSync(
     `js/test_templates/${templatePath}`,
     'utf-8'
@@ -27,11 +27,7 @@ const makeTestWrapper = ({ components, templatePath }) => {
     components,
     template: templateString,
     props: ['initialData'],
-    data: function() {
+    data,
-      return {
-        initialvalue: this.initialData,
-      }
-    },
   }
 
   return WrapperComponent

templates/components/upload_input.html

@@ -46,8 +46,8 @@
           <input type="hidden" name="{{ field.filename.name }}" id="{{ field.filename.name }}" ref="attachmentFilename">
           <input type="hidden" name="{{ field.object_name.name }}" id="{{ field.object_name.name }}" ref="attachmentObjectName">
       </div>
-      {% for error in field.errors %}
+      {% for error, error_message in field.errors.items() %}
-        <span v-show="showErrors" class="usa-input__message">{{error}}</span>
+        <span v-show="showErrors" class="usa-input__message">{{error_message}}</span>
       {% endfor %}
     </div>
   </div>

tests/render_vue_component.py

@@ -2,8 +2,8 @@ import pytest
 
 from wtforms.widgets import CheckboxInput
 from wtforms.fields import StringField
-from wtforms.validators import InputRequired
+from wtforms.validators import InputRequired, URL
-from wtforms import Form
+from wtforms import Form, FormField
 
 
 class InitialValueForm(Form):
@@ -14,6 +14,19 @@ class InitialValueForm(Form):
     )
 
 
+class TaskOrderPdfForm(Form):
+    filename = StringField(default="initialvalue")
+    object_name = StringField()
+
+    errorfield = StringField(
+        label="error", validators=[InputRequired(message="Test Error Message")]
+    )
+
+
+class TaskOrderForm(Form):
+    pdf = FormField(TaskOrderPdfForm, label="task_order_pdf")
+
+
 @pytest.fixture
 def env(app, scope="function"):
     return app.jinja_env
@@ -39,6 +52,16 @@ def initial_value_form(scope="function"):
     return InitialValueForm()
 
 
+@pytest.fixture
+def task_order_form(scope="function"):
+    return TaskOrderForm()
+
+
+@pytest.fixture
+def error_task_order_form(scope="function"):
+    return ErrorTaskOrderForm()
+
+
 def write_template(content, name):
     with open("js/test_templates/{}".format(name), "w") as fh:
         fh.write(content)
@@ -50,12 +73,12 @@ def test_make_checkbox_input_template(checkbox_input_macro, initial_value_form):
     write_template(rendered_checkbox_macro, "checkbox_input_template.html")
 
 
-def test_make_upload_input_template(upload_input_macro, initial_value_form):
+def test_make_upload_input_template(upload_input_macro, task_order_form):
-    rendered_upload_macro = upload_input_macro(initial_value_form.datafield)
+    rendered_upload_macro = upload_input_macro(task_order_form.pdf, token="token", object_name="object_name")
     write_template(rendered_upload_macro, "upload_input_template.html")
 
 
-def test_make_upload_input_error_template(upload_input_macro, initial_value_form):
+def test_make_upload_input_error_template(upload_input_macro, task_order_form):
-    initial_value_form.validate()
+    task_order_form.validate()
-    rendered_upload_macro = upload_input_macro(initial_value_form.errorfield)
+    rendered_upload_macro = upload_input_macro(task_order_form.pdf, token="token", object_name="object_name")
     write_template(rendered_upload_macro, "upload_input_error_template.html")