@epam/uui 5.3.0-rc.1 → 5.3.0

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

@@ -0,0 +1,186 @@
+import * as React from 'react';
+import dayjs from 'dayjs';
+import type { ViewType } from '@epam/uui-components';
+import { RangeDatePickerBody, RangeDatePickerBodyProps, RangeDatePickerValue } from '../RangeDatePickerBody';
+import { fireEvent, renderer, screen, setupComponentForTest, within } from '@epam/uui-test-utils';
+
+async function setupRangePickerBody(params: { selectedDate: { from: string; to: string }; focusPart: any }) {
+    const { selectedDate, focusPart } = params;
+
+    const { result, mocks } = await setupComponentForTest<RangeDatePickerBodyProps<any>>(
+        (context) => {
+            return {
+                value: {
+                    view: 'DAY_SELECTION' as any,
+                    selectedDate,
+                    displayedDate: dayjs('2019-10-12').startOf('day'),
+                },
+                focusPart,
+                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,
+            } as RangeDatePickerValue,
+            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.children[0].innerHTML).toEqual('October 2019');
+        fireEvent.click(dom.title);
+        expect(screen.getByText('2019')).toBeInTheDocument();
+        expect(screen.getByText('Oct').classList.contains('uui-monthselection-current-month')).toBeTruthy();
+        fireEvent.click(dom.title);
+        expect(screen.getByText('October 2019')).toBeTruthy();
+        expect(screen.getByText('2019').classList.contains('uui-yearselection-current-year')).toBeTruthy();
+    });
+
+    it('should have special class names for selected days', async () => {
+        const useCase1 = await setupRangePickerBody({
+            focusPart: 'from',
+            selectedDate: { from: null, to: 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');
+
+        function parentElemContainsClasses(elem: HTMLElement, classesArr: string[]) {
+            // @ts-ignore
+            const actualList = [...elem.parentElement.classList];
+            return classesArr.every((c: string) => actualList.indexOf(c) !== -1);
+        }
+
+        expect(parentElemContainsClasses(oct12, ['uui-range-datepicker-first-day-in-range-wrapper', 'uui-calendar-selected-day'])).toBeTruthy();
+        expect(parentElemContainsClasses(oct13, ['uui-range-datepicker-in-range'])).toBeTruthy();
+        expect(parentElemContainsClasses(oct14, ['uui-range-datepicker-last-day-in-range-wrapper', 'uui-calendar-selected-day'])).toBeTruthy();
+    });
+});

package/components/datePickers/__tests__/__snapshots__/Calendar.test.tsx.snap

@@ -0,0 +1,524 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Calendar should be rendered correctly 1`] = `
+<div
+  className="container uui-calendar-container root"
+>
+  <div
+    className="uui-calendar-content"
+  >
+    <div
+      className="uui-calendar-weekdays-container"
+    >
+      <div
+        className="uui-calendar-weekday"
+      >
+        Mon
+      </div>
+      <div
+        className="uui-calendar-weekday"
+      >
+        Tue
+      </div>
+      <div
+        className="uui-calendar-weekday"
+      >
+        Wed
+      </div>
+      <div
+        className="uui-calendar-weekday"
+      >
+        Thu
+      </div>
+      <div
+        className="uui-calendar-weekday"
+      >
+        Fri
+      </div>
+      <div
+        className="uui-calendar-weekday"
+      >
+        Sat
+      </div>
+      <div
+        className="uui-calendar-weekday"
+      >
+        Sun
+      </div>
+    </div>
+    <div
+      className="uui-calendar-days"
+      style={
+        Object {
+          "height": "180px",
+        }
+      }
+    >
+      <div>
+        <div
+          className="uui-calendar-day-cell"
+          tabIndex={0}
+        />
+        <div
+          className="uui-calendar-day-cell"
+          tabIndex={0}
+        >
+          <div
+            className="uui-calendar-clickable-day -clickable uui-calendar-day-wrapper"
+            onClick={[Function]}
+          >
+            <div
+              className="uui-calendar-day"
+            >
+              1
+            </div>
+          </div>
+        </div>
+        <div
+          className="uui-calendar-day-cell"
+          tabIndex={0}
+        >
+          <div
+            className="uui-calendar-clickable-day -clickable uui-calendar-day-wrapper"
+            onClick={[Function]}
+          >
+            <div
+              className="uui-calendar-day"
+            >
+              2
+            </div>
+          </div>
+        </div>
+        <div
+          className="uui-calendar-day-cell"
+          tabIndex={0}
+        >
+          <div
+            className="uui-calendar-clickable-day -clickable uui-calendar-selected-day uui-calendar-day-wrapper"
+            onClick={[Function]}
+          >
+            <div
+              className="uui-calendar-day"
+            >
+              3
+            </div>
+          </div>
+        </div>
+        <div
+          className="uui-calendar-day-cell"
+          tabIndex={0}
+        >
+          <div
+            className="uui-calendar-clickable-day -clickable uui-calendar-day-wrapper"
+            onClick={[Function]}
+          >
+            <div
+              className="uui-calendar-day"
+            >
+              4
+            </div>
+          </div>
+        </div>
+        <div
+          className="uui-calendar-day-cell"
+          tabIndex={0}
+        >
+          <div
+            className="uui-calendar-clickable-day -clickable uui-calendar-day-wrapper uui-calendar-day-holiday"
+            onClick={[Function]}
+          >
+            <div
+              className="uui-calendar-day"
+            >
+              5
+            </div>
+          </div>
+        </div>
+        <div
+          className="uui-calendar-day-cell"
+          tabIndex={0}
+        >
+          <div
+            className="uui-calendar-clickable-day -clickable uui-calendar-day-wrapper uui-calendar-day-holiday"
+            onClick={[Function]}
+          >
+            <div
+              className="uui-calendar-day"
+            >
+              6
+            </div>
+          </div>
+        </div>
+      </div>
+      <div>
+        <div
+          className="uui-calendar-day-cell"
+          tabIndex={0}
+        >
+          <div
+            className="uui-calendar-clickable-day -clickable uui-calendar-day-wrapper"
+            onClick={[Function]}
+          >
+            <div
+              className="uui-calendar-day"
+            >
+              7
+            </div>
+          </div>
+        </div>
+        <div
+          className="uui-calendar-day-cell"
+          tabIndex={0}
+        >
+          <div
+            className="uui-calendar-clickable-day -clickable uui-calendar-day-wrapper"
+            onClick={[Function]}
+          >
+            <div
+              className="uui-calendar-day"
+            >
+              8
+            </div>
+          </div>
+        </div>
+        <div
+          className="uui-calendar-day-cell"
+          tabIndex={0}
+        >
+          <div
+            className="uui-calendar-clickable-day -clickable uui-calendar-day-wrapper"
+            onClick={[Function]}
+          >
+            <div
+              className="uui-calendar-day"
+            >
+              9
+            </div>
+          </div>
+        </div>
+        <div
+          className="uui-calendar-day-cell"
+          tabIndex={0}
+        >
+          <div
+            className="uui-calendar-clickable-day -clickable uui-calendar-day-wrapper"
+            onClick={[Function]}
+          >
+            <div
+              className="uui-calendar-day"
+            >
+              10
+            </div>
+          </div>
+        </div>
+        <div
+          className="uui-calendar-day-cell"
+          tabIndex={0}
+        >
+          <div
+            className="uui-calendar-clickable-day -clickable uui-calendar-day-wrapper"
+            onClick={[Function]}
+          >
+            <div
+              className="uui-calendar-day"
+            >
+              11
+            </div>
+          </div>
+        </div>
+        <div
+          className="uui-calendar-day-cell"
+          tabIndex={0}
+        >
+          <div
+            className="uui-calendar-clickable-day -clickable uui-calendar-day-wrapper uui-calendar-day-holiday"
+            onClick={[Function]}
+          >
+            <div
+              className="uui-calendar-day"
+            >
+              12
+            </div>
+          </div>
+        </div>
+        <div
+          className="uui-calendar-day-cell"
+          tabIndex={0}
+        >
+          <div
+            className="uui-calendar-clickable-day -clickable uui-calendar-day-wrapper uui-calendar-day-holiday"
+            onClick={[Function]}
+          >
+            <div
+              className="uui-calendar-day"
+            >
+              13
+            </div>
+          </div>
+        </div>
+      </div>
+      <div>
+        <div
+          className="uui-calendar-day-cell"
+          tabIndex={0}
+        >
+          <div
+            className="uui-calendar-clickable-day -clickable uui-calendar-day-wrapper"
+            onClick={[Function]}
+          >
+            <div
+              className="uui-calendar-day"
+            >
+              14
+            </div>
+          </div>
+        </div>
+        <div
+          className="uui-calendar-day-cell"
+          tabIndex={0}
+        >
+          <div
+            className="uui-calendar-clickable-day -clickable uui-calendar-day-wrapper"
+            onClick={[Function]}
+          >
+            <div
+              className="uui-calendar-day"
+            >
+              15
+            </div>
+          </div>
+        </div>
+        <div
+          className="uui-calendar-day-cell"
+          tabIndex={0}
+        >
+          <div
+            className="uui-calendar-clickable-day -clickable uui-calendar-day-wrapper"
+            onClick={[Function]}
+          >
+            <div
+              className="uui-calendar-day"
+            >
+              16
+            </div>
+          </div>
+        </div>
+        <div
+          className="uui-calendar-day-cell"
+          tabIndex={0}
+        >
+          <div
+            className="uui-calendar-clickable-day -clickable uui-calendar-day-wrapper"
+            onClick={[Function]}
+          >
+            <div
+              className="uui-calendar-day"
+            >
+              17
+            </div>
+          </div>
+        </div>
+        <div
+          className="uui-calendar-day-cell"
+          tabIndex={0}
+        >
+          <div
+            className="uui-calendar-clickable-day -clickable uui-calendar-day-wrapper"
+            onClick={[Function]}
+          >
+            <div
+              className="uui-calendar-day"
+            >
+              18
+            </div>
+          </div>
+        </div>
+        <div
+          className="uui-calendar-day-cell"
+          tabIndex={0}
+        >
+          <div
+            className="uui-calendar-clickable-day -clickable uui-calendar-day-wrapper uui-calendar-day-holiday"
+            onClick={[Function]}
+          >
+            <div
+              className="uui-calendar-day"
+            >
+              19
+            </div>
+          </div>
+        </div>
+        <div
+          className="uui-calendar-day-cell"
+          tabIndex={0}
+        >
+          <div
+            className="uui-calendar-clickable-day -clickable uui-calendar-day-wrapper uui-calendar-day-holiday"
+            onClick={[Function]}
+          >
+            <div
+              className="uui-calendar-day"
+            >
+              20
+            </div>
+          </div>
+        </div>
+      </div>
+      <div>
+        <div
+          className="uui-calendar-day-cell"
+          tabIndex={0}
+        >
+          <div
+            className="uui-calendar-clickable-day -clickable uui-calendar-day-wrapper"
+            onClick={[Function]}
+          >
+            <div
+              className="uui-calendar-day"
+            >
+              21
+            </div>
+          </div>
+        </div>
+        <div
+          className="uui-calendar-day-cell"
+          tabIndex={0}
+        >
+          <div
+            className="uui-calendar-clickable-day -clickable uui-calendar-day-wrapper"
+            onClick={[Function]}
+          >
+            <div
+              className="uui-calendar-day"
+            >
+              22
+            </div>
+          </div>
+        </div>
+        <div
+          className="uui-calendar-day-cell"
+          tabIndex={0}
+        >
+          <div
+            className="uui-calendar-clickable-day -clickable uui-calendar-day-wrapper"
+            onClick={[Function]}
+          >
+            <div
+              className="uui-calendar-day"
+            >
+              23
+            </div>
+          </div>
+        </div>
+        <div
+          className="uui-calendar-day-cell"
+          tabIndex={0}
+        >
+          <div
+            className="uui-calendar-clickable-day -clickable uui-calendar-day-wrapper"
+            onClick={[Function]}
+          >
+            <div
+              className="uui-calendar-day"
+            >
+              24
+            </div>
+          </div>
+        </div>
+        <div
+          className="uui-calendar-day-cell"
+          tabIndex={0}
+        >
+          <div
+            className="uui-calendar-clickable-day -clickable uui-calendar-day-wrapper"
+            onClick={[Function]}
+          >
+            <div
+              className="uui-calendar-day"
+            >
+              25
+            </div>
+          </div>
+        </div>
+        <div
+          className="uui-calendar-day-cell"
+          tabIndex={0}
+        >
+          <div
+            className="uui-calendar-clickable-day -clickable uui-calendar-day-wrapper uui-calendar-day-holiday"
+            onClick={[Function]}
+          >
+            <div
+              className="uui-calendar-day"
+            >
+              26
+            </div>
+          </div>
+        </div>
+        <div
+          className="uui-calendar-day-cell"
+          tabIndex={0}
+        >
+          <div
+            className="uui-calendar-clickable-day -clickable uui-calendar-day-wrapper uui-calendar-day-holiday"
+            onClick={[Function]}
+          >
+            <div
+              className="uui-calendar-day"
+            >
+              27
+            </div>
+          </div>
+        </div>
+      </div>
+      <div>
+        <div
+          className="uui-calendar-day-cell"
+          tabIndex={0}
+        >
+          <div
+            className="uui-calendar-clickable-day -clickable uui-calendar-day-wrapper"
+            onClick={[Function]}
+          >
+            <div
+              className="uui-calendar-day"
+            >
+              28
+            </div>
+          </div>
+        </div>
+        <div
+          className="uui-calendar-day-cell"
+          tabIndex={0}
+        >
+          <div
+            className="uui-calendar-clickable-day -clickable uui-calendar-day-wrapper"
+            onClick={[Function]}
+          >
+            <div
+              className="uui-calendar-day"
+            >
+              29
+            </div>
+          </div>
+        </div>
+        <div
+          className="uui-calendar-day-cell"
+          tabIndex={0}
+        >
+          <div
+            className="uui-calendar-clickable-day -clickable uui-calendar-day-wrapper"
+            onClick={[Function]}
+          >
+            <div
+              className="uui-calendar-day"
+            >
+              30
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;