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

fix(module:input-number): use input event instead of change event #8989

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
+299 −135
Open

fix(module:input-number): use input event instead of change event #8989

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
1 change: 0 additions & 1 deletion components/input-number-legacy/input-number.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -444,7 +444,6 @@ export class NzInputNumberLegacyComponent implements ControlValueAccessor, After
.monitor(this.elementRef, true)
.pipe(takeUntil(this.destroy$))
.subscribe(focusOrigin => {
console.log(focusOrigin);
if (!focusOrigin) {
this.isFocused = false;
this.updateDisplayValue(this.value!);
Expand Down
21 changes: 8 additions & 13 deletions components/input-number/demo/formatter.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,9 @@ import { NzInputNumberModule } from 'ng-zorro-antd/input-number';
selector: 'nz-demo-input-number-formatter',
imports: [FormsModule, NzInputNumberModule],
template: `
<nz-input-number [(ngModel)]="dollarValue" [nzFormatter]="formatterDollar" [nzParser]="parserDollar" />
<nz-input-number
[(ngModel)]="demoValue"
nzMin="1"
nzMax="100"
[nzFormatter]="formatterDollar"
[nzParser]="parserDollar"
/>
<nz-input-number
[(ngModel)]="demoValue"
[(ngModel)]="percentValue"
nzMin="1"
nzMax="100"
[nzFormatter]="formatterPercent"
Expand All @@ -31,9 +25,10 @@ import { NzInputNumberModule } from 'ng-zorro-antd/input-number';
]
})
export class NzDemoInputNumberFormatterComponent {
demoValue = 100;
formatterPercent = (value: number): string => `${value} %`;
parserPercent = (value: string): number => +value.replace(' %', '');
formatterDollar = (value: number): string => `$ ${value}`;
parserDollar = (value: string): number => +value.replace('$ ', '');
dollarValue = 1000;
percentValue = 100;
formatterDollar = (value: number): string => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
parserDollar = (value: string): number => parseFloat(value?.replace(/\$\s?|(,*)/g, ''));
formatterPercent = (value: number): string => `${value}%`;
parserPercent = (value: string): number => parseFloat(value?.replace('%', ''));
}
234 changes: 174 additions & 60 deletions components/input-number/input-number.component.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
*/

import { DOWN_ARROW, UP_ARROW } from '@angular/cdk/keycodes';
import { DOWN_ARROW, ENTER, UP_ARROW } from '@angular/cdk/keycodes';
import { Component, ElementRef, viewChild } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { FormsModule } from '@angular/forms';
Expand Down Expand Up @@ -134,19 +134,93 @@ describe('Input number', () => {
});
});

it('should be update value through user typing', () => {
component.min = 1;
component.max = 2;
fixture.detectChanges();
describe('should be update value through user typing', () => {
it('normal', () => {
input('123');
expect(component.value).toBe(123);
enter();
expect(component.value).toBe(123);
blur();
expect(component.value).toBe(123);

input('NonNumber');
expect(component.value).toBe(123);
enter();
expect(component.value).toBe(123);
blur();
expect(component.value).toBe(123);

input('');
expect(component.value).toBe(null);
enter();
expect(component.value).toBe(null);
blur();
expect(component.value).toBe(null);
});

userTypingInput('3');
expect(component.value).toBe(2);
userTypingInput('0');
expect(component.value).toBe(1);
userTypingInput('1');
expect(component.value).toBe(1);
userTypingInput('abc');
expect(component.value).toBe(null);
it('with range', () => {
component.min = 1;
component.max = 10;
fixture.detectChanges();

input('1');
expect(component.value).toBe(1);

input('99');
expect(component.value).toBe(1);
blur();
expect(component.value).toBe(10);

input('-99');
expect(component.value).toBe(10);
blur();
expect(component.value).toBe(1);

input('10');
expect(component.value).toBe(10);
blur();
expect(component.value).toBe(10);

input('');
expect(component.value).toBe(null);
blur();
expect(component.value).toBe(null);
});

it('with formatter', () => {
component.formatter = (value: number): string => `${value}%`;
component.parser = (value: string): number => parseFloat(value?.replace('%', ''));
fixture.detectChanges();

const inputElement = getInputElement();

input('123');
fixture.detectChanges();
expect(component.value).toBe(123);
expect(inputElement.value).toBe('123%');
blur();
fixture.detectChanges();
expect(component.value).toBe(123);
expect(inputElement.value).toBe('123%');

input('NonNumber');
fixture.detectChanges();
expect(component.value).toBe(123);
expect(inputElement.value).toBe('NonNumber');
blur();
fixture.detectChanges();
expect(component.value).toBe(123);
expect(inputElement.value).toBe('123%');

input('');
fixture.detectChanges();
expect(component.value).toBe(null);
expect(inputElement.value).toBe('');
blur();
fixture.detectChanges();
expect(component.value).toBe(null);
expect(inputElement.value).toBe('');
});
});

it('should be apply out-of-range class', async () => {
Expand All @@ -163,56 +237,85 @@ describe('Input number', () => {
expect(hostElement.classList).toContain('ant-input-number-out-of-range');
});

it('should be set min and max with precision', () => {
component.precision = 0;
describe('should be set min and max with precision', () => {
beforeEach(() => {
component.precision = 0;
component.value = null;
});

// max > 0
component.min = Number.MIN_SAFE_INTEGER;
component.max = 1.5;
fixture.detectChanges();
userTypingInput('1.1');
expect(component.value).toBe(1);
userTypingInput('1.5');
expect(component.value).toBe(1);
it('max > 0', () => {
component.min = Number.MIN_SAFE_INTEGER;
component.max = 1.5;
fixture.detectChanges();

// max < 0
component.min = Number.MIN_SAFE_INTEGER;
component.max = -1.5;
fixture.detectChanges();
userTypingInput('-1.1');
expect(component.value).toBe(-2);
userTypingInput('-1.5');
expect(component.value).toBe(-2);

// min > 0
component.min = 1.5;
component.max = Number.MAX_SAFE_INTEGER;
fixture.detectChanges();
userTypingInput('1.1');
expect(component.value).toBe(2);
userTypingInput('1.5');
expect(component.value).toBe(2);
input('1.1');
expect(component.value).toBe(1.1);
blur();
expect(component.value).toBe(1);
input('1.5');
expect(component.value).toBe(1.5);
blur();
expect(component.value).toBe(1);
});

// min < 0
component.min = -1.5;
component.max = Number.MAX_SAFE_INTEGER;
fixture.detectChanges();
userTypingInput('-1.1');
expect(component.value).toBe(-1);
userTypingInput('-1.5');
expect(component.value).toBe(-1);
it('max < 0', () => {
component.min = Number.MIN_SAFE_INTEGER;
component.max = -1.5;
fixture.detectChanges();

input('-1.1');
expect(component.value).toBe(null);
blur();
expect(component.value).toBe(-2);
input('-1.5');
expect(component.value).toBe(-1.5);
blur();
expect(component.value).toBe(-2);
});

it('min > 0', () => {
component.min = 1.5;
component.max = Number.MAX_SAFE_INTEGER;
fixture.detectChanges();

input('1.1');
expect(component.value).toBe(null);
blur();
expect(component.value).toBe(2);
input('1.5');
expect(component.value).toBe(1.5);
blur();
expect(component.value).toBe(2);
});

it('min < 0', () => {
component.min = -1.5;
component.max = Number.MAX_SAFE_INTEGER;
fixture.detectChanges();

input('-1.1');
expect(component.value).toBe(-1.1);
blur();
expect(component.value).toBe(-1);
input('-1.5');
expect(component.value).toBe(-1.5);
blur();
expect(component.value).toBe(-1);
});
});

it('should set precision', async () => {
it('should set value with precision', async () => {
component.precision = 1;
component.value = 1.23;
fixture.detectChanges();
await fixture.whenStable();

input('1.23');
expect(component.value).toBe(1.23);
blur();
expect(component.value).toBe(1.2);

component.value = 1.25;
fixture.detectChanges();
await fixture.whenStable();
input('1.25');
expect(component.value).toBe(1.25);
blur();
expect(component.value).toBe(1.3);
});

Expand Down Expand Up @@ -284,16 +387,23 @@ describe('Input number', () => {
function upStepByKeyboard(): void {
hostElement.dispatchEvent(new KeyboardEvent('keydown', { keyCode: UP_ARROW }));
}

function downStepByKeyboard(): void {
hostElement.dispatchEvent(new KeyboardEvent('keydown', { keyCode: DOWN_ARROW }));
}
function enter(): void {
hostElement.dispatchEvent(new KeyboardEvent('keydown', { keyCode: ENTER }));
}

function userTypingInput(text: string): void {
const input = hostElement.querySelector('input')!;
input.value = text;
input.dispatchEvent(new Event('input'));
input.dispatchEvent(new Event('change'));
function getInputElement(): HTMLInputElement {
return fixture.nativeElement.querySelector('input')!;
}
function input(text: string): void {
const element = getInputElement();
element.value = text;
element.dispatchEvent(new Event('input'));
}
function blur(): void {
getInputElement().dispatchEvent(new Event('blur'));
}
});

Expand Down Expand Up @@ -359,6 +469,8 @@ describe('Input number with affixes or addons', () => {
[nzBordered]="bordered"
[nzKeyboard]="keyboard"
[nzControls]="controls"
[nzParser]="parser"
[nzFormatter]="formatter"
[(ngModel)]="value"
[disabled]="controlDisabled"
/>
Expand All @@ -378,6 +490,8 @@ class InputNumberTestComponent {
bordered = true;
keyboard = true;
controls = true;
parser: ((value: string) => number) | undefined = undefined;
formatter: ((value: number) => string) | undefined = undefined;

value: number | null = null;
controlDisabled = false;
Expand Down
Loading