Skip to content

Commit 0d9a972

Browse files
graphierosgraphieros
committed
Tests - Improve VueUiQuickChart component test
1 parent e74aed9 commit 0d9a972

File tree

1 file changed

+266
-0
lines changed

1 file changed

+266
-0
lines changed

‎src/components/vue-ui-quick-chart.cy.js‎

Lines changed: 266 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,47 @@ describe('VueUiQuickChart', () => {
5858
});
5959
});
6060

61+
it('emits from a bar chart from an array of numbers', () => {
62+
const periods = ['A', 'B', 'C', 'D', 'E'];
63+
64+
cy.mount(VueUiQuickChart, {
65+
props: {
66+
dataset,
67+
config: {
68+
...config,
69+
xyPeriods: periods
70+
}
71+
}
72+
}).then(({ wrapper }) => {
73+
cy.log('@selectDatapoint');
74+
cy.get('[data-cy="tooltip-trap-bar"]').first().click({ force: true }).then(() => {
75+
expect(wrapper.emitted('selectDatapoint')).to.exist;
76+
expect(wrapper.emitted('selectDatapoint')[0][0][0]).to.have.keys(
77+
'absoluteIndices',
78+
'color',
79+
'coordinates',
80+
'id',
81+
'name',
82+
'value',
83+
'values'
84+
)
85+
});
86+
87+
cy.log('@selectLegend');
88+
cy.get('.vue-ui-quick-chart-legend-item').first().click({ force: true }).then(() => {
89+
expect(wrapper.emitted('selectLegend')).to.exist;
90+
expect(wrapper.emitted('selectLegend')[0][0]).to.have.keys(
91+
'absoluteIndices',
92+
'color',
93+
'coordinates',
94+
'id',
95+
'name',
96+
'values'
97+
);
98+
});
99+
});
100+
});
101+
61102
it('renders a line chart from an array of numbers', () => {
62103
const ds = [1, 2, 3, 5, 8, 13, 21, 34, 55, 89];
63104
const periods = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'];
@@ -110,6 +151,52 @@ describe('VueUiQuickChart', () => {
110151
});
111152
});
112153

