Skip to content

Commit dfb1208

Browse files
graphierosgraphieros
committed
Tests - Improve VueUiChestnut component test
1 parent a7a0b19 commit dfb1208

File tree

2 files changed

+144
-70
lines changed

2 files changed

+144
-70
lines changed

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

Lines changed: 143 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -5,80 +5,153 @@ import { testCommonFeatures } from '../../cypress/fixtures';
55
const { dataset, config } = components.find(c => c.name === 'VueUiChestnut');
66

77
const rootTotals = dataset.map((d) => {
8-
return d.branches.map((b) => b.value).reduce((a, b) => a + b, 0)
8+
return d.branches.map((b) => b.value).reduce((a, b) => a + b, 0)
99
}).sort((a, b) => b - a);
1010

1111
const branchesTotals = dataset.flatMap((d) => {
12-
return d.branches.map((b) => b.value)
12+
return d.branches.map((b) => b.value)
1313
}).sort((a, b) => b - a);
1414

1515
describe('<VueUiChestnut />', () => {
16-
beforeEach(function () {
17-
cy.viewport(1000, 750);
18-
});
19-
20-
it('renders', () => {
21-
cy.mount(VueUiChestnut, {
22-
props: {
23-
dataset,
24-
config
25-
},
26-
}).then(() => {
27-
28-
testCommonFeatures({
29-
userOptions: true,
30-
});
31-
32-
cy.get(`[data-cy="chestnut-title"]`)
33-
.should('exist')
34-
.contains(config.style.chart.layout.title.text);
35-
36-
cy.get(`[data-cy="chestnut-subtitle"]`)
37-
.should('exist')
38-
.contains(config.style.chart.layout.title.subtitle.text);
39-
40-
for (let i = 0; i < dataset.length; i += 1) {
41-
cy.get(`[data-cy="chestnut-root-${i}"]`)
42-
.should('exist')
43-
.wait(50)
44-
.click({ force: true })
45-
46-
cy.get(`[data-cy="chestnut-root-label-${i}"]`)
47-
.should('exist')
48-
.contains(rootTotals[i])
49-
}
50-
51-
for (let i = 0; i < branchesTotals.length; i += 1) {
52-
cy.get(`[data-cy="chestnut-branch-${i}"]`).then(($branch) => {
53-
cy.wrap($branch)
54-
.should('exist')
55-
.wait(50)
56-
.click({ force: true });
57-
58-
if (i === branchesTotals.length - 1) {
59-
cy.wrap($branch)
60-
.wait(50)
61-
.click({ force: true })
62-
}
63-
});
64-
65-
cy.get(`[data-cy="chestnut-nut-${i}"]`)
66-
.should('exist');
67-
68-
cy.get(`[data-cy="chestnut-trap-${i}"]`).then(($trap) => {
69-
cy.wrap($trap)
70-
.wait(50)
71-
.click({ force: true });
72-
73-
if(i === branchesTotals.length - 1) {
74-
cy.get(`[data-cy="chestnut-legend"]`).click({ force: true })
75-
}
76-
});
77-
78-
cy.get(`[data-cy="user-options-summary"]`).click();
79-
cy.get(`[data-cy="user-options-table"]`).click();
80-
cy.get(`[data-cy="chestnut-table"]`).should('exist').and('be.visible')
81-
}
82-
});
83-
});
16+
beforeEach(function () {
17+
cy.viewport(1000, 750);
18+
});
19+
20+
it('renders', () => {
21+
cy.mount(VueUiChestnut, {
22+
props: {
23+
dataset,
24+
config
25+
},
26+
}).then(() => {
27+
28+
testCommonFeatures({
29+
userOptions: true,
30+
});
31+
32+
cy.get(`[data-cy="chestnut-title"]`)
33+
.should('exist')
34+
.contains(config.style.chart.layout.title.text);
35+
36+
cy.get(`[data-cy="chestnut-subtitle"]`)
37+
.should('exist')
38+
.contains(config.style.chart.layout.title.subtitle.text);
39+
40+
for (let i = 0; i < dataset.length; i += 1) {
41+
cy.get(`[data-cy="chestnut-root-${i}"]`)
42+
.should('exist')
43+
.wait(50)
44+
.click({ force: true })
45+
46+
cy.get(`[data-cy="chestnut-root-label-${i}"]`)
47+
.should('exist')
48+
.contains(rootTotals[i])
49+
}
50+
51+
for (let i = 0; i < branchesTotals.length; i += 1) {
52+
cy.get(`[data-cy="chestnut-branch-${i}"]`).then(($branch) => {
53+
cy.wrap($branch)
54+
.should('exist')
55+
.wait(50)
56+
.click({ force: true });
57+
58+
if (i === branchesTotals.length - 1) {
59+
cy.wrap($branch)
60+
.wait(50)
61+
.click({ force: true })
62+
}
63+
});
64+
65+
cy.get(`[data-cy="chestnut-nut-${i}"]`)
66+
.should('exist');
67+
68+
cy.get(`[data-cy="chestnut-trap-${i}"]`).then(($trap) => {
69+
cy.wrap($trap)
70+
.wait(50)
71+
.click({ force: true });
72+
73+
if (i === branchesTotals.length - 1) {
74+
cy.get(`[data-cy="chestnut-legend"]`).click({ force: true })
75+
}
76+
});
77+
78+
cy.get(`[data-cy="user-options-summary"]`).click();
79+
cy.get(`[data-cy="user-options-table"]`).click();
80+
cy.get(`[data-cy="chestnut-table"]`).should('exist').and('be.visible')
81+
}
82+
});
83+
});
84+
85+
it('emits', () => {
86+
cy.mount(VueUiChestnut, {
87+
props: {
88+
dataset,
89+
config
90+
},
91+
}).then(({ wrapper }) => {
92+
cy.log('@selectRoot');
93+
cy.get('[data-cy="chestnut-root-0"]').click({ force: true }).then(() => {
94+
expect(wrapper.emitted('selectRoot')).to.exist;
95+
expect(wrapper.emitted('selectRoot')[0][0]).to.have.keys(
96+
'branches',
97+
'color',
98+
'id',
99+
'name',
100+
'r',
101+
'rootIndex',
102+
'total',
103+
'type',
104+
'x',
105+
'y'
106+
);
107+
expect(wrapper.emitted('selectRoot')[0][0].rootIndex).to.equal(0);
108+
expect(wrapper.emitted('selectRoot')[0][0].type).to.equal('root');
109+
});
110+
111+
cy.log('@selectBranch');
112+
cy.get('[data-cy="chestnut-branch"]').first().click({ force: true }).then(() => {
113+
expect(wrapper.emitted('selectBranch')).to.exist;
114+
expect(wrapper.emitted('selectBranch')[0][0]).to.have.keys(
115+
'breakdown',
116+
'color',
117+
'id',
118+
'name',
119+
'proportionToRoot',
120+
'rootIndex',
121+
'rootName',
122+
'type',
123+
'value',
124+
'x1',
125+
'x2',
126+
'y1',
127+
'y2'
128+
);
129+
expect(wrapper.emitted('selectBranch')[0][0].rootIndex).to.equal(0);
130+
expect(wrapper.emitted('selectBranch')[0][0].type).to.equal('branch');
131+
});
132+
133+
cy.log('@selectNut');
134+
cy.get('[data-cy="chestnut-trap-0"]').click({ force: true }).then(() => {
135+
expect(wrapper.emitted('selectNut')).to.exist;
136+
expect(wrapper.emitted('selectNut')[0][0]).to.have.length(3)
137+
expect(wrapper.emitted('selectNut')[0][0][0]).to.have.keys(
138+
'branchName',
139+
'branchTotal',
140+
'color',
141+
'id',
142+
'name',
143+
'proportionToBranch',
144+
'proportionToRoot',
145+
'proportionToTree',
146+
'rootIndex',
147+
'rootName',
148+
'table',
149+
'type',
150+
'value'
151+
);
152+
expect(wrapper.emitted('selectNut')[0][0][0].type).to.equal('nut');
153+
expect(wrapper.emitted('selectNut')[0][0][0].rootIndex).to.equal(0);
154+
});
155+
});
156+
});
84157
});

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -814,6 +814,7 @@ defineExpose({
814814

815815
<!-- BRANCHES -->
816816
<rect
817+
data-cy="chestnut-branch"
817818
v-for="branch in branches"
818819
:x="branch.x1"
819820
:y="branch.y1"

0 commit comments

Comments
 (0)