From 11fb01eb815f1ee97d3d6980c77c55750b071346 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=84=E4=BF=8A=E4=BA=AE?= Date: Wed, 21 Nov 2018 22:36:39 +0800 Subject: [PATCH] refactor(module:all): use cdk keycodes instead of magic number --- components/carousel/nz-carousel.component.ts | 5 +- components/carousel/nz-carousel.spec.ts | 9 ++-- components/cascader/nz-cascader.spec.ts | 48 ++++++------------- .../input-number/nz-input-number.component.ts | 5 +- components/input/nz-input.spec.ts | 3 +- components/rate/nz-rate.component.ts | 5 +- .../select/nz-option-container.component.ts | 9 ++-- components/select/nz-option-container.spec.ts | 31 ++++++------ .../select/nz-select-top-control.spec.ts | 5 +- components/select/nz-select.spec.ts | 10 ++-- components/switch/nz-switch.component.ts | 7 +-- components/switch/nz-switch.spec.ts | 13 ++--- components/upload/nz-upload-btn.component.ts | 3 +- 13 files changed, 73 insertions(+), 80 deletions(-) diff --git a/components/carousel/nz-carousel.component.ts b/components/carousel/nz-carousel.component.ts index 7658f01aa7f..409dafdc598 100755 --- a/components/carousel/nz-carousel.component.ts +++ b/components/carousel/nz-carousel.component.ts @@ -1,3 +1,4 @@ +import { LEFT_ARROW, RIGHT_ARROW } from '@angular/cdk/keycodes'; import { AfterContentInit, AfterViewInit, @@ -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(); } diff --git a/components/carousel/nz-carousel.spec.ts b/components/carousel/nz-carousel.spec.ts index 5dd8cfe3940..06a69d971b0 100644 --- a/components/carousel/nz-carousel.spec.ts +++ b/components/carousel/nz-carousel.spec.ts @@ -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'; @@ -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'); }); diff --git a/components/cascader/nz-cascader.spec.ts b/components/cascader/nz-cascader.spec.ts index e1e0aa8b301..f132d4c8e63 100644 --- a/components/cascader/nz-cascader.spec.ts +++ b/components/cascader/nz-cascader.spec.ts @@ -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'; @@ -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(); @@ -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); @@ -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); @@ -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(); @@ -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(); @@ -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(); @@ -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); @@ -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); @@ -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(); @@ -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); @@ -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'; @@ -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'; diff --git a/components/input-number/nz-input-number.component.ts b/components/input-number/nz-input-number.component.ts index 22983a04636..f9545023352 100644 --- a/components/input-number/nz-input-number.component.ts +++ b/components/input-number/nz-input-number.component.ts @@ -1,3 +1,4 @@ +import { DOWN_ARROW, UP_ARROW } from '@angular/cdk/keycodes'; import { forwardRef, AfterViewInit, @@ -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(); diff --git a/components/input/nz-input.spec.ts b/components/input/nz-input.spec.ts index 813da188ed0..03ec0a3de50 100644 --- a/components/input/nz-input.spec.ts +++ b/components/input/nz-input.spec.ts @@ -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'; @@ -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(); diff --git a/components/rate/nz-rate.component.ts b/components/rate/nz-rate.component.ts index b6e8ec28e04..26e78160e9c 100644 --- a/components/rate/nz-rate.component.ts +++ b/components/rate/nz-rate.component.ts @@ -1,3 +1,4 @@ +import { LEFT_ARROW, RIGHT_ARROW } from '@angular/cdk/keycodes'; import { forwardRef, AfterViewInit, @@ -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 { diff --git a/components/select/nz-option-container.component.ts b/components/select/nz-option-container.component.ts index 65a2421ea6a..8e9bf3eedc3 100644 --- a/components/select/nz-option-container.component.ts +++ b/components/select/nz-option-container.component.ts @@ -1,3 +1,4 @@ +import { DOWN_ARROW, ENTER, UP_ARROW } from '@angular/cdk/keycodes'; import { AfterContentInit, Component, @@ -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) { diff --git a/components/select/nz-option-container.spec.ts b/components/select/nz-option-container.spec.ts index de9ce3a25c9..f3d59596407 100644 --- a/components/select/nz-option-container.spec.ts +++ b/components/select/nz-option-container.spec.ts @@ -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'; @@ -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'); }); @@ -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'); }); @@ -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); @@ -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'); @@ -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(); @@ -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'; @@ -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); @@ -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); diff --git a/components/select/nz-select-top-control.spec.ts b/components/select/nz-select-top-control.spec.ts index 37ef00c9004..ab9d8478454 100644 --- a/components/select/nz-select-top-control.spec.ts +++ b/components/select/nz-select-top-control.spec.ts @@ -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'; @@ -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(); diff --git a/components/select/nz-select.spec.ts b/components/select/nz-select.spec.ts index 435a978c706..8186246f305 100644 --- a/components/select/nz-select.spec.ts +++ b/components/select/nz-select.spec.ts @@ -1,4 +1,4 @@ -import { DOWN_ARROW, SPACE, TAB } from '@angular/cdk/keycodes'; +import { DOWN_ARROW, ENTER, ESCAPE, SPACE, TAB, UP_ARROW } from '@angular/cdk/keycodes'; import { Component, ViewChild } from '@angular/core'; import { async, fakeAsync, flush, inject, tick, TestBed } from '@angular/core/testing'; import { FormsModule, FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms'; @@ -170,7 +170,7 @@ describe('nz-select component', () => { fixture.detectChanges(); select.nativeElement.click(); fixture.detectChanges(); - dispatchKeyboardEvent(document.body, 'keydown', 27); + dispatchKeyboardEvent(document.body, 'keydown', ESCAPE); fixture.detectChanges(); flush(); fixture.detectChanges(); @@ -183,7 +183,7 @@ describe('nz-select component', () => { })); it('should keydown origin work', () => { spyOn(testComponent.nzSelectComponent.nzOptionContainerComponent, 'onKeyDownUl'); - dispatchKeyboardEvent(select.nativeElement.querySelector('.ant-select-selection'), 'keydown', 38); + dispatchKeyboardEvent(select.nativeElement.querySelector('.ant-select-selection'), 'keydown', UP_ARROW); fixture.detectChanges(); expect(testComponent.nzSelectComponent.nzOptionContainerComponent.onKeyDownUl).toHaveBeenCalledTimes(1); }); @@ -198,10 +198,10 @@ describe('nz-select component', () => { testComponent.showSearch = true; select.nativeElement.click(); fixture.detectChanges(); - dispatchKeyboardEvent(select.nativeElement.querySelector('.ant-select-selection'), 'keydown', 40); + dispatchKeyboardEvent(select.nativeElement.querySelector('.ant-select-selection'), 'keydown', DOWN_ARROW); fixture.detectChanges(); expect(spy).not.toHaveBeenCalled(); - dispatchKeyboardEvent(select.nativeElement.querySelector('.ant-select-selection'), 'keydown', 13); + dispatchKeyboardEvent(select.nativeElement.querySelector('.ant-select-selection'), 'keydown', ENTER); fixture.detectChanges(); expect(spy).toHaveBeenCalled(); }); diff --git a/components/switch/nz-switch.component.ts b/components/switch/nz-switch.component.ts index 2b19ca5572f..85a3bd679b8 100644 --- a/components/switch/nz-switch.component.ts +++ b/components/switch/nz-switch.component.ts @@ -1,3 +1,4 @@ +import { ENTER, LEFT_ARROW, RIGHT_ARROW, SPACE } from '@angular/cdk/keycodes'; import { forwardRef, Component, @@ -138,13 +139,13 @@ export class NzSwitchComponent implements OnInit, ControlValueAccessor { onKeyDown(e: KeyboardEvent): void { if (!this.nzControl) { - if (e.keyCode === 37) { // Left + if (e.keyCode === LEFT_ARROW) { // Left this.updateValue(false, true); e.preventDefault(); - } else if (e.keyCode === 39) { // Right + } else if (e.keyCode === RIGHT_ARROW) { // Right this.updateValue(true, true); e.preventDefault(); - } else if (e.keyCode === 32 || e.keyCode === 13) { // Space, Enter + } else if (e.keyCode === SPACE || e.keyCode === ENTER) { // Space, Enter this.updateValue(!this.checked, true); e.preventDefault(); } diff --git a/components/switch/nz-switch.spec.ts b/components/switch/nz-switch.spec.ts index ea700bcfd4e..4ed4a187efa 100644 --- a/components/switch/nz-switch.spec.ts +++ b/components/switch/nz-switch.spec.ts @@ -1,3 +1,4 @@ +import { ENTER, LEFT_ARROW, RIGHT_ARROW, SPACE } from '@angular/cdk/keycodes'; import { Component, TemplateRef, ViewChild } from '@angular/core'; import { fakeAsync, flush, TestBed } from '@angular/core/testing'; import { FormsModule, FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms'; @@ -99,30 +100,30 @@ describe('switch', () => { fixture.detectChanges(); expect(testComponent.modelChange).toHaveBeenCalledTimes(1); expect(testComponent.value).toBe(true); - dispatchKeyboardEvent(switchElement.nativeElement.firstElementChild, 'keydown', 39); + dispatchKeyboardEvent(switchElement.nativeElement.firstElementChild, 'keydown', RIGHT_ARROW); fixture.detectChanges(); expect(testComponent.value).toBe(true); expect(testComponent.modelChange).toHaveBeenCalledTimes(1); - dispatchKeyboardEvent(switchElement.nativeElement.firstElementChild, 'keydown', 37); + dispatchKeyboardEvent(switchElement.nativeElement.firstElementChild, 'keydown', LEFT_ARROW); fixture.detectChanges(); expect(testComponent.value).toBe(false); expect(testComponent.modelChange).toHaveBeenCalledTimes(2); - dispatchKeyboardEvent(switchElement.nativeElement.firstElementChild, 'keydown', 37); + dispatchKeyboardEvent(switchElement.nativeElement.firstElementChild, 'keydown', LEFT_ARROW); fixture.detectChanges(); expect(testComponent.value).toBe(false); expect(testComponent.modelChange).toHaveBeenCalledTimes(2); - dispatchKeyboardEvent(switchElement.nativeElement.firstElementChild, 'keydown', 32); + dispatchKeyboardEvent(switchElement.nativeElement.firstElementChild, 'keydown', SPACE); fixture.detectChanges(); expect(testComponent.value).toBe(true); expect(testComponent.modelChange).toHaveBeenCalledTimes(3); - dispatchKeyboardEvent(switchElement.nativeElement.firstElementChild, 'keydown', 13); + dispatchKeyboardEvent(switchElement.nativeElement.firstElementChild, 'keydown', ENTER); fixture.detectChanges(); expect(testComponent.value).toBe(false); expect(testComponent.modelChange).toHaveBeenCalledTimes(4); testComponent.control = true; fixture.detectChanges(); - dispatchKeyboardEvent(switchElement.nativeElement.firstElementChild, 'keydown', 13); + dispatchKeyboardEvent(switchElement.nativeElement.firstElementChild, 'keydown', ENTER); fixture.detectChanges(); expect(testComponent.value).toBe(false); expect(testComponent.modelChange).toHaveBeenCalledTimes(4); diff --git a/components/upload/nz-upload-btn.component.ts b/components/upload/nz-upload-btn.component.ts index 8fe80df8573..38656f6a320 100644 --- a/components/upload/nz-upload-btn.component.ts +++ b/components/upload/nz-upload-btn.component.ts @@ -1,3 +1,4 @@ +import { ENTER } from '@angular/cdk/keycodes'; import { HttpClient, HttpEvent, HttpEventType, HttpHeaders, HttpRequest, HttpResponse } from '@angular/common/http'; import { ChangeDetectorRef, @@ -52,7 +53,7 @@ export class NzUploadBtnComponent implements OnInit, OnChanges, OnDestroy { if (this.options.disabled) { return; } - if (e.key === 'Enter') { + if (e.key === 'Enter' || e.keyCode === ENTER) { this.onClick(); } }