Move shlink-web-component tests to their own folder

shlink-web-component/test/utils/dates/DateInput.test.tsx

@@ -0,0 +1,45 @@
+import { screen, waitFor } from '@testing-library/react';
+import { fromPartial } from '@total-typescript/shoehorn';
+import { parseISO } from 'date-fns';
+import type { DateInputProps } from '../../../src/utils/dates/DateInput';
+import { DateInput } from '../../../src/utils/dates/DateInput';
+import { renderWithEvents } from '../../__helpers__/setUpTest';
+
+describe('<DateInput />', () => {
+  const setUp = (props: Partial<DateInputProps> = {}) => renderWithEvents(
+    <DateInput {...fromPartial<DateInputProps>(props)} />,
+  );
+
+  it('shows calendar icon when input is not clearable', () => {
+    setUp({ isClearable: false });
+    expect(screen.getByRole('img', { hidden: true })).toBeInTheDocument();
+  });
+
+  it('shows calendar icon when input is clearable but selected value is nil', () => {
+    setUp({ isClearable: true, selected: null });
+    expect(screen.getByRole('img', { hidden: true })).toBeInTheDocument();
+  });
+
+  it('does not show calendar icon when input is clearable', () => {
+    setUp({ isClearable: true, selected: new Date() });
+    expect(screen.queryByRole('img', { hidden: true })).not.toBeInTheDocument();
+  });
+
+  it('shows popper on element click', async () => {
+    const { user, container } = setUp({ placeholderText: 'foo' });
+
+    expect(container.querySelector('.react-datepicker')).not.toBeInTheDocument();
+    await user.click(screen.getByPlaceholderText('foo'));
+    await waitFor(() => expect(container.querySelector('.react-datepicker')).toBeInTheDocument());
+  });
+
+  it.each([
+    [undefined, '2022-01-01'],
+    ['yyyy-MM-dd', '2022-01-01'],
+    ['yyyy-MM-dd HH:mm', '2022-01-01 15:18'],
+    ['HH:mm:ss', '15:18:36'],
+  ])('shows date in expected format', (dateFormat, expectedValue) => {
+    setUp({ placeholderText: 'foo', selected: parseISO('2022-01-01T15:18:36'), dateFormat });
+    expect(screen.getByPlaceholderText('foo')).toHaveValue(expectedValue);
+  });
+});

shlink-web-component/test/utils/dates/DateIntervalDropdownItems.test.tsx

@@ -0,0 +1,56 @@
+import { screen, waitFor } from '@testing-library/react';
+import { DropdownBtn } from '../../../../shlink-frontend-kit/src';
+import { DateIntervalDropdownItems } from '../../../src/utils/dates/DateIntervalDropdownItems';
+import type { DateInterval } from '../../../src/utils/dates/helpers/dateIntervals';
+import { DATE_INTERVALS, rangeOrIntervalToString } from '../../../src/utils/dates/helpers/dateIntervals';
+import { renderWithEvents } from '../../__helpers__/setUpTest';
+
+describe('<DateIntervalDropdownItems />', () => {
+  const onChange = vi.fn();
+  const setUp = async () => {
+    const { user, ...renderResult } = renderWithEvents(
+      <DropdownBtn text="text">
+        <DateIntervalDropdownItems allText="All" active="last180Days" onChange={onChange} />
+      </DropdownBtn>,
+    );
+
+    await user.click(screen.getByRole('button'));
+    await waitFor(() => expect(screen.getByRole('menu')).toBeInTheDocument());
+
+    return { user, ...renderResult };
+  };
+
+  it('renders expected amount of items', async () => {
+    await setUp();
+
+    expect(screen.getAllByRole('menuitem')).toHaveLength(DATE_INTERVALS.length + 1);
+    expect(screen.getByRole('menuitem', { name: 'Last 180 days' })).toHaveClass('active');
+  });
+
+  it('sets expected item as active', async () => {
+    await setUp();
+    const EXPECTED_ACTIVE_INDEX = 5;
+
+    DATE_INTERVALS.forEach((interval, index) => {
+      const item = screen.getByRole('menuitem', { name: rangeOrIntervalToString(interval) });
+
+      if (index === EXPECTED_ACTIVE_INDEX) {
+        expect(item).toHaveClass('active');
+      } else {
+        expect(item).not.toHaveClass('active');
+      }
+    });
+  });
+
+  it.each([
+    [3, 'last7Days' as DateInterval],
+    [7, 'last365Days' as DateInterval],
+    [2, 'yesterday' as DateInterval],
+  ])('triggers onChange callback when selecting an element', async (index, expectedInterval) => {
+    const { user } = await setUp();
+
+    await user.click(screen.getAllByRole('menuitem')[index]);
+
+    expect(onChange).toHaveBeenCalledWith(expectedInterval);
+  });
+});

