From ef8db5e2cdb989e7fb3382a2f63deb72ea04c773 Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Sun, 13 Mar 2022 10:32:27 +0100 Subject: [PATCH] Moved short URL ordering dropdown to ShortUrlsFilteringBar to simplify positioning --- src/short-urls/ShortUrlsFilteringBar.tsx | 13 +++++++-- src/short-urls/ShortUrlsList.tsx | 13 +++++---- .../short-urls/ShortUrlsFilteringBar.test.tsx | 28 ++++++++++++++++-- test/short-urls/ShortUrlsList.test.tsx | 29 +++++-------------- 4 files changed, 51 insertions(+), 32 deletions(-) diff --git a/src/short-urls/ShortUrlsFilteringBar.tsx b/src/short-urls/ShortUrlsFilteringBar.tsx index 7c89009f..e7511cf2 100644 --- a/src/short-urls/ShortUrlsFilteringBar.tsx +++ b/src/short-urls/ShortUrlsFilteringBar.tsx @@ -15,18 +15,23 @@ import { supportsAllTagsFiltering } from '../utils/helpers/features'; import { SelectedServer } from '../servers/data'; import { TooltipToggleSwitch } from '../utils/TooltipToggleSwitch'; import { ExportBtn } from '../utils/ExportBtn'; +import { OrderDir } from '../utils/helpers/ordering'; +import { OrderingDropdown } from '../utils/OrderingDropdown'; import { useShortUrlsQuery } from './helpers/hooks'; +import { SHORT_URLS_ORDERABLE_FIELDS, ShortUrlsOrder, ShortUrlsOrderableFields } from './data'; import './ShortUrlsFilteringBar.scss'; export interface ShortUrlsFilteringProps { selectedServer: SelectedServer; + order: ShortUrlsOrder; + handleOrderBy: (orderField?: ShortUrlsOrderableFields, orderDir?: OrderDir) => void; className?: string; } const dateOrNull = (date?: string) => date ? parseISO(date) : null; const ShortUrlsFilteringBar = (colorGenerator: ColorGenerator): FC => ( - { selectedServer, className }, + { selectedServer, className, order, handleOrderBy }, ) => { const [{ search, tags, startDate, endDate, tagsMode = 'any' }, toFirstPage ] = useShortUrlsQuery(); const selectedTags = tags?.split(',') ?? []; @@ -73,7 +78,7 @@ const ShortUrlsFilteringBar = (colorGenerator: ColorGenerator): FC {selectedTags.length > 0 && ( -

+

{canChangeTagsMode && selectedTags.length > 1 && (
removeTag(tag)} />)}

)} + +
+ +
); }; diff --git a/src/short-urls/ShortUrlsList.tsx b/src/short-urls/ShortUrlsList.tsx index d4828c7a..1eddadc6 100644 --- a/src/short-urls/ShortUrlsList.tsx +++ b/src/short-urls/ShortUrlsList.tsx @@ -2,7 +2,6 @@ import { pipe } from 'ramda'; import { FC, useEffect, useMemo, useState } from 'react'; import { Card } from 'reactstrap'; import { useLocation, useParams } from 'react-router-dom'; -import { OrderingDropdown } from '../utils/OrderingDropdown'; import { determineOrderDir, OrderDir } from '../utils/helpers/ordering'; import { getServerId, SelectedServer } from '../servers/data'; import { boundToMercureHub } from '../mercure/helpers/boundToMercureHub'; @@ -14,7 +13,7 @@ import { ShortUrlsList as ShortUrlsListState } from './reducers/shortUrlsList'; import { ShortUrlsTableProps } from './ShortUrlsTable'; import Paginator from './Paginator'; import { useShortUrlsQuery } from './helpers/hooks'; -import { ShortUrlsOrderableFields, SHORT_URLS_ORDERABLE_FIELDS } from './data'; +import { ShortUrlsOrderableFields } from './data'; import { ShortUrlsFilteringProps } from './ShortUrlsFilteringBar'; interface ShortUrlsListProps { @@ -65,10 +64,12 @@ const ShortUrlsList = ( return ( <> - -
- -
+ ({ ...jest.requireActual('react-router-dom'), @@ -21,12 +22,19 @@ describe('', () => { let wrapper: ShallowWrapper; const ShortUrlsFilteringBar = filteringBarCreator(Mock.all()); const navigate = jest.fn(); + const handleOrderBy = jest.fn(); const now = new Date(); const createWrapper = (search = '', selectedServer?: SelectedServer) => { (useLocation as any).mockReturnValue({ search }); (useNavigate as any).mockReturnValue(navigate); - wrapper = shallow(()} />); + wrapper = shallow( + ()} + order={{}} + handleOrderBy={handleOrderBy} + />, + ); return wrapper; }; @@ -34,11 +42,12 @@ describe('', () => { afterEach(jest.clearAllMocks); afterEach(() => wrapper?.unmount()); - it('renders some children components SearchField', () => { + it('renders expected children components', () => { const wrapper = createWrapper(); expect(wrapper.find(SearchField)).toHaveLength(1); expect(wrapper.find(DateRangeSelector)).toHaveLength(1); + expect(wrapper.find(OrderingDropdown)).toHaveLength(1); }); it.each([ @@ -127,4 +136,19 @@ describe('', () => { toggle.simulate('change'); expect(navigate).toHaveBeenCalledWith(expect.stringContaining(expectedRedirectTagsMode)); }); + + it('handles order through dropdown', () => { + const wrapper = createWrapper(); + + expect(wrapper.find(OrderingDropdown).prop('order')).toEqual({}); + + wrapper.find(OrderingDropdown).simulate('change', 'visits', 'ASC'); + expect(handleOrderBy).toHaveBeenCalledWith('visits', 'ASC'); + + wrapper.find(OrderingDropdown).simulate('change', 'shortCode', 'DESC'); + expect(handleOrderBy).toHaveBeenCalledWith('shortCode', 'DESC'); + + wrapper.find(OrderingDropdown).simulate('change', undefined, undefined); + expect(handleOrderBy).toHaveBeenCalledWith(undefined, undefined); + }); }); diff --git a/test/short-urls/ShortUrlsList.test.tsx b/test/short-urls/ShortUrlsList.test.tsx index 8ce2ffbc..0184629e 100644 --- a/test/short-urls/ShortUrlsList.test.tsx +++ b/test/short-urls/ShortUrlsList.test.tsx @@ -6,7 +6,6 @@ import shortUrlsListCreator from '../../src/short-urls/ShortUrlsList'; import { ShortUrlsOrderableFields, ShortUrl, ShortUrlsOrder } from '../../src/short-urls/data'; import { MercureBoundProps } from '../../src/mercure/helpers/boundToMercureHub'; import { ShortUrlsList as ShortUrlsListModel } from '../../src/short-urls/reducers/shortUrlsList'; -import { OrderingDropdown } from '../../src/utils/OrderingDropdown'; import Paginator from '../../src/short-urls/Paginator'; import { ReachableServer } from '../../src/servers/data'; import { Settings } from '../../src/settings/reducers/settings'; @@ -58,7 +57,6 @@ describe('', () => { it('wraps expected components', () => { expect(wrapper.find(ShortUrlsTable)).toHaveLength(1); - expect(wrapper.find(OrderingDropdown)).toHaveLength(1); expect(wrapper.find(Paginator)).toHaveLength(1); expect(wrapper.find(ShortUrlsFilteringBar)).toHaveLength(1); }); @@ -84,39 +82,26 @@ describe('', () => { expect(renderIcon('visits').props.currentOrder).toEqual({}); - wrapper.find(OrderingDropdown).simulate('change', 'visits'); + (wrapper.find(ShortUrlsFilteringBar).prop('handleOrderBy') as Function)('visits'); expect(renderIcon('visits').props.currentOrder).toEqual({ field: 'visits' }); - wrapper.find(OrderingDropdown).simulate('change', 'visits', 'ASC'); + (wrapper.find(ShortUrlsFilteringBar).prop('handleOrderBy') as Function)('visits', 'ASC'); expect(renderIcon('visits').props.currentOrder).toEqual({ field: 'visits', dir: 'ASC' }); }); it('handles order through table', () => { const orderByColumn: (field: ShortUrlsOrderableFields) => Function = wrapper.find(ShortUrlsTable).prop('orderByColumn'); - expect(wrapper.find(OrderingDropdown).prop('order')).toEqual({}); + expect(wrapper.find(ShortUrlsFilteringBar).prop('order')).toEqual({}); orderByColumn('visits')(); - expect(wrapper.find(OrderingDropdown).prop('order')).toEqual({ field: 'visits', dir: 'ASC' }); + expect(wrapper.find(ShortUrlsFilteringBar).prop('order')).toEqual({ field: 'visits', dir: 'ASC' }); orderByColumn('title')(); - expect(wrapper.find(OrderingDropdown).prop('order')).toEqual({ field: 'title', dir: 'ASC' }); + expect(wrapper.find(ShortUrlsFilteringBar).prop('order')).toEqual({ field: 'title', dir: 'ASC' }); orderByColumn('shortCode')(); - expect(wrapper.find(OrderingDropdown).prop('order')).toEqual({ field: 'shortCode', dir: 'ASC' }); - }); - - it('handles order through dropdown', () => { - expect(wrapper.find(OrderingDropdown).prop('order')).toEqual({}); - - wrapper.find(OrderingDropdown).simulate('change', 'visits', 'ASC'); - expect(wrapper.find(OrderingDropdown).prop('order')).toEqual({ field: 'visits', dir: 'ASC' }); - - wrapper.find(OrderingDropdown).simulate('change', 'shortCode', 'DESC'); - expect(wrapper.find(OrderingDropdown).prop('order')).toEqual({ field: 'shortCode', dir: 'DESC' }); - - wrapper.find(OrderingDropdown).simulate('change', undefined, undefined); - expect(wrapper.find(OrderingDropdown).prop('order')).toEqual({}); + expect(wrapper.find(ShortUrlsFilteringBar).prop('order')).toEqual({ field: 'shortCode', dir: 'ASC' }); }); it.each([ @@ -126,6 +111,6 @@ describe('', () => { ])('has expected initial ordering', (initialOrderBy, field, dir) => { const wrapper = createWrapper(initialOrderBy); - expect(wrapper.find(OrderingDropdown).prop('order')).toEqual({ field, dir }); + expect(wrapper.find(ShortUrlsFilteringBar).prop('order')).toEqual({ field, dir }); }); });