Skip to content

Commit 8992fc1

Browse files
JLHwungvthinkxie
JLHwung
authored and
vthinkxie
committed
refactor(module:all): use cdk keycodes instead of magic number (#2499)
1 parent e41640a commit 8992fc1

13 files changed

Lines changed: 73 additions & 80 deletions

‎components/carousel/nz-carousel.component.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { LEFT_ARROW, RIGHT_ARROW } from '@angular/cdk/keycodes';
12
import {
23
AfterContentInit,
34
AfterViewInit,
@@ -231,10 +232,10 @@ export class NzCarouselComponent implements AfterViewInit, OnDestroy, AfterConte
231232
}
232233

233234
onKeyDown(e: KeyboardEvent): void {
234-
if (e.keyCode === 37) { // Left
235+
if (e.keyCode === LEFT_ARROW) { // Left
235236
this.pre();
236237
e.preventDefault();
237-
} else if (e.keyCode === 39) { // Right
238+
} else if (e.keyCode === RIGHT_ARROW) { // Right
238239
this.next();
239240
e.preventDefault();
240241
}

‎components/carousel/nz-carousel.spec.ts‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { LEFT_ARROW, RIGHT_ARROW } from '@angular/cdk/keycodes';
12
import { Component, ViewChild } from '@angular/core';
23
import { fakeAsync, tick, TestBed } from '@angular/core/testing';
34
import { By } from '@angular/platform-browser';
@@ -73,16 +74,16 @@ describe('carousel', () => {
7374
fixture.detectChanges();
7475
expect(carouselContents[ 0 ].nativeElement.classList).toContain('slick-active');
7576
const list = carouselWrapper.nativeElement.querySelector('.slick-list');
76-
dispatchKeyboardEvent(list, 'keydown', 37);
77+
dispatchKeyboardEvent(list, 'keydown', LEFT_ARROW);
7778
fixture.detectChanges();
7879
expect(carouselContents[ 3 ].nativeElement.classList).toContain('slick-active');
79-
dispatchKeyboardEvent(list, 'keydown', 37);
80+
dispatchKeyboardEvent(list, 'keydown', LEFT_ARROW);
8081
fixture.detectChanges();
8182
expect(carouselContents[ 2 ].nativeElement.classList).toContain('slick-active');
82-
dispatchKeyboardEvent(list, 'keydown', 39);
83+
dispatchKeyboardEvent(list, 'keydown', RIGHT_ARROW);
8384
fixture.detectChanges();
8485
expect(carouselContents[ 3 ].nativeElement.classList).toContain('slick-active');
85-
dispatchKeyboardEvent(list, 'keydown', 39);
86+
dispatchKeyboardEvent(list, 'keydown', RIGHT_ARROW);
8687
fixture.detectChanges();
8788
expect(carouselContents[ 0 ].nativeElement.classList).toContain('slick-active');
8889
});

‎components/cascader/nz-cascader.spec.ts‎

Lines changed: 15 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,17 @@
11
// tslint:disable:no-any
2+
import {
3+
A,
4+
COMMA,
5+
DELETE,
6+
DOWN_ARROW, END,
7+
ENTER,
8+
ESCAPE, HOME,
9+
LEFT_ARROW, NINE,
10+
PAGE_DOWN,
11+
PAGE_UP,
12+
RIGHT_ARROW, SPACE, TAB,
13+
UP_ARROW, Z, ZERO
14+
} from '@angular/cdk/keycodes';
215
import { ConnectedOverlayPositionChange, OverlayContainer } from '@angular/cdk/overlay';
316
import { Component, TemplateRef, ViewChild } from '@angular/core';
417
import { async, fakeAsync, flush, inject, tick, TestBed } from '@angular/core/testing';
@@ -681,7 +694,6 @@ describe('cascader', () => {
681694
expect(overlayContainerElement.querySelectorAll('.ant-cascader-menu').length).toBe(2); // 2列
682695
});
683696
it('should click option to change column count 2', fakeAsync(() => {
684-
const LEFT_ARROW = 37;
685697
testComponent.values = [ 'zhejiang', 'hangzhou', 'xihu' ];
686698
fixture.detectChanges();
687699
cascader.nativeElement.click();
@@ -780,7 +792,6 @@ describe('cascader', () => {
780792
expect(overlayContainerElement.querySelectorAll('.ant-cascader-menu').length).toBe(0);
781793
}));
782794
it('should open menu when press DOWN_ARROW', fakeAsync(() => {
783-
const DOWN_ARROW = 40;
784795
fixture.detectChanges();
785796
expect(testComponent.cascader.isMenuVisible()).toBe(false);
786797
dispatchKeyboardEvent(cascader.nativeElement, 'keydown', DOWN_ARROW);
@@ -790,7 +801,6 @@ describe('cascader', () => {
790801
expect(testComponent.cascader.isMenuVisible()).toBe(true);
791802
}));
792803
it('should open menu when press UP_ARROW', fakeAsync(() => {
793-
const UP_ARROW = 38;
794804
fixture.detectChanges();
795805
expect(testComponent.cascader.isMenuVisible()).toBe(false);
796806
dispatchKeyboardEvent(cascader.nativeElement, 'keydown', UP_ARROW);
@@ -799,20 +809,18 @@ describe('cascader', () => {
799809
fixture.detectChanges();
800810
expect(testComponent.cascader.isMenuVisible()).toBe(true);
801811
}));
802-
it('should close menu when press ESC', fakeAsync(() => {
803-
const ESC = 27;
812+
it('should close menu when press ESCAPE', fakeAsync(() => {
804813
fixture.detectChanges();
805814
testComponent.cascader.setMenuVisible(true);
806815
fixture.detectChanges();
807816
expect(testComponent.cascader.isMenuVisible()).toBe(true);
808-
dispatchKeyboardEvent(cascader.nativeElement, 'keydown', ESC);
817+
dispatchKeyboardEvent(cascader.nativeElement, 'keydown', ESCAPE);
809818
fixture.detectChanges();
810819
flush(); // wait for cdk-overlay to close
811820
fixture.detectChanges();
812821
expect(testComponent.cascader.isMenuVisible()).toBe(false);
813822
}));
814823
it('should navigate up when press UP_ARROW', fakeAsync(() => {
815-
const UP_ARROW = 38;
816824
fixture.detectChanges();
817825
testComponent.cascader.setMenuVisible(true);
818826
fixture.detectChanges();
@@ -829,7 +837,6 @@ describe('cascader', () => {
829837
expect(itemEl1.classList).not.toContain('ant-cascader-menu-item-active');
830838
}));
831839
it('should navigate down when press DOWN_ARROW', fakeAsync(() => {
832-
const DOWN_ARROW = 40;
833840
fixture.detectChanges();
834841
testComponent.cascader.setMenuVisible(true);
835842
fixture.detectChanges();
@@ -840,8 +847,6 @@ describe('cascader', () => {
840847
expect(itemEl1.classList).toContain('ant-cascader-menu-item-active');
841848
}));
842849
it('should navigate right when press RIGHT_ARROW', fakeAsync(() => {
843-
const DOWN_ARROW = 40;
844-
const RIGHT_ARROW = 39;
845850
fixture.detectChanges();
846851
testComponent.cascader.setMenuVisible(true);
847852
fixture.detectChanges();
@@ -863,7 +868,6 @@ describe('cascader', () => {
863868
expect(itemEl3.classList).toContain('ant-cascader-menu-item-active');
864869
}));
865870
it('should navigate left when press LEFT_ARROW', fakeAsync(() => {
866-
const LEFT_ARROW = 37;
867871
fixture.detectChanges();
868872
testComponent.values = [ 'zhejiang', 'hangzhou', 'xihu' ];
869873
testComponent.cascader.setMenuVisible(true);
@@ -895,9 +899,6 @@ describe('cascader', () => {
895899
expect(itemEl3.classList).not.toContain('ant-cascader-menu-item-active');
896900
}));
897901
it('should select option when press ENTER', fakeAsync(() => {
898-
const DOWN_ARROW = 40;
899-
const RIGHT_ARROW = 39;
900-
const ENTER = 13;
901902
fixture.detectChanges();
902903
expect(testComponent.values).toBeNull();
903904
testComponent.cascader.setMenuVisible(true);
@@ -933,9 +934,6 @@ describe('cascader', () => {
933934
expect(testComponent.cascader.isMenuVisible()).toBe(false);
934935
}));
935936
it('should key nav disabled option correct', fakeAsync(() => {
936-
const DOWN_ARROW = 40;
937-
const RIGHT_ARROW = 39;
938-
const UP_ARROW = 38;
939937

940938
testComponent.nzOptions = options2;
941939
fixture.detectChanges();
@@ -987,18 +985,6 @@ describe('cascader', () => {
987985
expect(optionEl14.classList).not.toContain('ant-cascader-menu-item-active');
988986
}));
989987
it('should ignore keyboardEvent on some key', fakeAsync(() => {
990-
const PAGE_UP = 33;
991-
const PAGE_DOWN = 34;
992-
const TAB = 9;
993-
const HOME = 36;
994-
const END = 35;
995-
const SPACE = 32;
996-
const DELETE = 46;
997-
const COMMA = 188;
998-
const A = 65;
999-
const Z = 90;
1000-
const ZERO = 48;
1001-
const NINE = 57;
1002988
const keys = [ PAGE_UP, PAGE_DOWN, TAB, HOME, END, SPACE, COMMA, DELETE ];
1003989
for (let k = A; k <= Z; k++) {
1004990
keys.push(k);
@@ -1426,8 +1412,6 @@ describe('cascader', () => {
14261412
expect(testComponent.cascader.nzColumns[ 0 ][ 2 ].disabled).toBe(true);
14271413
});
14281414
it('should support arrow in search mode', (done) => {
1429-
const DOWN_ARROW = 40;
1430-
const ENTER = 13;
14311415
testComponent.nzOptions = options2;
14321416
fixture.detectChanges();
14331417
testComponent.cascader.inputValue = 'o';
@@ -1450,8 +1434,6 @@ describe('cascader', () => {
14501434
});
14511435
});
14521436
it('should not preventDefault left/right arrow in search mode', () => {
1453-
const LEFT_ARROW = 37;
1454-
const RIGHT_ARROW = 39;
14551437
fixture.detectChanges();
14561438
testComponent.nzShowSearch = true;
14571439
testComponent.cascader.inputValue = 'o';

‎components/input-number/nz-input-number.component.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { DOWN_ARROW, UP_ARROW } from '@angular/cdk/keycodes';
12
import {
23
forwardRef,
34
AfterViewInit,
@@ -319,11 +320,11 @@ export class NzInputNumberComponent implements ControlValueAccessor, AfterViewIn
319320
}
320321

321322
onKeyDown(e: KeyboardEvent): void {
322-
if (e.code === 'ArrowUp' || e.keyCode === 38) {
323+
if (e.code === 'ArrowUp' || e.keyCode === UP_ARROW) {
323324
const ratio = this.getRatio(e);
324325
this.up(e, ratio);
325326
this.stop();
326-
} else if (e.code === 'ArrowDown' || e.keyCode === 40) {
327+
} else if (e.code === 'ArrowDown' || e.keyCode === DOWN_ARROW) {
327328
const ratio = this.getRatio(e);
328329
this.down(e, ratio);
329330
this.stop();

‎components/input/nz-input.spec.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { ENTER } from '@angular/cdk/keycodes';
12
import { Component, TemplateRef, ViewChild } from '@angular/core';
23
import { async, fakeAsync, flush, TestBed } from '@angular/core/testing';
34
import { FormsModule, FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
@@ -75,7 +76,7 @@ describe('input', () => {
7576
});
7677
it('should resize when input change', fakeAsync(() => {
7778
const previousHeight = textarea.clientHeight;
78-
dispatchKeyboardEvent(textarea, 'input', 13, textarea);
79+
dispatchKeyboardEvent(textarea, 'input', ENTER, textarea);
7980
testComponent.value = '\n';
8081
fixture.detectChanges();
8182
flush();

‎components/rate/nz-rate.component.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { LEFT_ARROW, RIGHT_ARROW } from '@angular/cdk/keycodes';
12
import {
23
forwardRef,
34
AfterViewInit,
@@ -208,14 +209,14 @@ export class NzRateComponent implements OnInit, ControlValueAccessor, AfterViewI
208209

209210
onKeyDown(e: KeyboardEvent): void {
210211
const code = e.code;
211-
if ((code === 'ArrowRight' || e.keyCode === 39) && (this.nzValue < this.nzCount)) {
212+
if ((code === 'ArrowRight' || e.keyCode === RIGHT_ARROW) && (this.nzValue < this.nzCount)) {
212213
if (this.nzAllowHalf) {
213214
this.nzValue += 0.5;
214215
} else {
215216
this.nzValue += 1;
216217
}
217218
this.onChange(this.nzValue);
218-
} else if ((code === 'ArrowLeft' || e.keyCode === 37) && (this.nzValue > 0)) {
219+
} else if ((code === 'ArrowLeft' || e.keyCode === LEFT_ARROW) && (this.nzValue > 0)) {
219220
if (this.nzAllowHalf) {
220221
this.nzValue -= 0.5;
221222
} else {

‎components/select/nz-option-container.component.ts‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { DOWN_ARROW, ENTER, UP_ARROW } from '@angular/cdk/keycodes';
12
import {
23
AfterContentInit,
34
Component,
@@ -90,18 +91,18 @@ export class NzOptionContainerComponent implements AfterContentInit, OnDestroy {
9091
}
9192

9293
onKeyDownUl(e: KeyboardEvent): void {
93-
if ([ 38, 40, 13 ].indexOf(e.keyCode) > -1) {
94+
if ([ UP_ARROW, DOWN_ARROW, ENTER ].indexOf(e.keyCode) > -1) {
9495
e.preventDefault();
9596
const activeIndex = this.listOfFilterOption.findIndex(item => item === this.activatedOption);
96-
if (e.keyCode === 38) {
97+
if (e.keyCode === UP_ARROW) {
9798
// arrow up
9899
const preIndex = activeIndex > 0 ? (activeIndex - 1) : (this.listOfFilterOption.length - 1);
99100
this.setActiveOption(this.listOfFilterOption[ preIndex ]);
100-
} else if (e.keyCode === 40) {
101+
} else if (e.keyCode === DOWN_ARROW) {
101102
// arrow down
102103
const nextIndex = activeIndex < this.listOfFilterOption.length - 1 ? (activeIndex + 1) : 0;
103104
this.setActiveOption(this.listOfFilterOption[ nextIndex ]);
104-
} else if (e.keyCode === 13) {
105+
} else if (e.keyCode === ENTER) {
105106
// enter
106107
if (this.isTagsMode) {
107108
if (!this.isAddTagOptionDisplay) {

‎components/select/nz-option-container.spec.ts‎

Lines changed: 16 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { DOWN_ARROW, ENTER, UP_ARROW } from '@angular/cdk/keycodes';
12
import { Component, QueryList, ViewChild } from '@angular/core';
23
import { async, fakeAsync, TestBed } from '@angular/core/testing';
34
import { By } from '@angular/platform-browser';
@@ -136,7 +137,7 @@ describe('nz-select option container', () => {
136137
const ul = oc.nativeElement.querySelector('.ant-select-dropdown-menu');
137138
fixture.detectChanges();
138139
fixture.whenStable().then(() => {
139-
dispatchKeyboardEvent(ul, 'keydown', 38);
140+
dispatchKeyboardEvent(ul, 'keydown', UP_ARROW);
140141
fixture.detectChanges();
141142
expect(oc.nativeElement.querySelector('.ant-select-dropdown-menu-item-active').innerText).toBe('sub2-3');
142143
});
@@ -146,8 +147,8 @@ describe('nz-select option container', () => {
146147
const ul = oc.nativeElement.querySelector('.ant-select-dropdown-menu');
147148
fixture.detectChanges();
148149
fixture.whenStable().then(() => {
149-
dispatchKeyboardEvent(ul, 'keydown', 40);
150-
dispatchKeyboardEvent(ul, 'keydown', 40);
150+
dispatchKeyboardEvent(ul, 'keydown', DOWN_ARROW);
151+
dispatchKeyboardEvent(ul, 'keydown', DOWN_ARROW);
151152
fixture.detectChanges();
152153
expect(oc.nativeElement.querySelector('.ant-select-dropdown-menu-item-active').innerText).toBe('test2');
153154
});
@@ -157,7 +158,7 @@ describe('nz-select option container', () => {
157158
const ul = oc.nativeElement.querySelector('.ant-select-dropdown-menu');
158159
fixture.detectChanges();
159160
fixture.whenStable().then(() => {
160-
dispatchKeyboardEvent(ul, 'keydown', 13);
161+
dispatchKeyboardEvent(ul, 'keydown', ENTER);
161162
fixture.detectChanges();
162163
expect(testComponent.clickOption).toHaveBeenCalledTimes(1);
163164
expect(testComponent.updateListOfSelectedValueFromOptionContainer).toHaveBeenCalledTimes(0);
@@ -168,10 +169,10 @@ describe('nz-select option container', () => {
168169
const ul = oc.nativeElement.querySelector('.ant-select-dropdown-menu');
169170
fixture.detectChanges();
170171
fixture.whenStable().then(() => {
171-
dispatchKeyboardEvent(ul, 'keydown', 40);
172-
dispatchKeyboardEvent(ul, 'keydown', 40);
172+
dispatchKeyboardEvent(ul, 'keydown', DOWN_ARROW);
173+
dispatchKeyboardEvent(ul, 'keydown', DOWN_ARROW);
173174
fixture.detectChanges();
174-
dispatchKeyboardEvent(ul, 'keydown', 13);
175+
dispatchKeyboardEvent(ul, 'keydown', ENTER);
175176
fixture.detectChanges();
176177
expect(testComponent.clickOption).toHaveBeenCalledTimes(1);
177178
expect(testComponent.listOfSelectedValue[ 0 ].value).toBe('test2');
@@ -183,8 +184,8 @@ describe('nz-select option container', () => {
183184
const ul = oc.nativeElement.querySelector('.ant-select-dropdown-menu');
184185
fixture.detectChanges();
185186
fixture.whenStable().then(() => {
186-
dispatchKeyboardEvent(ul, 'keydown', 40);
187-
dispatchKeyboardEvent(ul, 'keydown', 40);
187+
dispatchKeyboardEvent(ul, 'keydown', DOWN_ARROW);
188+
dispatchKeyboardEvent(ul, 'keydown', DOWN_ARROW);
188189
fixture.detectChanges();
189190
expect(oc.nativeElement.querySelector('.ant-select-dropdown-menu-item-active').innerText).toBe('test2');
190191
testComponent.nzOptionContainerComponent.resetActiveOption();
@@ -197,8 +198,8 @@ describe('nz-select option container', () => {
197198
const ul = oc.nativeElement.querySelector('.ant-select-dropdown-menu');
198199
fixture.detectChanges();
199200
fixture.whenStable().then(() => {
200-
dispatchKeyboardEvent(ul, 'keydown', 40);
201-
dispatchKeyboardEvent(ul, 'keydown', 40);
201+
dispatchKeyboardEvent(ul, 'keydown', DOWN_ARROW);
202+
dispatchKeyboardEvent(ul, 'keydown', DOWN_ARROW);
202203
fixture.detectChanges();
203204
expect(oc.nativeElement.querySelector('.ant-select-dropdown-menu-item-active').innerText).toBe('test2');
204205
testComponent.searchValue = 'sub1-1';
@@ -247,10 +248,10 @@ describe('nz-select option container', () => {
247248
fixture.whenStable().then(() => {
248249
expect(testComponent.nzOptionContainerComponent.listOfTagOption.length).toBe(1);
249250
const ul = oc.nativeElement.querySelector('.ant-select-dropdown-menu');
250-
dispatchKeyboardEvent(ul, 'keydown', 38);
251-
dispatchKeyboardEvent(ul, 'keydown', 38);
251+
dispatchKeyboardEvent(ul, 'keydown', UP_ARROW);
252+
dispatchKeyboardEvent(ul, 'keydown', UP_ARROW);
252253
fixture.detectChanges();
253-
dispatchKeyboardEvent(ul, 'keydown', 13);
254+
dispatchKeyboardEvent(ul, 'keydown', ENTER);
254255
fixture.detectChanges();
255256
expect(testComponent.nzOptionContainerComponent.listOfTagOption.length).toBe(1);
256257
expect(testComponent.listOfSelectedValue.length).toBe(3);
@@ -262,7 +263,7 @@ describe('nz-select option container', () => {
262263
fixture.whenStable().then(() => {
263264
expect(testComponent.nzOptionContainerComponent.listOfTagOption.length).toBe(1);
264265
const ul = oc.nativeElement.querySelector('.ant-select-dropdown-menu');
265-
dispatchKeyboardEvent(ul, 'keydown', 13);
266+
dispatchKeyboardEvent(ul, 'keydown', ENTER);
266267
fixture.detectChanges();
267268
expect(testComponent.nzOptionContainerComponent.listOfTagOption.length).toBe(2);
268269
expect(testComponent.listOfSelectedValue.length).toBe(3);

‎components/select/nz-select-top-control.spec.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { BACKSPACE } from '@angular/cdk/keycodes';
12
import { Component, ViewChild } from '@angular/core';
23
import { fakeAsync, flush, tick, TestBed } from '@angular/core/testing';
34
import { By } from '@angular/platform-browser';
@@ -163,14 +164,14 @@ describe('nz-select top control', () => {
163164
expect(ul.children[ 0 ].querySelector('.ant-select-selection__choice__content').innerText).toBe('test1');
164165
expect(ul.children[ 1 ].querySelector('.ant-select-selection__choice__content').innerText).toBe('test2');
165166
expect(ul.children[ 2 ].querySelector('.ant-select-selection__choice__content').innerText).toBe('test3');
166-
dispatchKeyboardEvent(tc.nativeElement.querySelector('.ant-select-search__field'), 'keydown', 8, tc.nativeElement.querySelector('.ant-select-search__field'));
167+
dispatchKeyboardEvent(tc.nativeElement.querySelector('.ant-select-search__field'), 'keydown', BACKSPACE, tc.nativeElement.querySelector('.ant-select-search__field'));
167168
fixture.detectChanges();
168169
tick();
169170
fixture.detectChanges();
170171
expect(ul.children.length).toBe(3);
171172
expect(ul.children[ 0 ].querySelector('.ant-select-selection__choice__content').innerText).toBe('test1');
172173
expect(ul.children[ 1 ].querySelector('.ant-select-selection__choice__content').innerText).toBe('test2');
173-
dispatchKeyboardEvent(tc.nativeElement.querySelector('.ant-select-search__field'), 'keydown', 8, tc.nativeElement.querySelector('.ant-select-search__field'));
174+
dispatchKeyboardEvent(tc.nativeElement.querySelector('.ant-select-search__field'), 'keydown', BACKSPACE, tc.nativeElement.querySelector('.ant-select-search__field'));
174175
fixture.detectChanges();
175176
tick();
176177
fixture.detectChanges();

0 commit comments

Comments
 (0)