@progress/kendo-react-inputs 5.6.0-dev.202208251227 → 5.7.0-sig.202208281415

package/test/RadioButton.tsx

@@ -0,0 +1,176 @@
+import * as React from 'react';
+import { Enzyme } from '@progress//kendo-react-tasks/test-utils';
+const { mount, shallow } = Enzyme;
+
+import { RadioGroup, RadioButton } from '../src/main';
+
+const RADIO = '.k-radio';
+const RADIO_LABEL = '.k-radio-label';
+const RADIO_LIST = '.k-radio-list';
+const RADIO_ITEM = '.k-radio-item';
+
+const items = [
+    { label: 'Foo', value: 'foo' },
+    { label: 'Baz', value: 'baz' },
+    { label: 'Xyz', value: 'xyz' }
+];
+
+describe('Radio', () => {
+    let result: any;
+    beforeEach(() => {
+        result = null;
+    });
+
+    describe('button', () => {
+        it('should render an input', () => {
+            result = mount(<RadioButton />);
+
+            expect(result.find(RADIO).type()).toEqual('input');
+        });
+        it('should render a label if provided', () => {
+            result = mount(<RadioButton label="test" />);
+
+            expect(result.find(RADIO_LABEL).type()).toEqual('label');
+            expect(result.find(RADIO_LABEL).text()).toEqual('test');
+        });
+        it('should render id to the input element by default', () => {
+            result = mount(<RadioButton />);
+
+            expect(result.find(RADIO).props().id).toBeTruthy();
+        });
+        it('should render id to the input element', () => {
+            result = mount(<RadioButton id={'foo'} />);
+
+            expect(result.find(RADIO).props().id).toEqual('foo');
+        });
+        it('should set id as `for` prop of the label element by default', () => {
+            result = mount(<RadioButton label="test" />);
+
+            expect(result.find(RADIO_LABEL).props().htmlFor).toBeTruthy();
+            expect(result.find(RADIO_LABEL).props().htmlFor).toEqual(result.find(RADIO).props().id);
+        });
+        it('should set id as `for` prop of the label element', () => {
+            result = mount(<RadioButton label="test" id={'foo'} />);
+
+            expect(result.find(RADIO_LABEL).props().htmlFor).toEqual('foo');
+            expect(result.find(RADIO_LABEL).props().htmlFor).toEqual(result.find(RADIO).props().id);
+        });
+        it('should set custom styles to the input element if `style` prop is passed', () => {
+            result = mount(<RadioButton label="test" style={{ background: 'red' }} />);
+
+            expect(result.find(RADIO).props().style).toEqual({ background: 'red' });
+        });
+        it('should set custom class to the input element if `className` prop is passed', () => {
+            result = mount(<RadioButton label="test" className={'foo'} />);
+
+            expect(result.find(RADIO).props().className).toEqual('k-radio k-radio-md foo');
+        });
+        it('should be checked when `checked` prop is true', () => {
+            result = mount(<RadioButton checked={true} />);
+
+            expect(result.find(RADIO).props().checked).toBeTruthy();
+        });
+        it('should be unchecked when `checked` prop is false', () => {
+            result = mount(<RadioButton checked={false} />);
+
+            expect(result.find(RADIO).props().checked).toBeFalsy();
+        });
+        it('should be unchecked when no related property is provided', () => {
+            result = mount(<RadioButton />);
+
+            expect(result.find(RADIO).props().checked).toBeUndefined();
+        });
+        it('should be disabled when `disabled` prop is provided', () => {
+            result = mount(<RadioButton disabled={true} />);
+
+            expect(result.props().disabled).toEqual(true);
+        });
+        it('should set tabIndex to -1 of disabled component by default', () => {
+            result = shallow(<RadioButton disabled={true} />);
+
+            expect(result.find(RADIO).props().tabIndex).toEqual(-1);
+        });
+        it('should set tabIndex if passed as props', () => {
+            result = shallow(<RadioButton tabIndex={2} />);
+
+            expect(result.find(RADIO).props().tabIndex).toEqual(2);
+        });
+    });
+
+    describe('group', () => {
+        it('should render a list with 3 items', () => {
+            result = shallow(<RadioGroup data={items} />);
+
+            expect(result.find(RADIO_LIST).type()).toEqual('ul');
+            expect(result.find(RADIO_ITEM).length).toEqual(3);
+        });
+        it('should render 3 li items', () => {
+            result = mount(<RadioGroup data={items} />);
+            expect(result.find('li' + RADIO_ITEM).at(0).type()).toBeTruthy();
+            expect(result.find('li' + RADIO_ITEM).at(1).type()).toBeTruthy();
+            expect(result.find('li' + RADIO_ITEM).at(2).type()).toBeTruthy();
+        });
+        it('should render role attribute equals to radiogroup to the ul element', () => {
+            result = mount(<RadioGroup data={items} />);
+
+            expect(result.find(RADIO_LIST).props().role).toBeTruthy();
+            expect(result.find(RADIO_LIST).props().role).toEqual('radiogroup');
+        });
+        it('should render role attribute equals to none to the li elements', () => {
+            result = mount(<RadioGroup data={items} />);
+            expect(result.find('li' + RADIO_ITEM).at(0).props().role).toEqual('none');
+            expect(result.find('li' + RADIO_ITEM).at(1).props().role).toEqual('none');
+            expect(result.find('li' + RADIO_ITEM).at(2).props().role).toEqual('none');
+        });
+        it('should render the same name attribute to all input element', () => {
+            result = mount(<RadioGroup data={items} name={'foo'} />);
+
+            expect(result.find(RADIO).at(0).props().name).toEqual('foo');
+            expect(result.find(RADIO).at(1).props().name).toEqual('foo');
+            expect(result.find(RADIO).at(2).props().name).toEqual('foo');
+        });
+        it('should be checked if defaultValue prop is provided to the RadioGroup (uncontrolled mode)', () => {
+            result = mount(<RadioGroup data={items} defaultValue={items[1].value} />);
+
+            expect(result.find(RADIO).at(1).props().checked).toEqual(true);
+        });
+        it('should be checked if value prop is provided to the RadioGroup (controlled mode)', () => {
+            result = mount(<RadioGroup data={items} value={items[1].value} />);
+
+            expect(result.find(RADIO).at(1).props().checked).toEqual(true);
+        });
+        it('should set tabindex attribute to 0 if checked, otherwise -1', () => {
+            result = mount(<RadioGroup data={items} defaultValue={items[0].value} />);
+
+            expect(result.find(RADIO).at(0).props().tabIndex).toEqual(0);
+            expect(result.find(RADIO).at(1).props().tabIndex).toEqual(-1);
+            expect(result.find(RADIO).at(2).props().tabIndex).toEqual(-1);
+        });
+        it('should set index attribute to all radio button inputs', () => {
+            result = mount(<RadioGroup data={items} />);
+
+            expect(result.find(RADIO).at(0).prop('index')).toEqual(0);
+            expect(result.find(RADIO).at(1).prop('index')).toEqual(1);
+            expect(result.find(RADIO).at(2).prop('index')).toEqual(2);
+        });
+        it('should set value attribute to all radio button inputs', () => {
+            result = mount(<RadioGroup data={items} />);
+
+            expect(result.find(RADIO).at(0).props().value).toEqual('foo');
+            expect(result.find(RADIO).at(1).props().value).toEqual('baz');
+            expect(result.find(RADIO).at(2).props().value).toEqual('xyz');
+        });
+        it('all radios should be disabled when `disabled` prop is provided to the RadioGroup', () => {
+            result = mount(<RadioGroup data={items} disabled={true} />);
+
+            expect(result.find(RADIO).at(0).props().disabled).toEqual(true);
+            expect(result.find(RADIO).at(1).props().disabled).toEqual(true);
+            expect(result.find(RADIO).at(2).props().disabled).toEqual(true);
+        });
+        it('should set correct dir', () => {
+            result = shallow(<RadioGroup data={items} dir="rtl" />);
+
+            expect(result.find('.k-radio-list').prop('dir')).toEqual('rtl');
+        });
+    });
+});

