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

Move shlink-web-component tests to their own folder

Browse Source
This commit is contained in:
Alejandro Celaya
2023-08-02 09:01:44 +02:00
parent c48facc863
commit c794ff8b58
124 changed files with 455 additions and 371 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
test/utils/dates/DateInput.test.tsx
View File

@@ -1,45 +0,0 @@
import { screen, waitFor } from '@testing-library/react';
import { fromPartial } from '@total-typescript/shoehorn';
import { parseISO } from 'date-fns';
import type { DateInputProps } from '../../../shlink-web-component/src/utils/dates/DateInput';
import { DateInput } from '../../../shlink-web-component/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);
});
});

56
test/utils/dates/DateIntervalDropdownItems.test.tsx
View File

@@ -1,56 +0,0 @@
import { screen, waitFor } from '@testing-library/react';
import { DropdownBtn } from '../../../shlink-frontend-kit/src/navigation/DropdownBtn';
import type { DateInterval } from '../../../shlink-web-component/src/utils/dates/helpers/dateIntervals';
import { DATE_INTERVALS, rangeOrIntervalToString } from '../../../shlink-web-component/src/utils/dates/helpers/dateIntervals';
import { DateIntervalDropdownItems } from '../../../src/utils/dates/DateIntervalDropdownItems';
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);
});
});

7
test/utils/dates/DateIntervalSelector.test.tsx
View File

@@ -1,7 +1,6 @@
import { screen, waitFor } from '@testing-library/react';
import type { DateInterval } from '../../../shlink-web-component/src/utils/dates/helpers/dateIntervals';
import { rangeOrIntervalToString } from '../../../shlink-web-component/src/utils/dates/helpers/dateIntervals';
import { DateIntervalSelector } from '../../../src/utils/dates/DateIntervalSelector';
import type { DateInterval } from '../../../src/utils/dates/DateIntervalSelector';
import { DateIntervalSelector, INTERVAL_TO_STRING_MAP } from '../../../src/utils/dates/DateIntervalSelector';
import { renderWithEvents } from '../../__helpers__/setUpTest';
describe('<DateIntervalSelector />', () => {
@@ -20,7 +19,7 @@ describe('<DateIntervalSelector />', () => {
const items = screen.getAllByRole('menuitem');
expect(btn).toHaveTextContent(rangeOrIntervalToString(activeInterval) ?? '');
expect(btn).toHaveTextContent(INTERVAL_TO_STRING_MAP[activeInterval] ?? '');
expect(items).toHaveLength(8);
});
});

32
test/utils/dates/DateRangeRow.test.tsx
View File

@@ -1,32 +0,0 @@
import { screen } from '@testing-library/react';
import { DateRangeRow } from '../../../shlink-web-component/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();
});
});

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

@@ -1,68 +0,0 @@
import { screen, waitFor } from '@testing-library/react';
import { fromPartial } from '@total-typescript/shoehorn';
import type { DateRangeSelectorProps } from '../../../shlink-web-component/src/utils/dates/DateRangeSelector';
import { DateRangeSelector } from '../../../shlink-web-component/src/utils/dates/DateRangeSelector';
import type { DateInterval } from '../../../shlink-web-component/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);
});
});

23
test/utils/dates/Time.test.tsx
View File

@@ -1,23 +0,0 @@
import { render } from '@testing-library/react';
import { parseDate } from '../../../shlink-web-component/src/utils/dates/helpers/date';
import type { TimeProps } from '../../../shlink-web-component/src/utils/dates/Time';
import { Time } from '../../../shlink-web-component/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');
});
});