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