Use change instead click event

client/src/components/ui/BaseInput.vue

@@ -4,7 +4,8 @@
       :checked="checked"
       type="checkbox"
       class="base-input-container__input"
-      @click.prevent="$emit('input', $event.target.checked, item)"
+      data-cy="base-input-input"
+      @change.prevent="$emit('input', $event.target.checked, item)"
     >
     <span
       :class="{'base-input-container__checkbox': type==='checkbox', 'base-input-container__radiobutton': type === 'radiobutton'}"
@@ -16,6 +17,7 @@
     </span>
     <span
       class="base-input-container__label"
+      data-cy="base-input-label"
       v-if="label">{{ label }}</span>
     <slot
       class="base-input-container__label"

client/tests/unit/checkbox.spec.js

@@ -0,0 +1,44 @@
+import {createLocalVue, mount} from '@vue/test-utils'
+import Checkbox from '@/components/ui/BaseInput';
+
+const localVue = createLocalVue()
+
+describe('Checkbox.vue', () => {
+
+  it('should display the provided props', async () => {
+    const props = {
+      label: 'Lonely label',
+      checked: false,
+      item: null
+    };
+    const wrapper = mount(Checkbox, {
+      propsData: props,
+      localVue
+    });
+
+    const input = wrapper.find('[data-cy="base-input-input"]');
+    const label = wrapper.find('[data-cy="base-input-label"]');
+
+    expect(input.element.checked).toEqual(props.checked);
+    expect(label.element.textContent).toEqual(props.label);
+  });
+
+  it('should emit updated value', async () => {
+    const labelText = 'Lonely label';
+    const item = {name: 'bla'}
+    const props = {
+      label: labelText,
+      checked: false,
+      item
+    };
+    const wrapper = mount(Checkbox, {
+      propsData: props,
+      localVue
+    });
+
+    wrapper.element.click();
+
+    expect(wrapper.emitted()['input'][0]).toEqual([!props.checked, item]);
+  });
+
+})