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

package/test/Rating.tsx

@@ -0,0 +1,227 @@
+import { ratingReducer, RATING_ACTION } from '../src/rating/rating-reducer';
+import { isHalf, isSelected, isCorrectValue, toRound } from '../src/rating/utils';
+
+describe('Rating', () => {
+    describe('utils', () => {
+        describe('isHalf', () => {
+            [
+                { current: 3, value: 2.5, step: 1, result: true },
+                { current: 3, value: 3, step: 1, result: false },
+                { current: 1, value: 0.5, step: 1, result: true },
+                { current: 6, value: 7.5, step: 1, result: false },
+                { current: 6, value: 8, step: 1, result: false },
+                { current: 3, value: 3.5, step: 1, result: false },
+                { current: 0.2, value: 0.3, step: 0.1, result: false }
+            ].map(({ current, value, step, result }) => (
+                it(`Should return ${result} when current: ${current}, value: ${value}, step: ${step}.`,
+                   () => {
+                        const expected = isHalf(current, value, step);
+                        expect(expected).toEqual(result);
+                    }
+                )
+            ));
+        });
+
+        describe('isSelected', () => {
+            [
+                { current: 3, value: 2.5, step: 1, selection: 'continues', result: true },
+                { current: 3, value: 3, step: 1, selection: 'continues', result: true },
+                { current: 1, value: 0.5, step: 1, selection: 'single', result: true },
+                { current: 6, value: 7.5, step: 1, selection: 'single', result: false },
+                { current: 6, value: 8, step: 1, selection: 'continues', result: true },
+                { current: 3, value: 3.5, step: 1, selection: 'continues', result: true },
+                { current: 6, value: 8, step: 1, selection: 'single', result: false },
+                { current: 3, value: 3.5, step: 1, selection: 'single', result: false },
+                { current: 4, value: 3.5, step: 1, selection: 'single', result: true },
+                { current: 0, value: null, step: 0.1, selection: 'continues', result: false }
+            ].map(({ current, value, step, selection, result }) => (
+                it(`Should return ${result} when selection: ${selection}, value: ${value}, step: ${step}.`,
+                   () => {
+                        const expected = isSelected(current, value, step, selection);
+                        expect(expected).toEqual(result);
+                    }
+                )
+            ));
+        });
+
+        describe('icCorrectValue', () => {
+            [
+                { min: 1, max: 5, step: 1, value: 2, result: true },
+                { min: 1, max: 5, step: 1, value: 2.5, result: false },
+                { min: 1, max: 5, step: 1, value: 0, result: false },
+                { min: 1, max: 5, step: 1, value: 20, result: false },
+                { min: 1, max: 5, step: 0.5, value: 2.5, result: true },
+                { min: 1, max: 5, step: 0.5, value: 2.6, result: false }
+            ].map(({ min, max, step, value, result }) => (
+                it(`Should return ${result} when value: ${value}, min: ${min}, max: ${max}, step: ${step}.`,
+                   () => {
+                        const expected = isCorrectValue(min, max, step, value);
+                        expect(expected).toEqual(result);
+                    }
+                )
+            ));
+        });
+
+        describe('toRound', () => {
+            [
+                { num: 0.10000, base: 0.1, result: 0.1 },
+                { num: 0.30000000000000004, base: 0.1, result: 0.3 },
+                { num: 0.35000000000000003, base: 0.11, result: 0.35 },
+                { num: 0.30000000000000003, base: 0.11, result: 0.3 },
+                { num: 4, base: 1, result: 4 },
+                { num: 0.1, base: 0.1, result: 0.1 },
+                { num: 0.3000000000000003, base: 0.1, result: 0.3 }
+            ].map(({ num, base, result }) => (
+                it(`Should return ${result} when num: ${num}, base: ${base}.`,
+                   () => {
+                        const expected = toRound(num, base);
+                        expect(expected).toEqual(result);
+                    }
+                )
+            ));
+        });
+    });
+
+    describe('ratingReducer', () => {
+
+        describe('Select', () => {
+            const type = RATING_ACTION.select;
+
+            it('should set the state to the payload value if state = null', () => {
+                const state = null;
+                const result = ratingReducer(state, { type, min: 0, max: 5, payload: 3, step: 1 });
+                expect(result).toEqual(3);
+            });
+
+            it('should set the state to the payload value if min < payload < max', () => {
+                const state = 1;
+                const result = ratingReducer(state, { type, min: 0, max: 5, payload: 3, step: 1 });
+                expect(result).toEqual(3);
+            });
+
+            it('should set the state to the max if payload > max', () => {
+                const state = 1;
+                const result = ratingReducer(state, { type, min: 0, max: 5, payload: 7, step: 0.5 });
+                expect(result).toEqual(5);
+            });
+
+            it('should set the state to the min if payload < min', () => {
+                const state = 1;
+                const result = ratingReducer(state, { type, min: 0, max: 5, payload: 0.5, step: 0.5 });
+                expect(result).toEqual(0.5);
+            });
+
+            it('should set the state to the max if payload = max', () => {
+                const state = 1;
+                const result = ratingReducer(state, { type, min: 0, max: 5, payload: 5, step: 1 });
+                expect(result).toEqual(5);
+            });
+
+            it('should return the null if payload = state', () => {
+                const state = 4;
+                const result = ratingReducer(state, { type, min: 0, max: 5, payload: 4, step: 1 });
+                expect(result).toEqual(null);
+            });
+        });
+
+        describe('Increase', () => {
+            const type = RATING_ACTION.increase;
+
+            it('should increase the state with the step value if state = null', () => {
+                const state = null;
+                const result = ratingReducer(state, { type, min: 1, max: 5, step: 1 });
+                expect(result).toEqual(1);
+            });
+
+            it('should increase the state with the step value if state + step >= min', () => {
+                const state = 3;
+                const result = ratingReducer(state, { type, min: 1, max: 5, step: 1 });
+                expect(result).toEqual(4);
+            });
+
+            it('should increase the state to the max if state + step > max', () => {
+                const state = 5;
+                const result = ratingReducer(state, { type, min: 1, max: 5, step: 1 });
+                expect(result).toEqual(5);
+            });
+
+            it('should increase the state to the max if state + step = max', () => {
+                const state = 4;
+                const result = ratingReducer(state, { type, min: 1, max: 5, step: 1 });
+                expect(result).toEqual(5);
+            });
+        });
+
+        describe('Decrease', () => {
+            const type = RATING_ACTION.decrease;
+
+            it('should decrease the state with the step value if state - step > min', () => {
+                const state = 2;
+                const result = ratingReducer(state, { type, min: 0, max: 5, step: 1 });
+                expect(result).toEqual(1);
+            });
+
+            it('should decrease the state to the min value if state < min', () => {
+                const state = 1;
+                const result = ratingReducer(state, { type, min: 1, max: 5, step: 1 });
+                expect(result).toEqual(1);
+            });
+
+            it('should decrease the state to the min value if state < min', () => {
+                const state = 1;
+                const result = ratingReducer(state, { type, min: 0.5, max: 5, step: 1 });
+                expect(result).toEqual(0.5);
+            });
+
+            it('should decrease the state to the min if state - step = minRating', () => {
+                const state = 2;
+                const result = ratingReducer(state, { type, min: 0, max: 5, step: 0.5 });
+                expect(result).toEqual(1.5);
+            });
+        });
+
+        describe('Min', () => {
+            const type = RATING_ACTION.min;
+
+            it('should return the min + step state value', () => {
+                const state = 3;
+                const result = ratingReducer(state, { type, min: 1, max: 5, step: 1 });
+                expect(result).toEqual(1);
+            });
+
+            it('should return the min + step state value', () => {
+                const state = 5;
+                const result = ratingReducer(state, { type, min: 0, max: 5, step: 1 });
+                expect(result).toEqual(0);
+            });
+
+            it('should return the min + step state value', () => {
+                const state = 1;
+                const result = ratingReducer(state, { type, min: 0, max: 5, payload: 1, step: 1 });
+                expect(result).toEqual(0);
+            });
+        });
+
+        describe('Max', () => {
+            const type = RATING_ACTION.max;
+
+            it('should return the max state value', () => {
+                const state = 3;
+                const result = ratingReducer(state, { type, min: 1, max: 5, step: 1 });
+                expect(result).toEqual(5);
+            });
+
+            it('should return the max state value', () => {
+                const state = 5;
+                const result = ratingReducer(state, { type, min: 0, max: 5, step: 1 });
+                expect(result).toEqual(5);
+            });
+
+            it('should return the max state value', () => {
+                const state = 1;
+                const result = ratingReducer(state, { type, min: 1, max: 5, payload: 1, step: 1 });
+                expect(result).toEqual(5);
+            });
+        });
+    });
+});

