Skip to content

Commit 14aa872

Browse files
bertrandgbertrandg
committed
add cypress tests to geek example page
1 parent cf8e593 commit 14aa872

File tree

6 files changed

+446
-272
lines changed

6 files changed

+446
-272
lines changed

‎cypress/integration/1.simple.spec.js‎

Lines changed: 54 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,54 @@
1-
/// <reference types="Cypress" />
2-
3-
import { moveGutter, checkSplitDirAndSizes } from '../support/splitUtils'
4-
5-
6-
context('Simple split example page tests', () => {
7-
const W = 1070;
8-
const H = 300;
9-
const GUTTER = 11;
10-
11-
beforeEach(() => {
12-
cy.visit('/#/examples/simple-split')
13-
})
14-
15-
it('Display initial state', () => {
16-
checkSplitDirAndSizes('as-split', 'horizontal', W, H, GUTTER, [318, 741]);
17-
})
18-
19-
it('Change direction', () => {
20-
cy.get('.btns > .btn').click();
21-
checkSplitDirAndSizes('as-split', 'vertical', W, H, GUTTER, [87, 202]);
22-
})
23-
24-
it('Move gutter horizontally', () => {
25-
moveGutter('.as-split-gutter', 0, 280, 0);
26-
checkSplitDirAndSizes('as-split', 'horizontal', W, H, GUTTER, [597, 462]);
27-
})
28-
29-
it('Change direction & move gutter vertically', () => {
30-
cy.get('.btns > .btn').click();
31-
moveGutter('.as-split-gutter', 0, 0, 60);
32-
checkSplitDirAndSizes('as-split', 'vertical', W, H, GUTTER, [146, 143]);
33-
})
34-
35-
it('Move gutter horizontally and move it back', () => {
36-
moveGutter('.as-split-gutter', 0, 280, 0);
37-
checkSplitDirAndSizes('as-split', 'horizontal', W, H, GUTTER, [597, 462]);
38-
39-
moveGutter('.as-split-gutter', 0, -280, 0);
40-
checkSplitDirAndSizes('as-split', 'horizontal', W, H, GUTTER, [317, 742]);
41-
})
42-
43-
it('Move gutter horizontally to max, change direction', () => {
44-
moveGutter('.as-split-gutter', 0, -1000, 0);
45-
checkSplitDirAndSizes('as-split', 'horizontal', W, H, GUTTER, [0, 1059]);
46-
47-
cy.get('.btns > .btn').click();
48-
checkSplitDirAndSizes('as-split', 'vertical', W, H, GUTTER, [0, 289]);
49-
50-
moveGutter('.as-split-gutter', 0, 0, 1000);
51-
cy.get('.btns > .btn').click();
52-
checkSplitDirAndSizes('as-split', 'horizontal', W, H, GUTTER, [1059, 0]);
53-
})
54-
})
1+
/// <reference types="Cypress" />
2+
3+
import { moveGutter, checkSplitDirAndSizes } from '../support/splitUtils'
4+
5+
6+
context('Simple split example page tests', () => {
7+
const W = 1070;
8+
const H = 300;
9+
const GUTTER = 11;
10+
11+
beforeEach(() => {
12+
cy.visit('/#/examples/simple-split')
13+
})
14+
15+
it('Display initial state', () => {
16+
checkSplitDirAndSizes('as-split', 'horizontal', W, H, GUTTER, [318, 741]);
17+
})
18+
19+
it('Change direction', () => {
20+
cy.get('.btns > .btn').click();
21+
checkSplitDirAndSizes('as-split', 'vertical', W, H, GUTTER, [87, 202]);
22+
})
23+
24+
it('Move gutter horizontally', () => {
25+
moveGutter('.as-split-gutter', 0, 280, 0);
26+
checkSplitDirAndSizes('as-split', 'horizontal', W, H, GUTTER, [597, 462]);
27+
})
28+
29+
it('Change direction & move gutter vertically', () => {
30+
cy.get('.btns > .btn').click();
31+
moveGutter('.as-split-gutter', 0, 0, 60);
32+
checkSplitDirAndSizes('as-split', 'vertical', W, H, GUTTER, [146, 143]);
33+
})
34+
35+
it('Move gutter horizontally and move it back', () => {
36+
moveGutter('.as-split-gutter', 0, 280, 0);
37+
checkSplitDirAndSizes('as-split', 'horizontal', W, H, GUTTER, [597, 462]);
38+
39+
moveGutter('.as-split-gutter', 0, -280, 0);
40+
checkSplitDirAndSizes('as-split', 'horizontal', W, H, GUTTER, [317, 742]);
41+
})
42+
43+
it('Move gutter horizontally to max, change direction', () => {
44+
moveGutter('.as-split-gutter', 0, -1000, 0);
45+
checkSplitDirAndSizes('as-split', 'horizontal', W, H, GUTTER, [0, 1059]);
46+
47+
cy.get('.btns > .btn').click();
48+
checkSplitDirAndSizes('as-split', 'vertical', W, H, GUTTER, [0, 289]);
49+
50+
moveGutter('.as-split-gutter', 0, 0, 1000);
51+
cy.get('.btns > .btn').click();
52+
checkSplitDirAndSizes('as-split', 'horizontal', W, H, GUTTER, [1059, 0]);
53+
})
54+
})

