Write tests for multi checkbox input vue component
This commit is contained in:
parent
cbea71259c
commit
07b4238c2b
102
js/components/__tests__/multi_checkbox_input.test.js
Normal file
102
js/components/__tests__/multi_checkbox_input.test.js
Normal 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)
|
||||||
|
})
|
||||||
|
})
|
@ -1,10 +1,11 @@
|
|||||||
import pytest
|
import pytest
|
||||||
|
|
||||||
from bs4 import BeautifulSoup
|
from bs4 import BeautifulSoup
|
||||||
|
from flask import Markup
|
||||||
from wtforms import Form, FormField
|
from wtforms import Form, FormField
|
||||||
from wtforms.fields import StringField
|
from wtforms.fields import StringField
|
||||||
from wtforms.validators import InputRequired
|
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 CLINForm
|
||||||
from atst.forms.task_order import TaskOrderForm
|
from atst.forms.task_order import TaskOrderForm
|
||||||
@ -56,6 +57,12 @@ def checkbox_input_macro(env):
|
|||||||
return getattr(checkbox_template.module, "CheckboxInput")
|
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
|
@pytest.fixture
|
||||||
def initial_value_form(scope="function"):
|
def initial_value_form(scope="function"):
|
||||||
return InitialValueForm()
|
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")
|
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):
|
def test_make_upload_input_template(upload_input_macro, task_order_form):
|
||||||
rendered_upload_macro = upload_input_macro(task_order_form.pdf)
|
rendered_upload_macro = upload_input_macro(task_order_form.pdf)
|
||||||
write_template(rendered_upload_macro, "upload_input_template.html")
|
write_template(rendered_upload_macro, "upload_input_template.html")
|
||||||
|
Loading…
x
Reference in New Issue
Block a user