Skip to content

Commit

Permalink
refactor(module:all): use cdk keycodes instead of magic number (#2499)
Browse files Browse the repository at this point in the history
  • Loading branch information
@JLHwung @vthinkxie
JLHwung authored and vthinkxie committed Nov 24, 2018
1 parent e41640a commit 8992fc1
Show file tree
Hide file tree
Showing 13 changed files with 73 additions and 80 deletions.
5 changes: 3 additions & 2 deletions components/carousel/nz-carousel.component.ts
View file
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
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
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
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
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
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
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
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
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

0 comments on commit 8992fc1

Please sign in to comment.