Merge pull request #517 from acelaya-forks/feature/reset-page

Feature/reset page
This commit is contained in:
Alejandro Celaya 2021-11-11 21:42:27 +01:00 committed by GitHub
commit 3bc9bd2ef8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
30 changed files with 339 additions and 260 deletions

View file

@ -12,6 +12,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
* [#490](https://github.com/shlinkio/shlink-web-client/issues/490) Now a server can be marked as auto-connect, skipping home screen when that happens.
* [#492](https://github.com/shlinkio/shlink-web-client/issues/492) Improved tags table, by supporting sorting by column and making the header sticky.
* [#515](https://github.com/shlinkio/shlink-web-client/issues/515) Allowed to sort tags even when using the cards display mode.
* [#518](https://github.com/shlinkio/shlink-web-client/issues/518) Improved short URLs list filtering by moving selected tags, search text and dates to the query string, allowing to navigate back and forth or even bookmark filters.
### Changed
* Moved ci workflow to external repo and reused
@ -24,6 +25,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
### Fixed
* [#252](https://github.com/shlinkio/shlink-web-client/issues/252) Fixed visits coming from mercure being added in real time, even when selected date interval does not match tha visit's date.
* [#48](https://github.com/shlinkio/shlink-web-client/issues/48) Fixed error when selected page gets out of range after filtering short URLs list by text, tags or dates. Now the page is reset to 1 in any of those cases.
## [3.3.2] - 2021-10-17

View file

@ -1,6 +1,5 @@
import { isEmpty, isNil, reject } from 'ramda';
import { AxiosInstance, AxiosResponse, Method } from 'axios';
import { ShortUrlsListParams } from '../../short-urls/reducers/shortUrlsListParams';
import { ShortUrl, ShortUrlData } from '../../short-urls/data';
import { OptionalString } from '../../utils/utils';
import {
@ -17,6 +16,7 @@ import {
ShlinkVisitsOverview,
ShlinkEditDomainRedirects,
ShlinkDomainRedirects,
ShlinkShortUrlsListParams,
} from '../types';
import { stringifyQuery } from '../../utils/helpers/query';
@ -34,7 +34,7 @@ export default class ShlinkApiClient {
this.apiVersion = 2;
}
public readonly listShortUrls = async (params: ShortUrlsListParams = {}): Promise<ShlinkShortUrlsResponse> =>
public readonly listShortUrls = async (params: ShlinkShortUrlsListParams = {}): Promise<ShlinkShortUrlsResponse> =>
this.performRequest<{ shortUrls: ShlinkShortUrlsResponse }>('/short-urls', 'GET', params)
.then(({ data }) => data.shortUrls);

View file

@ -1,6 +1,7 @@
import { Visit } from '../../visits/types';
import { OptionalString } from '../../utils/utils';
import { ShortUrl, ShortUrlMeta } from '../../short-urls/data';
import { OrderBy } from '../../short-urls/reducers/shortUrlsListParams';
export interface ShlinkShortUrlsResponse {
data: ShortUrl[];
@ -85,6 +86,16 @@ export interface ShlinkDomainsResponse {
data: ShlinkDomain[];
}
export interface ShlinkShortUrlsListParams {
page?: string;
itemsPerPage?: number;
tags?: string[];
searchTerm?: string;
startDate?: string;
endDate?: string;
orderBy?: OrderBy;
}
export interface ProblemDetailsError {
type: string;
detail: string;

View file

@ -13,7 +13,7 @@ import './MenuLayout.scss';
const MenuLayout = (
TagsList: FC,
ShortUrls: FC,
ShortUrlsList: FC,
AsideMenu: FC<AsideMenuProps>,
CreateShortUrl: FC,
ShortUrlVisits: FC,
@ -49,7 +49,7 @@ const MenuLayout = (
<Switch>
<Redirect exact from="/server/:serverId" to="/server/:serverId/overview" />
<Route exact path="/server/:serverId/overview" component={Overview} />
<Route exact path="/server/:serverId/list-short-urls/:page" component={ShortUrls} />
<Route exact path="/server/:serverId/list-short-urls/:page" component={ShortUrlsList} />
<Route exact path="/server/:serverId/create-short-url" component={CreateShortUrl} />
<Route path="/server/:serverId/short-code/:shortCode/visits" component={ShortUrlVisits} />
<Route path="/server/:serverId/short-code/:shortCode/edit" component={EditShortUrl} />

View file

@ -35,7 +35,7 @@ const provideServices = (bottle: Bottle, connect: ConnectDecorator, withRouter:
'MenuLayout',
MenuLayout,
'TagsList',
'ShortUrls',
'ShortUrlsList',
'AsideMenu',
'CreateShortUrl',
'ShortUrlVisits',
@ -46,7 +46,7 @@ const provideServices = (bottle: Bottle, connect: ConnectDecorator, withRouter:
'EditShortUrl',
'ManageDomains',
);
bottle.decorator('MenuLayout', connect([ 'selectedServer', 'shortUrlsListParams' ], [ 'selectServer' ]));
bottle.decorator('MenuLayout', connect([ 'selectedServer' ], [ 'selectServer' ]));
bottle.decorator('MenuLayout', withRouter);
bottle.serviceFactory('AsideMenu', AsideMenu, 'DeleteServerButton');

View file

@ -36,7 +36,7 @@ const connect: ConnectDecorator = (propsFromState: string[] | null, actionServic
provideAppServices(bottle, connect);
provideCommonServices(bottle, connect, withRouter);
provideApiServices(bottle);
provideShortUrlsServices(bottle, connect);
provideShortUrlsServices(bottle, connect, withRouter);
provideServersServices(bottle, connect, withRouter);
provideTagsServices(bottle, connect);
provideVisitsServices(bottle, connect);

View file

@ -1,7 +1,6 @@
import { FC, useEffect } from 'react';
import { Card, CardBody, CardHeader, CardText, CardTitle, Row } from 'reactstrap';
import { Link, useHistory } from 'react-router-dom';
import { ShortUrlsListParams } from '../short-urls/reducers/shortUrlsListParams';
import { ShortUrlsList as ShortUrlsListState } from '../short-urls/reducers/shortUrlsList';
import { prettify } from '../utils/helpers/numbers';
import { TagsList } from '../tags/reducers/tagsList';
@ -11,12 +10,13 @@ import { CreateShortUrlProps } from '../short-urls/CreateShortUrl';
import { VisitsOverview } from '../visits/reducers/visitsOverview';
import { Versions } from '../utils/helpers/version';
import { Topics } from '../mercure/helpers/Topics';
import { ShlinkShortUrlsListParams } from '../api/types';
import { getServerId, SelectedServer } from './data';
import './Overview.scss';
interface OverviewConnectProps {
shortUrlsList: ShortUrlsListState;
listShortUrls: (params: ShortUrlsListParams) => void;
listShortUrls: (params: ShlinkShortUrlsListParams) => void;
listTags: Function;
tagsList: TagsList;
selectedServer: SelectedServer;
@ -107,7 +107,7 @@ export const Overview = (
shortUrlsList={shortUrlsList}
selectedServer={selectedServer}
className="mb-0"
onTagClick={(tag) => history.push(`/server/${serverId}/list-short-urls/1?tag=${tag}`)}
onTagClick={(tag) => history.push(`/server/${serverId}/list-short-urls/1?tags=${encodeURIComponent(tag)}`)}
/>
</CardBody>
</Card>

View file

@ -1,15 +1,24 @@
import { Link } from 'react-router-dom';
import { Pagination, PaginationItem, PaginationLink } from 'reactstrap';
import { pageIsEllipsis, keyForPage, progressivePagination, prettifyPageNumber } from '../utils/helpers/pagination';
import {
pageIsEllipsis,
keyForPage,
progressivePagination,
prettifyPageNumber,
NumberOrEllipsis,
} from '../utils/helpers/pagination';
import { ShlinkPaginator } from '../api/types';
interface PaginatorProps {
paginator?: ShlinkPaginator;
serverId: string;
currentQueryString?: string;
}
const Paginator = ({ paginator, serverId }: PaginatorProps) => {
const Paginator = ({ paginator, serverId, currentQueryString = '' }: PaginatorProps) => {
const { currentPage = 0, pagesCount = 0 } = paginator ?? {};
const urlForPage = (pageNumber: NumberOrEllipsis) =>
`/server/${serverId}/list-short-urls/${pageNumber}${currentQueryString}`;
if (pagesCount <= 1) {
return null;
@ -22,10 +31,7 @@ const Paginator = ({ paginator, serverId }: PaginatorProps) => {
disabled={pageIsEllipsis(pageNumber)}
active={currentPage === pageNumber}
>
<PaginationLink
tag={Link}
to={`/server/${serverId}/list-short-urls/${pageNumber}`}
>
<PaginationLink tag={Link} to={urlForPage(pageNumber)}>
{prettifyPageNumber(pageNumber)}
</PaginationLink>
</PaginationItem>
@ -34,19 +40,11 @@ const Paginator = ({ paginator, serverId }: PaginatorProps) => {
return (
<Pagination className="sticky-card-paginator" listClassName="flex-wrap justify-content-center mb-0">
<PaginationItem disabled={currentPage === 1}>
<PaginationLink
previous
tag={Link}
to={`/server/${serverId}/list-short-urls/${currentPage - 1}`}
/>
<PaginationLink previous tag={Link} to={urlForPage(currentPage - 1)} />
</PaginationItem>
{renderPages()}
<PaginationItem disabled={currentPage >= pagesCount}>
<PaginationLink
next
tag={Link}
to={`/server/${serverId}/list-short-urls/${currentPage + 1}`}
/>
<PaginationLink next tag={Link} to={urlForPage(currentPage + 1)} />
</PaginationItem>
</Pagination>
);

View file

@ -2,35 +2,43 @@ import { faTags as tagsIcon } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { isEmpty, pipe } from 'ramda';
import { parseISO } from 'date-fns';
import { RouteChildrenProps } from 'react-router-dom';
import SearchField from '../utils/SearchField';
import Tag from '../tags/helpers/Tag';
import { DateRangeSelector } from '../utils/dates/DateRangeSelector';
import { formatIsoDate } from '../utils/helpers/date';
import ColorGenerator from '../utils/services/ColorGenerator';
import { DateRange } from '../utils/dates/types';
import { ShortUrlsListParams } from './reducers/shortUrlsListParams';
import { ShortUrlListRouteParams, useShortUrlsQuery } from './helpers/hooks';
import './SearchBar.scss';
interface SearchBarProps {
listShortUrls: (params: ShortUrlsListParams) => void;
shortUrlsListParams: ShortUrlsListParams;
}
export type SearchBarProps = RouteChildrenProps<ShortUrlListRouteParams>;
const dateOrNull = (date?: string) => date ? parseISO(date) : null;
const SearchBar = (colorGenerator: ColorGenerator) => ({ listShortUrls, shortUrlsListParams }: SearchBarProps) => {
const selectedTags = shortUrlsListParams.tags ?? [];
const SearchBar = (colorGenerator: ColorGenerator) => (props: SearchBarProps) => {
const [{ search, tags, startDate, endDate }, toFirstPage ] = useShortUrlsQuery(props);
const selectedTags = tags?.split(',') ?? [];
const setDates = pipe(
({ startDate, endDate }: DateRange) => ({
startDate: formatIsoDate(startDate) ?? undefined,
endDate: formatIsoDate(endDate) ?? undefined,
}),
(dates) => listShortUrls({ ...shortUrlsListParams, ...dates }),
toFirstPage,
);
const setSearch = pipe(
(searchTerm: string) => isEmpty(searchTerm) ? undefined : searchTerm,
(search) => toFirstPage({ search }),
);
const removeTag = pipe(
(tag: string) => selectedTags.filter((selectedTag) => selectedTag !== tag),
(tagsList) => tagsList.length === 0 ? undefined : tagsList.join(','),
(tags) => toFirstPage({ tags }),
);
return (
<div className="search-bar-container">
<SearchField onChange={(searchTerm) => listShortUrls({ ...shortUrlsListParams, searchTerm })} />
<SearchField initialValue={search} onChange={setSearch} />
<div className="mt-3">
<div className="row">
@ -38,8 +46,8 @@ const SearchBar = (colorGenerator: ColorGenerator) => ({ listShortUrls, shortUrl
<DateRangeSelector
defaultText="All short URLs"
initialDateRange={{
startDate: dateOrNull(shortUrlsListParams.startDate),
endDate: dateOrNull(shortUrlsListParams.endDate),
startDate: dateOrNull(startDate),
endDate: dateOrNull(endDate),
}}
onDatesChange={setDates}
/>
@ -47,24 +55,12 @@ const SearchBar = (colorGenerator: ColorGenerator) => ({ listShortUrls, shortUrl
</div>
</div>
{!isEmpty(selectedTags) && (
{selectedTags.length > 0 && (
<h4 className="search-bar__selected-tag mt-3">
<FontAwesomeIcon icon={tagsIcon} className="search-bar__tags-icon" />
&nbsp;
{selectedTags.map((tag) => (
<Tag
colorGenerator={colorGenerator}
key={tag}
text={tag}
clearable
onClose={() => listShortUrls(
{
...shortUrlsListParams,
tags: selectedTags.filter((selectedTag) => selectedTag !== tag),
},
)}
/>
))}
{selectedTags.map((tag) =>
<Tag colorGenerator={colorGenerator} key={tag} text={tag} clearable onClose={() => removeTag(tag)} />)}
</h4>
)}
</div>

View file

@ -1,23 +0,0 @@
import { FC, useEffect, useState } from 'react';
import { ShortUrlsListProps } from './ShortUrlsList';
const ShortUrls = (SearchBar: FC, ShortUrlsList: FC<ShortUrlsListProps>) => (props: ShortUrlsListProps) => {
const { match } = props;
const { page = '1', serverId = '' } = match?.params ?? {};
const [ urlsListKey, setUrlsListKey ] = useState(`${serverId}_${page}`);
// Using a key on a component makes react to create a new instance every time the key changes
// Without it, pagination on the URL will not make the component to be refreshed
useEffect(() => {
setUrlsListKey(`${serverId}_${page}`);
}, [ serverId, page ]);
return (
<>
<div className="form-group"><SearchBar /></div>
<ShortUrlsList {...props} key={urlsListKey} />
</>
);
};
export default ShortUrls;

View file

@ -1,26 +1,21 @@
import { faCaretDown as caretDownIcon, faCaretUp as caretUpIcon } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { head, keys, values } from 'ramda';
import { FC, useEffect, useState } from 'react';
import { head, keys, pipe, values } from 'ramda';
import { FC, useEffect, useMemo, useState } from 'react';
import { RouteComponentProps } from 'react-router';
import { Card } from 'reactstrap';
import SortingDropdown from '../utils/SortingDropdown';
import { determineOrderDir, Order, OrderDir } from '../utils/helpers/ordering';
import { getServerId, SelectedServer } from '../servers/data';
import { boundToMercureHub } from '../mercure/helpers/boundToMercureHub';
import { parseQuery } from '../utils/helpers/query';
import { Topics } from '../mercure/helpers/Topics';
import { TableOrderIcon } from '../utils/table/TableOrderIcon';
import { ShlinkShortUrlsListParams } from '../api/types';
import { ShortUrlsList as ShortUrlsListState } from './reducers/shortUrlsList';
import { OrderableFields, ShortUrlsListParams, SORTABLE_FIELDS } from './reducers/shortUrlsListParams';
import { ShortUrlsTableProps } from './ShortUrlsTable';
import Paginator from './Paginator';
import { ShortUrlListRouteParams, useShortUrlsQuery } from './helpers/hooks';
interface RouteParams {
page: string;
serverId: string;
}
export interface ShortUrlsListProps extends RouteComponentProps<RouteParams> {
interface ShortUrlsListProps extends RouteComponentProps<ShortUrlListRouteParams> {
selectedServer: SelectedServer;
shortUrlsList: ShortUrlsListState;
listShortUrls: (params: ShortUrlsListParams) => void;
@ -30,54 +25,63 @@ export interface ShortUrlsListProps extends RouteComponentProps<RouteParams> {
type ShortUrlsOrder = Order<OrderableFields>;
const ShortUrlsList = (ShortUrlsTable: FC<ShortUrlsTableProps>) => boundToMercureHub(({
const ShortUrlsList = (ShortUrlsTable: FC<ShortUrlsTableProps>, SearchBar: FC) => boundToMercureHub(({
listShortUrls,
resetShortUrlParams,
shortUrlsListParams,
match,
location,
history,
shortUrlsList,
selectedServer,
}: ShortUrlsListProps) => {
const serverId = getServerId(selectedServer);
const { orderBy } = shortUrlsListParams;
const [ order, setOrder ] = useState<ShortUrlsOrder>({
field: orderBy && (head(keys(orderBy)) as OrderableFields),
dir: orderBy && head(values(orderBy)),
});
const [{ tags, search, startDate, endDate }, toFirstPage ] = useShortUrlsQuery({ history, match, location });
const selectedTags = useMemo(() => tags?.split(',') ?? [], [ tags ]);
const { pagination } = shortUrlsList?.shortUrls ?? {};
const refreshList = (extraParams: ShortUrlsListParams) => listShortUrls({ ...shortUrlsListParams, ...extraParams });
const refreshList = (extraParams: ShlinkShortUrlsListParams) => listShortUrls(
{ ...shortUrlsListParams, ...extraParams },
);
const handleOrderBy = (field?: OrderableFields, dir?: OrderDir) => {
setOrder({ field, dir });
refreshList({ orderBy: field ? { [field]: dir } : undefined });
};
const orderByColumn = (field: OrderableFields) => () =>
handleOrderBy(field, determineOrderDir(field, order.field, order.dir));
const renderOrderIcon = (field: OrderableFields) => order.dir && order.field === field &&
<FontAwesomeIcon icon={order.dir === 'ASC' ? caretUpIcon : caretDownIcon} className="ml-1" />;
const renderOrderIcon = (field: OrderableFields) => <TableOrderIcon currentOrder={order} field={field} />;
const addTag = pipe(
(newTag: string) => [ ...new Set([ ...selectedTags, newTag ]) ].join(','),
(tags) => toFirstPage({ tags }),
);
useEffect(() => resetShortUrlParams, []);
useEffect(() => {
const { tag } = parseQuery<{ tag?: string }>(location.search);
const tags = tag ? [ decodeURIComponent(tag) ] : shortUrlsListParams.tags;
refreshList({ page: match.params.page, tags, itemsPerPage: undefined });
return resetShortUrlParams;
}, []);
refreshList(
{ page: match.params.page, searchTerm: search, tags: selectedTags, itemsPerPage: undefined, startDate, endDate },
);
}, [ match.params.page, search, selectedTags, startDate, endDate ]);
return (
<>
<div className="mb-3"><SearchBar /></div>
<div className="d-block d-lg-none mb-3">
<SortingDropdown items={SORTABLE_FIELDS} order={order} onChange={handleOrderBy} />
</div>
<Card body className="pb-1">
<ShortUrlsTable
orderByColumn={orderByColumn}
renderOrderIcon={renderOrderIcon}
selectedServer={selectedServer}
shortUrlsList={shortUrlsList}
onTagClick={(tag) => refreshList({ tags: [ ...shortUrlsListParams.tags ?? [], tag ] })}
orderByColumn={orderByColumn}
renderOrderIcon={renderOrderIcon}
onTagClick={addTag}
/>
<Paginator paginator={pagination} serverId={getServerId(selectedServer)} />
<Paginator paginator={pagination} serverId={serverId} currentQueryString={location.search} />
</Card>
</>
);

View file

@ -35,7 +35,9 @@ export const ShortUrlsTable = (ShortUrlsRow: FC<ShortUrlsRowProps>) => ({
if (error) {
return (
<tr>
<td colSpan={6} className="text-center table-danger">Something went wrong while loading short URLs :(</td>
<td colSpan={6} className="text-center table-danger text-dark">
Something went wrong while loading short URLs :(
</td>
</tr>
);
}

View file

@ -0,0 +1,31 @@
import { RouteChildrenProps } from 'react-router-dom';
import { useMemo } from 'react';
import { isEmpty } from 'ramda';
import { parseQuery, stringifyQuery } from '../../utils/helpers/query';
type ServerIdRouteProps = RouteChildrenProps<{ serverId: string }>;
type ToFirstPage = (extra: Partial<ShortUrlsQuery>) => void;
export interface ShortUrlListRouteParams {
page: string;
serverId: string;
}
interface ShortUrlsQuery {
tags?: string;
search?: string;
startDate?: string;
endDate?: string;
}
export const useShortUrlsQuery = ({ history, location, match }: ServerIdRouteProps): [ShortUrlsQuery, ToFirstPage] => {
const query = useMemo(() => parseQuery<ShortUrlsQuery>(location.search), [ location ]);
const toFirstPageWithExtra = (extra: Partial<ShortUrlsQuery>) => {
const evolvedQuery = stringifyQuery({ ...query, ...extra });
const queryString = isEmpty(evolvedQuery) ? '' : `?${evolvedQuery}`;
history.push(`/server/${match?.params.serverId}/list-short-urls/1${queryString}`);
};
return [ query, toFirstPageWithExtra ];
};

View file

@ -5,7 +5,7 @@ import { CREATE_VISITS, CreateVisitsAction } from '../../visits/reducers/visitCr
import { buildReducer } from '../../utils/helpers/redux';
import { GetState } from '../../container/types';
import { ShlinkApiClientBuilder } from '../../api/services/ShlinkApiClientBuilder';
import { ShlinkShortUrlsResponse } from '../../api/types';
import { ShlinkShortUrlsListParams, ShlinkShortUrlsResponse } from '../../api/types';
import { DeleteShortUrlAction, SHORT_URL_DELETED } from './shortUrlDeletion';
import { ShortUrlsListParams } from './shortUrlsListParams';
import { CREATE_SHORT_URL, CreateShortUrlAction } from './shortUrlCreation';
@ -101,7 +101,7 @@ export default buildReducer<ShortUrlsList, ListShortUrlsCombinedAction>({
}, initialState);
export const listShortUrls = (buildShlinkApiClient: ShlinkApiClientBuilder) => (
params: ShortUrlsListParams = {},
params: ShlinkShortUrlsListParams = {},
) => async (dispatch: Dispatch, getState: GetState) => {
dispatch({ type: LIST_SHORT_URLS_START });
const { listShortUrls } = buildShlinkApiClient(getState);

View file

@ -19,10 +19,6 @@ export type OrderBy = Partial<Record<OrderableFields, OrderDir>>;
export interface ShortUrlsListParams {
page?: string;
itemsPerPage?: number;
tags?: string[];
searchTerm?: string;
startDate?: string;
endDate?: string;
orderBy?: OrderBy;
}

View file

@ -1,5 +1,4 @@
import Bottle from 'bottlejs';
import ShortUrls from '../ShortUrls';
import Bottle, { Decorator } from 'bottlejs';
import SearchBar from '../SearchBar';
import ShortUrlsList from '../ShortUrlsList';
import ShortUrlsRow from '../helpers/ShortUrlsRow';
@ -19,14 +18,11 @@ import { ShortUrlForm } from '../ShortUrlForm';
import { EditShortUrl } from '../EditShortUrl';
import { getShortUrlDetail } from '../reducers/shortUrlDetail';
const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
const provideServices = (bottle: Bottle, connect: ConnectDecorator, withRouter: Decorator) => {
// Components
bottle.serviceFactory('ShortUrls', ShortUrls, 'SearchBar', 'ShortUrlsList');
bottle.decorator('ShortUrls', connect([ 'shortUrlsList' ]));
bottle.serviceFactory('ShortUrlsList', ShortUrlsList, 'ShortUrlsTable');
bottle.serviceFactory('ShortUrlsList', ShortUrlsList, 'ShortUrlsTable', 'SearchBar');
bottle.decorator('ShortUrlsList', connect(
[ 'selectedServer', 'shortUrlsListParams', 'mercureInfo' ],
[ 'selectedServer', 'shortUrlsListParams', 'mercureInfo', 'shortUrlsList' ],
[ 'listShortUrls', 'resetShortUrlParams', 'createNewVisits', 'loadMercureInfo' ],
));
@ -56,7 +52,7 @@ const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
// Services
bottle.serviceFactory('SearchBar', SearchBar, 'ColorGenerator');
bottle.decorator('SearchBar', connect([ 'shortUrlsListParams' ], [ 'listShortUrls' ]));
bottle.decorator('SearchBar', withRouter);
// Actions
bottle.serviceFactory('listShortUrls', listShortUrls, 'buildShlinkApiClient');

View file

@ -61,7 +61,7 @@ const TagCard = (
<Collapse isOpen={displayed}>
<CardBody className="tag-card__body">
<Link
to={`/server/${serverId}/list-short-urls/1?tag=${encodeURIComponent(tag.tag)}`}
to={`/server/${serverId}/list-short-urls/1?tags=${encodeURIComponent(tag.tag)}`}
className="btn btn-outline-secondary btn-block d-flex justify-content-between align-items-center mb-1"
>
<span className="text-ellipsis"><FontAwesomeIcon icon={faLink} className="mr-2" />Short URLs</span>

View file

@ -1,12 +1,11 @@
import { FC, useEffect, useRef } from 'react';
import { splitEvery } from 'ramda';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCaretDown as caretDownIcon, faCaretUp as caretUpIcon } from '@fortawesome/free-solid-svg-icons';
import { RouteChildrenProps } from 'react-router';
import { SimpleCard } from '../utils/SimpleCard';
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 { TagsTableRowProps } from './TagsTableRow';
import './TagsTable.scss';
@ -27,8 +26,6 @@ export const TagsTable = (TagsTableRow: FC<TagsTableRowProps>) => (
const pages = splitEvery(TAGS_PER_PAGE, sortedTags);
const showPaginator = pages.length > 1;
const currentPage = pages[page - 1] ?? [];
const renderOrderIcon = (field: OrderableFields) => currentOrder.dir && currentOrder.field === field &&
<FontAwesomeIcon icon={currentOrder.dir === 'ASC' ? caretUpIcon : caretDownIcon} className="ml-1" />;
useEffect(() => {
!isFirstLoad.current && setPage(1);
@ -43,12 +40,14 @@ export const TagsTable = (TagsTableRow: FC<TagsTableRowProps>) => (
<table className="table table-hover mb-0">
<thead className="responsive-table__header">
<tr>
<th className="tags-table__header-cell" onClick={orderByColumn('tag')}>Tag {renderOrderIcon('tag')}</th>
<th className="tags-table__header-cell" onClick={orderByColumn('tag')}>
Tag <TableOrderIcon currentOrder={currentOrder} field="tag" />
</th>
<th className="tags-table__header-cell text-lg-right" onClick={orderByColumn('shortUrls')}>
Short URLs {renderOrderIcon('shortUrls')}
Short URLs <TableOrderIcon currentOrder={currentOrder} field="shortUrls" />
</th>
<th className="tags-table__header-cell text-lg-right" onClick={orderByColumn('visits')}>
Visits {renderOrderIcon('visits')}
Visits <TableOrderIcon currentOrder={currentOrder} field="visits" />
</th>
<th className="tags-table__header-cell" />
</tr>

View file

@ -32,7 +32,7 @@ export const TagsTableRow = (
<TagBullet tag={tag.tag} colorGenerator={colorGenerator} /> {tag.tag}
</th>
<td className="responsive-table__cell text-lg-right" data-th="Short URLs">
<Link to={`/server/${serverId}/list-short-urls/1?tag=${encodeURIComponent(tag.tag)}`}>
<Link to={`/server/${serverId}/list-short-urls/1?tags=${encodeURIComponent(tag.tag)}`}>
{prettify(tag.shortUrls)}
</Link>
</td>

View file

@ -12,10 +12,11 @@ interface SearchFieldProps {
className?: string;
large?: boolean;
noBorder?: boolean;
initialValue?: string;
}
const SearchField = ({ onChange, className, large = true, noBorder = false }: SearchFieldProps) => {
const [ searchTerm, setSearchTerm ] = useState('');
const SearchField = ({ onChange, className, large = true, noBorder = false, initialValue = '' }: SearchFieldProps) => {
const [ searchTerm, setSearchTerm ] = useState(initialValue);
const resetTimer = () => {
timer && clearTimeout(timer);

View file

@ -22,18 +22,16 @@ export interface DateRangeSelectorProps {
export const DateRangeSelector = (
{ onDatesChange, initialDateRange, defaultText, disabled }: DateRangeSelectorProps,
) => {
const [ activeInterval, setActiveInterval ] = useState(
rangeIsInterval(initialDateRange) ? initialDateRange : undefined,
);
const [ activeDateRange, setActiveDateRange ] = useState(
!rangeIsInterval(initialDateRange) ? initialDateRange : undefined,
);
const initialIntervalIsRange = rangeIsInterval(initialDateRange);
const [ activeInterval, setActiveInterval ] = useState(initialIntervalIsRange ? initialDateRange : undefined);
const [ activeDateRange, setActiveDateRange ] = useState(initialIntervalIsRange ? undefined : initialDateRange);
const updateDateRange = (dateRange: DateRange) => {
setActiveInterval(dateRangeIsEmpty(dateRange) ? 'all' : undefined);
setActiveDateRange(dateRange);
onDatesChange(dateRange);
};
const updateInterval = (dateInterval: DateInterval) => () => {
const updateInterval = (dateInterval: DateInterval) => {
setActiveInterval(dateInterval);
setActiveDateRange(undefined);
onDatesChange(intervalToDateRange(dateInterval));
@ -41,11 +39,7 @@ export const DateRangeSelector = (
return (
<DropdownBtn disabled={disabled} text={rangeOrIntervalToString(activeInterval ?? activeDateRange) ?? defaultText}>
<DateIntervalDropdownItems
allText={defaultText}
active={activeInterval}
onChange={(interval) => updateInterval(interval)()}
/>
<DateIntervalDropdownItems allText={defaultText} active={activeInterval} onChange={updateInterval} />
<DropdownItem divider />
<DropdownItem header>Custom:</DropdownItem>
<DropdownItem text>

View file

@ -0,0 +1,19 @@
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCaretDown as caretDownIcon, faCaretUp as caretUpIcon } from '@fortawesome/free-solid-svg-icons';
import { Order } from '../helpers/ordering';
interface TableOrderIconProps<T> {
currentOrder: Order<T>;
field: T;
className?: string;
}
export function TableOrderIcon<T extends string = string>(
{ currentOrder, field, className = 'ml-1' }: TableOrderIconProps<T>,
) {
if (!currentOrder.dir || currentOrder.field !== field) {
return null;
}
return <FontAwesomeIcon icon={currentOrder.dir === 'ASC' ? caretUpIcon : caretDownIcon} className={className} />;
}

View file

@ -1,12 +1,7 @@
import { useEffect, useMemo, useState, useRef } from 'react';
import classNames from 'classnames';
import { min, splitEvery } from 'ramda';
import {
faCaretDown as caretDownIcon,
faCaretUp as caretUpIcon,
faCheck as checkIcon,
faRobot as botIcon,
} from '@fortawesome/free-solid-svg-icons';
import { faCheck as checkIcon, faRobot as botIcon } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { UncontrolledTooltip } from 'reactstrap';
import SimplePaginator from '../common/SimplePaginator';
@ -16,6 +11,7 @@ import { prettify } from '../utils/helpers/numbers';
import { supportsBotVisits } from '../utils/helpers/features';
import { SelectedServer } from '../servers/data';
import { Time } from '../utils/Time';
import { TableOrderIcon } from '../utils/table/TableOrderIcon';
import { NormalizedOrphanVisit, NormalizedVisit } from './types';
import './VisitsTable.scss';
@ -72,12 +68,8 @@ const VisitsTable = ({
const orderByColumn = (field: OrderableFields) =>
() => setOrder({ field, dir: determineOrderDir(field, order.field, order.dir) });
const renderOrderIcon = (field: OrderableFields) => order.dir && order.field === field && (
<FontAwesomeIcon
icon={order.dir === 'ASC' ? caretUpIcon : caretDownIcon}
className="visits-table__header-icon"
/>
);
const renderOrderIcon = (field: OrderableFields) =>
<TableOrderIcon currentOrder={order} field={field} className="visits-table__header-icon" />;
useEffect(() => {
const listener = () => setIsMobileDevice(matchMobile());

View file

@ -1,28 +1,54 @@
import { shallow, ShallowWrapper } from 'enzyme';
import { PaginationItem } from 'reactstrap';
import { PaginationItem, PaginationLink } from 'reactstrap';
import { Mock } from 'ts-mockery';
import Paginator from '../../src/short-urls/Paginator';
import { ShlinkPaginator } from '../../src/api/types';
import { ELLIPSIS } from '../../src/utils/helpers/pagination';
describe('<Paginator />', () => {
let wrapper: ShallowWrapper;
const buildPaginator = (pagesCount?: number) => Mock.of<ShlinkPaginator>({ pagesCount, currentPage: 1 });
afterEach(() => wrapper?.unmount());
it('renders nothing if the number of pages is below 2', () => {
wrapper = shallow(<Paginator serverId="abc123" />);
it.each([
[ undefined ],
[ buildPaginator() ],
[ buildPaginator(0) ],
[ buildPaginator(1) ],
])('renders nothing if the number of pages is below 2', (paginator) => {
wrapper = shallow(<Paginator serverId="abc123" paginator={paginator} />);
expect(wrapper.text()).toEqual('');
});
it('renders previous, next and the list of pages', () => {
const paginator = {
currentPage: 1,
pagesCount: 5,
totalItems: 10,
};
const extraPagesPrevNext = 2;
const expectedItems = paginator.pagesCount + extraPagesPrevNext;
it.each([
[ buildPaginator(2), 4, 0 ],
[ buildPaginator(3), 5, 0 ],
[ buildPaginator(4), 6, 0 ],
[ buildPaginator(5), 7, 1 ],
[ buildPaginator(6), 7, 1 ],
[ buildPaginator(23), 7, 1 ],
])('renders previous, next and the list of pages, with ellipses when expected', (
paginator,
expectedPages,
expectedEllipsis,
) => {
wrapper = shallow(<Paginator serverId="abc123" paginator={paginator} />);
const items = wrapper.find(PaginationItem);
const ellipsis = items.filterWhere((item) => item.find(PaginationLink).prop('children') === ELLIPSIS);
expect(wrapper.find(PaginationItem)).toHaveLength(expectedItems);
expect(items).toHaveLength(expectedPages);
expect(ellipsis).toHaveLength(expectedEllipsis);
});
it('appends query string to all pages', () => {
const paginator = buildPaginator(3);
const currentQueryString = '?foo=bar';
wrapper = shallow(<Paginator serverId="abc123" paginator={paginator} currentQueryString={currentQueryString} />);
const links = wrapper.find(PaginationLink);
expect(links).toHaveLength(5);
links.forEach((link) => expect(link.prop('to')).toContain(currentQueryString));
});
});

View file

@ -1,73 +1,85 @@
import { shallow, ShallowWrapper } from 'enzyme';
import { Mock } from 'ts-mockery';
import searchBarCreator from '../../src/short-urls/SearchBar';
import { History, Location } from 'history';
import { match } from 'react-router';
import { formatISO } from 'date-fns';
import searchBarCreator, { SearchBarProps } from '../../src/short-urls/SearchBar';
import SearchField from '../../src/utils/SearchField';
import Tag from '../../src/tags/helpers/Tag';
import { DateRangeSelector } from '../../src/utils/dates/DateRangeSelector';
import ColorGenerator from '../../src/utils/services/ColorGenerator';
import { ShortUrlListRouteParams } from '../../src/short-urls/helpers/hooks';
describe('<SearchBar />', () => {
let wrapper: ShallowWrapper;
const listShortUrlsMock = jest.fn();
const SearchBar = searchBarCreator(Mock.all<ColorGenerator>());
const push = jest.fn();
const now = new Date();
const createWrapper = (props: Partial<SearchBarProps> = {}) => {
wrapper = shallow(
<SearchBar
history={Mock.of<History>({ push })}
location={Mock.of<Location>({ search: '' })}
match={Mock.of<match<ShortUrlListRouteParams>>({ params: { serverId: '1' } })}
{...props}
/>,
);
return wrapper;
};
afterEach(jest.clearAllMocks);
afterEach(() => wrapper?.unmount());
it('renders a SearchField', () => {
wrapper = shallow(<SearchBar shortUrlsListParams={{}} listShortUrls={listShortUrlsMock} />);
it('renders some children components SearchField', () => {
const wrapper = createWrapper();
expect(wrapper.find(SearchField)).toHaveLength(1);
});
it('renders a DateRangeSelector', () => {
wrapper = shallow(<SearchBar shortUrlsListParams={{}} listShortUrls={listShortUrlsMock} />);
expect(wrapper.find(DateRangeSelector)).toHaveLength(1);
});
it('renders no tags when the list of tags is empty', () => {
wrapper = shallow(<SearchBar shortUrlsListParams={{}} listShortUrls={listShortUrlsMock} />);
it.each([
[ 'tags=foo,bar,baz', 3 ],
[ 'tags=foo,baz', 2 ],
[ '', 0 ],
[ 'foo=bar', 0 ],
])('renders the proper amount of tags', (search, expectedTagComps) => {
const wrapper = createWrapper({ location: Mock.of<Location>({ search }) });
expect(wrapper.find(Tag)).toHaveLength(0);
expect(wrapper.find(Tag)).toHaveLength(expectedTagComps);
});
it('renders the proper amount of tags', () => {
const tags = [ 'foo', 'bar', 'baz' ];
wrapper = shallow(<SearchBar shortUrlsListParams={{ tags }} listShortUrls={listShortUrlsMock} />);
expect(wrapper.find(Tag)).toHaveLength(tags.length);
});
it('updates short URLs list when search field changes', () => {
wrapper = shallow(<SearchBar shortUrlsListParams={{}} listShortUrls={listShortUrlsMock} />);
it('redirects to first page when search field changes', () => {
const wrapper = createWrapper();
const searchField = wrapper.find(SearchField);
expect(listShortUrlsMock).not.toHaveBeenCalled();
searchField.simulate('change');
expect(listShortUrlsMock).toHaveBeenCalledTimes(1);
expect(push).not.toHaveBeenCalled();
searchField.simulate('change', 'search-term');
expect(push).toHaveBeenCalledWith('/server/1/list-short-urls/1?search=search-term');
});
it('updates short URLs list when a tag is removed', () => {
wrapper = shallow(
<SearchBar shortUrlsListParams={{ tags: [ 'foo' ] }} listShortUrls={listShortUrlsMock} />,
);
it('redirects to first page when a tag is removed', () => {
const wrapper = createWrapper({ location: Mock.of<Location>({ search: 'tags=foo,bar' }) });
const tag = wrapper.find(Tag).first();
expect(listShortUrlsMock).not.toHaveBeenCalled();
expect(push).not.toHaveBeenCalled();
tag.simulate('close');
expect(listShortUrlsMock).toHaveBeenCalledTimes(1);
expect(push).toHaveBeenCalledWith('/server/1/list-short-urls/1?tags=bar');
});
it('updates short URLs list when date range changes', () => {
wrapper = shallow(
<SearchBar shortUrlsListParams={{}} listShortUrls={listShortUrlsMock} />,
);
it.each([
[{ startDate: now }, `startDate=${encodeURIComponent(formatISO(now))}` ],
[{ endDate: now }, `endDate=${encodeURIComponent(formatISO(now))}` ],
[
{ startDate: now, endDate: now },
`startDate=${encodeURIComponent(formatISO(now))}&endDate=${encodeURIComponent(formatISO(now))}`,
],
])('redirects to first page when date range changes', (dates, expectedQuery) => {
const wrapper = createWrapper();
const dateRange = wrapper.find(DateRangeSelector);
expect(listShortUrlsMock).not.toHaveBeenCalled();
dateRange.simulate('datesChange', {});
expect(listShortUrlsMock).toHaveBeenCalledTimes(1);
expect(push).not.toHaveBeenCalled();
dateRange.simulate('datesChange', dates);
expect(push).toHaveBeenCalledWith(`/server/1/list-short-urls/1?${expectedQuery}`);
});
});

View file

@ -1,24 +0,0 @@
import { shallow, ShallowWrapper } from 'enzyme';
import { Mock } from 'ts-mockery';
import shortUrlsCreator from '../../src/short-urls/ShortUrls';
import { ShortUrlsListProps } from '../../src/short-urls/ShortUrlsList';
describe('<ShortUrls />', () => {
let wrapper: ShallowWrapper;
const SearchBar = () => null;
const ShortUrlsList = () => null;
beforeEach(() => {
const ShortUrls = shortUrlsCreator(SearchBar, ShortUrlsList);
wrapper = shallow(
<ShortUrls {...Mock.all<ShortUrlsListProps>()} />,
);
});
afterEach(() => wrapper.unmount());
it('wraps a SearchBar and ShortUrlsList', () => {
expect(wrapper.find(SearchBar)).toHaveLength(1);
expect(wrapper.find(ShortUrlsList)).toHaveLength(1);
});
});

View file

@ -1,19 +1,24 @@
import { shallow, ShallowWrapper } from 'enzyme';
import { ReactElement } from 'react';
import { Mock } from 'ts-mockery';
import shortUrlsListCreator, { ShortUrlsListProps } from '../../src/short-urls/ShortUrlsList';
import { History, Location } from 'history';
import { match } from 'react-router';
import shortUrlsListCreator from '../../src/short-urls/ShortUrlsList';
import { ShortUrl } 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 { OrderableFields, OrderBy } from '../../src/short-urls/reducers/shortUrlsListParams';
import Paginator from '../../src/short-urls/Paginator';
import { ReachableServer } from '../../src/servers/data';
import { ShortUrlListRouteParams } from '../../src/short-urls/helpers/hooks';
describe('<ShortUrlsList />', () => {
let wrapper: ShallowWrapper;
const ShortUrlsTable = () => null;
const SearchBar = () => null;
const listShortUrlsMock = jest.fn();
const resetShortUrlParamsMock = jest.fn();
const push = jest.fn();
const shortUrlsList = Mock.of<ShortUrlsListModel>({
shortUrls: {
data: [
@ -26,22 +31,18 @@ describe('<ShortUrlsList />', () => {
],
},
});
const ShortUrlsList = shortUrlsListCreator(ShortUrlsTable);
const ShortUrlsList = shortUrlsListCreator(ShortUrlsTable, SearchBar);
const createWrapper = (orderBy: OrderBy = {}) => shallow(
<ShortUrlsList
{...Mock.all<ShortUrlsListProps>()}
{...Mock.of<MercureBoundProps>({ mercureInfo: { loading: true } })}
listShortUrls={listShortUrlsMock}
resetShortUrlParams={resetShortUrlParamsMock}
shortUrlsListParams={{
page: '1',
tags: [ 'test tag' ],
searchTerm: 'example.com',
orderBy,
}}
match={{ params: {} } as any}
location={{} as any}
resetShortUrlParams={jest.fn()}
shortUrlsListParams={{ page: '1', orderBy }}
match={Mock.of<match<ShortUrlListRouteParams>>({ params: {} })}
location={Mock.of<Location>({ search: '?tags=test%20tag&search=example.com' })}
shortUrlsList={shortUrlsList}
history={Mock.of<History>({ push })}
selectedServer={Mock.of<ReachableServer>({ id: '1' })}
/>,
).dive(); // Dive is needed as this component is wrapped in a HOC
@ -56,6 +57,11 @@ describe('<ShortUrlsList />', () => {
expect(wrapper.find(ShortUrlsTable)).toHaveLength(1);
expect(wrapper.find(SortingDropdown)).toHaveLength(1);
expect(wrapper.find(Paginator)).toHaveLength(1);
expect(wrapper.find(SearchBar)).toHaveLength(1);
});
it('passes current query to paginator', () => {
expect(wrapper.find(Paginator).prop('currentQueryString')).toEqual('?tags=test%20tag&search=example.com');
});
it('gets list refreshed every time a tag is clicked', () => {
@ -63,32 +69,26 @@ describe('<ShortUrlsList />', () => {
wrapper.find(ShortUrlsTable).simulate('tagClick', 'bar');
wrapper.find(ShortUrlsTable).simulate('tagClick', 'baz');
expect(listShortUrlsMock).toHaveBeenCalledTimes(3);
expect(listShortUrlsMock).toHaveBeenNthCalledWith(1, expect.objectContaining({
tags: [ 'test tag', 'foo' ],
}));
expect(listShortUrlsMock).toHaveBeenNthCalledWith(2, expect.objectContaining({
tags: [ 'test tag', 'bar' ],
}));
expect(listShortUrlsMock).toHaveBeenNthCalledWith(3, expect.objectContaining({
tags: [ 'test tag', 'baz' ],
}));
expect(push).toHaveBeenCalledTimes(3);
expect(push).toHaveBeenNthCalledWith(1, expect.stringContaining(`tags=${encodeURIComponent('test tag,foo')}`));
expect(push).toHaveBeenNthCalledWith(2, expect.stringContaining(`tags=${encodeURIComponent('test tag,bar')}`));
expect(push).toHaveBeenNthCalledWith(3, expect.stringContaining(`tags=${encodeURIComponent('test tag,baz')}`));
});
it('invokes order icon rendering', () => {
const renderIcon = (field: OrderableFields) =>
(wrapper.find(ShortUrlsTable).prop('renderOrderIcon') as (field: OrderableFields) => ReactElement | null)(field);
(wrapper.find(ShortUrlsTable).prop('renderOrderIcon') as (field: OrderableFields) => ReactElement)(field);
expect(renderIcon('visits')).toEqual(undefined);
expect(renderIcon('visits').props.currentOrder).toEqual({});
wrapper.find(SortingDropdown).simulate('change', 'visits');
expect(renderIcon('visits')).toEqual(undefined);
expect(renderIcon('visits').props.currentOrder).toEqual({ field: 'visits' });
wrapper.find(SortingDropdown).simulate('change', 'visits', 'ASC');
expect(renderIcon('visits')).not.toEqual(undefined);
expect(renderIcon('visits').props.currentOrder).toEqual({ field: 'visits', dir: 'ASC' });
});
it('handles order by through table', () => {
it('handles order through table', () => {
const orderByColumn: (field: OrderableFields) => Function = wrapper.find(ShortUrlsTable).prop('orderByColumn');
orderByColumn('visits')();
@ -107,7 +107,7 @@ describe('<ShortUrlsList />', () => {
}));
});
it('handles order by through dropdown', () => {
it('handles order through dropdown', () => {
expect(wrapper.find(SortingDropdown).prop('order')).toEqual({});
wrapper.find(SortingDropdown).simulate('change', 'visits', 'ASC');

View file

@ -30,8 +30,8 @@ describe('<TagCard />', () => {
afterEach(jest.resetAllMocks);
it.each([
[ 'ssr', '/server/1/list-short-urls/1?tag=ssr' ],
[ 'ssr-&-foo', '/server/1/list-short-urls/1?tag=ssr-%26-foo' ],
[ 'ssr', '/server/1/list-short-urls/1?tags=ssr' ],
[ 'ssr-&-foo', '/server/1/list-short-urls/1?tags=ssr-%26-foo' ],
])('shows a TagBullet and a link to the list filtering by the tag', (tag, expectedLink) => {
const wrapper = createWrapper(tag);
const links = wrapper.find(Link);
@ -61,7 +61,7 @@ describe('<TagCard />', () => {
const links = wrapper.find(Link);
expect(links).toHaveLength(2);
expect(links.at(0).prop('to')).toEqual('/server/1/list-short-urls/1?tag=ssr');
expect(links.at(0).prop('to')).toEqual('/server/1/list-short-urls/1?tags=ssr');
expect(links.at(0).text()).toContain('48');
expect(links.at(1).prop('to')).toEqual('/server/1/tag/ssr/visits');
expect(links.at(1).text()).toContain('23,257');

View file

@ -35,7 +35,7 @@ describe('<TagsTableRow />', () => {
const visitsLink = links.last();
expect(shortUrlsLink.prop('children')).toEqual(expectedShortUrls);
expect(shortUrlsLink.prop('to')).toEqual(`/server/abc123/list-short-urls/1?tag=${encodeURIComponent('foo&bar')}`);
expect(shortUrlsLink.prop('to')).toEqual(`/server/abc123/list-short-urls/1?tags=${encodeURIComponent('foo&bar')}`);
expect(visitsLink.prop('children')).toEqual(expectedVisits);
expect(visitsLink.prop('to')).toEqual('/server/abc123/tag/foo&bar/visits');
});

View file

@ -0,0 +1,47 @@
import { shallow, ShallowWrapper } from 'enzyme';
import { faCaretDown as caretDownIcon, faCaretUp as caretUpIcon } from '@fortawesome/free-solid-svg-icons';
import { TableOrderIcon } from '../../../src/utils/table/TableOrderIcon';
import { OrderDir } from '../../../src/utils/helpers/ordering';
describe('<TableOrderIcon />', () => {
let wrapper: ShallowWrapper;
const createWrapper = (field: string, currentDir?: OrderDir, className?: string) => {
wrapper = shallow(
<TableOrderIcon currentOrder={{ dir: currentDir, field: 'foo' }} field={field} className={className} />,
);
return wrapper;
};
afterEach(() => wrapper?.unmount());
it.each([
[ 'foo', undefined ],
[ 'bar', 'DESC' as OrderDir ],
[ 'bar', 'ASC' as OrderDir ],
])('renders empty when not all conditions are met', (field, dir) => {
const wrapper = createWrapper(field, dir);
expect(wrapper.html()).toEqual(null);
});
it.each([
[ 'DESC' as OrderDir, caretDownIcon ],
[ 'ASC' as OrderDir, caretUpIcon ],
])('renders an icon when all conditions are met', (dir, expectedIcon) => {
const wrapper = createWrapper('foo', dir);
expect(wrapper.html()).not.toEqual(null);
expect(wrapper.prop('icon')).toEqual(expectedIcon);
});
it.each([
[ undefined, 'ml-1' ],
[ 'foo', 'foo' ],
[ 'bar', 'bar' ],
])('renders expected classname', (className, expectedClassName) => {
const wrapper = createWrapper('foo', 'ASC', className);
expect(wrapper.prop('className')).toEqual(expectedClassName);
});
});