Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor(module:all): use cdk keycodes instead of magic number #2499

Merged
merged 1 commit into from
Nov 24, 2018
Merged

refactor(module:all): use cdk keycodes instead of magic number #2499

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions components/carousel/nz-carousel.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { LEFT_ARROW, RIGHT_ARROW } from '@angular/cdk/keycodes';
import {
AfterContentInit,
AfterViewInit,
Expand Down Expand Up @@ -231,10 +232,10 @@ export class NzCarouselComponent implements AfterViewInit, OnDestroy, AfterConte
}

onKeyDown(e: KeyboardEvent): void {
if (e.keyCode === 37) { // Left
if (e.keyCode === LEFT_ARROW) { // Left
this.pre();
e.preventDefault();
} else if (e.keyCode === 39) { // Right
} else if (e.keyCode === RIGHT_ARROW) { // Right
this.next();
e.preventDefault();
}
Expand Down
9 changes: 5 additions & 4 deletions components/carousel/nz-carousel.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { LEFT_ARROW, RIGHT_ARROW } from '@angular/cdk/keycodes';
import { Component, ViewChild } from '@angular/core';
import { fakeAsync, tick, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
Expand Down Expand Up @@ -73,16 +74,16 @@ describe('carousel', () => {
fixture.detectChanges();
expect(carouselContents[ 0 ].nativeElement.classList).toContain('slick-active');
const list = carouselWrapper.nativeElement.querySelector('.slick-list');
dispatchKeyboardEvent(list, 'keydown', 37);
dispatchKeyboardEvent(list, 'keydown', LEFT_ARROW);
fixture.detectChanges();
expect(carouselContents[ 3 ].nativeElement.classList).toContain('slick-active');
dispatchKeyboardEvent(list, 'keydown', 37);
dispatchKeyboardEvent(list, 'keydown', LEFT_ARROW);
fixture.detectChanges();
expect(carouselContents[ 2 ].nativeElement.classList).toContain('slick-active');
dispatchKeyboardEvent(list, 'keydown', 39);
dispatchKeyboardEvent(list, 'keydown', RIGHT_ARROW);
fixture.detectChanges();
expect(carouselContents[ 3 ].nativeElement.classList).toContain('slick-active');
dispatchKeyboardEvent(list, 'keydown', 39);
dispatchKeyboardEvent(list, 'keydown', RIGHT_ARROW);
fixture.detectChanges();
expect(carouselContents[ 0 ].nativeElement.classList).toContain('slick-active');
});
Expand Down
48 changes: 15 additions & 33 deletions components/cascader/nz-cascader.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,17 @@
// tslint:disable:no-any
import {
A,
COMMA,
DELETE,
DOWN_ARROW, END,
ENTER,
ESCAPE, HOME,
LEFT_ARROW, NINE,
PAGE_DOWN,
PAGE_UP,
RIGHT_ARROW, SPACE, TAB,
UP_ARROW, Z, ZERO
} from '@angular/cdk/keycodes';
import { ConnectedOverlayPositionChange, OverlayContainer } from '@angular/cdk/overlay';
import { Component, TemplateRef, ViewChild } from '@angular/core';
import { async, fakeAsync, flush, inject, tick, TestBed } from '@angular/core/testing';
Expand Down Expand Up @@ -681,7 +694,6 @@ describe('cascader', () => {
expect(overlayContainerElement.querySelectorAll('.ant-cascader-menu').length).toBe(2); // 2列
});
it('should click option to change column count 2', fakeAsync(() => {
const LEFT_ARROW = 37;
testComponent.values = [ 'zhejiang', 'hangzhou', 'xihu' ];
fixture.detectChanges();
cascader.nativeElement.click();
Expand Down Expand Up @@ -780,7 +792,6 @@ describe('cascader', () => {
expect(overlayContainerElement.querySelectorAll('.ant-cascader-menu').length).toBe(0);
}));
it('should open menu when press DOWN_ARROW', fakeAsync(() => {
const DOWN_ARROW = 40;
fixture.detectChanges();
expect(testComponent.cascader.isMenuVisible()).toBe(false);
dispatchKeyboardEvent(cascader.nativeElement, 'keydown', DOWN_ARROW);
Expand All @@ -790,7 +801,6 @@ describe('cascader', () => {
expect(testComponent.cascader.isMenuVisible()).toBe(true);
}));
it('should open menu when press UP_ARROW', fakeAsync(() => {
const UP_ARROW = 38;
fixture.detectChanges();
expect(testComponent.cascader.isMenuVisible()).toBe(false);
dispatchKeyboardEvent(cascader.nativeElement, 'keydown', UP_ARROW);
Expand All @@ -799,20 +809,18 @@ describe('cascader', () => {
fixture.detectChanges();
expect(testComponent.cascader.isMenuVisible()).toBe(true);
}));
it('should close menu when press ESC', fakeAsync(() => {
const ESC = 27;
it('should close menu when press ESCAPE', fakeAsync(() => {
fixture.detectChanges();
testComponent.cascader.setMenuVisible(true);
fixture.detectChanges();
expect(testComponent.cascader.isMenuVisible()).toBe(true);
dispatchKeyboardEvent(cascader.nativeElement, 'keydown', ESC);
dispatchKeyboardEvent(cascader.nativeElement, 'keydown', ESCAPE);
fixture.detectChanges();
flush(); // wait for cdk-overlay to close
fixture.detectChanges();
expect(testComponent.cascader.isMenuVisible()).toBe(false);
}));
it('should navigate up when press UP_ARROW', fakeAsync(() => {
const UP_ARROW = 38;
fixture.detectChanges();
testComponent.cascader.setMenuVisible(true);
fixture.detectChanges();
Expand All @@ -829,7 +837,6 @@ describe('cascader', () => {
expect(itemEl1.classList).not.toContain('ant-cascader-menu-item-active');
}));
it('should navigate down when press DOWN_ARROW', fakeAsync(() => {
const DOWN_ARROW = 40;
fixture.detectChanges();
testComponent.cascader.setMenuVisible(true);
fixture.detectChanges();
Expand All @@ -840,8 +847,6 @@ describe('cascader', () => {
expect(itemEl1.classList).toContain('ant-cascader-menu-item-active');
}));
it('should navigate right when press RIGHT_ARROW', fakeAsync(() => {
const DOWN_ARROW = 40;
const RIGHT_ARROW = 39;
fixture.detectChanges();
testComponent.cascader.setMenuVisible(true);
fixture.detectChanges();
Expand All @@ -863,7 +868,6 @@ describe('cascader', () => {
expect(itemEl3.classList).toContain('ant-cascader-menu-item-active');
}));
it('should navigate left when press LEFT_ARROW', fakeAsync(() => {
const LEFT_ARROW = 37;
fixture.detectChanges();
testComponent.values = [ 'zhejiang', 'hangzhou', 'xihu' ];
testComponent.cascader.setMenuVisible(true);
Expand Down Expand Up @@ -895,9 +899,6 @@ describe('cascader', () => {
expect(itemEl3.classList).not.toContain('ant-cascader-menu-item-active');
}));
it('should select option when press ENTER', fakeAsync(() => {
const DOWN_ARROW = 40;
const RIGHT_ARROW = 39;
const ENTER = 13;
fixture.detectChanges();
expect(testComponent.values).toBeNull();
testComponent.cascader.setMenuVisible(true);
Expand Down Expand Up @@ -933,9 +934,6 @@ describe('cascader', () => {
expect(testComponent.cascader.isMenuVisible()).toBe(false);
}));
it('should key nav disabled option correct', fakeAsync(() => {
const DOWN_ARROW = 40;
const RIGHT_ARROW = 39;
const UP_ARROW = 38;

testComponent.nzOptions = options2;
fixture.detectChanges();
Expand Down Expand Up @@ -987,18 +985,6 @@ describe('cascader', () => {
expect(optionEl14.classList).not.toContain('ant-cascader-menu-item-active');
}));
it('should ignore keyboardEvent on some key', fakeAsync(() => {
const PAGE_UP = 33;
const PAGE_DOWN = 34;
const TAB = 9;
const HOME = 36;
const END = 35;
const SPACE = 32;
const DELETE = 46;
const COMMA = 188;
const A = 65;
const Z = 90;
const ZERO = 48;
const NINE = 57;
const keys = [ PAGE_UP, PAGE_DOWN, TAB, HOME, END, SPACE, COMMA, DELETE ];
for (let k = A; k <= Z; k++) {
keys.push(k);
Expand Down Expand Up @@ -1426,8 +1412,6 @@ describe('cascader', () => {
expect(testComponent.cascader.nzColumns[ 0 ][ 2 ].disabled).toBe(true);
});
it('should support arrow in search mode', (done) => {
const DOWN_ARROW = 40;
const ENTER = 13;
testComponent.nzOptions = options2;
fixture.detectChanges();
testComponent.cascader.inputValue = 'o';
Expand All @@ -1450,8 +1434,6 @@ describe('cascader', () => {
});
});
it('should not preventDefault left/right arrow in search mode', () => {
const LEFT_ARROW = 37;
const RIGHT_ARROW = 39;
fixture.detectChanges();
testComponent.nzShowSearch = true;
testComponent.cascader.inputValue = 'o';
Expand Down
5 changes: 3 additions & 2 deletions components/input-number/nz-input-number.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { DOWN_ARROW, UP_ARROW } from '@angular/cdk/keycodes';
import {
forwardRef,
AfterViewInit,
Expand Down Expand Up @@ -319,11 +320,11 @@ export class NzInputNumberComponent implements ControlValueAccessor, AfterViewIn
}

onKeyDown(e: KeyboardEvent): void {
if (e.code === 'ArrowUp' || e.keyCode === 38) {
if (e.code === 'ArrowUp' || e.keyCode === UP_ARROW) {
const ratio = this.getRatio(e);
this.up(e, ratio);
this.stop();
} else if (e.code === 'ArrowDown' || e.keyCode === 40) {
} else if (e.code === 'ArrowDown' || e.keyCode === DOWN_ARROW) {
const ratio = this.getRatio(e);
this.down(e, ratio);
this.stop();
Expand Down
3 changes: 2 additions & 1 deletion components/input/nz-input.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { ENTER } from '@angular/cdk/keycodes';
import { Component, TemplateRef, ViewChild } from '@angular/core';
import { async, fakeAsync, flush, TestBed } from '@angular/core/testing';
import { FormsModule, FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
Expand Down Expand Up @@ -75,7 +76,7 @@ describe('input', () => {
});
it('should resize when input change', fakeAsync(() => {
const previousHeight = textarea.clientHeight;
dispatchKeyboardEvent(textarea, 'input', 13, textarea);
dispatchKeyboardEvent(textarea, 'input', ENTER, textarea);
testComponent.value = '\n';
fixture.detectChanges();
flush();
Expand Down
5 changes: 3 additions & 2 deletions components/rate/nz-rate.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { LEFT_ARROW, RIGHT_ARROW } from '@angular/cdk/keycodes';
import {
forwardRef,
AfterViewInit,
Expand Down Expand Up @@ -208,14 +209,14 @@ export class NzRateComponent implements OnInit, ControlValueAccessor, AfterViewI

onKeyDown(e: KeyboardEvent): void {
const code = e.code;
if ((code === 'ArrowRight' || e.keyCode === 39) && (this.nzValue < this.nzCount)) {
if ((code === 'ArrowRight' || e.keyCode === RIGHT_ARROW) && (this.nzValue < this.nzCount)) {
if (this.nzAllowHalf) {
this.nzValue += 0.5;
} else {
this.nzValue += 1;
}
this.onChange(this.nzValue);
} else if ((code === 'ArrowLeft' || e.keyCode === 37) && (this.nzValue > 0)) {
} else if ((code === 'ArrowLeft' || e.keyCode === LEFT_ARROW) && (this.nzValue > 0)) {
if (this.nzAllowHalf) {
this.nzValue -= 0.5;
} else {
Expand Down
9 changes: 5 additions & 4 deletions components/select/nz-option-container.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { DOWN_ARROW, ENTER, UP_ARROW } from '@angular/cdk/keycodes';
import {
AfterContentInit,
Component,
Expand Down Expand Up @@ -90,18 +91,18 @@ export class NzOptionContainerComponent implements AfterContentInit, OnDestroy {
}

onKeyDownUl(e: KeyboardEvent): void {
if ([ 38, 40, 13 ].indexOf(e.keyCode) > -1) {
if ([ UP_ARROW, DOWN_ARROW, ENTER ].indexOf(e.keyCode) > -1) {
e.preventDefault();
const activeIndex = this.listOfFilterOption.findIndex(item => item === this.activatedOption);
if (e.keyCode === 38) {
if (e.keyCode === UP_ARROW) {
// arrow up
const preIndex = activeIndex > 0 ? (activeIndex - 1) : (this.listOfFilterOption.length - 1);
this.setActiveOption(this.listOfFilterOption[ preIndex ]);
} else if (e.keyCode === 40) {
} else if (e.keyCode === DOWN_ARROW) {
// arrow down
const nextIndex = activeIndex < this.listOfFilterOption.length - 1 ? (activeIndex + 1) : 0;
this.setActiveOption(this.listOfFilterOption[ nextIndex ]);
} else if (e.keyCode === 13) {
} else if (e.keyCode === ENTER) {
// enter
if (this.isTagsMode) {
if (!this.isAddTagOptionDisplay) {
Expand Down
31 changes: 16 additions & 15 deletions components/select/nz-option-container.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { DOWN_ARROW, ENTER, UP_ARROW } from '@angular/cdk/keycodes';
import { Component, QueryList, ViewChild } from '@angular/core';
import { async, fakeAsync, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
Expand Down Expand Up @@ -136,7 +137,7 @@ describe('nz-select option container', () => {
const ul = oc.nativeElement.querySelector('.ant-select-dropdown-menu');
fixture.detectChanges();
fixture.whenStable().then(() => {
dispatchKeyboardEvent(ul, 'keydown', 38);
dispatchKeyboardEvent(ul, 'keydown', UP_ARROW);
fixture.detectChanges();
expect(oc.nativeElement.querySelector('.ant-select-dropdown-menu-item-active').innerText).toBe('sub2-3');
});
Expand All @@ -146,8 +147,8 @@ describe('nz-select option container', () => {
const ul = oc.nativeElement.querySelector('.ant-select-dropdown-menu');
fixture.detectChanges();
fixture.whenStable().then(() => {
dispatchKeyboardEvent(ul, 'keydown', 40);
dispatchKeyboardEvent(ul, 'keydown', 40);
dispatchKeyboardEvent(ul, 'keydown', DOWN_ARROW);
dispatchKeyboardEvent(ul, 'keydown', DOWN_ARROW);
fixture.detectChanges();
expect(oc.nativeElement.querySelector('.ant-select-dropdown-menu-item-active').innerText).toBe('test2');
});
Expand All @@ -157,7 +158,7 @@ describe('nz-select option container', () => {
const ul = oc.nativeElement.querySelector('.ant-select-dropdown-menu');
fixture.detectChanges();
fixture.whenStable().then(() => {
dispatchKeyboardEvent(ul, 'keydown', 13);
dispatchKeyboardEvent(ul, 'keydown', ENTER);
fixture.detectChanges();
expect(testComponent.clickOption).toHaveBeenCalledTimes(1);
expect(testComponent.updateListOfSelectedValueFromOptionContainer).toHaveBeenCalledTimes(0);
Expand All @@ -168,10 +169,10 @@ describe('nz-select option container', () => {
const ul = oc.nativeElement.querySelector('.ant-select-dropdown-menu');
fixture.detectChanges();
fixture.whenStable().then(() => {
dispatchKeyboardEvent(ul, 'keydown', 40);
dispatchKeyboardEvent(ul, 'keydown', 40);
dispatchKeyboardEvent(ul, 'keydown', DOWN_ARROW);
dispatchKeyboardEvent(ul, 'keydown', DOWN_ARROW);
fixture.detectChanges();
dispatchKeyboardEvent(ul, 'keydown', 13);
dispatchKeyboardEvent(ul, 'keydown', ENTER);
fixture.detectChanges();
expect(testComponent.clickOption).toHaveBeenCalledTimes(1);
expect(testComponent.listOfSelectedValue[ 0 ].value).toBe('test2');
Expand All @@ -183,8 +184,8 @@ describe('nz-select option container', () => {
const ul = oc.nativeElement.querySelector('.ant-select-dropdown-menu');
fixture.detectChanges();
fixture.whenStable().then(() => {
dispatchKeyboardEvent(ul, 'keydown', 40);
dispatchKeyboardEvent(ul, 'keydown', 40);
dispatchKeyboardEvent(ul, 'keydown', DOWN_ARROW);
dispatchKeyboardEvent(ul, 'keydown', DOWN_ARROW);
fixture.detectChanges();
expect(oc.nativeElement.querySelector('.ant-select-dropdown-menu-item-active').innerText).toBe('test2');
testComponent.nzOptionContainerComponent.resetActiveOption();
Expand All @@ -197,8 +198,8 @@ describe('nz-select option container', () => {
const ul = oc.nativeElement.querySelector('.ant-select-dropdown-menu');
fixture.detectChanges();
fixture.whenStable().then(() => {
dispatchKeyboardEvent(ul, 'keydown', 40);
dispatchKeyboardEvent(ul, 'keydown', 40);
dispatchKeyboardEvent(ul, 'keydown', DOWN_ARROW);
dispatchKeyboardEvent(ul, 'keydown', DOWN_ARROW);
fixture.detectChanges();
expect(oc.nativeElement.querySelector('.ant-select-dropdown-menu-item-active').innerText).toBe('test2');
testComponent.searchValue = 'sub1-1';
Expand Down Expand Up @@ -247,10 +248,10 @@ describe('nz-select option container', () => {
fixture.whenStable().then(() => {
expect(testComponent.nzOptionContainerComponent.listOfTagOption.length).toBe(1);
const ul = oc.nativeElement.querySelector('.ant-select-dropdown-menu');
dispatchKeyboardEvent(ul, 'keydown', 38);
dispatchKeyboardEvent(ul, 'keydown', 38);
dispatchKeyboardEvent(ul, 'keydown', UP_ARROW);
dispatchKeyboardEvent(ul, 'keydown', UP_ARROW);
fixture.detectChanges();
dispatchKeyboardEvent(ul, 'keydown', 13);
dispatchKeyboardEvent(ul, 'keydown', ENTER);
fixture.detectChanges();
expect(testComponent.nzOptionContainerComponent.listOfTagOption.length).toBe(1);
expect(testComponent.listOfSelectedValue.length).toBe(3);
Expand All @@ -262,7 +263,7 @@ describe('nz-select option container', () => {
fixture.whenStable().then(() => {
expect(testComponent.nzOptionContainerComponent.listOfTagOption.length).toBe(1);
const ul = oc.nativeElement.querySelector('.ant-select-dropdown-menu');
dispatchKeyboardEvent(ul, 'keydown', 13);
dispatchKeyboardEvent(ul, 'keydown', ENTER);
fixture.detectChanges();
expect(testComponent.nzOptionContainerComponent.listOfTagOption.length).toBe(2);
expect(testComponent.listOfSelectedValue.length).toBe(3);
Expand Down
5 changes: 3 additions & 2 deletions components/select/nz-select-top-control.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { BACKSPACE } from '@angular/cdk/keycodes';
import { Component, ViewChild } from '@angular/core';
import { fakeAsync, flush, tick, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
Expand Down Expand Up @@ -163,14 +164,14 @@ describe('nz-select top control', () => {
expect(ul.children[ 0 ].querySelector('.ant-select-selection__choice__content').innerText).toBe('test1');
expect(ul.children[ 1 ].querySelector('.ant-select-selection__choice__content').innerText).toBe('test2');
expect(ul.children[ 2 ].querySelector('.ant-select-selection__choice__content').innerText).toBe('test3');
dispatchKeyboardEvent(tc.nativeElement.querySelector('.ant-select-search__field'), 'keydown', 8, tc.nativeElement.querySelector('.ant-select-search__field'));
dispatchKeyboardEvent(tc.nativeElement.querySelector('.ant-select-search__field'), 'keydown', BACKSPACE, tc.nativeElement.querySelector('.ant-select-search__field'));
fixture.detectChanges();
tick();
fixture.detectChanges();
expect(ul.children.length).toBe(3);
expect(ul.children[ 0 ].querySelector('.ant-select-selection__choice__content').innerText).toBe('test1');
expect(ul.children[ 1 ].querySelector('.ant-select-selection__choice__content').innerText).toBe('test2');
dispatchKeyboardEvent(tc.nativeElement.querySelector('.ant-select-search__field'), 'keydown', 8, tc.nativeElement.querySelector('.ant-select-search__field'));
dispatchKeyboardEvent(tc.nativeElement.querySelector('.ant-select-search__field'), 'keydown', BACKSPACE, tc.nativeElement.querySelector('.ant-select-search__field'));
fixture.detectChanges();
tick();
fixture.detectChanges();
Expand Down
Loading