package/test/Slider.tsx

@@ -0,0 +1,198 @@
+import * as React from 'react';
+import { Enzyme } from '@progress//kendo-react-tasks/test-utils';
+const { mount } = Enzyme;
+
+import { SliderLabel } from '../src/main';
+import { SliderWithoutContext as Slider } from '../src/slider/Slider';
+
+describe('Slider main element rendering', () => {
+    let result;
+    beforeEach(() => {
+        result = null;
+    });
+
+    afterEach(() => {
+        result.unmount();
+    });
+
+    it('should render element', () => {
+        result = mount(<Slider min={1} max={10} className="test" />);
+        const slider = result.find('div.k-slider');
+
+        expect(slider.type()).toEqual('div');
+        expect(slider.hasClass('k-widget')).toEqual(true);
+        expect(slider.hasClass('test')).toEqual(true);
+    });
+
+    it('should render horizontal slider', () => {
+        result = mount(<Slider min={1} max={10} />);
+        const slider = result.find('.k-slider');
+
+        expect(slider.hasClass('k-slider-horizontal')).toEqual(true);
+    });
+
+    it('should render vertical slider', () => {
+        result = mount(<Slider vertical={true} min={1} max={10} />);
+        const slider = result.find('.k-slider');
+
+        expect(slider.hasClass('k-slider-vertical')).toEqual(true);
+    });
+
+    it('should render disabled slider', () => {
+        result = mount(<Slider disabled={true} min={1} max={10} />);
+        const slider = result.find('.k-slider');
+
+        expect(slider.hasClass('k-disabled')).toEqual(true);
+    });
+
+    it('should render focused slider', () => {
+        result = mount(<Slider disabled={true} min={1} max={10} />);
+        result.simulate('focus');
+
+        expect(result.find('.k-slider').hasClass('k-focus')).toEqual(true);
+    });
+});
+
+describe('Slider buttons rendering', () => {
+    let result;
+    beforeEach(() => {
+        result = null;
+    });
+
+    afterEach(() => {
+        result.unmount();
+    });
+
+    it('should render buttons', () => {
+        result = mount(<Slider min={1} max={10} buttons={true} />);
+
+        const decrease = result.find('div.k-slider .k-button.k-button-decrease');
+        const increase = result.find('div.k-slider .k-button.k-button-increase');
+
+        expect(decrease.prop('title')).toEqual('Decrease');
+        expect(increase.prop('title')).toEqual('Increase');
+
+        expect(decrease.find('span.k-icon.k-i-arrow-w').length).toBe(1);
+        expect(increase.find('span.k-icon.k-i-arrow-e').length).toBe(1);
+    });
+
+    it('should ** NOT ** render buttons', () => {
+        result = mount(<Slider min={1} max={10} />);
+
+        expect(result.find('.k-button-decrease').length).toBe(0);
+        expect(result.find('.k-button-increase').length).toBe(0);
+    });
+});
+
+describe('Slider track rendering', () => {
+    let result;
+    beforeEach(() => {
+        result = null;
+    });
+
+    afterEach(() => {
+        result.unmount();
+    });
+
+    it('should render track-wrap horizontal', () => {
+        result = mount(<Slider min={1} max={10} />);
+        const trackWrap = result.find('div.k-slider-track-wrap');
+
+        expect(trackWrap.prop('style').flexGrow).toEqual(1);
+        expect(trackWrap.prop('style').position).toEqual('relative');
+        expect(trackWrap.prop('style').touchAction).toEqual('none');
+        expect(trackWrap.prop('style').marginLeft).toEqual('0.5rem');
+        expect(trackWrap.prop('style').marginRight).toEqual('0.5rem');
+    });
+
+    it('should render track-wrap vertical', () => {
+        result = mount(<Slider vertical={true} min={1} max={10} />);
+        const trackWrap = result.find('div.k-slider-track-wrap');
+
+        expect(trackWrap.prop('style').marginTop).toEqual('0.5rem');
+        expect(trackWrap.prop('style').marginBottom).toEqual('0.5rem');
+    });
+
+    it('should render labels horizontal', () => {
+        result = mount(
+          <Slider min={0} max={10}>
+            <SliderLabel position={5}>5</SliderLabel>
+            <SliderLabel position={7}>7</SliderLabel>
+          </Slider>
+        );
+        const labelsList = result.find('div.k-slider-track-wrap ul.k-reset.k-slider-items');
+        expect(labelsList.prop('style').margin).toEqual(0);
+
+        const labels = labelsList.find('li.k-tick.k-tick-large');
+
+        expect(labels.at(0).prop('style').zIndex).toBe(1);
+        expect(labels.at(0).prop('style').left).toBe('50%');
+
+        expect(labels.at(1).prop('style').left).toBe('70%');
+
+        const labelData = labels.at(1).find('span.k-label');
+        expect(labelData.prop('data-slider-label')).toBe(true);
+    });
+
+    it('should render labels vertical', () => {
+        result = mount(
+          <Slider vertical={true} min={0} max={10}>
+            <SliderLabel position={5}>5</SliderLabel>
+            <SliderLabel position={7}>7</SliderLabel>
+          </Slider>
+        );
+        const labelsList = result.find('div.k-slider-track-wrap ul.k-reset.k-slider-items');
+        expect(labelsList.prop('style').margin).toEqual(0);
+        expect(labelsList.prop('style').paddingTop).toEqual(0);
+        expect(labelsList.prop('style').height).toEqual('100%');
+
+        const labels = labelsList.find('li.k-tick.k-tick-large');
+
+        expect(labels.at(0).prop('style').zIndex).toBe(1);
+        expect(labels.at(0).prop('style').bottom).toBe('50%');
+
+        expect(labels.at(1).prop('style').bottom).toBe('70%');
+
+        const labelData = labels.at(1).find('span.k-label');
+        expect(labelData.prop('data-slider-label')).toBe(true);
+    });
+
+    it('should render track horizontal', () => {
+        result = mount(
+          <Slider min={0} max={10} defaultValue={7} step={1}>
+            <SliderLabel position={5}>5</SliderLabel>
+            <SliderLabel position={7}>7</SliderLabel>
+          </Slider>
+        );
+        const track = result.find('div.k-slider-track-wrap div.k-slider-track');
+        expect(track.prop('style').left).toBe(0);
+        expect(track.prop('style').width).toBe('100%');
+
+        expect(track.find('div.k-slider-selection').prop('style').width).toBe('70%');
+
+        expect(track.find('span.k-draghandle').prop('style').left).toBe('calc(70%)');
+        expect(track.find('span.k-draghandle').prop('style').zIndex).toBe(1);
+        expect(track.find('span.k-draghandle').prop('title')).toBe('Drag');
+    });
+
+    it('should render track vertical', () => {
+        result = mount(
+          <Slider vertical={true} min={0} max={10} defaultValue={7} step={1}>
+            <SliderLabel position={5}>5</SliderLabel>
+            <SliderLabel position={7}>7</SliderLabel>
+          </Slider>
+        );
+        const track = result.find('div.k-slider-track-wrap div.k-slider-track');
+        expect(track.prop('style').bottom).toBe(0);
+        expect(track.prop('style').height).toBe('100%');
+
+        expect(track.find('div.k-slider-selection').prop('style').height).toBe('70%');
+        expect(track.find('span.k-draghandle').prop('style').bottom).toBe('calc(70%)');
+    });
+
+    it('the value should be in min max range', () => {
+        result = mount(<Slider step={1} min={1} max={3} defaultValue={6} />);
+
+        expect(result.find(Slider).instance().state.value).toBe(3);
+    });
+});

