From 38a01f7db39a54da1da4afacb91cbbc614320fc3 Mon Sep 17 00:00:00 2001 From: tomdds Date: Fri, 12 Jul 2019 12:05:54 -0400 Subject: [PATCH] Clean up and generalize jinja to vue test template rendering and testing --- .../__tests__/checkbox_input.test.js | 53 +++-------------- js/components/__tests__/upload_input.test.js | 49 +++++++++++++++ .../checkbox_input_template.html | 10 ++-- .../upload_input_error_template.html | 49 +++++++++++++++ js/test_templates/upload_input_template.html | 40 +++++++++++++ js/test_utils/component_test_helpers.js | 39 ++++++++++++ script/render_vue_component.py | 59 ++++++++++++++----- 7 files changed, 233 insertions(+), 66 deletions(-) create mode 100644 js/components/__tests__/upload_input.test.js create mode 100644 js/test_templates/upload_input_error_template.html create mode 100644 js/test_templates/upload_input_template.html create mode 100644 js/test_utils/component_test_helpers.js diff --git a/js/components/__tests__/checkbox_input.test.js b/js/components/__tests__/checkbox_input.test.js index baa0907c..dd4d9d42 100644 --- a/js/components/__tests__/checkbox_input.test.js +++ b/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 = ` -
-
-
- - - Some words about this checkbox - -
-
-
-` +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) }) }) diff --git a/js/components/__tests__/upload_input.test.js b/js/components/__tests__/upload_input.test.js new file mode 100644 index 00000000..a5c4cbeb --- /dev/null +++ b/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') + }) +}) diff --git a/js/test_templates/checkbox_input_template.html b/js/test_templates/checkbox_input_template.html index 7d46be17..f5dd7474 100644 --- a/js/test_templates/checkbox_input_template.html +++ b/js/test_templates/checkbox_input_template.html @@ -1,16 +1,16 @@
- - + + diff --git a/js/test_templates/upload_input_error_template.html b/js/test_templates/upload_input_error_template.html new file mode 100644 index 00000000..077eaeb2 --- /dev/null +++ b/js/test_templates/upload_input_error_template.html @@ -0,0 +1,49 @@ + +
+
+ + + + + Remove +
+
+ + +
+ + +
+ + Test Error Message + +
+
+ \ No newline at end of file diff --git a/js/test_templates/upload_input_template.html b/js/test_templates/upload_input_template.html new file mode 100644 index 00000000..2179385f --- /dev/null +++ b/js/test_templates/upload_input_template.html @@ -0,0 +1,40 @@ + +
+
+ + + + + Remove +
+
+ + +
+ + +
+ +
+
+ \ No newline at end of file diff --git a/js/test_utils/component_test_helpers.js b/js/test_utils/component_test_helpers.js new file mode 100644 index 00000000..4339e81f --- /dev/null +++ b/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 + +*/ +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 +} diff --git a/script/render_vue_component.py b/script/render_vue_component.py index 9660a86f..11e776d5 100644 --- a/script/render_vue_component.py +++ b/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)