Skip to content

Commit 90bcf22

Browse files
bertrandgbertrandg
committed
Update cypress E2E tests
1 parent 748efd1 commit 90bcf22

File tree

4 files changed

+139
-104
lines changed

4 files changed

+139
-104
lines changed

‎cypress.json‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
{
2-
"baseUrl": "http://localhost:4200",
3-
"viewportWidth": 1200,
4-
"viewportHeight": 800
5-
}
1+
{
2+
"baseUrl": "http://localhost:4200",
3+
"viewportWidth": 1200,
4+
"viewportHeight": 800,
5+
"blacklistHosts": ["camo.githubusercontent.com"]
6+
}

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

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -13,44 +13,44 @@ context('Sync splits example page tests', () => {
1313
})
1414

1515
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-
checkSplitDirAndSizes('.split-example > as-split > .as-split-area:nth-child(3) > as-split', 'horizontal', W, 202, GUTTER, [265, 794]);
16+
checkSplitDirAndSizes('.split-example > as-split', 'vertical', W, H, GUTTER, [56, 55, 167]);
17+
checkSplitDirAndSizes('.split-example > as-split > .as-split-area:nth-child(1) > as-split', 'horizontal', W, 56, GUTTER, [265, 794]);
18+
checkSplitDirAndSizes('.split-example > as-split > .as-split-area:nth-child(2) > as-split', 'horizontal', W, 56, GUTTER, [265, 794]);
19+
checkSplitDirAndSizes('.split-example > as-split > .as-split-area:nth-child(3) > as-split', 'horizontal', W, 167, GUTTER, [265, 794]);
2020
})
2121

