Skip to content

Commit b504f1f

Browse files
graphierosgraphieros
committed
VueUiWaffle add e2e component test
1 parent c84fa36 commit b504f1f

File tree

6 files changed

+308
-23
lines changed

6 files changed

+308
-23
lines changed

‎cypress/downloads/Title.pdf‎

333 KB
Binary file not shown.

‎cypress/downloads/Title.xlsx‎

16.1 KB
Binary file not shown.

‎cypress/fixtures/waffle.json‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
{
2+
"dataset": [
3+
{
4+
"name": "serie 1",
5+
"color": "#3366cc",
6+
"values": [
7+
1
8+
]
9+
},
10+
{
11+
"name": "serie 2",
12+
"color": "#dc3912",
13+
"values": [
14+
2
15+
]
16+
},
17+
{
18+
"name": "serie 3",
19+
"color": "#ff9900",
20+
"values": [
21+
3
22+
]
23+
},
24+
{
25+
"name": "serie 4",
26+
"color": "#109618",
27+
"values": [
28+
3,
29+
5
30+
]
31+
}
32+
],
33+
"config": {
34+
"style": {
35+
"fontFamily": "inherit",
36+
"chart": {
37+
"backgroundColor": "#FFFFFF",
38+
"color": "#2D353C",
39+
"layout": {
40+
"grid": {
41+
"size": 5,
42+
"spaceBetween": 2,
43+
"vertical": false
44+
},
45+
"rect": {
46+
"rounded": true,
47+
"rounding": 2,
48+
"stroke": "#2D353C",
49+
"strokeWidth": 1,
50+
"useGradient": true,
51+
"gradientIntensity": 40
52+
},
53+
"useDiv": true
54+
},
55+
"title": {
56+
"text": "Title",
57+
"color": "#2D353C",
58+
"fontSize": 20,
59+
"bold": true,
60+
"subtitle": {
61+
"color": "#A1A1A1",
62+
"text": "Subtitle",
63+
"fontSize": 16,
64+
"bold": false
65+
}
66+
},
67+
"tooltip": {
68+
"show": true,
69+
"backgroundColor": "#FFFFFF",
70+
"color": "#2D353C",
71+
"fontSize": 14,
72+
"showValue": true,
73+
"showPercentage": true,
74+
"roundingValue": 0,
75+
"roundingPercentage": 0
76+
},
77+
"legend": {
78+
"show": true,
79+
"bold": true,
80+
"backgroundColor": "#FFFFFF",
81+
"color": "#2D353C",
82+
"fontSize": 14,
83+
"roundingValue": 0,
84+
"roundingPercentage": 0
85+
}
86+
}
87+
},
88+
"userOptions": {
89+
"show": true,
90+
"title": "options",
91+
"labels": {
92+
"useDiv": "Title & legend inside",
93+
"showTable": "Show table"
94+
}
95+
},
96+
"table": {
97+
"show": false,
98+
"th": {
99+
"backgroundColor": "#FAFAFA",
100+
"color": "#2D353C",
101+
"outline": "1px solid #e1e5e8"
102+
},
103+
"td": {
104+
"backgroundColor": "#FFFFFF",
105+
"color": "#2D353C",
106+
"outline": "1px solid #e1e5e8",
107+
"roundingValue": 0,
108+
"roundingPercentage": 0
109+
}
110+
}
111+
}
112+
}

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

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -301,14 +301,11 @@ describe('<VueUiDonut />', () => {
301301

302302
cy.get(`[data-cy="donut-pdf"]`).click();
303303
cy.wait(5000);
304-
cy.readFile('cypress\\Downloads\\Title.pdf');
305-
304+
cy.readFile(`cypress\\Downloads\\${fixture.config.style.chart.title.text}.pdf`);
306305
cy.get(`[data-cy="donut-xls"]`).click();
307306
cy.wait(3000);
308-
cy.readFile('cypress\\Downloads\\Title.xlsx');
309-
307+
cy.readFile(`cypress\\Downloads\\${fixture.config.style.chart.title.text}.xlsx`);
310308
cy.clearDownloads();
311-
312309
});
313310
});
314311
})

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