package/test/Switch.tsx

@@ -0,0 +1,154 @@
+import * as React from 'react';
+import { Enzyme } from '@progress//kendo-react-tasks/test-utils';
+const { mount } = Enzyme;
+
+import { SwitchWithoutContext as Switch } from '../src/switch/Switch';
+
+const SWITCH_CONTAINER = '.k-switch-track';
+const SWITCH_LABEL_OFF = '.k-switch-label-off';
+const SWITCH_LABEL_ON = '.k-switch-label-on';
+
+describe('Switch', () => {
+    let result;
+
+    it('should render a span', () => {
+        result = mount(<Switch />);
+
+        expect(result.find('.k-switch').type()).toEqual('span');
+    });
+    it('should render unique id to the focusable element', () => {
+        result = mount(<Switch />);
+
+        expect(result.find(SWITCH_CONTAINER).props().id).toBeTruthy();
+    });
+    it('should set dir', () => {
+        result = mount(<Switch dir="rtl" />);
+
+        expect(result.props().dir).toEqual('rtl');
+    });
+    it('should **not** set dir if dir is not passed as props', () => {
+        result = mount(<Switch />);
+
+        expect(result.props().dir).toEqual(undefined);
+    });
+    it('should set className correctly', () => {
+        result = mount(<Switch className="foo" />);
+
+        expect(result.find('.k-switch.foo').length).toEqual(1);
+    });
+    it('should render default tabIndex', () => {
+        result = mount(<Switch />);
+
+        expect(result.find(SWITCH_CONTAINER).props().tabIndex).toEqual(0);
+    });
+    it('should set tabIndex if passed as props', () => {
+        result = mount(<Switch tabIndex={2} />);
+
+        expect(result.find(SWITCH_CONTAINER).props().tabIndex).toEqual(2);
+    });
+    it('should set tabIndex equals to -1 of disabled component', () => {
+        result = mount(<Switch disabled={true} />);
+
+        expect(result.find(SWITCH_CONTAINER).props().tabIndex).toEqual(-1);
+    });
+
+    it('should render container classes', () => {
+        result = mount(<Switch />);
+
+        const switchComponent = result.children().first();
+
+        expect(switchComponent.props().className.indexOf('k-switch') > -1).toEqual(true);
+        expect(switchComponent.props().className.indexOf('k-switch-md') > -1).toEqual(true);
+        expect(switchComponent.props().className.indexOf('k-rounded-full') > -1).toEqual(true);
+        expect(switchComponent.props().className.indexOf('k-switch-off') > -1).toEqual(true);
+    });
+    it('should have k-disabled if disabled is passed as props', () => {
+        result = mount(<Switch disabled={true} />);
+
+        const switchComponent = result.children().first();
+
+        expect(switchComponent.props().className.indexOf('k-disabled') > -1).toEqual(true);
+    });
+    it('should render labels', () => {
+        result = mount(<Switch />);
+
+        expect(result.find(SWITCH_LABEL_OFF).length).toEqual(1);
+        expect(result.find(SWITCH_LABEL_ON).length).toEqual(1);
+    });
+    it('should render custom labels', () => {
+        result = mount(<Switch onLabel={'I'} offLabel={'O'} />);
+
+        expect(result.find(SWITCH_LABEL_OFF).text()).toEqual('O');
+        expect(result.find(SWITCH_LABEL_ON).text()).toEqual('I');
+    });
+    it('should toggle checked on uncontrolled change', () => {
+        result = mount(<Switch />);
+        result.simulate('click');
+
+        expect(result.state().checked).toEqual(true);
+    });
+    it('should toggle checked on controlled change', () => {
+        result = mount(<Switch checked={true}/>);
+
+        expect(result.instance().value).toEqual(true);
+
+        result.setProps({ checked: false });
+
+        expect(result.instance().value).toEqual(false);
+    });
+    it('should set focused true when container is focused', () => {
+        result = mount(<Switch />);
+
+        result.find(SWITCH_CONTAINER).simulate('focus');
+
+        expect(result.state().focused).toEqual(true);
+    });
+    it('should call onFocus when container is focused', () => {
+        const focusSpy = jasmine.createSpy('focusSpy');
+        result = mount(<Switch onFocus={focusSpy} />);
+
+        result.find(SWITCH_CONTAINER).simulate('focus');
+
+        expect(focusSpy).toHaveBeenCalledTimes(1);
+    });
+    it('should set focused false when container is blurred', () => {
+        result = mount(<Switch />);
+
+        result.find(SWITCH_CONTAINER).simulate('blur');
+
+        expect(result.state().focused).toEqual(false);
+    });
+    it('should call onBlur when container is blurred', () => {
+        const blurSpy = jasmine.createSpy('blurSpy');
+        result = mount(<Switch onBlur={blurSpy} />);
+
+        result.find(SWITCH_CONTAINER).simulate('blur');
+
+        expect(blurSpy).toHaveBeenCalledTimes(1);
+    });
+    it('should call onChange with correct value in uncontrolled state', () => {
+        const changeSpy = jasmine.createSpy('changeSpy');
+        result = mount(<Switch onChange={changeSpy} />);
+        result.simulate('click');
+
+        expect(changeSpy).toHaveBeenCalledWith(expect.objectContaining({
+            value: true
+        }));
+    });
+    it('should call onChange with correct value in controlled state', () => {
+        const changeSpy = jasmine.createSpy('changeSpy');
+        result = mount(<Switch onChange={changeSpy} checked={false} />);
+        result.simulate('click');
+
+        expect(changeSpy.calls.first().args[0].value).toEqual(true);
+    });
+    it('should set target value during onChange', (cb) => {
+        const changeSpy = (event) => {
+            expect(event.target.value).toEqual(true);
+            cb();
+        };
+
+        result = mount(<Switch onChange={changeSpy} checked={false} />);
+        result.simulate('click');
+    });
+});