Write tests for multi checkbox input vue component

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

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