Lines changed: 171 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,171 @@
1+
import VueUiWaffle from './vue-ui-waffle.vue'
2+
3+
4+
describe('<VueUiWaffle />', () => {
5+
beforeEach(function () {
6+
cy.fixture('waffle.json').as('fixture');
7+
cy.viewport(800, 950);
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(VueUiWaffle, {
20+
props: {
21+
dataset: fixture.dataset,
22+
config: fixture.config
23+
}
24+
});
25+
26+
cy.get(`[data-cy="waffle-svg"]`)
27+
.should('exist');
28+
29+
const sortedDataset = JSON.parse(JSON.stringify(fixture.dataset)).sort((a, b) => {
30+
const sumx = a.values.reduce((x, y) => x + y, 0);
31+
const sumy = b.values.reduce((x, y) => x + y, 0);
32+
return sumy - sumx
33+
});
34+
35+
const grandTotal = fixture.dataset.map((d) => d.values.reduce((a, b) => a + b, 0)).reduce((a, b) => a + b, 0);
36+
37+
cy.get(`[data-cy="waffle-title"]`)
38+
.should('exist')
39+
.contains(fixture.config.style.chart.title.text);
40+
41+
cy.get(`[data-cy="waffle-subtitle"]`)
42+
.should('exist')
43+
.contains(fixture.config.style.chart.title.subtitle.text);
44+
45+
for (let i = 0; i < fixture.dataset.length; i += 1) {
46+
const expectedValue = sortedDataset[i].values.reduce((a, b) => a + b, 0);
47+
const expectedPercentage = (expectedValue / grandTotal * 100).toFixed(fixture.config.style.chart.legend.roundingPercentage);
48+
49+
cy.get(`[data-cy="waffle-legend-item-${i}"]`)
50+
.should('exist')
51+
.contains(`${sortedDataset[i].name} : ${expectedValue}(${expectedPercentage}%)`)
52+
}
53+
54+
for (let i = 0; i < Math.pow(fixture.config.style.chart.layout.grid.size, 2); i += 1) {
55+
cy.get(`[data-cy="waffle-rect-underlayer-${i}"]`)
56+
.should('exist');
57+
cy.get(`[data-cy="waffle-rect-${i}"]`)
58+
.should('exist');
59+
}
60+
61+
cy.get(`[data-cy="waffle-rect-0"]`)
62+
.trigger('mouseover');
63+
64+
cy.get(`[data-cy="waffle-tooltip"]`).then(($tooltip) => {
65+
66+
const expectedValue = sortedDataset[0].values.reduce((a, b) => a + b, 0);
67+
const expectedPercentage = (expectedValue / grandTotal * 100).toFixed(fixture.config.style.chart.legend.roundingPercentage);
68+
69+
cy.wrap($tooltip)
70+
.should('exist')
71+
72+
cy.get(`[data-cy="waffle-tooltip-name"]`)
73+
.should('exist')
74+
.contains(sortedDataset[0].name)
75+
76+
cy.get(`[data-cy="waffle-tooltip-marker"]`).then(($marker) => {
77+
cy.wrap($marker)
78+
.should('exist')
79+
.invoke('attr', 'fill')
80+
.should('eq', sortedDataset[0].color)
81+
});
82+
83+
cy.get(`[data-cy="waffle-tooltip-value"]`)
84+
.should('exist')
85+
.contains(expectedValue)
86+
87+
cy.get(`[data-cy="waffle-tooltip-percentage"]`)
88+
.should('exist')
89+
.contains(`(${expectedPercentage}%)`)
90+
});
91+
92+
cy.get(`[data-cy="waffle-rect-0"]`)
93+
.trigger('mouseleave');
94+
95+
cy.get(`[data-cy="waffle-summary"]`)
96+
.click();
97+
98+
cy.get(`[data-cy="waffle-checkbox-title"]`).then(($checkbox) => {
99+
cy.wrap($checkbox)
100+
.check();
101+
102+
cy.get(`[data-cy="waffle-text-title"]`)
103+
.should('exist')
104+
.contains(fixture.config.style.chart.title.text);
105+
106+
cy.get(`[data-cy="waffle-text-subtitle"]`)
107+
.should('exist')
108+
.contains(fixture.config.style.chart.title.subtitle.text);
109+
110+
for (let i = 0; i < fixture.dataset.length; i += 1) {
111+
const expectedValue = sortedDataset[i].values.reduce((a, b) => a + b, 0);
112+
const expectedPercentage = (expectedValue / grandTotal * 100).toFixed(fixture.config.style.chart.legend.roundingPercentage);
113+
114+
cy.get(`[data-cy="waffle-foreginObject-legend-item-${i}"]`)
115+
.should('exist')
116+
.contains(`${sortedDataset[i].name} : ${expectedValue}(${expectedPercentage}%)`)
117+
}
118+
119+
cy.wrap($checkbox)
120+
.uncheck()
121+
});
122+
123+
cy.get(`[data-cy="waffle-checkbox-table"]`).then(($checkbox) => {
124+
cy.wrap($checkbox)
125+
.check();
126+
127+
cy.viewport(800, 1100);
128+
129+
cy.get(`[data-cy="waffle-table-title"]`)
130+
.should('exist')
131+
.contains(`${fixture.config.style.chart.title.text} : ${fixture.config.style.chart.title.subtitle.text}`);
132+
133+
for (let i = 0; i < fixture.dataset.length; i += 1) {
134+
const expectedValue = sortedDataset[i].values.reduce((a, b) => a + b, 0);
135+
const expectedPercentage = `${(expectedValue / grandTotal * 100).toFixed(fixture.config.style.chart.legend.roundingPercentage)}%`;
136+
137+
cy.get(`[data-cy="waffle-table-tr-${i}"]`).then(($tr) => {
138+
cy.wrap($tr)
139+
.should('exist');
140+
141+
cy.wrap($tr)
142+
.find('td')
143+
.should('have.length', 3)
144+
.each(($td, index) => {
145+
if (index === 0) {
146+
cy.wrap($td)
147+
.should('contain.text', `◼${sortedDataset[i].name}`)
148+
}
149+
if (index === 1) {
150+
cy.wrap($td)
151+
.should('contain.text', expectedValue)
152+
}
153+
if (index === 2) {
154+
cy.wrap($td)
155+
.should('contain.text', expectedPercentage)
156+
}
157+
});
158+
});
159+
}
160+
})
161+
162+
cy.get(`[data-cy="waffle-pdf"]`).click();
163+
cy.wait(5000);
164+
cy.readFile(`cypress\\Downloads\\${fixture.config.style.chart.title.text}.pdf`);
165+
cy.get(`[data-cy="waffle-xls"]`).click();
166+
cy.wait(3000);
167+
cy.readFile(`cypress\\Downloads\\${fixture.config.style.chart.title.text}.xlsx`);
168+
cy.clearDownloads();
169+
});
170+
});
171+
})

0 commit comments

Comments
 (0)