From 62b424e56a2352a53addb1c60f9681cdfd341835 Mon Sep 17 00:00:00 2001 From: Brandon Nguyen Date: Fri, 21 Jan 2022 13:45:46 -0800 Subject: [PATCH 1/5] Add keyboard accessibility --- .../src/lib/component/split.component.ts | 93 +++++++++++++++---- projects/angular-split/src/lib/utils.ts | 80 +++++++++++++++- .../simple-split/simple-split.component.ts | 8 +- 3 files changed, 163 insertions(+), 18 deletions(-) diff --git a/projects/angular-split/src/lib/component/split.component.ts b/projects/angular-split/src/lib/component/split.component.ts index d2d1a39e..b173ba00 100644 --- a/projects/angular-split/src/lib/component/split.component.ts +++ b/projects/angular-split/src/lib/component/split.component.ts @@ -19,7 +19,15 @@ import { import { Observable, Subscriber, Subject } from 'rxjs' import { debounceTime } from 'rxjs/operators' -import { IArea, IPoint, ISplitSnapshot, IAreaSnapshot, IOutputData, IOutputAreaSizes, IDefaultOptions } from '../interface' +import { + IArea, + IPoint, + ISplitSnapshot, + IAreaSnapshot, + IOutputData, + IOutputAreaSizes, + IDefaultOptions, +} from '../interface' import { SplitAreaDirective } from '../directive/split-area.directive' import { getInputPositiveNumber, @@ -32,8 +40,9 @@ import { isUserSizesValid, pointDeltaEquals, updateAreaSize, + getKeyboardEndpoint, } from '../utils' -import { ANGULAR_SPLIT_DEFAULT_OPTIONS} from '../angular-split-config.token' +import { ANGULAR_SPLIT_DEFAULT_OPTIONS } from '../angular-split-config.token' /** * angular-split @@ -71,17 +80,26 @@ import { ANGULAR_SPLIT_DEFAULT_OPTIONS} from '../angular-split-config.token' changeDetection: ChangeDetectionStrategy.OnPush, styleUrls: [`./split.component.scss`], template: ` - +
@@ -188,6 +206,8 @@ export class SplitComponent implements AfterViewInit, OnDestroy { @Input() gutterClickDeltaPx = 2 + @Input() gutterAriaLabel: string + get gutterDblClickDuration(): number { return this._gutterDblClickDuration } @@ -530,7 +550,28 @@ export class SplitComponent implements AfterViewInit, OnDestroy { } } - public startDragging(event: MouseEvent | TouchEvent, gutterOrder: number, gutterNum: number): void { + public startKeyboardDrag(event: KeyboardEvent, gutterOrder: number, gutterNum: number) { + if (this.disabled === true || this.isWaitingClear === true) { + return + } + + const endPoint = getKeyboardEndpoint(event, this.direction, this.gutterStep) + if (endPoint === null) { + return + } + this.endPoint = endPoint + this.startPoint = getPointFromEvent(event) + + event.preventDefault() + event.stopPropagation() + + this.setupForDragEvent(gutterOrder, gutterNum) + this.startDragging() + this.drag() + this.stopDragging() + } + + public startMouseDrag(event: MouseEvent | TouchEvent, gutterOrder: number, gutterNum: number): void { event.preventDefault() event.stopPropagation() @@ -539,6 +580,21 @@ export class SplitComponent implements AfterViewInit, OnDestroy { return } + this.setupForDragEvent(gutterOrder, gutterNum) + + this.dragListeners.push(this.renderer.listen('document', 'mouseup', this.stopDragging.bind(this))) + this.dragListeners.push(this.renderer.listen('document', 'touchend', this.stopDragging.bind(this))) + this.dragListeners.push(this.renderer.listen('document', 'touchcancel', this.stopDragging.bind(this))) + + this.ngZone.runOutsideAngular(() => { + this.dragListeners.push(this.renderer.listen('document', 'mousemove', this.mouseDragEvent.bind(this))) + this.dragListeners.push(this.renderer.listen('document', 'touchmove', this.mouseDragEvent.bind(this))) + }) + + this.startDragging() + } + + private setupForDragEvent(gutterOrder: number, gutterNum: number) { this.snapshot = { gutterNum, lastSteppedOffset: 0, @@ -580,23 +636,16 @@ export class SplitComponent implements AfterViewInit, OnDestroy { if (this.snapshot.areasBeforeGutter.length === 0 || this.snapshot.areasAfterGutter.length === 0) { return } + } - this.dragListeners.push(this.renderer.listen('document', 'mouseup', this.stopDragging.bind(this))) - this.dragListeners.push(this.renderer.listen('document', 'touchend', this.stopDragging.bind(this))) - this.dragListeners.push(this.renderer.listen('document', 'touchcancel', this.stopDragging.bind(this))) - - this.ngZone.runOutsideAngular(() => { - this.dragListeners.push(this.renderer.listen('document', 'mousemove', this.dragEvent.bind(this))) - this.dragListeners.push(this.renderer.listen('document', 'touchmove', this.dragEvent.bind(this))) - }) - + private startDragging() { this.displayedAreas.forEach((area) => area.component.lockEvents()) this.isDragging = true this.isWaitingInitialMove = true } - private dragEvent(event: MouseEvent | TouchEvent): void { + private mouseDragEvent(event: MouseEvent | TouchEvent): void { event.preventDefault() event.stopPropagation() @@ -615,6 +664,10 @@ export class SplitComponent implements AfterViewInit, OnDestroy { return } + this.drag() + } + + private drag() { if (this.isWaitingInitialMove) { if (this.startPoint.x !== this.endPoint.x || this.startPoint.y !== this.endPoint.y) { this.ngZone.run(() => { @@ -825,4 +878,12 @@ export class SplitComponent implements AfterViewInit, OnDestroy { } this.updateArea(comp, false, false) } + + public getAriaAreaSizeText(size: number | null): string { + if (!size) { + return null + } + + return size.toFixed(2) + ' ' + this.unit + } } diff --git a/projects/angular-split/src/lib/utils.ts b/projects/angular-split/src/lib/utils.ts index 3a45ffed..2d71e78d 100644 --- a/projects/angular-split/src/lib/utils.ts +++ b/projects/angular-split/src/lib/utils.ts @@ -2,7 +2,7 @@ import { ElementRef } from '@angular/core' import { IArea, IPoint, IAreaSnapshot, ISplitSideAbsorptionCapacity, IAreaAbsorptionCapacity } from './interface' -export function getPointFromEvent(event: MouseEvent | TouchEvent): IPoint { +export function getPointFromEvent(event: MouseEvent | TouchEvent | KeyboardEvent): IPoint { // TouchEvent if ((event).changedTouches !== undefined && (event).changedTouches.length > 0) { return { @@ -17,6 +17,14 @@ export function getPointFromEvent(event: MouseEvent | TouchEvent): IPoint { y: (event).clientY, } } + // KeyboardEvent + else if ((event).currentTarget !== undefined) { + const gutterEl = event.currentTarget as HTMLElement + return { + x: gutterEl.offsetLeft, + y: gutterEl.offsetTop, + } + } return null } @@ -24,6 +32,76 @@ export function pointDeltaEquals(lhs: IPoint, rhs: IPoint, deltaPx: number) { return Math.abs(lhs.x - rhs.x) <= deltaPx && Math.abs(lhs.y - rhs.y) <= deltaPx } +export function getKeyboardEndpoint( + event: KeyboardEvent, + direction: 'horizontal' | 'vertical', + gutterStep: number, +): IPoint | null { + // Return null if direction keys on the opposite axis were pressed + if (direction === 'horizontal') { + switch (event.key) { + case 'ArrowLeft': + case 'ArrowRight': + case 'PageUp': + case 'PageDown': + break + default: + return null + } + } + if (direction === 'vertical') { + switch (event.key) { + case 'ArrowUp': + case 'ArrowDown': + case 'PageUp': + case 'PageDown': + break + default: + return null + } + } + + const gutterEl = event.currentTarget as HTMLElement + const offset = event.key === 'PageUp' || event.key === 'PageDown' ? gutterStep * 10 : gutterStep + let offsetX = gutterEl.offsetLeft, + offsetY = gutterEl.offsetTop + switch (event.key) { + case 'ArrowLeft': + offsetX -= offset + break + case 'ArrowRight': + offsetX += offset + break + case 'ArrowUp': + offsetY -= offset + break + case 'ArrowDown': + offsetY += offset + break + case 'PageUp': + if (direction === 'vertical') { + offsetY -= offset + } else { + offsetX += offset + } + break + case 'PageDown': + if (direction === 'vertical') { + offsetY += offset + } else { + offsetX -= offset + } + break + default: + return null + } + + return { + x: offsetX, + y: offsetY, + } +} + export function getElementPixelSize(elRef: ElementRef, direction: 'horizontal' | 'vertical'): number { const rect = (elRef.nativeElement).getBoundingClientRect() diff --git a/src/app/examples/simple-split/simple-split.component.ts b/src/app/examples/simple-split/simple-split.component.ts index 60b91068..1b01ffed 100644 --- a/src/app/examples/simple-split/simple-split.component.ts +++ b/src/app/examples/simple-split/simple-split.component.ts @@ -25,7 +25,13 @@ import { AComponent } from '../../ui/components/AComponent'
Percent mode:
- +
Initial size: 30%
From 2c330d4b8038ac1a2cb206b8c75a168522539346 Mon Sep 17 00:00:00 2001 From: Brandon Nguyen Date: Fri, 21 Jan 2022 14:57:41 -0800 Subject: [PATCH 2/5] keyboard offset set to 50 --- .../angular-split/src/lib/component/split.component.scss | 1 + .../angular-split/src/lib/component/split.component.ts | 4 ++-- projects/angular-split/src/lib/utils.ts | 8 ++------ 3 files changed, 5 insertions(+), 8 deletions(-) diff --git a/projects/angular-split/src/lib/component/split.component.scss b/projects/angular-split/src/lib/component/split.component.scss index 451b5325..74f850a8 100644 --- a/projects/angular-split/src/lib/component/split.component.scss +++ b/projects/angular-split/src/lib/component/split.component.scss @@ -8,6 +8,7 @@ height: 100%; & > .as-split-gutter { + border: none; flex-grow: 0; flex-shrink: 0; background-color: #eeeeee; diff --git a/projects/angular-split/src/lib/component/split.component.ts b/projects/angular-split/src/lib/component/split.component.ts index b173ba00..1d0ac645 100644 --- a/projects/angular-split/src/lib/component/split.component.ts +++ b/projects/angular-split/src/lib/component/split.component.ts @@ -555,7 +555,7 @@ export class SplitComponent implements AfterViewInit, OnDestroy { return } - const endPoint = getKeyboardEndpoint(event, this.direction, this.gutterStep) + const endPoint = getKeyboardEndpoint(event, this.direction) if (endPoint === null) { return } @@ -884,6 +884,6 @@ export class SplitComponent implements AfterViewInit, OnDestroy { return null } - return size.toFixed(2) + ' ' + this.unit + return size.toFixed(0) + ' ' + this.unit } } diff --git a/projects/angular-split/src/lib/utils.ts b/projects/angular-split/src/lib/utils.ts index 2d71e78d..0ea95d8f 100644 --- a/projects/angular-split/src/lib/utils.ts +++ b/projects/angular-split/src/lib/utils.ts @@ -32,11 +32,7 @@ export function pointDeltaEquals(lhs: IPoint, rhs: IPoint, deltaPx: number) { return Math.abs(lhs.x - rhs.x) <= deltaPx && Math.abs(lhs.y - rhs.y) <= deltaPx } -export function getKeyboardEndpoint( - event: KeyboardEvent, - direction: 'horizontal' | 'vertical', - gutterStep: number, -): IPoint | null { +export function getKeyboardEndpoint(event: KeyboardEvent, direction: 'horizontal' | 'vertical'): IPoint | null { // Return null if direction keys on the opposite axis were pressed if (direction === 'horizontal') { switch (event.key) { @@ -62,7 +58,7 @@ export function getKeyboardEndpoint( } const gutterEl = event.currentTarget as HTMLElement - const offset = event.key === 'PageUp' || event.key === 'PageDown' ? gutterStep * 10 : gutterStep + const offset = event.key === 'PageUp' || event.key === 'PageDown' ? 50 * 10 : 50 let offsetX = gutterEl.offsetLeft, offsetY = gutterEl.offsetTop switch (event.key) { From 6759080473dad9baade4935189c85bc8c26092a7 Mon Sep 17 00:00:00 2001 From: Brandon Nguyen Date: Mon, 24 Jan 2022 13:35:04 -0800 Subject: [PATCH 3/5] Cypress tests for keyboard functionality --- cypress/integration/1.simple.spec.js | 33 +++++++++- cypress/integration/2.minmax.spec.js | 91 +++++++++++++++++++++++++++- cypress/support/splitUtils.js | 17 ++++++ 3 files changed, 139 insertions(+), 2 deletions(-) diff --git a/cypress/integration/1.simple.spec.js b/cypress/integration/1.simple.spec.js index 3ef10ca2..d7c8ce95 100644 --- a/cypress/integration/1.simple.spec.js +++ b/cypress/integration/1.simple.spec.js @@ -1,6 +1,6 @@ /// -import { moveGutter, checkSplitDirAndSizes } from '../support/splitUtils' +import { moveGutter, checkSplitDirAndSizes, moveGutterByKeyboard, checkGutterAriaLabel } from '../support/splitUtils' context('Simple split example page tests', () => { const W = 1076 @@ -14,6 +14,7 @@ context('Simple split example page tests', () => { it('Display initial state', () => { checkSplitDirAndSizes('.ex-percent > as-split', 'horizontal', W, H, GUTTER, [319.5, 745.5]) checkSplitDirAndSizes('.ex-pixel > as-split', 'horizontal', W, H, GUTTER, [120, 774, 160]) + checkGutterAriaLabel('.ex-percent .as-split-gutter', 0, 'adjustable divider between two views') }) it('Change direction', () => { @@ -75,4 +76,34 @@ context('Simple split example page tests', () => { checkSplitDirAndSizes('.ex-percent > as-split', 'horizontal', W, H, GUTTER, [1065, 0]) checkSplitDirAndSizes('.ex-pixel > as-split', 'horizontal', W, H, GUTTER, [278, 776, 0]) }) + + it('Move gutter horizontally by using keyboard', () => { + moveGutterByKeyboard('.ex-percent .as-split-gutter', 0, 1, 'leftarrow') + checkSplitDirAndSizes('.ex-percent > as-split', 'horizontal', W, H, GUTTER, [269.5, 795.5]) + + moveGutterByKeyboard('.ex-percent .as-split-gutter', 0, 1, 'rightarrow') + checkSplitDirAndSizes('.ex-percent > as-split', 'horizontal', W, H, GUTTER, [319.5, 745.5]) + + moveGutterByKeyboard('.ex-percent .as-split-gutter', 0, 1, 'pagedown') + checkSplitDirAndSizes('.ex-percent > as-split', 'horizontal', W, H, GUTTER, [0, 1065]) + + moveGutterByKeyboard('.ex-percent .as-split-gutter', 0, 1, 'pageup') + checkSplitDirAndSizes('.ex-percent > as-split', 'horizontal', W, H, GUTTER, [500, 565]) + }) + + it('Move gutter vertically by using keyboard', () => { + cy.get('.btns > .btn').click() + + moveGutterByKeyboard('.ex-percent .as-split-gutter', 0, 1, 'downarrow') + checkSplitDirAndSizes('.ex-percent > as-split', 'vertical', W, H, GUTTER, [136.703125, 152.296875]) + + moveGutterByKeyboard('.ex-percent .as-split-gutter', 0, 1, 'uparrow') + checkSplitDirAndSizes('.ex-percent > as-split', 'vertical', W, H, GUTTER, [86.703125, 202.28125]) + + moveGutterByKeyboard('.ex-percent .as-split-gutter', 0, 1, 'pagedown') + checkSplitDirAndSizes('.ex-percent > as-split', 'vertical', W, H, GUTTER, [289, 0]) + + moveGutterByKeyboard('.ex-percent .as-split-gutter', 0, 1, 'pageup') + checkSplitDirAndSizes('.ex-percent > as-split', 'vertical', W, H, GUTTER, [0, 289]) + }) }) diff --git a/cypress/integration/2.minmax.spec.js b/cypress/integration/2.minmax.spec.js index 35936662..4cb9d446 100644 --- a/cypress/integration/2.minmax.spec.js +++ b/cypress/integration/2.minmax.spec.js @@ -1,6 +1,6 @@ /// -import { moveGutter, checkSplitDirAndSizes } from '../support/splitUtils' +import { moveGutter, checkSplitDirAndSizes, moveGutterByKeyboard } from '../support/splitUtils' context('Min & max splits example page tests', () => { const W = 1070 @@ -159,6 +159,95 @@ context('Min & max splits example page tests', () => { it('Move gutters having restrictMove on [PERCENT MODE]', () => {}) it('Move gutters having restrictMove on [PIXEL MODE]', () => {}) + + it('Move gutters having restrictMove off by keyboard [PERCENT MODE]', () => { + moveGutterByKeyboard('.ex-percent > as-split > .as-split-gutter', 0, 1, 'leftarrow') + checkSplitDirAndSizes('.ex-percent > as-split', 'horizontal', W, H, GUTTER, [254.796875, 456.390625, 304.796875]) + + checkAreasClasses('.ex-percent > as-split > .as-split-area', [ + { haveTo: [], notHaveTo: ['as-min', 'as-max'] }, + { haveTo: [], notHaveTo: ['as-min', 'as-max'] }, + { haveTo: [], notHaveTo: ['as-min', 'as-max'] }, + ]) + + moveGutterByKeyboard('.ex-percent > as-split > .as-split-gutter', 0, 1, 'pagedown') + checkSplitDirAndSizes('.ex-percent > as-split', 'horizontal', W, H, GUTTER, [203.1875, 508, 304.796875]) + + checkAreasClasses('.ex-percent > as-split > .as-split-area', [ + { haveTo: ['as-min'], notHaveTo: ['as-max'] }, + { haveTo: ['as-max'], notHaveTo: ['as-min'] }, + { haveTo: [], notHaveTo: ['as-min', 'as-max'] }, + ]) + + moveGutterByKeyboard('.ex-percent > as-split > .as-split-gutter', 0, 1, 'pageup') + checkSplitDirAndSizes('.ex-percent > as-split', 'horizontal', W, H, GUTTER, [304.796875, 406.390625, 304.796875]) + + checkAreasClasses('.ex-percent > as-split > .as-split-area', [ + { haveTo: ['as-max'], notHaveTo: ['as-min'] }, + { haveTo: [], notHaveTo: ['as-min', 'as-max'] }, + { haveTo: [], notHaveTo: ['as-min', 'as-max'] }, + ]) + + moveGutterByKeyboard('.ex-percent > as-split > .as-split-gutter', 1, 1, 'leftarrow') + checkSplitDirAndSizes('.ex-percent > as-split', 'horizontal', W, H, GUTTER, [304.796875, 356.390625, 354.796875]) + + checkAreasClasses('.ex-percent > as-split > .as-split-area', [ + { haveTo: ['as-max'], notHaveTo: ['as-min'] }, + { haveTo: [], notHaveTo: ['as-min', 'as-max'] }, + { haveTo: [], notHaveTo: ['as-min', 'as-max'] }, + ]) + + moveGutterByKeyboard('.ex-percent > as-split > .as-split-gutter', 1, 1, 'pagedown') + checkSplitDirAndSizes('.ex-percent > as-split', 'horizontal', W, H, GUTTER, [203.1875, 304.796875, 508]) + + checkAreasClasses('.ex-percent > as-split > .as-split-area', [ + { haveTo: ['as-min'], notHaveTo: ['as-max'] }, + { haveTo: ['as-min'], notHaveTo: ['as-max'] }, + { haveTo: ['as-max'], notHaveTo: ['as-min'] }, + ]) + }) + + it('Move gutters having restrictMove off by keyboard [PIXEL MODE]', () => { + moveGutterByKeyboard('.ex-pixel > as-split > .as-split-gutter', 0, 1, 'leftarrow') + checkSplitDirAndSizes('.ex-pixel > as-split', 'horizontal', W, H, GUTTER, [150, 436, 150, 250]) + + checkAreasClasses('.ex-pixel > as-split > .as-split-area', [ + { haveTo: [], notHaveTo: ['as-min', 'as-max'] }, + { haveTo: [], notHaveTo: ['as-min', 'as-max'] }, + { haveTo: ['as-min', 'as-max'], notHaveTo: [] }, + { haveTo: ['as-min'], notHaveTo: ['as-max'] } + ]) + + moveGutterByKeyboard('.ex-pixel > as-split > .as-split-gutter', 0, 1, 'pageup') + checkSplitDirAndSizes('.ex-pixel > as-split', 'horizontal', W, H, GUTTER, [200, 386, 150, 250]) + + checkAreasClasses('.ex-pixel > as-split > .as-split-area', [ + { haveTo: ['as-max'], notHaveTo: ['as-min'] }, + { haveTo: [], notHaveTo: ['as-min', 'as-max'] }, + { haveTo: ['as-min', 'as-max'], notHaveTo: [] }, + { haveTo: ['as-min'], notHaveTo: ['as-max'] } + ]) + + moveGutterByKeyboard('.ex-pixel > as-split > .as-split-gutter', 1, 2, 'leftarrow') + checkSplitDirAndSizes('.ex-pixel > as-split', 'horizontal', W, H, GUTTER, [200, 286, 150, 350]) + + checkAreasClasses('.ex-pixel > as-split > .as-split-area', [ + { haveTo: ['as-max'], notHaveTo: ['as-min'] }, + { haveTo: [], notHaveTo: ['as-min', 'as-max'] }, + { haveTo: ['as-min', 'as-max'], notHaveTo: [] }, + { haveTo: [], notHaveTo: ['as-min', 'as-max'] } + ]) + + moveGutterByKeyboard('.ex-pixel > as-split > .as-split-gutter', 2, 1, 'pageup') + checkSplitDirAndSizes('.ex-pixel > as-split', 'horizontal', W, H, GUTTER, [200, 386, 150, 250]) + + checkAreasClasses('.ex-pixel > as-split > .as-split-area', [ + { haveTo: ['as-max'], notHaveTo: ['as-min'] }, + { haveTo: [], notHaveTo: ['as-min', 'as-max'] }, + { haveTo: ['as-min', 'as-max'], notHaveTo: [] }, + { haveTo: ['as-min'], notHaveTo: ['as-max'] } + ]) + }) }) function checkAreasClasses(sel, all) { diff --git a/cypress/support/splitUtils.js b/cypress/support/splitUtils.js index 92cb3ede..ac5779ab 100644 --- a/cypress/support/splitUtils.js +++ b/cypress/support/splitUtils.js @@ -13,6 +13,23 @@ export function moveGutter(gutters, num, x, y) { cy.wait(10) } +export function moveGutterByKeyboard(gutters, num, keyPressTimes, keySequence) { + for (let i = 0; i < keyPressTimes; i++) { + cy.get(gutters) + .eq(num) + .focus() + .type(`{${keySequence}}`) + cy.wait(10) + } +} + +export function checkGutterAriaLabel(gutters, num, ariaLabel) { + cy.get(gutters) + .eq(num) + .should('have.attr', 'aria-label') + .and('equal', ariaLabel) +} + ////////////////////////////////////////// export function checkSplitDirAndCalcSizes(el, dir, w, h, gutter, sizes) { From cf5ac3dad4d8cd86a7a5ad057330b767cf503a93 Mon Sep 17 00:00:00 2001 From: Brandon Nguyen Date: Mon, 24 Jan 2022 15:13:15 -0800 Subject: [PATCH 4/5] Update tests --- cypress/integration/1.simple.spec.js | 67 +++++++++++++++---- cypress/integration/2.minmax.spec.js | 46 ++++++------- cypress/integration/3.nested.spec.js | 22 +++--- cypress/integration/4.sync.spec.js | 14 ++-- cypress/integration/5.style.spec.js | 2 +- cypress/integration/7.click.spec.js | 8 +-- cypress/integration/9.geek.spec.js | 58 ++++++++-------- cypress/support/splitUtils.js | 21 +++++- .../src/lib/component/split.component.ts | 2 +- 9 files changed, 148 insertions(+), 92 deletions(-) diff --git a/cypress/integration/1.simple.spec.js b/cypress/integration/1.simple.spec.js index d7c8ce95..f9d04798 100644 --- a/cypress/integration/1.simple.spec.js +++ b/cypress/integration/1.simple.spec.js @@ -1,6 +1,6 @@ /// -import { moveGutter, checkSplitDirAndSizes, moveGutterByKeyboard, checkGutterAriaLabel } from '../support/splitUtils' +import { moveGutterByMouse, checkSplitDirAndSizes, moveGutterByKeyboard, checkGutterAriaLabel, checkGutterAriaValueTexts } from '../support/splitUtils' context('Simple split example page tests', () => { const W = 1076 @@ -15,6 +15,7 @@ context('Simple split example page tests', () => { checkSplitDirAndSizes('.ex-percent > as-split', 'horizontal', W, H, GUTTER, [319.5, 745.5]) checkSplitDirAndSizes('.ex-pixel > as-split', 'horizontal', W, H, GUTTER, [120, 774, 160]) checkGutterAriaLabel('.ex-percent .as-split-gutter', 0, 'adjustable divider between two views') + checkGutterAriaValueTexts('.ex-percent .as-split-gutter', ['30 percent']) }) it('Change direction', () => { @@ -25,51 +26,51 @@ context('Simple split example page tests', () => { }) it('Move gutter horizontally', () => { - moveGutter('.ex-percent .as-split-gutter', 0, 280, 0) + moveGutterByMouse('.ex-percent .as-split-gutter', 0, 280, 0) checkSplitDirAndSizes('.ex-percent > as-split', 'horizontal', W, H, GUTTER, [599.5, 465.5]) - moveGutter('.ex-pixel .as-split-gutter', 0, 280, 0) + moveGutterByMouse('.ex-pixel .as-split-gutter', 0, 280, 0) checkSplitDirAndSizes('.ex-pixel > as-split', 'horizontal', W, H, GUTTER, [400, 494, 160]) }) it('Change direction & move gutter vertically', () => { cy.get('.btns > .btn').click() - moveGutter('.ex-percent .as-split-gutter', 0, 0, 60) + moveGutterByMouse('.ex-percent .as-split-gutter', 0, 0, 60) checkSplitDirAndSizes('.ex-percent > as-split', 'vertical', W, H, GUTTER, [146.6875, 142.296875]) - moveGutter('.ex-pixel .as-split-gutter', 0, 0, 60) + moveGutterByMouse('.ex-pixel .as-split-gutter', 0, 0, 60) checkSplitDirAndSizes('.ex-pixel > as-split', 'vertical', W, H, GUTTER, [180, 0, 100]) }) it('Move gutter horizontally and move it back', () => { - moveGutter('.ex-percent .as-split-gutter', 0, 280, 0) + moveGutterByMouse('.ex-percent .as-split-gutter', 0, 280, 0) checkSplitDirAndSizes('.ex-percent > as-split', 'horizontal', W, H, GUTTER, [599.5, 465.5]) - moveGutter('.ex-percent .as-split-gutter', 0, -280, 0) + moveGutterByMouse('.ex-percent .as-split-gutter', 0, -280, 0) checkSplitDirAndSizes('.ex-percent > as-split', 'horizontal', W, H, GUTTER, [319.5, 745.5]) - moveGutter('.ex-pixel .as-split-gutter', 0, 280, 0) + moveGutterByMouse('.ex-pixel .as-split-gutter', 0, 280, 0) checkSplitDirAndSizes('.ex-pixel > as-split', 'horizontal', W, H, GUTTER, [400, 494, 160]) - moveGutter('.ex-pixel .as-split-gutter', 0, -280, 0) + moveGutterByMouse('.ex-pixel .as-split-gutter', 0, -280, 0) checkSplitDirAndSizes('.ex-pixel > as-split', 'horizontal', W, H, GUTTER, [120, 774, 160]) }) it('Move gutter horizontally to max, change direction', () => { - moveGutter('.ex-percent .as-split-gutter', 0, -1000, 0) + moveGutterByMouse('.ex-percent .as-split-gutter', 0, -1000, 0) checkSplitDirAndSizes('.ex-percent > as-split', 'horizontal', W, H, GUTTER, [0, 1065]) - moveGutter('.ex-pixel .as-split-gutter', 0, -1000, 0) + moveGutterByMouse('.ex-pixel .as-split-gutter', 0, -1000, 0) checkSplitDirAndSizes('.ex-pixel > as-split', 'horizontal', W, H, GUTTER, [0, 894, 160]) cy.get('.btns > .btn').click() checkSplitDirAndSizes('.ex-percent > as-split', 'vertical', W, H, GUTTER, [0, 289]) - moveGutter('.ex-percent .as-split-gutter', 0, 0, 1000) + moveGutterByMouse('.ex-percent .as-split-gutter', 0, 0, 1000) checkSplitDirAndSizes('.ex-pixel > as-split', 'vertical', W, H, GUTTER, [0, 118, 160]) - moveGutter('.ex-pixel .as-split-gutter', 0, 0, 1000) + moveGutterByMouse('.ex-pixel .as-split-gutter', 0, 0, 1000) cy.get('.btns > .btn').click() @@ -80,15 +81,35 @@ context('Simple split example page tests', () => { it('Move gutter horizontally by using keyboard', () => { moveGutterByKeyboard('.ex-percent .as-split-gutter', 0, 1, 'leftarrow') checkSplitDirAndSizes('.ex-percent > as-split', 'horizontal', W, H, GUTTER, [269.5, 795.5]) + checkGutterAriaValueTexts('.ex-percent .as-split-gutter', ['25 percent']) moveGutterByKeyboard('.ex-percent .as-split-gutter', 0, 1, 'rightarrow') checkSplitDirAndSizes('.ex-percent > as-split', 'horizontal', W, H, GUTTER, [319.5, 745.5]) + checkGutterAriaValueTexts('.ex-percent .as-split-gutter', ['30 percent']) moveGutterByKeyboard('.ex-percent .as-split-gutter', 0, 1, 'pagedown') checkSplitDirAndSizes('.ex-percent > as-split', 'horizontal', W, H, GUTTER, [0, 1065]) + checkGutterAriaValueTexts('.ex-percent .as-split-gutter', ['0 percent']) moveGutterByKeyboard('.ex-percent .as-split-gutter', 0, 1, 'pageup') checkSplitDirAndSizes('.ex-percent > as-split', 'horizontal', W, H, GUTTER, [500, 565]) + checkGutterAriaValueTexts('.ex-percent .as-split-gutter', ['47 percent']) + + moveGutterByKeyboard('.ex-pixel .as-split-gutter', 0, 1, 'leftarrow') + checkSplitDirAndSizes('.ex-pixel > as-split', 'horizontal', W, H, GUTTER, [70, 824, 160]) + checkGutterAriaValueTexts('.ex-pixel .as-split-gutter', ['70 pixel', null]) + + moveGutterByKeyboard('.ex-pixel .as-split-gutter', 0, 1, 'rightarrow') + checkSplitDirAndSizes('.ex-pixel > as-split', 'horizontal', W, H, GUTTER, [120, 774, 160]) + checkGutterAriaValueTexts('.ex-pixel .as-split-gutter', ['120 pixel', null]) + + moveGutterByKeyboard('.ex-pixel .as-split-gutter', 0, 1, 'pageup') + checkSplitDirAndSizes('.ex-pixel > as-split', 'horizontal', W, H, GUTTER, [620, 274, 160]) + checkGutterAriaValueTexts('.ex-pixel .as-split-gutter', ['620 pixel', null]) + + moveGutterByKeyboard('.ex-pixel .as-split-gutter', 0, 1, 'pagedown') + checkSplitDirAndSizes('.ex-pixel > as-split', 'horizontal', W, H, GUTTER, [120, 774, 160]) + checkGutterAriaValueTexts('.ex-pixel .as-split-gutter', ['120 pixel', null]) }) it('Move gutter vertically by using keyboard', () => { @@ -96,14 +117,34 @@ context('Simple split example page tests', () => { moveGutterByKeyboard('.ex-percent .as-split-gutter', 0, 1, 'downarrow') checkSplitDirAndSizes('.ex-percent > as-split', 'vertical', W, H, GUTTER, [136.703125, 152.296875]) + checkGutterAriaValueTexts('.ex-percent .as-split-gutter', ['47 percent']) moveGutterByKeyboard('.ex-percent .as-split-gutter', 0, 1, 'uparrow') checkSplitDirAndSizes('.ex-percent > as-split', 'vertical', W, H, GUTTER, [86.703125, 202.28125]) + checkGutterAriaValueTexts('.ex-percent .as-split-gutter', ['30 percent']) moveGutterByKeyboard('.ex-percent .as-split-gutter', 0, 1, 'pagedown') checkSplitDirAndSizes('.ex-percent > as-split', 'vertical', W, H, GUTTER, [289, 0]) + checkGutterAriaValueTexts('.ex-percent .as-split-gutter', ['100 percent']) moveGutterByKeyboard('.ex-percent .as-split-gutter', 0, 1, 'pageup') checkSplitDirAndSizes('.ex-percent > as-split', 'vertical', W, H, GUTTER, [0, 289]) + checkGutterAriaValueTexts('.ex-percent .as-split-gutter', ['0 percent']) + + moveGutterByKeyboard('.ex-pixel .as-split-gutter', 0, 1, 'downarrow') + checkSplitDirAndSizes('.ex-pixel > as-split', 'vertical', W, H, GUTTER, [170, 0, 110]) + checkGutterAriaValueTexts('.ex-pixel .as-split-gutter', ['170 pixel', null]) + + moveGutterByKeyboard('.ex-pixel .as-split-gutter', 0, 1, 'uparrow') + checkSplitDirAndSizes('.ex-pixel > as-split', 'vertical', W, H, GUTTER, [120, 48, 110]) + checkGutterAriaValueTexts('.ex-pixel .as-split-gutter', ['120 pixel', null]) + + moveGutterByKeyboard('.ex-pixel .as-split-gutter', 0, 1, 'pageup') + checkSplitDirAndSizes('.ex-pixel > as-split', 'vertical', W, H, GUTTER, [0, 168, 110]) + checkGutterAriaValueTexts('.ex-pixel .as-split-gutter', ['0 pixel', null]) + + moveGutterByKeyboard('.ex-pixel .as-split-gutter', 0, 1, 'pagedown') + checkSplitDirAndSizes('.ex-pixel > as-split', 'vertical', W, H, GUTTER, [278, 0, 0]) + checkGutterAriaValueTexts('.ex-pixel .as-split-gutter', ['278 pixel', null]) }) }) diff --git a/cypress/integration/2.minmax.spec.js b/cypress/integration/2.minmax.spec.js index 4cb9d446..62d2a9d2 100644 --- a/cypress/integration/2.minmax.spec.js +++ b/cypress/integration/2.minmax.spec.js @@ -1,6 +1,6 @@ /// -import { moveGutter, checkSplitDirAndSizes, moveGutterByKeyboard } from '../support/splitUtils' +import { moveGutterByMouse, checkSplitDirAndSizes, moveGutterByKeyboard, checkGutterAriaValueTexts } from '../support/splitUtils' context('Min & max splits example page tests', () => { const W = 1070 @@ -31,7 +31,7 @@ context('Min & max splits example page tests', () => { }) it('Move gutters having restrictMove off [PERCENT MODE]', () => { - moveGutter('.ex-percent > as-split > .as-split-gutter', 0, 200, 0) + moveGutterByMouse('.ex-percent > as-split > .as-split-gutter', 0, 200, 0) checkSplitDirAndSizes('.ex-percent > as-split', 'horizontal', W, H, GUTTER, [304.796875, 406.390625, 304.796875]) checkAreasClasses('.ex-percent > as-split > .as-split-area', [ @@ -40,7 +40,7 @@ context('Min & max splits example page tests', () => { { haveTo: [], notHaveTo: ['as-min', 'as-max'] }, ]) - moveGutter('.ex-percent > as-split > .as-split-gutter', 0, -100, 0) + moveGutterByMouse('.ex-percent > as-split > .as-split-gutter', 0, -100, 0) checkSplitDirAndSizes('.ex-percent > as-split', 'horizontal', W, H, GUTTER, [204.796875, 506.390625, 304.796875]) checkAreasClasses('.ex-percent > as-split > .as-split-area', [ @@ -49,7 +49,7 @@ context('Min & max splits example page tests', () => { { haveTo: [], notHaveTo: ['as-min', 'as-max'] }, ]) - moveGutter('.ex-percent > as-split > .as-split-gutter', 0, -100, 0) + moveGutterByMouse('.ex-percent > as-split > .as-split-gutter', 0, -100, 0) checkSplitDirAndSizes('.ex-percent > as-split', 'horizontal', W, H, GUTTER, [203.1875, 508, 304.796875]) checkAreasClasses('.ex-percent > as-split > .as-split-area', [ @@ -58,7 +58,7 @@ context('Min & max splits example page tests', () => { { haveTo: [], notHaveTo: ['as-min', 'as-max'] }, ]) - moveGutter('.ex-percent > as-split > .as-split-gutter', 1, 100, 0) + moveGutterByMouse('.ex-percent > as-split > .as-split-gutter', 1, 100, 0) checkSplitDirAndSizes('.ex-percent > as-split', 'horizontal', W, H, GUTTER, [303.203125, 508, 204.796875]) checkAreasClasses('.ex-percent > as-split > .as-split-area', [ @@ -67,7 +67,7 @@ context('Min & max splits example page tests', () => { { haveTo: [], notHaveTo: ['as-min', 'as-max'] }, ]) - moveGutter('.ex-percent > as-split > .as-split-gutter', 1, -100, 0) + moveGutterByMouse('.ex-percent > as-split > .as-split-gutter', 1, -100, 0) checkSplitDirAndSizes('.ex-percent > as-split', 'horizontal', W, H, GUTTER, [303.203125, 408, 304.796875]) checkAreasClasses('.ex-percent > as-split > .as-split-area', [ @@ -76,7 +76,7 @@ context('Min & max splits example page tests', () => { { haveTo: [], notHaveTo: ['as-min', 'as-max'] }, ]) - moveGutter('.ex-percent > as-split > .as-split-gutter', 1, -100, 0) + moveGutterByMouse('.ex-percent > as-split > .as-split-gutter', 1, -100, 0) checkSplitDirAndSizes('.ex-percent > as-split', 'horizontal', W, H, GUTTER, [303.203125, 308, 404.796875]) checkAreasClasses('.ex-percent > as-split > .as-split-area', [ @@ -85,7 +85,7 @@ context('Min & max splits example page tests', () => { { haveTo: [], notHaveTo: ['as-min', 'as-max'] }, ]) - moveGutter('.ex-percent > as-split > .as-split-gutter', 1, -100, 0) + moveGutterByMouse('.ex-percent > as-split > .as-split-gutter', 1, -100, 0) checkSplitDirAndSizes('.ex-percent > as-split', 'horizontal', W, H, GUTTER, [206.390625, 304.796875, 504.796875]) checkAreasClasses('.ex-percent > as-split > .as-split-area', [ @@ -94,7 +94,7 @@ context('Min & max splits example page tests', () => { { haveTo: [], notHaveTo: ['as-min', 'as-max'] }, ]) - moveGutter('.ex-percent > as-split > .as-split-gutter', 1, -100, 0) + moveGutterByMouse('.ex-percent > as-split > .as-split-gutter', 1, -100, 0) checkSplitDirAndSizes('.ex-percent > as-split', 'horizontal', W, H, GUTTER, [203.1875, 304.796875, 508]) checkAreasClasses('.ex-percent > as-split > .as-split-area', [ @@ -105,7 +105,7 @@ context('Min & max splits example page tests', () => { }) it('Move gutters having restrictMove off [PIXEL MODE]', () => { - moveGutter('.ex-pixel > as-split > .as-split-gutter', 0, 200, 0) + moveGutterByMouse('.ex-pixel > as-split > .as-split-gutter', 0, 200, 0) checkSplitDirAndSizes('.ex-pixel > as-split', 'horizontal', W, H, GUTTER, [200, 386, 150, 250]) checkAreasClasses('.ex-pixel > as-split > .as-split-area', [ @@ -115,7 +115,7 @@ context('Min & max splits example page tests', () => { { haveTo: ['as-min'], notHaveTo: ['as-max'] }, ]) - moveGutter('.ex-pixel > as-split > .as-split-gutter', 0, -100, 0) + moveGutterByMouse('.ex-pixel > as-split > .as-split-gutter', 0, -100, 0) checkSplitDirAndSizes('.ex-pixel > as-split', 'horizontal', W, H, GUTTER, [100, 486, 150, 250]) checkAreasClasses('.ex-pixel > as-split > .as-split-area', [ @@ -125,7 +125,7 @@ context('Min & max splits example page tests', () => { { haveTo: ['as-min'], notHaveTo: ['as-max'] }, ]) - moveGutter('.ex-pixel > as-split > .as-split-gutter', 1, 100, 0) + moveGutterByMouse('.ex-pixel > as-split > .as-split-gutter', 1, 100, 0) checkSplitDirAndSizes('.ex-pixel > as-split', 'horizontal', W, H, GUTTER, [100, 486, 150, 250]) checkAreasClasses('.ex-pixel > as-split > .as-split-area', [ @@ -135,7 +135,7 @@ context('Min & max splits example page tests', () => { { haveTo: ['as-min'], notHaveTo: ['as-max'] }, ]) - moveGutter('.ex-pixel > as-split > .as-split-gutter', 1, -100, 0) + moveGutterByMouse('.ex-pixel > as-split > .as-split-gutter', 1, -100, 0) checkSplitDirAndSizes('.ex-pixel > as-split', 'horizontal', W, H, GUTTER, [100, 386, 150, 350]) checkAreasClasses('.ex-pixel > as-split > .as-split-area', [ @@ -145,7 +145,7 @@ context('Min & max splits example page tests', () => { { haveTo: [], notHaveTo: ['as-min', 'as-max'] }, ]) - moveGutter('.ex-pixel > as-split > .as-split-gutter', 2, -100, 0) + moveGutterByMouse('.ex-pixel > as-split > .as-split-gutter', 2, -100, 0) checkSplitDirAndSizes('.ex-pixel > as-split', 'horizontal', W, H, GUTTER, [100, 336, 150, 400]) checkAreasClasses('.ex-pixel > as-split > .as-split-area', [ @@ -163,90 +163,90 @@ context('Min & max splits example page tests', () => { it('Move gutters having restrictMove off by keyboard [PERCENT MODE]', () => { moveGutterByKeyboard('.ex-percent > as-split > .as-split-gutter', 0, 1, 'leftarrow') checkSplitDirAndSizes('.ex-percent > as-split', 'horizontal', W, H, GUTTER, [254.796875, 456.390625, 304.796875]) - checkAreasClasses('.ex-percent > as-split > .as-split-area', [ { haveTo: [], notHaveTo: ['as-min', 'as-max'] }, { haveTo: [], notHaveTo: ['as-min', 'as-max'] }, { haveTo: [], notHaveTo: ['as-min', 'as-max'] }, ]) + checkGutterAriaValueTexts('.ex-percent > as-split > .as-split-gutter', ['25 percent', '45 percent']) moveGutterByKeyboard('.ex-percent > as-split > .as-split-gutter', 0, 1, 'pagedown') checkSplitDirAndSizes('.ex-percent > as-split', 'horizontal', W, H, GUTTER, [203.1875, 508, 304.796875]) - checkAreasClasses('.ex-percent > as-split > .as-split-area', [ { haveTo: ['as-min'], notHaveTo: ['as-max'] }, { haveTo: ['as-max'], notHaveTo: ['as-min'] }, { haveTo: [], notHaveTo: ['as-min', 'as-max'] }, ]) + checkGutterAriaValueTexts('.ex-percent > as-split > .as-split-gutter', ['20 percent', '50 percent']) moveGutterByKeyboard('.ex-percent > as-split > .as-split-gutter', 0, 1, 'pageup') checkSplitDirAndSizes('.ex-percent > as-split', 'horizontal', W, H, GUTTER, [304.796875, 406.390625, 304.796875]) - checkAreasClasses('.ex-percent > as-split > .as-split-area', [ { haveTo: ['as-max'], notHaveTo: ['as-min'] }, { haveTo: [], notHaveTo: ['as-min', 'as-max'] }, { haveTo: [], notHaveTo: ['as-min', 'as-max'] }, ]) + checkGutterAriaValueTexts('.ex-percent > as-split > .as-split-gutter', ['30 percent', '40 percent']) moveGutterByKeyboard('.ex-percent > as-split > .as-split-gutter', 1, 1, 'leftarrow') checkSplitDirAndSizes('.ex-percent > as-split', 'horizontal', W, H, GUTTER, [304.796875, 356.390625, 354.796875]) - checkAreasClasses('.ex-percent > as-split > .as-split-area', [ { haveTo: ['as-max'], notHaveTo: ['as-min'] }, { haveTo: [], notHaveTo: ['as-min', 'as-max'] }, { haveTo: [], notHaveTo: ['as-min', 'as-max'] }, ]) + checkGutterAriaValueTexts('.ex-percent > as-split > .as-split-gutter', ['30 percent', '35 percent']) moveGutterByKeyboard('.ex-percent > as-split > .as-split-gutter', 1, 1, 'pagedown') checkSplitDirAndSizes('.ex-percent > as-split', 'horizontal', W, H, GUTTER, [203.1875, 304.796875, 508]) - checkAreasClasses('.ex-percent > as-split > .as-split-area', [ { haveTo: ['as-min'], notHaveTo: ['as-max'] }, { haveTo: ['as-min'], notHaveTo: ['as-max'] }, { haveTo: ['as-max'], notHaveTo: ['as-min'] }, ]) + checkGutterAriaValueTexts('.ex-percent > as-split > .as-split-gutter', ['20 percent', '30 percent']) }) it('Move gutters having restrictMove off by keyboard [PIXEL MODE]', () => { moveGutterByKeyboard('.ex-pixel > as-split > .as-split-gutter', 0, 1, 'leftarrow') checkSplitDirAndSizes('.ex-pixel > as-split', 'horizontal', W, H, GUTTER, [150, 436, 150, 250]) - checkAreasClasses('.ex-pixel > as-split > .as-split-area', [ { haveTo: [], notHaveTo: ['as-min', 'as-max'] }, { haveTo: [], notHaveTo: ['as-min', 'as-max'] }, { haveTo: ['as-min', 'as-max'], notHaveTo: [] }, { haveTo: ['as-min'], notHaveTo: ['as-max'] } ]) + checkGutterAriaValueTexts('.ex-pixel > as-split > .as-split-gutter', ['150 pixel', null, '150 pixel']) moveGutterByKeyboard('.ex-pixel > as-split > .as-split-gutter', 0, 1, 'pageup') checkSplitDirAndSizes('.ex-pixel > as-split', 'horizontal', W, H, GUTTER, [200, 386, 150, 250]) - checkAreasClasses('.ex-pixel > as-split > .as-split-area', [ { haveTo: ['as-max'], notHaveTo: ['as-min'] }, { haveTo: [], notHaveTo: ['as-min', 'as-max'] }, { haveTo: ['as-min', 'as-max'], notHaveTo: [] }, { haveTo: ['as-min'], notHaveTo: ['as-max'] } ]) + checkGutterAriaValueTexts('.ex-pixel > as-split > .as-split-gutter', ['200 pixel', null, '150 pixel']) moveGutterByKeyboard('.ex-pixel > as-split > .as-split-gutter', 1, 2, 'leftarrow') checkSplitDirAndSizes('.ex-pixel > as-split', 'horizontal', W, H, GUTTER, [200, 286, 150, 350]) - checkAreasClasses('.ex-pixel > as-split > .as-split-area', [ { haveTo: ['as-max'], notHaveTo: ['as-min'] }, { haveTo: [], notHaveTo: ['as-min', 'as-max'] }, { haveTo: ['as-min', 'as-max'], notHaveTo: [] }, { haveTo: [], notHaveTo: ['as-min', 'as-max'] } ]) + checkGutterAriaValueTexts('.ex-pixel > as-split > .as-split-gutter', ['200 pixel', null, '150 pixel']) moveGutterByKeyboard('.ex-pixel > as-split > .as-split-gutter', 2, 1, 'pageup') checkSplitDirAndSizes('.ex-pixel > as-split', 'horizontal', W, H, GUTTER, [200, 386, 150, 250]) - checkAreasClasses('.ex-pixel > as-split > .as-split-area', [ { haveTo: ['as-max'], notHaveTo: ['as-min'] }, { haveTo: [], notHaveTo: ['as-min', 'as-max'] }, { haveTo: ['as-min', 'as-max'], notHaveTo: [] }, { haveTo: ['as-min'], notHaveTo: ['as-max'] } ]) + checkGutterAriaValueTexts('.ex-pixel > as-split > .as-split-gutter', ['200 pixel', null, '150 pixel']) }) }) diff --git a/cypress/integration/3.nested.spec.js b/cypress/integration/3.nested.spec.js index b645470d..fc2b5514 100644 --- a/cypress/integration/3.nested.spec.js +++ b/cypress/integration/3.nested.spec.js @@ -1,6 +1,6 @@ /// -import { moveGutter, checkSplitDirAndSizes } from '../support/splitUtils' +import { moveGutterByMouse, checkSplitDirAndSizes } from '../support/splitUtils' context('Nested splits example page tests', () => { const W = 1070 @@ -33,21 +33,21 @@ context('Nested splits example page tests', () => { }) it('Move gutter horizontally 3 times and until maximum', () => { - moveGutter('.split-example > as-split > .as-split-gutter', 0, 280, 0) + moveGutterByMouse('.split-example > as-split > .as-split-gutter', 0, 280, 0) checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [706, 358.984375]) - moveGutter('.split-example > as-split > .as-split-gutter', 0, -80, 0) + moveGutterByMouse('.split-example > as-split > .as-split-gutter', 0, -80, 0) checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [626.015625, 438.984375]) - moveGutter('.split-example > as-split > .as-split-gutter', 0, 700, 0) + moveGutterByMouse('.split-example > as-split > .as-split-gutter', 0, 700, 0) checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [1065, 0]) }) it('Move nested split 1 multiple times', () => { - moveGutter('.split-example > as-split > .as-split-area:nth-child(1) > as-split > .as-split-gutter', 0, 0, 60) + moveGutterByMouse('.split-example > as-split > .as-split-area:nth-child(1) > as-split > .as-split-gutter', 0, 0, 60) checkSplitDirAndSizes( '.split-example > as-split > .as-split-area:nth-child(1) > as-split', 'vertical', @@ -57,7 +57,7 @@ context('Nested splits example page tests', () => { [186.015625, 65.984375, 125.984375], ) - moveGutter('.split-example > as-split > .as-split-area:nth-child(1) > as-split > .as-split-gutter', 1, 0, -300) + moveGutterByMouse('.split-example > as-split > .as-split-area:nth-child(1) > as-split > .as-split-gutter', 1, 0, -300) checkSplitDirAndSizes( '.split-example > as-split > .as-split-area:nth-child(1) > as-split', 'vertical', @@ -68,7 +68,7 @@ context('Nested splits example page tests', () => { ) // Move space smaller than gutter > move - moveGutter('.split-example > as-split > .as-split-area:nth-child(1) > as-split > .as-split-gutter', 0, 0, -10) + moveGutterByMouse('.split-example > as-split > .as-split-area:nth-child(1) > as-split > .as-split-gutter', 0, 0, -10) checkSplitDirAndSizes( '.split-example > as-split > .as-split-area:nth-child(1) > as-split', 'vertical', @@ -79,7 +79,7 @@ context('Nested splits example page tests', () => { ) // Move space same as gutter > move - moveGutter('.split-example > as-split > .as-split-area:nth-child(1) > as-split > .as-split-gutter', 0, 0, -GUTTER) + moveGutterByMouse('.split-example > as-split > .as-split-area:nth-child(1) > as-split > .as-split-gutter', 0, 0, -GUTTER) checkSplitDirAndSizes( '.split-example > as-split > .as-split-area:nth-child(1) > as-split', 'vertical', @@ -90,7 +90,7 @@ context('Nested splits example page tests', () => { ) // Move space bigger than gutter > move - moveGutter('.split-example > as-split > .as-split-area:nth-child(1) > as-split > .as-split-gutter', 0, 0, -20) + moveGutterByMouse('.split-example > as-split > .as-split-area:nth-child(1) > as-split > .as-split-gutter', 0, 0, -20) checkSplitDirAndSizes( '.split-example > as-split > .as-split-area:nth-child(1) > as-split', 'vertical', @@ -102,7 +102,7 @@ context('Nested splits example page tests', () => { }) it('Move nested split 2 multiple times', () => { - moveGutter('.split-example > as-split > .as-split-area:nth-child(2) > as-split > .as-split-gutter', 0, 0, 600) + moveGutterByMouse('.split-example > as-split > .as-split-area:nth-child(2) > as-split > .as-split-gutter', 0, 0, 600) checkSplitDirAndSizes( '.split-example > as-split > .as-split-area:nth-child(2) > as-split', 'vertical', @@ -112,7 +112,7 @@ context('Nested splits example page tests', () => { [389, 0], ) - moveGutter('.split-example > as-split > .as-split-area:nth-child(2) > as-split > .as-split-gutter', 0, 0, -600) + moveGutterByMouse('.split-example > as-split > .as-split-area:nth-child(2) > as-split > .as-split-gutter', 0, 0, -600) checkSplitDirAndSizes( '.split-example > as-split > .as-split-area:nth-child(2) > as-split', 'vertical', diff --git a/cypress/integration/4.sync.spec.js b/cypress/integration/4.sync.spec.js index 64f88bb6..7c9ae5d0 100644 --- a/cypress/integration/4.sync.spec.js +++ b/cypress/integration/4.sync.spec.js @@ -1,6 +1,6 @@ /// -import { moveGutter, checkSplitDirAndSizes } from '../support/splitUtils' +import { moveGutterByMouse, checkSplitDirAndSizes } from '../support/splitUtils' context('Sync splits example page tests', () => { const W = 1076 @@ -40,7 +40,7 @@ context('Sync splits example page tests', () => { }) it('Move gutter first split horizontally and check if others splits follow', () => { - moveGutter('.split-example > as-split > .as-split-area:nth-child(1) > as-split > .as-split-gutter', 0, 280, 0) + moveGutterByMouse('.split-example > as-split > .as-split-area:nth-child(1) > as-split > .as-split-gutter', 0, 280, 0) checkSplitDirAndSizes( '.split-example > as-split > .as-split-area:nth-child(1) > as-split', 'horizontal', @@ -66,7 +66,7 @@ context('Sync splits example page tests', () => { [546.25, 518.75], ) - moveGutter('.split-example > as-split > .as-split-area:nth-child(1) > as-split > .as-split-gutter', 0, 600, 0) + moveGutterByMouse('.split-example > as-split > .as-split-area:nth-child(1) > as-split > .as-split-gutter', 0, 600, 0) checkSplitDirAndSizes( '.split-example > as-split > .as-split-area:nth-child(1) > as-split', 'horizontal', @@ -92,7 +92,7 @@ context('Sync splits example page tests', () => { [1065, 0], ) - moveGutter('.split-example > as-split > .as-split-area:nth-child(1) > as-split > .as-split-gutter', 0, -1500, 0) + moveGutterByMouse('.split-example > as-split > .as-split-area:nth-child(1) > as-split > .as-split-gutter', 0, -1500, 0) checkSplitDirAndSizes( '.split-example > as-split > .as-split-area:nth-child(1) > as-split', 'horizontal', @@ -120,7 +120,7 @@ context('Sync splits example page tests', () => { }) it('Move gutter second split horizontally and check if others splits follow', () => { - moveGutter('.split-example > as-split > .as-split-area:nth-child(2) > as-split > .as-split-gutter', 0, 280, 0) + moveGutterByMouse('.split-example > as-split > .as-split-area:nth-child(2) > as-split > .as-split-gutter', 0, 280, 0) checkSplitDirAndSizes( '.split-example > as-split > .as-split-area:nth-child(1) > as-split', 'horizontal', @@ -146,7 +146,7 @@ context('Sync splits example page tests', () => { [546.25, 518.75], ) - moveGutter('.split-example > as-split > .as-split-area:nth-child(2) > as-split > .as-split-gutter', 0, 600, 0) + moveGutterByMouse('.split-example > as-split > .as-split-area:nth-child(2) > as-split > .as-split-gutter', 0, 600, 0) checkSplitDirAndSizes( '.split-example > as-split > .as-split-area:nth-child(1) > as-split', 'horizontal', @@ -172,7 +172,7 @@ context('Sync splits example page tests', () => { [1065, 0], ) - moveGutter('.split-example > as-split > .as-split-area:nth-child(2) > as-split > .as-split-gutter', 0, -1500, 0) + moveGutterByMouse('.split-example > as-split > .as-split-area:nth-child(2) > as-split > .as-split-gutter', 0, -1500, 0) checkSplitDirAndSizes( '.split-example > as-split > .as-split-area:nth-child(1) > as-split', 'horizontal', diff --git a/cypress/integration/5.style.spec.js b/cypress/integration/5.style.spec.js index 003b0395..2b716464 100644 --- a/cypress/integration/5.style.spec.js +++ b/cypress/integration/5.style.spec.js @@ -1,6 +1,6 @@ /// -import { moveGutter, checkSplitDirAndSizes } from '../support/splitUtils' +import { moveGutterByMouse, checkSplitDirAndSizes } from '../support/splitUtils' context('Custom split style example page tests', () => { const W = 1070 diff --git a/cypress/integration/7.click.spec.js b/cypress/integration/7.click.spec.js index 6f029026..c8f0ed88 100644 --- a/cypress/integration/7.click.spec.js +++ b/cypress/integration/7.click.spec.js @@ -1,6 +1,6 @@ /// -import { moveGutter, checkSplitDirAndSizes } from '../support/splitUtils' +import { moveGutterByMouse, checkSplitDirAndSizes } from '../support/splitUtils' function checkEventCount({ dragStartCount, dragEndCount, gutterClickCount, gutterDblClickCount, transitionEndCount }) { if (dragStartCount !== undefined) { @@ -70,7 +70,7 @@ context('Gutter click example page tests', () => { it('Mix gutter click and dragging', () => { // Try move gutter event if disabled - moveGutter('.as-split-gutter', 0, -100, 0) + moveGutterByMouse('.as-split-gutter', 0, -100, 0) // gutterClick should be fired same as normal click event since dragging is disabled. checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [264, 528, 264]) @@ -78,7 +78,7 @@ context('Gutter click example page tests', () => { cy.get('.btns button').eq(1).click() // Move gutter1 - moveGutter('.as-split-gutter', 0, -100, 0) + moveGutterByMouse('.as-split-gutter', 0, -100, 0) checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [164, 628, 264]) cy.wait(10) @@ -101,7 +101,7 @@ context('Gutter click example page tests', () => { checkEventCount({ dragStartCount: 1, dragEndCount: 1, gutterClickCount: 2, transitionEndCount: 2 }) // Move gutter2 to enlarge area3 - moveGutter('.as-split-gutter', 1, -20, 0) + moveGutterByMouse('.as-split-gutter', 1, -20, 0) checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [0, 1036, 20]) checkEventCount({ dragStartCount: 2, dragEndCount: 2, gutterClickCount: 2, transitionEndCount: 2 }) diff --git a/cypress/integration/9.geek.spec.js b/cypress/integration/9.geek.spec.js index 10314fc5..43c92e47 100644 --- a/cypress/integration/9.geek.spec.js +++ b/cypress/integration/9.geek.spec.js @@ -1,6 +1,6 @@ /// -import { moveGutter, checkSplitDirAndSizes } from '../support/splitUtils' +import { moveGutterByMouse, checkSplitDirAndSizes } from '../support/splitUtils' context('Geek demo example page tests', () => { const W = 1076 @@ -79,30 +79,30 @@ context('Geek demo example page tests', () => { [27.875, 27.875, 27.875, 27.875, 27.875, 27.875, 27.875, 27.875], ) - moveGutter('.as-split-gutter', 0, 0, -200) - moveGutter('.as-split-gutter', 1, 0, -200) - moveGutter('.as-split-gutter', 2, 0, -200) - moveGutter('.as-split-gutter', 3, 0, -200) - moveGutter('.as-split-gutter', 4, 0, -200) - moveGutter('.as-split-gutter', 5, 0, -200) - moveGutter('.as-split-gutter', 6, 0, -200) + moveGutterByMouse('.as-split-gutter', 0, 0, -200) + moveGutterByMouse('.as-split-gutter', 1, 0, -200) + moveGutterByMouse('.as-split-gutter', 2, 0, -200) + moveGutterByMouse('.as-split-gutter', 3, 0, -200) + moveGutterByMouse('.as-split-gutter', 4, 0, -200) + moveGutterByMouse('.as-split-gutter', 5, 0, -200) + moveGutterByMouse('.as-split-gutter', 6, 0, -200) checkSplitDirAndSizes('.split-example > as-split', 'vertical', W, H, GUTTER, [0, 0, 0, 0, 0, 0, 0, 223]) - moveGutter('.as-split-gutter', 0, 0, 100) - moveGutter('.as-split-gutter', 1, 0, 100) - moveGutter('.as-split-gutter', 2, 0, 100) - moveGutter('.as-split-gutter', 3, 0, 100) - moveGutter('.as-split-gutter', 4, 0, 100) - moveGutter('.as-split-gutter', 5, 0, 100) - moveGutter('.as-split-gutter', 6, 0, 100) + moveGutterByMouse('.as-split-gutter', 0, 0, 100) + moveGutterByMouse('.as-split-gutter', 1, 0, 100) + moveGutterByMouse('.as-split-gutter', 2, 0, 100) + moveGutterByMouse('.as-split-gutter', 3, 0, 100) + moveGutterByMouse('.as-split-gutter', 4, 0, 100) + moveGutterByMouse('.as-split-gutter', 5, 0, 100) + moveGutterByMouse('.as-split-gutter', 6, 0, 100) checkSplitDirAndSizes('.split-example > as-split', 'vertical', W, H, GUTTER, [0, 0, 0, 0, 0, 0, 100, 123]) - moveGutter('.as-split-gutter', 5, 0, 150) - moveGutter('.as-split-gutter', 4, 0, 150) - moveGutter('.as-split-gutter', 3, 0, 150) - moveGutter('.as-split-gutter', 2, 0, 150) - moveGutter('.as-split-gutter', 1, 0, 150) - moveGutter('.as-split-gutter', 0, 0, 150) + moveGutterByMouse('.as-split-gutter', 5, 0, 150) + moveGutterByMouse('.as-split-gutter', 4, 0, 150) + moveGutterByMouse('.as-split-gutter', 3, 0, 150) + moveGutterByMouse('.as-split-gutter', 2, 0, 150) + moveGutterByMouse('.as-split-gutter', 1, 0, 150) + moveGutterByMouse('.as-split-gutter', 0, 0, 150) checkSplitDirAndSizes('.split-example > as-split', 'vertical', W, H, GUTTER, [100, 0, 0, 0, 0, 0, 0, 123]) cy.get('.opts-prop .btn').contains('horizontal').click() @@ -235,7 +235,7 @@ context('Geek demo example page tests', () => { checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [263.5, 527, 263.5]) // Move gutter 5px > move 5px - moveGutter('.split-example .as-split-gutter', 0, 5, 0) + moveGutterByMouse('.split-example .as-split-gutter', 0, 5, 0) checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [268.484375, 522, 263.5]) /////////////////////////////////// @@ -243,19 +243,19 @@ context('Geek demo example page tests', () => { cy.get('.opts-prop').contains('Gutter step:').parent().contains('10').click() // Move gutter 5px > no move - moveGutter('.split-example .as-split-gutter', 0, 5, 0) + moveGutterByMouse('.split-example .as-split-gutter', 0, 5, 0) checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [268.484375, 522, 263.5]) // Move gutter 6px > move 10px - moveGutter('.split-example .as-split-gutter', 0, 6, 0) + moveGutterByMouse('.split-example .as-split-gutter', 0, 6, 0) checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [278.5, 511.984375, 263.5]) // Move gutter 15px > move 10px - moveGutter('.split-example .as-split-gutter', 0, 15, 0) + moveGutterByMouse('.split-example .as-split-gutter', 0, 15, 0) checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [288.515625, 501.984375, 263.5]) // Move gutter 16px > move 20px - moveGutter('.split-example .as-split-gutter', 0, 16, 0) + moveGutterByMouse('.split-example .as-split-gutter', 0, 16, 0) checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [308.515625, 481.984375, 263.5]) /////////////////////////////////// @@ -263,15 +263,15 @@ context('Geek demo example page tests', () => { cy.get('.opts-prop').contains('Gutter step:').parent().contains('50').click() // Move gutter 20px > nomove - moveGutter('.split-example .as-split-gutter', 0, 20, 0) + moveGutterByMouse('.split-example .as-split-gutter', 0, 20, 0) checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [308.515625, 481.984375, 263.5]) // Move gutter 25px > nomove - moveGutter('.split-example .as-split-gutter', 0, 25, 0) + moveGutterByMouse('.split-example .as-split-gutter', 0, 25, 0) checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [308.515625, 481.984375, 263.5]) // Move gutter 26px > move 50px - moveGutter('.split-example .as-split-gutter', 0, 26, 0) + moveGutterByMouse('.split-example .as-split-gutter', 0, 26, 0) checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [358.515625, 431.96875, 263.5]) }) }) diff --git a/cypress/support/splitUtils.js b/cypress/support/splitUtils.js index ac5779ab..8300f0d7 100644 --- a/cypress/support/splitUtils.js +++ b/cypress/support/splitUtils.js @@ -1,4 +1,4 @@ -export function moveGutter(gutters, num, x, y) { +export function moveGutterByMouse(gutters, num, x, y) { cy.get(gutters) .eq(num) .trigger('mousedown', { which: 1, clientX: 0, clientY: 0 }) @@ -13,8 +13,8 @@ export function moveGutter(gutters, num, x, y) { cy.wait(10) } -export function moveGutterByKeyboard(gutters, num, keyPressTimes, keySequence) { - for (let i = 0; i < keyPressTimes; i++) { +export function moveGutterByKeyboard(gutters, num, numKeyPresses, keySequence) { + for (let i = 0; i < numKeyPresses; i++) { cy.get(gutters) .eq(num) .focus() @@ -30,6 +30,21 @@ export function checkGutterAriaLabel(gutters, num, ariaLabel) { .and('equal', ariaLabel) } +export function checkGutterAriaValueTexts(gutters, ariaValueTexts) { + cy.get(gutters) + .each(($gutter, index) => { + const ariaValueText = ariaValueTexts[index] + if (ariaValueText === null) { + cy.wrap($gutter) + .should('not.have.attr', 'aria-valuetext') + } else { + cy.wrap($gutter) + .should('have.attr', 'aria-valuetext') + .and('equal', ariaValueTexts[index]) + } + }) +} + ////////////////////////////////////////// export function checkSplitDirAndCalcSizes(el, dir, w, h, gutter, sizes) { diff --git a/projects/angular-split/src/lib/component/split.component.ts b/projects/angular-split/src/lib/component/split.component.ts index 1d0ac645..910a60da 100644 --- a/projects/angular-split/src/lib/component/split.component.ts +++ b/projects/angular-split/src/lib/component/split.component.ts @@ -880,7 +880,7 @@ export class SplitComponent implements AfterViewInit, OnDestroy { } public getAriaAreaSizeText(size: number | null): string { - if (!size) { + if (size === null) { return null } From 4042206efc7989630050aa80f5fac519ed4e996c Mon Sep 17 00:00:00 2001 From: Brandon Nguyen Date: Mon, 24 Jan 2022 15:24:03 -0800 Subject: [PATCH 5/5] Fix typo --- cypress/integration/1.simple.spec.js | 36 ++++++++++++++-------------- cypress/integration/2.minmax.spec.js | 20 ++++++++-------- cypress/support/splitUtils.js | 2 +- 3 files changed, 29 insertions(+), 29 deletions(-) diff --git a/cypress/integration/1.simple.spec.js b/cypress/integration/1.simple.spec.js index f9d04798..98c67c04 100644 --- a/cypress/integration/1.simple.spec.js +++ b/cypress/integration/1.simple.spec.js @@ -1,6 +1,6 @@ /// -import { moveGutterByMouse, checkSplitDirAndSizes, moveGutterByKeyboard, checkGutterAriaLabel, checkGutterAriaValueTexts } from '../support/splitUtils' +import { moveGutterByMouse, checkSplitDirAndSizes, moveGutterByKeyboard, checkGutterAriaLabel, checkGuttersAriaValueTexts } from '../support/splitUtils' context('Simple split example page tests', () => { const W = 1076 @@ -15,7 +15,7 @@ context('Simple split example page tests', () => { checkSplitDirAndSizes('.ex-percent > as-split', 'horizontal', W, H, GUTTER, [319.5, 745.5]) checkSplitDirAndSizes('.ex-pixel > as-split', 'horizontal', W, H, GUTTER, [120, 774, 160]) checkGutterAriaLabel('.ex-percent .as-split-gutter', 0, 'adjustable divider between two views') - checkGutterAriaValueTexts('.ex-percent .as-split-gutter', ['30 percent']) + checkGuttersAriaValueTexts('.ex-percent .as-split-gutter', ['30 percent']) }) it('Change direction', () => { @@ -81,35 +81,35 @@ context('Simple split example page tests', () => { it('Move gutter horizontally by using keyboard', () => { moveGutterByKeyboard('.ex-percent .as-split-gutter', 0, 1, 'leftarrow') checkSplitDirAndSizes('.ex-percent > as-split', 'horizontal', W, H, GUTTER, [269.5, 795.5]) - checkGutterAriaValueTexts('.ex-percent .as-split-gutter', ['25 percent']) + checkGuttersAriaValueTexts('.ex-percent .as-split-gutter', ['25 percent']) moveGutterByKeyboard('.ex-percent .as-split-gutter', 0, 1, 'rightarrow') checkSplitDirAndSizes('.ex-percent > as-split', 'horizontal', W, H, GUTTER, [319.5, 745.5]) - checkGutterAriaValueTexts('.ex-percent .as-split-gutter', ['30 percent']) + checkGuttersAriaValueTexts('.ex-percent .as-split-gutter', ['30 percent']) moveGutterByKeyboard('.ex-percent .as-split-gutter', 0, 1, 'pagedown') checkSplitDirAndSizes('.ex-percent > as-split', 'horizontal', W, H, GUTTER, [0, 1065]) - checkGutterAriaValueTexts('.ex-percent .as-split-gutter', ['0 percent']) + checkGuttersAriaValueTexts('.ex-percent .as-split-gutter', ['0 percent']) moveGutterByKeyboard('.ex-percent .as-split-gutter', 0, 1, 'pageup') checkSplitDirAndSizes('.ex-percent > as-split', 'horizontal', W, H, GUTTER, [500, 565]) - checkGutterAriaValueTexts('.ex-percent .as-split-gutter', ['47 percent']) + checkGuttersAriaValueTexts('.ex-percent .as-split-gutter', ['47 percent']) moveGutterByKeyboard('.ex-pixel .as-split-gutter', 0, 1, 'leftarrow') checkSplitDirAndSizes('.ex-pixel > as-split', 'horizontal', W, H, GUTTER, [70, 824, 160]) - checkGutterAriaValueTexts('.ex-pixel .as-split-gutter', ['70 pixel', null]) + checkGuttersAriaValueTexts('.ex-pixel .as-split-gutter', ['70 pixel', null]) moveGutterByKeyboard('.ex-pixel .as-split-gutter', 0, 1, 'rightarrow') checkSplitDirAndSizes('.ex-pixel > as-split', 'horizontal', W, H, GUTTER, [120, 774, 160]) - checkGutterAriaValueTexts('.ex-pixel .as-split-gutter', ['120 pixel', null]) + checkGuttersAriaValueTexts('.ex-pixel .as-split-gutter', ['120 pixel', null]) moveGutterByKeyboard('.ex-pixel .as-split-gutter', 0, 1, 'pageup') checkSplitDirAndSizes('.ex-pixel > as-split', 'horizontal', W, H, GUTTER, [620, 274, 160]) - checkGutterAriaValueTexts('.ex-pixel .as-split-gutter', ['620 pixel', null]) + checkGuttersAriaValueTexts('.ex-pixel .as-split-gutter', ['620 pixel', null]) moveGutterByKeyboard('.ex-pixel .as-split-gutter', 0, 1, 'pagedown') checkSplitDirAndSizes('.ex-pixel > as-split', 'horizontal', W, H, GUTTER, [120, 774, 160]) - checkGutterAriaValueTexts('.ex-pixel .as-split-gutter', ['120 pixel', null]) + checkGuttersAriaValueTexts('.ex-pixel .as-split-gutter', ['120 pixel', null]) }) it('Move gutter vertically by using keyboard', () => { @@ -117,34 +117,34 @@ context('Simple split example page tests', () => { moveGutterByKeyboard('.ex-percent .as-split-gutter', 0, 1, 'downarrow') checkSplitDirAndSizes('.ex-percent > as-split', 'vertical', W, H, GUTTER, [136.703125, 152.296875]) - checkGutterAriaValueTexts('.ex-percent .as-split-gutter', ['47 percent']) + checkGuttersAriaValueTexts('.ex-percent .as-split-gutter', ['47 percent']) moveGutterByKeyboard('.ex-percent .as-split-gutter', 0, 1, 'uparrow') checkSplitDirAndSizes('.ex-percent > as-split', 'vertical', W, H, GUTTER, [86.703125, 202.28125]) - checkGutterAriaValueTexts('.ex-percent .as-split-gutter', ['30 percent']) + checkGuttersAriaValueTexts('.ex-percent .as-split-gutter', ['30 percent']) moveGutterByKeyboard('.ex-percent .as-split-gutter', 0, 1, 'pagedown') checkSplitDirAndSizes('.ex-percent > as-split', 'vertical', W, H, GUTTER, [289, 0]) - checkGutterAriaValueTexts('.ex-percent .as-split-gutter', ['100 percent']) + checkGuttersAriaValueTexts('.ex-percent .as-split-gutter', ['100 percent']) moveGutterByKeyboard('.ex-percent .as-split-gutter', 0, 1, 'pageup') checkSplitDirAndSizes('.ex-percent > as-split', 'vertical', W, H, GUTTER, [0, 289]) - checkGutterAriaValueTexts('.ex-percent .as-split-gutter', ['0 percent']) + checkGuttersAriaValueTexts('.ex-percent .as-split-gutter', ['0 percent']) moveGutterByKeyboard('.ex-pixel .as-split-gutter', 0, 1, 'downarrow') checkSplitDirAndSizes('.ex-pixel > as-split', 'vertical', W, H, GUTTER, [170, 0, 110]) - checkGutterAriaValueTexts('.ex-pixel .as-split-gutter', ['170 pixel', null]) + checkGuttersAriaValueTexts('.ex-pixel .as-split-gutter', ['170 pixel', null]) moveGutterByKeyboard('.ex-pixel .as-split-gutter', 0, 1, 'uparrow') checkSplitDirAndSizes('.ex-pixel > as-split', 'vertical', W, H, GUTTER, [120, 48, 110]) - checkGutterAriaValueTexts('.ex-pixel .as-split-gutter', ['120 pixel', null]) + checkGuttersAriaValueTexts('.ex-pixel .as-split-gutter', ['120 pixel', null]) moveGutterByKeyboard('.ex-pixel .as-split-gutter', 0, 1, 'pageup') checkSplitDirAndSizes('.ex-pixel > as-split', 'vertical', W, H, GUTTER, [0, 168, 110]) - checkGutterAriaValueTexts('.ex-pixel .as-split-gutter', ['0 pixel', null]) + checkGuttersAriaValueTexts('.ex-pixel .as-split-gutter', ['0 pixel', null]) moveGutterByKeyboard('.ex-pixel .as-split-gutter', 0, 1, 'pagedown') checkSplitDirAndSizes('.ex-pixel > as-split', 'vertical', W, H, GUTTER, [278, 0, 0]) - checkGutterAriaValueTexts('.ex-pixel .as-split-gutter', ['278 pixel', null]) + checkGuttersAriaValueTexts('.ex-pixel .as-split-gutter', ['278 pixel', null]) }) }) diff --git a/cypress/integration/2.minmax.spec.js b/cypress/integration/2.minmax.spec.js index 62d2a9d2..6edbcff3 100644 --- a/cypress/integration/2.minmax.spec.js +++ b/cypress/integration/2.minmax.spec.js @@ -1,6 +1,6 @@ /// -import { moveGutterByMouse, checkSplitDirAndSizes, moveGutterByKeyboard, checkGutterAriaValueTexts } from '../support/splitUtils' +import { moveGutterByMouse, checkSplitDirAndSizes, moveGutterByKeyboard, checkGuttersAriaValueTexts } from '../support/splitUtils' context('Min & max splits example page tests', () => { const W = 1070 @@ -168,7 +168,7 @@ context('Min & max splits example page tests', () => { { haveTo: [], notHaveTo: ['as-min', 'as-max'] }, { haveTo: [], notHaveTo: ['as-min', 'as-max'] }, ]) - checkGutterAriaValueTexts('.ex-percent > as-split > .as-split-gutter', ['25 percent', '45 percent']) + checkGuttersAriaValueTexts('.ex-percent > as-split > .as-split-gutter', ['25 percent', '45 percent']) moveGutterByKeyboard('.ex-percent > as-split > .as-split-gutter', 0, 1, 'pagedown') checkSplitDirAndSizes('.ex-percent > as-split', 'horizontal', W, H, GUTTER, [203.1875, 508, 304.796875]) @@ -177,7 +177,7 @@ context('Min & max splits example page tests', () => { { haveTo: ['as-max'], notHaveTo: ['as-min'] }, { haveTo: [], notHaveTo: ['as-min', 'as-max'] }, ]) - checkGutterAriaValueTexts('.ex-percent > as-split > .as-split-gutter', ['20 percent', '50 percent']) + checkGuttersAriaValueTexts('.ex-percent > as-split > .as-split-gutter', ['20 percent', '50 percent']) moveGutterByKeyboard('.ex-percent > as-split > .as-split-gutter', 0, 1, 'pageup') checkSplitDirAndSizes('.ex-percent > as-split', 'horizontal', W, H, GUTTER, [304.796875, 406.390625, 304.796875]) @@ -186,7 +186,7 @@ context('Min & max splits example page tests', () => { { haveTo: [], notHaveTo: ['as-min', 'as-max'] }, { haveTo: [], notHaveTo: ['as-min', 'as-max'] }, ]) - checkGutterAriaValueTexts('.ex-percent > as-split > .as-split-gutter', ['30 percent', '40 percent']) + checkGuttersAriaValueTexts('.ex-percent > as-split > .as-split-gutter', ['30 percent', '40 percent']) moveGutterByKeyboard('.ex-percent > as-split > .as-split-gutter', 1, 1, 'leftarrow') checkSplitDirAndSizes('.ex-percent > as-split', 'horizontal', W, H, GUTTER, [304.796875, 356.390625, 354.796875]) @@ -195,7 +195,7 @@ context('Min & max splits example page tests', () => { { haveTo: [], notHaveTo: ['as-min', 'as-max'] }, { haveTo: [], notHaveTo: ['as-min', 'as-max'] }, ]) - checkGutterAriaValueTexts('.ex-percent > as-split > .as-split-gutter', ['30 percent', '35 percent']) + checkGuttersAriaValueTexts('.ex-percent > as-split > .as-split-gutter', ['30 percent', '35 percent']) moveGutterByKeyboard('.ex-percent > as-split > .as-split-gutter', 1, 1, 'pagedown') checkSplitDirAndSizes('.ex-percent > as-split', 'horizontal', W, H, GUTTER, [203.1875, 304.796875, 508]) @@ -204,7 +204,7 @@ context('Min & max splits example page tests', () => { { haveTo: ['as-min'], notHaveTo: ['as-max'] }, { haveTo: ['as-max'], notHaveTo: ['as-min'] }, ]) - checkGutterAriaValueTexts('.ex-percent > as-split > .as-split-gutter', ['20 percent', '30 percent']) + checkGuttersAriaValueTexts('.ex-percent > as-split > .as-split-gutter', ['20 percent', '30 percent']) }) it('Move gutters having restrictMove off by keyboard [PIXEL MODE]', () => { @@ -216,7 +216,7 @@ context('Min & max splits example page tests', () => { { haveTo: ['as-min', 'as-max'], notHaveTo: [] }, { haveTo: ['as-min'], notHaveTo: ['as-max'] } ]) - checkGutterAriaValueTexts('.ex-pixel > as-split > .as-split-gutter', ['150 pixel', null, '150 pixel']) + checkGuttersAriaValueTexts('.ex-pixel > as-split > .as-split-gutter', ['150 pixel', null, '150 pixel']) moveGutterByKeyboard('.ex-pixel > as-split > .as-split-gutter', 0, 1, 'pageup') checkSplitDirAndSizes('.ex-pixel > as-split', 'horizontal', W, H, GUTTER, [200, 386, 150, 250]) @@ -226,7 +226,7 @@ context('Min & max splits example page tests', () => { { haveTo: ['as-min', 'as-max'], notHaveTo: [] }, { haveTo: ['as-min'], notHaveTo: ['as-max'] } ]) - checkGutterAriaValueTexts('.ex-pixel > as-split > .as-split-gutter', ['200 pixel', null, '150 pixel']) + checkGuttersAriaValueTexts('.ex-pixel > as-split > .as-split-gutter', ['200 pixel', null, '150 pixel']) moveGutterByKeyboard('.ex-pixel > as-split > .as-split-gutter', 1, 2, 'leftarrow') checkSplitDirAndSizes('.ex-pixel > as-split', 'horizontal', W, H, GUTTER, [200, 286, 150, 350]) @@ -236,7 +236,7 @@ context('Min & max splits example page tests', () => { { haveTo: ['as-min', 'as-max'], notHaveTo: [] }, { haveTo: [], notHaveTo: ['as-min', 'as-max'] } ]) - checkGutterAriaValueTexts('.ex-pixel > as-split > .as-split-gutter', ['200 pixel', null, '150 pixel']) + checkGuttersAriaValueTexts('.ex-pixel > as-split > .as-split-gutter', ['200 pixel', null, '150 pixel']) moveGutterByKeyboard('.ex-pixel > as-split > .as-split-gutter', 2, 1, 'pageup') checkSplitDirAndSizes('.ex-pixel > as-split', 'horizontal', W, H, GUTTER, [200, 386, 150, 250]) @@ -246,7 +246,7 @@ context('Min & max splits example page tests', () => { { haveTo: ['as-min', 'as-max'], notHaveTo: [] }, { haveTo: ['as-min'], notHaveTo: ['as-max'] } ]) - checkGutterAriaValueTexts('.ex-pixel > as-split > .as-split-gutter', ['200 pixel', null, '150 pixel']) + checkGuttersAriaValueTexts('.ex-pixel > as-split > .as-split-gutter', ['200 pixel', null, '150 pixel']) }) }) diff --git a/cypress/support/splitUtils.js b/cypress/support/splitUtils.js index 8300f0d7..01bfe9f2 100644 --- a/cypress/support/splitUtils.js +++ b/cypress/support/splitUtils.js @@ -30,7 +30,7 @@ export function checkGutterAriaLabel(gutters, num, ariaLabel) { .and('equal', ariaLabel) } -export function checkGutterAriaValueTexts(gutters, ariaValueTexts) { +export function checkGuttersAriaValueTexts(gutters, ariaValueTexts) { cy.get(gutters) .each(($gutter, index) => { const ariaValueText = ariaValueTexts[index]