mirror of
https://github.com/shlinkio/shlink-web-client.git
synced 2024-12-23 09:30:31 +03:00
Merge pull request #67 from acelaya/feature/order-countries
Feature/order countries
This commit is contained in:
commit
4adf618026
17 changed files with 299 additions and 73 deletions
23
CHANGELOG.md
23
CHANGELOG.md
|
@ -4,6 +4,29 @@ All notable changes to this project will be documented in this file.
|
|||
|
||||
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org).
|
||||
|
||||
## [Unreleased]
|
||||
|
||||
#### Added
|
||||
|
||||
* [#65](https://github.com/shlinkio/shlink-web-client/issues/65) Added sorting to both countries and referrers stats graphs.
|
||||
|
||||
#### Changed
|
||||
|
||||
* *Nothing*
|
||||
|
||||
#### Deprecated
|
||||
|
||||
* *Nothing*
|
||||
|
||||
#### Removed
|
||||
|
||||
* *Nothing*
|
||||
|
||||
#### Fixed
|
||||
|
||||
* *Nothing*
|
||||
|
||||
|
||||
## 1.1.1 - 2018-10-20
|
||||
|
||||
#### Added
|
||||
|
|
|
@ -18,12 +18,12 @@ body,
|
|||
background-color: $mainColor !important;
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
.dropdown-item:not(:disabled) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.dropdown-item.active,
|
||||
.dropdown-item:active {
|
||||
.dropdown-item.active:not(:disabled),
|
||||
.dropdown-item:active:not(:disabled) {
|
||||
background-color: $lightGrey !important;
|
||||
color: inherit !important;
|
||||
}
|
||||
|
|
|
@ -1,17 +1,18 @@
|
|||
import caretDownIcon from '@fortawesome/fontawesome-free-solid/faCaretDown';
|
||||
import caretUpIcon from '@fortawesome/fontawesome-free-solid/faCaretUp';
|
||||
import FontAwesomeIcon from '@fortawesome/react-fontawesome';
|
||||
import { head, isEmpty, pick, toPairs, keys, values } from 'ramda';
|
||||
import { head, isEmpty, keys, pick, values } from 'ramda';
|
||||
import React from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { DropdownItem, DropdownMenu, DropdownToggle, UncontrolledDropdown } from 'reactstrap';
|
||||
import qs from 'qs';
|
||||
import PropTypes from 'prop-types';
|
||||
import { serverType } from '../servers/prop-types';
|
||||
import SortingDropdown from '../utils/SortingDropdown';
|
||||
import { determineOrderDir } from '../utils/utils';
|
||||
import { ShortUrlsRow } from './helpers/ShortUrlsRow';
|
||||
import { listShortUrls, shortUrlType } from './reducers/shortUrlsList';
|
||||
import { resetShortUrlParams, shortUrlsListParamsType } from './reducers/shortUrlsListParams';
|
||||
import './ShortUrlsList.scss';
|
||||
import { shortUrlsListParamsType, resetShortUrlParams } from './reducers/shortUrlsListParams';
|
||||
|
||||
const SORTABLE_FIELDS = {
|
||||
dateCreated: 'Created at',
|
||||
|
@ -41,25 +42,13 @@ export class ShortUrlsListComponent extends React.Component {
|
|||
...extraParams,
|
||||
});
|
||||
};
|
||||
determineOrderDir = (field) => {
|
||||
if (this.state.orderField !== field) {
|
||||
return 'ASC';
|
||||
}
|
||||
|
||||
const newOrderMap = {
|
||||
ASC: 'DESC',
|
||||
DESC: undefined,
|
||||
handleOrderBy = (orderField, orderDir) => {
|
||||
this.setState({ orderField, orderDir });
|
||||
this.refreshList({ orderBy: { [orderField]: orderDir } });
|
||||
};
|
||||
|
||||
return this.state.orderDir ? newOrderMap[this.state.orderDir] : 'ASC';
|
||||
};
|
||||
orderBy = (field) => {
|
||||
const newOrderDir = this.determineOrderDir(field);
|
||||
|
||||
this.setState({ orderField: newOrderDir !== undefined ? field : undefined, orderDir: newOrderDir });
|
||||
this.refreshList({ orderBy: { [field]: newOrderDir } });
|
||||
};
|
||||
renderOrderIcon = (field, className = 'short-urls-list__header-icon') => {
|
||||
orderByColumn = (columnName) => () =>
|
||||
this.handleOrderBy(columnName, determineOrderDir(columnName, this.state.orderField, this.state.orderDir));
|
||||
renderOrderIcon = (field) => {
|
||||
if (this.state.orderField !== field) {
|
||||
return null;
|
||||
}
|
||||
|
@ -67,7 +56,7 @@ export class ShortUrlsListComponent extends React.Component {
|
|||
return (
|
||||
<FontAwesomeIcon
|
||||
icon={this.state.orderDir === 'ASC' ? caretUpIcon : caretDownIcon}
|
||||
className={className}
|
||||
className="short-urls-list__header-icon"
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
@ -129,19 +118,12 @@ export class ShortUrlsListComponent extends React.Component {
|
|||
renderMobileOrderingControls() {
|
||||
return (
|
||||
<div className="d-block d-md-none mb-3">
|
||||
<UncontrolledDropdown>
|
||||
<DropdownToggle caret className="btn-block">
|
||||
Order by
|
||||
</DropdownToggle>
|
||||
<DropdownMenu className="short-urls-list__order-dropdown">
|
||||
{toPairs(SORTABLE_FIELDS).map(([ key, value ]) => (
|
||||
<DropdownItem key={key} active={this.state.orderField === key} onClick={() => this.orderBy(key)}>
|
||||
{value}
|
||||
{this.renderOrderIcon(key, 'short-urls-list__header-icon--mobile')}
|
||||
</DropdownItem>
|
||||
))}
|
||||
</DropdownMenu>
|
||||
</UncontrolledDropdown>
|
||||
<SortingDropdown
|
||||
items={SORTABLE_FIELDS}
|
||||
orderField={this.state.orderField}
|
||||
orderDir={this.state.orderDir}
|
||||
onChange={this.handleOrderBy}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
@ -155,21 +137,21 @@ export class ShortUrlsListComponent extends React.Component {
|
|||
<tr>
|
||||
<th
|
||||
className="short-urls-list__header-cell short-urls-list__header-cell--with-action"
|
||||
onClick={() => this.orderBy('dateCreated')}
|
||||
onClick={this.orderByColumn('dateCreated')}
|
||||
>
|
||||
{this.renderOrderIcon('dateCreated')}
|
||||
Created at
|
||||
</th>
|
||||
<th
|
||||
className="short-urls-list__header-cell short-urls-list__header-cell--with-action"
|
||||
onClick={() => this.orderBy('shortCode')}
|
||||
onClick={this.orderByColumn('shortCode')}
|
||||
>
|
||||
{this.renderOrderIcon('shortCode')}
|
||||
Short URL
|
||||
</th>
|
||||
<th
|
||||
className="short-urls-list__header-cell short-urls-list__header-cell--with-action"
|
||||
onClick={() => this.orderBy('originalUrl')}
|
||||
onClick={this.orderByColumn('originalUrl')}
|
||||
>
|
||||
{this.renderOrderIcon('originalUrl')}
|
||||
Long URL
|
||||
|
@ -177,7 +159,7 @@ export class ShortUrlsListComponent extends React.Component {
|
|||
<th className="short-urls-list__header-cell">Tags</th>
|
||||
<th
|
||||
className="short-urls-list__header-cell short-urls-list__header-cell--with-action"
|
||||
onClick={() => this.orderBy('visits')}
|
||||
onClick={this.orderByColumn('visits')}
|
||||
>
|
||||
<span className="nowrap">{this.renderOrderIcon('visits')} Visits</span>
|
||||
</th>
|
||||
|
|
|
@ -14,15 +14,6 @@
|
|||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.short-urls-list__header-icon--mobile {
|
||||
margin: 3.5px 0 0;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.short-urls-list__header-cell--with-action {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.short-urls-list__order-dropdown {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
|
@ -15,9 +15,9 @@ import { serverType } from '../../servers/prop-types';
|
|||
import { shortUrlType } from '../reducers/shortUrlsList';
|
||||
import PreviewModal from './PreviewModal';
|
||||
import QrCodeModal from './QrCodeModal';
|
||||
import './ShortUrlsRowMenu.scss';
|
||||
import EditTagsModal from './EditTagsModal';
|
||||
import DeleteShortUrlModal from './DeleteShortUrlModal';
|
||||
import './ShortUrlsRowMenu.scss';
|
||||
|
||||
export class ShortUrlsRowMenu extends React.Component {
|
||||
static propTypes = {
|
||||
|
@ -46,11 +46,11 @@ export class ShortUrlsRowMenu extends React.Component {
|
|||
const toggleDelete = toggleModal('isDeleteModalOpen');
|
||||
|
||||
return (
|
||||
<ButtonDropdown toggle={this.toggle} isOpen={this.state.isOpen} direction="left">
|
||||
<ButtonDropdown toggle={this.toggle} isOpen={this.state.isOpen}>
|
||||
<DropdownToggle size="sm" caret className="short-urls-row-menu__dropdown-toggle btn-outline-secondary">
|
||||
<FontAwesomeIcon icon={menuIcon} />
|
||||
</DropdownToggle>
|
||||
<DropdownMenu>
|
||||
<DropdownMenu right>
|
||||
<DropdownItem tag={Link} to={`/server/${serverId}/short-code/${shortUrl.shortCode}/visits`}>
|
||||
<FontAwesomeIcon icon={pieChartIcon} /> Visit stats
|
||||
</DropdownItem>
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
@import '../../utils/base';
|
||||
|
||||
.short-urls-row-menu__dropdown-toggle:before {
|
||||
.short-urls-row-menu__dropdown-toggle:after {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
|
|
68
src/utils/SortingDropdown.js
Normal file
68
src/utils/SortingDropdown.js
Normal file
|
@ -0,0 +1,68 @@
|
|||
import React from 'react';
|
||||
import { UncontrolledDropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
|
||||
import { toPairs } from 'ramda';
|
||||
import PropTypes from 'prop-types';
|
||||
import FontAwesomeIcon from '@fortawesome/react-fontawesome';
|
||||
import caretUpIcon from '@fortawesome/fontawesome-free-solid/faCaretUp';
|
||||
import caretDownIcon from '@fortawesome/fontawesome-free-solid/faCaretDown';
|
||||
import classNames from 'classnames';
|
||||
import { determineOrderDir } from '../utils/utils';
|
||||
import './SortingDropdown.scss';
|
||||
|
||||
const propTypes = {
|
||||
items: PropTypes.object.isRequired,
|
||||
orderField: PropTypes.string,
|
||||
orderDir: PropTypes.oneOf([ 'ASC', 'DESC' ]),
|
||||
onChange: PropTypes.func.isRequired,
|
||||
isButton: PropTypes.bool,
|
||||
right: PropTypes.bool,
|
||||
};
|
||||
const defaultProps = {
|
||||
isButton: true,
|
||||
right: false,
|
||||
};
|
||||
|
||||
const SortingDropdown = ({ items, orderField, orderDir, onChange, isButton, right }) => {
|
||||
const handleItemClick = (fieldKey) => () => {
|
||||
const newOrderDir = determineOrderDir(fieldKey, orderField, orderDir);
|
||||
|
||||
onChange(newOrderDir ? fieldKey : undefined, newOrderDir);
|
||||
};
|
||||
|
||||
return (
|
||||
<UncontrolledDropdown>
|
||||
<DropdownToggle
|
||||
caret
|
||||
color={isButton ? 'secondary' : 'link'}
|
||||
className={classNames({ 'btn-block': isButton, 'btn-sm sorting-dropdown__paddingless': !isButton })}
|
||||
>
|
||||
Order by
|
||||
</DropdownToggle>
|
||||
<DropdownMenu
|
||||
right={right}
|
||||
className={classNames('sorting-dropdown__menu', { 'sorting-dropdown__menu--link': !isButton })}
|
||||
>
|
||||
{toPairs(items).map(([ fieldKey, fieldValue ]) => (
|
||||
<DropdownItem key={fieldKey} active={orderField === fieldKey} onClick={handleItemClick(fieldKey)}>
|
||||
{fieldValue}
|
||||
{orderField === fieldKey && (
|
||||
<FontAwesomeIcon
|
||||
icon={orderDir === 'ASC' ? caretUpIcon : caretDownIcon}
|
||||
className="sorting-dropdown__sort-icon"
|
||||
/>
|
||||
)}
|
||||
</DropdownItem>
|
||||
))}
|
||||
<DropdownItem divider />
|
||||
<DropdownItem disabled={!orderField} onClick={() => onChange()}>
|
||||
<i>Clear selection</i>
|
||||
</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</UncontrolledDropdown>
|
||||
);
|
||||
};
|
||||
|
||||
SortingDropdown.propTypes = propTypes;
|
||||
SortingDropdown.defaultProps = defaultProps;
|
||||
|
||||
export default SortingDropdown;
|
16
src/utils/SortingDropdown.scss
Normal file
16
src/utils/SortingDropdown.scss
Normal file
|
@ -0,0 +1,16 @@
|
|||
.sorting-dropdown__menu {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sorting-dropdown__menu--link.sorting-dropdown__menu--link {
|
||||
min-width: 11rem;
|
||||
}
|
||||
|
||||
.sorting-dropdown__sort-icon {
|
||||
margin: 3.5px 0 0;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.sorting-dropdown__paddingless.sorting-dropdown__paddingless {
|
||||
padding: 0;
|
||||
}
|
|
@ -4,3 +4,16 @@ export const stateFlagTimeout = (setState, flagName, initialValue = true, delay
|
|||
setState({ [flagName]: initialValue });
|
||||
setTimeout(() => setState({ [flagName]: !initialValue }), delay);
|
||||
};
|
||||
|
||||
export const determineOrderDir = (clickedField, currentOrderField, currentOrderDir) => {
|
||||
if (currentOrderField !== clickedField) {
|
||||
return 'ASC';
|
||||
}
|
||||
|
||||
const newOrderMap = {
|
||||
ASC: 'DESC',
|
||||
DESC: undefined,
|
||||
};
|
||||
|
||||
return currentOrderDir ? newOrderMap[currentOrderDir] : 'ASC';
|
||||
};
|
||||
|
|
|
@ -6,6 +6,7 @@ import { keys, values } from 'ramda';
|
|||
|
||||
const propTypes = {
|
||||
title: PropTypes.string,
|
||||
children: PropTypes.node,
|
||||
isBarChart: PropTypes.bool,
|
||||
stats: PropTypes.object,
|
||||
matchMedia: PropTypes.func,
|
||||
|
@ -80,9 +81,9 @@ const renderGraph = (title, isBarChart, stats, matchMedia) => {
|
|||
return <Component data={generateGraphData(title, isBarChart, labels, data)} options={options} height={null} />;
|
||||
};
|
||||
|
||||
const GraphCard = ({ title, isBarChart, stats, matchMedia }) => (
|
||||
const GraphCard = ({ title, children, isBarChart, stats, matchMedia }) => (
|
||||
<Card className="mt-4">
|
||||
<CardHeader>{title}</CardHeader>
|
||||
<CardHeader className="graph-card__header">{children || title}</CardHeader>
|
||||
<CardBody>{renderGraph(title, isBarChart, stats, matchMedia)}</CardBody>
|
||||
</Card>
|
||||
);
|
||||
|
|
|
@ -7,6 +7,7 @@ import { Card } from 'reactstrap';
|
|||
import PropTypes from 'prop-types';
|
||||
import DateInput from '../common/DateInput';
|
||||
import MutedMessage from '../utils/MuttedMessage';
|
||||
import SortableBarGraph from './SortableBarGraph';
|
||||
import { getShortUrlVisits, shortUrlVisitsType } from './reducers/shortUrlVisits';
|
||||
import {
|
||||
processBrowserStats,
|
||||
|
@ -95,10 +96,24 @@ export class ShortUrlsVisitsComponent extends React.Component {
|
|||
<GraphCard title="Browsers" stats={processBrowserStats(visits)} />
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<GraphCard title="Countries" stats={processCountriesStats(visits)} isBarChart />
|
||||
<SortableBarGraph
|
||||
stats={processCountriesStats(visits)}
|
||||
title="Countries"
|
||||
sortingItems={{
|
||||
name: 'Country name',
|
||||
amount: 'Visits amount',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<GraphCard title="Referrers" stats={processReferrersStats(visits)} isBarChart />
|
||||
<SortableBarGraph
|
||||
stats={processReferrersStats(visits)}
|
||||
title="Referrers"
|
||||
sortingItems={{
|
||||
name: 'Referrer name',
|
||||
amount: 'Visits amount',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
47
src/visits/SortableBarGraph.js
Normal file
47
src/visits/SortableBarGraph.js
Normal file
|
@ -0,0 +1,47 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { fromPairs, head, keys, prop, reverse, sortBy, toPairs } from 'ramda';
|
||||
import SortingDropdown from '../utils/SortingDropdown';
|
||||
import GraphCard from './GraphCard';
|
||||
|
||||
export default class SortableBarGraph extends React.Component {
|
||||
static propTypes = {
|
||||
stats: PropTypes.object.isRequired,
|
||||
title: PropTypes.string.isRequired,
|
||||
sortingItems: PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
state = {
|
||||
orderField: undefined,
|
||||
orderDir: undefined,
|
||||
};
|
||||
|
||||
render() {
|
||||
const { stats, sortingItems, title } = this.props;
|
||||
const sortStats = () => {
|
||||
if (!this.state.orderField) {
|
||||
return stats;
|
||||
}
|
||||
|
||||
const sortedPairs = sortBy(prop(this.state.orderField === head(keys(sortingItems)) ? 0 : 1), toPairs(stats));
|
||||
|
||||
return fromPairs(this.state.orderDir === 'ASC' ? sortedPairs : reverse(sortedPairs));
|
||||
};
|
||||
|
||||
return (
|
||||
<GraphCard stats={sortStats()} isBarChart>
|
||||
{title}
|
||||
<div className="float-right">
|
||||
<SortingDropdown
|
||||
isButton={false}
|
||||
right
|
||||
orderField={this.state.orderField}
|
||||
orderDir={this.state.orderDir}
|
||||
items={sortingItems}
|
||||
onChange={(orderField, orderDir) => this.setState({ orderField, orderDir })}
|
||||
/>
|
||||
</div>
|
||||
</GraphCard>
|
||||
);
|
||||
}
|
||||
}
|
|
@ -9,9 +9,7 @@ describe('<AsideMenu />', () => {
|
|||
beforeEach(() => {
|
||||
wrapped = shallow(<AsideMenu selectedServer={{ id: 'abc123' }} />);
|
||||
});
|
||||
afterEach(() => {
|
||||
wrapped.unmount();
|
||||
});
|
||||
afterEach(() => wrapped.unmount());
|
||||
|
||||
it('contains links to different sections', () => {
|
||||
const links = wrapped.find(NavLink);
|
||||
|
|
|
@ -6,11 +6,7 @@ import Paginator from '../../src/short-urls/Paginator';
|
|||
describe('<Paginator />', () => {
|
||||
let wrapper;
|
||||
|
||||
afterEach(() => {
|
||||
if (wrapper) {
|
||||
wrapper.unmount();
|
||||
}
|
||||
});
|
||||
afterEach(() => wrapper && wrapper.unmount());
|
||||
|
||||
it('renders nothing if the number of pages is below 2', () => {
|
||||
wrapper = shallow(<Paginator serverId="abc123" />);
|
||||
|
|
78
test/utils/SortingDropdown.test.js
Normal file
78
test/utils/SortingDropdown.test.js
Normal file
|
@ -0,0 +1,78 @@
|
|||
import React from 'react';
|
||||
import { shallow } from 'enzyme';
|
||||
import { DropdownItem } from 'reactstrap';
|
||||
import { identity, values } from 'ramda';
|
||||
import FontAwesomeIcon from '@fortawesome/react-fontawesome';
|
||||
import caretDownIcon from '@fortawesome/fontawesome-free-solid/faCaretDown';
|
||||
import * as sinon from 'sinon';
|
||||
import SortingDropdown from '../../src/utils/SortingDropdown';
|
||||
|
||||
describe('<SortingDropdown />', () => {
|
||||
let wrapper;
|
||||
const items = {
|
||||
foo: 'Foo',
|
||||
bar: 'Bar',
|
||||
baz: 'Hello World',
|
||||
};
|
||||
const createWrapper = (props) => {
|
||||
wrapper = shallow(<SortingDropdown items={items} onChange={identity} {...props} />);
|
||||
|
||||
return wrapper;
|
||||
};
|
||||
|
||||
afterEach(() => wrapper && wrapper.unmount());
|
||||
|
||||
it('properly renders provided list of items', () => {
|
||||
const wrapper = createWrapper();
|
||||
const dropdownItems = wrapper.find(DropdownItem);
|
||||
const secondIndex = 2;
|
||||
const clearItemsCount = 2;
|
||||
|
||||
expect(dropdownItems).toHaveLength(values(items).length + clearItemsCount);
|
||||
expect(dropdownItems.at(0).html()).toContain('Foo');
|
||||
expect(dropdownItems.at(1).html()).toContain('Bar');
|
||||
expect(dropdownItems.at(secondIndex).html()).toContain('Hello World');
|
||||
});
|
||||
|
||||
it('properly marks selected field as active with proper icon', () => {
|
||||
const wrapper = createWrapper({ orderField: 'bar', orderDir: 'DESC' });
|
||||
const activeItem = wrapper.find('DropdownItem[active=true]');
|
||||
const activeItemIcon = activeItem.first().find(FontAwesomeIcon);
|
||||
|
||||
expect(activeItem).toHaveLength(1);
|
||||
expect(activeItemIcon.prop('icon')).toEqual(caretDownIcon);
|
||||
});
|
||||
|
||||
it('triggers change function when item is clicked and no order field was provided', () => {
|
||||
const onChange = sinon.spy();
|
||||
const wrapper = createWrapper({ onChange });
|
||||
const firstItem = wrapper.find(DropdownItem).first();
|
||||
|
||||
firstItem.simulate('click');
|
||||
|
||||
expect(onChange.callCount).toEqual(1);
|
||||
expect(onChange.calledWith('foo', 'ASC')).toEqual(true);
|
||||
});
|
||||
|
||||
it('triggers change function when item is clicked and an order field was provided', () => {
|
||||
const onChange = sinon.spy();
|
||||
const wrapper = createWrapper({ onChange, orderField: 'baz', orderDir: 'ASC' });
|
||||
const firstItem = wrapper.find(DropdownItem).first();
|
||||
|
||||
firstItem.simulate('click');
|
||||
|
||||
expect(onChange.callCount).toEqual(1);
|
||||
expect(onChange.calledWith('foo', 'ASC')).toEqual(true);
|
||||
});
|
||||
|
||||
it('updates order dir when already selected item is clicked', () => {
|
||||
const onChange = sinon.spy();
|
||||
const wrapper = createWrapper({ onChange, orderField: 'foo', orderDir: 'ASC' });
|
||||
const firstItem = wrapper.find(DropdownItem).first();
|
||||
|
||||
firstItem.simulate('click');
|
||||
|
||||
expect(onChange.callCount).toEqual(1);
|
||||
expect(onChange.calledWith('foo', 'DESC')).toEqual(true);
|
||||
});
|
||||
});
|
|
@ -12,11 +12,7 @@ describe('<GraphCard />', () => {
|
|||
};
|
||||
const matchMedia = () => ({ matches: false });
|
||||
|
||||
afterEach(() => {
|
||||
if (wrapper) {
|
||||
wrapper.unmount();
|
||||
}
|
||||
});
|
||||
afterEach(() => wrapper && wrapper.unmount());
|
||||
|
||||
it('renders Doughnut when is not a bar chart', () => {
|
||||
wrapper = shallow(<GraphCard matchMedia={matchMedia} title="The chart" stats={stats} />);
|
||||
|
|
|
@ -7,6 +7,7 @@ import { ShortUrlsVisitsComponent as ShortUrlsVisits } from '../../src/visits/Sh
|
|||
import MutedMessage from '../../src/utils/MuttedMessage';
|
||||
import GraphCard from '../../src/visits/GraphCard';
|
||||
import DateInput from '../../src/common/DateInput';
|
||||
import SortableBarGraph from '../../src/visits/SortableBarGraph';
|
||||
|
||||
describe('<ShortUrlVisits />', () => {
|
||||
let wrapper;
|
||||
|
@ -69,9 +70,10 @@ describe('<ShortUrlVisits />', () => {
|
|||
it('renders all graphics when visits are properly loaded', () => {
|
||||
const wrapper = createComponent({ loading: false, error: false, visits: [{}, {}, {}] });
|
||||
const graphs = wrapper.find(GraphCard);
|
||||
const sortableBarGraphs = wrapper.find(SortableBarGraph);
|
||||
const expectedGraphsCount = 4;
|
||||
|
||||
expect(graphs).toHaveLength(expectedGraphsCount);
|
||||
expect(graphs.length + sortableBarGraphs.length).toEqual(expectedGraphsCount);
|
||||
});
|
||||
|
||||
it('reloads visits when selected dates change', () => {
|
||||
|
|
Loading…
Reference in a new issue