@epam/uui 5.5.1 → 5.5.2

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

@@ -0,0 +1,284 @@
+import * as React from 'react';
+import dayjs, { Dayjs } from 'dayjs';
+import { uuiDaySelection, type ViewType } from '@epam/uui-components';
+import { RangeDatePickerBody, RangeDatePickerBodyProps, rangeDatePickerPresets, RangeDatePickerValue } from '../RangeDatePickerBody';
+import { act, fireEvent, renderer, screen, setupComponentForTest, within } from '@epam/uui-test-utils';
+
+type RangePickerSetupProps = {
+    selectedDate: RangeDatePickerBodyProps<RangeDatePickerValue>['value']['selectedDate'];
+    focusPart: RangeDatePickerBodyProps<RangeDatePickerValue>['focusPart'];
+    presets?: RangeDatePickerBodyProps<RangeDatePickerValue>['presets'];
+    filter?: RangeDatePickerBodyProps<RangeDatePickerValue>['filter'];
+    isHoliday?: RangeDatePickerBodyProps<RangeDatePickerValue>['isHoliday'];
+};
+
+function parentElemContainsClasses(elem: HTMLElement, classesArr: string[]) {
+    // @ts-ignore
+    const actualList = [...elem.parentElement.classList];
+    return classesArr.every((c: string) => actualList.indexOf(c) !== -1);
+}
+
+async function setupRangePickerBody(params: RangePickerSetupProps) {
+    const { selectedDate, ...props } = params;
+
+    const { result, mocks } = await setupComponentForTest<RangeDatePickerBodyProps<any>>(
+        (context) => {
+            return {
+                value: {
+                    view: 'DAY_SELECTION' as any,
+                    selectedDate,
+                    displayedDate: dayjs('2019-10-12').startOf('day'),
+                },
+                ...props,
+                changeIsOpen: jest.fn(),
+                onValueChange: jest.fn().mockImplementation((newValue) => context.current?.setProperty('value', newValue)),
+            };
+        },
+        (props) => (<RangeDatePickerBody { ...props } />),
+    );
+
+    const [leftHeader] = screen.queryAllByRole('banner');
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const [back, title] = within(leftHeader).queryAllByRole('button');
+
+    return {
+        result,
+        dom: { title },
+        mocks,
+    };
+}
+
+describe('RangeDatePickerBody', () => {
+    it('should be rendered correctly', () => {
+        const displayedDate = dayjs('2020-09-03');
+        const value = {
+            view: 'DAY_SELECTION' as ViewType,
+            selectedDate: {
+                from: null,
+                to: null,
+            },
+            displayedDate,
+        };
+        const tree = renderer.create(
+            <RangeDatePickerBody
+                value={ value }
+                focusPart="from"
+                onValueChange={ jest.fn }
+            />,
+        ).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+
+    it('[focusPart:from] should clear "To" only when user selects "From" which is bigger than "To"', async () => {
+        const { mocks } = await setupRangePickerBody({
+            focusPart: 'from',
+            selectedDate: { from: '2019-10-12', to: '2019-10-17' },
+        });
+
+        // "To" is not cleared when user selects "From" not bigger than "To"
+        // case-1
+        const [oct13] = screen.getAllByText('13');
+        fireEvent.click(oct13);
+        expect(mocks.onValueChange).toHaveBeenLastCalledWith({
+            displayedDate: expect.anything(),
+            view: expect.anything(),
+            selectedDate: {
+                from: '2019-10-13',
+                to: '2019-10-17',
+            },
+        });
+        // case-2
+        const [oct17] = screen.getAllByText('17');
+        fireEvent.click(oct17);
+        expect(mocks.onValueChange).toHaveBeenLastCalledWith({
+            displayedDate: expect.anything(),
+            view: expect.anything(),
+            selectedDate: {
+                from: '2019-10-17',
+                to: '2019-10-17',
+            },
+        });
+
+        // "To" is cleared when user tries to select "From" bigger than "To"
+        const [oct18] = screen.getAllByText('18');
+        fireEvent.click(oct18);
+        expect(mocks.onValueChange).toHaveBeenLastCalledWith({
+            displayedDate: expect.anything(),
+            view: expect.anything(),
+            selectedDate: {
+                from: '2019-10-18',
+                to: null,
+            },
+        });
+    });
+
+    it('[focusPart:to] should select "From" when user selects "To" which is less than "From"', async () => {
+        const { mocks } = await setupRangePickerBody({
+            focusPart: 'to',
+            selectedDate: { from: '2019-10-12', to: '2019-10-17' },
+        });
+
+        // "From" is not cleared user selects "To" equal or bigger than "From"
+        // case-1
+        const [oct16] = screen.getAllByText('16');
+        fireEvent.click(oct16);
+        expect(mocks.onValueChange).toHaveBeenLastCalledWith({
+            displayedDate: expect.anything(),
+            view: expect.anything(),
+            selectedDate: {
+                from: '2019-10-12',
+                to: '2019-10-16',
+            },
+        });
+        // case-2
+        const [oct12] = screen.getAllByText('12');
+        fireEvent.click(oct12);
+        expect(mocks.onValueChange).toHaveBeenLastCalledWith({
+            displayedDate: expect.anything(),
+            view: expect.anything(),
+            selectedDate: {
+                from: '2019-10-12',
+                to: '2019-10-12',
+            },
+        });
+
+        // "From" is selected when user selects "To" less than "From" (This is different from how focusPart: from works)
+        const [oct11] = screen.getAllByText('11');
+        fireEvent.click(oct11);
+        expect(mocks.onValueChange).toHaveBeenLastCalledWith({
+            displayedDate: expect.anything(),
+            view: expect.anything(),
+            selectedDate: {
+                from: '2019-10-11',
+                to: null,
+            },
+        });
+    });
+
+    it('should change view by click on title', async () => {
+        const { dom } = await setupRangePickerBody({
+            focusPart: 'from',
+            selectedDate: { from: '2019-10-12', to: '2019-10-17' },
+        });
+        expect(dom.title.textContent).toEqual('October 2019');
+
+        fireEvent.click(dom.title);
+        expect(screen.getByText('2019')).toBeInTheDocument();
+        expect(screen.getByText('Oct').classList.contains('uui-monthselection-current-month')).toBeTruthy();
+        expect(dom.title.textContent).toEqual(' 2019');
+
+        fireEvent.click(dom.title);
+        expect(screen.getByText('October 2019')).toBeTruthy();
+        expect(screen.getByText('2019').classList.contains('uui-yearselection-current-year')).toBeTruthy();
+        expect(dom.title.textContent).toEqual('October 2019');
+    });
+
+    it('should have special class names for selected days', async () => {
+        const useCase1 = await setupRangePickerBody({
+            focusPart: 'from',
+            selectedDate: null,
+        });
+        expect(useCase1.result.container.querySelectorAll('.uui-calendar-selected-day').length).toBe(0);
+        useCase1.result.unmount();
+
+        const useCase2 = await setupRangePickerBody({
+            focusPart: 'from',
+            selectedDate: { from: '2019-10-12', to: '2019-10-14' },
+        });
+        expect(useCase2.result.container.querySelectorAll('.uui-calendar-selected-day').length).toBe(2);
+
+        const [oct12] = useCase2.result.queryAllByText('12');
+        const [oct13] = useCase2.result.queryAllByText('13');
+        const [oct14] = useCase2.result.queryAllByText('14');
+
+        expect(parentElemContainsClasses(oct12, ['uui-range-datepicker-first-day-in-range-wrapper', uuiDaySelection.selectedDay])).toBeTruthy();
+        expect(parentElemContainsClasses(oct13, ['uui-range-datepicker-in-range'])).toBeTruthy();
+        expect(parentElemContainsClasses(oct14, ['uui-range-datepicker-last-day-in-range-wrapper', uuiDaySelection.selectedDay])).toBeTruthy();
+    });
+
+    it('should work with presets', async () => {
+        const { result } = await setupRangePickerBody({
+            focusPart: 'from',
+            selectedDate: null,
+            presets: rangeDatePickerPresets,
+        });
+        expect(result.container.querySelectorAll('.uui-calendar-selected-day').length).toBe(0);
+
+        const today = screen.getByText('Today');
+        act(() => {
+            today.click();
+        });
+
+        const [selectedDay] = screen.queryAllByText(dayjs().date());
+        expect(parentElemContainsClasses(selectedDay, [
+            'uui-range-datepicker-first-day-in-range-wrapper',
+            'uui-range-datepicker-last-day-in-range-wrapper',
+            uuiDaySelection.selectedDay,
+        ])).toBeTruthy();
+    });
+
+    it('should start selection from start date', async () => {
+        const { mocks } = await setupRangePickerBody({
+            focusPart: 'from',
+            selectedDate: null,
+        });
+
+        const [oct13] = screen.getAllByText('13');
+        fireEvent.click(oct13);
+        expect(mocks.onValueChange).toHaveBeenLastCalledWith({
+            displayedDate: expect.anything(),
+            view: expect.anything(),
+            selectedDate: {
+                from: '2019-10-13',
+                to: null,
+            },
+        });
+    });
+
+    it('should start selection from end date', async () => {
+        const { mocks } = await setupRangePickerBody({
+            focusPart: 'to',
+            selectedDate: null,
+        });
+
+        const [oct17] = screen.getAllByText('17');
+        fireEvent.click(oct17);
+        expect(mocks.onValueChange).toHaveBeenLastCalledWith({
+            displayedDate: expect.anything(),
+            view: expect.anything(),
+            selectedDate: {
+                from: null,
+                to: '2019-10-17',
+            },
+        });
+    });
+
+    it('should not change date range if there is filter', async () => {
+        const { mocks } = await setupRangePickerBody({
+            focusPart: 'to',
+            selectedDate: { from: '2019-10-12', to: '2019-10-14' },
+            filter: (day: Dayjs) => {
+                return day.valueOf() <= dayjs('2019-10-22').subtract(0, 'day').valueOf();
+            },
+        });
+
+        const [oct25] = screen.getAllByText('25');
+        fireEvent.click(oct25);
+
+        expect(mocks.onValueChange).not.toHaveBeenCalled();
+    });
+
+    it('should mark holidays', async () => {
+        await setupRangePickerBody({
+            focusPart: 'to',
+            selectedDate: { from: '2019-10-12', to: '2019-10-14' },
+            isHoliday: (day?: Dayjs) => {
+                return day?.date() === 12;
+            },
+        });
+
+        const [oct12] = screen.getAllByText('12');
+
+        expect(parentElemContainsClasses(oct12, ['uui-calendar-day-holiday'])).toBeTruthy();
+    });
+});