react95-native
Version:
Refreshed Windows 95 style UI components for your React Native app
125 lines • 4.29 kB
JavaScript
import React from 'react';
import { render, fireEvent } from '@testing-library/react-native';
import { NumberInput } from '../..';
describe('<NumberInput />', () => {
it('should call onChange on increment press', () => {
const handleChange = jest.fn();
const {
getByTestId
} = render( /*#__PURE__*/React.createElement(NumberInput, {
onChange: handleChange,
defaultValue: 2
}));
const spinButton = getByTestId('increment');
fireEvent(spinButton, 'press');
expect(handleChange).toHaveBeenCalledTimes(1);
expect(handleChange).toHaveBeenCalledWith(3);
});
it('should call onChange on decrement press', () => {
const handleChange = jest.fn();
const {
getByTestId
} = render( /*#__PURE__*/React.createElement(NumberInput, {
onChange: handleChange,
defaultValue: 2
}));
const spinButton = getByTestId('decrement');
fireEvent(spinButton, 'press');
expect(handleChange).toHaveBeenCalledTimes(1);
expect(handleChange).toHaveBeenCalledWith(1);
});
it('should reach max value', () => {
const {
getByTestId
} = render( /*#__PURE__*/React.createElement(NumberInput, {
defaultValue: 90,
min: 0,
max: 100,
step: 10
}));
const input = getByTestId('input');
const incrementButton = getByTestId('increment');
fireEvent(incrementButton, 'press');
expect(input.props.value).toBe('100');
});
it('should reach min value', () => {
const {
getByTestId
} = render( /*#__PURE__*/React.createElement(NumberInput, {
defaultValue: 10,
min: 0,
max: 100,
step: 10
}));
const input = getByTestId('input');
const decrementButton = getByTestId('decrement');
fireEvent(decrementButton, 'press');
expect(input.props.value).toBe('0');
});
describe('prop: step', () => {
it('should be 1 by default', () => {
const {
getByTestId
} = render( /*#__PURE__*/React.createElement(NumberInput, {
defaultValue: 0
}));
const input = getByTestId('input');
const incrementButton = getByTestId('increment');
fireEvent(incrementButton, 'press');
expect(input.props.value).toBe('1');
});
it('should change value by specified step', () => {
const {
getByTestId
} = render( /*#__PURE__*/React.createElement(NumberInput, {
defaultValue: 10,
step: 3
}));
const input = getByTestId('input');
const decrementButton = getByTestId('decrement');
fireEvent(decrementButton, 'press');
expect(input.props.value).toBe('7');
});
it('should handle decimal step', () => {
const {
getByTestId
} = render( /*#__PURE__*/React.createElement(NumberInput, {
defaultValue: 10,
step: 0.3
}));
const input = getByTestId('input');
const decrementButton = getByTestId('decrement');
fireEvent(decrementButton, 'press');
expect(input.props.value).toBe('9.7');
});
});
describe('prop: disabled', () => {// it('should render disabled', () => {
// const { getByTestId } = render(
// <NumberInput defaultValue={10} disabled />,
// );
// const input = getByTestId('input');
// const incrementButton = getByTestId('increment');
// const decrementButton = getByTestId('decrement');
// expect(input.props.editable).toBe(false);
// expect(incrementButton.props.disabled).toBe(true);
// expect(decrementButton.props.disabled).toBe(true);
// });
// it('should not react to button clicks', () => {
// const { getByTestId } = render(
// <NumberInput defaultValue={10} disabled />,
// );
// const input = getByTestId('input');
// const incrementButton = getByTestId('increment');
// const decrementButton = getByTestId('decrement');
// fireEvent(incrementButton, 'press');
// expect(input.props.value).toBe('10');
// fireEvent(decrementButton, 'press');
// expect(input.props.value).toBe('10');
// });
});
describe('prop: width', () => {
it('should render component of specified width', () => {});
it('should handle %', () => {});
});
});
//# sourceMappingURL=NumberInput.spec.js.map