Skip to content

Commit df7523c

Browse files
graphierosgraphieros
committed
VueUiSparkline add e2e component test
1 parent 584720f commit df7523c

File tree

4 files changed

+312
-6
lines changed

4 files changed

+312
-6
lines changed

‎cleanup.cjs

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ const currentDir = path.dirname(require.main.filename);
66
function deleteFolderRecursive(path) {
77
if (fs.existsSync(path) && fs.lstatSync(path).isDirectory()) {
88
fs.readdirSync(path).forEach(function (file, index) {
9-
var curPath = path + "/" + file;
9+
let curPath = path + "/" + file;
1010

1111
if (fs.lstatSync(curPath).isDirectory()) { // recurse
1212
deleteFolderRecursive(curPath);

‎cypress/fixtures/sparkline.json

+189
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,189 @@
1+
{
2+
"dataset": [
3+
{
4+
"period": "period1",
5+
"value": 0
6+
},
7+
{
8+
"period": "period2",
9+
"value": -1
10+
},
11+
{
12+
"period": "period3",
13+
"value": 2
14+
},
15+
{
16+
"period": "period4",
17+
"value": 3
18+
},
19+
{
20+
"period": "period5",
21+
"value": -4
22+
},
23+
{
24+
"period": "period6",
25+
"value": 5
26+
},
27+
{
28+
"period": "period6",
29+
"value": -6
30+
},
31+
{
32+
"period": "period8",
33+
"value": 7
34+
},
35+
{
36+
"period": "period9",
37+
"value": -8
38+
},
39+
{
40+
"period": "period10",
41+
"value": 9
42+
},
43+
{
44+
"period": "period11",
45+
"value": -10
46+
},
47+
{
48+
"period": "period12",
49+
"value": 11
50+
},
51+
{
52+
"period": "period13",
53+
"value": -12
54+
},
55+
{
56+
"period": "period14",
57+
"value": 13
58+
},
59+
{
60+
"period": "period15",
61+
"value": -14
62+
},
63+
{
64+
"period": "period16",
65+
"value": 15
66+
},
67+
{
68+
"period": "period17",
69+
"value": -16
70+
}
71+
],
72+
"datasetPositive": [
73+
{
74+
"period": "period1",
75+
"value": 6
76+
},
77+
{
78+
"period": "period2",
79+
"value": 5
80+
},
81+
{
82+
"period": "period3",
83+
"value": 4
84+
},
85+
{
86+
"period": "period4",
87+
"value": 3
88+
},
89+
{
90+
"period": "period5",
91+
"value": 4
92+
},
93+
{
94+
"period": "period6",
95+
"value": 5
96+
},
97+
{
98+
"period": "period6",
99+
"value": 6
100+
},
101+
{
102+
"period": "period8",
103+
"value": 7
104+
},
105+
{
106+
"period": "period9",
107+
"value": 8
108+
},
109+
{
110+
"period": "period10",
111+
"value": 7
112+
},
113+
{
114+
"period": "period11",
115+
"value": 6
116+
},
117+
{
118+
"period": "period12",
119+
"value": 5
120+
},
121+
{
122+
"period": "period13",
123+
"value": 4
124+
},
125+
{
126+
"period": "period14",
127+
"value": 3
128+
},
129+
{
130+
"period": "period15",
131+
"value": 4
132+
},
133+
{
134+
"period": "period16",
135+
"value": 5
136+
},
137+
{
138+
"period": "period17",
139+
"value": 6
140+
}
141+
],
142+
"config": {
143+
"style": {
144+
"backgroundColor":"#FFFFFF",
145+
"fontFamily": "inherit",
146+
"line": {
147+
"color":"#3366cc",
148+
"strokeWidth": 3,
149+
"smooth": false
150+
},
151+
"zeroLine": {
152+
"color": "#2D353C",
153+
"strokeWidth": 1
154+
},
155+
"plot": {
156+
"show": true,
157+
"radius": 4,
158+
"stroke": "#FFFFFF",
159+
"strokeWidth": 1
160+
},
161+
"verticalIndicator": {
162+
"show": true,
163+
"strokeWidth": 1.5
164+
},
165+
"dataLabel": {
166+
"position": "left",
167+
"fontSize": 20,
168+
"bold": true,
169+
"color": "#2D353C",
170+
"roundingValue": 0,
171+
"valueType": "latest"
172+
},
173+
"title": {
174+
"show": true,
175+
"textAlign": "left",
176+
"color": "#2D353C",
177+
"fontSize": 16,
178+
"bold": true,
179+
"text": "Title"
180+
},
181+
"area": {
182+
"show": true,
183+
"useGradient" : true,
184+
"opacity": 30,
185+
"color":"#3366cc"
186+
}
187+
}
188+
}
189+
}

‎src/components/vue-ui-sparkline.cy.js

+109
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
import VueUiSparkline from './vue-ui-sparkline.vue'
2+
3+
describe('<VueUiSparkline />', () => {
4+
5+
beforeEach(function () {
6+
cy.fixture('sparkline.json').as('fixture');
7+
cy.viewport(1200, 280);
8+
});
9+
10+
function updateConfigInFixture(modifiedConfig) {
11+
cy.get('@fixture').then((fixture) => {
12+
const updatedFixture = { ...fixture, config: modifiedConfig };
13+
cy.wrap(updatedFixture).as('fixture');
14+
});
15+
}
16+
17+
it('renders with different config attributes', function () {
18+
cy.get('@fixture').then((fixture) => {
19+
cy.mount(VueUiSparkline, {
20+
props: {
21+
dataset: fixture.dataset,
22+
config: fixture.config
23+
}
24+
});
25+
26+
cy.get('[data-cy="sparkline-svg"]').should('exist');
27+
cy.get('[data-cy="sparkline-angle-area"]').should('exist');
28+
cy.get('[data-cy="sparkline-smooth-area"]').should('not.exist');
29+
30+
for(let i = 0; i < 16; i += 1) {
31+
cy.get(`[data-cy="sparkline-segment-${i}"]`).should('exist');
32+
}
33+
34+
let modifiedConfig = {
35+
...fixture.config,
36+
style: {
37+
...fixture.config.style,
38+
line: {
39+
...fixture.config.style.line,
40+
smooth: true
41+
}
42+
}
43+
44+
}
45+
46+
updateConfigInFixture(modifiedConfig);
47+
48+
cy.mount(VueUiSparkline, {
49+
props: {
50+
dataset: fixture.dataset,
51+
config: modifiedConfig
52+
}
53+
});
54+
55+
cy.get('[data-cy="sparkline-angle-area"]').should('not.exist');
56+
cy.get('[data-cy="sparkline-smooth-area"]').should('exist');
57+
cy.get('[data-cy="sparkline-smooth-path"]').should('exist');
58+
cy.get('[data-cy="sparkline-zero-axis"]').should('exist');
59+
60+
cy.mount(VueUiSparkline, {
61+
props: {
62+
dataset: fixture.datasetPositive,
63+
config: modifiedConfig
64+
}
65+
});
66+
67+
cy.get('[data-cy="sparkline-zero-axis"]').should('not.exist');
68+
69+
cy.mount(VueUiSparkline, {
70+
props: {
71+
dataset: fixture.dataset,
72+
config: modifiedConfig
73+
}
74+
});
75+
76+
for (let i = 0; i < 17; i += 1) {
77+
cy.get(`[data-cy="sparkline-mouse-trap-${i}"]`)
78+
.should('exist')
79+
.trigger("mouseenter")
80+
81+
cy.get('[data-cy="sparkline-datalabel"]')
82+
.should('exist')
83+
.contains(`${fixture.dataset[i].value}`);
84+
85+
cy.get('[data-cy="sparkline-period-label"]')
86+
.should('exist')
87+
.contains(`${fixture.dataset[i].period}`);
88+
89+
cy.get(`[data-cy="sparkline-vertical-indicator-${i}"]`)
90+
.should('exist');
91+
92+
cy.get(`[data-cy="sparkline-plot-${i}"]`)
93+
.should('exist');
94+
95+
cy.get(`[data-cy="sparkline-mouse-trap-${i}"]`)
96+
.trigger("mouseleave");
97+
98+
cy.get('[data-cy="sparkline-period-label"]')
99+
.should('exist')
100+
.contains('Title');
101+
}
102+
103+
cy.get('[data-cy="sparkline-period-label"]')
104+
.should('exist')
105+
.contains('Title');
106+
107+
});
108+
});
109+
});

‎src/components/vue-ui-sparkline.vue

+13-5
Original file line numberDiff line numberDiff line change
@@ -135,12 +135,12 @@ const dataLabel = computed(() => {
135135
<div class="vue-ui-sparkline" :id="uid" :style="`width:100%;font-family:${sparklineConfig.style.fontFamily}`">
136136
<!-- TITLE -->
137137
<div v-if="sparklineConfig.style.title.show" class="vue-ui-sparkline-title" :style="`display:flex;align-items:center;width:100%;color:${sparklineConfig.style.title.color};background:${sparklineConfig.style.backgroundColor};justify-content:${sparklineConfig.style.title.textAlign === 'left' ? 'flex-start' : sparklineConfig.style.title.textAlign === 'right' ? 'flex-end' : 'center'};height:${sparklineConfig.style.title.fontSize * 2}px;font-size:${sparklineConfig.style.title.fontSize}px;font-weight:${sparklineConfig.style.title.bold ? 'bold' : 'normal'};`">
138-
<span :style="`padding:${sparklineConfig.style.title.textAlign === 'left' ? '0 0 0 12px' : sparklineConfig.style.title.textAlign === 'right' ? '0 12px 0 0' : '0'}`">
138+
<span data-cy="sparkline-period-label" :style="`padding:${sparklineConfig.style.title.textAlign === 'left' ? '0 0 0 12px' : sparklineConfig.style.title.textAlign === 'right' ? '0 12px 0 0' : '0'}`">
139139
{{ selectedPlot ? selectedPlot.period : sparklineConfig.style.title.text }}
140140
</span>
141141
</div>
142142
<!-- CHART -->
143-
<svg :viewBox="`0 0 ${svg.width} ${svg.height}`" :style="`background:${sparklineConfig.style.backgroundColor};overflow:visible`">
143+
<svg data-cy="sparkline-svg" :viewBox="`0 0 ${svg.width} ${svg.height}`" :style="`background:${sparklineConfig.style.backgroundColor};overflow:visible`">
144144
<!-- DEFS -->
145145
<defs>
146146
<linearGradient
@@ -154,23 +154,26 @@ const dataLabel = computed(() => {
154154

155155
<!-- AREA -->
156156
<g v-if="sparklineConfig.style.area.show">
157-
<path
157+
<path
158+
data-cy="sparkline-smooth-area"
158159
v-if="sparklineConfig.style.line.smooth"
159160
:d="`M ${mutableDataset[0].x},${drawingArea.bottom} ${createSmoothPath(mutableDataset)} L ${mutableDataset.at(-1).x},${drawingArea.bottom} Z`"
160161
:fill="sparklineConfig.style.area.useGradient ? `url(#sparkline_gradient_${uid})` : `${sparklineConfig.style.area.color}${opacity[sparklineConfig.style.area.opacity]}`"
161162
/>
162163
<path
164+
data-cy="sparkline-angle-area"
163165
v-else
164166
:d="`M${area}Z`"
165167
:fill="sparklineConfig.style.area.useGradient ? `url(#sparkline_gradient_${uid})` : `${sparklineConfig.style.area.color}${opacity[sparklineConfig.style.area.opacity]}`"
166168
/>
167169
</g>
168170

169-
<path v-if="sparklineConfig.style.line.smooth" :d="`M ${createSmoothPath(mutableDataset)}`" :stroke="sparklineConfig.style.line.color" fill="none" :stroke-width="sparklineConfig.style.line.strokeWidth" stroke-linecap="round"/>
171+
<path data-cy="sparkline-smooth-path" v-if="sparklineConfig.style.line.smooth" :d="`M ${createSmoothPath(mutableDataset)}`" :stroke="sparklineConfig.style.line.color" fill="none" :stroke-width="sparklineConfig.style.line.strokeWidth" stroke-linecap="round"/>
170172

171173
<g v-for="(plot, i) in mutableDataset">
172174
<line
173175
v-if="i < mutableDataset.length - 1 && !sparklineConfig.style.line.smooth"
176+
:data-cy="`sparkline-segment-${i}`"
174177
:x1="plot.x"
175178
:x2="mutableDataset[i + 1].x"
176179
:y1="plot.y"
@@ -183,6 +186,7 @@ const dataLabel = computed(() => {
183186
/>
184187
<!-- VERTICAL INDICATORS -->
185188
<line
189+
:data-cy="`sparkline-vertical-indicator-${i}`"
186190
v-if="sparklineConfig.style.verticalIndicator.show && selectedPlot && plot.id === selectedPlot.id"
187191
:x1="plot.x"
188192
:x2="plot.x"
@@ -196,6 +200,7 @@ const dataLabel = computed(() => {
196200

197201
<!-- ZERO BASE -->
198202
<line
203+
data-cy="sparkline-zero-axis"
199204
v-if="min < 0"
200205
:x1="drawingArea.start"
201206
:x2="drawingArea.start + drawingArea.width - 16"
@@ -209,7 +214,8 @@ const dataLabel = computed(() => {
209214

210215
<!-- PLOTS -->
211216
<g v-if="sparklineConfig.style.plot.show" v-for="(plot, i) in mutableDataset">
212-
<circle
217+
<circle
218+
:data-cy="`sparkline-plot-${i}`"
213219
v-if="selectedPlot && plot.id === selectedPlot.id"
214220
:cx="plot.x"
215221
:cy="plot.y"
@@ -222,6 +228,7 @@ const dataLabel = computed(() => {
222228

223229
<!-- DATALABEL -->
224230
<text
231+
data-cy="sparkline-datalabel"
225232
:x="sparklineConfig.style.dataLabel.position === 'left' ? 12 : drawingArea.width + 12"
226233
:y="svg.height / 2 + sparklineConfig.style.dataLabel.fontSize / 2.5"
227234
:font-size="sparklineConfig.style.dataLabel.fontSize"
@@ -234,6 +241,7 @@ const dataLabel = computed(() => {
234241
<!-- MOUSE TRAP -->
235242
<rect
236243
v-for="(plot, i) in mutableDataset"
244+
:data-cy="`sparkline-mouse-trap-${i}`"
237245
:x="plot.x - (drawingArea.width / len / 2)"
238246
:y="drawingArea.top - 6"
239247
:height="drawingArea.height + 6"

0 commit comments

Comments
 (0)