@hipay/hipay-material-ui 3.11.2 → 3.12.1

package/src/HiDatePicker/HiDateRangePicker.test.js

@@ -0,0 +1,750 @@
+/* eslint-disable */
+import React from 'react';
+import { assert } from 'chai';
+import { spy } from 'sinon';
+import DayPickerInput from 'react-day-picker/DayPickerInput';
+import Paper from '@mui/material/Paper';
+import MenuItem from '@mui/material/MenuItem';
+import { createShallow, createMount, getClasses } from '../test-utils';
+import HiDateRangePicker from './HiDateRangePicker';
+import HiInput from '../HiForm/HiInput';
+import { Overlay, TimePickerOverlay, MonthPickerOverlay, YearPickerOverlay } from './Overlays';
+import ListPicker from './ListPicker';
+import Caption from './Caption';
+
+describe('<HiDateRangePicker />', () => {
+    let shallow;
+    let mount;
+    let classes;
+
+    before(() => {
+        shallow = createShallow({ dive: true });
+        mount = createMount();
+        classes = getClasses(<HiDateRangePicker id="single-range" onChange={() => {}} />);
+    });
+
+    after(() => {
+        mount.cleanUp();
+    });
+
+    describe('shallow', () => {
+        it('renders a div containing 2 DayPickerInput', () => {
+            const wrapper = shallow(
+                <HiDateRangePicker
+                    id="date-range"
+                    onChange={() => {}}
+                />);
+
+            assert.strictEqual(wrapper.dive().name(), 'HiFormControl', 'should render a HiFormControl');
+            assert.strictEqual(
+                wrapper.find(DayPickerInput).length,
+                2,
+                'should render a DayPickerInput',
+            );
+        });
+
+        it('should hide on escape', () => {
+            const handlerChange = spy();
+            const wrapper = mount(
+                <HiDateRangePicker onChange={handlerChange} id="test-escape" />,
+            );
+            assert.strictEqual(wrapper.find(HiInput).length, 2);
+            assert.strictEqual(wrapper.find(Overlay).length, 0);
+            wrapper.find(HiInput).at(0).simulate('click');
+            assert.strictEqual(wrapper.find(Overlay).length, 1);
+            wrapper.find(HiInput).at(0).simulate('keydown', { keyCode: 27, key: 'Escape' });
+            assert.strictEqual(wrapper.find(Overlay).length, 0);
+            wrapper.find(HiInput).at(1).simulate('click');
+            assert.strictEqual(wrapper.find(Overlay).length, 1);
+            wrapper.find(HiInput).at(1).simulate('keydown', { keyCode: 27, key: 'Escape' });
+            assert.strictEqual(wrapper.find(Overlay).length, 0);
+        });
+    //
+    //     it('should handle 2 input day picker interface', () => {
+    //         const from = new Date(2018, 1, 17);
+    //         const to = new Date(2019, 2, 18);
+    //         const newFromDate = new Date(2019, 1, 16);
+    //         const newToDate = new Date(2020, 5, 5);
+    //         const handlerChange = spy();
+    //         const handlerReset = spy();
+    //         const wrapper = shallow(
+    //             <HiDateRangePicker
+    //                 id="date-range"
+    //                 from={from}
+    //                 to={to}
+    //                 labelFrom={'Start'}
+    //                 labelTo={'End'}
+    //                 onChange={handlerChange}
+    //
+    //                 showOverlay
+    //             />,
+    //         );
+    //
+    //         const dayPickerInputFrom = wrapper.find(DayPickerInput).first();
+    //         dayPickerInputFrom.props().onDayChange(newFromDate, {});
+    //         assert.strictEqual(
+    //             handlerChange.calledWith('from', newFromDate),
+    //             true,
+    //             'should call from onChange callback',
+    //         );
+    //
+    //         console.log(dayPickerInputFrom.props().inputProps);
+    //         dayPickerInputFrom.props().inputProps.onReset();
+    //         setTimeout(() => {
+    //             assert.strictEqual(
+    //                 handlerReset.calledWith('from'),
+    //                 true,
+    //                 'should call from onReset callback',
+    //             );
+    //         }, 0);
+    //     });
+    //
+    //     it('should handle 2 input day picker interface', () => {
+    //         const from = new Date(2018, 1, 17);
+    //         const to = new Date(2019, 2, 18);
+    //         const newFromDate = new Date(2019, 1, 16);
+    //         const newToDate = new Date(2020, 5, 5);
+    //         const handlerChange = spy();
+    //         const handlerReset = spy();
+    //         const wrapper = shallow(
+    //             <HiDateRangePicker
+    //                 id="date-range"
+    //                 from={from}
+    //                 to={to}
+    //                 labelFrom={'Start'}
+    //                 labelTo={'End'}
+    //                 onChange={handlerChange}
+    //                 onReset={handlerReset}
+    //                 showOverlay
+    //             />,
+    //         );
+    //
+    //         const dayPickerInputTo = wrapper.find(DayPickerInput).at(1);
+    //         console.log(dayPickerInputTo).props();
+    //         dayPickerInputTo.props().onDayChange(newToDate, {});
+    //         assert.strictEqual(
+    //             handlerChange.calledWith('to', newToDate),
+    //             true,
+    //             'should call to onChange callback',
+    //         );
+    //
+    //         dayPickerInputTo.props().inputProps.onReset();
+    //         setTimeout(() => {
+    //             assert.strictEqual(
+    //                 handlerReset.calledWith('to'),
+    //                 true,
+    //                 'should call to onReset callback',
+    //             );
+    //         }, 0);
+    //     });
+    //
+    //     it('should disable past days', () => {
+    //         const from = new Date(2018, 1, 17);
+    //         const to = new Date(2019, 2, 18);
+    //         const handlerChange = spy();
+    //         const handlerReset = spy();
+    //         const wrapper = shallow(
+    //             <HiDateRangePicker
+    //                 id="date-range"
+    //                 from={from}
+    //                 to={to}
+    //                 labelFrom={'Start'}
+    //                 labelTo={'End'}
+    //                 onChange={handlerChange}
+    //                 onReset={handlerReset}
+    //                 showOverlay
+    //                 disablePastDays
+    //             />,
+    //         );
+    //     });
+    //
+    //     it('should disable future days', () => {
+    //         const from = new Date(2018, 1, 17);
+    //         const to = new Date(2019, 2, 18);
+    //         const handlerChange = spy();
+    //         const handlerReset = spy();
+    //         const wrapper = shallow(
+    //             <HiDateRangePicker
+    //                 id="date-range"
+    //                 from={from}
+    //                 to={to}
+    //                 labelFrom={'Start'}
+    //                 labelTo={'End'}
+    //                 onChange={handlerChange}
+    //                 onReset={handlerReset}
+    //                 showOverlay
+    //                 disableFutureDays
+    //             />,
+    //         );
+    //     });
+    //
+    //     it('should enable time', () => {
+    //         const from = new Date(2018, 1, 17);
+    //         const to = new Date(2019, 2, 18);
+    //         const handlerChange = spy();
+    //         const handlerReset = spy();
+    //         const wrapper = shallow(
+    //             <HiDateRangePicker
+    //                 id="date-range"
+    //                 from={from}
+    //                 to={to}
+    //                 labelFrom={'Start'}
+    //                 labelTo={'End'}
+    //                 onChange={handlerChange}
+    //                 onReset={handlerReset}
+    //                 showOverlay
+    //                 enableTime
+    //             />,
+    //         );
+    //     });
+    //
+    //     it('should no values & disabled past & future', () => {
+    //         const handlerChange = spy();
+    //         const handlerReset = spy();
+    //         const wrapper = shallow(
+    //             <HiDateRangePicker
+    //                 id="date-range"
+    //                 labelFrom={'Start'}
+    //                 labelTo={'End'}
+    //                 onChange={handlerChange}
+    //                 onReset={handlerReset}
+    //                 showOverlay
+    //                 enableTime
+    //                 disablePastDays
+    //                 disableFutureDays
+    //             />,
+    //         );
+    //     });
+    });
+    /* TODO - Mount Tests failed since 06/05/2018
+    describe('mount', () => {
+        it('should mount with current date', () => {
+            const handleChange = spy();
+            const wrapper = mount(<HiDateRangePicker onChange={handleChange} id="single-range" />);
+
+            assert.strictEqual(
+                handleChange.callCount,
+                0,
+                'should not not have been called handleChange',
+            );
+
+            assert.strictEqual(wrapper.find(Paper).length, 0);
+            wrapper
+                .find('input')
+                .at(0)
+                .simulate('focus');
+            assert.strictEqual(wrapper.find(Paper).length, 1);
+            assert.strictEqual(wrapper.type(), HiDateRangePicker);
+        });
+
+        it('should mount with current date and time', () => {
+            const handleChange = spy();
+            const wrapper = mount(
+                <HiDateRangePicker onChange={handleChange} id="single-range" enableTime />,
+            );
+
+            assert.strictEqual(
+                handleChange.callCount,
+                0,
+                'should not not have been called handleChange',
+            );
+
+            assert.strictEqual(wrapper.find(Paper).length, 0);
+            wrapper
+                .find('input')
+                .at(0)
+                .simulate('focus');
+            assert.strictEqual(wrapper.find(Paper).length, 1);
+            assert.strictEqual(wrapper.type(), HiDateRangePicker);
+            assert.strictEqual(wrapper.find(Overlay).length, 1);
+            assert.strictEqual(wrapper.find(TimePickerOverlay).length, 0);
+            assert.strictEqual(wrapper.find('button').length, 4);
+
+            // Click on day
+            wrapper
+                .find(Overlay)
+                .find(`div.${classes.day}`)
+                .at(10)
+                .simulate('click');
+            assert.strictEqual(
+                handleChange.callCount,
+                1,
+                'should have been called once handleChange',
+            );
+            assert.strictEqual(handleChange.args[0][1].getHours(), 0, 'should set hours to 0');
+            assert.strictEqual(handleChange.args[0][1].getMinutes(), 0, 'should set minutes to 0');
+
+            // Click on time
+            wrapper
+                .find('button')
+                .at(2)
+                .simulate('click');
+            assert.strictEqual(wrapper.find(TimePickerOverlay).length, 1);
+            assert.strictEqual(wrapper.find(Overlay).length, 0);
+
+            // Cick on hour 5
+            wrapper
+                .find(TimePickerOverlay)
+                .find(ListPicker)
+                .at(0)
+                .find(MenuItem)
+                .at(5)
+                .simulate('click');
+            assert.strictEqual(
+                handleChange.callCount,
+                2,
+                'should have been called once handleChange',
+            );
+            assert.strictEqual(handleChange.args[1][1].getHours(), 5, 'should set hours to 5');
+
+            // Cick on minute 10
+            wrapper
+                .find(TimePickerOverlay)
+                .find(ListPicker)
+                .at(1)
+                .find(MenuItem)
+                .at(10)
+                .simulate('click');
+            assert.strictEqual(
+                handleChange.callCount,
+                3,
+                'should have been called once handleChange',
+            );
+            assert.strictEqual(
+                handleChange.args[2][1].getMinutes(),
+                10,
+                'should set minutes to 10',
+            );
+
+            // Click on calendar
+            wrapper
+                .find('button')
+                .at(0)
+                .simulate('click');
+            assert.strictEqual(wrapper.find(TimePickerOverlay).length, 0);
+            assert.strictEqual(wrapper.find(Overlay).length, 1);
+
+            wrapper
+                .find('input')
+                .at(0)
+                .simulate('blur');
+            wrapper
+                .find('input')
+                .at(1)
+                .simulate('blur');
+
+            assert.strictEqual(wrapper.find(Paper).length, 0);
+            wrapper
+                .find('input')
+                .at(1)
+                .simulate('focus');
+            assert.strictEqual(wrapper.find(Paper).length, 1);
+            assert.strictEqual(wrapper.type(), HiDateRangePicker);
+            assert.strictEqual(wrapper.find(Overlay).length, 1);
+            assert.strictEqual(wrapper.find(TimePickerOverlay).length, 0);
+            assert.strictEqual(wrapper.find('button').length, 4);
+
+            // Click on time
+            wrapper
+                .find('button')
+                .at(2)
+                .simulate('click');
+            assert.strictEqual(wrapper.find(TimePickerOverlay).length, 1);
+            assert.strictEqual(wrapper.find(Overlay).length, 0);
+
+            // Click on calendar
+            wrapper
+                .find('button')
+                .at(0)
+                .simulate('click');
+            assert.strictEqual(wrapper.find(TimePickerOverlay).length, 0);
+            assert.strictEqual(wrapper.find(Overlay).length, 1);
+
+            // Click on day
+            wrapper
+                .find(Overlay)
+                .find(`div.${classes.day}`)
+                .at(10)
+                .simulate('click');
+            assert.strictEqual(
+                handleChange.callCount,
+                4,
+                'should have been called once handleChange',
+            );
+            assert.strictEqual(handleChange.args[3][1].getHours(), 0, 'should set hours to 0');
+            assert.strictEqual(handleChange.args[3][1].getMinutes(), 0, 'should set minutes to 0');
+        });
+
+        it('should mount with fixed date without time', () => {
+            const handleChange = spy();
+            const from = new Date(2018, 0, 1);
+            const to = new Date(2018, 0, 5);
+            const wrapper = mount(
+                <HiDateRangePicker
+                    onChange={handleChange}
+                    showOverlay
+                    id="single-range"
+                    from={from}
+                    to={to}
+                />,
+            );
+
+            assert.strictEqual(
+                handleChange.callCount,
+                0,
+                'should not not have been called handleChange',
+            );
+
+            assert.strictEqual(wrapper.find(Paper).length, 0, 'should not have a Paper');
+
+            // FROM date
+            wrapper
+                .find('input')
+                .at(0)
+                .simulate('focus');
+            assert.strictEqual(wrapper.find(Paper).length, 1, 'should have a Paper');
+            assert.strictEqual(wrapper.type(), HiDateRangePicker, 'should be a HiDateRangePicker');
+            assert.strictEqual(
+                wrapper.find('button').length,
+                3,
+                'should have 3 buttons (prev, next, today)',
+            );
+            assert.strictEqual(
+                handleChange.callCount,
+                0,
+                'should not not have been called handleChange too',
+            );
+
+            // Check default selected day
+            assert.strictEqual(wrapper.find('div.start').text(), '1', 'should have selected day 1');
+            assert.strictEqual(wrapper.find('div.end').text(), '5', 'should have selected day 5');
+
+            // Click on second day
+            wrapper
+                .find(`div.${classes.day}`)
+                .at(1)
+                .simulate('click');
+            assert.strictEqual(
+                handleChange.callCount,
+                1,
+                'should have been called once handleChange',
+            );
+            assert.strictEqual(handleChange.args[0][0], 'from', 'should change from date');
+            assert.strictEqual(
+                handleChange.args[0][1].toLocaleDateString('fr-FR'),
+                '2018-1-2',
+                'should have new date value',
+            );
+
+            // Click on month
+            wrapper
+                .find(Caption)
+                .find('span')
+                .at(0)
+                .simulate('click');
+            assert.strictEqual(wrapper.find(MonthPickerOverlay).length, 1);
+            assert.strictEqual(wrapper.find(Overlay).length, 1);
+            wrapper
+                .find(MonthPickerOverlay)
+                .find('span')
+                .at(8)
+                .simulate('click');
+            assert.strictEqual(wrapper.find(MonthPickerOverlay).length, 0);
+            assert.strictEqual(wrapper.find(Overlay).length, 2);
+
+            // Click on year
+            wrapper
+                .find(Caption)
+                .find('span')
+                .at(1)
+                .simulate('click');
+            assert.strictEqual(wrapper.find(YearPickerOverlay).length, 1);
+            assert.strictEqual(wrapper.find(Overlay).length, 1);
+            wrapper
+                .find(YearPickerOverlay)
+                .find('span')
+                .at(8)
+                .simulate('click');
+            assert.strictEqual(wrapper.find(YearPickerOverlay).length, 0);
+            assert.strictEqual(wrapper.find(Overlay).length, 2);
+            wrapper
+                .find('input')
+                .at(0)
+                .simulate('blur');
+
+            // TO date
+            wrapper
+                .find('input')
+                .at(1)
+                .simulate('focus');
+            assert.strictEqual(wrapper.find(Paper).length, 1, 'should have a Paper');
+            assert.strictEqual(wrapper.type(), HiDateRangePicker, 'should be a HiDateRangePicker');
+            assert.strictEqual(
+                wrapper.find('button').length,
+                3,
+                'should have 3 buttons (prev, next, today)',
+            );
+
+            // Check default selected day
+            assert.strictEqual(wrapper.find('div.start').text(), '1', 'should have selected day 1');
+            assert.strictEqual(wrapper.find('div.end').text(), '5', 'should have selected day 5');
+
+            // Click on sixth day
+            wrapper
+                .find(`div.${classes.day}`)
+                .at(5)
+                .simulate('click');
+            assert.strictEqual(
+                handleChange.callCount,
+                2,
+                'should have been called once handleChange',
+            );
+            assert.strictEqual(handleChange.args[1][0], 'to', 'should change from date');
+            assert.strictEqual(
+                handleChange.args[1][1].toLocaleDateString('fr-FR'),
+                '2018-1-6',
+                'should have new date value',
+            );
+
+            // Click on month
+            wrapper
+                .find(Caption)
+                .find('span')
+                .at(0)
+                .simulate('click');
+            assert.strictEqual(wrapper.find(MonthPickerOverlay).length, 1);
+            assert.strictEqual(wrapper.find(Overlay).length, 0);
+            wrapper
+                .find(MonthPickerOverlay)
+                .find('span')
+                .at(8)
+                .simulate('click');
+            assert.strictEqual(wrapper.find(MonthPickerOverlay).length, 0);
+            assert.strictEqual(wrapper.find(Overlay).length, 1);
+
+            // Click on year
+            wrapper
+                .find(Caption)
+                .find('span')
+                .at(1)
+                .simulate('click');
+            assert.strictEqual(wrapper.find(YearPickerOverlay).length, 1);
+            assert.strictEqual(wrapper.find(Overlay).length, 0);
+            wrapper
+                .find(YearPickerOverlay)
+                .find('span')
+                .at(8)
+                .simulate('click');
+            assert.strictEqual(wrapper.find(YearPickerOverlay).length, 0);
+            assert.strictEqual(wrapper.find(Overlay).length, 1);
+            //--------------
+
+            wrapper
+                .find('input')
+                .at(1)
+                .simulate('blur');
+            assert.strictEqual(wrapper.find(Paper).length, 0, 'should not have a Paper anymore');
+        });
+
+        it('should mount with time', () => {
+            const handleChange = spy();
+            const from = new Date(2018, 0, 1);
+            const to = new Date(2018, 0, 5);
+            const wrapper = mount(
+                <HiDateRangePicker
+                    onChange={handleChange}
+                    showOverlay
+                    id="single-range"
+                    from={from}
+                    to={to}
+                    enableTime
+                />,
+            );
+
+            assert.strictEqual(
+                handleChange.callCount,
+                0,
+                'should not not have been called handleChange',
+            );
+
+            assert.strictEqual(wrapper.find(Paper).length, 0);
+            wrapper
+                .find('input')
+                .at(0)
+                .simulate('focus');
+            assert.strictEqual(wrapper.find(Paper).length, 1);
+            assert.strictEqual(wrapper.find(Overlay).length, 1);
+            assert.strictEqual(wrapper.type(), HiDateRangePicker);
+            assert.strictEqual(wrapper.find(TimePickerOverlay).length, 0);
+            assert.strictEqual(wrapper.find('button').length, 4);
+            // Click on time
+            wrapper
+                .find('button')
+                .at(2)
+                .simulate('click');
+            assert.strictEqual(wrapper.find(TimePickerOverlay).length, 1);
+            assert.strictEqual(wrapper.find(Overlay).length, 0);
+
+            // Click on calendar
+            wrapper
+                .find('button')
+                .at(0)
+                .simulate('click');
+            assert.strictEqual(wrapper.find(TimePickerOverlay).length, 0);
+            assert.strictEqual(wrapper.find(Overlay).length, 1);
+
+            // Click on second day
+            wrapper
+                .find(Overlay)
+                .find(`div.${classes.day}`)
+                .at(1)
+                .simulate('click');
+            assert.strictEqual(
+                handleChange.callCount,
+                1,
+                'should have been called once handleChange',
+            );
+            assert.strictEqual(handleChange.args[0][1].getHours(), 0, 'should set hours to 0');
+            assert.strictEqual(handleChange.args[0][1].getMinutes(), 0, 'should set minutes to 0');
+
+            wrapper
+                .find('input')
+                .at(0)
+                .simulate('blur');
+
+            wrapper
+                .find('input')
+                .at(1)
+                .simulate('focus');
+            assert.strictEqual(wrapper.find(Paper).length, 1);
+            assert.strictEqual(wrapper.find(Overlay).length, 1);
+            assert.strictEqual(wrapper.type(), HiDateRangePicker);
+            assert.strictEqual(wrapper.find(TimePickerOverlay).length, 0);
+            assert.strictEqual(wrapper.find('button').length, 4);
+            // Click on time
+            wrapper
+                .find('button')
+                .at(2)
+                .simulate('click');
+            assert.strictEqual(wrapper.find(TimePickerOverlay).length, 1);
+            assert.strictEqual(wrapper.find(Overlay).length, 0);
+
+            // Click on calendar
+            wrapper
+                .find('button')
+                .at(0)
+                .simulate('click');
+            assert.strictEqual(wrapper.find(TimePickerOverlay).length, 0);
+            assert.strictEqual(wrapper.find(Overlay).length, 1);
+
+            // Click on second day
+            wrapper
+                .find(Overlay)
+                .find(`div.${classes.day}`)
+                .at(1)
+                .simulate('click');
+            assert.strictEqual(
+                handleChange.callCount,
+                2,
+                'should have been called once handleChange',
+            );
+            assert.strictEqual(handleChange.args[1][1].getHours(), 0, 'should set hours to 0');
+            assert.strictEqual(handleChange.args[1][1].getMinutes(), 0, 'should set minutes to 0');
+        });
+
+        it('should mount with time and default value', () => {
+            const handleChange = spy();
+            const from = new Date(2018, 0, 1, 6, 44);
+            const to = new Date(2018, 0, 5, 8, 55);
+            const wrapper = mount(
+                <HiDateRangePicker
+                    onChange={handleChange}
+                    showOverlay
+                    id="single-range"
+                    from={from}
+                    to={to}
+                    enableTime
+                />,
+            );
+
+            assert.strictEqual(wrapper.find(Paper).length, 0);
+            wrapper
+                .find('input')
+                .at(0)
+                .simulate('focus');
+            assert.strictEqual(wrapper.find(Paper).length, 1);
+            assert.strictEqual(wrapper.find(Overlay).length, 1);
+            assert.strictEqual(wrapper.type(), HiDateRangePicker);
+            assert.strictEqual(wrapper.find(TimePickerOverlay).length, 0);
+            assert.strictEqual(wrapper.find('button').length, 4);
+
+            // Click on second day
+            wrapper
+                .find(`div.${classes.day}`)
+                .at(1)
+                .simulate('click');
+            assert.strictEqual(
+                handleChange.callCount,
+                1,
+                'should have been called twice handleChange',
+            );
+            assert.strictEqual(handleChange.args[0][1].getHours(), 6, 'should keep hours');
+            assert.strictEqual(handleChange.args[0][1].getMinutes(), 44, 'should keep minutes');
+        });
+
+        // TODO ligne 132 ???
+
+        it('should mount with disabled date', () => {
+            const handleChange = spy();
+            const wrapper = mount(
+                <HiDateRangePicker
+                    onChange={handleChange}
+                    showOverlay
+                    id="single-range"
+                    disablePastDays
+                />,
+            );
+
+            assert.strictEqual(wrapper.find(Paper).length, 0);
+            wrapper
+                .find('input')
+                .at(0)
+                .simulate('focus');
+            assert.strictEqual(wrapper.find(Paper).length, 1);
+            assert.strictEqual(wrapper.find(Overlay).length, 1);
+            assert.strictEqual(wrapper.type(), HiDateRangePicker);
+
+            // Click to past month
+            wrapper
+                .find('button')
+                .at(0)
+                .simulate('click');
+
+            // Click to disabled day
+            wrapper
+                .find(Overlay)
+                .find('div.disabled')
+                .at(5)
+                .simulate('click');
+            assert.strictEqual(
+                handleChange.callCount,
+                0,
+                'should not have been called handleChange',
+            );
+        });
+
+        it('should open on enabled', () => {
+            const handleChange = spy();
+            const wrapper = mount(
+                <HiDateRangePicker
+                    onChange={handleChange}
+                    showOverlay
+                    id="single-range"
+                    disabled
+                />,
+            );
+            wrapper.setProps({ disabled: false });
+        });
+    });
+*/
+});