Clean up and generalize jinja to vue test template rendering and testing

js/components/__tests__/checkbox_input.test.js

@@ -1,60 +1,24 @@
 import { mount } from '@vue/test-utils'
 
-import Vue from 'vue'
-
 import checkboxinput from '../checkbox_input'
 
-const fs = require('fs')
-const testTemplate = fs.readFileSync('js/test_templates/checkbox_input_template.html', 'utf-8')
-console.log(testTemplate)
-const template = `
-    <div>
-      <div class='usa-input'>
-        <fieldset data-ally-disabled="true" v-on:change="onInput" class="usa-input__choices">
-          <legend>
-            <input type="checkbox" v-model="isChecked"></input>
-            Some words about this checkbox
-          </legend>
-        </fieldset>
-      </div>
-    </div>
-`
+import { makeTestWrapper } from '../../test_utils/component_test_helpers'
 
-// const templatedCheckboxInput = {
-//     ...checkboxinput,
-//     template
-// }
-
-// Define test wrapping component
-// Use test template for wrapping component template
-// Inject component under test (checkboxInput) into wrapping component??
-
-const WrapperComponent = {
-    name: 'WrapperComponent',
-    components: { checkboxinput },
-    template: testTemplate,
-    props: {
-        initialChecked: Boolean,
+const WrapperComponent = makeTestWrapper({
+    components: {
+        checkboxinput
     },
-    data: function () {
-        return {
-            name: 'testCheck',
-            initialchecked: this.initialChecked
-        }
-    }
-}
+    templatePath: 'checkbox_input_template.html',
+})
 
 describe('CheckboxInput Renders Correctly', () => {
     it('Should initialize checked', () => {
         const wrapper = mount(WrapperComponent, {
             propsData: {
                 name: 'testCheck',
-                initialChecked: true
+                initialData: true
             }
         })
-
-        // wrapper.vm.$children[0].$data.isChecked = true
-
         expect(wrapper.find('.usa-input input').element.checked).toBe(true)
     })
 
@@ -62,10 +26,9 @@ describe('CheckboxInput Renders Correctly', () => {
         const wrapper = mount(WrapperComponent, {
             propsData: {
                 name: 'testCheck',
-                initialChecked: false
+                initialData: false
             }
         })
-
         expect(wrapper.find('.usa-input input').element.checked).toBe(false)
     })
 })

js/components/__tests__/upload_input.test.js

@@ -0,0 +1,49 @@
+import { mount } from '@vue/test-utils'
+
+import uploadinput from '../upload_input'
+
+import { makeTestWrapper } from '../../test_utils/component_test_helpers'
+
+const UploadWrapper = makeTestWrapper({
+    components: { uploadinput },
+    templatePath: 'upload_input_template.html'
+})
+
+const UploadErrorWrapper = makeTestWrapper({
+    components: { uploadinput },
+    templatePath: 'upload_input_error_template.html'
+})
+
+describe('UploadInput Test', () => {
+    it('should show input and button when no attachment present', () => {
+        const wrapper = mount(UploadWrapper, {
+            propsData: {
+                initialData: null
+            }
+        })
+
+        const fileInput = wrapper.find('input[type=file]').element
+        expect(fileInput).not.toBe(undefined)
+    })
+
+    it('should show file name and hide input', () => {
+        const wrapper = mount(UploadWrapper, {
+            propsData: {
+                initialData: 'somepdf.pdf'
+            }
+        })
+
+        const fileInput = wrapper.find('input[type=file]').element
+        const fileNameSpan = wrapper.find('.uploaded-file__name')
+
+        expect(fileInput).toBe(undefined)
+        expect(fileNameSpan.html()).toContain('somepdf.pdf')
+    })
+
+    it('should correctly display error treatment', () => {
+        const wrapper = mount(UploadErrorWrapper)
+
+        const messageArea = wrapper.find('.usa-input__message')
+        expect(messageArea.html()).toContain('Test Error Message')
+    })
+})

js/test_templates/checkbox_input_template.html

@@ -1,16 +1,16 @@
 <checkboxinput
-    name='testVal'
+    name='datafield'
     inline-template
-    key='testVal'
-    v-bind:initial-checked='initialchecked'
+    key='datafield'
+    v-bind:initial-checked='initialvalue'
     >
     <div>
       <div class='usa-input  '>
 
         <fieldset data-ally-disabled="true" v-on:change="onInput" class="usa-input__choices ">
           <legend>
-            <input checked id="testVal" name="testVal" type="checkbox" v-model="isChecked" value="initialchecked">
-            <label for="testVal">Hooray!</label>
+            <input checked id="datafield" name="datafield" type="checkbox" v-model="isChecked" value="initialvalue">
+            <label for="datafield">initialvalue value</label>
 
             
           </legend>

js/test_templates/upload_input_error_template.html

@@ -0,0 +1,49 @@
+<uploadinput
+  inline-template
+  
+    v-bind:initial-errors='true'
+  
+  v-bind:watch='false'
+  name='errorfield'
+  :optional='false'
+  >
+  <div>
+    <div v-show="hasAttachment" class="uploaded-file">
+      
+      <span class="icon icon--check-circle-solid " aria-hidden="true"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="check-circle" class="svg-inline--fa fa-check-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path></svg></span>
+  
+      <span class="uploaded-file__name" v-html="baseName"></span>
+      <a href="#" class="uploaded-file__remove" v-on:click="removeAttachment">Remove</a>
+    </div>
+    <div v-show="hasAttachment === false" v-bind:class='{ "usa-input": true, "usa-input--error": showErrors }'>
+      
+      
+      <div v-if="!hideInput" class="upload-widget">
+        <label class="upload-label" for="errorfield">
+          <span class="upload-button">
+            Browse
+          </span>
+          
+            <span v-show="showErrors">
+      <span class="icon icon--alert icon-validation" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="#fdb81e">
+  <path d="M8 16c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zM8 2C4.691 2 2 4.691 2 8s2.691 6 6 6 6-2.691 6-6-2.691-6-6-6zm0 8c-.552 0-1-.447-1-1V4c0-.552.448-1 1-1s1 .448 1 1v5c0 .553-.448 1-1 1zm0 3c-.26 0-.52-.11-.71-.29-.18-.19-.29-.45-.29-.71 0-.271.11-.521.29-.71.38-.37 1.05-.37 1.42 0 .18.189.29.45.29.71s-.11.52-.29.71c-.19.18-.45.29-.71.29z"/>
+</svg>
+</span>
+  </span>
+          
+        </label>
+        <input
+          v-on:change="addAttachment"
+          ref="attachmentInput"
+          accept=""
+          id="errorfield"
+          name="errorfield"
+          aria-label="Task Order Upload"
+          type="file">
+      </div>
+      
+        <span v-show="showErrors" class="usa-input__message">Test Error Message</span>
+      
+    </div>
+  </div>
+</uploadinput>

js/test_templates/upload_input_template.html

@@ -0,0 +1,40 @@
+<uploadinput
+  inline-template
+  
+    v-bind:initial-data='initialvalue'
+  
+  v-bind:watch='false'
+  name='datafield'
+  :optional='false'
+  >
+  <div>
+    <div v-show="hasAttachment" class="uploaded-file">
+      
+      <span class="icon icon--check-circle-solid " aria-hidden="true"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="check-circle" class="svg-inline--fa fa-check-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path></svg></span>
+  
+      <span class="uploaded-file__name" v-html="baseName"></span>
+      <a href="#" class="uploaded-file__remove" v-on:click="removeAttachment">Remove</a>
+    </div>
+    <div v-show="hasAttachment === false" v-bind:class='{ "usa-input": true, "usa-input--error": showErrors }'>
+      
+      
+      <div v-if="!hideInput" class="upload-widget">
+        <label class="upload-label" for="datafield">
+          <span class="upload-button">
+            Browse
+          </span>
+          
+        </label>
+        <input
+          v-on:change="addAttachment"
+          ref="attachmentInput"
+          accept=""
+          id="datafield"
+          name="datafield"
+          aria-label="Task Order Upload"
+          type="file">
+      </div>
+      
+    </div>
+  </div>
+</uploadinput>

js/test_utils/component_test_helpers.js

@@ -0,0 +1,39 @@
+const fs = require('fs')
+
+/*
+Jinja templates will be exported with a root node that is a custom tag mapped to a vue component
+This wrapper allows us to mount the template and provide props. Props are provided by setting
+values on in this wrapper's data function. The names returned by the data function must align
+with the field names set in the template exporter script.
+
+In the example below, initial-checked is set to a value 'initialchecked', so
+'initialchecked' must be exported as a key from from the data function in order
+to be passed as a prop to checkboxinput at mount time
+<checkboxinput
+    name='testVal'
+    inline-template
+    key='testVal'
+    v-bind:initial-checked='initialvalue'
+    >
+*/
+const makeTestWrapper = ({components, templatePath}) => {
+    const templateString = fs.readFileSync(`js/test_templates/${templatePath}`, 'utf-8')
+
+    const WrapperComponent = {
+        name: 'WrapperComponent',
+        components,
+        template: templateString,
+        props: ['initialData'],
+        data: function() {
+            return {
+                initialvalue: this.initialData
+            }
+        }
+    }
+
+    return WrapperComponent
+}
+
+export {
+    makeTestWrapper
+}

script/render_vue_component.py

@@ -1,25 +1,52 @@
+import os
+import sys
+
+parent_dir = os.path.abspath(os.path.join(os.path.dirname(__file__), ".."))
+sys.path.append(parent_dir)
+
 from jinja2 import Environment, FileSystemLoader
-from wtforms.widgets import CheckboxInput
-from wtforms.fields import StringField
+from wtforms.widgets import CheckboxInput, FileInput
+from wtforms.fields import StringField, FileField
+from wtforms.validators import InputRequired
 from wtforms import Form
 
-env = Environment(loader=FileSystemLoader('templates/components'))
+from atst.filters import iconSvg
 
-checkbox_template = env.get_template('checkbox_input.html')
+env = Environment(loader=FileSystemLoader('templates'))
 
-field = StringField(
-    label="Hooray!",
-    default="initialchecked",
-    widget=CheckboxInput()
-)
+env.filters['iconSvg'] = iconSvg
 
-class BoolForm(Form):
-    testVal = field
+# override tojson as identity function to prevent
+# wrapping strings in extra quotes
+env.filters['tojson'] = lambda x: x
 
+class InitialValueForm(Form):
+    datafield = StringField(
+        label="initialvalue value",
+        default="initialvalue"
+    )
+
+    errorfield = StringField(
+        label="error",
+        validators=[InputRequired(message="Test Error Message")]
+    )
+
+checkbox_template = env.get_template('components/checkbox_input.html')
 ci_macro = getattr(checkbox_template.module, 'CheckboxInput')
-
-output_from_parsed_template = ci_macro(BoolForm().testVal)
-print(output_from_parsed_template)
-
+checkbox_input_form = InitialValueForm()
+checkbox_input_form.datafield.widget = CheckboxInput()
+rendered_checkbox_macro = ci_macro(checkbox_input_form.datafield)
 with open("js/test_templates/checkbox_input_template.html", "w") as fh:
-    fh.write(output_from_parsed_template)
+    fh.write(rendered_checkbox_macro)
+
+upload_template = env.get_template('components/upload_input.html')
+up_macro = getattr(upload_template.module, 'UploadInput')
+rendered_upload_macro = up_macro(InitialValueForm().datafield)
+with open("js/test_templates/upload_input_template.html", "w") as fh:
+    fh.write(rendered_upload_macro)
+
+erroredform = InitialValueForm()
+erroredform.validate()
+rendered_upload_error_macro = up_macro(erroredform.errorfield)
+with open("js/test_templates/upload_input_error_template.html", "w") as fh:
+    fh.write(rendered_upload_error_macro)