Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
4 changes: 0 additions & 4 deletions .husky/pre-commit

This file was deleted.

2 changes: 2 additions & 0 deletions src/InputNumber.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -373,6 +373,8 @@ const InternalInputNumber = React.forwardRef(
recordCursor();

// Update inputValue in case input can not parse as number
// Refresh ref value immediately since it may used by formatter
inputValueRef.current = inputStr;
setInternalInputValue(inputStr);

// Parse number
Expand Down
63 changes: 38 additions & 25 deletions tests/formatter.test.tsx
Original file line number Diff line number Diff line change
@@ -1,17 +1,19 @@
import KeyCode from 'rc-util/lib/KeyCode';
import React from 'react';
import { render, fireEvent } from './util/wrapper';
import InputNumber from '../src';
import KeyCode from 'rc-util/lib/KeyCode';
import { fireEvent, render } from './util/wrapper';

describe('InputNumber.Formatter', () => {
it('formatter on default', () => {
const { container } = render(<InputNumber step={1} value={5} formatter={num => `$ ${num}`} />);
const { container } = render(
<InputNumber step={1} value={5} formatter={(num) => `$ ${num}`} />,
);
const input = container.querySelector('input');
expect(input.value).toEqual('$ 5');
});

it('formatter on mousedown', () => {
const { container } = render(<InputNumber defaultValue={5} formatter={num => `$ ${num}`} />);
const { container } = render(<InputNumber defaultValue={5} formatter={(num) => `$ ${num}`} />);
const input = container.querySelector('input');
fireEvent.mouseDown(container.querySelector('.rc-input-number-handler-up'));
expect(input.value).toEqual('$ 6');
Expand All @@ -23,7 +25,7 @@ describe('InputNumber.Formatter', () => {
it('formatter on keydown', () => {
const onChange = jest.fn();
const { container } = render(
<InputNumber defaultValue={5} onChange={onChange} formatter={num => `$ ${num} ¥`} />,
<InputNumber defaultValue={5} onChange={onChange} formatter={(num) => `$ ${num} ¥`} />,
);

const input = container.querySelector('input');
Expand Down Expand Up @@ -51,7 +53,7 @@ describe('InputNumber.Formatter', () => {
it('formatter on direct input', () => {
const onChange = jest.fn();
const { container } = render(
<InputNumber defaultValue={5} formatter={num => `$ ${num}`} onChange={onChange} />,
<InputNumber defaultValue={5} formatter={(num) => `$ ${num}`} onChange={onChange} />,
);
const input = container.querySelector('input');
fireEvent.focus(input);
Expand All @@ -66,8 +68,8 @@ describe('InputNumber.Formatter', () => {
const { container } = render(
<InputNumber
defaultValue={5}
formatter={num => `$ ${num} boeing 737`}
parser={num => num.toString().split(' ')[1]}
formatter={(num) => `$ ${num} boeing 737`}
parser={(num) => num.toString().split(' ')[1]}
onChange={onChange}
/>,
);
Expand Down Expand Up @@ -115,7 +117,7 @@ describe('InputNumber.Formatter', () => {

return String(num);
}}
parser={num => {
parser={(num) => {
numValue = num;
return Number(num);
}}
Expand All @@ -134,22 +136,33 @@ describe('InputNumber.Formatter', () => {
fireEvent.blur(input);
expect(input.value).toEqual('0');
});
});

it('in strictMode render correct defaultValue ', () => {
const Demo = () => {
return (
<React.StrictMode>
<div>
<InputNumber defaultValue={5} formatter={num => `$ ${num}`} />
</div>
</React.StrictMode>
);
};
const { container } = render(<Demo />);
const input = container.querySelector('input');
expect(input.value).toEqual('$ 5');
it('in strictMode render correct defaultValue ', () => {
const Demo = () => {
return (
<React.StrictMode>
<div>
<InputNumber defaultValue={5} formatter={(num) => `$ ${num}`} />
</div>
</React.StrictMode>
);
};
const { container } = render(<Demo />);
const input = container.querySelector('input');
expect(input.value).toEqual('$ 5');

fireEvent.change(input, { target: { value: 3 } });
expect(input.value).toEqual('$ 3')
fireEvent.change(input, { target: { value: 3 } });
expect(input.value).toEqual('$ 3');
});

it('formatter info should be correct', () => {
const formatter = jest.fn();
const { container } = render(<InputNumber formatter={formatter} />);

formatter.mockReset();

fireEvent.change(container.querySelector('input'), { target: { value: '1' } });
expect(formatter).toHaveBeenCalledTimes(1);
expect(formatter).toHaveBeenCalledWith('1', { userTyping: true, input: '1' });
});
});