From 07b4238c2b24d4a1654469eb51e81f2597a0bc9f Mon Sep 17 00:00:00 2001 From: graham-dds Date: Fri, 13 Dec 2019 12:53:07 -0500 Subject: [PATCH] Write tests for multi checkbox input vue component --- .../__tests__/multi_checkbox_input.test.js | 102 ++++++++++++++++++ tests/render_vue_component.py | 23 +++- 2 files changed, 124 insertions(+), 1 deletion(-) create mode 100644 js/components/__tests__/multi_checkbox_input.test.js diff --git a/js/components/__tests__/multi_checkbox_input.test.js b/js/components/__tests__/multi_checkbox_input.test.js new file mode 100644 index 00000000..8e012db4 --- /dev/null +++ b/js/components/__tests__/multi_checkbox_input.test.js @@ -0,0 +1,102 @@ +import { mount } from '@vue/test-utils' +import multicheckboxinput from '../multi_checkbox_input' +import { makeTestWrapper } from '../../test_utils/component_test_helpers' + +const WrapperComponent = makeTestWrapper({ + components: { + multicheckboxinput, + }, + templatePath: 'multi_checkbox_input_template.html', + data: function() { + const { initialvalue, optional } = this.initialData + return { initialvalue, optional } + }, +}) + +describe('MultiCheckboxInput Renders Correctly', () => { + it('Should initialize unchecked and with no validation showing', () => { + const wrapper = mount(WrapperComponent, { + propsData: { + name: 'testCheck', + initialData: { + initialvalue: [], + }, + }, + }) + expect(wrapper.contains('.usa-input--success')).toBe(false) + expect(wrapper.contains('.usa-input--error')).toBe(false) + expect(wrapper.find('.usa-input input[value="a"]').element.checked).toBe( + false + ) + expect(wrapper.find('.usa-input input[value="b"]').element.checked).toBe( + false + ) + }) + + it('Should initialize with "a" checked', () => { + const wrapper = mount(WrapperComponent, { + propsData: { + name: 'testCheck', + initialData: { + initialvalue: ['a'], + }, + }, + }) + expect(wrapper.find('.usa-input input[value="a"]').element.checked).toBe( + true + ) + expect(wrapper.find('.usa-input input[value="b"]').element.checked).toBe( + false + ) + }) +}) + +describe('Multicheckbox shows validation states correctly', () => { + it('Should be valid when any checkbox is clicked', () => { + const wrapper = mount(WrapperComponent, { + propsData: { + name: 'testCheck', + initialData: { initialvalue: [] }, + }, + }) + wrapper.find('.usa-input input[value="a"]').setChecked() + expect(wrapper.contains('.usa-input--success')).toBe(true) + expect(wrapper.contains('.usa-input--error')).toBe(false) + }) + + it('Should be invalid when no checkboxes are checked', () => { + const wrapper = mount(WrapperComponent, { + propsData: { + name: 'testCheck', + initialData: { + initialvalue: [], + }, + }, + }) + + // Check and then uncheck a checkbox + const checkboxA = wrapper.find('.usa-input input[value="a"]') + checkboxA.setChecked() + checkboxA.setChecked(false) + + expect(wrapper.contains('.usa-input--error')).toBe(true) + expect(wrapper.contains('.usa-input--success')).toBe(false) + }) + + it('Should be valid when no checkboxes are checked but it is optional', () => { + const wrapper = mount(WrapperComponent, { + propsData: { + name: 'testCheck', + initialData: { initialvalue: [], optional: true }, + }, + }) + + // Check and then uncheck a checkbox + const checkboxA = wrapper.find('.usa-input input[value="a"]') + checkboxA.setChecked() + checkboxA.setChecked(false) + + expect(wrapper.contains('.usa-input--error')).toBe(false) + expect(wrapper.contains('.usa-input--success')).toBe(true) + }) +}) diff --git a/tests/render_vue_component.py b/tests/render_vue_component.py index c4a7c135..62106a67 100644 --- a/tests/render_vue_component.py +++ b/tests/render_vue_component.py @@ -1,10 +1,11 @@ import pytest from bs4 import BeautifulSoup +from flask import Markup from wtforms import Form, FormField from wtforms.fields import StringField from wtforms.validators import InputRequired -from wtforms.widgets import CheckboxInput +from wtforms.widgets import ListWidget, CheckboxInput from atst.forms.task_order import CLINForm from atst.forms.task_order import TaskOrderForm @@ -56,6 +57,12 @@ def checkbox_input_macro(env): return getattr(checkbox_template.module, "CheckboxInput") +@pytest.fixture +def multi_checkbox_input_macro(env): + multi_checkbox_template = env.get_template("components/multi_checkbox_input.html") + return getattr(multi_checkbox_template.module, "MultiCheckboxInput") + + @pytest.fixture def initial_value_form(scope="function"): return InitialValueForm() @@ -82,6 +89,20 @@ def test_make_checkbox_input_template(checkbox_input_macro, initial_value_form): write_template(rendered_checkbox_macro, "checkbox_input_template.html") +def test_make_multi_checkbox_input_template( + multi_checkbox_input_macro, initial_value_form +): + initial_value_form.datafield.widget = ListWidget() + initial_value_form.datafield.option_widget = CheckboxInput() + initial_value_form.datafield.choices = [("a", "A"), ("b", "B")] + rendered_multi_checkbox_input_macro = multi_checkbox_input_macro( + initial_value_form.datafield, optional=Markup("'optional'") + ) + write_template( + rendered_multi_checkbox_input_macro, "multi_checkbox_input_template.html" + ) + + def test_make_upload_input_template(upload_input_macro, task_order_form): rendered_upload_macro = upload_input_macro(task_order_form.pdf) write_template(rendered_upload_macro, "upload_input_template.html")