Skip to content

Commit 829113a

Browse files
graphierosgraphieros
committed
VueUiSparkHistogram add e2e component test
1 parent df7523c commit 829113a

File tree

3 files changed

+186
-7
lines changed

3 files changed

+186
-7
lines changed

‎cypress/fixtures/sparkhistogram.json‎

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
{
2+
"dataset": [
3+
{
4+
"value": 1.2,
5+
"valueLabel": "20%",
6+
"timeLabel": "09:00",
7+
"intensity": 0.2
8+
},
9+
{
10+
"value": 1.3,
11+
"valueLabel": "50%",
12+
"timeLabel": "10:00",
13+
"intensity": 0.5
14+
},
15+
{
16+
"value": 1.1,
17+
"valueLabel": "60%",
18+
"timeLabel": "11:00",
19+
"intensity": 0.6
20+
},
21+
{
22+
"value": 0.8,
23+
"valueLabel": "70%",
24+
"timeLabel": "12:00",
25+
"intensity": 0.7
26+
},
27+
{
28+
"value": 2,
29+
"valueLabel": "100%",
30+
"timeLabel": "13:00",
31+
"intensity": 1
32+
},
33+
{
34+
"value": 2.1,
35+
"valueLabel": "100%",
36+
"timeLabel": "14:00",
37+
"intensity": 1
38+
},
39+
{
40+
"value": 2.3,
41+
"valueLabel": "80%",
42+
"timeLabel": "15:00",
43+
"intensity": 0.8
44+
},
45+
{
46+
"value": 2.1,
47+
"valueLabel": "70%",
48+
"timeLabel": "16:00",
49+
"intensity": 0.7
50+
},
51+
{
52+
"value": 0.9,
53+
"valueLabel": "60%",
54+
"timeLabel": "17:00",
55+
"intensity": 0.6
56+
},
57+
{
58+
"value": 0.7,
59+
"valueLabel": "50%",
60+
"timeLabel": "18:00",
61+
"intensity": 0.5
62+
},
63+
{
64+
"value": 0.3,
65+
"valueLabel": "30%",
66+
"timeLabel": "19:00",
67+
"intensity": 0.3
68+
},
69+
{
70+
"value": 0.2,
71+
"valueLabel": "20%",
72+
"timeLabel": "20:00",
73+
"intensity": 0.2
74+
}
75+
],
76+
"config": {
77+
"style": {
78+
"backgroundColor": "#FFFFFF",
79+
"fontFamily": "inherit",
80+
"layout": {
81+
"height": 96,
82+
"width": 640,
83+
"padding": {
84+
"top": 24,
85+
"right": 0,
86+
"left": 0,
87+
"bottom": 36
88+
}
89+
},
90+
"bars": {
91+
"strokeWidth": 0,
92+
"colors": {
93+
"positive": "#3366cc",
94+
"negative": "#dc3912",
95+
"gradient": {
96+
"show": true
97+
}
98+
},
99+
"borderRadius": 24,
100+
"gap": 12
101+
},
102+
"labels": {
103+
"value": {
104+
"fontSize": 14,
105+
"color": "#2D353C",
106+
"bold": true,
107+
"rounding": 1,
108+
"prefix": "",
109+
"suffix": ""
110+
},
111+
"valueLabel": {
112+
"fontSize": 14,
113+
"color": "#2D353C",
114+
"bold": false,
115+
"rounding": 0
116+
},
117+
"timeLabel": {
118+
"fontSize": 12,
119+
"color": "#2D353C",
120+
"bold": false
121+
}
122+
},
123+
"title": {
124+
"textAlign": "left",
125+
"text": "",
126+
"color": "#2D353C",
127+
"fontSize": 16,
128+
"bold": true,
129+
"margin": "0 0 6px 0",
130+
"subtitle": {
131+
"color": "#A1A1A1",
132+
"text": "",
133+
"fontSize": 12,
134+
"bold": false
135+
}
136+
}
137+
}
138+
}
139+
}

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

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import VueUiSparkhistogram from './vue-ui-sparkhistogram.vue'
2+
3+
describe('<VueUiSparkhistogram />', () => {
4+
beforeEach(function () {
5+
cy.fixture('sparkhistogram.json').as('fixture');
6+
cy.viewport(1200, 220);
7+
});
8+
9+
it('renders with different config attributes', function () {
10+
cy.get('@fixture').then((fixture) => {
11+
cy.mount(VueUiSparkhistogram, {
12+
props: {
13+
dataset: fixture.dataset,
14+
config: fixture.config
15+
}
16+
});
17+
18+
cy.get('[data-cy="sparkhistogram-svg"]').should('exist');
19+
20+
for (let i = 0; i < 12; i += 1) {
21+
cy.get(`[data-cy="sparkhistogram-rect-${i}"]`).should('exist');
22+
23+
cy.get(`[data-cy="sparkhistogram-value-label-${i}"]`)
24+
.should('exist')
25+
.contains(`${fixture.config.style.labels.value.prefix}${Number(fixture.dataset[i].value.toFixed(fixture.config.style.labels.value.rounding)).toLocaleString()}${fixture.config.style.labels.value.suffix}`);
26+
27+
cy.get(`[data-cy="sparkhistogram-label-${i}"]`)
28+
.should('exist')
29+
.contains(fixture.dataset[i].valueLabel);
30+
31+
cy.get(`[data-cy="sparkhistogram-time-label-${i}"]`)
32+
.should('exist')
33+
.contains(fixture.dataset[i].timeLabel)
34+
}
35+
});
36+
});
37+
})

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

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -109,8 +109,7 @@ const computedDataset = computed(() => {
109109
</div>
110110
</div>
111111

112-
<svg :viewBox="`0 0 ${drawingArea.width} ${drawingArea.height}`">
113-
112+
<svg data-cy="sparkhistogram-svg" :viewBox="`0 0 ${drawingArea.width} ${drawingArea.height}`">
114113
<defs>
115114
<radialGradient v-for="(posGrad, i) in computedDataset" :id="`gradient_positive_${i}_${uid}`" cy="50%" cx="50%" r="50%" fx="50%" fy="50%">
116115
<stop offset="0%" :stop-color="`${shiftHue(histoConfig.style.bars.colors.positive, 0.05)}${opacity[posGrad.intensity]}`"/>
@@ -124,7 +123,8 @@ const computedDataset = computed(() => {
124123
</defs>
125124

126125

127-
<rect v-for="rect in computedDataset"
126+
<rect v-for="(rect, i) in computedDataset"
127+
:data-cy="`sparkhistogram-rect-${i}`"
128128
:x="rect.x"
129129
:y="rect.y"
130130
:height="rect.height"
@@ -135,7 +135,8 @@ const computedDataset = computed(() => {
135135
:rx="`${histoConfig.style.bars.borderRadius * rect.proportion / 12}%`"
136136
/>
137137

138-
<text v-for="val in computedDataset"
138+
<text v-for="(val, i) in computedDataset"
139+
:data-cy="`sparkhistogram-value-label-${i}`"
139140
text-anchor="middle"
140141
:x="val.textAnchor"
141142
:y="val.y - histoConfig.style.labels.value.fontSize / 3"
@@ -146,8 +147,9 @@ const computedDataset = computed(() => {
146147
{{ histoConfig.style.labels.value.prefix }}{{ isNaN(val.value) ? '' : Number(val.value.toFixed(histoConfig.style.labels.value.rounding)).toLocaleString() }}{{ histoConfig.style.labels.value.suffix }}
147148
</text>
148149

149-
<g v-for="label in computedDataset">
150+
<g v-for="(label, i) in computedDataset">
150151
<text
152+
:data-cy="`sparkhistogram-label-${i}`"
151153
v-if="label.valueLabel"
152154
:x="label.textAnchor"
153155
:y="label.y + label.height + histoConfig.style.labels.valueLabel.fontSize"
@@ -159,8 +161,9 @@ const computedDataset = computed(() => {
159161
</text>
160162
</g>
161163

162-
<g v-for="time in computedDataset">
163-
<text
164+
<g v-for="(time, i) in computedDataset">
165+
<text
166+
:data-cy="`sparkhistogram-time-label-${i}`"
164167
v-if="time.timeLabel"
165168
:x="time.textAnchor"
166169
:y="drawingArea.height - histoConfig.style.labels.timeLabel.fontSize / 2"

0 commit comments

Comments
 (0)