test: add test for single-radio

Author: Jenesius

examples/input-single-radio/App.vue

@@ -0,0 +1,19 @@
+<template>
+	<div>
+		<form-field name = "checkbox" type = "single-radio" />
+		<form-field name = "checkbox" type = "single-radio" label = "With label" />
+		<form-field name = "checkbox" type = "single-radio" label = "Disabled" disabled />
+		<form-field name = "checkbox" type = "single-radio" label = "With Error" :errors = "['Some mistake']" />
+
+	</div>
+</template>
+
+<script setup>
+import {Form, FormField} from "../../src";
+
+const form = new Form();
+</script>
+
+<style scoped>
+
+</style>

examples/input-single-radio/main.ts

@@ -0,0 +1,3 @@
+import { createApp } from 'vue'
+import App from './App.vue';
+createApp(App).mount('#app')

src/config/store.ts

@@ -48,7 +48,7 @@ const STORE: IStore = {
 	}
 }
 
-type defineInputTypes = 'text' | 'select' | 'radio' | 'checkbox' | 'switch' | 'password' | 'tel' | 'number' | 'range' | 'textarea';
+type defineInputTypes = 'single-checkbox' | 'single-radio' | 'text' | 'select' | 'radio' | 'checkbox' | 'switch' | 'password' | 'tel' | 'number' | 'range' | 'textarea';
 export interface IStore {
 	inputTypes: {
 		[name: defineInputTypes | string]: any

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

@@ -1,6 +1,17 @@
 <template>
     <field-wrap :errors = "errors">
-		<element-input-radio :model-value="!!modelValue" :disabled="disabled" :label="label" :error="!!errors.length" @input = "onInput"/>
+		<element-input-radio
+			:model-value="!!modelValue"
+			:disabled="disabled"
+			:label="label"
+			:error="!!errors.length"
+			:tabindex = "!disabled ? 0 : 'none'"
+
+			@input = "handleInput"
+			@keyup.enter="handleInput"
+			@keydown.space.prevent
+			@keyup.space.prevent="handleInput"
+		/>
     </field-wrap>
 </template>
 
@@ -19,7 +30,7 @@
         (e: 'update:modelValue', v: any): void
     }>()
 
-    function onInput() {
+    function handleInput() {
         if (props.disabled) return;
         emit('update:modelValue', !props.modelValue)
     }

tests/integrations/input-checkbox.spec.ts

@@ -97,7 +97,6 @@ describe("Input checkbox", () => {
 			defaultOptions.map(el => el.label).join('') + STORE.requiredMessage
 		)
 	})
-
 	test("Tabindex should be added for all items", () => {
 		const items = app.findAll('.element-input-checkbox')
 

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

@@ -0,0 +1,88 @@
+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"
+function defineSingleRadio() {
+	return defineComponent({
+		template: `<div><form-field type = "single-radio" name = "${name}" label = "Select color" required/></div>`,
+		components:  {FormField}
+	})
+}
+function defaultMount(component = defineSingleRadio()) {
+	return mount(EmptyApp, {
+		slots: {
+			default: component
+		},
+		attachTo: document.body
+	})
+}
+
+describe("Input single radio", () => {
+	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('.element-input-radio').trigger('click')
+		expect(form.getValueByName(name)).toBe(true)
+
+		await app.find('.element-input-radio').trigger('click')
+		expect(form.getValueByName(name)).toBe(false)
+
+		await app.find('.element-input-radio').trigger('click')
+		expect(form.getValueByName(name)).toBe(true)
+	})
+	test("Should show error", async () => {
+		form.validate();
+		await app.vm.$nextTick()
+		expect(app.find('.element-input-radio_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-radio_disabled').exists()).toBe(true);
+
+		await app.find('.element-input-radio').trigger('click')
+		expect(form.getValueByName(name)).toBe(true)
+	})
+
+	test("Press space should toggle value", async () => {
+
+		const input = app.find('.element-input-radio');
+
+		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('.element-input-radio');
+
+		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)
+	})
+})

vue.config.cjs

@@ -38,6 +38,9 @@ module.exports = defineConfig({
     },
     "all-inputs": {
       entry: "./examples/all-inputs/main.ts"
+    },
+    "input-single-radio": {
+      entry: "./examples/input-single-radio/main.ts"
     }
   },
   configureWebpack: {