Skip to content

Commit d1db723

Browse files
graphierosgraphieros
committed
VueUiOnion add e2e component test
1 parent 429ee25 commit d1db723

File tree

3 files changed

+275
-13
lines changed

3 files changed

+275
-13
lines changed

‎cypress/fixtures/onion.json‎

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
{
2+
"dataset": [
3+
{
4+
"name": "Serie 1",
5+
"percentage": 90,
6+
"value": 1200,
7+
"prefix": "v.",
8+
"suffix": "€",
9+
"color": "#3366cc"
10+
},
11+
{
12+
"name": "Serie 2",
13+
"percentage": 50,
14+
"value": 1000,
15+
"prefix": "v.",
16+
"suffix": "€",
17+
"color": "#dc3912"
18+
},
19+
{
20+
"name": "Serie 3",
21+
"percentage": 75,
22+
"value": 500,
23+
"prefix": "v.",
24+
"suffix": "€",
25+
"color": "#ff9900"
26+
},
27+
{
28+
"name": "Serie 4",
29+
"percentage": 10,
30+
"value": 200,
31+
"prefix": "v.",
32+
"suffix": "€",
33+
"color": "#109618"
34+
}
35+
],
36+
"config": {
37+
"useCssAnimation": true,
38+
"style": {
39+
"fontFamily": "inherit",
40+
"chart": {
41+
"backgroundColor": "#FFFFFF",
42+
"color": "#2D353C",
43+
"useGradient": false,
44+
"gradientIntensity": 20,
45+
"layout": {
46+
"useDiv": true,
47+
"gutter": {
48+
"color": "#e1e5e8",
49+
"width": 0.62
50+
},
51+
"track": {
52+
"width": 0.62
53+
},
54+
"labels": {
55+
"show": true,
56+
"fontSize": 14,
57+
"color": "#2D353C",
58+
"roundingValue": 0,
59+
"roundingPercentage": 0,
60+
"bold": true,
61+
"offsetY": 0,
62+
"offsetX": 0,
63+
"value": {
64+
"show": true
65+
},
66+
"percentage": {
67+
"show": true
68+
}
69+
}
70+
},
71+
"title": {
72+
"text": "Title",
73+
"color": "#2D353C",
74+
"fontSize": 20,
75+
"bold": true,
76+
"subtitle": {
77+
"color": "#A1A1A1",
78+
"text": "Subtitle",
79+
"fontSize": 16,
80+
"bold": false
81+
}
82+
},
83+
"legend": {
84+
"show": true,
85+
"bold": true,
86+
"backgroundColor": "#FFFFFF",
87+
"color": "#2D353C",
88+
"fontSize": 14,
89+
"roundingValue": 0,
90+
"roundingPercentage": 0
91+
}
92+
}
93+
},
94+
"userOptions": {
95+
"show": true,
96+
"title": "options",
97+
"labels": {
98+
"useDiv": "Title & legend inside",
99+
"showTable": "Show table"
100+
}
101+
},
102+
"table": {
103+
"show": false,
104+
"th": {
105+
"backgroundColor": "#FAFAFA",
106+
"color": "#2D353C",
107+
"outline": "1px solid #e1e5e8"
108+
},
109+
"td": {
110+
"backgroundColor": "#FFFFFF",
111+
"color": "#2D353C",
112+
"outline": "1px solid #e1e5e8",
113+
"roundingValue": 0,
114+
"roundingPercentage": 0
115+
},
116+
"translations": {
117+
"serie": "Serie",
118+
"percentage": "Percentage",
119+
"value": "Value"
120+
}
121+
}
122+
}
123+
}

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

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
import VueUiOnion from './vue-ui-onion.vue'
2+
3+
describe('<VueUiOnion />', () => {
4+
beforeEach(function () {
5+
cy.fixture('onion.json').as('fixture');
6+
cy.viewport(400, 550);
7+
});
8+
9+
function updateConfigInFixture(modifiedConfig) {
10+
cy.get('@fixture').then((fixture) => {
11+
const updatedFixture = { ...fixture, config: modifiedConfig };
12+
cy.wrap(updatedFixture).as('fixture');
13+
});
14+
}
15+
16+
it('renders with different config attributes', function () {
17+
cy.get('@fixture').then((fixture) => {
18+
cy.mount(VueUiOnion, {
19+
props: {
20+
dataset: fixture.dataset,
21+
config: fixture.config
22+
}
23+
});
24+
25+
cy.get(`[data-cy="onion-div-title"]`)
26+
.should('exist')
27+
.contains(fixture.config.style.chart.title.text);
28+
29+
cy.get(`[data-cy="onion-div-subtitle"]`)
30+
.should('exist')
31+
.contains(fixture.config.style.chart.title.subtitle.text);
32+
33+
for (let i = 0; i < fixture.dataset.length; i += 1) {
34+
cy.get(`[data-cy="onion-div-legend-item-${i}"]`).then(($legend) => {
35+
cy.wrap($legend)
36+
.should('exist')
37+
.find('circle')
38+
.invoke('attr', 'fill')
39+
.should('eq', fixture.dataset[i].color)
40+
cy.wrap($legend)
41+
.contains(`${fixture.dataset[i].name} : ${fixture.dataset[i].percentage}%`)
42+
})
43+
}
44+
45+
46+
cy.get(`[data-cy="onion-summary"]`).click();
47+
cy.get(`[data-cy="onion-checkbox-title"]`)
48+
.check();
49+
cy.get(`[data-cy="onion-summary"]`).click();
50+
51+
cy.get(`[data-cy="onion-text-title"]`)
52+
.should('exist')
53+
.contains(fixture.config.style.chart.title.text);
54+
55+
cy.get(`[data-cy="onion-text-subtitle"]`)
56+
.should('exist')
57+
.contains(fixture.config.style.chart.title.subtitle.text);
58+
59+
for (let i = 0; i < fixture.dataset.length; i += 1) {
60+
cy.get(`[data-cy="onion-foreignObject-legend-item-${i}"]`).then(($legend) => {
61+
cy.wrap($legend)
62+
.should('exist')
63+
.find('circle')
64+
.invoke('attr', 'fill')
65+
.should('eq', fixture.dataset[i].color);
66+
cy.wrap($legend)
67+
.contains(`${fixture.dataset[i].name} : ${fixture.dataset[i].percentage}%`)
68+
69+
})
70+
}
71+
72+
cy.get(`[data-cy="onion-summary"]`).click();
73+
cy.get(`[data-cy="onion-checkbox-title"]`)
74+
.uncheck();
75+
cy.get(`[data-cy="onion-checkbox-table"]`).check();
76+
cy.viewport(400, 680);
77+
78+
cy.get(`[data-cy="onion-summary"]`).click();
79+
80+
cy.get(`[data-cy="onion-table-title"]`)
81+
.should('exist')
82+
.contains(`${fixture.config.style.chart.title.text} : ${fixture.config.style.chart.title.subtitle.text}`)
83+
84+
for (let i = 0; i < Object.keys(fixture.config.table.translations).length; i += 1) {
85+
cy.get(`[data-cy="onion-table-head-col-title-${i}"]`)
86+
.should('exist')
87+
.contains(Object.values(fixture.config.table.translations)[i]);
88+
}
89+
90+
for (let i = 0; i < fixture.dataset.length; i += 1) {
91+
cy.get(`[data-cy="onion-table-tr-${i}"]`).then(($tr) => {
92+
cy.wrap($tr)
93+
.should('exist')
94+
.find('td')
95+
.should('have.length', Object.keys(fixture.config.table.translations).length)
96+
.each(($td, index) => {
97+
if (index === 0) {
98+
cy.wrap($td)
99+
.contains(`⬤ ${fixture.dataset[i].name}`)
100+
}
101+
if (index === 1) {
102+
const expectedPercentage = fixture.dataset[i].percentage.toFixed(fixture.config.table.td.roundingPercentage);
103+
104+
console.log({expectedPercentage})
105+
106+
cy.wrap($td)
107+
.should('contain.text', `${expectedPercentage}%`)
108+
}
109+
if (index === 2) {
110+
cy.wrap($td)
111+
.contains(`${fixture.dataset[i].prefix}${fixture.dataset[i].value.toFixed(fixture.config.table.td.roundingValue)}${fixture.dataset[i].suffix}`)
112+
}
113+
})
114+
})
115+
}
116+
117+
cy.get(`[data-cy="onion-div-legend-item-0"]`).click();
118+
cy.get('.vue-ui-onion-path')
119+
.should('have.length', (fixture.dataset.length - 1) * 2)
120+
cy.get(`[data-cy="onion-div-legend-item-0"]`).click();
121+
cy.get('.vue-ui-onion-path')
122+
.should('have.length', fixture.dataset.length * 2)
123+
124+
125+
cy.get(`[data-cy="onion-summary"]`).click();
126+
127+
cy.get(`[data-cy="onion-pdf"]`).click();
128+
cy.wait(3000);
129+
cy.readFile(`cypress\\Downloads\\${fixture.config.style.chart.title.text}.pdf`);
130+
cy.get(`[data-cy="onion-xls"]`).click();
131+
cy.wait(3000);
132+
cy.readFile(`cypress\\Downloads\\${fixture.config.style.chart.title.text}.xlsx`);
133+
cy.clearDownloads();
134+
});
135+
});
136+
})

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

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -198,29 +198,29 @@ defineExpose({
198198
>
199199
<!-- TITLE AS DIV -->
200200
<div v-if="(!mutableConfig.inside || isPrinting) && onionConfig.style.chart.title.text" :style="`width:100%;background:${onionConfig.style.chart.backgroundColor}`">
201-
<div :style="`width:100%;text-align:center;color:${onionConfig.style.chart.title.color};font-size:${onionConfig.style.chart.title.fontSize}px;font-weight:${onionConfig.style.chart.title.bold ? 'bold': ''}`">
201+
<div data-cy="onion-div-title" :style="`width:100%;text-align:center;color:${onionConfig.style.chart.title.color};font-size:${onionConfig.style.chart.title.fontSize}px;font-weight:${onionConfig.style.chart.title.bold ? 'bold': ''}`">
202202
{{ onionConfig.style.chart.title.text }}
203203
</div>
204-
<div v-if="onionConfig.style.chart.title.subtitle.text" :style="`width:100%;text-align:center;color:${onionConfig.style.chart.title.subtitle.color};font-size:${onionConfig.style.chart.title.subtitle.fontSize}px;font-weight:${onionConfig.style.chart.title.subtitle.bold ? 'bold': ''}`">
204+
<div data-cy="onion-div-subtitle" v-if="onionConfig.style.chart.title.subtitle.text" :style="`width:100%;text-align:center;color:${onionConfig.style.chart.title.subtitle.color};font-size:${onionConfig.style.chart.title.subtitle.fontSize}px;font-weight:${onionConfig.style.chart.title.subtitle.bold ? 'bold': ''}`">
205205
{{ onionConfig.style.chart.title.subtitle.text }}
206206
</div>
207207
</div>
208208

209209
<!-- OPTIONS -->
210210
<details class="vue-ui-onion-user-options" :style="`background:${onionConfig.style.chart.backgroundColor};color:${onionConfig.style.chart.color}`" data-html2canvas-ignore v-if="onionConfig.userOptions.show" ref="details">
211-
<summary :style="`background:${onionConfig.style.chart.backgroundColor};color:${onionConfig.style.chart.color}`">{{ onionConfig.userOptions.title }}</summary>
211+
<summary data-cy="onion-summary" :style="`background:${onionConfig.style.chart.backgroundColor};color:${onionConfig.style.chart.color}`">{{ onionConfig.userOptions.title }}</summary>
212212
<div class="vue-ui-onion-user-options-items" :style="`background:${onionConfig.style.chart.backgroundColor};color:${onionConfig.style.chart.color}`">
213213
<div class="vue-ui-onion-user-option-item">
214-
<input type="checkbox" :id="`vue-ui-onion-option-title_${uid}`" :name="`vue-ui-onion-option-title_${uid}`"
214+
<input data-cy="onion-checkbox-title" type="checkbox" :id="`vue-ui-onion-option-title_${uid}`" :name="`vue-ui-onion-option-title_${uid}`"
215215
v-model="mutableConfig.inside">
216216
<label :for="`vue-ui-onion-option-title_${uid}`">{{ onionConfig.userOptions.labels.useDiv }}</label>
217217
</div>
218218
<div class="vue-ui-onion-user-option-item">
219-
<input type="checkbox" :id="`vue-ui-onion-option-table_${uid}`" :name="`vue-ui-onion-option-table_${uid}`"
219+
<input data-cy="onion-checkbox-table" type="checkbox" :id="`vue-ui-onion-option-table_${uid}`" :name="`vue-ui-onion-option-table_${uid}`"
220220
v-model="mutableConfig.showTable">
221221
<label :for="`vue-ui-onion-option-table_${uid}`">{{ onionConfig.userOptions.labels.showTable }}</label>
222222
</div>
223-
<button class="vue-ui-onion-button" @click="generatePdf" :disabled="isPrinting" style="margin-top:12px" :style="`background:${onionConfig.style.chart.backgroundColor};color:${onionConfig.style.chart.color}`">
223+
<button data-cy="onion-pdf" class="vue-ui-onion-button" @click="generatePdf" :disabled="isPrinting" style="margin-top:12px" :style="`background:${onionConfig.style.chart.backgroundColor};color:${onionConfig.style.chart.color}`">
224224
<svg class="vue-ui-onion-print-icon" xmlns="http://www.w3.org/2000/svg" v-if="isPrinting" width="20" height="20" viewBox="0 0 24 24" stroke-width="1.5" :stroke="onionConfig.style.chart.color" fill="none" stroke-linecap="round" stroke-linejoin="round">
225225
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
226226
<path d="M18 16v.01" />
@@ -231,7 +231,7 @@ defineExpose({
231231
</svg>
232232
<span v-else>PDF</span>
233233
</button>
234-
<button class="vue-ui-onion-button" @click="generateXls" :style="`background:${onionConfig.style.chart.backgroundColor};color:${onionConfig.style.chart.color}`">
234+
<button data-cy="onion-xls" class="vue-ui-onion-button" @click="generateXls" :style="`background:${onionConfig.style.chart.backgroundColor};color:${onionConfig.style.chart.color}`">
235235
XLSX
236236
</button>
237237
</div>
@@ -251,6 +251,7 @@ defineExpose({
251251
<!-- TITLE AS G -->
252252
<g v-if="onionConfig.style.chart.title.text && mutableConfig.inside && !isPrinting">
253253
<text
254+
data-cy="onion-text-title"
254255
:font-size="onionConfig.style.chart.title.fontSize"
255256
:fill="onionConfig.style.chart.title.color"
256257
:x="svg.width / 2"
@@ -261,6 +262,7 @@ defineExpose({
261262
{{ onionConfig.style.chart.title.text }}
262263
</text>
263264
<text
265+
data-cy="onion-text-subtitle"
264266
v-if="onionConfig.style.chart.title.subtitle.text"
265267
:font-size="onionConfig.style.chart.title.subtitle.fontSize"
266268
:fill="onionConfig.style.chart.title.subtitle.color"
@@ -276,6 +278,7 @@ defineExpose({
276278
<!-- GUTTERS -->
277279
<circle
278280
v-for="onion in mutableDataset"
281+
:data-cy="`onion-track-${i}`"
279282
:cx="drawableArea.centerX"
280283
:cy="drawableArea.centerY"
281284
:r="onion.radius"
@@ -345,7 +348,7 @@ defineExpose({
345348
style="overflow:visible"
346349
>
347350
<div class="vue-ui-onion-legend" :style="`color:${onionConfig.style.chart.legend.color};font-size:${onionConfig.style.chart.legend.fontSize}px;padding-bottom:12px;font-weight:${onionConfig.style.chart.legend.bold ? 'bold' : ''}`" @click="closeDetails">
348-
<div v-for="(legendItem, i) in immutableDataset" class="vue-ui-onion-legend-item" @click="segregate(legendItem.id)" :style="`opacity:${segregated.includes(legendItem.id) ? 0.5 : 1}`">
351+
<div v-for="(legendItem, i) in immutableDataset" :data-cy="`onion-foreignObject-legend-item-${i}`" class="vue-ui-onion-legend-item" @click="segregate(legendItem.id)" :style="`opacity:${segregated.includes(legendItem.id) ? 0.5 : 1}`">
349352
<svg viewBox="0 0 12 12" height="14" width="14"><circle cx="6" cy="6" r="6" stroke="none" :fill="legendItem.color"/></svg>
350353
<span>{{ legendItem.name }} : </span>
351354
<span>{{ legendItem.percentage.toFixed(onionConfig.style.chart.legend.roundingPercentage) }}% </span>
@@ -357,7 +360,7 @@ defineExpose({
357360

358361
<!-- LEGEND AS DIV -->
359362
<div v-if="onionConfig.style.chart.legend.show && (!mutableConfig.inside || isPrinting)" class="vue-ui-onion-legend" :style="`background:${onionConfig.style.chart.legend.backgroundColor};color:${onionConfig.style.chart.legend.color};font-size:${onionConfig.style.chart.legend.fontSize}px;padding-bottom:12px;font-weight:${onionConfig.style.chart.legend.bold ? 'bold' : ''}`" @click="closeDetails">
360-
<div v-for="(legendItem, i) in immutableDataset" class="vue-ui-onion-legend-item" @click="segregate(legendItem.id)" :style="`opacity:${segregated.includes(legendItem.id) ? 0.5 : 1}`">
363+
<div v-for="(legendItem, i) in immutableDataset" :data-cy="`onion-div-legend-item-${i}`" class="vue-ui-onion-legend-item" @click="segregate(legendItem.id)" :style="`opacity:${segregated.includes(legendItem.id) ? 0.5 : 1}`">
361364
<svg viewBox="0 0 12 12" height="14" width="14"><circle cx="6" cy="6" r="6" stroke="none" :fill="legendItem.color"/></svg>
362365
<span>{{ legendItem.name }} : </span>
363366
<span>{{ legendItem.percentage.toFixed(onionConfig.style.chart.legend.roundingPercentage) }}% </span>
@@ -368,23 +371,23 @@ defineExpose({
368371
<!-- DATA TABLE -->
369372
<div @click="closeDetails" class="vue-ui-onion-table" :style="`width:100%;margin-top:${mutableConfig.inside ? '48px' : ''}`" v-if="mutableConfig.showTable">
370373
<table>
371-
<thead>
374+
<thead >
372375
<tr v-if="onionConfig.style.chart.title.text">
373-
<th colspan="3" :style="`background:${onionConfig.table.th.backgroundColor};color:${onionConfig.table.th.color};outline:${onionConfig.table.th.outline}`">
376+
<th data-cy="onion-table-title" colspan="3" :style="`background:${onionConfig.table.th.backgroundColor};color:${onionConfig.table.th.color};outline:${onionConfig.table.th.outline}`">
374377
<span>{{ onionConfig.style.chart.title.text }}</span>
375378
<span v-if="onionConfig.style.chart.title.subtitle.text">
376379
: {{ onionConfig.style.chart.title.subtitle.text }}
377380
</span>
378381
</th>
379382
</tr>
380383
<tr>
381-
<th v-for="th in table.head" :colspan="th.color ? 2 : 1" :style="`background:${onionConfig.table.th.backgroundColor};color:${onionConfig.table.th.color};outline:${onionConfig.table.th.outline}`">
384+
<th v-for="(th, i) in table.head" :data-cy="`onion-table-head-col-title-${i}`" :colspan="th.color ? 2 : 1" :style="`background:${onionConfig.table.th.backgroundColor};color:${onionConfig.table.th.color};outline:${onionConfig.table.th.outline}`">
382385
{{ th }}
383386
</th>
384387
</tr>
385388
</thead>
386389
<tbody>
387-
<tr v-for="onion in mutableDataset">
390+
<tr v-for="(onion, i) in mutableDataset" :data-cy="`onion-table-tr-${i}`">
388391
<td :style="`background:${onionConfig.table.td.backgroundColor};color:${onionConfig.table.td.color};outline:${onionConfig.table.td.outline}`">
389392
<span :style="`color:${onion.color}`">
390393
⬤

0 commit comments

Comments
 (0)