Skip to content

Commit 7d4ab6a

Browse files
graphierosgraphieros
committed
VueUiVerticalBar add e2e component test
1 parent 9cb541a commit 7d4ab6a

File tree

3 files changed

+353
-12
lines changed

3 files changed

+353
-12
lines changed

‎cypress/fixtures/vertical-bar.json‎

Lines changed: 188 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,188 @@
1+
{
2+
"dataset": [
3+
{
4+
"name": "Serie 1",
5+
"value": 100,
6+
"color": "#FF0000",
7+
"children": [
8+
{
9+
"name": "serie 1 child 1",
10+
"value": 80
11+
},
12+
{
13+
"name": "serie 1 child 2",
14+
"value": 20
15+
}
16+
]
17+
},
18+
{
19+
"name": "Serie 2",
20+
"value": 345,
21+
"color": "#0FF000"
22+
},
23+
{
24+
"name": "Serie 3",
25+
"value": 210,
26+
"color": "#00FFA2"
27+
},
28+
{
29+
"name": "Serie 4",
30+
"value": 188,
31+
"color": "#500FF0"
32+
},
33+
{
34+
"name": "Serie 5",
35+
"value": 120,
36+
"color": "#0000FF",
37+
"children": [
38+
{
39+
"name": "Serie 5 child 1",
40+
"value": 60
41+
},
42+
{
43+
"name": "Serie 5 child 2",
44+
"value": 20
45+
},
46+
{
47+
"name": "Serie 5 child 3",
48+
"value": 40
49+
}
50+
]
51+
}
52+
],
53+
"config": {
54+
"useCssAnimation": true,
55+
"style": {
56+
"fontFamily": "inherit",
57+
"chart": {
58+
"backgroundColor": "#FFFFFF",
59+
"color": "#2D353C",
60+
"layout": {
61+
"useDiv": true,
62+
"bars": {
63+
"sort": "desc",
64+
"useStroke": false,
65+
"strokeWidth": 2,
66+
"height": 32,
67+
"gap": 6,
68+
"borderRadius": 4,
69+
"offsetX": 64,
70+
"paddingRight": 0,
71+
"useGradient": true,
72+
"gradientIntensity": 20,
73+
"fillOpacity": 90,
74+
"underlayerColor": "#FFFFFF",
75+
"dataLabels": {
76+
"color": "#2D353C",
77+
"bold": true,
78+
"fontSize": 12,
79+
"value": {
80+
"show": true,
81+
"roundingValue": 0,
82+
"prefix": "",
83+
"suffix": ""
84+
},
85+
"percentage": {
86+
"show": true,
87+
"roundingPercentage": 0
88+
},
89+
"offsetX": 0
90+
},
91+
"nameLabels": {
92+
"show": true,
93+
"color": "#2D353C",
94+
"bold": false,
95+
"fontSize": 10,
96+
"offsetX": 0
97+
},
98+
"parentLabels": {
99+
"show": true,
100+
"color": "#2D353C",
101+
"bold": false,
102+
"fontSize": 10,
103+
"offsetX": 0
104+
}
105+
},
106+
"highlighter": {
107+
"color": "#2D353C",
108+
"opacity": 5
109+
},
110+
"separators": {
111+
"show": true,
112+
"color": "#e1e5e8",
113+
"strokeWidth": 1
114+
}
115+
},
116+
"title": {
117+
"text": "Title",
118+
"color": "#2D353C",
119+
"fontSize": 20,
120+
"bold": true,
121+
"subtitle": {
122+
"color": "#A1A1A1",
123+
"text": "Subtitle",
124+
"fontSize": 16,
125+
"bold": false
126+
}
127+
},
128+
"legend": {
129+
"position": "top",
130+
"show": true,
131+
"fontSize": 14,
132+
"color": "#2D353C",
133+
"backgroundColor": "#FFFFFF",
134+
"bold": true,
135+
"roundingValue": 0,
136+
"roundingPercentage": 0,
137+
"prefix": "",
138+
"suffix": ""
139+
},
140+
"tooltip": {
141+
"show": true,
142+
"backgroundColor": "#FFFFFF",
143+
"color": "#2D353C",
144+
"fontSize": 14,
145+
"showValue": true,
146+
"showPercentage": true,
147+
"roundingValue": 0,
148+
"roundingPercentage": 0,
149+
"prefix": "",
150+
"suffix": ""
151+
}
152+
}
153+
},
154+
"userOptions": {
155+
"show": true,
156+
"title": "options",
157+
"labels": {
158+
"useDiv": "Title & legend inside",
159+
"showTable": "Show table",
160+
"sort": "Sort desc"
161+
}
162+
},
163+
"table": {
164+
"show": false,
165+
"th": {
166+
"backgroundColor": "#FAFAFA",
167+
"color": "#2D353C",
168+
"outline": "1px solid #e1e5e8"
169+
},
170+
"td": {
171+
"backgroundColor": "#FFFFFF",
172+
"color": "#2D353C",
173+
"outline": "1px solid #e1e5e8",
174+
"roundingValue": 0,
175+
"roundingPercentage": 0,
176+
"prefix": "",
177+
"suffix": ""
178+
}
179+
},
180+
"translations": {
181+
"parentName": "Serie",
182+
"childName": "Child",
183+
"value": "value",
184+
"percentageToTotal": "%/total",
185+
"percentageToSerie": "%/serie"
186+
}
187+
}
188+
}

