Spike that generates a checkbox template from jinja and allows us to mount and manipulate it
This commit is contained in:
parent
b98d7006c9
commit
fd6ad924d9
68
js/components/__tests__/checkbox_input.test.js
Normal file
68
js/components/__tests__/checkbox_input.test.js
Normal file
@ -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)
|
||||
})
|
||||
})
|
21
js/test_templates/checkbox_input_template.html
Normal file
21
js/test_templates/checkbox_input_template.html
Normal file
@ -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>
|
25
script/render_vue_component.py
Normal file
25
script/render_vue_component.py
Normal file
@ -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)
|
Loading…
x
Reference in New Issue
Block a user