@sqrzro/admin 1.0.0-beta.1

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

@@ -0,0 +1,533 @@
+/* eslint-disable max-lines */
+
+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;
+
+    beforeEach(() => {
+        MockDate.reset();
+        fetch.resetMocks();
+        mockRouterPush.mockClear();
+    });
+
+    afterEach(() => {
+        window.location = location;
+    });
+
+    it('should render', () => {
+        render(<Filters />);
+        expect(screen.getByTestId('filters-root')).toBeInTheDocument();
+    });
+
+    it('should open and close', () => {
+        render(<Filters />);
+
+        userEvent.click(screen.getByText('Filters...'));
+        expect(screen.getByTestId('filters-content')).toHaveClass('contentIsOpen');
+
+        userEvent.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: '?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', () => {
+        render(<Filters hasSearch />);
+
+        userEvent.type(screen.getByRole('textbox'), 'lorem');
+        expect(screen.getByRole('textbox')).toHaveValue('lorem');
+
+        userEvent.type(screen.getByRole('textbox'), '{enter}');
+        expect(mockRouterPush).toHaveBeenCalledTimes(1);
+        expect(mockRouterPush).toHaveBeenLastCalledWith('/?search=lorem');
+    });
+
+    it('should handle search clear', () => {
+        render(<Filters hasSearch />);
+
+        userEvent.type(screen.getByRole('textbox'), 'lorem');
+        expect(screen.getByRole('textbox')).toHaveValue('lorem');
+
+        userEvent.click(screen.getByText('Clear'));
+        expect(screen.getByRole('textbox')).toHaveValue('');
+        expect(mockRouterPush).toHaveBeenCalledTimes(1);
+        expect(mockRouterPush).toHaveBeenLastCalledWith('/?search=');
+    });
+
+    it('should handle empty search', () => {
+        render(<Filters hasSearch />);
+
+        userEvent.type(screen.getByRole('textbox'), 'a{enter}{backspace}{enter}');
+        expect(screen.getByRole('textbox')).toHaveValue('');
+
+        expect(mockRouterPush).toHaveBeenCalledTimes(2);
+        expect(mockRouterPush).toHaveBeenLastCalledWith('/?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: '?search=lorem' };
+
+        render(<Filters hasSearch />);
+        expect(screen.getByRole('textbox')).toHaveValue('lorem');
+    });
+
+    it('should render boolean field', () => {
+        const fields = [
+            FilterComponentService.boolean({
+                label: 'Boolean',
+                name: 'boolean',
+                data: ['Yes', 'No'],
+            }),
+        ];
+        render(<Filters fields={fields} />);
+        expect(screen.getByText('Boolean')).toBeInTheDocument();
+
+        userEvent.click(screen.getByText('Open'));
+        expect(screen.queryAllByRole('option')).toHaveLength(2);
+        expect(screen.queryAllByRole('option')[0]).toHaveTextContent('Yes');
+    });
+
+    it('should render date field', () => {
+        const fields = [FilterComponentService.date({ label: 'Date', name: 'date' })];
+        render(<Filters fields={fields} />);
+        expect(screen.getByText('Date')).toBeInTheDocument();
+
+        userEvent.click(screen.getByText('Open'));
+        expect(screen.queryAllByRole('table')).toHaveLength(1);
+    });
+
+    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: '?date[0]=1&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: '?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: '?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: '?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: '?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', () => {
+        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();
+
+        userEvent.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)', () => {
+        const fields = [
+            FilterComponentService.dropdown({
+                label: 'Dropdown',
+                name: 'dropdown',
+                data: ['lorem', 'ipsum'],
+            }),
+        ];
+        render(<Filters fields={fields} />);
+        expect(screen.getByText('Dropdown')).toBeInTheDocument();
+
+        userEvent.click(screen.getByText('Open'));
+        expect(screen.queryAllByRole('option')).toHaveLength(0);
+    });
+
+    it('should render dropdown summary', () => {
+        // @ts-expect-error The operand of a 'delete' operator must be optional.
+        delete window.location;
+        window.location = { ...location, search: '?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: '?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', () => {
+        const fields = [
+            FilterComponentService.quickDate({ label: 'Quick Date', name: 'quickDate' }),
+        ];
+        render(<Filters fields={fields} />);
+        expect(screen.getByText('Quick Date')).toBeInTheDocument();
+
+        userEvent.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)', () => {
+        MockDate.set('2020-09-19');
+
+        const fields = [
+            FilterComponentService.quickDate({ label: 'Quick Date', name: 'quickDate' }),
+        ];
+        render(<Filters fields={fields} />);
+
+        userEvent.click(screen.getByText('Open'));
+
+        userEvent.click(screen.getByTestId('dropdown-panel-control-2020-09-19,2020-09-19'));
+
+        expect(mockRouterPush).toHaveBeenCalledTimes(1);
+        expect(mockRouterPush).toHaveBeenLastCalledWith('/?quickDate=2020-09-19%2C2020-09-19');
+    });
+
+    it('should handle change on quickDate field (custom)', () => {
+        const fields = [
+            FilterComponentService.quickDate({ label: 'Quick Date', name: 'quickDate' }),
+        ];
+        render(<Filters fields={fields} />);
+
+        userEvent.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');
+
+        userEvent.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: '?quickDate[0]=1&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: '?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: '?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: '?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(
+            '/lorem?simpleview=1',
+            expect.objectContaining({ body: null })
+        );
+
+        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: '?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(
+            '/lorem?ipsum=ipsum&simpleview=1',
+            expect.objectContaining({ body: null })
+        );
+    });
+
+    it('should render custom filter', () => {
+        const fields = [
+            {
+                label: 'Custom',
+                name: 'custom',
+                renderField: (): React.ReactNode => <div>Lorem</div>,
+            },
+        ];
+
+        render(<Filters fields={fields} />);
+
+        expect(screen.getByText('Custom')).toBeInTheDocument();
+
+        userEvent.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: '?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', () => {
+        const fields = [
+            FilterComponentService.boolean({
+                label: 'Boolean',
+                name: 'boolean',
+                data: ['Yes', 'No'],
+            }),
+        ];
+        render(<Filters fields={fields} />);
+
+        userEvent.click(screen.getByText('Open'));
+        userEvent.click(screen.getAllByText('Select')[0]);
+
+        expect(mockRouterPush).toHaveBeenCalledTimes(1);
+        expect(mockRouterPush).toHaveBeenLastCalledWith('/?boolean=1');
+    });
+
+    it('should handle filter cancel', () => {
+        // @ts-expect-error The operand of a 'delete' operator must be optional.
+        delete window.location;
+        window.location = { ...location, search: '?boolean=1' };
+
+        const fields = [
+            FilterComponentService.boolean({
+                label: 'Boolean',
+                name: 'boolean',
+                data: ['Yes', 'No'],
+            }),
+        ];
+        render(<Filters fields={fields} />);
+
+        userEvent.click(screen.getByText('Cancel'));
+
+        expect(mockRouterPush).toHaveBeenCalledTimes(1);
+        expect(mockRouterPush).toHaveBeenLastCalledWith('/?');
+    });
+
+    it('should handle array values', () => {
+        // @ts-expect-error The operand of a 'delete' operator must be optional.
+        delete window.location;
+        window.location = { ...location, search: '?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} />);
+
+        userEvent.click(screen.getByText('Open'));
+        userEvent.click(screen.getAllByText('Select')[1]);
+
+        expect(mockRouterPush).toHaveBeenCalledTimes(1);
+        expect(mockRouterPush).toHaveBeenLastCalledWith(encodeURI('/?dropdown[0]=1&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: '?custom[0]=1&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', () => {
+        const mockFn = jest.fn();
+        const actions = [{ label: 'Lorem', onClick: mockFn }];
+
+        render(<Filters actions={actions} />);
+        expect(screen.getByText('Lorem')).toBeInTheDocument();
+
+        userEvent.click(screen.getByText('Lorem'));
+        expect(mockFn).toHaveBeenCalledTimes(1);
+    });
+});

package/src/core/Filters/index.tsx

@@ -0,0 +1,158 @@
+import React, { useEffect, useState } from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+import Button from '@components/Button';
+import TextInput from '@components/TextInput';
+
+import FilterItem from '@core/FilterItem';
+
+import useFilters from '@hooks/useFilters';
+
+import type { FilterField } from '@filters/interfaces';
+import type { SimpleAction, SimpleEvent } from '@utility/interfaces';
+
+import styles from './Filters.module.css';
+
+interface FiltersProps {
+    actions?: SimpleAction[];
+    fields?: FilterField[];
+    hasSearch?: boolean;
+    isDisabled?: boolean;
+}
+
+const Filters: React.FunctionComponent<FiltersProps> = ({
+    actions,
+    fields,
+    hasSearch,
+    isDisabled,
+}) => {
+    const [filters, setFilters] = useFilters({ shouldFilterPage: true });
+    const [pendingSearch, setPendingSearch] = useState('');
+
+    const [isOpen, setIsOpen] = useState(false);
+
+    const toggleIsOpen = (): void => setIsOpen(!isOpen);
+
+    useEffect(() => {
+        setPendingSearch(filters.get('search')?.toString() || '');
+    }, [filters.get('search')]);
+
+    const handleCancel = (event: SimpleEvent): void => {
+        const newFilters = new Map(filters);
+
+        newFilters.delete(event.target.value as string);
+        setFilters(newFilters);
+    };
+
+    const handleChange = (event: SimpleEvent): void => {
+        const newFilters = new Map(filters);
+
+        /*
+         * `event.target.value` can be null, so the optional check (?.) is required for typescript.
+         * However, no null value can be passed from a filter, so this can be ignored by test
+         * coverage.
+         */
+        /* istanbul ignore next */
+        const value = Array.isArray(event.target.value)
+            ? event.target.value.map((item) => item?.toString() || '')
+            : event.target.value?.toString() || '';
+
+        newFilters.set(event.target.name, value);
+        setFilters(newFilters);
+    };
+
+    const handleSearch = (event: React.KeyboardEvent): void => {
+        if (event.key === 'Enter') {
+            handleChange({ target: { name: 'search', value: pendingSearch } });
+        }
+    };
+
+    const handleSearchClear = (): void => {
+        handleChange({ target: { name: 'search', value: '' } });
+        setPendingSearch('');
+    };
+
+    return (
+        <aside className={styles.root} data-testid="filters-root">
+            <div className={classNames(styles.control, isOpen && styles.controlIsOpen)}>
+                <Button onClick={toggleIsOpen} variant="bordered">
+                    Filters{filters.size ? ` (${filters.size})` : '...'}
+                </Button>
+            </div>
+            <div
+                className={classNames(styles.content, isOpen && styles.contentIsOpen)}
+                data-testid="filters-content"
+            >
+                <div className={styles.section}>
+                    {hasSearch && (
+                        <div className={styles.search}>
+                            <TextInput
+                                name="search"
+                                onChange={(event): void =>
+                                    setPendingSearch(event.target.value as string)
+                                }
+                                onClear={handleSearchClear}
+                                onKeyDown={handleSearch}
+                                placeholder="Search..."
+                                value={pendingSearch}
+                                isClearable
+                            />
+                        </div>
+                    )}
+                    {hasSearch && fields?.length && (
+                        <i className={styles.divider} data-testid="filters-divider" />
+                    )}
+                    {fields?.map((item) => (
+                        <FilterItem
+                            key={item.label}
+                            onCancel={handleCancel}
+                            onChange={handleChange}
+                            value={filters.get(item.name)}
+                            {...item}
+                        />
+                    ))}
+                </div>
+                {actions?.length && (
+                    <div className={styles.actions}>
+                        {actions.map((item) => (
+                            <Button
+                                key={item.label}
+                                isDisabled={isDisabled || item.isDisabled}
+                                onClick={item.onClick}
+                                variant={item.variant || 'bordered'}
+                            >
+                                {item.label}
+                            </Button>
+                        ))}
+                    </div>
+                )}
+            </div>
+            <div className={classNames(styles.close, isOpen && styles.closeIsOpen)}>
+                <Button onClick={toggleIsOpen} variant="link">
+                    Close Filters
+                </Button>
+            </div>
+        </aside>
+    );
+};
+
+Filters.propTypes = {
+    actions: PropTypes.arrayOf(
+        PropTypes.shape({
+            label: PropTypes.string.isRequired,
+            onClick: PropTypes.func.isRequired,
+        }).isRequired
+    ),
+    fields: PropTypes.arrayOf(
+        PropTypes.shape({
+            label: PropTypes.string.isRequired,
+            name: PropTypes.string.isRequired,
+            renderField: PropTypes.func.isRequired,
+        }).isRequired
+    ),
+    hasSearch: PropTypes.bool,
+    isDisabled: PropTypes.bool,
+};
+
+export default Filters;