mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2024-10-23 21:16:11 +03:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #356 from acelaya-forks/feature/welcome-ui

Browse source 
Feature/welcome UI
This commit is contained in:
Alejandro Celaya 2020-12-20 12:39:18 +01:00 committed by GitHub
commit 214b952e84
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
23 changed files with 264 additions and 73 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
CHANGELOG.md
View file

@ -19,6 +19,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
* Date filtering can be now selected through relative times (last 7 days, last 30 days, etc) or absolute dates using date pickers.
* Only the visits for last 30 days are loaded by default. You can change that at any moment if required.
* [#355](https://github.com/shlinkio/shlink-web-client/issues/355) Improved home page, fixing also its scrolling behavior for mobile devices.
### Changed
* [#267](https://github.com/shlinkio/shlink-web-client/issues/267) Added some subtle but important improvements on UI/UX.
* [#352](https://github.com/shlinkio/shlink-web-client/issues/352) Moved from Scrutinizer to Codecov as the code coverage backend.

6
package-lock.json generated
View file

@ -23075,9 +23075,9 @@
"dev": true
},
"react-external-link": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/react-external-link/-/react-external-link-1.1.1.tgz",
"integrity": "sha512-e2WnTWkg81cuqxmDfjOalliAE20+Y/uD+lserN4uuwkwu+ciGLB3BMz4m7GnXh2+TowIi4sLtCL7zr7aDnIaqA=="
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/react-external-link/-/react-external-link-1.2.0.tgz",
"integrity": "sha512-6Lm0pD6rxrvZGVrWIWda809cAtrIlM3fDsKh9y5bKEVpOI0FTO2nTnxaqEood8+rw3svHJgpJGN6lZHO69ZTAQ=="
},
"react-is": {
"version": "16.7.0",

2
package.json
View file

@ -46,7 +46,7 @@
"react-copy-to-clipboard": "^5.0.2",
"react-datepicker": "^3.3.0",
"react-dom": "^17.0.1",
"react-external-link": "^1.1.1",
"react-external-link": "^1.2.0",
"react-leaflet": "^3.0.2",
"react-moment": "^1.0.0",
"react-redux": "^7.2.2",

35
src/common/Home.scss
View file

@ -1,18 +1,41 @@
@import '../utils/base';
@import '../utils/mixins/vertical-align';
.home {
text-align: center;
height: calc(100vh - #{$headerHeight} - #{($footer-height + $footer-margin)});
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
position: relative;
padding-top: 15px;
@media (min-width: $mdMin) {
padding-top: 0;
height: calc(100vh - #{$headerHeight} - #{($footer-height + $footer-margin)});
}
}
.home__logo {
@include vertical-align();
}
.home__main-card {
margin: 0 auto;
max-width: 720px;
@media (min-width: $mdMin) {
@include vertical-align();
}
}
.home__title {
text-align: center;
font-size: 1.75rem;
margin: 0;
@media (min-width: $mdMin) {
font-size: 2.2rem;
}
}
.home__servers-container {
@media (min-width: $mdMin) {
border-left: 1px solid rgba(0, 0, 0, .125);
}
}

34
src/common/Home.tsx
View file

@ -1,8 +1,11 @@
import { isEmpty, values } from 'ramda';
import { Link } from 'react-router-dom';
import { Card, Row } from 'reactstrap';
import { ExternalLink } from 'react-external-link';
import ServersListGroup from '../servers/ServersListGroup';
import './Home.scss';
import { ServersMap } from '../servers/data';
import { ShlinkLogo } from './img/ShlinkLogo';
export interface HomeProps {
servers: ServersMap;
@ -14,11 +17,32 @@ const Home = ({ servers }: HomeProps) => {
return (
<div className="home">
<h1 className="home__title">Welcome to Shlink</h1>
<ServersListGroup servers={serversList}>
{hasServers && <span>Please, select a server.</span>}
{!hasServers && <span>Please, <Link to="/server/create">add a server</Link>.</span>}
</ServersListGroup>
<Card className="home__main-card">
<Row noGutters>
<div className="col-md-5 d-none d-md-block">
<div className="p-4">
<ShlinkLogo />
</div>
</div>
<div className="col-md-7 home__servers-container">
<div className="p-4">
<h1 className="home__title">Welcome!</h1>
</div>
<ServersListGroup embedded servers={serversList}>
{!hasServers && (
<div className="p-4">
<p>This application will help you to manage your Shlink servers.</p>
<p>To start, please, <Link to="/server/create">add your first server</Link>.</p>
<p className="m-0">
You still don&lsquo;t have a Shlink server?
Learn how to <ExternalLink href="https://shlink.io/documentation">get started</ExternalLink>.
</p>
</div>
)}
</ServersListGroup>
</div>
</Row>
</Card>
</div>
);
};

4
src/common/MainHeader.tsx
View file

@ -6,7 +6,7 @@ import { Collapse, Nav, Navbar, NavbarBrand, NavbarToggler, NavItem, NavLink } f
import classNames from 'classnames';
import { RouteComponentProps } from 'react-router';
import { useToggle } from '../utils/helpers/hooks';
import shlinkLogo from './shlink-logo-white.png';
import { ShlinkLogo } from './img/ShlinkLogo';
import './MainHeader.scss';
const MainHeader = (ServersDropdown: FC) => ({ location }: RouteComponentProps) => {
@ -21,7 +21,7 @@ const MainHeader = (ServersDropdown: FC) => ({ location }: RouteComponentProps)
return (
<Navbar color="primary" dark fixed="top" className="main-header" expand="md">
<NavbarBrand tag={Link} to="/">
<img src={shlinkLogo} alt="Shlink" className="main-header__brand-logo" /> Shlink
<ShlinkLogo className="main-header__brand-logo" color="white" /> Shlink
</NavbarBrand>
<NavbarToggler onClick={toggleOpen}>

25
src/common/img/ShlinkLogo.tsx Normal file
View file

@ -0,0 +1,25 @@
import { MAIN_COLOR } from '../../utils/theme';
export interface ShlinkLogoProps {
color?: string;
className?: string;
}
export const ShlinkLogo = ({ color = MAIN_COLOR, className }: ShlinkLogoProps) => (
<svg className={className} viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg">
<g fill={color}>
<path
d=" M 23.71 85.08 C 17.22 49.81 49.44 14.86 85.08 18.12 C 118.83 19.21 145.72 53.33 139.45 86.37 C 155.64 102.30 171.32 118.83 187.87 134.36 C 198.32 111.73 208.84 89.12 219.57 66.62 C 226.05 53.84 243.47 48.74 255.73 56.27 C 263.76 62.10 270.34 69.69 277.25 76.75 C 286.28 86.61 285.72 102.89 276.31 112.31 C 223.38 165.37 170.38 218.37 117.35 271.34 C 107.72 280.99 91.01 281.25 81.11 271.86 C 74.39 264.94 66.82 258.69 61.24 250.77 C 53.72 238.52 58.85 221.07 71.64 214.62 C 94.11 203.87 116.72 193.38 139.33 182.91 C 123.81 166.36 107.30 150.68 91.37 134.49 C 60.20 140.28 27.37 116.78 23.71 85.08 Z"
/>
<path
d=" M 205.21 201.23 C 225.32 181.36 260.88 181.11 281.14 200.86 C 299.25 218.75 317.37 236.65 335.10 254.93 C 356.73 278.01 352.01 318.70 326.03 336.56 C 320.07 330.47 313.73 324.65 308.12 318.28 C 323.86 309.39 328.76 286.18 316.63 272.39 C 301.73 256.95 286.30 242.03 271.24 226.75 C 264.49 219.65 256.80 212.00 246.37 211.52 C 224.65 208.64 205.52 233.36 214.49 253.58 C 221.09 266.81 234.22 275.12 243.62 286.24 C 240.43 295.96 238.09 306.13 238.29 316.46 C 225.55 304.29 213.16 291.73 200.89 279.09 C 180.97 257.57 183.10 220.45 205.21 201.23 Z"
/>
<path
d=" M 273.90 352.07 C 252.28 328.99 256.98 288.31 282.96 270.46 C 288.93 276.54 295.26 282.36 300.88 288.72 C 285.14 297.62 280.23 320.82 292.38 334.61 C 307.27 350.05 322.70 364.96 337.75 380.25 C 344.51 387.35 352.20 395.00 362.64 395.48 C 384.35 398.37 403.49 373.64 394.51 353.42 C 387.92 340.18 374.78 331.88 365.38 320.76 C 368.56 311.04 370.91 300.86 370.71 290.54 C 383.45 302.70 395.84 315.27 408.11 327.91 C 428.03 349.43 425.90 386.55 403.78 405.77 C 383.68 425.64 348.13 425.89 327.86 406.14 C 309.75 388.25 291.60 370.37 273.90 352.07 Z"
/>
<path
d=" M 422.11 403.83 C 431.96 394.07 441.60 384.06 451.66 374.51 C 460.90 383.74 471.89 392.70 474.89 406.11 C 480.16 429.97 484.08 454.13 488.76 478.12 C 490.00 483.41 484.47 488.29 479.35 486.63 C 454.66 481.52 429.55 478.12 405.14 471.84 C 393.17 467.97 385.20 457.75 376.55 449.27 C 386.39 439.49 396.13 429.60 406.06 419.91 C 416.37 433.45 435.74 414.00 422.11 403.83 Z"
/>
</g>
</svg>
);

BIN
src/common/shlink-logo-white.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 8.7 KiB

10
src/servers/Overview.tsx
View file

@ -1,6 +1,6 @@
import { FC, useEffect } from 'react';
import { Card, CardBody, CardHeader, CardText, CardTitle } from 'reactstrap';
import { Link } from 'react-router-dom';
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';
@ -40,6 +40,7 @@ export const Overview = (
const { loading: loadingTags } = tagsList;
const { loading: loadingVisits, visitsCount } = visitsOverview;
const serverId = isServerWithId(selectedServer) ? selectedServer.id : '';
const history = useHistory();
useEffect(() => {
listShortUrls({ itemsPerPage: 5, orderBy: { dateCreated: 'DESC' } });
@ -95,7 +96,12 @@ export const Overview = (
<Link className="float-right" to={`/server/${serverId}/list-short-urls/1`}>See all &raquo;</Link>
</CardHeader>
<CardBody>
<ShortUrlsTable shortUrlsList={shortUrlsList} selectedServer={selectedServer} className="mb-0" />
<ShortUrlsTable
shortUrlsList={shortUrlsList}
selectedServer={selectedServer}
className="mb-0"
onTagClick={(tag) => history.push(`/server/${serverId}/list-short-urls/1?tag=${tag}`)}
/>
</CardBody>
</Card>
</>

28
src/servers/ServersListGroup.scss
View file

@ -1,7 +1,12 @@
@import '../utils/base';
@import '../utils/mixins/vertical-align';
@import '../utils/mixins/thin-scroll';
.servers-list__list-group {
.servers-list__list-group.servers-list__list-group {
width: 100%;
}
.servers-list__list-group:not(.servers-list__list-group--embedded) {
max-width: 400px;
box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
}
@ -12,8 +17,29 @@
padding: .75rem 2.5rem .75rem 1rem;
}
.servers-list__server-item:hover {
background-color: $lightColor;
}
.servers-list__server-item-icon {
@include vertical-align();
right: 1rem;
}
.servers-list__list-group--embedded.servers-list__list-group--embedded {
border-radius: 0;
border-top: 1px solid rgba(0, 0, 0, .125);
@media (min-width: $mdMin) {
max-height: 220px;
overflow-x: auto;
@include thin-scroll();
}
.servers-list__server-item {
border: none;
border-bottom: 1px solid rgba(0, 0, 0, .125);
}
}

12
src/servers/ServersListGroup.tsx
View file

@ -1,6 +1,7 @@
import { FC } from 'react';
import { ListGroup, ListGroupItem } from 'reactstrap';
import { Link } from 'react-router-dom';
import classNames from 'classnames';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faChevronRight as chevronIcon } from '@fortawesome/free-solid-svg-icons';
import { ServerWithId } from './data';
@ -8,6 +9,7 @@ import './ServersListGroup.scss';
interface ServersListGroup {
servers: ServerWithId[];
embedded?: boolean;
}
const ServerListItem = ({ id, name }: { id: string; name: string }) => (
@ -17,13 +19,13 @@ const ServerListItem = ({ id, name }: { id: string; name: string }) => (
</ListGroupItem>
);
const ServersListGroup: FC<ServersListGroup> = ({ servers, children }) => (
const ServersListGroup: FC<ServersListGroup> = ({ servers, children, embedded = false }) => (
<>
<div className="container">
<h5>{children}</h5>
</div>
{children && <h5 className="mb-md-3">{children}</h5>}
{servers.length > 0 && (
<ListGroup className="servers-list__list-group mt-md-3">
<ListGroup
className={classNames('servers-list__list-group', { 'servers-list__list-group--embedded': embedded })}
>
{servers.map(({ id, name }) => <ServerListItem key={id} id={id} name={name} />)}
</ListGroup>
)}

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

@ -87,9 +87,8 @@ const ShortUrlsList = (ShortUrlsTable: FC<ShortUrlsTableProps>) => boundToMercur
orderByColumn={orderByColumn}
renderOrderIcon={renderOrderIcon}
selectedServer={selectedServer}
refreshList={refreshList}
shortUrlsListParams={shortUrlsListParams}
shortUrlsList={shortUrlsList}
onTagClick={(tag) => refreshList({ tags: [ ...shortUrlsListParams.tags ?? [], tag ] })}
/>
</>
);

11
src/short-urls/ShortUrlsTable.tsx
View file

@ -4,7 +4,7 @@ import classNames from 'classnames';
import { SelectedServer } from '../servers/data';
import { ShortUrlsList as ShortUrlsListState } from './reducers/shortUrlsList';
import { ShortUrlsRowProps } from './helpers/ShortUrlsRow';
import { OrderableFields, ShortUrlsListParams } from './reducers/shortUrlsListParams';
import { OrderableFields } from './reducers/shortUrlsListParams';
import './ShortUrlsTable.scss';
export interface ShortUrlsTableProps {
@ -12,8 +12,7 @@ export interface ShortUrlsTableProps {
renderOrderIcon?: (column: OrderableFields) => ReactNode;
shortUrlsList: ShortUrlsListState;
selectedServer: SelectedServer;
refreshList?: Function;
shortUrlsListParams?: ShortUrlsListParams;
onTagClick?: (tag: string) => void;
className?: string;
}
@ -21,8 +20,7 @@ export const ShortUrlsTable = (ShortUrlsRow: FC<ShortUrlsRowProps>) => ({
orderByColumn,
renderOrderIcon,
shortUrlsList,
refreshList,
shortUrlsListParams,
onTagClick,
selectedServer,
className,
}: ShortUrlsTableProps) => {
@ -54,8 +52,7 @@ export const ShortUrlsTable = (ShortUrlsRow: FC<ShortUrlsRowProps>) => ({
key={shortUrl.shortUrl}
shortUrl={shortUrl}
selectedServer={selectedServer}
refreshList={refreshList}
shortUrlsListParams={shortUrlsListParams}
onTagClick={onTagClick}
/>
));
};

10
src/short-urls/helpers/ShortUrlsRow.tsx
View file

@ -5,7 +5,6 @@ import { ExternalLink } from 'react-external-link';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCopy as copyIcon } from '@fortawesome/free-regular-svg-icons';
import CopyToClipboard from 'react-copy-to-clipboard';
import { ShortUrlsListParams } from '../reducers/shortUrlsListParams';
import ColorGenerator from '../../utils/services/ColorGenerator';
import { StateFlagTimeout } from '../../utils/helpers/hooks';
import Tag from '../../tags/helpers/Tag';
@ -16,8 +15,7 @@ import { ShortUrlsRowMenuProps } from './ShortUrlsRowMenu';
import './ShortUrlsRow.scss';
export interface ShortUrlsRowProps {
refreshList?: Function;
shortUrlsListParams?: ShortUrlsListParams;
onTagClick?: (tag: string) => void;
selectedServer: SelectedServer;
shortUrl: ShortUrl;
}
@ -26,7 +24,7 @@ const ShortUrlsRow = (
ShortUrlsRowMenu: FC<ShortUrlsRowMenuProps>,
colorGenerator: ColorGenerator,
useStateFlagTimeout: StateFlagTimeout,
) => ({ shortUrl, selectedServer, refreshList, shortUrlsListParams }: ShortUrlsRowProps) => {
) => ({ shortUrl, selectedServer, onTagClick }: ShortUrlsRowProps) => {
const [ copiedToClipboard, setCopiedToClipboard ] = useStateFlagTimeout();
const [ active, setActive ] = useStateFlagTimeout(false, 500);
const isFirstRun = useRef(true);
@ -36,14 +34,12 @@ const ShortUrlsRow = (
return <i className="indivisible"><small>No tags</small></i>;
}
const selectedTags = shortUrlsListParams?.tags ?? [];
return tags.map((tag) => (
<Tag
colorGenerator={colorGenerator}
key={tag}
text={tag}
onClick={() => refreshList?.({ tags: [ ...selectedTags, tag ] })}
onClick={() => onTagClick?.(tag)}
/>
));
};

16
src/utils/mixins/thin-scroll.scss Normal file
View file

@ -0,0 +1,16 @@
@mixin thin-scroll() {
/* Forefox scrollbar */
scrollbar-color: rgba(0, 0, 0, .2) #f5f5f5;
scrollbar-width: thin;
/* Chrome webkit scrollbar */
&::-webkit-scrollbar {
width: 6px;
background-color: #f5f5f5;
}
&::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, .2);
border-radius: .5rem;
}
}

7
src/utils/theme/index.ts Normal file
View file

@ -0,0 +1,7 @@
export const MAIN_COLOR = '#4696e5';
export const MAIN_COLOR_ALPHA = 'rgba(70, 150, 229, 0.4)';
export const HIGHLIGHTED_COLOR = '#F77F28';
export const HIGHLIGHTED_COLOR_ALPHA = 'rgba(247, 127, 40, 0.4)';

9
src/visits/helpers/DefaultChart.tsx
View file

@ -7,6 +7,7 @@ import { fillTheGaps } from '../../utils/helpers/visits';
import { Stats } from '../types';
import { prettify } from '../../utils/helpers/numbers';
import { pointerOnHover, renderDoughnutChartLabel, renderNonDoughnutChartLabel } from '../../utils/helpers/charts';
import { HIGHLIGHTED_COLOR, HIGHLIGHTED_COLOR_ALPHA, MAIN_COLOR, MAIN_COLOR_ALPHA } from '../../utils/theme';
import './DefaultChart.scss';
export interface DefaultChartProps {
@ -33,7 +34,7 @@ const generateGraphData = (
title,
label: highlightedData ? 'Non-selected' : 'Visits',
data,
backgroundColor: isBarChart ? 'rgba(70, 150, 229, 0.4)' : [
backgroundColor: isBarChart ? MAIN_COLOR_ALPHA : [
'#97BBCD',
'#F7464A',
'#46BFBD',
@ -46,15 +47,15 @@ const generateGraphData = (
'#DCDCDC',
'#463730',
],
borderColor: isBarChart ? 'rgba(70, 150, 229, 1)' : 'white',
borderColor: isBarChart ? MAIN_COLOR : 'white',
borderWidth: 2,
},
highlightedData && {
title,
label: highlightedLabel ?? 'Selected',
data: highlightedData,
backgroundColor: 'rgba(247, 127, 40, 0.4)',
borderColor: '#F77F28',
backgroundColor: HIGHLIGHTED_COLOR_ALPHA,
borderColor: HIGHLIGHTED_COLOR,
borderWidth: 2,
},
].filter(Boolean) as ChartDataSets[],

5
src/visits/helpers/LineChartCard.tsx
View file

@ -19,6 +19,7 @@ import { rangeOf } from '../../utils/utils';
import ToggleSwitch from '../../utils/ToggleSwitch';
import { prettify } from '../../utils/helpers/numbers';
import { pointerOnHover, renderNonDoughnutChartLabel } from '../../utils/helpers/charts';
import { HIGHLIGHTED_COLOR, MAIN_COLOR } from '../../utils/theme';
import './LineChartCard.scss';
interface LineChartCardProps {
@ -173,8 +174,8 @@ const LineChartCard = (
const data: ChartData = {
labels,
datasets: [
generateDataset(groupedVisits, 'Visits', '#4696e5'),
highlightedVisits.length > 0 && generateDataset(groupedHighlighted, highlightedLabel, '#F77F28'),
generateDataset(groupedVisits, 'Visits', MAIN_COLOR),
highlightedVisits.length > 0 && generateDataset(groupedHighlighted, highlightedLabel, HIGHLIGHTED_COLOR),
].filter(Boolean) as ChartDataSets[],
};
const options: ChartOptions = {

26
test/common/Home.test.tsx
View file

@ -2,6 +2,7 @@ import { shallow, ShallowWrapper } from 'enzyme';
import { Mock } from 'ts-mockery';
import Home, { HomeProps } from '../../src/common/Home';
import { ServerWithId } from '../../src/servers/data';
import { ShlinkLogo } from '../../src/common/img/ShlinkLogo';
describe('<Home />', () => {
let wrapped: ShallowWrapper;
@ -19,21 +20,26 @@ describe('<Home />', () => {
afterEach(() => wrapped?.unmount());
it('shows link to create server when no servers exist', () => {
it('renders logo and title', () => {
const wrapped = createComponent();
expect(wrapped.find('Link')).toHaveLength(1);
expect(wrapped.find(ShlinkLogo)).toHaveLength(1);
expect(wrapped.find('.home__title')).toHaveLength(1);
});
it('asks to select a server when servers exist', () => {
const servers = {
'1a': Mock.of<ServerWithId>({ name: 'foo', id: '1' }),
'2b': Mock.of<ServerWithId>({ name: 'bar', id: '2' }),
};
it.each([
[
{
'1a': Mock.of<ServerWithId>({ name: 'foo', id: '1' }),
'2b': Mock.of<ServerWithId>({ name: 'bar', id: '2' }),
},
0,
],
[{}, 3 ],
])('shows link to create or set-up server only when no servers exist', (servers, expectedParagraphs) => {
const wrapped = createComponent({ servers });
const span = wrapped.find('span');
const p = wrapped.find('p');
expect(span).toHaveLength(1);
expect(span.text()).toContain('Please, select a server.');
expect(p).toHaveLength(expectedParagraphs);
});
});

34
test/common/img/ShlinkLogo.test.tsx Normal file
View file

@ -0,0 +1,34 @@
import { shallow, ShallowWrapper } from 'enzyme';
import { ShlinkLogo, ShlinkLogoProps } from '../../../src/common/img/ShlinkLogo';
import { MAIN_COLOR } from '../../../src/utils/theme';
describe('<ShlinkLogo />', () => {
let wrapper: ShallowWrapper;
const createWrapper = (props: ShlinkLogoProps) => {
wrapper = shallow(<ShlinkLogo {...props} />);
return wrapper;
};
afterEach(() => wrapper?.unmount());
it.each([
[ undefined, MAIN_COLOR ],
[ 'red', 'red' ],
[ 'white', 'white' ],
])('renders expected color', (color, expectedColor) => {
const wrapper = createWrapper({ color });
expect(wrapper.find('g').prop('fill')).toEqual(expectedColor);
});
it.each([
[ undefined, undefined ],
[ 'foo', 'foo' ],
[ 'bar', 'bar' ],
])('renders expected class', (className, expectedClassName) => {
const wrapper = createWrapper({ className });
expect(wrapper.prop('className')).toEqual(expectedClassName);
});
});

49
test/servers/ServersListGroup.test.tsx
View file

@ -5,31 +5,58 @@ import ServersListGroup from '../../src/servers/ServersListGroup';
import { ServerWithId } from '../../src/servers/data';
describe('<ServersListGroup />', () => {
const servers = [
Mock.of<ServerWithId>({ name: 'foo', id: '123' }),
Mock.of<ServerWithId>({ name: 'bar', id: '456' }),
];
let wrapped: ShallowWrapper;
const createComponent = (servers: ServerWithId[]) => {
wrapped = shallow(<ServersListGroup servers={servers}>The list of servers</ServersListGroup>);
const createComponent = (params: { servers?: ServerWithId[]; withChildren?: boolean; embedded?: boolean }) => {
const { servers = [], withChildren = true, embedded } = params;
wrapped = shallow(
<ServersListGroup servers={servers} embedded={embedded}>
{withChildren ? 'The list of servers' : undefined}
</ServersListGroup>,
);
return wrapped;
};
afterEach(() => wrapped?.unmount());
it('Renders title', () => {
const wrapped = createComponent([]);
it('renders title', () => {
const wrapped = createComponent({});
const title = wrapped.find('h5');
expect(title).toHaveLength(1);
expect(title.text()).toEqual('The list of servers');
});
it('shows servers list', () => {
const servers = [
Mock.of<ServerWithId>({ name: 'foo', id: '123' }),
Mock.of<ServerWithId>({ name: 'bar', id: '456' }),
];
const wrapped = createComponent(servers);
it('does not render title when children is not provided', () => {
const wrapped = createComponent({ withChildren: false });
const title = wrapped.find('h5');
expect(wrapped.find(ListGroup)).toHaveLength(1);
expect(title).toHaveLength(0);
});
it.each([
[ servers ],
[[]],
])('shows servers list', (servers) => {
const wrapped = createComponent({ servers });
expect(wrapped.find(ListGroup)).toHaveLength(servers.length ? 1 : 0);
expect(wrapped.find('ServerListItem')).toHaveLength(servers.length);
});
it.each([
[ true, 'servers-list__list-group servers-list__list-group--embedded' ],
[ false, 'servers-list__list-group' ],
[ undefined, 'servers-list__list-group' ],
])('renders proper classes for embedded', (embedded, expectedClasses) => {
const wrapped = createComponent({ servers, embedded });
const listGroup = wrapped.find(ListGroup);
expect(listGroup.prop('className')).toEqual(expectedClasses);
});
});

4
test/short-urls/helpers/ShortUrlsRow.test.tsx
View file

@ -43,9 +43,7 @@ describe('<ShortUrlsRow />', () => {
beforeEach(() => {
const ShortUrlsRow = createShortUrlsRow(ShortUrlsRowMenu, colorGenerator, useStateFlagTimeout);
wrapper = shallow(
<ShortUrlsRow shortUrlsListParams={{}} refreshList={mockFunction} selectedServer={server} shortUrl={shortUrl} />,
);
wrapper = shallow(<ShortUrlsRow selectedServer={server} shortUrl={shortUrl} onTagClick={mockFunction} />);
});
afterEach(() => wrapper.unmount());

5
test/visits/helpers/DefaultChart.test.tsx
View file

@ -3,6 +3,7 @@ import { Doughnut, HorizontalBar } from 'react-chartjs-2';
import { keys, values } from 'ramda';
import DefaultChart from '../../../src/visits/helpers/DefaultChart';
import { prettify } from '../../../src/utils/helpers/numbers';
import { MAIN_COLOR, MAIN_COLOR_ALPHA } from '../../../src/utils/theme';
describe('<DefaultChart />', () => {
let wrapper: ShallowWrapper;
@ -62,8 +63,8 @@ describe('<DefaultChart />', () => {
const { datasets: [{ backgroundColor, borderColor }] } = horizontal.prop('data') as any;
const { legend, legendCallback, scales } = horizontal.prop('options') ?? {};
expect(backgroundColor).toEqual('rgba(70, 150, 229, 0.4)');
expect(borderColor).toEqual('rgba(70, 150, 229, 1)');
expect(backgroundColor).toEqual(MAIN_COLOR_ALPHA);
expect(borderColor).toEqual(MAIN_COLOR);
expect(legend).toEqual({ display: false });
expect(legendCallback).toEqual(false);
expect(scales).toEqual({