Skip to content
This repository was archived by the owner on Jun 27, 2023. It is now read-only.

Commit e1e5edb

Browse files
alvarosabualvarosabu
committed
test(radio-input): unit test and e2e
1 parent 877022a commit e1e5edb

File tree

16 files changed

+557
-14
lines changed

16 files changed

+557
-14
lines changed

‎demos/vue-3/src/router/index.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,15 @@ const routes: Array<RouteRecordRaw> = [
7474
/* webpackChunkName: "checkbox-fields" */ '../views/CheckboxFields.vue'
7575
),
7676
},
77+
{
78+
path: '/radio-fields',
79+
name: 'Radio Fields',
80+
meta: {
81+
title: 'Radio Fields',
82+
},
83+
component: () =>
84+
import(/* webpackChunkName: "radio-fields" */ '../views/RadioFields.vue'),
85+
},
7786
{
7887
path: '/login',
7988
name: 'Login',

‎demos/vue-3/src/views/CheckboxFields.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,13 +35,13 @@ const components = {
3535
};
3636
/* } from '../../dist/as-dynamic-forms.esm'; */
3737
export default defineComponent({
38-
name: 'TextFieldsDemo',
38+
name: 'CheckboxFieldsDemo',
3939
components,
4040
setup() {
4141
const formValues = reactive({});
4242
4343
const form = computed(() => ({
44-
id: 'text-fields-demo',
44+
id: 'checkbox-fields-demo',
4545
fields: {
4646
awesomeness: CheckboxField({
4747
label: "Check if you're awesome",

‎demos/vue-3/src/views/Home.vue‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,11 @@ export default defineComponent({
7171
route: '/checkbox-fields',
7272
tags: ['checkbox-field'],
7373
},
74+
{
75+
name: 'Radio Fields',
76+
route: '/radio-fields',
77+
tags: ['radio-field'],
78+
},
7479
{
7580
name: 'Login',
7681
route: '/login',

‎demos/vue-3/src/views/RadioFields.vue‎

Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
<template>
2+
<div class="page container">
3+
<div class="mx-auto w-full sm:w-1/2 relative mb-24">
4+
<div
5+
class="absolute inset-0 bg-gradient-to-r from-blue-400 to-green-200 shadow-xl transform -skew-y-3 sm:skew-y-0 sm:-rotate-3 sm:rounded-3xl"
6+
></div>
7+
<div class="relative card p-6 bg-white">
8+
<dynamic-form
9+
:form="form"
10+
@submitted="handleSubmit"
11+
@change="valueChanged"
12+
@error="handleError"
13+
/>
14+
<button
15+
data-cy="submit"
16+
class="btn bg-green-500 text-white hover:bg-green-700 mt-4"
17+
submit="true"
18+
:form="form?.id"
19+
>
20+
Sign In
21+
</button>
22+
</div>
23+
</div>
24+
<div class="mx-auto w-full sm:w-1/2"><Console :content="formValues" /></div>
25+
</div>
26+
</template>
27+
28+
<script lang="ts">
29+
import { RadioField, Validator, required } from '@/';
30+
import { computed, defineComponent, reactive } from 'vue';
31+
import Console from '../components/Console.vue';
32+
33+
const components = {
34+
Console,
35+
};
36+
/* } from '../../dist/as-dynamic-forms.esm'; */
37+
export default defineComponent({
38+
name: 'RadioFieldsDemo',
39+
components,
40+
setup() {
41+
const formValues = reactive({});
42+
43+
const form = computed(() => ({
44+
id: 'text-fields-demo',
45+
fields: {
46+
character: RadioField({
47+
label: 'Select one option',
48+
options: [
49+
{
50+
key: 'mario',
51+
value: 'Mario',
52+
},
53+
{
54+
key: 'crash-bandicoot',
55+
value: 'Crash Bandicoot',
56+
},
57+
{
58+
key: 'sonic',
59+
value: 'Sonic',
60+
},
61+
{
62+
key: 'banjo-kazooie',
63+
value: 'Banjo Kazooie',
64+
disabled: true,
65+
},
66+
],
67+
}),
68+
console: RadioField({
69+
label: 'Select one option',
70+
options: [
71+
{
72+
key: 'nintendo-switch',
73+
value: 'Nintendo Switch',
74+
},
75+
{
76+
key: 'ps4',
77+
value: 'PS4',
78+
},
79+
80+
{
81+
key: 'ps5',
82+
value: 'PS5',
83+
},
84+
{
85+
key: 'Xbox',
86+
value: 'XBox Serie X',
87+
},
88+
],
89+
value: 'ps5',
90+
}),
91+
required: RadioField({
92+
label: 'Required',
93+
customClass: 'w-1/2',
94+
options: [
95+
{
96+
key: 'yes',
97+
value: 'Yes',
98+
},
99+
{
100+
key: 'no',
101+
value: 'No',
102+
},
103+
],
104+
validations: [
105+
Validator({ validator: required, text: 'This field is required' }),
106+
],
107+
}),
108+
disabled: RadioField({
109+
label: 'Disabled',
110+
customClass: 'w-1/2',
111+
disabled: true,
112+
options: [
113+
{
114+
key: 'disable',
115+
value: 'Disable',
116+
},
117+
{
118+
key: 'no',
119+
value: 'No',
120+
},
121+
],
122+
}),
123+
},
124+
options: {
125+
customClass: 'flex flex-wrap',
126+
},
127+
}));
128+
129+
function handleSubmit(values) {
130+
console.log('Values Submitted', values);
131+
}
132+
133+
function valueChanged(values) {
134+
Object.assign(formValues, values);
135+
console.log('Values', values);
136+
}
137+
138+
function handleError(errors) {
139+
console.error('Errors', errors);
140+
}
141+
142+
return {
143+
form,
144+
formValues,
145+
handleSubmit,
146+
valueChanged,
147+
handleError,
148+
};
149+
},
150+
});
151+
</script>
152+
<style lang="scss"></style>

‎src/components/checkbox-input/CheckboxInput.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<script lang="ts">
22
import { defineComponent, h, PropType } from 'vue';
33
import { FormControl, CheckboxInput } from '@/core/models';
4-
import { useInputEvents } from '@/composables/input-events';
4+
import { useInputEvents } from '@/composables/use-input-events';
55
import { useInputValidation } from '@/composables/use-validation';
66
77
const props = {

‎src/components/dynamic-input/DynamicInput.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ import {
2929
} from '@/core/models';
3030
3131
import { isArray, isObject } from '@/core/utils/helpers';
32-
import { useInputEvents } from '@/composables/input-events';
32+
import { useInputEvents } from '@/composables/use-input-events';
3333
3434
const components = {
3535
TextInputComponent,

‎src/components/number-input/NumberInput.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<script lang="ts">
22
import { defineComponent, h, PropType } from 'vue';
33
import { FormControl, NumberInput } from '@/core/models';
4-
import { useInputEvents } from '@/composables/input-events';
4+
import { useInputEvents } from '@/composables/use-input-events';
55
import { useInputValidation } from '@/composables/use-validation';
66
77
const props = {

‎src/components/radio-input/RadioInput.spec.ts‎

Lines changed: 175 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,175 @@
1+
import { mount } from '@vue/test-utils';
2+
import RadioInput from './RadioInput.vue';
3+
import { FieldControl, RadioField, Validator, required } from '../../index';
4+
5+
describe('RadioInput', () => {
6+
let cmp;
7+
8+
beforeEach(() => {
9+
cmp = mount(RadioInput, {
10+
props: {
11+
control: FieldControl({
12+
name: 'test-radio',
13+
...RadioField({
14+
label: 'Test Radio',
15+
options: [
16+
{
17+
key: 'mario',
18+
value: 'Mario',
19+
},
20+
{
21+
key: 'crash-bandicoot',
22+
value: 'Crash Bandicoot',
23+
},
24+
{
25+
key: 'sonic',
26+
value: 'Sonic',
27+
},
28+
{
29+
key: 'banjo-kazooie',
30+
value: 'Banjo Kazooie',
31+
disabled: true,
32+
},
33+
],
34+
}),
35+
}),
36+
},
37+
});
38+
});
39+
40+
it('renders an group of inputs of type radio', () => {
41+
const group = cmp.find('.radio-group');
42+
const radios = cmp.findAll('.radio-control');
43+
expect(group.exists()).toBe(true);
44+
expect(radios.length).toBeGreaterThan(0);
45+
});
46+
47+
it(`renders an input with class 'radio-control'`, () => {
48+
const input = cmp.find('input');
49+
expect(input.classes()).toContain('radio-control');
50+
});
51+
52+
it(`renders an input with id equal to field name`, () => {
53+
const input = cmp.find('[type=radio][value=crash-bandicoot]');
54+
expect(input.attributes('id')).toBe('crash-bandicoot');
55+
});
56+
57+
// TODO: Open ticket with reproduction link on https://github.com/vuejs/vue-test-utils-next/issues
58+
/*
59+
it(`input gets checked when value is true`, async () => {
60+
await cmp.setProps({
61+
control: FieldControl({
62+
name: 'test-input',
63+
...RadioField({
64+
label: 'Test Radio',
65+
value: true,
66+
}),
67+
}),
68+
});
69+
const input = cmp.find('.radio-control');
70+
expect(input.attributes('checked')).toBe('');
71+
});
72+
73+
it(`input gets disabled when form control does it`, async () => {
74+
await cmp.setProps({
75+
control: FieldControl({
76+
name: 'test-input',
77+
...RadioField({
78+
label: 'Test Input',
79+
disabled: true,
80+
}),
81+
}),
82+
});
83+
const input = cmp.find('.radio-control');
84+
expect(input.attributes('disabled')).toBe('');
85+
});
86+
87+
it(`renders a required input`, async () => {
88+
await cmp.setProps({
89+
control: FieldControl({
90+
name: 'test-input',
91+
...RadioField({
92+
label: 'Test Input',
93+
validations: [
94+
Validator({ validator: required, text: 'This field is required' }),
95+
],
96+
}),
97+
}),
98+
});
99+
const input = cmp.find('.radio-control');
100+
expect(input.attributes('required')).toBe('');
101+
});
102+
103+
it(`sets ariaRequired when required`, async () => {
104+
await cmp.setProps({
105+
control: FieldControl({
106+
name: 'test-input',
107+
...RadioField({
108+
label: 'Test Input',
109+
validations: [
110+
Validator({ validator: required, text: 'This field is required' }),
111+
],
112+
}),
113+
}),
114+
});
115+
const input = cmp.find('.radio-control');
116+
expect(input.attributes('ariarequired')).toBe('true');
117+
});
118+
119+
it(`renders a readonly input`, async () => {
120+
await cmp.setProps({
121+
control: FieldControl({
122+
name: 'test-input',
123+
...RadioField({
124+
label: 'Test Input',
125+
readonly: true,
126+
}),
127+
}),
128+
});
129+
const input = cmp.find('.radio-control');
130+
expect(input.attributes('readonly')).toBe('');
131+
});
132+
133+
it(`renders an input with aria labels`, async () => {
134+
await cmp.setProps({
135+
control: FieldControl({
136+
name: 'test-input',
137+
...RadioField({
138+
label: 'Test Input',
139+
ariaLabel: 'Im a test input',
140+
}),
141+
}),
142+
});
143+
const input = cmp.find('.radio-control');
144+
expect(input.attributes('arialabel')).toBe('Im a test input');
145+
});
146+
147+
it('emits an event when value changed', async () => {
148+
const input = cmp.find('input[type=radio][value=crash-bandicoot]');
149+
await input.setValue();
150+
151+
expect(cmp.emitted()).toHaveProperty('change');
152+
expect(cmp.emitted('change')[0][0].value).toBe(true);
153+
});
154+
155+
it('emits the control name when value change', async () => {
156+
const input = cmp.find('input[type=radio][value=crash-bandicoot]');
157+
await input.setValue();
158+
159+
expect(cmp.emitted('change')[0][0].name).toBe('test-radio');
160+
}); */
161+
162+
it('emits an event when blur', async () => {
163+
const input = cmp.find('input[type=radio][value=crash-bandicoot]');
164+
await input.trigger('blur');
165+
166+
expect(cmp.emitted()).toHaveProperty('blur');
167+
});
168+
169+
it('emits an event when focus', async () => {
170+
const input = cmp.find('input[type=radio][value=crash-bandicoot]');
171+
await input.trigger('focus');
172+
173+
expect(cmp.emitted()).toHaveProperty('focus');
174+
});
175+
});

0 commit comments

Comments
 (0)