diff --git a/src/settings/RealTimeUpdates.tsx b/src/settings/RealTimeUpdatesSettings.tsx similarity index 96% rename from src/settings/RealTimeUpdates.tsx rename to src/settings/RealTimeUpdatesSettings.tsx index 243a7d0c..8081b26f 100644 --- a/src/settings/RealTimeUpdates.tsx +++ b/src/settings/RealTimeUpdatesSettings.tsx @@ -12,7 +12,7 @@ interface RealTimeUpdatesProps { const intervalValue = (interval?: number) => !interval ? '' : `${interval}`; -const RealTimeUpdates = ( +const RealTimeUpdatesSettings = ( { settings: { realTimeUpdates }, toggleRealTimeUpdates, setRealTimeUpdatesInterval }: RealTimeUpdatesProps, ) => ( @@ -50,4 +50,4 @@ const RealTimeUpdates = ( ); -export default RealTimeUpdates; +export default RealTimeUpdatesSettings; diff --git a/src/settings/ShortUrlCreation.tsx b/src/settings/ShortUrlCreationSettings.tsx similarity index 88% rename from src/settings/ShortUrlCreation.tsx rename to src/settings/ShortUrlCreationSettings.tsx index 53814d71..5c3a1ebb 100644 --- a/src/settings/ShortUrlCreation.tsx +++ b/src/settings/ShortUrlCreationSettings.tsx @@ -3,11 +3,11 @@ import { DropdownItem, FormGroup } from 'reactstrap'; import { SimpleCard } from '../utils/SimpleCard'; import ToggleSwitch from '../utils/ToggleSwitch'; import { DropdownBtn } from '../utils/DropdownBtn'; -import { Settings, ShortUrlCreationSettings, TagFilteringMode } from './reducers/settings'; +import { Settings, ShortUrlCreationSettings as ShortUrlsSettings, TagFilteringMode } from './reducers/settings'; interface ShortUrlCreationProps { settings: Settings; - setShortUrlCreationSettings: (settings: ShortUrlCreationSettings) => void; + setShortUrlCreationSettings: (settings: ShortUrlsSettings) => void; } const tagFilteringModeText = (tagFilteringMode: TagFilteringMode | undefined): string => @@ -17,8 +17,8 @@ const tagFilteringModeHint = (tagFilteringMode: TagFilteringMode | undefined): R ? <>The list of suggested tags will contain those including provided input. : <>The list of suggested tags will contain those starting with provided input.; -export const ShortUrlCreation: FC = ({ settings, setShortUrlCreationSettings }) => { - const shortUrlCreation: ShortUrlCreationSettings = settings.shortUrlCreation ?? { validateUrls: false }; +export const ShortUrlCreationSettings: FC = ({ settings, setShortUrlCreationSettings }) => { + const shortUrlCreation: ShortUrlsSettings = settings.shortUrlCreation ?? { validateUrls: false }; const changeTagsFilteringMode = (tagFilteringMode: TagFilteringMode) => () => setShortUrlCreationSettings( { ...shortUrlCreation ?? { validateUrls: false }, tagFilteringMode }, ); diff --git a/src/settings/ShortUrlsList.tsx b/src/settings/ShortUrlsListSettings.tsx similarity index 57% rename from src/settings/ShortUrlsList.tsx rename to src/settings/ShortUrlsListSettings.tsx index aadbb502..01ed2547 100644 --- a/src/settings/ShortUrlsList.tsx +++ b/src/settings/ShortUrlsListSettings.tsx @@ -1,21 +1,23 @@ import { FC } from 'react'; import { FormGroup } from 'reactstrap'; -import SortingDropdown from '../utils/SortingDropdown'; -import { SORTABLE_FIELDS } from '../short-urls/data'; +import { OrderingDropdown } from '../utils/OrderingDropdown'; +import { SHORT_URLS_ORDERABLE_FIELDS } from '../short-urls/data'; import { SimpleCard } from '../utils/SimpleCard'; -import { DEFAULT_SHORT_URLS_ORDERING, Settings, ShortUrlsListSettings } from './reducers/settings'; +import { DEFAULT_SHORT_URLS_ORDERING, Settings, ShortUrlsListSettings as ShortUrlsSettings } from './reducers/settings'; interface ShortUrlsListProps { settings: Settings; - setShortUrlsListSettings: (settings: ShortUrlsListSettings) => void; + setShortUrlsListSettings: (settings: ShortUrlsSettings) => void; } -export const ShortUrlsList: FC = ({ settings: { shortUrlsList }, setShortUrlsListSettings }) => ( +export const ShortUrlsListSettings: FC = ( + { settings: { shortUrlsList }, setShortUrlsListSettings }, +) => ( - setShortUrlsListSettings({ defaultOrdering: { field, dir } })} /> diff --git a/src/settings/Tags.tsx b/src/settings/TagsSettings.tsx similarity index 70% rename from src/settings/Tags.tsx rename to src/settings/TagsSettings.tsx index cbbd2af8..7359fb2f 100644 --- a/src/settings/Tags.tsx +++ b/src/settings/TagsSettings.tsx @@ -3,16 +3,16 @@ import { FormGroup } from 'reactstrap'; import { SimpleCard } from '../utils/SimpleCard'; import { TagsModeDropdown } from '../tags/TagsModeDropdown'; import { capitalize } from '../utils/utils'; -import SortingDropdown from '../utils/SortingDropdown'; -import { SORTABLE_FIELDS } from '../tags/data/TagsListChildrenProps'; -import { Settings, TagsSettings } from './reducers/settings'; +import { OrderingDropdown } from '../utils/OrderingDropdown'; +import { TAGS_ORDERABLE_FIELDS } from '../tags/data/TagsListChildrenProps'; +import { Settings, TagsSettings as TagsSettingsOptions } from './reducers/settings'; interface TagsProps { settings: Settings; - setTagsSettings: (settings: TagsSettings) => void; + setTagsSettings: (settings: TagsSettingsOptions) => void; } -export const Tags: FC = ({ settings: { tags }, setTagsSettings }) => ( +export const TagsSettings: FC = ({ settings: { tags }, setTagsSettings }) => ( @@ -25,8 +25,8 @@ export const Tags: FC = ({ settings: { tags }, setTagsSettings }) => - setTagsSettings({ ...tags, defaultOrdering: { field, dir } })} /> diff --git a/src/settings/UserInterface.scss b/src/settings/UserInterfaceSettings.scss similarity index 100% rename from src/settings/UserInterface.scss rename to src/settings/UserInterfaceSettings.scss diff --git a/src/settings/UserInterface.tsx b/src/settings/UserInterfaceSettings.tsx similarity index 88% rename from src/settings/UserInterface.tsx rename to src/settings/UserInterfaceSettings.tsx index e2d74a5d..cca9e11b 100644 --- a/src/settings/UserInterface.tsx +++ b/src/settings/UserInterfaceSettings.tsx @@ -6,14 +6,14 @@ import { SimpleCard } from '../utils/SimpleCard'; import ToggleSwitch from '../utils/ToggleSwitch'; import { changeThemeInMarkup, Theme } from '../utils/theme'; import { Settings, UiSettings } from './reducers/settings'; -import './UserInterface.scss'; +import './UserInterfaceSettings.scss'; interface UserInterfaceProps { settings: Settings; setUiSettings: (settings: UiSettings) => void; } -export const UserInterface: FC = ({ settings: { ui }, setUiSettings }) => ( +export const UserInterfaceSettings: FC = ({ settings: { ui }, setUiSettings }) => ( diff --git a/src/settings/Visits.tsx b/src/settings/VisitsSettings.tsx similarity index 72% rename from src/settings/Visits.tsx rename to src/settings/VisitsSettings.tsx index a64a9641..3bb58e88 100644 --- a/src/settings/Visits.tsx +++ b/src/settings/VisitsSettings.tsx @@ -2,14 +2,14 @@ import { FormGroup } from 'reactstrap'; import { FC } from 'react'; import { SimpleCard } from '../utils/SimpleCard'; import { DateIntervalSelector } from '../utils/dates/DateIntervalSelector'; -import { Settings, VisitsSettings } from './reducers/settings'; +import { Settings, VisitsSettings as VisitsSettingsConfig } from './reducers/settings'; interface VisitsProps { settings: Settings; - setVisitsSettings: (settings: VisitsSettings) => void; + setVisitsSettings: (settings: VisitsSettingsConfig) => void; } -export const Visits: FC = ({ settings, setVisitsSettings }) => ( +export const VisitsSettings: FC = ({ settings, setVisitsSettings }) => ( diff --git a/src/settings/services/provideServices.ts b/src/settings/services/provideServices.ts index c54d37aa..d60ad3d7 100644 --- a/src/settings/services/provideServices.ts +++ b/src/settings/services/provideServices.ts @@ -1,5 +1,5 @@ import Bottle from 'bottlejs'; -import RealTimeUpdates from '../RealTimeUpdates'; +import RealTimeUpdatesSettings from '../RealTimeUpdatesSettings'; import Settings from '../Settings'; import { setRealTimeUpdatesInterval, @@ -12,46 +12,46 @@ import { } from '../reducers/settings'; import { ConnectDecorator } from '../../container/types'; import { withoutSelectedServer } from '../../servers/helpers/withoutSelectedServer'; -import { ShortUrlCreation } from '../ShortUrlCreation'; -import { UserInterface } from '../UserInterface'; -import { Visits } from '../Visits'; -import { Tags } from '../Tags'; -import { ShortUrlsList } from '../ShortUrlsList'; +import { ShortUrlCreationSettings } from '../ShortUrlCreationSettings'; +import { UserInterfaceSettings } from '../UserInterfaceSettings'; +import { VisitsSettings } from '../VisitsSettings'; +import { TagsSettings } from '../TagsSettings'; +import { ShortUrlsListSettings } from '../ShortUrlsListSettings'; const provideServices = (bottle: Bottle, connect: ConnectDecorator) => { // Components bottle.serviceFactory( 'Settings', Settings, - 'RealTimeUpdates', - 'ShortUrlCreation', + 'RealTimeUpdatesSettings', + 'ShortUrlCreationSettings', 'ShortUrlsListSettings', - 'UserInterface', - 'Visits', - 'Tags', + 'UserInterfaceSettings', + 'VisitsSettings', + 'TagsSettings', ); bottle.decorator('Settings', withoutSelectedServer); bottle.decorator('Settings', connect(null, [ 'resetSelectedServer' ])); - bottle.serviceFactory('RealTimeUpdates', () => RealTimeUpdates); + bottle.serviceFactory('RealTimeUpdatesSettings', () => RealTimeUpdatesSettings); bottle.decorator( - 'RealTimeUpdates', + 'RealTimeUpdatesSettings', connect([ 'settings' ], [ 'toggleRealTimeUpdates', 'setRealTimeUpdatesInterval' ]), ); - bottle.serviceFactory('ShortUrlCreation', () => ShortUrlCreation); - bottle.decorator('ShortUrlCreation', connect([ 'settings' ], [ 'setShortUrlCreationSettings' ])); + bottle.serviceFactory('ShortUrlCreationSettings', () => ShortUrlCreationSettings); + bottle.decorator('ShortUrlCreationSettings', connect([ 'settings' ], [ 'setShortUrlCreationSettings' ])); - bottle.serviceFactory('UserInterface', () => UserInterface); - bottle.decorator('UserInterface', connect([ 'settings' ], [ 'setUiSettings' ])); + bottle.serviceFactory('UserInterfaceSettings', () => UserInterfaceSettings); + bottle.decorator('UserInterfaceSettings', connect([ 'settings' ], [ 'setUiSettings' ])); - bottle.serviceFactory('Visits', () => Visits); - bottle.decorator('Visits', connect([ 'settings' ], [ 'setVisitsSettings' ])); + bottle.serviceFactory('VisitsSettings', () => VisitsSettings); + bottle.decorator('VisitsSettings', connect([ 'settings' ], [ 'setVisitsSettings' ])); - bottle.serviceFactory('Tags', () => Tags); - bottle.decorator('Tags', connect([ 'settings' ], [ 'setTagsSettings' ])); + bottle.serviceFactory('TagsSettings', () => TagsSettings); + bottle.decorator('TagsSettings', connect([ 'settings' ], [ 'setTagsSettings' ])); - bottle.serviceFactory('ShortUrlsListSettings', () => ShortUrlsList); + bottle.serviceFactory('ShortUrlsListSettings', () => ShortUrlsListSettings); bottle.decorator('ShortUrlsListSettings', connect([ 'settings' ], [ 'setShortUrlsListSettings' ])); // Actions diff --git a/src/short-urls/ShortUrlsList.tsx b/src/short-urls/ShortUrlsList.tsx index 09227fff..c0f12f6a 100644 --- a/src/short-urls/ShortUrlsList.tsx +++ b/src/short-urls/ShortUrlsList.tsx @@ -2,7 +2,7 @@ import { pipe } from 'ramda'; import { FC, useEffect, useMemo, useState } from 'react'; import { RouteComponentProps } from 'react-router'; import { Card } from 'reactstrap'; -import SortingDropdown from '../utils/SortingDropdown'; +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 +14,7 @@ import { ShortUrlsList as ShortUrlsListState } from './reducers/shortUrlsList'; import { ShortUrlsTableProps } from './ShortUrlsTable'; import Paginator from './Paginator'; import { ShortUrlListRouteParams, useShortUrlsQuery } from './helpers/hooks'; -import { OrderableFields, ShortUrlsOrder, SORTABLE_FIELDS } from './data'; +import { ShortUrlsOrderableFields, ShortUrlsOrder, SHORT_URLS_ORDERABLE_FIELDS } from './data'; interface ShortUrlsListProps extends RouteComponentProps { selectedServer: SelectedServer; @@ -39,10 +39,10 @@ const ShortUrlsList = (ShortUrlsTable: FC, SearchBar: FC) = const selectedTags = useMemo(() => tags?.split(',') ?? [], [ tags ]); const { pagination } = shortUrlsList?.shortUrls ?? {}; - const handleOrderBy = (field?: OrderableFields, dir?: OrderDir) => setOrder({ field, dir }); - const orderByColumn = (field: OrderableFields) => () => + const handleOrderBy = (field?: ShortUrlsOrderableFields, dir?: OrderDir) => setOrder({ field, dir }); + const orderByColumn = (field: ShortUrlsOrderableFields) => () => handleOrderBy(field, determineOrderDir(field, order.field, order.dir)); - const renderOrderIcon = (field: OrderableFields) => ; + const renderOrderIcon = (field: ShortUrlsOrderableFields) => ; const addTag = pipe( (newTag: string) => [ ...new Set([ ...selectedTags, newTag ]) ].join(','), (tags) => toFirstPage({ tags }), @@ -64,7 +64,7 @@ const ShortUrlsList = (ShortUrlsTable: FC, SearchBar: FC) = <>
- +
() => void; - renderOrderIcon?: (column: OrderableFields) => ReactNode; + orderByColumn?: (column: ShortUrlsOrderableFields) => () => void; + renderOrderIcon?: (column: ShortUrlsOrderableFields) => ReactNode; shortUrlsList: ShortUrlsListState; selectedServer: SelectedServer; onTagClick?: (tag: string) => void; diff --git a/src/short-urls/data/index.ts b/src/short-urls/data/index.ts index f5a001cd..8199497d 100644 --- a/src/short-urls/data/index.ts +++ b/src/short-urls/data/index.ts @@ -52,7 +52,7 @@ export interface ShortUrlIdentifier { domain: OptionalString; } -export const SORTABLE_FIELDS = { +export const SHORT_URLS_ORDERABLE_FIELDS = { dateCreated: 'Created at', shortCode: 'Short URL', longUrl: 'Long URL', @@ -60,6 +60,6 @@ export const SORTABLE_FIELDS = { visits: 'Visits', }; -export type OrderableFields = keyof typeof SORTABLE_FIELDS; +export type ShortUrlsOrderableFields = keyof typeof SHORT_URLS_ORDERABLE_FIELDS; -export type ShortUrlsOrder = Order; +export type ShortUrlsOrder = Order; diff --git a/src/tags/TagsList.tsx b/src/tags/TagsList.tsx index 63832b53..a4828d30 100644 --- a/src/tags/TagsList.tsx +++ b/src/tags/TagsList.tsx @@ -10,9 +10,14 @@ import { ShlinkApiError } from '../api/ShlinkApiError'; import { Topics } from '../mercure/helpers/Topics'; import { Settings, TagsMode } from '../settings/reducers/settings'; 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 { OrderableFields, SORTABLE_FIELDS, TagsListChildrenProps, TagsOrder } from './data/TagsListChildrenProps'; +import { + TagsOrderableFields, + TAGS_ORDERABLE_FIELDS, + TagsListChildrenProps, + TagsOrder, +} from './data/TagsListChildrenProps'; import { TagsModeDropdown } from './TagsModeDropdown'; import { NormalizedTag } from './data'; import { TagsTableProps } from './TagsTable'; @@ -55,7 +60,7 @@ const TagsList = (TagsCards: FC, TagsTable: FC () => { + const orderByColumn = (field: TagsOrderableFields) => () => { const dir = determineOrderDir(field, order.field, order.dir); setOrder({ field: dir ? field : undefined, dir }); @@ -88,7 +93,11 @@ const TagsList = (TagsCards: FC, TagsTable: FC
- setOrder({ field, dir })} /> + setOrder({ field, dir })} + />
{renderContent()} diff --git a/src/tags/TagsTable.tsx b/src/tags/TagsTable.tsx index cf24542c..94876b65 100644 --- a/src/tags/TagsTable.tsx +++ b/src/tags/TagsTable.tsx @@ -6,12 +6,12 @@ import SimplePaginator from '../common/SimplePaginator'; import { useQueryState } from '../utils/helpers/hooks'; import { parseQuery } from '../utils/helpers/query'; import { TableOrderIcon } from '../utils/table/TableOrderIcon'; -import { OrderableFields, TagsListChildrenProps, TagsOrder } from './data/TagsListChildrenProps'; +import { TagsOrderableFields, TagsListChildrenProps, TagsOrder } from './data/TagsListChildrenProps'; import { TagsTableRowProps } from './TagsTableRow'; import './TagsTable.scss'; export interface TagsTableProps extends TagsListChildrenProps { - orderByColumn: (field: OrderableFields) => () => void; + orderByColumn: (field: TagsOrderableFields) => () => void; currentOrder: TagsOrder; } diff --git a/src/tags/data/TagsListChildrenProps.ts b/src/tags/data/TagsListChildrenProps.ts index e8e476a8..54837ac7 100644 --- a/src/tags/data/TagsListChildrenProps.ts +++ b/src/tags/data/TagsListChildrenProps.ts @@ -2,15 +2,15 @@ import { SelectedServer } from '../../servers/data'; import { Order } from '../../utils/helpers/ordering'; import { NormalizedTag } from './index'; -export const SORTABLE_FIELDS = { +export const TAGS_ORDERABLE_FIELDS = { tag: 'Tag', shortUrls: 'Short URLs', visits: 'Visits', }; -export type OrderableFields = keyof typeof SORTABLE_FIELDS; +export type TagsOrderableFields = keyof typeof TAGS_ORDERABLE_FIELDS; -export type TagsOrder = Order; +export type TagsOrder = Order; export interface TagsListChildrenProps { sortedTags: NormalizedTag[]; diff --git a/src/utils/OrderingDropdown.scss b/src/utils/OrderingDropdown.scss new file mode 100644 index 00000000..253824b9 --- /dev/null +++ b/src/utils/OrderingDropdown.scss @@ -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; +} diff --git a/src/utils/SortingDropdown.tsx b/src/utils/OrderingDropdown.tsx similarity index 82% rename from src/utils/SortingDropdown.tsx rename to src/utils/OrderingDropdown.tsx index ebc04d2c..8d112843 100644 --- a/src/utils/SortingDropdown.tsx +++ b/src/utils/OrderingDropdown.tsx @@ -4,9 +4,9 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faSortAmountUp as sortAscIcon, faSortAmountDown as sortDescIcon } from '@fortawesome/free-solid-svg-icons'; import classNames from 'classnames'; import { determineOrderDir, Order, OrderDir } from './helpers/ordering'; -import './SortingDropdown.scss'; +import './OrderingDropdown.scss'; -export interface SortingDropdownProps { +export interface OrderingDropdownProps { items: Record; order: Order; onChange: (orderField?: T, orderDir?: OrderDir) => void; @@ -14,8 +14,8 @@ export interface SortingDropdownProps { right?: boolean; } -export default function SortingDropdown( - { items, order, onChange, isButton = true, right = false }: SortingDropdownProps, +export function OrderingDropdown( + { items, order, onChange, isButton = true, right = false }: OrderingDropdownProps, ) { const handleItemClick = (fieldKey: T) => () => { const newOrderDir = determineOrderDir(fieldKey, order.field, order.dir); @@ -36,7 +36,7 @@ export default function SortingDropdown( {toPairs(items).map(([ fieldKey, fieldValue ]) => ( @@ -44,7 +44,7 @@ export default function SortingDropdown( {order.field === fieldKey && ( )} diff --git a/src/utils/SortingDropdown.scss b/src/utils/SortingDropdown.scss deleted file mode 100644 index cbb9bcbc..00000000 --- a/src/utils/SortingDropdown.scss +++ /dev/null @@ -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; -} diff --git a/src/visits/charts/SortableBarChartCard.tsx b/src/visits/charts/SortableBarChartCard.tsx index a627e514..b4788e7b 100644 --- a/src/visits/charts/SortableBarChartCard.tsx +++ b/src/visits/charts/SortableBarChartCard.tsx @@ -4,7 +4,7 @@ import { rangeOf } from '../../utils/utils'; import { Order } from '../../utils/helpers/ordering'; import SimplePaginator from '../../common/SimplePaginator'; import { roundTen } from '../../utils/helpers/numbers'; -import SortingDropdown from '../../utils/SortingDropdown'; +import { OrderingDropdown } from '../../utils/OrderingDropdown'; import PaginationDropdown from '../../utils/PaginationDropdown'; import { Stats, StatsRow } from '../types'; import { HorizontalBarChart, HorizontalBarChartProps } from './HorizontalBarChart'; @@ -96,7 +96,7 @@ export const SortableBarChartCard: FC = ({ <> {title}
- ', () => { +describe('', () => { const toggleRealTimeUpdates = jest.fn(); const setRealTimeUpdatesInterval = jest.fn(); let wrapper: ShallowWrapper; - const createWrapper = (realTimeUpdates: Partial = {}) => { + const createWrapper = (realTimeUpdates: Partial = {}) => { const settings = Mock.of({ realTimeUpdates }); wrapper = shallow( - ', () => { +describe('', () => { let wrapper: ShallowWrapper; const setShortUrlCreationSettings = jest.fn(); - const createWrapper = (shortUrlCreation?: ShortUrlCreationSettings) => { + const createWrapper = (shortUrlCreation?: ShortUrlsSettings) => { wrapper = shallow( - ({ shortUrlCreation })} setShortUrlCreationSettings={setShortUrlCreationSettings} />, @@ -68,9 +68,9 @@ describe('', () => { }); it.each([ - [ { tagFilteringMode: 'includes' } as ShortUrlCreationSettings, 'Suggest tags including input', 'including' ], + [ { tagFilteringMode: 'includes' } as ShortUrlsSettings, 'Suggest tags including input', 'including' ], [ - { tagFilteringMode: 'startsWith' } as ShortUrlCreationSettings, + { tagFilteringMode: 'startsWith' } as ShortUrlsSettings, 'Suggest tags starting with input', 'starting with', ], diff --git a/test/settings/ShortUrlsList.test.tsx b/test/settings/ShortUrlsListSettings.test.tsx similarity index 67% rename from test/settings/ShortUrlsList.test.tsx rename to test/settings/ShortUrlsListSettings.test.tsx index 3c1136de..f8ca25e7 100644 --- a/test/settings/ShortUrlsList.test.tsx +++ b/test/settings/ShortUrlsListSettings.test.tsx @@ -1,16 +1,20 @@ import { shallow, ShallowWrapper } from 'enzyme'; import { Mock } from 'ts-mockery'; -import { DEFAULT_SHORT_URLS_ORDERING, Settings, ShortUrlsListSettings } from '../../src/settings/reducers/settings'; -import { ShortUrlsList } from '../../src/settings/ShortUrlsList'; -import SortingDropdown from '../../src/utils/SortingDropdown'; +import { + DEFAULT_SHORT_URLS_ORDERING, + Settings, + ShortUrlsListSettings as ShortUrlsSettings, +} from '../../src/settings/reducers/settings'; +import { ShortUrlsListSettings } from '../../src/settings/ShortUrlsListSettings'; +import { OrderingDropdown } from '../../src/utils/OrderingDropdown'; import { ShortUrlsOrder } from '../../src/short-urls/data'; -describe('', () => { +describe('', () => { let wrapper: ShallowWrapper; const setSettings = jest.fn(); - const createWrapper = (shortUrlsList?: ShortUrlsListSettings) => { + const createWrapper = (shortUrlsList?: ShortUrlsSettings) => { wrapper = shallow( - ({ shortUrlsList })} setShortUrlsListSettings={setSettings} />, + ({ shortUrlsList })} setShortUrlsListSettings={setSettings} />, ); return wrapper; @@ -27,7 +31,7 @@ describe('', () => { [{ defaultOrdering: { field: 'visits', dir: 'ASC' } as ShortUrlsOrder }, { field: 'visits', dir: 'ASC' }], ])('shows expected ordering', (shortUrlsList, expectedOrder) => { const wrapper = createWrapper(shortUrlsList); - const dropdown = wrapper.find(SortingDropdown); + const dropdown = wrapper.find(OrderingDropdown); expect(dropdown.prop('order')).toEqual(expectedOrder); }); @@ -39,7 +43,7 @@ describe('', () => { [ 'title', 'DESC' ], ])('invokes setSettings when ordering changes', (field, dir) => { const wrapper = createWrapper(); - const dropdown = wrapper.find(SortingDropdown); + const dropdown = wrapper.find(OrderingDropdown); expect(setSettings).not.toHaveBeenCalled(); dropdown.simulate('change', field, dir); diff --git a/test/settings/Tags.test.tsx b/test/settings/TagsSettings.test.tsx similarity index 81% rename from test/settings/Tags.test.tsx rename to test/settings/TagsSettings.test.tsx index 8e5440a4..d6ae737b 100644 --- a/test/settings/Tags.test.tsx +++ b/test/settings/TagsSettings.test.tsx @@ -1,17 +1,17 @@ import { shallow, ShallowWrapper } from 'enzyme'; import { Mock } from 'ts-mockery'; import { FormGroup } from 'reactstrap'; -import { Settings, TagsMode, TagsSettings } from '../../src/settings/reducers/settings'; +import { Settings, TagsMode, TagsSettings as TagsSettingsOptions } from '../../src/settings/reducers/settings'; import { TagsModeDropdown } from '../../src/tags/TagsModeDropdown'; -import { Tags } from '../../src/settings/Tags'; -import SortingDropdown from '../../src/utils/SortingDropdown'; +import { TagsSettings } from '../../src/settings/TagsSettings'; +import { OrderingDropdown } from '../../src/utils/OrderingDropdown'; import { TagsOrder } from '../../src/tags/data/TagsListChildrenProps'; -describe('', () => { +describe('', () => { let wrapper: ShallowWrapper; const setTagsSettings = jest.fn(); - const createWrapper = (tags?: TagsSettings) => { - wrapper = shallow(({ tags })} setTagsSettings={setTagsSettings} />); + const createWrapper = (tags?: TagsSettingsOptions) => { + wrapper = shallow(({ tags })} setTagsSettings={setTagsSettings} />); return wrapper; }; @@ -60,7 +60,7 @@ describe('', () => { [{ defaultOrdering: { field: 'visits', dir: 'ASC' } as TagsOrder }, { field: 'visits', dir: 'ASC' }], ])('shows expected ordering', (tags, expectedOrder) => { const wrapper = createWrapper(tags); - const dropdown = wrapper.find(SortingDropdown); + const dropdown = wrapper.find(OrderingDropdown); expect(dropdown.prop('order')).toEqual(expectedOrder); }); @@ -72,7 +72,7 @@ describe('', () => { [ 'shortUrls', 'DESC' ], ])('invokes setTagsSettings when ordering changes', (field, dir) => { const wrapper = createWrapper(); - const dropdown = wrapper.find(SortingDropdown); + const dropdown = wrapper.find(OrderingDropdown); expect(setTagsSettings).not.toHaveBeenCalled(); dropdown.simulate('change', field, dir); diff --git a/test/settings/UserInterface.test.tsx b/test/settings/UserInterfaceSettings.test.tsx similarity index 87% rename from test/settings/UserInterface.test.tsx rename to test/settings/UserInterfaceSettings.test.tsx index 55abf685..03391cee 100644 --- a/test/settings/UserInterface.test.tsx +++ b/test/settings/UserInterfaceSettings.test.tsx @@ -3,15 +3,15 @@ import { Mock } from 'ts-mockery'; import { faMoon, faSun } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Settings, UiSettings } from '../../src/settings/reducers/settings'; -import { UserInterface } from '../../src/settings/UserInterface'; +import { UserInterfaceSettings } from '../../src/settings/UserInterfaceSettings'; import ToggleSwitch from '../../src/utils/ToggleSwitch'; import { Theme } from '../../src/utils/theme'; -describe('', () => { +describe('', () => { let wrapper: ShallowWrapper; const setUiSettings = jest.fn(); const createWrapper = (ui?: UiSettings) => { - wrapper = shallow(({ ui })} setUiSettings={setUiSettings} />); + wrapper = shallow(({ ui })} setUiSettings={setUiSettings} />); return wrapper; }; diff --git a/test/settings/Visits.test.tsx b/test/settings/VisitsSettings.test.tsx similarity index 90% rename from test/settings/Visits.test.tsx rename to test/settings/VisitsSettings.test.tsx index 89a73546..243fe3b6 100644 --- a/test/settings/Visits.test.tsx +++ b/test/settings/VisitsSettings.test.tsx @@ -1,15 +1,15 @@ import { shallow, ShallowWrapper } from 'enzyme'; import { Mock } from 'ts-mockery'; import { Settings } from '../../src/settings/reducers/settings'; -import { Visits } from '../../src/settings/Visits'; +import { VisitsSettings } from '../../src/settings/VisitsSettings'; import { SimpleCard } from '../../src/utils/SimpleCard'; import { DateIntervalSelector } from '../../src/utils/dates/DateIntervalSelector'; -describe('', () => { +describe('', () => { let wrapper: ShallowWrapper; const setVisitsSettings = jest.fn(); const createWrapper = (settings: Partial = {}) => { - wrapper = shallow((settings)} setVisitsSettings={setVisitsSettings} />); + wrapper = shallow((settings)} setVisitsSettings={setVisitsSettings} />); return wrapper; }; diff --git a/test/short-urls/ShortUrlsList.test.tsx b/test/short-urls/ShortUrlsList.test.tsx index 3602667e..1df03e6a 100644 --- a/test/short-urls/ShortUrlsList.test.tsx +++ b/test/short-urls/ShortUrlsList.test.tsx @@ -4,10 +4,10 @@ import { Mock } from 'ts-mockery'; import { History, Location } from 'history'; import { match } from 'react-router'; import shortUrlsListCreator from '../../src/short-urls/ShortUrlsList'; -import { OrderableFields, ShortUrl, ShortUrlsOrder } from '../../src/short-urls/data'; +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 SortingDropdown from '../../src/utils/SortingDropdown'; +import { OrderingDropdown } from '../../src/utils/OrderingDropdown'; import Paginator from '../../src/short-urls/Paginator'; import { ReachableServer } from '../../src/servers/data'; import { ShortUrlListRouteParams } from '../../src/short-urls/helpers/hooks'; @@ -54,7 +54,7 @@ describe('', () => { it('wraps expected components', () => { 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(SearchBar)).toHaveLength(1); }); @@ -75,44 +75,44 @@ describe('', () => { }); it('invokes order icon rendering', () => { - const renderIcon = (field: OrderableFields) => - (wrapper.find(ShortUrlsTable).prop('renderOrderIcon') as (field: OrderableFields) => ReactElement)(field); + const renderIcon = (field: ShortUrlsOrderableFields) => + (wrapper.find(ShortUrlsTable).prop('renderOrderIcon') as (field: ShortUrlsOrderableFields) => ReactElement)(field); 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' }); - wrapper.find(SortingDropdown).simulate('change', 'visits', 'ASC'); + wrapper.find(OrderingDropdown).simulate('change', 'visits', 'ASC'); expect(renderIcon('visits').props.currentOrder).toEqual({ field: 'visits', dir: 'ASC' }); }); it('handles order through table', () => { - const orderByColumn: (field: OrderableFields) => 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')(); - expect(wrapper.find(SortingDropdown).prop('order')).toEqual({ field: 'visits', dir: 'ASC' }); + expect(wrapper.find(OrderingDropdown).prop('order')).toEqual({ field: 'visits', dir: 'ASC' }); 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')(); - 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', () => { - expect(wrapper.find(SortingDropdown).prop('order')).toEqual({}); + expect(wrapper.find(OrderingDropdown).prop('order')).toEqual({}); - wrapper.find(SortingDropdown).simulate('change', 'visits', 'ASC'); - expect(wrapper.find(SortingDropdown).prop('order')).toEqual({ field: 'visits', dir: 'ASC' }); + wrapper.find(OrderingDropdown).simulate('change', 'visits', 'ASC'); + expect(wrapper.find(OrderingDropdown).prop('order')).toEqual({ field: 'visits', dir: 'ASC' }); - wrapper.find(SortingDropdown).simulate('change', 'shortCode', 'DESC'); - expect(wrapper.find(SortingDropdown).prop('order')).toEqual({ field: 'shortCode', dir: 'DESC' }); + wrapper.find(OrderingDropdown).simulate('change', 'shortCode', 'DESC'); + expect(wrapper.find(OrderingDropdown).prop('order')).toEqual({ field: 'shortCode', dir: 'DESC' }); - wrapper.find(SortingDropdown).simulate('change', undefined, undefined); - expect(wrapper.find(SortingDropdown).prop('order')).toEqual({}); + wrapper.find(OrderingDropdown).simulate('change', undefined, undefined); + expect(wrapper.find(OrderingDropdown).prop('order')).toEqual({}); }); it.each([ @@ -122,6 +122,6 @@ describe('', () => { ])('has expected initial ordering', (initialOrderBy, field, dir) => { const wrapper = createWrapper(initialOrderBy); - expect(wrapper.find(SortingDropdown).prop('order')).toEqual({ field, dir }); + expect(wrapper.find(OrderingDropdown).prop('order')).toEqual({ field, dir }); }); }); diff --git a/test/short-urls/ShortUrlsTable.test.tsx b/test/short-urls/ShortUrlsTable.test.tsx index bcbccd23..a0be282e 100644 --- a/test/short-urls/ShortUrlsTable.test.tsx +++ b/test/short-urls/ShortUrlsTable.test.tsx @@ -5,7 +5,7 @@ import { ShortUrlsTable as shortUrlsTableCreator } from '../../src/short-urls/Sh import { ShortUrlsList } from '../../src/short-urls/reducers/shortUrlsList'; import { ReachableServer, SelectedServer } from '../../src/servers/data'; import { SemVer } from '../../src/utils/helpers/version'; -import { OrderableFields, SORTABLE_FIELDS } from '../../src/short-urls/data'; +import { ShortUrlsOrderableFields, SHORT_URLS_ORDERABLE_FIELDS } from '../../src/short-urls/data'; describe('', () => { let wrapper: ShallowWrapper; @@ -51,8 +51,8 @@ describe('', () => { .find('thead') .find('tr') .find('th') - .filterWhere((e) => e.text().includes(SORTABLE_FIELDS[orderableField as OrderableFields])); - const sortableFields = Object.keys(SORTABLE_FIELDS).filter((sortableField) => sortableField !== 'title'); + .filterWhere((e) => e.text().includes(SHORT_URLS_ORDERABLE_FIELDS[orderableField as ShortUrlsOrderableFields])); + const sortableFields = Object.keys(SHORT_URLS_ORDERABLE_FIELDS).filter((sortableField) => sortableField !== 'title'); expect.assertions(sortableFields.length); sortableFields.forEach((sortableField) => { diff --git a/test/tags/TagsList.test.tsx b/test/tags/TagsList.test.tsx index 4c5848b6..1d6de35b 100644 --- a/test/tags/TagsList.test.tsx +++ b/test/tags/TagsList.test.tsx @@ -9,8 +9,8 @@ import { Result } from '../../src/utils/Result'; import { TagsModeDropdown } from '../../src/tags/TagsModeDropdown'; import SearchField from '../../src/utils/SearchField'; import { Settings } from '../../src/settings/reducers/settings'; -import { OrderableFields } from '../../src/tags/data/TagsListChildrenProps'; -import SortingDropdown from '../../src/utils/SortingDropdown'; +import { TagsOrderableFields } from '../../src/tags/data/TagsListChildrenProps'; +import { OrderingDropdown } from '../../src/utils/OrderingDropdown'; describe('', () => { let wrapper: ShallowWrapper; @@ -89,16 +89,16 @@ describe('', () => { it('triggers ordering when sorting dropdown changes', () => { const wrapper = createWrapper({ filteredTags: [] }); - expect(wrapper.find(SortingDropdown).prop('order')).toEqual({}); - wrapper.find(SortingDropdown).simulate('change', 'tag', 'DESC'); - expect(wrapper.find(SortingDropdown).prop('order')).toEqual({ field: 'tag', dir: 'DESC' }); - wrapper.find(SortingDropdown).simulate('change', 'visits', 'ASC'); - expect(wrapper.find(SortingDropdown).prop('order')).toEqual({ field: 'visits', dir: 'ASC' }); + expect(wrapper.find(OrderingDropdown).prop('order')).toEqual({}); + wrapper.find(OrderingDropdown).simulate('change', 'tag', 'DESC'); + expect(wrapper.find(OrderingDropdown).prop('order')).toEqual({ field: 'tag', dir: 'DESC' }); + wrapper.find(OrderingDropdown).simulate('change', 'visits', 'ASC'); + expect(wrapper.find(OrderingDropdown).prop('order')).toEqual({ field: 'visits', dir: 'ASC' }); }); it('can update current order via orderByColumn from table component', () => { const wrapper = createWrapper({ filteredTags: [ 'foo', 'bar' ], stats: {} }); - const callOrderBy = (field: OrderableFields) => { + const callOrderBy = (field: TagsOrderableFields) => { ((wrapper.find(TagsTable).prop('orderByColumn') as Function)(field) as Function)(); }; diff --git a/test/utils/SortingDropdown.test.tsx b/test/utils/SortingDropdown.test.tsx index 934bbfb7..a2c874ce 100644 --- a/test/utils/SortingDropdown.test.tsx +++ b/test/utils/SortingDropdown.test.tsx @@ -3,7 +3,7 @@ import { DropdownItem, DropdownToggle } from 'reactstrap'; import { identity, values } from 'ramda'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; 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'; describe('', () => { @@ -13,8 +13,8 @@ describe('', () => { bar: 'Bar', baz: 'Hello World', }; - const createWrapper = (props: Partial = {}) => { - wrapper = shallow(); + const createWrapper = (props: Partial = {}) => { + wrapper = shallow(); return wrapper; }; diff --git a/test/visits/charts/SortableBarChartCard.test.tsx b/test/visits/charts/SortableBarChartCard.test.tsx index 338b220b..91d088c5 100644 --- a/test/visits/charts/SortableBarChartCard.test.tsx +++ b/test/visits/charts/SortableBarChartCard.test.tsx @@ -1,6 +1,6 @@ import { shallow, ShallowWrapper } from 'enzyme'; import { range } from 'ramda'; -import SortingDropdown from '../../../src/utils/SortingDropdown'; +import { OrderingDropdown } from '../../../src/utils/OrderingDropdown'; import PaginationDropdown from '../../../src/utils/PaginationDropdown'; import { rangeOf } from '../../../src/utils/utils'; import { OrderDir } from '../../../src/utils/helpers/ordering'; @@ -45,7 +45,7 @@ describe('', () => { beforeEach(() => { 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[]) => { dropdown.prop('onChange')(sortName, sortDir);