mirror of
https://github.com/shlinkio/shlink-web-client.git
synced 2024-12-23 17:40:23 +03:00
Created ShortUrlVisits test
This commit is contained in:
parent
d37e7ca7ce
commit
64c1b56973
3 changed files with 96 additions and 6 deletions
|
@ -2,24 +2,24 @@ import calendarIcon from '@fortawesome/fontawesome-free-regular/faCalendarAlt';
|
||||||
import FontAwesomeIcon from '@fortawesome/react-fontawesome';
|
import FontAwesomeIcon from '@fortawesome/react-fontawesome';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import DatePicker from 'react-datepicker';
|
import DatePicker from 'react-datepicker';
|
||||||
import './DateInput.scss';
|
|
||||||
import { isNil } from 'ramda';
|
import { isNil } from 'ramda';
|
||||||
|
import './DateInput.scss';
|
||||||
|
|
||||||
export default class DateInput extends React.Component {
|
export default class DateInput extends React.Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
this.inputRef = React.createRef();
|
this.inputRef = props.ref || React.createRef();
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { isClearable, selected } = this.props;
|
const { className, isClearable, selected } = this.props;
|
||||||
const showCalendarIcon = !isClearable || isNil(selected);
|
const showCalendarIcon = !isClearable || isNil(selected);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="date-input-container">
|
<div className="date-input-container">
|
||||||
<DatePicker
|
<DatePicker
|
||||||
{...this.props}
|
{...this.props}
|
||||||
className={`date-input-container__input form-control ${this.props.className || ''}`}
|
className={`date-input-container__input form-control ${className || ''}`}
|
||||||
dateFormat="YYYY-MM-DD"
|
dateFormat="YYYY-MM-DD"
|
||||||
readOnly
|
readOnly
|
||||||
ref={this.inputRef}
|
ref={this.inputRef}
|
||||||
|
|
|
@ -25,7 +25,9 @@ export class ShortUrlsVisitsComponent extends React.Component {
|
||||||
processBrowserStats: PropTypes.func,
|
processBrowserStats: PropTypes.func,
|
||||||
processCountriesStats: PropTypes.func,
|
processCountriesStats: PropTypes.func,
|
||||||
processReferrersStats: PropTypes.func,
|
processReferrersStats: PropTypes.func,
|
||||||
match: PropTypes.object,
|
match: PropTypes.shape({
|
||||||
|
params: PropTypes.object,
|
||||||
|
}),
|
||||||
getShortUrlVisits: PropTypes.func,
|
getShortUrlVisits: PropTypes.func,
|
||||||
shortUrlVisits: shortUrlVisitsType,
|
shortUrlVisits: shortUrlVisitsType,
|
||||||
getShortUrlDetail: PropTypes.func,
|
getShortUrlDetail: PropTypes.func,
|
||||||
|
@ -122,7 +124,6 @@ export class ShortUrlsVisitsComponent extends React.Component {
|
||||||
selected={this.state.endDate}
|
selected={this.state.endDate}
|
||||||
placeholderText="Until"
|
placeholderText="Until"
|
||||||
isClearable
|
isClearable
|
||||||
className="short-url-visits__date-input"
|
|
||||||
minDate={this.state.startDate}
|
minDate={this.state.startDate}
|
||||||
onChange={(date) => this.setState({ endDate: date }, () => this.loadVisits())}
|
onChange={(date) => this.setState({ endDate: date }, () => this.loadVisits())}
|
||||||
/>
|
/>
|
||||||
|
|
89
test/visits/ShortUrlVisits.test.js
Normal file
89
test/visits/ShortUrlVisits.test.js
Normal file
|
@ -0,0 +1,89 @@
|
||||||
|
import React from 'react';
|
||||||
|
import { shallow } from 'enzyme';
|
||||||
|
import { identity } from 'ramda';
|
||||||
|
import { Card } from 'reactstrap';
|
||||||
|
import * as sinon from 'sinon';
|
||||||
|
import { ShortUrlsVisitsComponent as ShortUrlsVisits } from '../../src/visits/ShortUrlVisits';
|
||||||
|
import MutedMessage from '../../src/utils/MuttedMessage';
|
||||||
|
import { GraphCard } from '../../src/visits/GraphCard';
|
||||||
|
import DateInput from '../../src/common/DateInput';
|
||||||
|
|
||||||
|
describe('<ShortUrlVisits />', () => {
|
||||||
|
let wrapper;
|
||||||
|
const statsProcessor = () => ({});
|
||||||
|
const getShortUrlVisitsMock = sinon.spy();
|
||||||
|
const match = {
|
||||||
|
params: { shortCode: 'abc123' },
|
||||||
|
};
|
||||||
|
|
||||||
|
const createComponent = (shortUrlVisits) => {
|
||||||
|
wrapper = shallow(
|
||||||
|
<ShortUrlsVisits
|
||||||
|
getShortUrlDetail={identity}
|
||||||
|
getShortUrlVisits={getShortUrlVisitsMock}
|
||||||
|
processBrowserStats={statsProcessor}
|
||||||
|
processCountriesStats={statsProcessor}
|
||||||
|
processOsStats={statsProcessor}
|
||||||
|
processReferrersStats={statsProcessor}
|
||||||
|
match={match}
|
||||||
|
shortUrlVisits={shortUrlVisits}
|
||||||
|
shortUrlDetail={{}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
return wrapper;
|
||||||
|
};
|
||||||
|
|
||||||
|
afterEach(() => {
|
||||||
|
getShortUrlVisitsMock.resetHistory();
|
||||||
|
|
||||||
|
if (wrapper) {
|
||||||
|
wrapper.unmount();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
it('Renders a preloader when visits are loading', () => {
|
||||||
|
const wrapper = createComponent({ loading: true });
|
||||||
|
const loadingMessage = wrapper.find(MutedMessage);
|
||||||
|
|
||||||
|
expect(loadingMessage).toHaveLength(1);
|
||||||
|
expect(loadingMessage.html()).toContain('Loading...');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('renders an error message when visits could not be loaded', () => {
|
||||||
|
const wrapper = createComponent({ loading: false, error: true });
|
||||||
|
const errorMessage = wrapper.find(Card);
|
||||||
|
|
||||||
|
expect(errorMessage).toHaveLength(1);
|
||||||
|
expect(errorMessage.html()).toContain('An error occurred while loading visits :(');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('renders a message when visits are loaded but the list is empty', () => {
|
||||||
|
const wrapper = createComponent({ loading: false, error: false, visits: [] });
|
||||||
|
const message = wrapper.find(MutedMessage);
|
||||||
|
|
||||||
|
expect(message).toHaveLength(1);
|
||||||
|
expect(message.html()).toContain('There are no visits matching current filter :(');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('renders all graphics when visits are properly loaded', () => {
|
||||||
|
const wrapper = createComponent({ loading: false, error: false, visits: [{}, {}, {}] });
|
||||||
|
const graphs = wrapper.find(GraphCard);
|
||||||
|
const expectedGraphsCount = 4;
|
||||||
|
|
||||||
|
expect(graphs).toHaveLength(expectedGraphsCount);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('reloads visits when selected dates change', () => {
|
||||||
|
const wrapper = createComponent({ loading: false, error: false, visits: [{}, {}, {}] });
|
||||||
|
const dateInput = wrapper.find(DateInput).first();
|
||||||
|
const expectedGetShortUrlVisitsCalls = 4;
|
||||||
|
|
||||||
|
dateInput.simulate('change', '2016-01-01T00:00:00+01:00');
|
||||||
|
dateInput.simulate('change', '2016-01-02T00:00:00+01:00');
|
||||||
|
dateInput.simulate('change', '2016-01-03T00:00:00+01:00');
|
||||||
|
|
||||||
|
expect(getShortUrlVisitsMock.callCount).toEqual(expectedGetShortUrlVisitsCalls);
|
||||||
|
expect(wrapper.state('startDate')).toEqual('2016-01-03T00:00:00+01:00');
|
||||||
|
});
|
||||||
|
});
|
Loading…
Reference in a new issue