test: Resolve #171. Add test for single-checkbox

Author: Jenesius

src/widgets/inputs/input-single-checkbox/widget-input-single-checkbox.vue

@@ -1,11 +1,14 @@
 <template>
-	<field-wrap>
+	<field-wrap :errors = "errors">
 		<element-input-checkbox
-			:model-value="values ? modelValue === values[0] : modelValue"
+			:model-value="values ? modelValue === values[0] : modelValue || false"
 			:disabled="disabled"
 			:label="label"
 			@click="onInput"
-			@keyup.enter="onInput()"
+			@keyup.enter="onInput"
+			@keydown.space.prevent
+			@keyup.space="onInput"
+			:has-error = "errors.length !== 0"
 		/>
 	</field-wrap>
 </template>
@@ -18,7 +21,8 @@ const props = defineProps<{
 	label?: string,
 	modelValue: any,
 	disabled: boolean,
-	values?: [any, any]
+	values?: [any, any],
+	errors: string[]
 }>()
 
 const emit = defineEmits<{

tests/integrations/input-single-checkbox.spec.ts

@@ -0,0 +1,110 @@
+import {mount, VueWrapper} from "@vue/test-utils";
+import EmptyApp from "./components/EmptyApp.vue";
+import {defineComponent} from "vue";
+import {FormField, Form} from "./../../src/index";
+import STORE from "../../src/config/store";
+
+const name = "color"
+const cssElementInputCheckbox = '.element-input-checkbox'
+function defineCheckboxRadio() {
+	return defineComponent({
+		template: `<div><form-field type = "single-checkbox" name = "${name}" label = "Select color" required/></div>`,
+		components:  {FormField}
+	})
+}
+function defaultMount(component = defineCheckboxRadio()) {
+	return mount(EmptyApp, {
+		slots: {
+			default: component
+		},
+		attachTo: document.body
+	})
+}
+
+describe("Input single checkbox", () => {
+	let app: VueWrapper<any>
+	let form: Form
+	beforeEach(() => {
+		app = defaultMount();
+		form = (app.vm as any).form
+	})
+
+	test("Single radio show display the label", () => {
+		expect(app.text()).toBe("Select color")
+	})
+	test("should change value after click", async () => {
+		await app.find(cssElementInputCheckbox).trigger('click')
+		expect(form.getValueByName(name)).toBe(true)
+
+		await app.find(cssElementInputCheckbox).trigger('click')
+		expect(form.getValueByName(name)).toBe(false)
+
+		await app.find(cssElementInputCheckbox).trigger('click')
+		expect(form.getValueByName(name)).toBe(true)
+	})
+	test("Should show error", async () => {
+		form.validate();
+		await app.vm.$nextTick()
+		expect(app.find('.element-input-checkbox-button_error').exists()).toBe(true);
+		expect(app.text()).toBe("Select color" + STORE.requiredMessage)
+	})
+	test("Single radio should not trigger on click when stay in disabled status", async () => {
+		form.setValues({
+			[name]: true
+		})
+		form.disable();
+		await app.vm.$nextTick()
+		expect(app.find('.element-input-checkbox-button_disabled').exists()).toBe(true);
+
+		await app.find(cssElementInputCheckbox).trigger('click')
+		expect(form.getValueByName(name)).toBe(true)
+	})
+
+	test("Press space should toggle value", async () => {
+
+		const input = app.find(cssElementInputCheckbox);
+
+		await input.trigger('keyup.space')
+		expect(form.getValueByName(name)).toBe(true)
+
+		await input.trigger('keyup.space')
+		expect(form.getValueByName(name)).toBe(false)
+
+		await input.trigger('keyup.space')
+		expect(form.getValueByName(name)).toBe(true)
+
+	})
+	test("Press enter should toggle value", async () => {
+		const input = app.find(cssElementInputCheckbox);
+
+		await input.trigger('keyup.enter')
+		expect(form.getValueByName(name)).toBe(true)
+
+		await input.trigger('keyup.enter')
+		expect(form.getValueByName(name)).toBe(false)
+
+		await input.trigger('keyup.enter')
+		expect(form.getValueByName(name)).toBe(true)
+	})
+	test("If values was provided, modelValue should be or first or second value", async () => {
+		const app = defaultMount(defineComponent({
+			template: `<div><form-field 
+				type = "single-checkbox" name = "${name}" label = "Select color" required
+				:values = "['good', 'bad']"
+			/></div>`,
+			components:  {FormField}
+		}))
+		const form = (app.vm as any).form
+
+		const input = app.get(cssElementInputCheckbox)
+		
+		await input.trigger('keyup.enter')
+		expect(form.getValueByName(name)).toBe("good")
+
+		await input.trigger('keyup.enter')
+		expect(form.getValueByName(name)).toBe("bad")
+
+		await input.trigger('keyup.enter')
+		expect(form.getValueByName(name)).toBe("good")
+	})
+})