Skip to content

Commit 6c64934

Browse files
graphierosgraphieros
committed
VueUiXy add component e2e cypress test
1 parent 41755ea commit 6c64934

File tree

10 files changed

+2483
-61
lines changed

10 files changed

+2483
-61
lines changed

‎cypress.config.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { defineConfig } from "cypress";
2+
3+
export default defineConfig({
4+
component: {
5+
devServer: {
6+
framework: "vue",
7+
bundler: "vite",
8+
},
9+
},
10+
});

‎cypress/fixtures/example.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"name": "Using fixtures to represent data",
3+
"email": "[email protected]",
4+
"body": "Fixtures are a great way to mock data for responses to routes"
5+
}

‎cypress/fixtures/xy.json

Lines changed: 284 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,284 @@
1+
{
2+
"dataset": [
3+
{
4+
"name": "Series 1",
5+
"series": [
6+
-55,
7+
-34,
8+
-21,
9+
-13,
10+
-8,
11+
-5,
12+
-3,
13+
-2,
14+
-1,
15+
-1,
16+
0,
17+
1,
18+
1,
19+
2,
20+
3,
21+
5,
22+
8,
23+
13,
24+
21,
25+
34,
26+
55
27+
],
28+
"type": "bar",
29+
"dataLabels": true
30+
},
31+
{
32+
"name": "Series 2",
33+
"series": [
34+
55,
35+
34,
36+
21,
37+
13,
38+
8,
39+
5,
40+
3,
41+
2,
42+
1,
43+
1,
44+
0,
45+
-1,
46+
-1,
47+
-2,
48+
-3,
49+
-5,
50+
-18,
51+
-13,
52+
-21,
53+
-34,
54+
-55
55+
],
56+
"type": "bar",
57+
"dataLabels": false,
58+
"useProgression": true
59+
},
60+
{
61+
"name": "Series 3",
62+
"series": [
63+
-55,
64+
34,
65+
-21,
66+
13,
67+
-8,
68+
5,
69+
-3,
70+
2,
71+
-1,
72+
1,
73+
0,
74+
1,
75+
1,
76+
2,
77+
3,
78+
5,
79+
8,
80+
13,
81+
21,
82+
34,
83+
55
84+
],
85+
"useArea": true,
86+
"smooth": true,
87+
"type": "line",
88+
"dashed": false,
89+
"dataLabels": true,
90+
"useProgression": true,
91+
"useTag": "end"
92+
},
93+
{
94+
"name": "Series 4",
95+
"series": [
96+
0,
97+
1,
98+
2,
99+
3,
100+
5,
101+
8,
102+
13,
103+
21,
104+
34,
105+
55
106+
],
107+
"type": "plot",
108+
"dashed": true,
109+
"useTag":"start",
110+
"dataLabels": true,
111+
"useProgression": true
112+
},
113+
{
114+
"name": "Target",
115+
"series": [
116+
30,
117+
30,
118+
30,
119+
30,
120+
30,
121+
30,
122+
30,
123+
30,
124+
30,
125+
30,
126+
30,
127+
30,
128+
30,
129+
30,
130+
30,
131+
30,
132+
30,
133+
30,
134+
30,
135+
30,
136+
30
137+
],
138+
"useArea": false,
139+
"type": "line",
140+
"dashed": true,
141+
"color": "rgb(100,100,100)",
142+
"dataLabels": true,
143+
"useTag": "end"
144+
}
145+
],
146+
"config": {
147+
"useCanvas": false,
148+
"useCssAnimation": true,
149+
"chart": {
150+
"fontFamily" : "inherit",
151+
"backgroundColor" : "#FFFFFF",
152+
"color": "#2D353C",
153+
"height": 600,
154+
"width": 1000,
155+
"zoom": {
156+
"show": true,
157+
"color": "#2D353C"
158+
},
159+
"padding": {
160+
"top": 36,
161+
"right": 24,
162+
"bottom": 48,
163+
"left": 48
164+
},
165+
"highlighter": {
166+
"color": "#2D353C",
167+
"opacity": 5
168+
},
169+
"grid": {
170+
"stroke": "#e1e5e8",
171+
"showVerticalLines": false,
172+
"labels": {
173+
"color": "#2D353C",
174+
"show": true,
175+
"fontSize": 10,
176+
"axis": {
177+
"yLabel": "yLabel",
178+
"xLabel": "xLabel",
179+
"fontSize": 12
180+
},
181+
"xAxisLabels": {
182+
"color": "#2D353C",
183+
"show": true,
184+
"values": ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20"],
185+
"fontSize": 12,
186+
"showOnlyFirstAndLast": false
187+
}
188+
}
189+
},
190+
"labels": {
191+
"fontSize": 10
192+
},
193+
"legend": {
194+
"color": "#2D353C",
195+
"show": true,
196+
"useDiv": true,
197+
"fontSize": 16
198+
},
199+
"title": {
200+
"show": true,
201+
"useDiv": true,
202+
"color": "#2D353C",
203+
"text": "Title",
204+
"fontSize": 20,
205+
"bold": true,
206+
"offsetX": 0,
207+
"offsetY": 0,
208+
"subtitle": {
209+
"fontSize": 16,
210+
"color": "grey",
211+
"text": "Subtitle"
212+
}
213+
},
214+
"tooltip": {
215+
"color": "#2D353C",
216+
"backgroundColor": "#FFFFFF",
217+
"show": true,
218+
"showValue": true,
219+
"showPercentage": false,
220+
"roundingValue": 0,
221+
"roundingPercentage": 0
222+
},
223+
"userOptions": {
224+
"show": true,
225+
"title": "options",
226+
"labels": {
227+
"dataLabels": "Show datalabels",
228+
"titleInside": "Title inside",
229+
"legendInside": "Legend inside",
230+
"showTable": "Show table"
231+
}
232+
}
233+
},
234+
"bar": {
235+
"borderRadius": 2,
236+
"useGradient": true,
237+
"labels": {
238+
"show": true,
239+
"offsetY": -6,
240+
"rounding": 0,
241+
"color": "#2D353C"
242+
}
243+
},
244+
"line": {
245+
"radius": 3,
246+
"useGradient": true,
247+
"strokeWidth": 2,
248+
"labels": {
249+
"show": true,
250+
"offsetY": -6,
251+
"rounding": 0,
252+
"color": "#2D353C"
253+
},
254+
"area": {
255+
"useGradient": true,
256+
"opacity": 30
257+
}
258+
},
259+
"plot": {
260+
"radius": 3,
261+
"useGradient": true,
262+
"labels": {
263+
"show": true,
264+
"offsetY": -6,
265+
"rounding": 0,
266+
"color": "#2D353C"
267+
}
268+
},
269+
"table": {
270+
"rounding": 0,
271+
"th": {
272+
"backgroundColor": "#FAFAFA",
273+
"color": "#2D353C",
274+
"outline": "1px solid #e1e5e8"
275+
},
276+
"td": {
277+
"backgroundColor": "#FFFFFF",
278+
"color": "#2D353C",
279+
"outline": "1px solid #e1e5e8"
280+
}
281+
},
282+
"showTable": false
283+
}
284+
}

