@epam/uui 5.5.2 → 5.5.4

package/components/datePickers/__tests__/DatePickerHeader.test.tsx

@@ -1,195 +0,0 @@
-import * as React from 'react';
-import dayjs from 'dayjs';
-
-import { fireEvent, setupComponentForTest, screen, within, userEvent } from '@epam/uui-test-utils';
-import { DatePickerHeader, DatePickerHeaderProps, getNextListYearFromCurrent, getNextMonthFromCurrent, getNextYearFromCurrent } from '../DatePickerHeader';
-import { ViewType } from '@epam/uui-components';
-
-async function setupDatePickerHeader(params: { initialDate: string, viewType?: ViewType, onValueChange?: jest.Mock }) {
-    const value = {
-        view: params.viewType || 'DAY_SELECTION' as ViewType,
-        selectedDate: '',
-        displayedDate: dayjs(params.initialDate).startOf('day'),
-    };
-
-    const { result } = await setupComponentForTest<DatePickerHeaderProps>(
-        (context) => ({
-            value,
-            onValueChange: params.onValueChange || jest.fn().mockImplementation((newValue) => {
-                context.current?.setProperty('value', newValue);
-            }),
-        }),
-        (props) => <DatePickerHeader { ...props } />,
-    );
-
-    const [left, title, right] = within(screen.getByRole('banner')).queryAllByRole('button');
-
-    return {
-        result,
-        dom: { left, right, title },
-    };
-}
-
-describe('DatePickerHeader', () => {
-    describe('left arrow', () => {
-        it('should change displayed date on left navigation arrow click', async () => {
-            const onValueChangeMock = jest.fn();
-            const { dom } = await setupDatePickerHeader({ initialDate: '2017-01-22', viewType: 'DAY_SELECTION', onValueChange: onValueChangeMock });
-
-            fireEvent.click(dom.left);
-
-            expect(onValueChangeMock).toHaveBeenCalledWith({
-                view: 'DAY_SELECTION',
-                selectedDate: '',
-                displayedDate: dayjs('2016-12-22').startOf('day'),
-            });
-        });
-
-        it('should change displayed date on left navigation arrow click (month selection)', async () => {
-            const onValueChangeMock = jest.fn();
-            const { dom } = await setupDatePickerHeader({ initialDate: '2017-01-22', viewType: 'MONTH_SELECTION', onValueChange: onValueChangeMock });
-
-            fireEvent.click(dom.left);
-
-            expect(onValueChangeMock).toHaveBeenCalledWith({
-                view: 'MONTH_SELECTION',
-                selectedDate: '',
-                displayedDate: dayjs('2016-01-22').startOf('day'),
-            });
-        });
-
-        it('should change displayed date on left navigation arrow click (year selection)', async () => {
-            const onValueChangeMock = jest.fn();
-            const { dom } = await setupDatePickerHeader({ initialDate: '2017-01-22', viewType: 'YEAR_SELECTION', onValueChange: onValueChangeMock });
-
-            fireEvent.click(dom.left);
-
-            expect(onValueChangeMock).toHaveBeenCalledWith({
-                view: 'YEAR_SELECTION',
-                selectedDate: '',
-                displayedDate: dayjs('2001-01-22').startOf('day'),
-            });
-        });
-
-        it('should change displayed date using keyboard (year selection)', async () => {
-            const onValueChangeMock = jest.fn();
-            const { dom } = await setupDatePickerHeader({ initialDate: '2017-01-22', viewType: 'YEAR_SELECTION', onValueChange: onValueChangeMock });
-
-            await userEvent.type(dom.left, '{space}');
-
-            expect(onValueChangeMock).toHaveBeenCalledWith({
-                view: 'YEAR_SELECTION',
-                selectedDate: '',
-                displayedDate: dayjs('2001-01-22').startOf('day'),
-            });
-        });
-    });
-
-    describe('right arrow', () => {
-        it('should change displayed date on right navigation arrow click (day selection)', async () => {
-            const onValueChangeMock = jest.fn();
-            const { dom } = await setupDatePickerHeader({ initialDate: '2017-01-22', viewType: 'DAY_SELECTION', onValueChange: onValueChangeMock });
-
-            fireEvent.click(dom.right);
-
-            expect(onValueChangeMock).toHaveBeenCalledWith({
-                view: 'DAY_SELECTION',
-                selectedDate: '',
-                displayedDate: getNextMonthFromCurrent(dayjs('2017-01-22').startOf('day')),
-            });
-        });
-
-        it('should change displayed date on right navigation arrow click (month selection)', async () => {
-            const onValueChangeMock = jest.fn();
-            const { dom } = await setupDatePickerHeader({ initialDate: '2017-01-22', viewType: 'MONTH_SELECTION', onValueChange: onValueChangeMock });
-
-            fireEvent.click(dom.right);
-
-            expect(onValueChangeMock).toHaveBeenCalledWith({
-                view: 'MONTH_SELECTION',
-                selectedDate: '',
-                displayedDate: getNextYearFromCurrent(dayjs('2017-01-22').startOf('day')),
-            });
-        });
-
-        it('should change displayed date on right navigation arrow click (year selection)', async () => {
-            const onValueChangeMock = jest.fn();
-            const { dom } = await setupDatePickerHeader({ initialDate: '2017-01-22', viewType: 'YEAR_SELECTION', onValueChange: onValueChangeMock });
-
-            fireEvent.click(dom.right);
-
-            expect(onValueChangeMock).toHaveBeenCalledWith({
-                view: 'YEAR_SELECTION',
-                selectedDate: '',
-                displayedDate: getNextListYearFromCurrent(dayjs('2017-01-22').startOf('day')),
-            });
-        });
-
-        it('should change displayed date using keyboard (year selection)', async () => {
-            const onValueChangeMock = jest.fn();
-            const { dom } = await setupDatePickerHeader({ initialDate: '2017-01-22', viewType: 'YEAR_SELECTION', onValueChange: onValueChangeMock });
-
-            await userEvent.type(dom.right, '{space}');
-
-            expect(onValueChangeMock).toHaveBeenCalledWith({
-                view: 'YEAR_SELECTION',
-                selectedDate: '',
-                displayedDate: getNextListYearFromCurrent(dayjs('2017-01-22').startOf('day')),
-            });
-        });
-    });
-
-    describe('title', () => {
-        it('should change displayed date on title click (year selection)', async () => {
-            const onValueChangeMock = jest.fn();
-            const { dom } = await setupDatePickerHeader({ initialDate: '2018-01-22', viewType: 'YEAR_SELECTION', onValueChange: onValueChangeMock });
-
-            fireEvent.click(dom.title);
-
-            expect(onValueChangeMock).toHaveBeenCalledWith({
-                view: 'DAY_SELECTION',
-                selectedDate: '',
-                displayedDate: dayjs('2018-01-22').startOf('day'),
-            });
-        });
-
-        it('should change displayed date on title click (month selection)', async () => {
-            const onValueChangeMock = jest.fn();
-            const { dom } = await setupDatePickerHeader({ initialDate: '2018-01-22', viewType: 'MONTH_SELECTION', onValueChange: onValueChangeMock });
-
-            fireEvent.click(dom.title);
-
-            expect(onValueChangeMock).toHaveBeenCalledWith({
-                view: 'YEAR_SELECTION',
-                selectedDate: '',
-                displayedDate: dayjs('2018-01-22').startOf('day'),
-            });
-        });
-
-        it('should change displayed date on title click (day selection)', async () => {
-            const onValueChangeMock = jest.fn();
-            const { dom } = await setupDatePickerHeader({ initialDate: '2018-01-22', viewType: 'DAY_SELECTION', onValueChange: onValueChangeMock });
-
-            fireEvent.click(dom.title);
-
-            expect(onValueChangeMock).toHaveBeenCalledWith({
-                view: 'MONTH_SELECTION',
-                selectedDate: '',
-                displayedDate: dayjs('2018-01-22').startOf('day'),
-            });
-        });
-
-        it('should change displayed date using keyboard (day selection)', async () => {
-            const onValueChangeMock = jest.fn();
-            const { dom } = await setupDatePickerHeader({ initialDate: '2018-01-22', viewType: 'DAY_SELECTION', onValueChange: onValueChangeMock });
-
-            await userEvent.type(dom.title, '{space}');
-
-            expect(onValueChangeMock).toHaveBeenCalledWith({
-                view: 'MONTH_SELECTION',
-                selectedDate: '',
-                displayedDate: dayjs('2018-01-22').startOf('day'),
-            });
-        });
-    });
-});