‎cypress/integration/2.nested.spec.js‎

Lines changed: 63 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,63 @@
1-
/// <reference types="Cypress" />
2-
3-
import { moveGutter, checkSplitDirAndSizes } from '../support/splitUtils'
4-
5-
context('Nested splits example page tests', () => {
6-
const W = 1070;
7-
const H = 400;
8-
const GUTTER = 11;
9-
10-
beforeEach(() => {
11-
cy.visit('/#/examples/nested-split')
12-
})
13-
14-
it('Display initial state', () => {
15-
checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [424, 635]);
16-
17-
checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(1) > as-split', 'vertical', 424, H, GUTTER, [126, 126, 126]);
18-
checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(2) > as-split', 'vertical', 635, H, GUTTER, [97, 292]);
19-
})
20-
21-
it('Move gutter horizontally 3 times and until maximum', () => {
22-
moveGutter('.split-example > as-split > .as-split-gutter', 0, 280, 0);
23-
24-
checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [703, 356]);
25-
26-
moveGutter('.split-example > as-split > .as-split-gutter', 0, -80, 0);
27-
28-
checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [623, 436]);
29-
30-
moveGutter('.split-example > as-split > .as-split-gutter', 0, 700, 0);
31-
32-
checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [1059, 0]);
33-
})
34-
35-
it('Move nested split 1 multiple times', () => {
36-
moveGutter('.split-example > as-split > as-split-area:nth-child(1) > as-split > .as-split-gutter', 0, 0, 60);
37-
checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(1) > as-split', 'vertical', 424, H, GUTTER, [186, 66, 126]);
38-
39-
moveGutter('.split-example > as-split > as-split-area:nth-child(1) > as-split > .as-split-gutter', 1, 0, -300);
40-
checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(1) > as-split', 'vertical', 424, H, GUTTER, [186, 0, 192]);
41-
42-
// Move space smaller than gutter > nothing change
43-
moveGutter('.split-example > as-split > as-split-area:nth-child(1) > as-split > .as-split-gutter', 0, 0, -10);
44-
checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(1) > as-split', 'vertical', 424, H, GUTTER, [186, 0, 192]);
45-
46-
// Move space same as gutter > move
47-
moveGutter('.split-example > as-split > as-split-area:nth-child(1) > as-split > .as-split-gutter', 0, 0, -GUTTER);
48-
checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(1) > as-split', 'vertical', 424, H, GUTTER, [175, 11, 192]);
49-
50-
// Move space bigger than gutter > move
51-
moveGutter('.split-example > as-split > as-split-area:nth-child(1) > as-split > .as-split-gutter', 0, 0, -20);
52-
checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(1) > as-split', 'vertical', 424, H, GUTTER, [155, 31, 192]);
53-
})
54-
55-
it('Move nested split 2 multiple times', () => {
56-
moveGutter('.split-example > as-split > as-split-area:nth-child(2) > as-split > .as-split-gutter', 0, 0, 600);
57-
checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(2) > as-split', 'vertical', 635, H, GUTTER, [389, 0]);
58-
59-
moveGutter('.split-example > as-split > as-split-area:nth-child(2) > as-split > .as-split-gutter', 0, 0, -600);
60-
checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(2) > as-split', 'vertical', 635, H, GUTTER, [0, 389]);
61-
})
62-
})
1+
/// <reference types="Cypress" />
2+
3+
import { moveGutter, checkSplitDirAndSizes } from '../support/splitUtils'
4+
5+
context('Nested splits example page tests', () => {
6+
const W = 1070;
7+
const H = 400;
8+
const GUTTER = 11;
9+
10+
beforeEach(() => {
11+
cy.visit('/#/examples/nested-split')
12+
})
13+
14+
it('Display initial state', () => {
15+
checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [424, 635]);
16+
17+
checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(1) > as-split', 'vertical', 424, H, GUTTER, [126, 126, 126]);
18+
checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(2) > as-split', 'vertical', 635, H, GUTTER, [97, 292]);
19+
})
20+
21+
it('Move gutter horizontally 3 times and until maximum', () => {
22+
moveGutter('.split-example > as-split > .as-split-gutter', 0, 280, 0);
23+
24+
checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [703, 356]);
25+
26+
moveGutter('.split-example > as-split > .as-split-gutter', 0, -80, 0);
27+
28+
checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [623, 436]);
29+
30+
moveGutter('.split-example > as-split > .as-split-gutter', 0, 700, 0);
31+
32+
checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [1059, 0]);
33+
})
34+
35+
it('Move nested split 1 multiple times', () => {
36+
moveGutter('.split-example > as-split > as-split-area:nth-child(1) > as-split > .as-split-gutter', 0, 0, 60);
37+
checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(1) > as-split', 'vertical', 424, H, GUTTER, [186, 66, 126]);
38+
39+
moveGutter('.split-example > as-split > as-split-area:nth-child(1) > as-split > .as-split-gutter', 1, 0, -300);
40+
checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(1) > as-split', 'vertical', 424, H, GUTTER, [186, 0, 192]);
41+
42+
// Move space smaller than gutter > nothing change
43+
moveGutter('.split-example > as-split > as-split-area:nth-child(1) > as-split > .as-split-gutter', 0, 0, -10);
44+
checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(1) > as-split', 'vertical', 424, H, GUTTER, [186, 0, 192]);
45+
46+
// Move space same as gutter > move
47+
moveGutter('.split-example > as-split > as-split-area:nth-child(1) > as-split > .as-split-gutter', 0, 0, -GUTTER);
48+
checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(1) > as-split', 'vertical', 424, H, GUTTER, [175, 11, 192]);
49+
50+
// Move space bigger than gutter > move
51+
moveGutter('.split-example > as-split > as-split-area:nth-child(1) > as-split > .as-split-gutter', 0, 0, -20);
52+
checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(1) > as-split', 'vertical', 424, H, GUTTER, [155, 31, 192]);
53+
})
54+
55+
it('Move nested split 2 multiple times', () => {
56+
moveGutter('.split-example > as-split > as-split-area:nth-child(2) > as-split > .as-split-gutter', 0, 0, 600);
57+
checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(2) > as-split', 'vertical', 635, H, GUTTER, [389, 0]);
58+
59+
moveGutter('.split-example > as-split > as-split-area:nth-child(2) > as-split > .as-split-gutter', 0, 0, -600);
60+
checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(2) > as-split', 'vertical', 635, H, GUTTER, [0, 389]);
61+
})
62+
63+
})