shlink-web-component/test/utils/dates/DateRangeRow.test.tsx

@@ -0,0 +1,32 @@
+import { screen } from '@testing-library/react';
+import { DateRangeRow } from '../../../src/utils/dates/DateRangeRow';
+import { renderWithEvents } from '../../__helpers__/setUpTest';
+
+describe('<DateRangeRow />', () => {
+  const onEndDateChange = vi.fn();
+  const onStartDateChange = vi.fn();
+  const setUp = () => renderWithEvents(
+    <DateRangeRow onEndDateChange={onEndDateChange} onStartDateChange={onStartDateChange} />,
+  );
+
+  it('renders two date inputs', () => {
+    setUp();
+    expect(screen.getAllByRole('textbox')).toHaveLength(2);
+  });
+
+  it('invokes start date callback when change event is triggered on first input', async () => {
+    const { user } = setUp();
+
+    expect(onStartDateChange).not.toHaveBeenCalled();
+    await user.type(screen.getByPlaceholderText('Since...'), '2020-05-05');
+    expect(onStartDateChange).toHaveBeenCalled();
+  });
+
+  it('invokes end date callback when change event is triggered on second input', async () => {
+    const { user } = setUp();
+
+    expect(onEndDateChange).not.toHaveBeenCalled();
+    await user.type(screen.getByPlaceholderText('Until...'), '2022-05-05');
+    expect(onEndDateChange).toHaveBeenCalled();
+  });
+});

shlink-web-component/test/utils/dates/DateRangeSelector.test.tsx

@@ -0,0 +1,68 @@
+import { screen, waitFor } from '@testing-library/react';
+import { fromPartial } from '@total-typescript/shoehorn';
+import type { DateRangeSelectorProps } from '../../../src/utils/dates/DateRangeSelector';
+import { DateRangeSelector } from '../../../src/utils/dates/DateRangeSelector';
+import type { DateInterval } from '../../../src/utils/dates/helpers/dateIntervals';
+import { renderWithEvents } from '../../__helpers__/setUpTest';
+
+describe('<DateRangeSelector />', () => {
+  const onDatesChange = vi.fn();
+  const setUp = async (props: Partial<DateRangeSelectorProps> = {}) => {
+    const result = renderWithEvents(
+      <DateRangeSelector
+        {...fromPartial<DateRangeSelectorProps>(props)}
+        defaultText="Default text"
+        onDatesChange={onDatesChange}
+      />,
+    );
+
+    await result.user.click(screen.getByRole('button'));
+    await waitFor(() => screen.getByRole('menu'));
+
+    return result;
+  };
+
+  it('renders proper amount of items', async () => {
+    const { container } = await setUp();
+
+    expect(screen.getAllByRole('menuitem')).toHaveLength(8);
+    expect(screen.getByRole('heading')).toHaveTextContent('Custom:');
+    expect(container.querySelector('.dropdown-divider')).toBeInTheDocument();
+    expect(container.querySelector('.dropdown-item-text')).toBeInTheDocument();
+  });
+
+  it.each([
+    [undefined, 0],
+    ['all' as DateInterval, 1],
+    ['today' as DateInterval, 1],
+    ['yesterday' as DateInterval, 1],
+    ['last7Days' as DateInterval, 1],
+    ['last30Days' as DateInterval, 1],
+    ['last90Days' as DateInterval, 1],
+    ['last180Days' as DateInterval, 1],
+    ['last365Days' as DateInterval, 1],
+    [{ startDate: new Date() }, 0],
+  ])('sets proper element as active based on provided date range', async (initialDateRange, expectedActiveItems) => {
+    const { container } = await setUp({ initialDateRange });
+    expect(container.querySelectorAll('.active')).toHaveLength(expectedActiveItems);
+  });
+
+  it('triggers onDatesChange callback when selecting an element', async () => {
+    const { user } = await setUp();
+
+    await user.click(screen.getByPlaceholderText('Since...'));
+    await user.click(screen.getAllByRole('option')[0]);
+
+    await user.click(screen.getByPlaceholderText('Until...'));
+    await user.click(screen.getAllByRole('option')[0]);
+
+    await user.click(screen.getAllByRole('menuitem')[0]);
+
+    expect(onDatesChange).toHaveBeenCalledTimes(3);
+  });
+
+  it('propagates default text to DateIntervalDropdownItems', async () => {
+    await setUp();
+    expect(screen.getAllByText('Default text')).toHaveLength(2);
+  });
+});

