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

Commit 07ab065

Browse files
committed
feat(select-input): unit test and e2e
1 parent 555a928 commit 07ab065

File tree

13 files changed

+484
-16
lines changed

13 files changed

+484
-16
lines changed

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,15 @@ const routes: Array<RouteRecordRaw> = [
4343
component: () =>
4444
import(/* webpackChunkName: "text-fields" */ '../views/NumberFields.vue'),
4545
},
46+
{
47+
path: '/select-fields',
48+
name: 'Select Fields',
49+
meta: {
50+
title: 'Select Fields',
51+
},
52+
component: () =>
53+
import(/* webpackChunkName: "text-fields" */ '../views/SelectFields.vue'),
54+
},
4655
{
4756
path: '/login',
4857
name: 'Login',

demos/vue-3/src/views/Basic.vue

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,6 @@ export default defineComponent({
4848
}),
4949
games: SelectField({
5050
label: 'Games',
51-
autocomplete: 'current-password',
5251
options: [
5352
{
5453
value: 'the-last-of-us',

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,11 @@ export default defineComponent({
5656
route: '/number-fields',
5757
tags: ['number-field'],
5858
},
59+
{
60+
name: 'Select Fields',
61+
route: '/select-fields',
62+
tags: ['select-field'],
63+
},
5964
{
6065
name: 'Login',
6166
route: '/login',

demos/vue-3/src/views/NumberFields.vue

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,11 @@ export default defineComponent({
8181
step: 5,
8282
validations: [Validator(maxValidator)],
8383
}),
84+
disabled: NumberField({
85+
label: 'Disabled',
86+
value: 3,
87+
disabled: true,
88+
}),
8489
},
8590
options: {
8691
customClass: 'grid gap-4 grid-cols-2',
Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
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+
Submit
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 { SelectField, 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: 'SelectFieldsDemo',
39+
components,
40+
setup() {
41+
const formValues = reactive({});
42+
43+
const form = computed(() => ({
44+
id: 'select-fields-demo',
45+
fields: {
46+
game: SelectField({
47+
label: 'Games',
48+
options: [
49+
{
50+
value: 'the-last-of-us',
51+
label: 'The Last of Us II',
52+
},
53+
{
54+
value: 'death-stranding',
55+
label: 'Death Stranding',
56+
},
57+
{
58+
value: 'nier-automata',
59+
label: 'Nier Automata',
60+
},
61+
],
62+
validations: [
63+
Validator({ validator: required, text: 'This field is required' }),
64+
],
65+
}),
66+
character: SelectField({
67+
label: 'Characters',
68+
options: [
69+
{
70+
value: 'crash',
71+
label: 'Crash Bandicoot',
72+
},
73+
{
74+
value: 'spyro',
75+
label: 'Spyro the Dragon',
76+
},
77+
{
78+
value: 'cloud',
79+
label: 'Cloud',
80+
},
81+
],
82+
}),
83+
disabled: SelectField({
84+
label: 'Disabled',
85+
options: [
86+
{
87+
value: 'crash',
88+
label: 'Crash Bandicoot',
89+
},
90+
{
91+
value: 'spyro',
92+
label: 'Spyro the Dragon',
93+
},
94+
{
95+
value: 'cloud',
96+
label: 'Cloud',
97+
},
98+
],
99+
disabled: true,
100+
}),
101+
},
102+
options: {
103+
customClass: 'grid gap-4 grid-cols-2',
104+
},
105+
}));
106+
107+
function handleSubmit(values) {
108+
console.log('Values Submitted', values);
109+
}
110+
111+
function valueChanged(values) {
112+
Object.assign(formValues, values);
113+
console.log('Values', values);
114+
}
115+
116+
function handleError(errors) {
117+
console.error('Errors', errors);
118+
}
119+
120+
return {
121+
form,
122+
formValues,
123+
handleSubmit,
124+
valueChanged,
125+
handleError,
126+
};
127+
},
128+
});
129+
</script>

demos/vue-3/src/views/TextFields.vue

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,11 @@ export default defineComponent({
9191
passwordValidator,
9292
],
9393
}),
94+
disabled: TextField({
95+
label: 'Disabled',
96+
customClass: 'w-1/2 pr-4',
97+
disabled: true,
98+
}),
9499
},
95100
options: {
96101
customClass: 'flex flex-wrap',

package-lock.json

Lines changed: 6 additions & 6 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@
4242
"@vue/compiler-sfc": "3.0.2",
4343
"@vue/eslint-config-prettier": "^6.0.0",
4444
"@vue/eslint-config-typescript": "^7.0.0",
45-
"@vue/test-utils": "^2.0.0-beta.10",
45+
"@vue/test-utils": "^2.0.0-beta.13",
4646
"babel-core": "7.0.0-bridge.0",
4747
"babel-eslint": "10.1.0",
4848
"babel-jest": "26.6.3",
@@ -69,7 +69,7 @@
6969
"typescript": "~4.1.2",
7070
"vue": "^3.0.0",
7171
"vue-cli-plugin-cypress-experimental": "~1.2.0",
72-
"vue-jest": "^5.0.0-alpha.6",
72+
"vue-jest": "^5.0.0-alpha.7",
7373
"vue-router": "^4.0.1",
7474
"vue-select": "3.10.8"
7575
},

0 commit comments

Comments
 (0)