@sqrzro/admin 2.0.0 → 2.1.0-bz.0

package/src/core/Filters/Filters.spec.tsx

@@ -1,573 +0,0 @@
-import React from 'react';
-import { render, screen, waitFor } from '@testing-library/react';
-import MockDate from 'mockdate';
-import userEvent from '@testing-library/user-event';
-import fetch from 'jest-fetch-mock';
-
-import FilterComponentService from '../../services/FilterComponentService';
-
-import Filters from './index';
-
-const mockRouterPush = jest.fn();
-
-jest.mock('next/router', () => ({
-    useRouter: (): { push: jest.Mock } => ({ push: mockRouterPush }),
-}));
-
-describe('Filters', () => {
-    const { location } = window;
-
-    afterEach(() => {
-        MockDate.reset();
-        fetch.resetMocks();
-        mockRouterPush.mockClear();
-
-        window.location = location;
-    });
-
-    it('should render', () => {
-        render(<Filters />);
-        expect(screen.getByTestId('filters-root')).toBeInTheDocument();
-    });
-
-    it('should open and close', async () => {
-        const user = userEvent.setup();
-
-        render(<Filters />);
-
-        await user.click(screen.getByText('Filters...'));
-        expect(screen.getByTestId('filters-content')).toHaveClass('contentIsOpen');
-
-        await user.click(screen.getByText('Filters...'));
-        expect(screen.getByTestId('filters-content')).not.toHaveClass('contentIsOpen');
-    });
-
-    it('should have filters', () => {
-        // @ts-expect-error The operand of a 'delete' operator must be optional.
-        delete window.location;
-        window.location = { ...location, search: '?filter[lorem]=ipsum' };
-
-        render(<Filters />);
-        expect(screen.getAllByRole('button')[0]).toHaveTextContent(/^Filters \(1\)$/u);
-    });
-
-    it('should have search', () => {
-        render(<Filters hasSearch />);
-        expect(screen.getByRole('textbox')).toBeInTheDocument();
-    });
-
-    it('should handle search', async () => {
-        const user = userEvent.setup();
-
-        render(<Filters hasSearch />);
-
-        await user.type(screen.getByRole('textbox'), 'lorem');
-        expect(screen.getByRole('textbox')).toHaveValue('lorem');
-
-        await user.type(screen.getByRole('textbox'), '{enter}');
-        expect(mockRouterPush).toHaveBeenCalledTimes(1);
-        expect(mockRouterPush).toHaveBeenLastCalledWith(encodeURI('/?filter[search]=lorem'));
-    });
-
-    it('should handle search clear', async () => {
-        const user = userEvent.setup();
-
-        render(<Filters hasSearch />);
-
-        await user.type(screen.getByRole('textbox'), 'lorem');
-        expect(screen.getByRole('textbox')).toHaveValue('lorem');
-
-        await user.click(screen.getByText('Clear'));
-        expect(screen.getByRole('textbox')).toHaveValue('');
-        expect(mockRouterPush).toHaveBeenCalledTimes(1);
-        expect(mockRouterPush).toHaveBeenLastCalledWith(encodeURI('/?filter[search]='));
-    });
-
-    it('should handle empty search', async () => {
-        const user = userEvent.setup();
-
-        render(<Filters hasSearch />);
-
-        await user.type(screen.getByRole('textbox'), 'a{enter}{backspace}{enter}');
-        expect(screen.getByRole('textbox')).toHaveValue('');
-
-        expect(mockRouterPush).toHaveBeenCalledTimes(2);
-        expect(mockRouterPush).toHaveBeenLastCalledWith(encodeURI('/?filter[search]='));
-    });
-
-    it('should set search from the url', () => {
-        // @ts-expect-error The operand of a 'delete' operator must be optional.
-        delete window.location;
-        window.location = { ...location, search: '?filter[search]=lorem' };
-
-        render(<Filters hasSearch />);
-        expect(screen.getByRole('textbox')).toHaveValue('lorem');
-    });
-
-    it('should render boolean field', async () => {
-        const user = userEvent.setup();
-
-        const fields = [
-            FilterComponentService.boolean({
-                label: 'Boolean',
-                name: 'boolean',
-                data: ['Yes', 'No'],
-            }),
-        ];
-        render(<Filters fields={fields} />);
-        expect(screen.getByText('Boolean')).toBeInTheDocument();
-
-        await user.click(screen.getByText('Open'));
-        expect(screen.queryAllByRole('option')).toHaveLength(2);
-        expect(screen.queryAllByRole('option')[0]).toHaveTextContent('Yes');
-    });
-
-    it('should render date field', async () => {
-        const user = userEvent.setup();
-
-        const fields = [FilterComponentService.date({ label: 'Date', name: 'date' })];
-        render(<Filters fields={fields} />);
-        expect(screen.getByText('Date')).toBeInTheDocument();
-
-        await user.click(screen.getByText('Open'));
-        expect(screen.getByRole('table')).toBeInTheDocument();
-    });
-
-    it('should render date summary (non-string)', () => {
-        // @ts-expect-error The operand of a 'delete' operator must be optional.
-        delete window.location;
-        window.location = { ...location, search: '?filter[date][0]=1&filter[date][1]=2' };
-
-        const fields = [FilterComponentService.date({ label: 'Date', name: 'date' })];
-        render(<Filters fields={fields} />);
-
-        expect(screen.getByTestId('filter-item-label')).toHaveTextContent('Date');
-    });
-
-    it('should render date summary (incorrect format)', () => {
-        // @ts-expect-error The operand of a 'delete' operator must be optional.
-        delete window.location;
-        window.location = { ...location, search: '?filter[date]=lorem' };
-
-        const fields = [FilterComponentService.date({ label: 'Date', name: 'date' })];
-        render(<Filters fields={fields} />);
-
-        expect(screen.getByTestId('filter-item-label')).toHaveTextContent('Date');
-    });
-
-    it('should render date summary (single date)', () => {
-        // @ts-expect-error The operand of a 'delete' operator must be optional.
-        delete window.location;
-        window.location = { ...location, search: '?filter[date]=2020-01-01,2020-01-01' };
-
-        const fields = [FilterComponentService.date({ label: 'Date', name: 'date' })];
-        render(<Filters fields={fields} />);
-
-        expect(screen.getByTestId('filter-item-label')).toHaveTextContent('01/01/2020');
-    });
-
-    it('should render date summary (same year)', () => {
-        // @ts-expect-error The operand of a 'delete' operator must be optional.
-        delete window.location;
-        window.location = { ...location, search: '?filter[date]=2020-01-14,2020-03-01' };
-
-        const fields = [FilterComponentService.date({ label: 'Date', name: 'date' })];
-        render(<Filters fields={fields} />);
-
-        expect(screen.getByTestId('filter-item-label')).toHaveTextContent('14/01 - 01/03');
-    });
-
-    it('should render date summary (different year)', () => {
-        // @ts-expect-error The operand of a 'delete' operator must be optional.
-        delete window.location;
-        window.location = { ...location, search: '?filter[date]=2019-01-14,2020-03-01' };
-
-        const fields = [FilterComponentService.date({ label: 'Date', name: 'date' })];
-        render(<Filters fields={fields} />);
-
-        expect(screen.getByTestId('filter-item-label')).toHaveTextContent(
-            '14/01/2019 - 01/03/2020'
-        );
-    });
-
-    it('should render dropdown field', async () => {
-        const user = userEvent.setup();
-
-        const fields = [
-            FilterComponentService.dropdown({
-                label: 'Dropdown',
-                name: 'dropdown',
-                data: [
-                    { id: '1', name: 'Lorem' },
-                    { id: '2', name: 'Ipsum' },
-                ],
-            }),
-        ];
-        render(<Filters fields={fields} />);
-        expect(screen.getByText('Dropdown')).toBeInTheDocument();
-
-        await user.click(screen.getByText('Open'));
-        expect(screen.queryAllByRole('option')).toHaveLength(2);
-        expect(screen.queryAllByRole('option')[0]).toHaveTextContent('Lorem');
-    });
-
-    it('should render dropdown field (incorrect data format)', async () => {
-        const user = userEvent.setup();
-
-        const fields = [
-            FilterComponentService.dropdown({
-                label: 'Dropdown',
-                name: 'dropdown',
-                data: ['lorem', 'ipsum'],
-            }),
-        ];
-        render(<Filters fields={fields} />);
-        expect(screen.getByText('Dropdown')).toBeInTheDocument();
-
-        await user.click(screen.getByText('Open'));
-        expect(screen.queryByRole('option')).not.toBeInTheDocument();
-    });
-
-    it('should render dropdown summary', () => {
-        // @ts-expect-error The operand of a 'delete' operator must be optional.
-        delete window.location;
-        window.location = { ...location, search: '?filter[dropdown]=1' };
-
-        const fields = [
-            FilterComponentService.dropdown({
-                label: 'Dropdown',
-                name: 'dropdown',
-                data: [
-                    { id: '1', name: 'Lorem' },
-                    { id: '2', name: 'Ipsum' },
-                ],
-            }),
-        ];
-        render(<Filters fields={fields} />);
-
-        expect(screen.getByTestId('filter-item-label')).toHaveTextContent('Lorem');
-    });
-
-    it('should render dropdown summary (incorrect data format)', () => {
-        // @ts-expect-error The operand of a 'delete' operator must be optional.
-        delete window.location;
-        window.location = { ...location, search: '?filter[dropdown]=1' };
-
-        const fields = [
-            FilterComponentService.dropdown({
-                label: 'Dropdown',
-                name: 'dropdown',
-                data: ['lorem', 'ipsum'],
-            }),
-        ];
-        render(<Filters fields={fields} />);
-
-        expect(screen.getByTestId('filter-item-label')).toHaveTextContent('Dropdown');
-    });
-
-    it('should render quickDate field', async () => {
-        const user = userEvent.setup();
-
-        MockDate.set('2000-11-22');
-
-        const fields = [
-            FilterComponentService.quickDate({ label: 'Quick Date', name: 'quickDate' }),
-        ];
-        render(<Filters fields={fields} />);
-        expect(screen.getByText('Quick Date')).toBeInTheDocument();
-
-        await user.click(screen.getByText('Open'));
-        expect(screen.queryAllByRole('option')).toHaveLength(7);
-        expect(screen.queryAllByRole('option')[0]).toHaveTextContent('Today');
-    });
-
-    it('should handle change on quickDate field (defined)', async () => {
-        const user = userEvent.setup();
-
-        MockDate.set('2020-09-19');
-
-        const fields = [
-            FilterComponentService.quickDate({ label: 'Quick Date', name: 'quickDate' }),
-        ];
-        render(<Filters fields={fields} />);
-
-        await user.click(screen.getByText('Open'));
-
-        await user.click(screen.getByTestId('dropdown-panel-control-2020-09-19,2020-09-19'));
-
-        expect(mockRouterPush).toHaveBeenCalledTimes(1);
-        expect(mockRouterPush).toHaveBeenLastCalledWith(
-            '/?filter%5BquickDate%5D=2020-09-19%2C2020-09-19'
-        );
-    });
-
-    it('should handle change on quickDate field (custom)', async () => {
-        const user = userEvent.setup();
-
-        MockDate.set('2020-09-19');
-
-        const fields = [
-            FilterComponentService.quickDate({ label: 'Quick Date', name: 'quickDate' }),
-        ];
-        render(<Filters fields={fields} />);
-
-        await user.click(screen.getByText('Open'));
-
-        expect(screen.getByTestId('quick-date-filter-dropdown')).toHaveStyle('display: block');
-        expect(screen.getByTestId('quick-date-filter-date-filter')).toHaveStyle('display: none');
-
-        await user.click(screen.getByTestId('dropdown-panel-control-[internal]'));
-
-        expect(screen.getByTestId('quick-date-filter-dropdown')).toHaveStyle('display: none');
-        expect(screen.getByTestId('quick-date-filter-date-filter')).toHaveStyle('display: block');
-    });
-
-    it('should render quickDate summary (non-string)', () => {
-        // @ts-expect-error The operand of a 'delete' operator must be optional.
-        delete window.location;
-        window.location = { ...location, search: '?filter[quickDate][0]=1&filter[quickDate][1]=2' };
-
-        const fields = [
-            FilterComponentService.quickDate({ label: 'Quick Date', name: 'quickDate' }),
-        ];
-        render(<Filters fields={fields} />);
-
-        expect(screen.getByTestId('filter-item-label')).toHaveTextContent('Quick Date');
-    });
-
-    it('should render quickDate summary (existing definition)', () => {
-        MockDate.set('2020-09-19');
-
-        // @ts-expect-error The operand of a 'delete' operator must be optional.
-        delete window.location;
-        window.location = { ...location, search: '?filter[quickDate]=2020-09-19,2020-09-19' };
-
-        const fields = [
-            FilterComponentService.quickDate({ label: 'Quick Date', name: 'quickDate' }),
-        ];
-        render(<Filters fields={fields} />);
-
-        expect(screen.getByTestId('filter-item-label')).toHaveTextContent('Today');
-    });
-
-    it('should render quickDate summary (non-existing definition)', () => {
-        // @ts-expect-error The operand of a 'delete' operator must be optional.
-        delete window.location;
-        window.location = { ...location, search: '?filter[quickDate]=2019-09-19,2019-09-24' };
-
-        const fields = [
-            FilterComponentService.quickDate({ label: 'Quick Date', name: 'quickDate' }),
-        ];
-        render(<Filters fields={fields} />);
-
-        expect(screen.getByTestId('filter-item-label')).toHaveTextContent('19/09 - 24/09');
-    });
-
-    it('should render remote', async () => {
-        // @ts-expect-error The operand of a 'delete' operator must be optional.
-        delete window.location;
-        window.location = { ...location, search: '?filter[dropdown]=1' };
-
-        const mockFn = fetch.mockResponseOnce(
-            JSON.stringify({ data: [{ id: '1', name: 'Lorem' }] })
-        );
-
-        const fields = [
-            FilterComponentService.dropdown({
-                label: 'Dropdown',
-                name: 'dropdown',
-                remote: 'lorem',
-            }),
-        ];
-
-        render(<Filters fields={fields} />);
-
-        expect(mockFn).toHaveBeenCalledTimes(1);
-        expect(mockFn).toHaveBeenLastCalledWith(
-            'http://example.com/lorem?simpleview=1',
-            expect.objectContaining({ method: 'get' })
-        );
-
-        expect(screen.getByTestId('filter-item-root')).toHaveClass('rootIsDisabled');
-        expect(screen.getByText('Dropdown')).toBeInTheDocument();
-
-        await waitFor(() => {
-            expect(screen.getByTestId('filter-item-root')).not.toHaveClass('rootIsDisabled');
-        });
-
-        expect(screen.getByText('Lorem')).toBeInTheDocument();
-    });
-
-    it('should render remote with existing params', async () => {
-        // @ts-expect-error The operand of a 'delete' operator must be optional.
-        delete window.location;
-        window.location = { ...location, search: '?filter[dropdown]=1' };
-
-        const mockFn = fetch.mockResponseOnce(
-            JSON.stringify({ data: [{ id: '1', name: 'Lorem' }] })
-        );
-
-        const fields = [
-            FilterComponentService.dropdown({
-                label: 'Dropdown',
-                name: 'dropdown',
-                remote: ['lorem', { ipsum: 'ipsum' }],
-            }),
-        ];
-
-        render(<Filters fields={fields} />);
-
-        await waitFor(() => {
-            expect(mockFn).toHaveBeenCalledTimes(1);
-        });
-
-        expect(mockFn).toHaveBeenLastCalledWith(
-            'http://example.com/lorem?ipsum=ipsum&simpleview=1',
-            expect.objectContaining({ method: 'get' })
-        );
-    });
-
-    it('should render custom filter', async () => {
-        const user = userEvent.setup();
-
-        const fields = [
-            {
-                label: 'Custom',
-                name: 'custom',
-                renderField: (): React.ReactNode => <div>Lorem</div>,
-            },
-        ];
-
-        render(<Filters fields={fields} />);
-
-        expect(screen.getByText('Custom')).toBeInTheDocument();
-
-        await user.click(screen.getByText('Open'));
-        expect(screen.getByText('Lorem')).toBeInTheDocument();
-    });
-
-    it('should render custom filter with value', () => {
-        // @ts-expect-error The operand of a 'delete' operator must be optional.
-        delete window.location;
-        window.location = { ...location, search: '?filter[custom]=ipsum' };
-
-        const fields = [
-            {
-                label: 'Custom',
-                name: 'custom',
-                renderField: (): React.ReactNode => <div>Lorem</div>,
-            },
-        ];
-
-        render(<Filters fields={fields} />);
-
-        expect(screen.getByText('ipsum')).toBeInTheDocument();
-    });
-
-    it('should handle filter change', async () => {
-        const user = userEvent.setup();
-
-        const fields = [
-            FilterComponentService.boolean({
-                label: 'Boolean',
-                name: 'boolean',
-                data: ['Yes', 'No'],
-            }),
-        ];
-        render(<Filters fields={fields} />);
-
-        await user.click(screen.getByText('Open'));
-        await user.click(screen.getAllByText('Select')[0]);
-
-        expect(mockRouterPush).toHaveBeenCalledTimes(1);
-        expect(mockRouterPush).toHaveBeenLastCalledWith(encodeURI('/?filter[boolean]=1'));
-    });
-
-    it('should handle filter cancel', async () => {
-        const user = userEvent.setup();
-
-        // @ts-expect-error The operand of a 'delete' operator must be optional.
-        delete window.location;
-        window.location = { ...location, search: '?filter[boolean]=1' };
-
-        const fields = [
-            FilterComponentService.boolean({
-                label: 'Boolean',
-                name: 'boolean',
-                data: ['Yes', 'No'],
-            }),
-        ];
-        render(<Filters fields={fields} />);
-
-        await user.click(screen.getByText('Cancel'));
-
-        expect(mockRouterPush).toHaveBeenCalledTimes(1);
-        expect(mockRouterPush).toHaveBeenLastCalledWith('/');
-    });
-
-    it('should handle array values', async () => {
-        const user = userEvent.setup();
-
-        // @ts-expect-error The operand of a 'delete' operator must be optional.
-        delete window.location;
-        window.location = { ...location, search: '?filter[dropdown][]=1' };
-
-        const fields = [
-            FilterComponentService.dropdown({
-                label: 'Dropdown',
-                name: 'dropdown',
-                data: [
-                    { id: '1', name: 'Lorem' },
-                    { id: '2', name: 'Ipsum' },
-                ],
-                props: { isMultiple: true },
-            }),
-        ];
-        render(<Filters fields={fields} />);
-
-        await user.click(screen.getByText('Open'));
-        await user.click(screen.getAllByText('Select')[1]);
-
-        expect(mockRouterPush).toHaveBeenCalledTimes(1);
-        expect(mockRouterPush).toHaveBeenLastCalledWith(
-            encodeURI('/?filter[dropdown][0]=1&filter[dropdown][1]=2')
-        );
-    });
-
-    it('should render array values count', () => {
-        // @ts-expect-error The operand of a 'delete' operator must be optional.
-        delete window.location;
-        window.location = { ...location, search: '?filter[custom][0]=1&filter[custom][1]=2' };
-
-        const fields = [
-            {
-                label: 'Custom',
-                name: 'custom',
-                renderField: (): React.ReactNode => <div>Lorem</div>,
-            },
-        ];
-
-        render(<Filters fields={fields} />);
-        expect(screen.getByText('2')).toBeInTheDocument();
-    });
-
-    it('should render divider', () => {
-        const fields = [FilterComponentService.boolean({ label: 'Boolean', name: 'boolean' })];
-        render(<Filters fields={fields} hasSearch />);
-
-        expect(screen.getByTestId('filters-divider')).toBeInTheDocument();
-    });
-
-    it('should render actions', async () => {
-        const user = userEvent.setup();
-
-        const mockFn = jest.fn();
-        const actions = [{ label: 'Lorem', onClick: mockFn }];
-
-        render(<Filters actions={actions} />);
-        expect(screen.getByText('Lorem')).toBeInTheDocument();
-
-        await user.click(screen.getByText('Lorem'));
-        expect(mockFn).toHaveBeenCalledTimes(1);
-    });
-});