111 lines
4.9 KiB
JavaScript
111 lines
4.9 KiB
JavaScript
"use strict";
|
|
|
|
var _react = _interopRequireDefault(require("react"));
|
|
var _enzyme = require("enzyme");
|
|
var _InputRangeField = _interopRequireDefault(require("../InputRangeField"));
|
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
const styles = {
|
|
inputRange: 'range',
|
|
inputRangeInput: 'input',
|
|
inputRangeLabel: 'label'
|
|
};
|
|
const toChangeEvent = value => ({
|
|
target: {
|
|
value
|
|
}
|
|
});
|
|
describe('InputRangeField tests', () => {
|
|
test('Should parse input value to number', () => {
|
|
const onChange = jest.fn();
|
|
const wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_InputRangeField.default, {
|
|
label: "Input label",
|
|
styles: styles,
|
|
onChange: onChange,
|
|
onFocus: jest.fn(),
|
|
onBlur: jest.fn()
|
|
}));
|
|
wrapper.find('input').simulate('change', toChangeEvent('3'));
|
|
expect(onChange).lastCalledWith(3);
|
|
wrapper.find('input').simulate('change', toChangeEvent(12));
|
|
expect(onChange).lastCalledWith(12);
|
|
wrapper.find('input').simulate('change', toChangeEvent(''));
|
|
expect(onChange).lastCalledWith(0);
|
|
wrapper.find('input').simulate('change', toChangeEvent('invalid number'));
|
|
expect(onChange).lastCalledWith(0);
|
|
wrapper.find('input').simulate('change', toChangeEvent(-12));
|
|
expect(onChange).lastCalledWith(0);
|
|
wrapper.find('input').simulate('change', toChangeEvent(99999999));
|
|
expect(onChange).lastCalledWith(99999);
|
|
expect(onChange).toHaveBeenCalledTimes(6);
|
|
expect(wrapper).toMatchSnapshot();
|
|
});
|
|
test('Should rerender when props change', () => {
|
|
const wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_InputRangeField.default, {
|
|
value: 12,
|
|
placeholder: "Placeholder",
|
|
label: "Input label",
|
|
styles: styles,
|
|
onChange: jest.fn(),
|
|
onFocus: jest.fn(),
|
|
onBlur: jest.fn()
|
|
}));
|
|
expect(wrapper.find(`.${styles.inputRangeInput}`).prop('value')).toEqual(12);
|
|
expect(wrapper.find(`.${styles.inputRangeInput}`).prop('placeholder')).toEqual('Placeholder');
|
|
expect(wrapper.find(`.${styles.inputRangeLabel}`).text()).toEqual('Input label');
|
|
wrapper.setProps({
|
|
value: '32'
|
|
});
|
|
expect(wrapper.find(`.${styles.inputRangeInput}`).prop('value')).toEqual('32');
|
|
expect(wrapper.find(`.${styles.inputRangeInput}`).prop('placeholder')).toEqual('Placeholder');
|
|
expect(wrapper.find(`.${styles.inputRangeLabel}`).text()).toEqual('Input label');
|
|
wrapper.setProps({
|
|
placeholder: '-'
|
|
});
|
|
expect(wrapper.find(`.${styles.inputRangeInput}`).prop('value')).toEqual('32');
|
|
expect(wrapper.find(`.${styles.inputRangeInput}`).prop('placeholder')).toEqual('-');
|
|
expect(wrapper.find(`.${styles.inputRangeLabel}`).text()).toEqual('Input label');
|
|
wrapper.setProps({
|
|
label: 'Label'
|
|
});
|
|
expect(wrapper.find(`.${styles.inputRangeInput}`).prop('value')).toEqual('32');
|
|
expect(wrapper.find(`.${styles.inputRangeInput}`).prop('placeholder')).toEqual('-');
|
|
expect(wrapper.find(`.${styles.inputRangeLabel}`).text()).toEqual('Label');
|
|
});
|
|
test('Should render the label as a Component', () => {
|
|
const Label = () => /*#__PURE__*/_react.default.createElement("span", {
|
|
className: "input-range-field-label"
|
|
}, "Input label");
|
|
const wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_InputRangeField.default, {
|
|
value: 12,
|
|
placeholder: "Placeholder",
|
|
label: /*#__PURE__*/_react.default.createElement(Label, null),
|
|
styles: styles,
|
|
onChange: jest.fn(),
|
|
onFocus: jest.fn(),
|
|
onBlur: jest.fn()
|
|
}));
|
|
expect(wrapper.find(`.${styles.inputRangeInput}`).prop('value')).toEqual(12);
|
|
expect(wrapper.find(`.${styles.inputRangeInput}`).prop('placeholder')).toEqual('Placeholder');
|
|
expect(wrapper.find(`.${styles.inputRangeLabel}`).text()).toEqual('Input label');
|
|
expect(wrapper.find(`.${styles.inputRangeLabel}`).text()).toEqual('Input label');
|
|
expect(wrapper.find(`.input-range-field-label`).text()).toEqual('Input label');
|
|
wrapper.setProps({
|
|
value: '32'
|
|
});
|
|
expect(wrapper.find(`.${styles.inputRangeInput}`).prop('value')).toEqual('32');
|
|
expect(wrapper.find(`.${styles.inputRangeInput}`).prop('placeholder')).toEqual('Placeholder');
|
|
expect(wrapper.find(`.${styles.inputRangeLabel}`).text()).toEqual('Input label');
|
|
wrapper.setProps({
|
|
placeholder: '-'
|
|
});
|
|
expect(wrapper.find(`.${styles.inputRangeInput}`).prop('value')).toEqual('32');
|
|
expect(wrapper.find(`.${styles.inputRangeInput}`).prop('placeholder')).toEqual('-');
|
|
expect(wrapper.find(`.${styles.inputRangeLabel}`).text()).toEqual('Input label');
|
|
wrapper.setProps({
|
|
label: 'Label'
|
|
});
|
|
expect(wrapper.find(`.${styles.inputRangeInput}`).prop('value')).toEqual('32');
|
|
expect(wrapper.find(`.${styles.inputRangeInput}`).prop('placeholder')).toEqual('-');
|
|
expect(wrapper.find(`.${styles.inputRangeLabel}`).text()).toEqual('Label');
|
|
});
|
|
}); |