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
Original file line number Diff line number Diff line change
Expand Up @@ -129,6 +129,7 @@ export const NumberInput: React.FunctionComponent<NumberInputProps> = ({
</span>
</Button>
<TextInput
{...inputProps}
type="number"
value={value}
name={inputName}
Expand All @@ -139,7 +140,6 @@ export const NumberInput: React.FunctionComponent<NumberInputProps> = ({
{...(!onChange && { isReadOnly: true })}
onKeyDown={keyDownHandler}
validated={validated}
{...inputProps}
/>
<Button
variant="control"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,19 +10,19 @@ describe('numberInput', () => {
});

test('renders success validated', () => {
const { asFragment } = render(<NumberInput validated='success' />);
const { asFragment } = render(<NumberInput validated="success" />);
expect(asFragment()).toMatchSnapshot();
})
});

test('renders error validated', () => {
const { asFragment } = render(<NumberInput validated='error' />);
const { asFragment } = render(<NumberInput validated="error" />);
expect(asFragment()).toMatchSnapshot();
})
});

test('renders warning validated', () => {
const { asFragment } = render(<NumberInput validated='warning' />);
const { asFragment } = render(<NumberInput validated="warning" />);
expect(asFragment()).toMatchSnapshot();
})
});

test('renders value', () => {
const { asFragment } = render(<NumberInput value={90} />);
Expand Down Expand Up @@ -136,37 +136,37 @@ describe('numberInput', () => {

test('removes leading zeros from a positive whole number', () => {
render(<NumberInput value={10} onChange={() => {}} />);

const input = screen.getByRole('spinbutton');
userEvent.type(input, '{arrowleft}{arrowleft}0');
expect(input).toHaveDisplayValue('010');

userEvent.click(document.body);

expect(input).toHaveDisplayValue('10');
});

test('removes leading zeros from a negative whole number', () => {
render(<NumberInput value={-18} onChange={() => {}} />);

const input = screen.getByRole('spinbutton');
userEvent.type(input, '{arrowleft}{arrowleft}0');
expect(input).toHaveDisplayValue('-018');

userEvent.click(document.body);

expect(input).toHaveDisplayValue('-18');
});

test('removes leading zeros from a decimal number', () => {
render(<NumberInput value={47.01} onChange={() => {}} />);

const input = screen.getByRole('spinbutton');
userEvent.type(input, '{arrowleft}{arrowleft}{arrowleft}{arrowleft}{arrowleft}0');
expect(input).toHaveDisplayValue('047.01');

userEvent.click(document.body);

expect(input).toHaveDisplayValue('47.01');
});

Expand All @@ -187,4 +187,23 @@ describe('numberInput', () => {
const input = screen.getByRole('spinbutton');
expect(input).toHaveDisplayValue('0');
});

test('does not throw an error if onChange is passed via inputProps as well as the onChange prop', () => {
const consoleSpy = jest.spyOn(console, 'error').mockImplementation(() => {});

const NumberInputWrapper = () => {
const [value, setValue] = React.useState(0);
const onChange = event => setValue(event.currentTarget.value);
const inputProps = { onChange: onChange };

return <NumberInput value={value} onChange={onChange} inputProps={{ ...inputProps }} />;
};

render(<NumberInputWrapper />);

const input = screen.getByRole('spinbutton');
userEvent.type(input, '0');

expect(consoleSpy).not.toHaveBeenCalled();
});
});