‎src/components/vue-ui-vertical-bar.cy.js‎

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
import VueUiVerticalBar from './vue-ui-vertical-bar.vue'
2+
3+
describe('<VueUiVerticalBar />', () => {
4+
5+
beforeEach(function () {
6+
cy.fixture('vertical-bar.json').as('fixture');
7+
cy.viewport(1000, 800);
8+
});
9+
10+
it('renders', () => {
11+
cy.get('@fixture').then((fixture) => {
12+
cy.mount(VueUiVerticalBar, {
13+
props: {
14+
dataset: fixture.dataset,
15+
config: fixture.config
16+
}
17+
});
18+
19+
cy.get(`[data-cy="vertical-bar-div-title"]`)
20+
.should('exist')
21+
.contains(fixture.config.style.chart.title.text);
22+
23+
cy.get(`[data-cy="vertical-bar-div-subtitle"]`)
24+
.should('exist')
25+
.contains(fixture.config.style.chart.title.subtitle.text);
26+
27+
for (let i = 0; i < fixture.dataset.length; i += 1) {
28+
cy.get(`[data-cy="vertical-bar-div-legend-item-${i}"]`).then(($legend) => {
29+
cy.wrap($legend)
30+
.should('exist')
31+
.contains(`${fixture.dataset[i].name} : ${fixture.dataset[i].value}`)
32+
.click()
33+
})
34+
}
35+
36+
for (let i = 0; i < fixture.dataset.length; i += 1) {
37+
cy.get(`[data-cy="vertical-bar-div-legend-item-${i}"]`).then(($legend) => {
38+
cy.wrap($legend)
39+
.click()
40+
})
41+
}
42+
43+
cy.get(`[data-cy="vertical-bar-summary"]`).click();
44+
45+
cy.get(`[data-cy="vertical-bar-checkbox-title"]`).check();
46+
47+
cy.get(`[data-cy="vertical-bar-text-title"]`)
48+
.should('exist')
49+
.contains(fixture.config.style.chart.title.text);
50+
51+
cy.get(`[data-cy="vertical-bar-text-subtitle"]`)
52+
.should('exist')
53+
.contains(fixture.config.style.chart.title.subtitle.text);
54+
55+
for (let i = 0; i < fixture.dataset.length; i += 1) {
56+
cy.get(`[data-cy="vertical-bar-foreignObject-legend-item-${i}"]`).then(($legend) => {
57+
cy.wrap($legend)
58+
.should('exist')
59+
.contains(`${fixture.dataset[i].name} : ${fixture.dataset[i].value}`)
60+
.click()
61+
})
62+
}
63+
64+
for (let i = 0; i < fixture.dataset.length; i += 1) {
65+
cy.get(`[data-cy="vertical-bar-foreignObject-legend-item-${i}"]`).then(($legend) => {
66+
cy.wrap($legend)
67+
.click()
68+
})
69+
}
70+
71+
cy.get(`[data-cy="vertical-bar-checkbox-title"]`).uncheck({force: true});
72+
cy.get(`[data-cy="vertical-bar-checkbox-table"]`).check({ force: true});
73+
cy.viewport(1000, 1050);
74+
75+
const bars = fixture.dataset.map(d => {
76+
if(d.children) {
77+
return d.children.length;
78+
}
79+
return 1;
80+
}).reduce((a,b) => a +b, 0);
81+
82+
for (let i = 0; i < bars; i += 1) {
83+
cy.get(`[data-cy="vertical-bar-rect-underlayer-${i}"]`)
84+
.should('exist')
85+
.invoke('attr', 'fill')
86+
.should('eq', fixture.config.style.chart.layout.bars.underlayerColor);
87+
cy.get(`[data-cy="vertical-bar-datalabel-${i}"]`)
88+
.should('exist');
89+
}
90+
91+
cy.get(`[data-cy="vertical-bar-trap-0"]`)
92+
.trigger('mouseenter');
93+
94+
cy.get(`[data-cy="vertical-bar-tooltip"]`)
95+
.should('exist');
96+
97+
cy.get(`[data-cy="vertical-bar-trap-0"]`)
98+
.trigger('mouseleave');
99+
100+
cy.get(`[data-cy="vertical-bar-tooltip"]`)
101+
.should('not.exist');
102+
103+
cy.get(`[data-cy="vertical-bar-thead"]`)
104+
.should('exist')
105+
.contains(`${fixture.config.style.chart.title.text} : ${fixture.config.style.chart.title.subtitle.text}`);
106+
107+
cy.get(`[data-cy="vertical-bar-thead-tr"]`)
108+
.should('exist')
109+
.find('th')
110+
.should('have.length', 7)
111+
.each(($th, index) => {
112+
if(index === 0) {
113+
cy.wrap($th)
114+
.should('contain.text', fixture.config.translations.parentName)
115+
}
116+
if ([1,4].includes(index)) {
117+
cy.wrap($th)
118+
.should('contain.text', fixture.config.translations.value)
119+
}
120+
if ([2,6].includes(index)) {
121+
cy.wrap($th)
122+
.should('contain.text', fixture.config.translations.percentageToTotal)
123+
}
124+
if (index === 3) {
125+
cy.wrap($th)
126+
.should('contain.text', fixture.config.translations.childName)
127+
}
128+
if(index === 5) {
129+
cy.wrap($th)
130+
.should('contain.text', fixture.config.translations.percentageToSerie)
131+
}
132+
});
133+
134+
cy.get(`[data-cy="vertical-bar-summary"]`).click();
135+
136+
cy.get(`[data-cy="vertical-bar-pdf"]`).click();
137+
cy.wait(3000);
138+
cy.readFile(`cypress\\Downloads\\${fixture.config.style.chart.title.text}.pdf`);
139+
cy.get(`[data-cy="vertical-bar-xls"]`).click();
140+
cy.wait(3000);
141+
cy.readFile(`cypress\\Downloads\\${fixture.config.style.chart.title.text}.xlsx`);
142+
cy.clearDownloads();
143+
cy.get(`[data-cy="vertical-bar-summary"]`).click();
144+
145+
});
146+
});
147+
});

0 commit comments

Comments
 (0)