Skip to content

Commit 35f262b

Browse files
bertrandgbertrandg
committed
Add cypress E2E tests
1 parent 9345cae commit 35f262b

2 files changed

Lines changed: 86 additions & 49 deletions

File tree

‎cypress/integration/basic.spec.js‎

Lines changed: 65 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,74 @@
11
/// <reference types="Cypress" />
22

3-
context('Direction change', () => {
4-
beforeEach(() => {
5-
cy.visit('http://localhost:4200/#/examples/simple-split')
6-
})
7-
8-
it('cy.viewport() - set the viewport size and dimension', () => {
9-
cy.viewport(800, 600);
10-
11-
const W = 650;
3+
context('Basic operation', () => {
4+
const W = 1070;
125
const H = 300;
136
const GUTTER = 11;
7+
8+
beforeEach(() => {
9+
cy.visit('http://localhost:4200/#/examples/simple-split')
10+
cy.viewport(1200, 800);
11+
})
1412

15-
cy.get('as-split').should('have.css', 'flex-direction', 'row');
16-
cy.get('as-split-area[size="30"]').should('have.css', 'height', `${ H }px`);
17-
cy.get('as-split-area[size="30"]').should('have.css', 'flex', '0 0 calc(-3.3px + 30%)');
18-
cy.get('as-split-area[size="70"]').should('have.css', 'height', `${ H }px`);
19-
cy.get('as-split-area[size="70"]').should('have.css', 'flex', '0 0 calc(-7.7px + 70%)');
13+
it('Display initial state', () => {
14+
checkSplitDirAndSizes('as-split', 'horizontal', W, H, GUTTER, ['calc(-3.3px + 30%)', 'calc(-7.7px + 70%)']);
15+
})
2016

21-
cy.get('.btns > .btn').click();
17+
it('Change direction', () => {
18+
cy.get('.btns > .btn').click();
19+
20+
checkSplitDirAndSizes('as-split', 'vertical', W, H, GUTTER, ['calc(-3.3px + 30%)', 'calc(-7.7px + 70%)']);
21+
})
22+
23+
it('Move gutter horizontally', () => {
24+
moveElement('as-split-gutter', 280, 0);
25+
26+
checkSplitDirAndSizes('as-split', 'horizontal', W, H, GUTTER, ['calc(-6.20566px + 56.4151%)', 'calc(-4.79434px + 43.5849%)']);
27+
})
28+
29+
it('Change direction & move gutter vertically', () => {
30+
cy.get('.btns > .btn').click();
31+
32+
moveElement('as-split-gutter', 0, 60);
2233

23-
cy.get('as-split').should('have.css', 'flex-direction', 'column');
24-
cy.get('as-split-area[size="30"]').should('have.css', 'width', `${ W }px`);
25-
cy.get('as-split-area[size="30"]').should('have.css', 'flex', '0 0 calc(-3.3px + 30%)');
26-
cy.get('as-split-area[size="70"]').should('have.css', 'width', `${ W }px`);
27-
cy.get('as-split-area[size="70"]').should('have.css', 'flex', '0 0 calc(-7.7px + 70%)');
28-
})
34+
checkSplitDirAndSizes('as-split', 'vertical', W, H, GUTTER, ['calc(-5.57586px + 50.6897%)', 'calc(-5.42414px + 49.3103%)']);
35+
})
36+
37+
it('Move gutter horizontally and move it back', () => {
38+
moveElement('as-split-gutter', 280, 0);
39+
40+
checkSplitDirAndSizes('as-split', 'horizontal', W, H, GUTTER, ['calc(-6.20566px + 56.4151%)', 'calc(-4.79434px + 43.5849%)']);
41+
42+
moveElement('as-split-gutter', -280, 0);
43+
44+
checkSplitDirAndSizes('as-split', 'horizontal', W, H, GUTTER, ['calc(-3.29513px + 29.9558%)', 'calc(-7.70487px + 70.0442%)']);
45+
})
2946
})
3047

48+
49+
function moveElement(element, x, y) {
50+
cy.get(`${ element }`)
51+
.trigger('mousedown', { which: 1, pageX: 0, pageY: 0 })
52+
.trigger('mousemove', { pageX: x, pageY: y });
53+
54+
cy.document().trigger('mouseup', { force: true });
55+
56+
}
57+
58+
function checkSplitDirAndSizes(el, dir, w, h, gutter, sizes) {
59+
const propFlexDir = (dir === 'horizontal') ? 'row' : 'column';
60+
cy.get(el).should('have.css', 'flex-direction', propFlexDir);
61+
62+
const propSize = (dir === 'horizontal') ? 'width' : 'height';
63+
cy.get(`${ el } as-split-gutter`).should('have.css', propSize, `${ gutter }px`);
64+
65+
const propSize2 = (propSize === 'width') ? 'height' : 'width';
66+
const propValue2 = (propSize === 'width') ? h : w;
67+
68+
cy.get(`${ el } as-split-area`)
69+
.should('have.length', sizes.length)
70+
.each(($li, index) => {
71+
cy.wrap($li).should('have.css', 'flex', `0 0 ${ sizes[index] }`);
72+
cy.wrap($li).should('have.css', propSize2, `${ propValue2 }px`);
73+
})
74+
}

‎projects/angular-split/src/lib/component/split.component.ts‎

Lines changed: 21 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -468,20 +468,8 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
468468
this.dragStartValues.sizePercentA = areaA.size;
469469
this.dragStartValues.sizePercentB = areaB.size;
470470

471-
let start: IPoint;
472-
if(startEvent instanceof MouseEvent) {
473-
start = {
474-
x: startEvent.pageX,
475-
y: startEvent.pageY,
476-
};
477-
}
478-
else if(startEvent instanceof TouchEvent) {
479-
start = {
480-
x: startEvent.touches[0].pageX,
481-
y: startEvent.touches[0].pageY,
482-
};
483-
}
484-
else {
471+
const start: IPoint = this.getPointFromEvent(startEvent);
472+
if(!start) {
485473
return;
486474
}
487475

@@ -502,26 +490,31 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
502490
if(!this.isDragging) {
503491
return;
504492
}
505-
506-
let end: IPoint;
507-
if(event instanceof MouseEvent) {
508-
end = {
509-
x: event.pageX,
510-
y: event.pageY,
511-
};
493+
const end: IPoint = this.getPointFromEvent(event);
494+
if(!end) {
495+
return;
512496
}
513-
else if(event instanceof TouchEvent) {
514-
end = {
497+
498+
this.draggingWithoutMove = false;
499+
this.drag(start, end, areaA, areaB);
500+
}
501+
502+
private getPointFromEvent(event: MouseEvent | TouchEvent): IPoint {
503+
// TouchEvent
504+
if(event instanceof TouchEvent) {
505+
return {
515506
x: event.touches[0].pageX,
516507
y: event.touches[0].pageY,
517508
};
518509
}
519-
else {
520-
return;
510+
// MouseEvent
511+
else if(event.pageX !== undefined && event.pageY !== undefined) {
512+
return {
513+
x: event.pageX,
514+
y: event.pageY,
515+
};
521516
}
522-
523-
this.draggingWithoutMove = false;
524-
this.drag(start, end, areaA, areaB);
517+
return null;
525518
}
526519

527520
private drag(start: IPoint, end: IPoint, areaA: IArea, areaB: IArea): void {

0 commit comments

Comments
 (0)