Spike that generates a checkbox template from jinja and allows us to mount and manipulate it

js/components/__tests__/checkbox_input.test.js

@@ -0,0 +1,68 @@
+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>
+`
+
+// 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,
+    data: function () {
+        return {
+            name: 'testCheck',
+            initialChecked: true
+        }
+    }
+}
+
+describe('CheckboxInput Renders Correctly', () => {
+    it('Should initialize checked', () => {
+        const wrapper = mount(WrapperComponent, {
+            propsData: {
+                name: 'testCheck',
+                initialChecked: true
+            }
+        })
+
+        wrapper.vm.$children[0].$data.isChecked = true
+
+        expect(wrapper.find('.usa-input input').element.checked).toBe(true)
+    })
+
+    it('Should initialize unchecked', () => {
+        const wrapper = mount(WrapperComponent, {
+            propsData: {
+                name: 'testCheck',
+                initialChecked: false
+            }
+        })
+
+        expect(wrapper.find('.usa-input input').element.checked).toBe(false)
+    })
+})

js/test_templates/checkbox_input_template.html

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

script/render_vue_component.py

@@ -0,0 +1,25 @@
+from jinja2 import Environment, FileSystemLoader
+from wtforms.widgets import CheckboxInput
+from wtforms.fields import BooleanField
+from wtforms import Form
+
+env = Environment(loader=FileSystemLoader('templates/components'))
+
+checkbox_template = env.get_template('checkbox_input.html')
+
+field = BooleanField(
+    label="Hooray!",
+    default=False,
+    widget=CheckboxInput()
+)
+
+class BoolForm(Form):
+    testVal = field
+
+ci_macro = getattr(checkbox_template.module, 'CheckboxInput')
+
+output_from_parsed_template = ci_macro(BoolForm().testVal)
+print(output_from_parsed_template)
+
+with open("js/test_templates/checkbox_input_template.html", "w") as fh:
+    fh.write(output_from_parsed_template)