‎cypress/support/commands.js

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
// ***********************************************
2+
// This example commands.js shows you how to
3+
// create various custom commands and overwrite
4+
// existing commands.
5+
//
6+
// For more comprehensive examples of custom
7+
// commands please read more here:
8+
// https://on.cypress.io/custom-commands
9+
// ***********************************************
10+
//
11+
//
12+
// -- This is a parent command --
13+
// Cypress.Commands.add('login', (email, password) => { ... })
14+
//
15+
//
16+
// -- This is a child command --
17+
// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
18+
//
19+
//
20+
// -- This is a dual command --
21+
// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
22+
//
23+
//
24+
// -- This will overwrite an existing command --
25+
// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })

‎cypress/support/component-index.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width,initial-scale=1.0">
7+
<title>Components App</title>
8+
</head>
9+
<body>
10+
<div data-cy-root></div>
11+
</body>
12+
</html>

‎cypress/support/component.js

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
// ***********************************************************
2+
// This example support/component.js is processed and
3+
// loaded automatically before your test files.
4+
//
5+
// This is a great place to put global configuration and
6+
// behavior that modifies Cypress.
7+
//
8+
// You can change the location of this file or turn off
9+
// automatically serving support files with the
10+
// 'supportFile' configuration option.
11+
//
12+
// You can read more here:
13+
// https://on.cypress.io/configuration
14+
// ***********************************************************
15+
16+
// Import commands.js using ES2015 syntax:
17+
import './commands'
18+
19+
// Alternatively you can use CommonJS syntax:
20+
// require('./commands')
21+
22+
import { mount } from 'cypress/vue'
23+
24+
Cypress.Commands.add('mount', mount)
25+
26+
// Example use:
27+
// cy.mount(MyComponent)

0 commit comments

Comments
 (0)