22-
it('Move gutter upper split horizontally and check if others splits follow', () => {
22+
it('Move gutter first split horizontally and check if others splits follow', () => {
2323
moveGutter('.split-example > as-split > .as-split-area:nth-child(1) > as-split > .as-split-gutter', 0, 280, 0);
24-
checkSplitDirAndSizes('.split-example > as-split > .as-split-area:nth-child(1) > as-split', 'horizontal', W, 87, GUTTER, [544, 515]);
25-
checkSplitDirAndSizes('.split-example > as-split > .as-split-area:nth-child(2) > as-split', 'horizontal', W, 202, GUTTER, [544, 515]);
26-
checkSplitDirAndSizes('.split-example > as-split > .as-split-area:nth-child(3) > as-split', 'horizontal', W, 202, GUTTER, [544, 515]);
24+
checkSplitDirAndSizes('.split-example > as-split > .as-split-area:nth-child(1) > as-split', 'horizontal', W, 56, GUTTER, [544, 515]);
25+
checkSplitDirAndSizes('.split-example > as-split > .as-split-area:nth-child(2) > as-split', 'horizontal', W, 56, GUTTER, [544, 515]);
26+
checkSplitDirAndSizes('.split-example > as-split > .as-split-area:nth-child(3) > as-split', 'horizontal', W, 167, GUTTER, [544, 515]);
2727

2828
moveGutter('.split-example > as-split > .as-split-area:nth-child(1) > as-split > .as-split-gutter', 0, 600, 0);
29-
checkSplitDirAndSizes('.split-example > as-split > .as-split-area:nth-child(1) > as-split', 'horizontal', W, 87, GUTTER, [1059, 0]);
30-
checkSplitDirAndSizes('.split-example > as-split > .as-split-area:nth-child(2) > as-split', 'horizontal', W, 202, GUTTER, [1059, 0]);
31-
checkSplitDirAndSizes('.split-example > as-split > .as-split-area:nth-child(3) > as-split', 'horizontal', W, 202, GUTTER, [1059, 0]);
29+
checkSplitDirAndSizes('.split-example > as-split > .as-split-area:nth-child(1) > as-split', 'horizontal', W, 56, GUTTER, [1059, 0]);
30+
checkSplitDirAndSizes('.split-example > as-split > .as-split-area:nth-child(2) > as-split', 'horizontal', W, 56, GUTTER, [1059, 0]);
31+
checkSplitDirAndSizes('.split-example > as-split > .as-split-area:nth-child(3) > as-split', 'horizontal', W, 167, GUTTER, [1059, 0]);
3232

3333
moveGutter('.split-example > as-split > .as-split-area:nth-child(1) > as-split > .as-split-gutter', 0, -1500, 0);
34-
checkSplitDirAndSizes('.split-example > as-split > .as-split-area:nth-child(1) > as-split', 'horizontal', W, 87, GUTTER, [0, 1059]);
35-
checkSplitDirAndSizes('.split-example > as-split > .as-split-area:nth-child(2) > as-split', 'horizontal', W, 202, GUTTER, [0, 1059]);
36-
checkSplitDirAndSizes('.split-example > as-split > .as-split-area:nth-child(3) > as-split', 'horizontal', W, 202, GUTTER, [0, 1059]);
34+
checkSplitDirAndSizes('.split-example > as-split > .as-split-area:nth-child(1) > as-split', 'horizontal', W, 56, GUTTER, [0, 1059]);
35+
checkSplitDirAndSizes('.split-example > as-split > .as-split-area:nth-child(2) > as-split', 'horizontal', W, 56, GUTTER, [0, 1059]);
36+
checkSplitDirAndSizes('.split-example > as-split > .as-split-area:nth-child(3) > as-split', 'horizontal', W, 167, GUTTER, [0, 1059]);
3737
})
3838

39-
it('Move gutter down split horizontally and check if others splits follow', () => {
39+
it('Move gutter second split horizontally and check if others splits follow', () => {
4040
moveGutter('.split-example > as-split > .as-split-area:nth-child(2) > as-split > .as-split-gutter', 0, 280, 0);
41-
checkSplitDirAndSizes('.split-example > as-split > .as-split-area:nth-child(1) > as-split', 'horizontal', W, 87, GUTTER, [544, 515]);
42-
checkSplitDirAndSizes('.split-example > as-split > .as-split-area:nth-child(2) > as-split', 'horizontal', W, 202, GUTTER, [544, 515]);
43-
checkSplitDirAndSizes('.split-example > as-split > .as-split-area:nth-child(3) > as-split', 'horizontal', W, 202, GUTTER, [544, 515]);
41+
checkSplitDirAndSizes('.split-example > as-split > .as-split-area:nth-child(1) > as-split', 'horizontal', W, 56, GUTTER, [544, 515]);
42+
checkSplitDirAndSizes('.split-example > as-split > .as-split-area:nth-child(2) > as-split', 'horizontal', W, 56, GUTTER, [544, 515]);
43+
checkSplitDirAndSizes('.split-example > as-split > .as-split-area:nth-child(3) > as-split', 'horizontal', W, 167, GUTTER, [544, 515]);
4444

4545
moveGutter('.split-example > as-split > .as-split-area:nth-child(2) > as-split > .as-split-gutter', 0, 600, 0);
46-
checkSplitDirAndSizes('.split-example > as-split > .as-split-area:nth-child(1) > as-split', 'horizontal', W, 87, GUTTER, [1059, 0]);
47-
checkSplitDirAndSizes('.split-example > as-split > .as-split-area:nth-child(2) > as-split', 'horizontal', W, 202, GUTTER, [1059, 0]);
48-
checkSplitDirAndSizes('.split-example > as-split > .as-split-area:nth-child(3) > as-split', 'horizontal', W, 202, GUTTER, [1059, 0]);
46+
checkSplitDirAndSizes('.split-example > as-split > .as-split-area:nth-child(1) > as-split', 'horizontal', W, 56, GUTTER, [1059, 0]);
47+
checkSplitDirAndSizes('.split-example > as-split > .as-split-area:nth-child(2) > as-split', 'horizontal', W, 56, GUTTER, [1059, 0]);
48+
checkSplitDirAndSizes('.split-example > as-split > .as-split-area:nth-child(3) > as-split', 'horizontal', W, 167, GUTTER, [1059, 0]);
4949

5050
moveGutter('.split-example > as-split > .as-split-area:nth-child(2) > as-split > .as-split-gutter', 0, -1500, 0);
51-
checkSplitDirAndSizes('.split-example > as-split > .as-split-area:nth-child(1) > as-split', 'horizontal', W, 87, GUTTER, [0, 1059]);
52-
checkSplitDirAndSizes('.split-example > as-split > .as-split-area:nth-child(2) > as-split', 'horizontal', W, 202, GUTTER, [0, 1059]);
53-
checkSplitDirAndSizes('.split-example > as-split > .as-split-area:nth-child(3) > as-split', 'horizontal', W, 202, GUTTER, [0, 1059]);
51+
checkSplitDirAndSizes('.split-example > as-split > .as-split-area:nth-child(1) > as-split', 'horizontal', W, 56, GUTTER, [0, 1059]);
52+
checkSplitDirAndSizes('.split-example > as-split > .as-split-area:nth-child(2) > as-split', 'horizontal', W, 56, GUTTER, [0, 1059]);
53+
checkSplitDirAndSizes('.split-example > as-split > .as-split-area:nth-child(3) > as-split', 'horizontal', W, 167, GUTTER, [0, 1059]);
5454
})
5555

5656
})

‎cypress/integration/7.click.spec.js‎

Lines changed: 48 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -19,56 +19,90 @@ context('Gutter click example page tests', () => {
1919
it('Click gutters to switch area sizes between 0 and X', () => {
2020
cy.get('.as-split-gutter').eq(0).click();
2121
checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [0, 788, 262]);
22-
22+
cy.wait(10);
23+
2324
cy.get('.as-split-gutter').eq(0).click();
2425
checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [263, 525, 262]);
25-
26+
cy.wait(10);
27+
2628
cy.get('.as-split-gutter').eq(0).click();
2729
checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [0, 788, 262]);
28-
30+
cy.wait(10);
31+
2932
cy.get('.as-split-gutter').eq(1).click();
3033
checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [0, 1050, 0]);
31-
34+
cy.wait(10);
35+
3236
cy.get('.as-split-gutter').eq(0).click();
3337
checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [263, 787, 0]);
34-
38+
cy.wait(10);
39+
3540
cy.get('.as-split-gutter').eq(1).click();
3641
checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [263, 525, 262]);
42+
cy.wait(10);
3743