154+
it('emits from a line chart from an array of numbers', () => {
155+
const ds = [1, 2, 3, 5, 8, 13, 21, 34, 55, 89];
156+
const periods = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'];
157+
158+
cy.mount(VueUiQuickChart,
159+
{
160+
props: {
161+
dataset: ds,
162+
config: {
163+
...config,
164+
xyPeriods: periods
165+
}
166+
}
167+
}
168+
).then(({ wrapper }) => {
169+
cy.log('@selectDatapoint');
170+
cy.get('[data-cy="tooltip-trap-line"]').first().click({ force: true }).then(() => {
171+
expect(wrapper.emitted('selectDatapoint')).to.exist;
172+
expect(wrapper.emitted('selectDatapoint')[0][0][0]).to.have.keys(
173+
'absoluteIndices',
174+
'color',
175+
'coordinates',
176+
'id',
177+
'linePath',
178+
'name',
179+
'value',
180+
'values'
181+
)
182+
});
183+
184+
cy.log('@selectLegend');
185+
cy.get('.vue-ui-quick-chart-legend-item').first().click({ force: true }).then(() => {
186+
expect(wrapper.emitted('selectLegend')).to.exist;
187+
expect(wrapper.emitted('selectLegend')[0][0]).to.have.keys(
188+
'absoluteIndices',
189+
'color',
190+
'coordinates',
191+
'id',
192+
'linePath',
193+
'name',
194+
'values'
195+
);
196+
});
197+
});
198+
});
199+
113200
it('renders a bar chart with an array of objects', () => {
114201
const periods = ['A', 'B', 'C'];
115202
const ds = [
@@ -167,6 +254,61 @@ describe('VueUiQuickChart', () => {
167254
});
168255
});
169256

257+
it('emits from a bar chart from an array of objects', () => {
258+
const periods = ['A', 'B', 'C'];
259+
const ds = [
260+
{
261+
name: 'S1',
262+
values: [1, 2, 3]
263+
},
264+
{
265+
name: 'S2',
266+
values: [2, 3, 4]
267+
}
268+
];
269+
270+
cy.mount(VueUiQuickChart, {
271+
props: {
272+
dataset: ds,
273+
config: {
274+
...config,
275+
xyPeriods: periods
276+
}
277+
}
278+
}).then(({ wrapper }) => {
279+
cy.log('@selectDatapoint');
280+
cy.get('[data-cy="tooltip-trap-bar"]').first().click({ force: true }).then(() => {
281+
expect(wrapper.emitted('selectDatapoint')).to.exist;
282+
expect(wrapper.emitted('selectDatapoint')[0][0][0]).to.have.keys(
283+
'NAME',
284+
'VALUES',
285+
'absoluteIndices',
286+
'color',
287+
'coordinates',
288+
'id',
289+
'name',
290+
'value',
291+
'values'
292+
)
293+
});
294+
295+
cy.log('@selectLegend');
296+
cy.get('.vue-ui-quick-chart-legend-item').first().click({ force: true }).then(() => {
297+
expect(wrapper.emitted('selectLegend')).to.exist;
298+
expect(wrapper.emitted('selectLegend')[0][0]).to.have.keys(
299+
'NAME',
300+
'VALUES',
301+
'absoluteIndices',
302+
'color',
303+
'coordinates',
304+
'id',
305+
'name',
306+
'values'
307+
);
308+
});
309+
});
310+
});
311+
170312
it('renders a line chart with an array of objects', () => {
171313
const periods = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'];
172314
const ds = [
@@ -226,6 +368,63 @@ describe('VueUiQuickChart', () => {
226368
});
227369
});
228370

371+
it('emits from a line chart from an array of objects', () => {
372+
const periods = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'];
373+
const ds = [
374+
{
375+
name: 'S1',
376+
values: [1, 2, 3, 5, 8, 13, 21, 34, 55, 88]
377+
},
378+
{
379+
name: 'S2',
380+
values: [2, 3, 5, 8, 13, 21, 34, 55, 88, 133]
381+
}
382+
];
383+
384+
cy.mount(VueUiQuickChart, {
385+
props: {
386+
dataset: ds,
387+
config: {
388+
...config,
389+
xyPeriods: periods
390+
}
391+
}
392+
}).then(({ wrapper }) => {
393+
cy.log('@selectDatapoint');
394+
cy.get('[data-cy="tooltip-trap-line"]').first().click({ force: true }).then(() => {
395+
expect(wrapper.emitted('selectDatapoint')).to.exist;
396+
expect(wrapper.emitted('selectDatapoint')[0][0][0]).to.have.keys(
397+
'NAME',
398+
'VALUES',
399+
'absoluteIndices',
400+
'color',
401+
'coordinates',
402+
'id',
403+
'linePath',
404+
'name',
405+
'value',
406+
'values'
407+
)
408+
});
409+
410+
cy.log('@selectLegend');
411+
cy.get('.vue-ui-quick-chart-legend-item').first().click({ force: true }).then(() => {
412+
expect(wrapper.emitted('selectLegend')).to.exist;
413+
expect(wrapper.emitted('selectLegend')[0][0]).to.have.keys(
414+
'NAME',
415+
'VALUES',
416+
'absoluteIndices',
417+
'color',
418+
'coordinates',
419+
'id',
420+
'linePath',
421+
'name',
422+
'values'
423+
);
424+
});
425+
});
426+
});
427+
229428
it('renders a donut from an array of objects', () => {
230429
const ds = [
231430
{
@@ -277,4 +476,71 @@ describe('VueUiQuickChart', () => {
277476
cy.get('[data-cy="donut-hollow-total-value"]').should('exist').and('be.visible').contains(ds.map(d => d.value).reduce((a, b) => a + b, 0));
278477
});
279478
});
479+
480+
it('emits from a donut chart from an array of objects', () => {
481+
const ds = [
482+
{
483+
name: 'S1',
484+
value: 1
485+
},
486+
{
487+
name: 'S2',
488+
value: 2,
489+
},
490+
{
491+
name: 'S3',
492+
value: 3
493+
}
494+
];
495+
496+
cy.mount(VueUiQuickChart, {
497+
props: {
498+
dataset: ds,
499+
config
500+
}
501+
}).then(({ wrapper }) => {
502+
cy.log('@selectDatapoint');
503+
cy.get('[data-cy="tooltip-trap-donut"]').first().click({ force: true }).then(() => {
504+
expect(wrapper.emitted('selectDatapoint')).to.exist;
505+
expect(wrapper.emitted('selectDatapoint')[0][0]).to.have.keys(
506+
'NAME',
507+
'VALUE',
508+
'arcSlice',
509+
'center',
510+
'color',
511+
'cx',
512+
'cy',
513+
'endX',
514+
'endY',
515+
'firstSeparator',
516+
'id',
517+
'immutableValue',
518+
'name',
519+
'path',
520+
'proportion',
521+
'ratio',
522+
'separator',
523+
'startX',
524+
'startY',
525+
'value'
526+
)
527+
});
528+
529+
cy.log('@selectLegend');
530+
cy.get('.vue-ui-quick-chart-legend-item').first().click({ force: true }).then(() => {
531+
expect(wrapper.emitted('selectLegend')).to.exist;
532+
expect(wrapper.emitted('selectLegend')[0][0]).to.have.keys(
533+
'NAME',
534+
'VALUE',
535+
'absoluteValue',
536+
'color',
537+
'id',
538+
'immutableValue',
539+
'name',
540+
'proportion',
541+
'value'
542+
);
543+
});
544+
});
545+
});
280546
});

0 commit comments

Comments
 (0)