Write tests for multi checkbox input vue component

This commit is contained in:
graham-dds 2019-12-13 12:53:07 -05:00
parent cbea71259c
commit 07b4238c2b
2 changed files with 124 additions and 1 deletions

View File

@ -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)
})
})

View File

@ -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")