From fd6ad924d998eb7cdc7d2f42772efc8f6ada767f Mon Sep 17 00:00:00 2001
From: tomdds <thomas+dds@promptworks.com>
Date: Thu, 11 Jul 2019 17:36:56 -0400
Subject: [PATCH] Spike that generates a checkbox template from jinja and
 allows us to mount and manipulate it

---
 .../__tests__/checkbox_input.test.js          | 68 +++++++++++++++++++
 .../checkbox_input_template.html              | 21 ++++++
 script/render_vue_component.py                | 25 +++++++
 3 files changed, 114 insertions(+)
 create mode 100644 js/components/__tests__/checkbox_input.test.js
 create mode 100644 js/test_templates/checkbox_input_template.html
 create mode 100644 script/render_vue_component.py

diff --git a/js/components/__tests__/checkbox_input.test.js b/js/components/__tests__/checkbox_input.test.js
new file mode 100644
index 00000000..6c3b69c5
--- /dev/null
+++ b/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)
+    })
+})
diff --git a/js/test_templates/checkbox_input_template.html b/js/test_templates/checkbox_input_template.html
new file mode 100644
index 00000000..097b9da1
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/script/render_vue_component.py b/script/render_vue_component.py
new file mode 100644
index 00000000..e13367d8
--- /dev/null
+++ b/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)