shlink-web-component/test/utils/dates/Time.test.tsx

@@ -0,0 +1,23 @@
+import { render } from '@testing-library/react';
+import { parseDate } from '../../../src/utils/dates/helpers/date';
+import type { TimeProps } from '../../../src/utils/dates/Time';
+import { Time } from '../../../src/utils/dates/Time';
+
+describe('<Time />', () => {
+  const setUp = (props: TimeProps) => render(<Time {...props} />);
+
+  it.each([
+    [{ date: parseDate('2020-05-05', 'yyyy-MM-dd') }, '1588636800000', '2020-05-05 00:00'],
+    [{ date: parseDate('2021-03-20', 'yyyy-MM-dd'), format: 'dd/MM/yyyy' }, '1616198400000', '20/03/2021'],
+  ])('includes expected dateTime and format', (props, expectedDateTime, expectedFormatted) => {
+    const { container } = setUp(props);
+
+    expect(container.firstChild).toHaveAttribute('datetime', expectedDateTime);
+    expect(container.firstChild).toHaveTextContent(expectedFormatted);
+  });
+
+  it('renders relative times when requested', () => {
+    const { container } = setUp({ date: new Date(), relative: true });
+    expect(container.firstChild).toHaveTextContent(' ago');
+  });
+});

shlink-web-component/test/utils/dates/helpers/date.test.ts

