mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2025-01-09 09:47:28 +03:00
Code Issues Projects Releases Packages Wiki Activity

Renamed SortingDropdown to OrderingDropdown, for consistency

Browse source
This commit is contained in:
Alejandro Celaya 2021-12-25 10:31:48 +01:00
parent 6213067f35
commit 994f31b7e5
14 changed files with 57 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/settings/ShortUrlsList.tsx
View file

@ -1,6 +1,6 @@
import { FC } from 'react'; import { FC } from 'react';
import { FormGroup } from 'reactstrap'; import { FormGroup } from 'reactstrap';
import { SortingDropdown } from '../utils/SortingDropdown'; import { OrderingDropdown } from '../utils/OrderingDropdown';
import { SHORT_URLS_ORDERABLE_FIELDS } from '../short-urls/data'; import { SHORT_URLS_ORDERABLE_FIELDS } from '../short-urls/data';
import { SimpleCard } from '../utils/SimpleCard'; import { SimpleCard } from '../utils/SimpleCard';
import { DEFAULT_SHORT_URLS_ORDERING, Settings, ShortUrlsListSettings } from './reducers/settings'; import { DEFAULT_SHORT_URLS_ORDERING, Settings, ShortUrlsListSettings } from './reducers/settings';
@ -14,7 +14,7 @@ export const ShortUrlsList: FC<ShortUrlsListProps> = ({ settings: { shortUrlsLis
<SimpleCard title="Short URLs list" className="h-100"> <SimpleCard title="Short URLs list" className="h-100">
<FormGroup className="mb-0"> <FormGroup className="mb-0">
<label>Default ordering for short URLs list:</label> <label>Default ordering for short URLs list:</label>
<SortingDropdown <OrderingDropdown
items={SHORT_URLS_ORDERABLE_FIELDS} items={SHORT_URLS_ORDERABLE_FIELDS}
order={shortUrlsList?.defaultOrdering ?? DEFAULT_SHORT_URLS_ORDERING} order={shortUrlsList?.defaultOrdering ?? DEFAULT_SHORT_URLS_ORDERING}
onChange={(field, dir) => setShortUrlsListSettings({ defaultOrdering: { field, dir } })} onChange={(field, dir) => setShortUrlsListSettings({ defaultOrdering: { field, dir } })}

4
src/settings/Tags.tsx
View file

@ -3,7 +3,7 @@ import { FormGroup } from 'reactstrap';
import { SimpleCard } from '../utils/SimpleCard'; import { SimpleCard } from '../utils/SimpleCard';
import { TagsModeDropdown } from '../tags/TagsModeDropdown'; import { TagsModeDropdown } from '../tags/TagsModeDropdown';
import { capitalize } from '../utils/utils'; import { capitalize } from '../utils/utils';
import { SortingDropdown } from '../utils/SortingDropdown'; import { OrderingDropdown } from '../utils/OrderingDropdown';
import { TAGS_ORDERABLE_FIELDS } from '../tags/data/TagsListChildrenProps'; import { TAGS_ORDERABLE_FIELDS } from '../tags/data/TagsListChildrenProps';
import { Settings, TagsSettings } from './reducers/settings'; import { Settings, TagsSettings } from './reducers/settings';
@ -25,7 +25,7 @@ export const Tags: FC<TagsProps> = ({ settings: { tags }, setTagsSettings }) =>
</FormGroup> </FormGroup>
<FormGroup className="mb-0"> <FormGroup className="mb-0">
<label>Default ordering for tags list:</label> <label>Default ordering for tags list:</label>
<SortingDropdown <OrderingDropdown
items={TAGS_ORDERABLE_FIELDS} items={TAGS_ORDERABLE_FIELDS}
order={tags?.defaultOrdering ?? {}} order={tags?.defaultOrdering ?? {}}
onChange={(field, dir) => setTagsSettings({ ...tags, defaultOrdering: { field, dir } })} onChange={(field, dir) => setTagsSettings({ ...tags, defaultOrdering: { field, dir } })}

4
src/short-urls/ShortUrlsList.tsx
View file

@ -2,7 +2,7 @@ import { pipe } from 'ramda';
import { FC, useEffect, useMemo, useState } from 'react'; import { FC, useEffect, useMemo, useState } from 'react';
import { RouteComponentProps } from 'react-router'; import { RouteComponentProps } from 'react-router';
import { Card } from 'reactstrap'; import { Card } from 'reactstrap';
import { SortingDropdown } from '../utils/SortingDropdown'; import { OrderingDropdown } from '../utils/OrderingDropdown';
import { determineOrderDir, OrderDir } from '../utils/helpers/ordering'; import { determineOrderDir, OrderDir } from '../utils/helpers/ordering';
import { getServerId, SelectedServer } from '../servers/data'; import { getServerId, SelectedServer } from '../servers/data';
import { boundToMercureHub } from '../mercure/helpers/boundToMercureHub'; import { boundToMercureHub } from '../mercure/helpers/boundToMercureHub';
@ -64,7 +64,7 @@ const ShortUrlsList = (ShortUrlsTable: FC<ShortUrlsTableProps>, SearchBar: FC) =
<> <>
<div className="mb-3"><SearchBar /></div> <div className="mb-3"><SearchBar /></div>
<div className="d-block d-lg-none mb-3"> <div className="d-block d-lg-none mb-3">
<SortingDropdown items={SHORT_URLS_ORDERABLE_FIELDS} order={order} onChange={handleOrderBy} /> <OrderingDropdown items={SHORT_URLS_ORDERABLE_FIELDS} order={order} onChange={handleOrderBy} />
</div> </div>
<Card body className="pb-1"> <Card body className="pb-1">
<ShortUrlsTable <ShortUrlsTable

4
src/tags/TagsList.tsx
View file

@ -10,7 +10,7 @@ import { ShlinkApiError } from '../api/ShlinkApiError';
import { Topics } from '../mercure/helpers/Topics'; import { Topics } from '../mercure/helpers/Topics';
import { Settings, TagsMode } from '../settings/reducers/settings'; import { Settings, TagsMode } from '../settings/reducers/settings';
import { determineOrderDir, sortList } from '../utils/helpers/ordering'; import { determineOrderDir, sortList } from '../utils/helpers/ordering';
import { SortingDropdown } from '../utils/SortingDropdown'; import { OrderingDropdown } from '../utils/OrderingDropdown';
import { TagsList as TagsListState } from './reducers/tagsList'; import { TagsList as TagsListState } from './reducers/tagsList';
import { import {
TagsOrderableFields, TagsOrderableFields,
@ -93,7 +93,7 @@ const TagsList = (TagsCards: FC<TagsListChildrenProps>, TagsTable: FC<TagsTableP
<TagsModeDropdown mode={mode} onChange={setMode} /> <TagsModeDropdown mode={mode} onChange={setMode} />
</div> </div>
<div className="col-lg-6 mt-3 mt-lg-0"> <div className="col-lg-6 mt-3 mt-lg-0">
<SortingDropdown <OrderingDropdown
items={TAGS_ORDERABLE_FIELDS} items={TAGS_ORDERABLE_FIELDS}
order={order} order={order}
onChange={(field, dir) => setOrder({ field, dir })} onChange={(field, dir) => setOrder({ field, dir })}

8
src/utils/OrderingDropdown.scss Normal file
View file

@ -0,0 +1,8 @@
.ordering-dropdown__menu--link.ordering-dropdown__menu--link {
min-width: 11rem;
}
.ordering-dropdown__sort-icon {
margin: 3.5px 0 0;
float: right;
}

12
src/utils/SortingDropdown.tsx → src/utils/OrderingDropdown.tsx
View file

@ -4,9 +4,9 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faSortAmountUp as sortAscIcon, faSortAmountDown as sortDescIcon } from '@fortawesome/free-solid-svg-icons'; import { faSortAmountUp as sortAscIcon, faSortAmountDown as sortDescIcon } from '@fortawesome/free-solid-svg-icons';
import classNames from 'classnames'; import classNames from 'classnames';
import { determineOrderDir, Order, OrderDir } from './helpers/ordering'; import { determineOrderDir, Order, OrderDir } from './helpers/ordering';
import './SortingDropdown.scss'; import './OrderingDropdown.scss';
export interface SortingDropdownProps<T extends string = string> { export interface OrderingDropdownProps<T extends string = string> {
items: Record<T, string>; items: Record<T, string>;
order: Order<T>; order: Order<T>;
onChange: (orderField?: T, orderDir?: OrderDir) => void; onChange: (orderField?: T, orderDir?: OrderDir) => void;
@ -14,8 +14,8 @@ export interface SortingDropdownProps<T extends string = string> {
right?: boolean; right?: boolean;
} }
export function SortingDropdown<T extends string = string>( export function OrderingDropdown<T extends string = string>(
{ items, order, onChange, isButton = true, right = false }: SortingDropdownProps<T>, { items, order, onChange, isButton = true, right = false }: OrderingDropdownProps<T>,
) { ) {
const handleItemClick = (fieldKey: T) => () => { const handleItemClick = (fieldKey: T) => () => {
const newOrderDir = determineOrderDir(fieldKey, order.field, order.dir); const newOrderDir = determineOrderDir(fieldKey, order.field, order.dir);
@ -36,7 +36,7 @@ export function SortingDropdown<T extends string = string>(
</DropdownToggle> </DropdownToggle>
<DropdownMenu <DropdownMenu
right={right} right={right}
className={classNames('w-100', { 'sorting-dropdown__menu--link': !isButton })} className={classNames('w-100', { 'ordering-dropdown__menu--link': !isButton })}
> >
{toPairs(items).map(([ fieldKey, fieldValue ]) => ( {toPairs(items).map(([ fieldKey, fieldValue ]) => (
<DropdownItem key={fieldKey} active={order.field === fieldKey} onClick={handleItemClick(fieldKey as T)}> <DropdownItem key={fieldKey} active={order.field === fieldKey} onClick={handleItemClick(fieldKey as T)}>
@ -44,7 +44,7 @@ export function SortingDropdown<T extends string = string>(
{order.field === fieldKey && ( {order.field === fieldKey && (
<FontAwesomeIcon <FontAwesomeIcon
icon={order.dir === 'ASC' ? sortAscIcon : sortDescIcon} icon={order.dir === 'ASC' ? sortAscIcon : sortDescIcon}
className="sorting-dropdown__sort-icon" className="ordering-dropdown__sort-icon"
/> />
)} )}
</DropdownItem> </DropdownItem>

8
src/utils/SortingDropdown.scss
View file

@ -1,8 +0,0 @@
.sorting-dropdown__menu--link.sorting-dropdown__menu--link {
min-width: 11rem;
}
.sorting-dropdown__sort-icon {
margin: 3.5px 0 0;
float: right;
}

4
src/visits/charts/SortableBarChartCard.tsx
View file

@ -4,7 +4,7 @@ import { rangeOf } from '../../utils/utils';
import { Order } from '../../utils/helpers/ordering'; import { Order } from '../../utils/helpers/ordering';
import SimplePaginator from '../../common/SimplePaginator'; import SimplePaginator from '../../common/SimplePaginator';
import { roundTen } from '../../utils/helpers/numbers'; import { roundTen } from '../../utils/helpers/numbers';
import { SortingDropdown } from '../../utils/SortingDropdown'; import { OrderingDropdown } from '../../utils/OrderingDropdown';
import PaginationDropdown from '../../utils/PaginationDropdown'; import PaginationDropdown from '../../utils/PaginationDropdown';
import { Stats, StatsRow } from '../types'; import { Stats, StatsRow } from '../types';
import { HorizontalBarChart, HorizontalBarChartProps } from './HorizontalBarChart'; import { HorizontalBarChart, HorizontalBarChartProps } from './HorizontalBarChart';
@ -96,7 +96,7 @@ export const SortableBarChartCard: FC<SortableBarChartCardProps> = ({
<> <>
{title} {title}
<div className="float-right"> <div className="float-right">
<SortingDropdown <OrderingDropdown
isButton={false} isButton={false}
right right
items={sortingItems} items={sortingItems}

6
test/settings/ShortUrlsList.test.tsx
View file

@ -2,7 +2,7 @@ import { shallow, ShallowWrapper } from 'enzyme';
import { Mock } from 'ts-mockery'; import { Mock } from 'ts-mockery';
import { DEFAULT_SHORT_URLS_ORDERING, Settings, ShortUrlsListSettings } from '../../src/settings/reducers/settings'; import { DEFAULT_SHORT_URLS_ORDERING, Settings, ShortUrlsListSettings } from '../../src/settings/reducers/settings';
import { ShortUrlsList } from '../../src/settings/ShortUrlsList'; import { ShortUrlsList } from '../../src/settings/ShortUrlsList';
import { SortingDropdown } from '../../src/utils/SortingDropdown'; import { OrderingDropdown } from '../../src/utils/OrderingDropdown';
import { ShortUrlsOrder } from '../../src/short-urls/data'; import { ShortUrlsOrder } from '../../src/short-urls/data';
describe('<ShortUrlsList />', () => { describe('<ShortUrlsList />', () => {
@ -27,7 +27,7 @@ describe('<ShortUrlsList />', () => {
[{ defaultOrdering: { field: 'visits', dir: 'ASC' } as ShortUrlsOrder }, { field: 'visits', dir: 'ASC' }], [{ defaultOrdering: { field: 'visits', dir: 'ASC' } as ShortUrlsOrder }, { field: 'visits', dir: 'ASC' }],
])('shows expected ordering', (shortUrlsList, expectedOrder) => { ])('shows expected ordering', (shortUrlsList, expectedOrder) => {
const wrapper = createWrapper(shortUrlsList); const wrapper = createWrapper(shortUrlsList);
const dropdown = wrapper.find(SortingDropdown); const dropdown = wrapper.find(OrderingDropdown);
expect(dropdown.prop('order')).toEqual(expectedOrder); expect(dropdown.prop('order')).toEqual(expectedOrder);
}); });
@ -39,7 +39,7 @@ describe('<ShortUrlsList />', () => {
[ 'title', 'DESC' ], [ 'title', 'DESC' ],
])('invokes setSettings when ordering changes', (field, dir) => { ])('invokes setSettings when ordering changes', (field, dir) => {
const wrapper = createWrapper(); const wrapper = createWrapper();
const dropdown = wrapper.find(SortingDropdown); const dropdown = wrapper.find(OrderingDropdown);
expect(setSettings).not.toHaveBeenCalled(); expect(setSettings).not.toHaveBeenCalled();
dropdown.simulate('change', field, dir); dropdown.simulate('change', field, dir);

6
test/settings/Tags.test.tsx
View file

@ -4,7 +4,7 @@ import { FormGroup } from 'reactstrap';
import { Settings, TagsMode, TagsSettings } from '../../src/settings/reducers/settings'; import { Settings, TagsMode, TagsSettings } from '../../src/settings/reducers/settings';
import { TagsModeDropdown } from '../../src/tags/TagsModeDropdown'; import { TagsModeDropdown } from '../../src/tags/TagsModeDropdown';
import { Tags } from '../../src/settings/Tags'; import { Tags } from '../../src/settings/Tags';
import { SortingDropdown } from '../../src/utils/SortingDropdown'; import { OrderingDropdown } from '../../src/utils/OrderingDropdown';
import { TagsOrder } from '../../src/tags/data/TagsListChildrenProps'; import { TagsOrder } from '../../src/tags/data/TagsListChildrenProps';
describe('<Tags />', () => { describe('<Tags />', () => {
@ -60,7 +60,7 @@ describe('<Tags />', () => {
[{ defaultOrdering: { field: 'visits', dir: 'ASC' } as TagsOrder }, { field: 'visits', dir: 'ASC' }], [{ defaultOrdering: { field: 'visits', dir: 'ASC' } as TagsOrder }, { field: 'visits', dir: 'ASC' }],
])('shows expected ordering', (tags, expectedOrder) => { ])('shows expected ordering', (tags, expectedOrder) => {
const wrapper = createWrapper(tags); const wrapper = createWrapper(tags);
const dropdown = wrapper.find(SortingDropdown); const dropdown = wrapper.find(OrderingDropdown);
expect(dropdown.prop('order')).toEqual(expectedOrder); expect(dropdown.prop('order')).toEqual(expectedOrder);
}); });
@ -72,7 +72,7 @@ describe('<Tags />', () => {
[ 'shortUrls', 'DESC' ], [ 'shortUrls', 'DESC' ],
])('invokes setTagsSettings when ordering changes', (field, dir) => { ])('invokes setTagsSettings when ordering changes', (field, dir) => {
const wrapper = createWrapper(); const wrapper = createWrapper();
const dropdown = wrapper.find(SortingDropdown); const dropdown = wrapper.find(OrderingDropdown);
expect(setTagsSettings).not.toHaveBeenCalled(); expect(setTagsSettings).not.toHaveBeenCalled();
dropdown.simulate('change', field, dir); dropdown.simulate('change', field, dir);

32
test/short-urls/ShortUrlsList.test.tsx
View file

@ -7,7 +7,7 @@ import shortUrlsListCreator from '../../src/short-urls/ShortUrlsList';
import { ShortUrlsOrderableFields, ShortUrl, ShortUrlsOrder } from '../../src/short-urls/data'; import { ShortUrlsOrderableFields, ShortUrl, ShortUrlsOrder } from '../../src/short-urls/data';
import { MercureBoundProps } from '../../src/mercure/helpers/boundToMercureHub'; import { MercureBoundProps } from '../../src/mercure/helpers/boundToMercureHub';
import { ShortUrlsList as ShortUrlsListModel } from '../../src/short-urls/reducers/shortUrlsList'; import { ShortUrlsList as ShortUrlsListModel } from '../../src/short-urls/reducers/shortUrlsList';
import { SortingDropdown } from '../../src/utils/SortingDropdown'; import { OrderingDropdown } from '../../src/utils/OrderingDropdown';
import Paginator from '../../src/short-urls/Paginator'; import Paginator from '../../src/short-urls/Paginator';
import { ReachableServer } from '../../src/servers/data'; import { ReachableServer } from '../../src/servers/data';
import { ShortUrlListRouteParams } from '../../src/short-urls/helpers/hooks'; import { ShortUrlListRouteParams } from '../../src/short-urls/helpers/hooks';
@ -54,7 +54,7 @@ describe('<ShortUrlsList />', () => {
it('wraps expected components', () => { it('wraps expected components', () => {
expect(wrapper.find(ShortUrlsTable)).toHaveLength(1); expect(wrapper.find(ShortUrlsTable)).toHaveLength(1);
expect(wrapper.find(SortingDropdown)).toHaveLength(1); expect(wrapper.find(OrderingDropdown)).toHaveLength(1);
expect(wrapper.find(Paginator)).toHaveLength(1); expect(wrapper.find(Paginator)).toHaveLength(1);
expect(wrapper.find(SearchBar)).toHaveLength(1); expect(wrapper.find(SearchBar)).toHaveLength(1);
}); });
@ -80,39 +80,39 @@ describe('<ShortUrlsList />', () => {
expect(renderIcon('visits').props.currentOrder).toEqual({}); expect(renderIcon('visits').props.currentOrder).toEqual({});
wrapper.find(SortingDropdown).simulate('change', 'visits'); wrapper.find(OrderingDropdown).simulate('change', 'visits');
expect(renderIcon('visits').props.currentOrder).toEqual({ field: 'visits' }); expect(renderIcon('visits').props.currentOrder).toEqual({ field: 'visits' });
wrapper.find(SortingDropdown).simulate('change', 'visits', 'ASC'); wrapper.find(OrderingDropdown).simulate('change', 'visits', 'ASC');
expect(renderIcon('visits').props.currentOrder).toEqual({ field: 'visits', dir: 'ASC' }); expect(renderIcon('visits').props.currentOrder).toEqual({ field: 'visits', dir: 'ASC' });
}); });
it('handles order through table', () => { it('handles order through table', () => {
const orderByColumn: (field: ShortUrlsOrderableFields) => Function = wrapper.find(ShortUrlsTable).prop('orderByColumn'); const orderByColumn: (field: ShortUrlsOrderableFields) => Function = wrapper.find(ShortUrlsTable).prop('orderByColumn');
expect(wrapper.find(SortingDropdown).prop('order')).toEqual({}); expect(wrapper.find(OrderingDropdown).prop('order')).toEqual({});
orderByColumn('visits')(); orderByColumn('visits')();
expect(wrapper.find(SortingDropdown).prop('order')).toEqual({ field: 'visits', dir: 'ASC' }); expect(wrapper.find(OrderingDropdown).prop('order')).toEqual({ field: 'visits', dir: 'ASC' });
orderByColumn('title')(); orderByColumn('title')();
expect(wrapper.find(SortingDropdown).prop('order')).toEqual({ field: 'title', dir: 'ASC' }); expect(wrapper.find(OrderingDropdown).prop('order')).toEqual({ field: 'title', dir: 'ASC' });
orderByColumn('shortCode')(); orderByColumn('shortCode')();
expect(wrapper.find(SortingDropdown).prop('order')).toEqual({ field: 'shortCode', dir: 'ASC' }); expect(wrapper.find(OrderingDropdown).prop('order')).toEqual({ field: 'shortCode', dir: 'ASC' });
}); });
it('handles order through dropdown', () => { it('handles order through dropdown', () => {
expect(wrapper.find(SortingDropdown).prop('order')).toEqual({}); expect(wrapper.find(OrderingDropdown).prop('order')).toEqual({});
wrapper.find(SortingDropdown).simulate('change', 'visits', 'ASC'); wrapper.find(OrderingDropdown).simulate('change', 'visits', 'ASC');
expect(wrapper.find(SortingDropdown).prop('order')).toEqual({ field: 'visits', dir: 'ASC' }); expect(wrapper.find(OrderingDropdown).prop('order')).toEqual({ field: 'visits', dir: 'ASC' });
wrapper.find(SortingDropdown).simulate('change', 'shortCode', 'DESC'); wrapper.find(OrderingDropdown).simulate('change', 'shortCode', 'DESC');
expect(wrapper.find(SortingDropdown).prop('order')).toEqual({ field: 'shortCode', dir: 'DESC' }); expect(wrapper.find(OrderingDropdown).prop('order')).toEqual({ field: 'shortCode', dir: 'DESC' });
wrapper.find(SortingDropdown).simulate('change', undefined, undefined); wrapper.find(OrderingDropdown).simulate('change', undefined, undefined);
expect(wrapper.find(SortingDropdown).prop('order')).toEqual({}); expect(wrapper.find(OrderingDropdown).prop('order')).toEqual({});
}); });
it.each([ it.each([
@ -122,6 +122,6 @@ describe('<ShortUrlsList />', () => {
])('has expected initial ordering', (initialOrderBy, field, dir) => { ])('has expected initial ordering', (initialOrderBy, field, dir) => {
const wrapper = createWrapper(initialOrderBy); const wrapper = createWrapper(initialOrderBy);
expect(wrapper.find(SortingDropdown).prop('order')).toEqual({ field, dir }); expect(wrapper.find(OrderingDropdown).prop('order')).toEqual({ field, dir });
}); });
}); });

12
test/tags/TagsList.test.tsx
View file

@ -10,7 +10,7 @@ import { TagsModeDropdown } from '../../src/tags/TagsModeDropdown';
import SearchField from '../../src/utils/SearchField'; import SearchField from '../../src/utils/SearchField';
import { Settings } from '../../src/settings/reducers/settings'; import { Settings } from '../../src/settings/reducers/settings';
import { TagsOrderableFields } from '../../src/tags/data/TagsListChildrenProps'; import { TagsOrderableFields } from '../../src/tags/data/TagsListChildrenProps';
import { SortingDropdown } from '../../src/utils/SortingDropdown'; import { OrderingDropdown } from '../../src/utils/OrderingDropdown';
describe('<TagsList />', () => { describe('<TagsList />', () => {
let wrapper: ShallowWrapper; let wrapper: ShallowWrapper;
@ -89,11 +89,11 @@ describe('<TagsList />', () => {
it('triggers ordering when sorting dropdown changes', () => { it('triggers ordering when sorting dropdown changes', () => {
const wrapper = createWrapper({ filteredTags: [] }); const wrapper = createWrapper({ filteredTags: [] });
expect(wrapper.find(SortingDropdown).prop('order')).toEqual({}); expect(wrapper.find(OrderingDropdown).prop('order')).toEqual({});
wrapper.find(SortingDropdown).simulate('change', 'tag', 'DESC'); wrapper.find(OrderingDropdown).simulate('change', 'tag', 'DESC');
expect(wrapper.find(SortingDropdown).prop('order')).toEqual({ field: 'tag', dir: 'DESC' }); expect(wrapper.find(OrderingDropdown).prop('order')).toEqual({ field: 'tag', dir: 'DESC' });
wrapper.find(SortingDropdown).simulate('change', 'visits', 'ASC'); wrapper.find(OrderingDropdown).simulate('change', 'visits', 'ASC');
expect(wrapper.find(SortingDropdown).prop('order')).toEqual({ field: 'visits', dir: 'ASC' }); expect(wrapper.find(OrderingDropdown).prop('order')).toEqual({ field: 'visits', dir: 'ASC' });
}); });
it('can update current order via orderByColumn from table component', () => { it('can update current order via orderByColumn from table component', () => {

6
test/utils/SortingDropdown.test.tsx
View file

@ -3,7 +3,7 @@ import { DropdownItem, DropdownToggle } from 'reactstrap';
import { identity, values } from 'ramda'; import { identity, values } from 'ramda';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faSortAmountDown as caretDownIcon } from '@fortawesome/free-solid-svg-icons'; import { faSortAmountDown as caretDownIcon } from '@fortawesome/free-solid-svg-icons';
import { SortingDropdown , SortingDropdownProps } from '../../src/utils/SortingDropdown'; import { OrderingDropdown, OrderingDropdownProps } from '../../src/utils/OrderingDropdown';
import { OrderDir } from '../../src/utils/helpers/ordering'; import { OrderDir } from '../../src/utils/helpers/ordering';
describe('<SortingDropdown />', () => { describe('<SortingDropdown />', () => {
@ -13,8 +13,8 @@ describe('<SortingDropdown />', () => {
bar: 'Bar', bar: 'Bar',
baz: 'Hello World', baz: 'Hello World',
}; };
const createWrapper = (props: Partial<SortingDropdownProps> = {}) => { const createWrapper = (props: Partial<OrderingDropdownProps> = {}) => {
wrapper = shallow(<SortingDropdown items={items} order={{}} onChange={identity} {...props} />); wrapper = shallow(<OrderingDropdown items={items} order={{}} onChange={identity} {...props} />);
return wrapper; return wrapper;
}; };

4
test/visits/charts/SortableBarChartCard.test.tsx
View file

@ -1,6 +1,6 @@
import { shallow, ShallowWrapper } from 'enzyme'; import { shallow, ShallowWrapper } from 'enzyme';
import { range } from 'ramda'; import { range } from 'ramda';
import { SortingDropdown } from '../../../src/utils/SortingDropdown'; import { OrderingDropdown } from '../../../src/utils/OrderingDropdown';
import PaginationDropdown from '../../../src/utils/PaginationDropdown'; import PaginationDropdown from '../../../src/utils/PaginationDropdown';
import { rangeOf } from '../../../src/utils/utils'; import { rangeOf } from '../../../src/utils/utils';
import { OrderDir } from '../../../src/utils/helpers/ordering'; import { OrderDir } from '../../../src/utils/helpers/ordering';
@ -45,7 +45,7 @@ describe('<SortableBarChartCard />', () => {
beforeEach(() => { beforeEach(() => {
const wrapper = createWrapper(); const wrapper = createWrapper();
const dropdown = wrapper.renderProp('title' as never)().find(SortingDropdown); const dropdown = wrapper.renderProp('title' as never)().find(OrderingDropdown);
assert = (sortName: string, sortDir: OrderDir, keys: string[], values: number[]) => { assert = (sortName: string, sortDir: OrderDir, keys: string[], values: number[]) => {
dropdown.prop('onChange')(sortName, sortDir); dropdown.prop('onChange')(sortName, sortDir);