diff --git a/js/components/__tests__/checkbox_input.test.js b/js/components/__tests__/checkbox_input.test.js new file mode 100644 index 00000000..6be9c1e4 --- /dev/null +++ b/js/components/__tests__/checkbox_input.test.js @@ -0,0 +1,34 @@ +import { mount } from '@vue/test-utils' + +import checkboxinput from '../checkbox_input' + +import { makeTestWrapper } from '../../test_utils/component_test_helpers' + +const WrapperComponent = makeTestWrapper({ + components: { + checkboxinput, + }, + templatePath: 'checkbox_input_template.html', +}) + +describe('CheckboxInput Renders Correctly', () => { + it('Should initialize checked', () => { + const wrapper = mount(WrapperComponent, { + propsData: { + name: 'testCheck', + initialData: true, + }, + }) + expect(wrapper.find('.usa-input input').element.checked).toBe(true) + }) + + it('Should initialize unchecked', () => { + const wrapper = mount(WrapperComponent, { + propsData: { + name: 'testCheck', + 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..96a1be89 --- /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 new file mode 100644 index 00000000..f5dd7474 --- /dev/null +++ b/js/test_templates/checkbox_input_template.html @@ -0,0 +1,21 @@ + +
+
+ +
+ + + + + + +
+
+ +
+ \ No newline at end of file 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..e81d9603 --- /dev/null +++ b/js/test_utils/component_test_helpers.js @@ -0,0 +1,40 @@ +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/tests/render_vue_component.py b/tests/render_vue_component.py new file mode 100644 index 00000000..5d9f3b08 --- /dev/null +++ b/tests/render_vue_component.py @@ -0,0 +1,61 @@ +import pytest + +from wtforms.widgets import CheckboxInput +from wtforms.fields import StringField +from wtforms.validators import InputRequired +from wtforms import Form + + +class InitialValueForm(Form): + datafield = StringField(label="initialvalue value", default="initialvalue") + + errorfield = StringField( + label="error", validators=[InputRequired(message="Test Error Message")] + ) + + +@pytest.fixture +def env(app, scope="function"): + return app.jinja_env + + +@pytest.fixture +def upload_input_macro(env): + # override tojson as identity function to prevent + # wrapping strings in extra quotes + env.filters["tojson"] = lambda x: x + upload_template = env.get_template("components/upload_input.html") + return getattr(upload_template.module, "UploadInput") + + +@pytest.fixture +def checkbox_input_macro(env): + checkbox_template = env.get_template("components/checkbox_input.html") + return getattr(checkbox_template.module, "CheckboxInput") + + +@pytest.fixture +def initial_value_form(scope="function"): + return InitialValueForm() + + +def write_template(content, name): + with open("js/test_templates/{}".format(name), "w") as fh: + fh.write(content) + + +def test_make_checkbox_input_template(checkbox_input_macro, initial_value_form): + initial_value_form.datafield.widget = CheckboxInput() + rendered_checkbox_macro = checkbox_input_macro(initial_value_form.datafield) + write_template(rendered_checkbox_macro, "checkbox_input_template.html") + + +def test_make_upload_input_template(upload_input_macro, initial_value_form): + rendered_upload_macro = upload_input_macro(initial_value_form.datafield) + write_template(rendered_upload_macro, "upload_input_template.html") + + +def test_make_upload_input_error_template(upload_input_macro, initial_value_form): + initial_value_form.validate() + rendered_upload_macro = upload_input_macro(initial_value_form.errorfield) + write_template(rendered_upload_macro, "upload_input_error_template.html")