38-
cy.get('.logs ul li').should('have.length', 6);
44+
cy.get('.logs ul li').filter('.gutterClick').should('have.length', 6);
45+
// cy.get('.logs ul li').filter('.transitionEnd').should('have.length', 6);
3946
})
4047

4148
it('Mix gutter click and dragging', () => {
49+
// Try move gutter event if disabled
4250
moveGutter('.as-split-gutter', 0, -100, 0);
4351
checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [263, 525, 262]);
4452
cy.get('.logs ul li').should('have.length', 0);
4553

54+
// Enable it
4655
cy.get('.btns button').eq(1).click();
4756

4857
moveGutter('.as-split-gutter', 0, -100, 0);
4958
checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [163, 624, 263]);
5059

51-
cy.get('.logs ul li').should('have.length', 6);
60+
cy.get('.logs ul li').filter('.dragStart').should('have.length', 1);
61+
cy.get('.logs ul li').filter('.dragEnd').should('have.length', 1);
5262

5363
cy.get('.as-split-gutter').eq(0).click();
5464
checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [0, 788, 262]);
55-
cy.get('.logs ul li').should('have.length', 8);
65+
cy.wait(1000);
66+
67+
cy.get('.logs ul li').filter('.dragStart').should('have.length', 2);
68+
cy.get('.logs ul li').filter('.dragEnd').should('have.length', 1);
69+
cy.get('.logs ul li').filter('.gutterClick').should('have.length', 1);
70+
cy.get('.logs ul li').filter('.transitionEnd').should('have.length', 1);
5671

5772
cy.get('.as-split-gutter').eq(1).click();
5873
checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [0, 1050, 0]);
59-
cy.get('.logs ul li').should('have.length', 10);
74+
cy.wait(10);
75+
76+
cy.get('.logs ul li').filter('.dragStart').should('have.length', 3);
77+
cy.get('.logs ul li').filter('.dragEnd').should('have.length', 1);
78+
cy.get('.logs ul li').filter('.gutterClick').should('have.length', 2);
79+
// cy.get('.logs ul li').filter('.transitionEnd').should('have.length', 2);
6080