‎cypress/integration/4.sync.spec.js‎

Lines changed: 49 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,49 @@
1-
/// <reference types="Cypress" />
2-
3-
import { moveGutter, checkSplitDirAndSizes } from '../support/splitUtils'
4-
5-
6-
context('Sync splits example page tests', () => {
7-
const W = 1070;
8-
const H = 300;
9-
const GUTTER = 11;
10-
11-
beforeEach(() => {
12-
cy.visit('/#/examples/sync-split')
13-
})
14-
15-
it('Display initial state', () => {
16-
checkSplitDirAndSizes('.split-example > as-split', 'vertical', W, H, GUTTER, [87, 202]);
17-
checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(1) > as-split', 'horizontal', W, 87, GUTTER, [265, 794]);
18-
checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(2) > as-split', 'horizontal', W, 202, GUTTER, [265, 794]);
19-
})
20-
21-
it('Move gutter upper split horizontally and check if other split follow', () => {
22-
moveGutter('.split-example > as-split > as-split-area:nth-child(1) > as-split > .as-split-gutter', 0, 280, 0);
23-
checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(1) > as-split', 'horizontal', W, 87, GUTTER, [544, 515]);
24-
checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(2) > as-split', 'horizontal', W, 202, GUTTER, [544, 515]);
25-
26-
moveGutter('.split-example > as-split > as-split-area:nth-child(1) > as-split > .as-split-gutter', 0, 600, 0);
27-
checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(1) > as-split', 'horizontal', W, 87, GUTTER, [1059, 0]);
28-
checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(2) > as-split', 'horizontal', W, 202, GUTTER, [1059, 0]);
29-
30-
moveGutter('.split-example > as-split > as-split-area:nth-child(1) > as-split > .as-split-gutter', 0, -1500, 0);
31-
checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(1) > as-split', 'horizontal', W, 87, GUTTER, [0, 1059]);
32-
checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(2) > as-split', 'horizontal', W, 202, GUTTER, [0, 1059]);
33-
})
34-
35-
it('Move gutter down split horizontally and check if other split follow', () => {
36-
moveGutter('.split-example > as-split > as-split-area:nth-child(2) > as-split > .as-split-gutter', 0, 280, 0);
37-
checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(1) > as-split', 'horizontal', W, 87, GUTTER, [544, 515]);
38-
checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(2) > as-split', 'horizontal', W, 202, GUTTER, [544, 515]);
39-
40-
moveGutter('.split-example > as-split > as-split-area:nth-child(2) > as-split > .as-split-gutter', 0, 600, 0);
41-
checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(1) > as-split', 'horizontal', W, 87, GUTTER, [1059, 0]);
42-
checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(2) > as-split', 'horizontal', W, 202, GUTTER, [1059, 0]);
43-
44-
moveGutter('.split-example > as-split > as-split-area:nth-child(2) > as-split > .as-split-gutter', 0, -1500, 0);
45-
checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(1) > as-split', 'horizontal', W, 87, GUTTER, [0, 1059]);
46-
checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(2) > as-split', 'horizontal', W, 202, GUTTER, [0, 1059]);
47-
})
48-
})
1+
/// <reference types="Cypress" />
2+
3+
import { moveGutter, checkSplitDirAndSizes } from '../support/splitUtils'
4+
5+
6+
context('Sync splits example page tests', () => {
7+
const W = 1070;
8+
const H = 300;
9+
const GUTTER = 11;
10+
11+
beforeEach(() => {
12+
cy.visit('/#/examples/sync-split')
13+
})
14+
15+
it('Display initial state', () => {
16+
checkSplitDirAndSizes('.split-example > as-split', 'vertical', W, H, GUTTER, [87, 202]);
17+
checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(1) > as-split', 'horizontal', W, 87, GUTTER, [265, 794]);
18+
checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(2) > as-split', 'horizontal', W, 202, GUTTER, [265, 794]);
19+
})
20+
21+
it('Move gutter upper split horizontally and check if other split follow', () => {
22+
moveGutter('.split-example > as-split > as-split-area:nth-child(1) > as-split > .as-split-gutter', 0, 280, 0);
23+
checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(1) > as-split', 'horizontal', W, 87, GUTTER, [544, 515]);
24+
checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(2) > as-split', 'horizontal', W, 202, GUTTER, [544, 515]);
25+
26+
moveGutter('.split-example > as-split > as-split-area:nth-child(1) > as-split > .as-split-gutter', 0, 600, 0);
27+
checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(1) > as-split', 'horizontal', W, 87, GUTTER, [1059, 0]);
28+
checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(2) > as-split', 'horizontal', W, 202, GUTTER, [1059, 0]);
29+
30+
moveGutter('.split-example > as-split > as-split-area:nth-child(1) > as-split > .as-split-gutter', 0, -1500, 0);
31+
checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(1) > as-split', 'horizontal', W, 87, GUTTER, [0, 1059]);
32+
checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(2) > as-split', 'horizontal', W, 202, GUTTER, [0, 1059]);
33+
})
34+
35+
it('Move gutter down split horizontally and check if other split follow', () => {
36+
moveGutter('.split-example > as-split > as-split-area:nth-child(2) > as-split > .as-split-gutter', 0, 280, 0);
37+
checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(1) > as-split', 'horizontal', W, 87, GUTTER, [544, 515]);
38+
checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(2) > as-split', 'horizontal', W, 202, GUTTER, [544, 515]);
39+
40+
moveGutter('.split-example > as-split > as-split-area:nth-child(2) > as-split > .as-split-gutter', 0, 600, 0);
41+
checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(1) > as-split', 'horizontal', W, 87, GUTTER, [1059, 0]);
42+
checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(2) > as-split', 'horizontal', W, 202, GUTTER, [1059, 0]);
43+
44+
moveGutter('.split-example > as-split > as-split-area:nth-child(2) > as-split > .as-split-gutter', 0, -1500, 0);
45+
checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(1) > as-split', 'horizontal', W, 87, GUTTER, [0, 1059]);
46+
checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(2) > as-split', 'horizontal', W, 202, GUTTER, [0, 1059]);
47+
})
48+
49+
})

0 commit comments

Comments
 (0)