@epam/uui 5.3.0 → 5.4.0

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

@@ -1,57 +0,0 @@
-import * as React from 'react';
-import dayjs from 'dayjs';
-import { fireEvent, setupComponentForTest, screen, within } from '@epam/uui-test-utils';
-import { DatePickerHeader, DatePickerHeaderProps } from '../DatePickerHeader';
-
-async function setupDatePickerHeader(params: { initialDate: string }) {
-    const value = {
-        view: 'DAY_SELECTION' as any,
-        selectedDate: '',
-        displayedDate: dayjs(params.initialDate).startOf('day'),
-    };
-
-    const { result } = await setupComponentForTest<DatePickerHeaderProps>(
-        (context) => ({
-            value,
-            onValueChange: jest.fn().mockImplementation((newValue) => {
-                context.current.setProperty('value', newValue);
-            }),
-        }),
-        (props) => <DatePickerHeader { ...props } />,
-    );
-
-    const [left, title, right] = within(screen.queryByRole('banner')).queryAllByRole('button');
-
-    return {
-        result,
-        dom: { left, right, title },
-    };
-}
-
-describe('DatePickerHeader', () => {
-    it('should change date on arrow click', async () => {
-        const { dom } = await setupDatePickerHeader({ initialDate: '2017-01-22' });
-
-        expect(screen.getByText('January 2017')).toBeInTheDocument();
-
-        fireEvent.click(dom.left);
-        expect(screen.getByText('December 2016')).toBeInTheDocument();
-
-        fireEvent.click(dom.right);
-        expect(screen.getByText('January 2017')).toBeInTheDocument();
-
-        fireEvent.click(dom.right);
-        expect(screen.getByText('February 2017')).toBeInTheDocument();
-    });
-
-    it('should change view on header caption click', async () => {
-        const { dom } = await setupDatePickerHeader({ initialDate: '2017-01-22' });
-        expect(screen.getByText('January 2017')).toBeInTheDocument();
-
-        fireEvent.click(dom.title);
-        expect(screen.getByText('2017')).toBeInTheDocument();
-
-        fireEvent.click(dom.title);
-        expect(screen.getByText('January 2017')).toBeInTheDocument();
-    });
-});

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

@@ -1,181 +0,0 @@
-import * as React from 'react';
-import { RangeDatePicker, RangeDatePickerProps } from '../RangeDatePicker';
-import {
-    renderSnapshotWithContextAsync, setupComponentForTest, fireEvent, screen, within,
-} from '@epam/uui-test-utils';
-
-jest.mock('react-popper', () => ({
-    ...jest.requireActual('react-popper'),
-    Popper: function PopperMock({ children }: any) {
-        return children({
-            ref: jest.fn,
-            update: jest.fn(),
-            style: {},
-            arrowProps: { ref: jest.fn },
-            placement: 'bottom-start',
-            isReferenceHidden: false,
-        });
-    },
-}));
-
-async function setupRangeDatePicker(params: { value: { from: string; to: string } | null; format?: string }) {
-    const { value, format } = params;
-
-    const { result, mocks } = await setupComponentForTest<RangeDatePickerProps>(
-        (context) => ({
-            rawProps: { from: { 'data-testid': 'from' }, to: { 'data-testid': 'to' } },
-            value: value ?? { from: null, to: null },
-            format,
-            onValueChange: jest.fn().mockImplementation((newValue) => {
-                context.current.setProperty('value', newValue);
-            }),
-            onOpenChange: jest.fn(),
-        }),
-        (props) => <RangeDatePicker { ...props } />,
-    );
-
-    const from = within(screen.getByTestId('from')).getByRole('textbox') as HTMLInputElement;
-    const to = within(screen.getByTestId('to')).getByRole('textbox') as HTMLInputElement;
-    const clear = result.container.querySelector('.uui-icon-cancel');
-
-    return {
-        result,
-        dom: { from, to, clear },
-        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: null });
-        expect(result.container).not.toBeFalsy();
-    });
-
-    it('should change state on picker clear', async () => {
-        const value = { from: '2017-01-22', to: '2017-01-28' };
-        const { dom, mocks } = await setupRangeDatePicker({ value });
-        fireEvent.click(dom.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: null });
-        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: null });
-        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.queryByRole('dialog');
-        const [sept11] = await within(dialog).findAllByText('11');
-        fireEvent.click(sept11);
-        expect(mocks.onValueChange).toHaveBeenLastCalledWith({
-            from: newValueManualSel.from,
-            to: '2019-09-12',
-        });
-    });
-
-    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 { dom, mocks } = await setupRangeDatePicker({ value });
-        fireEvent.focus(dom.from);
-        expect(mocks.onOpenChange).toBeCalledWith(true);
-        fireEvent.blur(dom.from);
-        expect(mocks.onOpenChange).toBeCalledWith(false);
-    });
-});

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

@@ -1,186 +0,0 @@
-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();
-    });
-});