package/components/datePickers/__tests__/RangeDatePicker.test.tsx

@@ -1,323 +0,0 @@
-import * as React from 'react';
-import { RangeDatePicker, RangeDatePickerProps } from '../RangeDatePicker';
-import {
-    renderSnapshotWithContextAsync, setupComponentForTest, fireEvent, screen, within, userEvent,
-} from '@epam/uui-test-utils';
-import { supportedDateFormats } from '@epam/uui-components';
-import dayjs from 'dayjs';
-
-interface TestProps {
-    value?: RangeDatePickerProps['value'];
-    format?: RangeDatePickerProps['format'];
-    onBlur?: RangeDatePickerProps['onBlur'];
-    onFocus?: RangeDatePickerProps['onFocus'];
-    isHoliday?: RangeDatePickerProps['isHoliday'];
-    onOpenChange?: RangeDatePickerProps['onOpenChange'];
-}
-
-function parentElemContainsClasses(elem: HTMLElement, classesArr: string[]) {
-    // @ts-ignore
-    const actualList = [...elem.parentElement.classList];
-    return classesArr.every((c: string) => actualList.indexOf(c) !== -1);
-}
-
-async function setupRangeDatePicker(props: TestProps) {
-    const { result, mocks } = await setupComponentForTest<RangeDatePickerProps>(
-        (context) => ({
-            rawProps: { from: { 'data-testid': 'from' }, to: { 'data-testid': 'to' } },
-            ...props,
-            value: props.value || { from: null, to: null },
-            onValueChange: jest.fn().mockImplementation((newValue) => {
-                context.current?.setProperty('value', newValue);
-            }),
-            // size: '48',
-        }),
-        (props) => <RangeDatePicker { ...props } />,
-    );
-
-    const from = within(screen.getByTestId('from')).getByRole<HTMLInputElement>('textbox');
-    const to = within(screen.getByTestId('to')).getByRole<HTMLInputElement>('textbox');
-
-    return {
-        result,
-        dom: { from, to },
-        mocks: { onValueChange: mocks.onValueChange, onOpenChange: mocks.onOpenChange },
-    };
-}
-
-describe('RangeDataPicker', () => {
-    it('should be rendered if minimum params and custom format defined', async () => {
-        const tree = await renderSnapshotWithContextAsync(<RangeDatePicker format="MMM D, YYYY" value={ { from: null, to: null } } onValueChange={ jest.fn } />);
-        expect(tree).toMatchSnapshot();
-    });
-
-    it('should be rendered if many params defined', async () => {
-        const tree = await renderSnapshotWithContextAsync(
-            <RangeDatePicker
-                format="MMM D, YYYY"
-                value={ { from: null, to: null } }
-                onValueChange={ jest.fn }
-                renderFooter={ ((value: any) => jest.fn(value)) as any }
-                disableClear={ false }
-                getPlaceholder={ () => '' }
-                isDisabled
-                isReadonly
-                isInvalid
-            />,
-        );
-        expect(tree).toMatchSnapshot();
-    });
-
-    it('should change input value after change props', async () => {
-        const value = { from: '2017-01-22', to: '2017-01-28' };
-        const { dom } = await setupRangeDatePicker({ value });
-        expect(dom.from.value).toBe('Jan 22, 2017');
-        expect(dom.to.value).toBe('Jan 28, 2017');
-    });
-
-    it('should render with default props', async () => {
-        const { result } = await setupRangeDatePicker({ value: undefined });
-        expect(result.container).not.toBeFalsy();
-    });
-
-    it('should change state on picker clear', async () => {
-        const value = { from: '2017-01-22', to: '2017-01-28' };
-        const { mocks } = await setupRangeDatePicker({ value });
-        const clear = screen.getByRole('button');
-        fireEvent.click(clear);
-        expect(mocks.onValueChange).toBeCalledWith({ from: null, to: null });
-    });
-
-    it("should open picker on 'from' field focus and close it on blur", async () => {
-        const { dom } = await setupRangeDatePicker({ value: undefined });
-        fireEvent.focus(dom.from);
-        expect(screen.getByRole('dialog')).toBeInTheDocument();
-        fireEvent.blur(dom.from);
-        expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
-    });
-
-    it('should open picker on "To" field focus and close it on blur', async () => {
-        const { dom } = await setupRangeDatePicker({ value: undefined });
-        fireEvent.focus(dom.to);
-        expect(screen.getByRole('dialog')).toBeInTheDocument();
-        fireEvent.blur(dom.to);
-        expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
-    });
-
-    it('should reset invalid "From" value onBlur', async () => {
-        const value = { from: '2019-10-47', to: '2019-10-07' };
-        const { dom, mocks } = await setupRangeDatePicker({ value });
-        fireEvent.blur(dom.from);
-        expect(mocks.onValueChange).toHaveBeenLastCalledWith({
-            from: null,
-            to: value.to,
-        });
-    });
-
-    it('should set new value when new value typed in input', async () => {
-        const newValueManualTyping = { from: 'Sep 11, 2019', to: 'Sep 20, 2019' };
-        const value = { from: '2019-09-14', to: '2019-09-15' };
-        const { dom, mocks } = await setupRangeDatePicker({ value });
-
-        fireEvent.change(dom.from, { target: { value: newValueManualTyping.from } });
-        fireEvent.blur(dom.from);
-        expect(mocks.onValueChange).toHaveBeenLastCalledWith({
-            from: '2019-09-11',
-            to: '2019-09-15',
-        });
-    });
-
-    it('should change range on picker body value change', async () => {
-        const newValueManualSel = { from: '2019-09-11' };
-        const value = { from: '2019-09-10', to: '2019-09-12' };
-        const { dom, mocks } = await setupRangeDatePicker({ value });
-
-        fireEvent.focus(dom.from);
-        const dialog = screen.getByRole('dialog');
-        const [sept11] = await within(dialog).findAllByText('11');
-        fireEvent.click(sept11);
-        expect(mocks.onValueChange).toHaveBeenLastCalledWith({
-            from: newValueManualSel.from,
-            to: '2019-09-12',
-        });
-    });
-
-    it('should focus corresponding input on picker value changes starting from start date', async () => {
-        const value = { from: '2019-09-10', to: '2019-09-12' };
-        const { dom } = await setupRangeDatePicker({ value });
-
-        await userEvent.click(dom.from);
-        expect(parentElemContainsClasses(dom.from, ['uui-focus'])).toBeTruthy();
-        expect(parentElemContainsClasses(dom.to, ['uui-focus'])).toBeFalsy();
-
-        const dialog = screen.getByRole('dialog');
-
-        const [, oct11] = await within(dialog).findAllByText('11');
-        await userEvent.click(oct11);
-        // on select, focus should be moved to 'to' input
-        expect(parentElemContainsClasses(dom.from, ['uui-focus'])).toBeFalsy();
-        expect(parentElemContainsClasses(dom.to, ['uui-focus'])).toBeTruthy();
-        expect(dom.from.value).toBe('Oct 11, 2019');
-        expect(dom.to.value).toBe('');
-
-        const [, oct5] = await within(dialog).findAllByText('5');
-        await userEvent.click(oct5);
-        // since earlier date is selected, focus should be on 'to' elem still
-        expect(parentElemContainsClasses(dom.from, ['uui-focus'])).toBeFalsy();
-        expect(parentElemContainsClasses(dom.to, ['uui-focus'])).toBeTruthy();
-        expect(dom.from.value).toBe('Oct 5, 2019');
-        expect(dom.to.value).toBe('');
-
-        const [, oct25] = await within(dialog).findAllByText('25');
-        await userEvent.click(oct25);
-        // should cancel focus when two dates selected
-        expect(parentElemContainsClasses(dom.from, ['uui-focus'])).toBeFalsy();
-        expect(parentElemContainsClasses(dom.to, ['uui-focus'])).toBeFalsy();
-        expect(dom.from.value).toBe('Oct 5, 2019');
-        expect(dom.to.value).toBe('Oct 25, 2019');
-    });
-
-    it('should focus corresponding input on picker values change starting from end date', async () => {
-        const value = { from: '2019-09-10', to: '2019-09-12' };
-        const { dom } = await setupRangeDatePicker({ value });
-
-        await userEvent.clear(dom.from);
-
-        // initial state
-        expect(dom.from.value).toBe('');
-        expect(dom.to.value).toBe('Sep 12, 2019');
-
-        await userEvent.click(dom.to);
-        const dialog = screen.getByRole('dialog');
-
-        const [, oct11] = await within(dialog).findAllByText('11');
-        await userEvent.click(oct11);
-        // should focus 'from' input
-        expect(parentElemContainsClasses(dom.from, ['uui-focus'])).toBeTruthy();
-        expect(parentElemContainsClasses(dom.to, ['uui-focus'])).toBeFalsy();
-        expect(dom.from.value).toBe('');
-        expect(dom.to.value).toBe('Oct 11, 2019');
-
-        const [, oct15] = await within(dialog).findAllByText('15');
-        await userEvent.click(oct15);
-        // should clear and focus 'to' input, when selecting older date
-        expect(parentElemContainsClasses(dom.from, ['uui-focus'])).toBeFalsy();
-        expect(parentElemContainsClasses(dom.to, ['uui-focus'])).toBeTruthy();
-        expect(dom.from.value).toBe('Oct 15, 2019');
-        expect(dom.to.value).toBe('');
-
-        const [, oct10] = await within(dialog).findAllByText('10');
-        await userEvent.click(oct10);
-        // should not change focus when earlier date selected for 'to' input
-        expect(parentElemContainsClasses(dom.from, ['uui-focus'])).toBeFalsy();
-        expect(parentElemContainsClasses(dom.to, ['uui-focus'])).toBeTruthy();
-        expect(dom.from.value).toBe('Oct 10, 2019');
-        expect(dom.to.value).toBe('');
-
-        const [, oct17] = await within(dialog).findAllByText('17');
-        await userEvent.click(oct17);
-        // should cancel focus when two dates selected
-        expect(parentElemContainsClasses(dom.from, ['uui-focus'])).toBeFalsy();
-        expect(parentElemContainsClasses(dom.to, ['uui-focus'])).toBeFalsy();
-        expect(dom.from.value).toBe('Oct 10, 2019');
-        expect(dom.to.value).toBe('Oct 17, 2019');
-    });
-
-    it('should format value onBlur', async () => {
-        const value = { from: '2019-09-10', to: '2019-10-10' };
-        const newValueInIsoFormat = { from: '2019-09-11', to: '2019-10-11' };
-
-        const { dom } = await setupRangeDatePicker({ value });
-        expect(dom.from.value).toBe('Sep 10, 2019');
-        fireEvent.change(dom.from, { target: { value: newValueInIsoFormat.from } });
-        fireEvent.blur(dom.from);
-        expect(dom.from.value).toBe('Sep 11, 2019');
-
-        fireEvent.change(dom.to, { target: { value: newValueInIsoFormat.to } });
-        fireEvent.blur(dom.to);
-        expect(dom.to.value).toBe('Oct 11, 2019');
-    });
-
-    it('should return format', async () => {
-        const value = { from: '2019-09-10', to: '2019-10-10' };
-        const { dom } = await setupRangeDatePicker({ value, format: 'DD-MM-YYYY' });
-        expect(dom.from.value).toBe('10-09-2019');
-        expect(dom.to.value).toBe('10-10-2019');
-    });
-
-    it('should set the same value on from: & to: input', async () => {
-        const value = { from: '2019-09-10', to: '2019-09-10' };
-        const { dom } = await setupRangeDatePicker({ value });
-        expect(dom.from.value).toBe('Sep 10, 2019');
-        expect(dom.to.value).toBe('Sep 10, 2019');
-    });
-
-    it('should fire onOpenChange event on open state change', async () => {
-        const value = { from: '2017-01-22', to: '2017-01-28' };
-        const onOpenChange = jest.fn();
-        const { dom } = await setupRangeDatePicker({ value, onOpenChange });
-        fireEvent.focus(dom.from);
-        expect(onOpenChange).toBeCalledWith(true);
-        fireEvent.blur(dom.from);
-        expect(onOpenChange).toBeCalledWith(false);
-    });
-
-    it('should support entering from keyboard', async () => {
-        const value = { from: '2019-09-10', to: '2019-09-15' };
-        const onOpenChange = jest.fn();
-        const onBlur = jest.fn();
-        const onFocus = jest.fn();
-        const { dom, result } = await setupRangeDatePicker({ value, onBlur, onFocus, onOpenChange });
-
-        await userEvent.clear(dom.from);
-        expect(onFocus).toBeCalled();
-        expect(dom.from).toHaveFocus();
-        expect(onOpenChange).toHaveBeenCalledWith(true);
-
-        await userEvent.type(dom.from, '2019-09-11');
-
-        await userEvent.click(result.container);
-        expect(onBlur).toBeCalled();
-        expect(dom.from).not.toHaveFocus();
-        expect(onOpenChange).toHaveBeenCalledWith(false);
-
-        expect(dom.from.value).toBe('Sep 11, 2019');
-        expect(dom.to.value).toBe('Sep 15, 2019');
-    });
-
-    it('should support entering from keyboard with custom format', async () => {
-        const value = { from: '2019-09-10', to: '2019-09-15' };
-        const onOpenChange = jest.fn();
-        const onBlur = jest.fn();
-        const onFocus = jest.fn();
-        const { result, dom } = await setupRangeDatePicker({
-            value,
-            format: 'DD-MM-YYYY',
-            onBlur,
-            onFocus,
-            onOpenChange,
-        });
-
-        await userEvent.clear(dom.from);
-        expect(onFocus).toBeCalled();
-        expect(onOpenChange).toHaveBeenCalledWith(true);
-
-        await userEvent.type(dom.from, '2019-09-11');
-        expect(dom.from).toHaveFocus();
-
-        await userEvent.click(result.container);
-        expect(onBlur).toBeCalled();
-        expect(dom.from).not.toHaveFocus();
-        expect(onOpenChange).toHaveBeenCalledWith(false);
-
-        expect(dom.from.value).toBe('11-09-2019');
-        expect(dom.to.value).toBe('15-09-2019');
-    });
-
-    it.each(supportedDateFormats())('should support custom format %s', async (currentFormat) => {
-        const value = { from: '2019-09-10', to: '2019-09-15' };
-        const { dom } = await setupRangeDatePicker({ value, format: currentFormat });
-        expect(dom.from.value).toBe(dayjs('2019-09-10').format(currentFormat));
-        expect(dom.to.value).toBe(dayjs('2019-09-15').format(currentFormat));
-    });
-});