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

Commit 69b71de

Browse files
alvarosabualvarosabu
committed
feat(test): cypress with vite
1 parent 762d639 commit 69b71de

20 files changed

+1680
-536
lines changed

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -148,7 +148,7 @@ export default defineComponent({
148148

149149
We've prepared some demos to show different use cases of the library and how to use each type of input field.
150150

151-
To check them just run the command bellow which run the app at `http://localhost:6044/ `
151+
To check them just run the command bellow which run the app at `http://localhost:3000/ `
152152

153153
```
154154
yarn run serve

‎cypress.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"baseUrl": "http://localhost:6044",
2+
"baseUrl": "http://localhost:3000",
33
"pluginsFile": "tests/e2e/plugins/index.js",
44
"testFiles": "**/*.e2e.js*"
55
}

‎demos/vue-3/src/main.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@ import App from './App.vue';
33
import './styles/main.css';
44
import router from './router';
55

6-
/* import { createDynamicForms } from '/@'; */
6+
import { createDynamicForms } from '/@';
77

8-
import { createDynamicForms } from '../../../dist/as-dynamic-forms.es';
8+
/* import { createDynamicForms } from '../../../dist/as-dynamic-forms.es'; */
99

1010
const VueDynamicForms = createDynamicForms({
1111
autoValidate: true,

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

Lines changed: 37 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,9 @@
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="
6-
absolute
7-
inset-0
8-
bg-gradient-to-r
9-
from-blue-400
10-
to-green-200
11-
shadow-xl
12-
transform
13-
-skew-y-3
14-
sm:skew-y-0 sm:-rotate-3 sm:rounded-3xl
15-
"
16-
></div>
17-
<div class="relative card p-6 bg-white">
18-
<DynamicForm
19-
:form="form"
20-
@submitted="handleSubmit"
21-
@change="valueChanged"
22-
@error="handleError"
23-
/>
24-
<button
25-
data-cy="submit"
26-
class="btn bg-green-500 text-white hover:bg-green-700 mt-4"
27-
submit="true"
28-
:form="form?.id"
29-
>
30-
Try me
31-
</button>
32-
</div>
33-
</div>
34-
<div class="mx-auto w-full sm:w-1/2"><Console :content="formValues" /></div>
35-
</div>
36-
</template>
37-
381
<script lang="ts">
392
import { CheckboxField, TextField, SelectField } from '/@/';
403
import { computed, defineComponent, reactive } from 'vue';
41-
import Console from '../components/Console.vue';
424
43-
const components = {
44-
Console,
45-
};
46-
/* } from '../../dist/as-dynamic-forms.esm'; */
475
export default defineComponent({
486
name: 'BasicDemo',
49-
components,
507
setup() {
518
const formValues = reactive({});
529
@@ -102,6 +59,43 @@ export default defineComponent({
10259
},
10360
});
10461
</script>
62+
<template>
63+
<div class="page container">
64+
<div class="mx-auto w-full sm:w-1/2 relative mb-24">
65+
<div
66+
class="
67+
absolute
68+
inset-0
69+
bg-gradient-to-r
70+
from-blue-400
71+
to-green-200
72+
shadow-xl
73+
transform
74+
-skew-y-3
75+
sm:skew-y-0 sm:-rotate-3 sm:rounded-3xl
76+
"
77+
></div>
78+
<div class="relative card p-6 bg-white">
79+
<DynamicForm
80+
:form="form"
81+
@submitted="handleSubmit"
82+
@change="valueChanged"
83+
@error="handleError"
84+
/>
85+
<button
86+
data-cy="submit"
87+
class="btn bg-green-500 text-white hover:bg-green-700 mt-4"
88+
submit="true"
89+
:form="form?.id"
90+
>
91+
Try me
92+
</button>
93+
</div>
94+
</div>
95+
<div class="mx-auto w-full sm:w-1/2"><Console :content="formValues" /></div>
96+
</div>
97+
</template>
98+
10599
<style lang="scss">
106100
@import '/@/styles/themes/default.scss';
107101
</style>

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

Lines changed: 41 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,10 @@
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="
6-
absolute
7-
inset-0
8-
bg-gradient-to-r
9-
from-blue-400
10-
to-green-200
11-
shadow-xl
12-
transform
13-
-skew-y-3
14-
sm:skew-y-0 sm:-rotate-3 sm:rounded-3xl
15-
"
16-
></div>
17-
<div class="relative card p-6 bg-white">
18-
<dynamic-form
19-
:form="form"
20-
@submitted="handleSubmit"
21-
@change="valueChanged"
22-
@error="handleError"
23-
/>
24-
<button
25-
data-cy="submit"
26-
class="btn bg-green-500 text-white hover:bg-green-700 mt-4"
27-
submit="true"
28-
:form="form?.id"
29-
>
30-
Sign In
31-
</button>
32-
</div>
33-
</div>
34-
<div class="mx-auto w-full sm:w-1/2"><Console :content="formValues" /></div>
35-
</div>
36-
</template>
37-
381
<script lang="ts">
392
import { CheckboxField, Validator, required } from '/@/';
403
import { computed, defineComponent, reactive } from 'vue';
41-
import Console from '../components/Console.vue';
424
43-
const components = {
44-
Console,
45-
};
465
/* } from '../../dist/as-dynamic-forms.esm'; */
476
export default defineComponent({
487
name: 'CheckboxFieldsDemo',
49-
components,
508
setup() {
519
const formValues = reactive({});
5210
@@ -102,4 +60,44 @@ export default defineComponent({
10260
},
10361
});
10462
</script>
105-
<style lang="scss"></style>
63+
64+
<template>
65+
<div class="page container">
66+
<div class="mx-auto w-full sm:w-1/2 relative mb-24">
67+
<div
68+
class="
69+
absolute
70+
inset-0
71+
bg-gradient-to-r
72+
from-blue-400
73+
to-green-200
74+
shadow-xl
75+
transform
76+
-skew-y-3
77+
sm:skew-y-0 sm:-rotate-3 sm:rounded-3xl
78+
"
79+
></div>
80+
<div class="relative card p-6 bg-white">
81+
<dynamic-form
82+
:form="form"
83+
@submitted="handleSubmit"
84+
@change="valueChanged"
85+
@error="handleError"
86+
/>
87+
<button
88+
data-cy="submit"
89+
class="btn bg-green-500 text-white hover:bg-green-700 mt-4"
90+
submit="true"
91+
:form="form?.id"
92+
>
93+
Sign In
94+
</button>
95+
</div>
96+
</div>
97+
<div class="mx-auto w-full sm:w-1/2"><Console :content="formValues" /></div>
98+
</div>
99+
</template>
100+
101+
<style lang="scss">
102+
@import '/@/styles/themes/default.scss';
103+
</style>

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ import {
7979
ValidatorTrigger,
8080
ValidationTriggerTypes,
8181
TextAreaField,
82-
} from '../../../../src';
82+
} from '/@/';
8383
/* } from '../../dist/as-dynamic-forms.esm'; */
8484
export default defineComponent({
8585
name: 'app',
@@ -292,6 +292,8 @@ export default defineComponent({
292292
});
293293
</script>
294294
<style lang="scss">
295+
@import '/@/styles/themes/default.scss';
296+
295297
.avocado-field {
296298
position: relative;
297299

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

Lines changed: 37 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,3 @@
1-
<template>
2-
<div class="home page container">
3-
<transition-group
4-
appear
5-
name="staggered-fade-in"
6-
tag="ul"
7-
v-show="demos.length > 0"
8-
class="flex flex-wrap"
9-
@before-enter="beforeEnter"
10-
@enter="enter"
11-
>
12-
<li class="p-4 w-full sm:w-1/2" v-for="demo in demos" :key="demo.name">
13-
<router-link
14-
:to="demo.route"
15-
class="p-4 block rounded-md border border-gray-200 hover:border-green-400 transition-colors"
16-
><p>{{ demo.name }}</p>
17-
<ul class="flex flex-wrap mt-4" v-if="demo.tags?.length > 0">
18-
<li v-for="tag in demo.tags" :key="tag">
19-
<span
20-
:class="['chip inline-block mb-2', `bg-${colorsMap[tag]}-100`]"
21-
>{{ tag }}</span
22-
>
23-
</li>
24-
</ul>
25-
</router-link>
26-
</li>
27-
</transition-group>
28-
</div>
29-
</template>
30-
311
<script lang="ts">
322
import { defineComponent, ref } from 'vue';
333
@@ -146,3 +116,40 @@ export default defineComponent({
146116
},
147117
});
148118
</script>
119+
120+
<template>
121+
<div class="home page container">
122+
<transition-group
123+
appear
124+
name="staggered-fade-in"
125+
tag="ul"
126+
v-show="demos.length > 0"
127+
class="flex flex-wrap"
128+
@before-enter="beforeEnter"
129+
@enter="enter"
130+
>
131+
<li class="p-4 w-full sm:w-1/2" v-for="demo in demos" :key="demo.name">
132+
<router-link
133+
:to="demo.route"
134+
class="
135+
p-4
136+
block
137+
rounded-md
138+
border border-gray-200
139+
hover:border-green-400
140+
transition-colors
141+
"
142+
><p>{{ demo.name }}</p>
143+
<ul class="flex flex-wrap mt-4" v-if="demo.tags?.length > 0">
144+
<li v-for="tag in demo.tags" :key="tag">
145+
<span
146+
:class="['chip inline-block mb-2', `bg-${colorsMap[tag]}-100`]"
147+
>{{ tag }}</span
148+
>
149+
</li>
150+
</ul>
151+
</router-link>
152+
</li>
153+
</transition-group>
154+
</div>
155+
</template>

0 commit comments

Comments
 (0)