Skip to content

Commit b633902

Browse files
baolanlequangbaolanlequang
authored
update d3js version (#162)
* feat: add test case for d3js
1 parent 7cc45e2 commit b633902

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+3008
-563
lines changed

‎.github/workflows/e2e_testing.yml

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
name: E2E Testing
2+
on: push
3+
4+
jobs:
5+
cypress-run:
6+
runs-on: ubuntu-22.04
7+
steps:
8+
- name: Checkout
9+
uses: actions/checkout@v4
10+
- name: Cypress run
11+
uses: cypress-io/github-action@v6
12+
with:
13+
build: npm run build
14+
start: npm start
15+
browser: chrome

‎.github/workflows/testing.yml

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
name: Testing
1+
name: Units Testing
22

33
on: push
44

‎README.md

+15
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,21 @@ $ yarn start
3838

3939
[demo & step-by-step manual](https://github.com/ComPlat/react-spectra-editor/blob/master/DEMO_MANUAL.md)
4040

41+
### Testing
42+
#### Unit test
43+
```
44+
$ yarn test
45+
```
46+
47+
#### E2E test
48+
```
49+
$ yarn start
50+
```
51+
52+
Open another terminal
53+
```
54+
$ yarn e2e
55+
```
4156

4257

4358
## Acknowledgments

‎cypress.config.ts

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { defineConfig } from "cypress";
2+
3+
export default defineConfig({
4+
e2e: {
5+
setupNodeEvents(on, config) {
6+
// implement node event listeners here
7+
},
8+
experimentalStudio: true
9+
},
10+
});

‎cypress/e2e/cv_spec.cy.ts

+281
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,281 @@
1+
describe('CV', () => {
2+
beforeEach(() => {
3+
cy.viewport(2000, 2000)
4+
cy.visit('http://localhost:3000/')
5+
cy.get('#btn-cv').click()
6+
})
7+
8+
it('Open layout', () => {
9+
cy.get('.d3Line').children().should('have.class', 'd3Svg')
10+
cy.get('.d3Svg text.xLabel').should('have.text', 'V vs Ref')
11+
cy.get('.d3Svg text.yLabel').should('have.text', 'A')
12+
})
13+
14+
function addMaxPeak(view, offset=0) {
15+
cy.get('.btn-sv-bar-addpeak').click()
16+
cy.get('.d3Svg')
17+
.trigger('click', 1110 + offset, 480, {
18+
which: 1,
19+
view: view,
20+
})
21+
}
22+
23+
function addMinPeak(view, offset=0) {
24+
cy.get('.btn-sv-bar-addpeak').click()
25+
cy.get('.d3Svg')
26+
.trigger('click', 1050 + offset, 1480, {
27+
which: 1,
28+
view: view,
29+
})
30+
}
31+
32+
function addPecker(view, offset=0) {
33+
cy.get('.btn-sv-bar-addpecker').click()
34+
cy.get('.d3Svg')
35+
.trigger('click', 1350 + offset, 1480, {
36+
which: 1,
37+
view: view,
38+
})
39+
}
40+
41+
function removeMaxPeak(view, offset=0) {
42+
cy.get('.btn-sv-bar-rmpeak').click()
43+
cy.get('.d3Svg')
44+
.trigger('click', 1110 + offset, 450, {
45+
which: 1,
46+
view: view,
47+
})
48+
}
49+
50+
function removeMinPeak(view, offset=0) {
51+
cy.get('.btn-sv-bar-rmpeak').click()
52+
cy.get('.d3Svg')
53+
.trigger('click', 1050 + offset, 900, {
54+
which: 1,
55+
view: view,
56+
})
57+
}
58+
59+
function removePecker(view, offset=0) {
60+
cy.get('.btn-sv-bar-rmpecker').click()
61+
cy.get('.d3Svg')
62+
.trigger('click', 1350 + offset, 800, {
63+
which: 1,
64+
view: view,
65+
})
66+
}
67+
68+
it('Zoom in and zoom out on peaks', () => {
69+
/* ==== Generated with Cypress Studio ==== */
70+
cy.get('[data-testid="GraphSelectionPanel"] > .MuiButtonBase-root > .MuiAccordionSummary-content').click();
71+
cy.get(':nth-child(2) > .GraphSelectionPanel-curve-603').click();
72+
/* ==== End Cypress Studio ==== */
73+
74+
cy.window().then(win => {
75+
cy.get('.d3Svg')
76+
.trigger('mousedown', 1000, 300, {
77+
which: 1,
78+
view: win,
79+
})
80+
.trigger('mousemove', {
81+
clientX: 1200,
82+
clientY: 800,
83+
force: true,
84+
})
85+
.trigger('mouseup', {
86+
force: true,
87+
view: win,
88+
});
89+
90+
cy.wait(1000)
91+
cy.get('.btn-sv-bar-zoomreset').click()
92+
});
93+
94+
})
95+
96+
it('Add peak and pecker', () => {
97+
cy.window().then(win => {
98+
/* ==== Generated with Cypress Studio ==== */
99+
cy.get('[data-testid="GraphSelectionPanel"] > .MuiButtonBase-root > .MuiAccordionSummary-content').click();
100+
cy.get(':nth-child(2) > .GraphSelectionPanel-curve-603').click();
101+
cy.get(':nth-child(3) > .MuiAccordionSummary-root > .MuiAccordionSummary-content').click();
102+
cy.get('.CyclicVoltammetryPanel-cellSelected-643').click();
103+
/* ==== End Cypress Studio ==== */
104+
105+
addMaxPeak(win);
106+
107+
/* ==== Generated with Cypress Studio ==== */
108+
cy.get('.MuiTableBody-root > .MuiTableRow-root > :nth-child(3)').click();
109+
/* ==== End Cypress Studio ==== */
110+
111+
addMinPeak(win);
112+
113+
addPecker(win);
114+
});
115+
})
116+
117+
it('Remove peak and pecker', () => {
118+
cy.window().then(win => {
119+
/* ==== Generated with Cypress Studio ==== */
120+
cy.get('[data-testid="GraphSelectionPanel"] > .MuiButtonBase-root > .MuiAccordionSummary-content').click();
121+
cy.get(':nth-child(2) > .GraphSelectionPanel-curve-603').click();
122+
cy.get(':nth-child(3) > .MuiAccordionSummary-root > .MuiAccordionSummary-content').click();
123+
cy.get('.CyclicVoltammetryPanel-cellSelected-643').click();
124+
/* ==== End Cypress Studio ==== */
125+
126+
addMaxPeak(win);
127+
128+
/* ==== Generated with Cypress Studio ==== */
129+
cy.get('.MuiTableBody-root > .MuiTableRow-root > :nth-child(3)').click();
130+
/* ==== End Cypress Studio ==== */
131+
132+
addMinPeak(win);
133+
134+
addPecker(win);
135+
136+
/* ==== Generated with Cypress Studio ==== */
137+
cy.get('.MuiTableBody-root > .MuiTableRow-root > :nth-child(2)').click();
138+
/* ==== End Cypress Studio ==== */
139+
removeMaxPeak(win);
140+
141+
/* ==== Generated with Cypress Studio ==== */
142+
cy.get('.MuiTableBody-root > .MuiTableRow-root > :nth-child(3)').click();
143+
/* ==== End Cypress Studio ==== */
144+
removeMinPeak(win);
145+
146+
removePecker(win);
147+
});
148+
})
149+
150+
it('Add new list peak and pecker', () => {
151+
cy.window().then(win => {
152+
/* ==== Generated with Cypress Studio ==== */
153+
cy.get('[data-testid="GraphSelectionPanel"] > .MuiButtonBase-root > .MuiAccordionSummary-content').click();
154+
cy.get(':nth-child(2) > .GraphSelectionPanel-curve-603').click();
155+
cy.get(':nth-child(3) > .MuiAccordionSummary-root > .MuiAccordionSummary-content').click();
156+
cy.get('.CyclicVoltammetryPanel-cellSelected-643').click();
157+
/* ==== End Cypress Studio ==== */
158+
159+
addMaxPeak(win);
160+
161+
/* ==== Generated with Cypress Studio ==== */
162+
cy.get('.MuiTableBody-root > .MuiTableRow-root > :nth-child(3)').click();
163+
/* ==== End Cypress Studio ==== */
164+
165+
addMinPeak(win);
166+
167+
addPecker(win);
168+
169+
170+
/* ==== Generated with Cypress Studio ==== */
171+
cy.get('[data-testid="AddCircleOutlineIcon"] > path').click();
172+
cy.get('.MuiTableBody-root > :nth-child(2) > :nth-child(2)').click();
173+
/* ==== End Cypress Studio ==== */
174+
175+
addMaxPeak(win, 50);
176+
177+
/* ==== Generated with Cypress Studio ==== */
178+
cy.get('.MuiTableBody-root > :nth-child(2) > :nth-child(3)').click();
179+
/* ==== End Cypress Studio ==== */
180+
181+
addMinPeak(win, 50);
182+
183+
addPecker(win, 50);
184+
185+
/* ==== Generated with Cypress Studio ==== */
186+
cy.get(':nth-child(1) > :nth-child(8) > [data-testid="RemoveCircleIcon"] > path').click({force: true});
187+
/* ==== End Cypress Studio ==== */
188+
});
189+
})
190+
191+
it('Set reference peaks', () => {
192+
cy.window().then(win => {
193+
/* ==== Generated with Cypress Studio ==== */
194+
cy.get('[data-testid="GraphSelectionPanel"] > .MuiButtonBase-root > .MuiAccordionSummary-content').click();
195+
cy.get(':nth-child(2) > .GraphSelectionPanel-curve-603').click();
196+
cy.get(':nth-child(3) > .MuiAccordionSummary-root > .MuiAccordionSummary-content').click();
197+
cy.get('.CyclicVoltammetryPanel-cellSelected-643').click();
198+
/* ==== End Cypress Studio ==== */
199+
200+
addMaxPeak(win);
201+
202+
/* ==== Generated with Cypress Studio ==== */
203+
cy.get('.MuiTableBody-root > .MuiTableRow-root > :nth-child(3)').click();
204+
/* ==== End Cypress Studio ==== */
205+
206+
addMinPeak(win);
207+
208+
addPecker(win);
209+
210+
211+
/* ==== Generated with Cypress Studio ==== */
212+
cy.get('[data-testid="AddCircleOutlineIcon"] > path').click();
213+
cy.get('.MuiTableBody-root > :nth-child(2) > :nth-child(2)').click();
214+
/* ==== End Cypress Studio ==== */
215+
216+
addMaxPeak(win, 50);
217+
218+
/* ==== Generated with Cypress Studio ==== */
219+
cy.get('.MuiTableBody-root > :nth-child(2) > :nth-child(3)').click();
220+
/* ==== End Cypress Studio ==== */
221+
222+
addMinPeak(win, 50);
223+
224+
addPecker(win, 50);
225+
226+
/* ==== Generated with Cypress Studio ==== */
227+
cy.get(':nth-child(2) > :nth-child(1) > .MuiButtonBase-root > .PrivateSwitchBase-input').check();
228+
cy.get('[data-testid="AddLocationOutlinedIcon"]').click();
229+
cy.get('[data-testid="Pecker"] > .MuiFormControl-root > .MuiInputBase-root > #intg-factor-name').click();
230+
cy.get('[data-testid="Pecker"] > .MuiFormControl-root > .MuiInputBase-root > #intg-factor-name').click();
231+
cy.get('[data-testid="Pecker"] > .MuiFormControl-root > .MuiInputBase-root > #intg-factor-name').click();
232+
cy.get('[data-testid="AddLocationOutlinedIcon"]').click();
233+
cy.get(':nth-child(1) > :nth-child(1) > .MuiButtonBase-root > .PrivateSwitchBase-input').check();
234+
cy.get('[data-testid="AddLocationOutlinedIcon"]').click();
235+
/* ==== End Cypress Studio ==== */
236+
});
237+
})
238+
239+
it('Change axes labels', () => {
240+
/* ==== Generated with Cypress Studio ==== */
241+
cy.get('[aria-labelledby="select-x-axis-label"]').click();
242+
cy.get('[data-value="Voltage in V"]').click();
243+
cy.get('[aria-labelledby="select-y-axis-label"]').click();
244+
cy.get('[data-value="Current in A"]').click();
245+
// /* ==== End Cypress Studio ==== */
246+
247+
cy.get('.d3Svg text.xLabel').should('have.text', 'Voltage in V')
248+
cy.get('.d3Svg text.yLabel').should('have.text', 'Current in A')
249+
250+
/* ==== Generated with Cypress Studio ==== */
251+
cy.get('[aria-labelledby="select-x-axis-label"]').click();
252+
cy.get('[data-value="Voltage vs Ref in V"]').click();
253+
cy.get('[aria-labelledby="select-y-axis-label"]').click();
254+
cy.get('[data-value="Current in mA"]').click();
255+
// /* ==== End Cypress Studio ==== */
256+
257+
cy.get('.d3Svg text.xLabel').should('have.text', 'Voltage vs Ref in V')
258+
cy.get('.d3Svg text.yLabel').should('have.text', 'Current in mA')
259+
260+
/* ==== Generated with Cypress Studio ==== */
261+
cy.get('[aria-labelledby="select-x-axis-label"]').click();
262+
cy.get('[data-value="Potential in V"]').click();
263+
cy.get('[aria-labelledby="select-y-axis-label"]').click();
264+
cy.get('[data-value="Current in A"]').click();
265+
/* ==== End Cypress Studio ==== */
266+
267+
cy.get('.d3Svg text.xLabel').should('have.text', 'Potential in V')
268+
cy.get('.d3Svg text.yLabel').should('have.text', 'Current in A')
269+
270+
// /* ==== Generated with Cypress Studio ==== */
271+
cy.get('[aria-labelledby="select-x-axis-label"]').click();
272+
cy.get('[data-value="Potential vs Ref in V"]').click();
273+
cy.get('[aria-labelledby="select-y-axis-label"]').click();
274+
cy.get('[data-value="Current in mA"]').click();
275+
/* ==== End Cypress Studio ==== */
276+
277+
cy.get('.d3Svg text.xLabel').should('have.text', 'Potential vs Ref in V')
278+
cy.get('.d3Svg text.yLabel').should('have.text', 'Current in mA')
279+
280+
})
281+
})

0 commit comments

Comments
 (0)