@@ -0,0 +1,63 @@
+import { addDays, formatISO, subDays } from 'date-fns';
+import { formatDate, formatIsoDate, isBeforeOrEqual, isBetween, parseDate } from '../../../../src/utils/dates/helpers/date';
+
+describe('date', () => {
+  const now = new Date();
+
+  describe('formatDate', () => {
+    it.each([
+      [parseDate('2020-03-05 10:00:10', 'yyyy-MM-dd HH:mm:ss'), 'dd/MM/yyyy', '05/03/2020'],
+      [parseDate('2020-03-05 10:00:10', 'yyyy-MM-dd HH:mm:ss'), 'yyyy-MM', '2020-03'],
+      [parseDate('2020-03-05 10:00:10', 'yyyy-MM-dd HH:mm:ss'), 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],
+    ])('formats date as expected', (date, format, expected) => {
+      expect(formatDate(format)(date)).toEqual(expected);
+    });
+  });
+
+  describe('formatIsoDate', () => {
+    it.each([
+      [
+        parseDate('2020-03-05 10:00:10', 'yyyy-MM-dd HH:mm:ss'),
+        formatISO(parseDate('2020-03-05 10:00:10', 'yyyy-MM-dd HH:mm:ss')),
+      ],
+      ['2020-03-05 10:00:10', '2020-03-05 10:00:10'],
+      ['foo', 'foo'],
+      [undefined, undefined],
+      [null, null],
+    ])('formats date as expected', (date, expected) => {
+      expect(formatIsoDate(date)).toEqual(expected);
+    });
+  });
+
+  describe('isBetween', () => {
+    it.each([
+      [now, undefined, undefined, true],
+      [now, subDays(now, 1), undefined, true],
+      [now, now, undefined, true],
+      [now, undefined, addDays(now, 1), true],
+      [now, undefined, now, true],
+      [now, subDays(now, 1), addDays(now, 1), true],
+      [now, now, now, true],
+      [now, addDays(now, 1), undefined, false],
+      [now, undefined, subDays(now, 1), false],
+      [now, subDays(now, 3), subDays(now, 1), false],
+      [now, addDays(now, 1), addDays(now, 3), false],
+    ])('returns true when a date is between provided range', (date, start, end, expectedResult) => {
+      expect(isBetween(date, start, end)).toEqual(expectedResult);
+    });
+  });
+
+  describe('isBeforeOrEqual', () => {
+    it.each([
+      [now, now, true],
+      [now, addDays(now, 1), true],
+      [now, subDays(now, 1), false],
+    ])('returns true when the date before or equal to provided one', (date, dateToCompare, expectedResult) => {
+      expect(isBeforeOrEqual(date, dateToCompare)).toEqual(expectedResult);
+    });
+  });
+});

shlink-web-component/test/utils/dates/helpers/dateIntervals.test.ts