6181
moveGutter('.as-split-gutter', 1, -20, 0);
6282
checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [0, 1030, 20]);
63-
cy.get('.logs ul li').should('have.length', 16);
83+
84+
cy.get('.logs ul li').filter('.dragStart').should('have.length', 4);
85+
cy.get('.logs ul li').filter('.dragEnd').should('have.length', 2);
86+
cy.get('.logs ul li').filter('.gutterClick').should('have.length', 2);
87+
// cy.get('.logs ul li').filter('.transitionEnd').should('have.length', 2);
6488

6589
cy.get('.as-split-gutter').eq(1).click();
66-
checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [0, 788, 262]);
67-
cy.get('.logs ul li').should('have.length', 18);
90+
checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [0, 1050, 0]);
91+
cy.wait(10);
92+
93+
cy.get('.logs ul li').filter('.dragStart').should('have.length', 5);
94+
cy.get('.logs ul li').filter('.dragEnd').should('have.length', 2);
95+
cy.get('.logs ul li').filter('.gutterClick').should('have.length', 3);
96+
// cy.get('.logs ul li').filter('.transitionEnd').should('have.length', 4);
6897

6998
cy.get('.as-split-gutter').eq(0).click();
70-
checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [263, 525, 262]);
71-
cy.get('.logs ul li').should('have.length', 20);
99+
checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [263, 787, 0]);
100+
cy.wait(10);
101+
102+
cy.get('.logs ul li').filter('.dragStart').should('have.length', 6);
103+
cy.get('.logs ul li').filter('.dragEnd').should('have.length', 2);
104+
cy.get('.logs ul li').filter('.gutterClick').should('have.length', 4);
105+
// cy.get('.logs ul li').filter('.transitionEnd').should('have.length', 4);
72106
})
73107

74108
})

‎cypress/support/splitUtils.js‎

