forked/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2026-04-19 21:16:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

Replaced most of the usages of moment with date-fns

Browse Source
This commit is contained in:
Alejandro Celaya
2021-06-24 20:13:06 +02:00
parent ee65c0c050
commit 4be1a295d8
21 changed files with 124 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
test/short-urls/ShortUrlForm.test.tsx
View File

@@ -1,5 +1,5 @@
import { shallow, ShallowWrapper } from 'enzyme';
import moment from 'moment';
import { formatISO, parse } from 'date-fns';
import { identity } from 'ramda';
import { Mock } from 'ts-mockery';
import { Input } from 'reactstrap';
@@ -34,8 +34,8 @@ describe('<ShortUrlForm />', () => {
it('saves short URL with data set in form controls', () => {
const wrapper = createWrapper();
const validSince = moment('2017-01-01');
const validUntil = moment('2017-01-06');
const validSince = parse('2017-01-01', 'yyyy-MM-dd', new Date());
const validUntil = parse('2017-01-06', 'yyyy-MM-dd', new Date());
wrapper.find(Input).first().simulate('change', { target: { value: 'https://long-domain.com/foo/bar' } });
wrapper.find('TagsSelector').simulate('change', [ 'tag_foo', 'tag_bar' ]);
@@ -53,8 +53,8 @@ describe('<ShortUrlForm />', () => {
tags: [ 'tag_foo', 'tag_bar' ],
customSlug: 'my-slug',
domain: 'example.com',
validSince: validSince.format(),
validUntil: validUntil.format(),
validSince: formatISO(validSince),
validUntil: formatISO(validUntil),
maxVisits: 20,
findIfExists: false,
shortCodeLength: 15,

10
test/short-urls/helpers/ShortUrlsRow.test.tsx
View File

@@ -1,9 +1,8 @@
import { shallow, ShallowWrapper } from 'enzyme';
import moment from 'moment';
import Moment from 'react-moment';
import { assoc, toString } from 'ramda';
import { Mock } from 'ts-mockery';
import { ExternalLink } from 'react-external-link';
import { formatISO, parse } from 'date-fns';
import createShortUrlsRow from '../../../src/short-urls/helpers/ShortUrlsRow';
import Tag from '../../../src/tags/helpers/Tag';
import ColorGenerator from '../../../src/utils/services/ColorGenerator';
@@ -11,6 +10,7 @@ import { StateFlagTimeout } from '../../../src/utils/helpers/hooks';
import { ShortUrl } from '../../../src/short-urls/data';
import { ReachableServer } from '../../../src/servers/data';
import { CopyToClipboardIcon } from '../../../src/utils/CopyToClipboardIcon';
import { Time } from '../../../src/utils/Time';
describe('<ShortUrlsRow />', () => {
let wrapper: ShallowWrapper;
@@ -27,7 +27,7 @@ describe('<ShortUrlsRow />', () => {
shortCode: 'abc123',
shortUrl: 'http://doma.in/abc123',
longUrl: 'http://foo.com/bar',
dateCreated: moment('2018-05-23 18:30:41').format(),
dateCreated: formatISO(parse('2018-05-23 18:30:41', 'yyyy-MM-dd HH:mm:ss', new Date())),
tags: [ 'nodejs', 'reactjs' ],
visitsCount: 45,
domain: null,
@@ -62,9 +62,9 @@ describe('<ShortUrlsRow />', () => {
it('renders date in first column', () => {
const col = wrapper.find('td').first();
const moment = col.find(Moment);
const date = col.find(Time);
expect(moment.html()).toContain('>2018-05-23 18:30</time>');
expect(date.html()).toContain('>2018-05-23 18:30</time>');
});
it('renders short URL in second row', () => {

3
test/utils/DateInput.test.tsx
View File

@@ -1,6 +1,5 @@
import { shallow, ShallowWrapper } from 'enzyme';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import moment from 'moment';
import { Mock } from 'ts-mockery';
import DateInput, { DateInputProps } from '../../src/utils/DateInput';
@@ -30,7 +29,7 @@ describe('<DateInput />', () => {
});
it('does not show calendar icon when input is clearable', () => {
wrapped = createComponent({ isClearable: true, selected: moment() });
wrapped = createComponent({ isClearable: true, selected: new Date() });
expect(wrapped.find(FontAwesomeIcon)).toHaveLength(0);
});
});

3
test/utils/dates/DateRangeSelector.test.tsx
View File

@@ -1,6 +1,5 @@
import { shallow, ShallowWrapper } from 'enzyme';
import { DropdownItem } from 'reactstrap';
import moment from 'moment';
import { Mock } from 'ts-mockery';
import { DateRangeSelector, DateRangeSelectorProps } from '../../../src/utils/dates/DateRangeSelector';
import { DateInterval } from '../../../src/utils/dates/types';
@@ -40,7 +39,7 @@ describe('<DateRangeSelector />', () => {
[ 'last90Days' as DateInterval, 0, 1 ],
[ 'last180days' as DateInterval, 0, 1 ],
[ 'last365Days' as DateInterval, 0, 1 ],
[{ startDate: moment() }, 0, 0 ],
[{ startDate: new Date() }, 0, 0 ],
])('sets proper element as active based on provided date range', (
initialDateRange,
expectedActiveItems,

40
test/utils/dates/types/index.test.ts
View File

@@ -1,4 +1,4 @@
import moment from 'moment';
import { format, parse, subDays } from 'date-fns';
import {
DateInterval,
dateRangeIsEmpty,
@@ -20,9 +20,9 @@ describe('date-types', () => {
[{ startDate: undefined, endDate: undefined }, true ],
[{ startDate: undefined, endDate: null }, true ],
[{ startDate: null, endDate: undefined }, true ],
[{ startDate: moment() }, false ],
[{ endDate: moment() }, false ],
[{ startDate: moment(), endDate: moment() }, false ],
[{ startDate: new Date() }, false ],
[{ endDate: new Date() }, false ],
[{ startDate: new Date(), endDate: new Date() }, false ],
])('proper result is returned', (dateRange, expectedResult) => {
expect(dateRangeIsEmpty(dateRange)).toEqual(expectedResult);
});
@@ -58,31 +58,39 @@ describe('date-types', () => {
[{ startDate: undefined, endDate: undefined }, undefined ],
[{ startDate: undefined, endDate: null }, undefined ],
[{ startDate: null, endDate: undefined }, undefined ],
[{ startDate: moment('2020-01-01') }, 'Since 2020-01-01' ],
[{ endDate: moment('2020-01-01') }, 'Until 2020-01-01' ],
[{ startDate: moment('2020-01-01'), endDate: moment('2021-02-02') }, '2020-01-01 - 2021-02-02' ],
[{ startDate: parse('2020-01-01', 'yyyy-MM-dd', new Date()) }, 'Since 2020-01-01' ],
[{ endDate: parse('2020-01-01', 'yyyy-MM-dd', new Date()) }, 'Until 2020-01-01' ],
[
{
startDate: parse('2020-01-01', 'yyyy-MM-dd', new Date()),
endDate: parse('2021-02-02', 'yyyy-MM-dd', new Date()),
},
'2020-01-01 - 2021-02-02',
],
])('proper result is returned', (range, expectedValue) => {
expect(rangeOrIntervalToString(range)).toEqual(expectedValue);
});
});
describe('intervalToDateRange', () => {
const now = () => moment();
const now = () => new Date();
const daysBack = (days: number) => subDays(new Date(), days);
const formatted = (date?: Date | null): string | undefined => !date ? undefined : format(date, 'yyyy-MM-dd');
test.each([
[ undefined, undefined, undefined ],
[ 'today' as DateInterval, now(), now() ],
[ 'yesterday' as DateInterval, now().subtract(1, 'day'), now().subtract(1, 'day') ],
[ 'last7Days' as DateInterval, now().subtract(7, 'day'), now() ],
[ 'last30Days' as DateInterval, now().subtract(30, 'day'), now() ],
[ 'last90Days' as DateInterval, now().subtract(90, 'day'), now() ],
[ 'last180days' as DateInterval, now().subtract(180, 'day'), now() ],
[ 'last365Days' as DateInterval, now().subtract(365, 'day'), now() ],
[ 'yesterday' as DateInterval, daysBack(1), daysBack(1) ],
[ 'last7Days' as DateInterval, daysBack(7), now() ],
[ 'last30Days' as DateInterval, daysBack(30), now() ],
[ 'last90Days' as DateInterval, daysBack(90), now() ],
[ 'last180days' as DateInterval, daysBack(180), now() ],
[ 'last365Days' as DateInterval, daysBack(365), now() ],
])('proper result is returned', (interval, expectedStartDate, expectedEndDate) => {
const { startDate, endDate } = intervalToDateRange(interval);
expect(expectedStartDate?.format('YYYY-MM-DD')).toEqual(startDate?.format('YYYY-MM-DD'));
expect(expectedEndDate?.format('YYYY-MM-DD')).toEqual(endDate?.format('YYYY-MM-DD'));
expect(formatted(expectedStartDate)).toEqual(formatted(startDate));
expect(formatted(expectedEndDate)).toEqual(formatted(endDate));
});
});
});

15
test/utils/helpers/date.test.ts
View File

@@ -1,13 +1,13 @@
import moment from 'moment';
import { formatISO, parse } from 'date-fns';
import { formatDate, formatIsoDate } from '../../../src/utils/helpers/date';
describe('date', () => {
describe('formatDate', () => {
it.each([
[ moment('2020-03-05 10:00:10'), 'DD/MM/YYYY', '05/03/2020' ],
[ moment('2020-03-05 10:00:10'), 'YYYY-MM', '2020-03' ],
[ moment('2020-03-05 10:00:10'), undefined, '2020-03-05' ],
[ '2020-03-05 10:00:10', 'DD-MM-YYYY', '2020-03-05 10:00:10' ],
[ parse('2020-03-05 10:00:10', 'yyyy-MM-dd HH:mm:ss', new Date()), 'dd/MM/yyyy', '05/03/2020' ],
[ parse('2020-03-05 10:00:10', 'yyyy-MM-dd HH:mm:ss', new Date()), 'yyyy-MM', '2020-03' ],
[ parse('2020-03-05 10:00:10', 'yyyy-MM-dd HH:mm:ss', new Date()), undefined, '2020-03-05' ],
[ '2020-03-05 10:00:10', 'dd-MM-yyyy', '2020-03-05 10:00:10' ],
[ '2020-03-05 10:00:10', undefined, '2020-03-05 10:00:10' ],
[ undefined, undefined, undefined ],
[ null, undefined, null ],
@@ -18,7 +18,10 @@ describe('date', () => {
describe('formatIsoDate', () => {
it.each([
[ moment('2020-03-05 10:00:10'), moment('2020-03-05 10:00:10').format() ],
[
parse('2020-03-05 10:00:10', 'yyyy-MM-dd HH:mm:ss', new Date()),
formatISO(parse('2020-03-05 10:00:10', 'yyyy-MM-dd HH:mm:ss', new Date())),
],
[ '2020-03-05 10:00:10', '2020-03-05 10:00:10' ],
[ 'foo', 'foo' ],
[ undefined, undefined ],

6
test/visits/ShortUrlVisitsHeader.test.tsx
View File

@@ -1,10 +1,10 @@
import { shallow, ShallowWrapper } from 'enzyme';
import Moment from 'react-moment';
import { ExternalLink } from 'react-external-link';
import { Mock } from 'ts-mockery';
import ShortUrlVisitsHeader from '../../src/visits/ShortUrlVisitsHeader';
import { ShortUrlDetail } from '../../src/short-urls/reducers/shortUrlDetail';
import { ShortUrlVisits } from '../../src/visits/reducers/shortUrlVisits';
import { Time } from '../../src/utils/Time';
describe('<ShortUrlVisitsHeader />', () => {
let wrapper: ShallowWrapper;
@@ -36,9 +36,9 @@ describe('<ShortUrlVisitsHeader />', () => {
afterEach(() => wrapper.unmount());
it('shows when the URL was created', () => {
const moment = wrapper.find(Moment).first();
const time = wrapper.find(Time).first();
expect(moment.prop('children')).toEqual(dateCreated);
expect(time.prop('date')).toEqual(dateCreated);
});
it.each([

14
test/visits/helpers/LineChartCard.test.tsx
View File

@@ -1,7 +1,7 @@
import { shallow, ShallowWrapper } from 'enzyme';
import { CardHeader, DropdownItem } from 'reactstrap';
import { Line } from 'react-chartjs-2';
import moment from 'moment';
import { formatISO, subDays, subMonths, subYears } from 'date-fns';
import { Mock } from 'ts-mockery';
import LineChartCard from '../../../src/visits/helpers/LineChartCard';
import ToggleSwitch from '../../../src/utils/ToggleSwitch';
@@ -27,12 +27,12 @@ describe('<LineChartCard />', () => {
it.each([
[[], 'monthly' ],
[[{ date: moment().subtract(1, 'day').format() }], 'hourly' ],
[[{ date: moment().subtract(3, 'day').format() }], 'daily' ],
[[{ date: moment().subtract(2, 'month').format() }], 'weekly' ],
[[{ date: moment().subtract(6, 'month').format() }], 'weekly' ],
[[{ date: moment().subtract(7, 'month').format() }], 'monthly' ],
[[{ date: moment().subtract(1, 'year').format() }], 'monthly' ],
[[{ date: formatISO(subDays(new Date(), 1)) }], 'hourly' ],
[[{ date: formatISO(subDays(new Date(), 3)) }], 'daily' ],
[[{ date: formatISO(subMonths(new Date(), 2)) }], 'weekly' ],
[[{ date: formatISO(subMonths(new Date(), 6)) }], 'weekly' ],
[[{ date: formatISO(subMonths(new Date(), 7)) }], 'monthly' ],
[[{ date: formatISO(subYears(new Date(), 1)) }], 'monthly' ],
])('renders group menu and selects proper grouping item based on visits dates', (visits, expectedActiveItem) => {
const wrapper = createWrapper(visits.map((visit) => Mock.of<NormalizedVisit>(visit)));
const items = wrapper.find(DropdownItem);