@@ -0,0 +1,139 @@
+import { endOfDay, format, formatISO, startOfDay, subDays } from 'date-fns';
+import { now, parseDate } from '../../../../src/utils/dates/helpers/date';
+import type {
+  DateInterval } from '../../../../src/utils/dates/helpers/dateIntervals';
+import {
+  dateRangeIsEmpty,
+  dateToMatchingInterval,
+  intervalToDateRange,
+  rangeIsInterval,
+  rangeOrIntervalToString,
+  toDateRange,
+} from '../../../../src/utils/dates/helpers/dateIntervals';
+
+describe('date-types', () => {
+  const daysBack = (days: number) => subDays(now(), days);
+
+  describe('dateRangeIsEmpty', () => {
+    it.each([
+      [undefined, true],
+      [{}, true],
+      [{ startDate: null }, true],
+      [{ endDate: null }, true],
+      [{ startDate: null, endDate: null }, true],
+      [{ startDate: undefined }, true],
+      [{ endDate: undefined }, true],
+      [{ startDate: undefined, endDate: undefined }, true],
+      [{ startDate: undefined, endDate: null }, true],
+      [{ startDate: null, endDate: undefined }, true],
+      [{ startDate: now() }, false],
+      [{ endDate: now() }, false],
+      [{ startDate: now(), endDate: now() }, false],
+    ])('returns proper result', (dateRange, expectedResult) => {
+      expect(dateRangeIsEmpty(dateRange)).toEqual(expectedResult);
+    });
+  });
+
+  describe('rangeIsInterval', () => {
+    it.each([
+      [undefined, false],
+      [{}, false],
+      ['today' as DateInterval, true],
+      ['yesterday' as DateInterval, true],
+    ])('returns proper result', (range, expectedResult) => {
+      expect(rangeIsInterval(range)).toEqual(expectedResult);
+    });
+  });
+
+  describe('rangeOrIntervalToString', () => {
+    it.each([
+      [undefined, undefined],
+      ['today' as DateInterval, 'Today'],
+      ['yesterday' as DateInterval, 'Yesterday'],
+      ['last7Days' as DateInterval, 'Last 7 days'],
+      ['last30Days' as DateInterval, 'Last 30 days'],
+      ['last90Days' as DateInterval, 'Last 90 days'],
+      ['last180Days' as DateInterval, 'Last 180 days'],
+      ['last365Days' as DateInterval, 'Last 365 days'],
+      [{}, undefined],
+      [{ startDate: null }, undefined],
+      [{ endDate: null }, undefined],
+      [{ startDate: null, endDate: null }, undefined],
+      [{ startDate: undefined }, undefined],
+      [{ endDate: undefined }, undefined],
+      [{ startDate: undefined, endDate: undefined }, undefined],
+      [{ startDate: undefined, endDate: null }, undefined],
+      [{ startDate: null, endDate: undefined }, undefined],
+      [{ startDate: parseDate('2020-01-01', 'yyyy-MM-dd') }, 'Since 2020-01-01'],
+      [{ endDate: parseDate('2020-01-01', 'yyyy-MM-dd') }, 'Until 2020-01-01'],
+      [
+        { startDate: parseDate('2020-01-01', 'yyyy-MM-dd'), endDate: parseDate('2021-02-02', 'yyyy-MM-dd') },
+        '2020-01-01 - 2021-02-02',
+      ],
+    ])('returns proper result', (range, expectedValue) => {
+      expect(rangeOrIntervalToString(range)).toEqual(expectedValue);
+    });
+  });
+
+  describe('intervalToDateRange', () => {
+    const formatted = (date?: Date | null): string | undefined => (!date ? undefined : format(date, 'yyyy-MM-dd'));
+
+    it.each([
+      [undefined, undefined, undefined],
+      ['today' as DateInterval, now(), 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()],
+    ])('returns proper result', (interval, expectedStartDate, expectedEndDate) => {
+      const { startDate, endDate } = intervalToDateRange(interval);
+
+      expect(formatted(expectedStartDate)).toEqual(formatted(startDate));
+      expect(formatted(expectedEndDate)).toEqual(formatted(endDate));
+    });
+  });
+
+  describe('dateToMatchingInterval', () => {
+    it.each([
+      [startOfDay(now()), 'today'],
+      [now(), 'today'],
+      [formatISO(now()), 'today'],
+      [daysBack(1), 'yesterday'],
+      [endOfDay(daysBack(1)), 'yesterday'],
+      [daysBack(2), 'last7Days'],
+      [daysBack(7), 'last7Days'],
+      [startOfDay(daysBack(7)), 'last7Days'],
+      [daysBack(18), 'last30Days'],
+      [daysBack(29), 'last30Days'],
+      [daysBack(58), 'last90Days'],
+      [startOfDay(daysBack(90)), 'last90Days'],
+      [daysBack(120), 'last180Days'],
+      [daysBack(250), 'last365Days'],
+      [daysBack(366), 'all'],
+      [formatISO(daysBack(500)), 'all'],
+    ])('returns the first interval which contains provided date', (date, expectedInterval) => {
+      expect(dateToMatchingInterval(date)).toEqual(expectedInterval);
+    });
+  });
+
+  describe('toDateRange', () => {
+    it.each([
+      ['today' as DateInterval, intervalToDateRange('today')],
+      ['yesterday' as DateInterval, intervalToDateRange('yesterday')],
+      ['last7Days' as DateInterval, intervalToDateRange('last7Days')],
+      ['last30Days' as DateInterval, intervalToDateRange('last30Days')],
+      ['last90Days' as DateInterval, intervalToDateRange('last90Days')],
+      ['last180Days' as DateInterval, intervalToDateRange('last180Days')],
+      ['last365Days' as DateInterval, intervalToDateRange('last365Days')],
+      ['all' as DateInterval, intervalToDateRange('all')],
+      [{}, {}],
+      [{ startDate: now() }, { startDate: now() }],
+      [{ endDate: now() }, { endDate: now() }],
+      [{ startDate: daysBack(10), endDate: now() }, { startDate: daysBack(10), endDate: now() }],
+    ])('returns properly parsed interval or range', (rangeOrInterval, expectedResult) => {
+      expect(toDateRange(rangeOrInterval)).toEqual(expectedResult);
+    });
+  });
+});