package/test/RangeSlider.tsx

@@ -0,0 +1,502 @@
+import * as React from 'react';
+import { Enzyme } from '@progress/kendo-react-tasks/test-utils';
+const { mount } = Enzyme;
+
+import { rangeReducer, RANGE_ACTION } from '../src/range-slider/range-raducer';
+import { RangeSlider } from '../src/range-slider/RangeSlider';
+
+// describe, it, expect
+
+describe('RangeSlider', () => {
+    describe('rangeReducer', () => {
+        // action START increase
+        it('start action - should increase start with payload if new start < end', () => {
+            const result = rangeReducer(
+                { start: 1, end: 5 },
+                { type: RANGE_ACTION.start, payload: 4, step: 1, key: RANGE_ACTION.start, min: 0, max: 100 }
+            );
+            expect(result).toEqual({
+                start: 4,
+                end: 5
+            });
+        });
+
+        it('start action - should increase start with payload if new start = end', () => {
+            const result = rangeReducer(
+                { start: 1, end: 5 },
+                { type: RANGE_ACTION.start, payload: 5, step: 1, key: RANGE_ACTION.start, min: 0, max: 100 }
+            );
+            expect(result).toEqual({
+                start: 5,
+                end: 5
+            });
+        });
+
+        it('start action - should set start = end if new start > end', () => {
+            const result = rangeReducer(
+                { start: 1, end: 5 },
+                { type: RANGE_ACTION.start, payload: 6, step: 1, key: RANGE_ACTION.start, min: 0, max: 100 }
+            );
+            expect(result).toEqual({
+                start: 5,
+                end: 5
+            });
+        });
+
+        it('start action - should **not** increase start with payload if old start = end', () => {
+            const result = rangeReducer(
+                { start: 5, end: 5 },
+                { type: RANGE_ACTION.start, payload: 6, step: 1, key: RANGE_ACTION.start, min: 0, max: 100 }
+            );
+            expect(result).toEqual({
+                start: 5,
+                end: 5
+            });
+        });
+
+        // action START decrease
+        it('start action - should decrease start with payload if new start < end', () => {
+            const result = rangeReducer(
+                { start: 5, end: 5 },
+                { type: RANGE_ACTION.start, payload: 1, step: 1, key: RANGE_ACTION.start, min: 0, max: 100 }
+            );
+            expect(result).toEqual({
+                start: 1,
+                end: 5
+            });
+        });
+
+        it('start action - should decrease start with payload if new start = min', () => {
+            const result = rangeReducer(
+                { start: 3, end: 5 },
+                { type: RANGE_ACTION.start, payload: 0, step: 1, key: RANGE_ACTION.start, min: 0, max: 100 }
+            );
+            expect(result).toEqual({
+                start: 0,
+                end: 5
+            });
+        });
+
+        it('start action - should decrease start with payload if new start > min', () => {
+            const result = rangeReducer(
+                { start: 3, end: 5 },
+                { type: RANGE_ACTION.start, payload: 2, step: 1, key: RANGE_ACTION.start, min: 0, max: 100 }
+            );
+            expect(result).toEqual({
+                start: 2,
+                end: 5
+            });
+        });
+
+        it('start action - should set start = min if start < min', () => {
+            const result = rangeReducer(
+                { start: 3, end: 5 },
+                { type: RANGE_ACTION.start, payload: -1, step: 1, key: RANGE_ACTION.start, min: 0, max: 100 }
+            );
+            expect(result).toEqual({
+                start: 0,
+                end: 5
+            });
+        });
+
+        // action END increase
+        it('end action - should increase end with payload if new end > start', () => {
+            const result = rangeReducer(
+                { start: 5, end: 6 },
+                { type: RANGE_ACTION.end, payload: 10, step: 1, key: RANGE_ACTION.end, min: 0, max: 100 }
+            );
+            expect(result).toEqual({
+                start: 5,
+                end: 10
+            });
+        });
+
+        it('end action - should increase end with payload if old end = start', () => {
+            const result = rangeReducer(
+                { start: 5, end: 5 },
+                { type: RANGE_ACTION.end, payload: 10, step: 1, key: RANGE_ACTION.end, min: 0, max: 100 }
+            );
+            expect(result).toEqual({
+                start: 5,
+                end: 10
+            });
+        });
+
+        it('end action - should increase end with payload if new end < max', () => {
+            const result = rangeReducer(
+                { start: 1, end: 5 },
+                { type: RANGE_ACTION.end, payload: 50, step: 1, key: RANGE_ACTION.end, min: 0, max: 100 }
+            );
+            expect(result).toEqual({
+                start: 1,
+                end: 50
+            });
+        });
+
+        it('end action - should increase end with payload if new end = max', () => {
+            const result = rangeReducer(
+                { start: 1, end: 5 },
+                { type: RANGE_ACTION.end, payload: 100, step: 1, key: RANGE_ACTION.end, min: 0, max: 100 }
+            );
+            expect(result).toEqual({
+                start: 1,
+                end: 100
+            });
+        });
+
+        it('end action - should set end = max if new end > max', () => {
+            const result = rangeReducer(
+                { start: 1, end: 5 },
+                { type: RANGE_ACTION.end, payload: 101, step: 1, key: RANGE_ACTION.end, min: 0, max: 100 }
+            );
+            expect(result).toEqual({
+                start: 1,
+                end: 100
+            });
+        });
+
+        // action END decrease
+        it('end action - should decrease end with payload if new end < max', () => {
+            const result = rangeReducer(
+                { start: 3, end: 50 },
+                { type: RANGE_ACTION.end, payload: 40, step: 1, key: RANGE_ACTION.end, min: 0, max: 100 }
+            );
+            expect(result).toEqual({
+                start: 3,
+                end: 40
+            });
+        });
+
+        it('end action - should decrease end with payload if new end > start', () => {
+            const result = rangeReducer(
+                { start: 3, end: 3 },
+                { type: RANGE_ACTION.end, payload: 40, step: 1, key: RANGE_ACTION.end, min: 0, max: 100 }
+            );
+            expect(result).toEqual({
+                start: 3,
+                end: 40
+            });
+        });
+
+        it('end action - should decrease end with payload if new end = start', () => {
+            const result = rangeReducer(
+                { start: 5, end: 50 },
+                { type: RANGE_ACTION.end, payload: 5, step: 1, key: RANGE_ACTION.end, min: 0, max: 100 }
+            );
+            expect(result).toEqual({
+                start: 5,
+                end: 5
+            });
+        });
+
+        it('end action - should set end = start if new end < start', () => {
+            const result = rangeReducer(
+                { start: 10, end: 50 },
+                { type: RANGE_ACTION.end, payload: 5, step: 1, key: RANGE_ACTION.end, min: 0, max: 100 }
+            );
+            expect(result).toEqual({
+                start: 10,
+                end: 10
+            });
+        });
+
+        // action INCREASE key start
+        it('increase action - with key start should increase start if new start = end', () => {
+            const result = rangeReducer(
+                { start: 0, end: 70 },
+                { type: RANGE_ACTION.increase, step: 70, key: RANGE_ACTION.start, min: 0, max: 100 }
+            );
+            expect(result).toEqual({
+                start: 70,
+                end: 70
+            });
+        });
+
+        it('increase action - with key start should increase start if new start < end', () => {
+            const result = rangeReducer(
+                { start: 0, end: 70 },
+                { type: RANGE_ACTION.increase, step: 40, key: RANGE_ACTION.start, min: 0, max: 100 }
+            );
+            expect(result).toEqual({
+                start: 40,
+                end: 70
+            });
+        });
+
+        it('increase action - with key start should **not** increase start if new start > end', () => {
+            const result = rangeReducer(
+                { start: 0, end: 10 },
+                { type: RANGE_ACTION.increase, step: 40, key: RANGE_ACTION.start, min: 0, max: 100 }
+            );
+            expect(result).toEqual({
+                start: 10,
+                end: 10
+            });
+        });
+
+        // action INCREASE key end
+        it('increase action - with key end should increase end if new end = max', () => {
+            const result = rangeReducer(
+                { start: 10, end: 70 },
+                { type: RANGE_ACTION.increase, step: 30, key: RANGE_ACTION.end, min: 0, max: 100 }
+            );
+            expect(result).toEqual({
+                start: 10,
+                end: 100
+            });
+        });
+
+        it('increase action - with key end should increase end if new end < max', () => {
+            const result = rangeReducer(
+                { start: 10, end: 70 },
+                { type: RANGE_ACTION.increase, step: 10, key: RANGE_ACTION.end, min: 0, max: 100 }
+            );
+            expect(result).toEqual({
+                start: 10,
+                end: 80
+            });
+        });
+
+        it('increase action - with key should set end = max if new end > max', () => {
+            const result = rangeReducer(
+                { start: 10, end: 90 },
+                { type: RANGE_ACTION.increase, step: 30, key: RANGE_ACTION.end, min: 0, max: 100 }
+            );
+            expect(result).toEqual({
+                start: 10,
+                end: 100
+            });
+        });
+
+        // action DECREASE key start
+        it('decrease action - with key start should decrease start if new start > min', () => {
+            const result = rangeReducer(
+                { start: 10, end: 50 },
+                { type: RANGE_ACTION.decrease, step: 5, key: RANGE_ACTION.start, min: 0, max: 100 }
+            );
+            expect(result).toEqual({
+                start: 5,
+                end: 50
+            });
+        });
+
+        it('decrease action - with key start should decrease start if new start = min', () => {
+            const result = rangeReducer(
+                { start: 10, end: 50 },
+                { type: RANGE_ACTION.decrease, step: 10, key: RANGE_ACTION.start, min: 0, max: 100 }
+            );
+            expect(result).toEqual({
+                start: 0,
+                end: 50
+            });
+        });
+
+        it('decrease action - with key should set start = min if new start < min', () => {
+            const result = rangeReducer(
+                { start: 1, end: 50 },
+                { type: RANGE_ACTION.decrease, step: 5, key: RANGE_ACTION.start, min: 0, max: 100 }
+            );
+            expect(result).toEqual({
+                start: 0,
+                end: 50
+            });
+        });
+
+        // action DECREASE key end
+        it('decrease action - with key end should decrease end if new end = start', () => {
+            const result = rangeReducer(
+                { start: 10, end: 50 },
+                { type: RANGE_ACTION.decrease, step: 40, key: RANGE_ACTION.end, min: 0, max: 100 }
+            );
+            expect(result).toEqual({
+                start: 10,
+                end: 10
+            });
+        });
+
+        it('decrease action - with key end should decrease end if new end > start', () => {
+            const result = rangeReducer(
+                { start: 10, end: 50 },
+                { type: RANGE_ACTION.decrease, step: 20, key: RANGE_ACTION.end, min: 0, max: 100 }
+            );
+            expect(result).toEqual({
+                start: 10,
+                end: 30
+            });
+        });
+
+        it('decrease action - with key should set end = start if new end < start', () => {
+            const result = rangeReducer(
+                { start: 30, end: 35 },
+                { type: RANGE_ACTION.decrease, step: 10, key: RANGE_ACTION.end, min: 0, max: 100 }
+            );
+            expect(result).toEqual({
+                start: 30,
+                end: 30
+            });
+        });
+
+        it('min action on start - should set the start = min', () => {
+            const result = rangeReducer(
+                { start: 30, end: 50 },
+                { type: RANGE_ACTION.min, step: 10, key: 'start', min: 1, max: 100 }
+            );
+
+            expect(result).toEqual({
+                start: 1,
+                end: 50
+            });
+        });
+
+        it('max action on start - should set the start = end', () => {
+            const result = rangeReducer(
+                { start: 30, end: 50 },
+                { type: RANGE_ACTION.max, step: 10, key: 'start', min: 1, max: 100 }
+            );
+
+            expect(result).toEqual({
+                start: 50,
+                end: 50
+            });
+        });
+
+        it('min action on end - should set the end = start', () => {
+            const result = rangeReducer(
+                { start: 30, end: 50 },
+                { type: RANGE_ACTION.min, step: 10, key: 'end', min: 1, max: 100 }
+            );
+
+            expect(result).toEqual({
+                start: 30,
+                end: 30
+            });
+        });
+        it('max action on end - should set the end = max', () => {
+            const result = rangeReducer(
+                { start: 30, end: 50 },
+                { type: RANGE_ACTION.max, step: 10, key: 'end', min: 1, max: 100 }
+            );
+
+            expect(result).toEqual({
+                start: 30,
+                end: 100
+            });
+        });
+
+        // action changeToClosest key start
+        // it('changeToClosest should change start if payload is closer to start', () => {
+        //     const result = rangeReducer(
+        //         { start: 30, end: 70 },
+        //         { type: RANGE_ACTION.changeToClosest, payload: 40, step: 1, key: RANGE_ACTION.start, min: 0, max: 100 }
+        //     );
+        //     expect(result).toEqual({
+        //         start: 40,
+        //         end: 70
+        //     });
+        // });
+
+        // it('changeToClosest should change start if payload < start', () => {
+        //     const result = rangeReducer(
+        //         { start: 30, end: 70 },
+        //         { type: RANGE_ACTION.changeToClosest, payload: 20, step: 1, key: RANGE_ACTION.start, min: 0, max: 100 }
+        //     );
+        //     expect(result).toEqual({
+        //         start: 20,
+        //         end: 70
+        //     });
+        // });
+
+        // it('changeToClosest should change start if payload = min', () => {
+        //     const result = rangeReducer(
+        //         { start: 30, end: 70 },
+        //         { type: RANGE_ACTION.changeToClosest, payload: 0, step: 1, key: RANGE_ACTION.start, min: 0, max: 100 }
+        //     );
+        //     expect(result).toEqual({
+        //         start: 0,
+        //         end: 70
+        //     });
+        // });
+
+        // it('changeToClosest should **not** change start if payload < min', () => {
+        //     const result = rangeReducer(
+        //         { start: 30, end: 70 },
+        //         { type: RANGE_ACTION.changeToClosest, payload: -10, step: 1, key: RANGE_ACTION.start, min: 0, max: 100 }
+        //     );
+        //     expect(result).toEqual({
+        //         start: 30,
+        //         end: 70
+        //     });
+        // });
+
+        // // action changeToClosest key end
+        // it('changeToClosest should change end if payload is closer to end', () => {
+        //     const result = rangeReducer(
+        //         { start: 30, end: 70 },
+        //         { type: RANGE_ACTION.changeToClosest, payload: 60, step: 1, key: RANGE_ACTION.end, min: 0, max: 100 }
+        //     );
+        //     expect(result).toEqual({
+        //         start: 30,
+        //         end: 60
+        //     });
+        // });
+
+        // it('changeToClosest should change end if payload > end', () => {
+        //     const result = rangeReducer(
+        //         { start: 30, end: 70 },
+        //         { type: RANGE_ACTION.changeToClosest, payload: 90, step: 1, key: RANGE_ACTION.end, min: 0, max: 100 }
+        //     );
+        //     expect(result).toEqual({
+        //         start: 30,
+        //         end: 90
+        //     });
+        // });
+
+        // it('changeToClosest should change end if payload = max', () => {
+        //     const result = rangeReducer(
+        //         { start: 30, end: 70 },
+        //         { type: RANGE_ACTION.changeToClosest, payload: 100, step: 1, key: RANGE_ACTION.end, min: 0, max: 100 }
+        //     );
+        //     expect(result).toEqual({
+        //         start: 30,
+        //         end: 100
+        //     });
+        // });
+
+        // it('changeToClosest should **not** change end if payload > max', () => {
+        //     const result = rangeReducer(
+        //         { start: 30, end: 70 },
+        //         { type: RANGE_ACTION.changeToClosest, payload: 120, step: 1, key: RANGE_ACTION.end, min: 0, max: 100 }
+        //     );
+        //     expect(result).toEqual({
+        //         start: 30,
+        //         end: 70
+        //     });
+        // });
+
+        // tslint:disable
+        // Check if the max and min are the correct values
+        it('the value of the min should **not** be min >= max', () => {
+            const errorSpy = jasmine.createSpy('errorSpy');
+            console.error = errorSpy;
+
+            mount(<RangeSlider min={100} max={20} />);
+            expect(errorSpy).toHaveBeenCalled();
+        });
+
+        it('the value of the min should **not** be undefined', () => {
+            const errorSpy = jasmine.createSpy('errorSpy');
+            console.error = errorSpy;
+
+            mount(<RangeSlider min={undefined} max={20} />);
+            expect(errorSpy).toHaveBeenCalled();
+        });
+
+        it('the value of the max should **not** be undefined', () => {
+            const errorSpy = jasmine.createSpy('errorSpy');
+            console.error = errorSpy;
+
+            mount(<RangeSlider min={0} max={undefined} />);
+            expect(errorSpy).toHaveBeenCalled();
+        });
+    });
+});