Lines changed: 61 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,61 @@
1-
2-
export function moveGutter(gutters, num, x, y) {
3-
cy.get(gutters).eq(num)
4-
.trigger('mousedown', { which: 1, pageX: 0, pageY: 0 })
5-
.trigger('mousemove', { pageX: x*.25, pageY: y*.25 })
6-
.trigger('mousemove', { pageX: x*.50, pageY: y*.50 })
7-
.trigger('mousemove', { pageX: x*.75, pageY: y*.75 })
8-
.trigger('mousemove', { pageX: x, pageY: y })
9-
.trigger('mouseup');
10-
11-
cy.document().trigger('mouseup', { force: true });
12-
}
13-
14-
//////////////////////////////////////////
15-
16-
export function checkSplitDirAndCalcSizes(el, dir, w, h, gutter, sizes) {
17-
const propFlexDir = (dir === 'horizontal') ? 'row' : 'column';
18-
cy.get(el).should('have.css', 'flex-direction', propFlexDir);
19-
20-
const propSize = (dir === 'horizontal') ? 'width' : 'height';
21-
cy.get(`${ el } > .as-split-gutter`).should('have.css', propSize, `${ gutter }px`);
22-
23-
const propSize2 = (propSize === 'width') ? 'height' : 'width';
24-
const propValue2 = (propSize === 'width') ? h : w;
25-
26-
cy.get(`${ el } > as-split-area`)
27-
.should('have.length', sizes.length)
28-
.each(($li, index) => {
29-
cy.wrap($li).should('have.css', 'flex', `0 0 ${ sizes[index] }`);
30-
cy.wrap($li).should('have.css', propSize2, `${ propValue2 }px`);
31-
})
32-
}
33-
34-
//////////////////////////////////////////
35-
36-
export function checkSplitDirAndSizes(el, dir, w, h, gutter, sizes) {
37-
cy.log(`-- NEW SPLIT CHECK (${ dir },${ w },${ h },${ gutter })`);
38-
39-
// Before real test, check if values provided are ok !
40-
const total = sizes.reduce((acc, v) => acc + v, 0) + gutter * (sizes.length - 1);
41-
expect(total).to.eq((dir === 'horizontal') ? w : h);
42-
43-
const propFlexDir = (dir === 'horizontal') ? 'row' : 'column';
44-
cy.get(el).should('have.css', 'flex-direction', propFlexDir);
45-
46-
const propSize = (dir === 'horizontal') ? 'width' : 'height';
47-
const propSize2 = (propSize === 'width') ? 'height' : 'width';
48-
const propValue2 = (propSize === 'width') ? h : w;
49-
50-
cy.get(`${ el } > .as-split-gutter`).should('have.length', sizes.length - 1);
51-
cy.get(`${ el } > .as-split-gutter`).invoke(propSize).should('eq', gutter);
52-
cy.get(`${ el } > .as-split-gutter`).invoke(propSize2).should('eq', propValue2);
53-
54-
cy.get(`${ el } > .as-split-area`)
55-
.should('have.length', sizes.length)
56-
.each(($li, index) => {
57-
cy.wrap($li).invoke(propSize).should('eq', sizes[index]);
58-
cy.wrap($li).invoke(propSize2).should('eq', propValue2);
59-
})
60-
}
61-
1+
2+
export function moveGutter(gutters, num, x, y) {
3+
cy.get(gutters).eq(num)
4+
.trigger('mousedown', { which: 1, clientX: 0, clientY: 0 })
5+
.trigger('mousemove', { clientX: x*.25, clientY: y*.25 })
6+
.trigger('mousemove', { clientX: x*.50, clientY: y*.50 })
7+
.trigger('mousemove', { clientX: x*.75, clientY: y*.75 })
8+
.trigger('mousemove', { clientX: x, clientY: y })
9+
.trigger('mouseup');
10+
11+
cy.document().trigger('mouseup', { force: true });
12+
}
13+
14+
//////////////////////////////////////////
15+
16+
export function checkSplitDirAndCalcSizes(el, dir, w, h, gutter, sizes) {
17+
const propFlexDir = (dir === 'horizontal') ? 'row' : 'column';
18+
cy.get(el).should('have.css', 'flex-direction', propFlexDir);
19+
20+
const propSize = (dir === 'horizontal') ? 'width' : 'height';
21+
cy.get(`${ el } > .as-split-gutter`).should('have.css', propSize, `${ gutter }px`);
22+
23+
const propSize2 = (propSize === 'width') ? 'height' : 'width';
24+
const propValue2 = (propSize === 'width') ? h : w;
25+
26+
cy.get(`${ el } > as-split-area`)
27+
.should('have.length', sizes.length)
28+
.each(($li, index) => {
29+
cy.wrap($li).should('have.css', 'flex', `0 0 ${ sizes[index] }`);
30+
cy.wrap($li).should('have.css', propSize2, `${ propValue2 }px`);
31+
})
32+
}
33+
34+
//////////////////////////////////////////
35+
36+
export function checkSplitDirAndSizes(el, dir, w, h, gutter, sizes) {
37+
cy.log(`-- NEW SPLIT CHECK (${ dir },${ w },${ h },${ gutter })`);
38+
39+
// Before real test, check if values provided are ok !
40+
const total = sizes.reduce((acc, v) => acc + v, 0) + gutter * (sizes.length - 1);
41+
expect(total).to.eq((dir === 'horizontal') ? w : h);
42+
43+
const propFlexDir = (dir === 'horizontal') ? 'row' : 'column';
44+
cy.get(el).should('have.css', 'flex-direction', propFlexDir);
45+
46+
const propSize = (dir === 'horizontal') ? 'width' : 'height';
47+
const propSize2 = (propSize === 'width') ? 'height' : 'width';
48+
const propValue2 = (propSize === 'width') ? h : w;
49+
50+
cy.get(`${ el } > .as-split-gutter`).should('have.length', sizes.length - 1);
51+
cy.get(`${ el } > .as-split-gutter`).invoke(propSize).should('eq', gutter);
52+
cy.get(`${ el } > .as-split-gutter`).invoke(propSize2).should('eq', propValue2);
53+
54+
cy.get(`${ el } > .as-split-area`)
55+
.should('have.length', sizes.length)
56+
.each(($li, index) => {
57+
cy.wrap($li).invoke(propSize).should('eq', sizes[index]);
58+
cy.wrap($li).invoke(propSize2).should('eq', propValue2);
59+
})
60+
}
61+

0 commit comments

Comments
 (0)