mirror of
https://github.com/shlinkio/shlink-web-client.git
synced 2025-01-10 18:27:25 +03:00
Merge pull request #680 from acelaya-forks/feature/testing-lib
Feature/testing lib
This commit is contained in:
Alejandro Celaya
GitHub
commit
498668929f
6 changed files with 78 additions and 130 deletions
|
|
@ -43,7 +43,7 @@ export const CreateShortUrlResult = (useTimeoutToggle: TimeoutToggle) => (
|
|||
return (
|
||||
<Result type="success" className="mt-3">
|
||||
{canBeClosed && <FontAwesomeIcon icon={closeIcon} className="float-end pointer" onClick={resetCreateShortUrl} />}
|
||||
<b>Great!</b> The short URL is <b>{shortUrl}</b>
|
||||
<span><b>Great!</b> The short URL is <b>{shortUrl}</b></span>
|
||||
|
||||
<CopyToClipboard text={shortUrl} onCopy={setShowCopyTooltip}>
|
||||
<button
|
||||
|
|
|
|||
|
|
@ -1,56 +1,41 @@
|
|||
import { shallow, ShallowWrapper } from 'enzyme';
|
||||
import CopyToClipboard from 'react-copy-to-clipboard';
|
||||
import { Tooltip } from 'reactstrap';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { Mock } from 'ts-mockery';
|
||||
import { CreateShortUrlResult as createResult } from '../../../src/short-urls/helpers/CreateShortUrlResult';
|
||||
import { ShortUrl } from '../../../src/short-urls/data';
|
||||
import { TimeoutToggle } from '../../../src/utils/helpers/hooks';
|
||||
import { Result } from '../../../src/utils/Result';
|
||||
|
||||
describe('<CreateShortUrlResult />', () => {
|
||||
let wrapper: ShallowWrapper;
|
||||
const copyToClipboard = jest.fn();
|
||||
const useTimeoutToggle = jest.fn(() => [false, copyToClipboard]) as TimeoutToggle;
|
||||
const CreateShortUrlResult = createResult(useTimeoutToggle);
|
||||
const createWrapper = (result: ShortUrl | null = null, error = false) => {
|
||||
wrapper = shallow(
|
||||
<CreateShortUrlResult resetCreateShortUrl={() => {}} result={result} error={error} saving={false} />,
|
||||
);
|
||||
|
||||
return wrapper;
|
||||
};
|
||||
const setUp = (result: ShortUrl | null = null, error = false) => ({
|
||||
user: userEvent.setup(),
|
||||
...render(<CreateShortUrlResult resetCreateShortUrl={() => {}} result={result} error={error} saving={false} />),
|
||||
});
|
||||
|
||||
afterEach(jest.clearAllMocks);
|
||||
afterEach(() => wrapper?.unmount());
|
||||
|
||||
it('renders an error when error is true', () => {
|
||||
const wrapper = createWrapper(Mock.all<ShortUrl>(), true);
|
||||
const errorCard = wrapper.find(Result).filterWhere((result) => result.prop('type') === 'error');
|
||||
|
||||
expect(errorCard).toHaveLength(1);
|
||||
expect(errorCard.html()).toContain('An error occurred while creating the URL :(');
|
||||
setUp(Mock.all<ShortUrl>(), true);
|
||||
expect(screen.getByText('An error occurred while creating the URL :(')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders nothing when no result is provided', () => {
|
||||
const wrapper = createWrapper();
|
||||
|
||||
expect(wrapper.html()).toBeNull();
|
||||
const { container } = setUp();
|
||||
expect(container.firstChild).toBeNull();
|
||||
});
|
||||
|
||||
it('renders a result message when result is provided', () => {
|
||||
const wrapper = createWrapper(Mock.of<ShortUrl>({ shortUrl: 'https://doma.in/abc123' }));
|
||||
|
||||
expect(wrapper.html()).toContain('<b>Great!</b> The short URL is <b>https://doma.in/abc123</b>');
|
||||
expect(wrapper.find(CopyToClipboard)).toHaveLength(1);
|
||||
expect(wrapper.find(Tooltip)).toHaveLength(1);
|
||||
setUp(Mock.of<ShortUrl>({ shortUrl: 'https://doma.in/abc123' }));
|
||||
expect(screen.getByText(/The short URL is/)).toHaveTextContent('Great! The short URL is https://doma.in/abc123');
|
||||
});
|
||||
|
||||
it('Invokes tooltip timeout when copy to clipboard button is clicked', () => {
|
||||
const wrapper = createWrapper(Mock.of<ShortUrl>({ shortUrl: 'https://doma.in/abc123' }));
|
||||
const copyBtn = wrapper.find(CopyToClipboard);
|
||||
it('Invokes tooltip timeout when copy to clipboard button is clicked', async () => {
|
||||
const { user } = setUp(Mock.of<ShortUrl>({ shortUrl: 'https://doma.in/abc123' }));
|
||||
|
||||
expect(copyToClipboard).not.toHaveBeenCalled();
|
||||
copyBtn.simulate('copy');
|
||||
await user.click(screen.getByRole('button'));
|
||||
expect(copyToClipboard).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,51 +1,44 @@
|
|||
import { Mock } from 'ts-mockery';
|
||||
import { shallow, ShallowWrapper } from 'enzyme';
|
||||
import { render, screen, waitForElementToBeRemoved } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { MemoryRouter } from 'react-router-dom';
|
||||
import { ReportExporter } from '../../../src/common/services/ReportExporter';
|
||||
import { ExportShortUrlsBtn as createExportShortUrlsBtn } from '../../../src/short-urls/helpers/ExportShortUrlsBtn';
|
||||
import { NotFoundServer, ReachableServer, SelectedServer } from '../../../src/servers/data';
|
||||
|
||||
jest.mock('react-router-dom', () => ({
|
||||
...jest.requireActual('react-router-dom'),
|
||||
useNavigate: jest.fn().mockReturnValue(jest.fn()),
|
||||
useParams: jest.fn().mockReturnValue({}),
|
||||
useLocation: jest.fn().mockReturnValue({}),
|
||||
}));
|
||||
|
||||
describe('<ExportShortUrlsBtn />', () => {
|
||||
const listShortUrls = jest.fn();
|
||||
const buildShlinkApiClient = jest.fn().mockReturnValue({ listShortUrls });
|
||||
const exportShortUrls = jest.fn();
|
||||
const reportExporter = Mock.of<ReportExporter>({ exportShortUrls });
|
||||
const ExportShortUrlsBtn = createExportShortUrlsBtn(buildShlinkApiClient, reportExporter);
|
||||
let wrapper: ShallowWrapper;
|
||||
const createWrapper = (amount?: number, selectedServer?: SelectedServer) => {
|
||||
wrapper = shallow(
|
||||
<ExportShortUrlsBtn selectedServer={selectedServer ?? Mock.all<SelectedServer>()} amount={amount} />,
|
||||
);
|
||||
|
||||
return wrapper;
|
||||
};
|
||||
const setUp = (amount?: number, selectedServer?: SelectedServer) => ({
|
||||
user: userEvent.setup(),
|
||||
...render(
|
||||
<MemoryRouter>
|
||||
<ExportShortUrlsBtn selectedServer={selectedServer ?? Mock.all<SelectedServer>()} amount={amount} />
|
||||
</MemoryRouter>,
|
||||
),
|
||||
});
|
||||
|
||||
afterEach(jest.clearAllMocks);
|
||||
afterEach(() => wrapper?.unmount());
|
||||
|
||||
it.each([
|
||||
[undefined, 0],
|
||||
[1, 1],
|
||||
[4578, 4578],
|
||||
[undefined, '0'],
|
||||
[1, '1'],
|
||||
[4578, '4,578'],
|
||||
])('renders expected amount', (amount, expectedAmount) => {
|
||||
const wrapper = createWrapper(amount);
|
||||
|
||||
expect(wrapper.prop('amount')).toEqual(expectedAmount);
|
||||
setUp(amount);
|
||||
expect(screen.getByText(/Export/)).toHaveTextContent(`Export (${expectedAmount})`);
|
||||
});
|
||||
|
||||
it.each([
|
||||
[null],
|
||||
[Mock.of<NotFoundServer>()],
|
||||
])('does nothing on click if selected server is not reachable', (selectedServer) => {
|
||||
const wrapper = createWrapper(0, selectedServer);
|
||||
])('does nothing on click if selected server is not reachable', async (selectedServer) => {
|
||||
const { user } = setUp(0, selectedServer);
|
||||
|
||||
wrapper.simulate('click');
|
||||
await user.click(screen.getByRole('button'));
|
||||
expect(listShortUrls).not.toHaveBeenCalled();
|
||||
expect(exportShortUrls).not.toHaveBeenCalled();
|
||||
});
|
||||
|
|
@ -58,13 +51,13 @@ describe('<ExportShortUrlsBtn />', () => {
|
|||
[41, 3],
|
||||
[385, 20],
|
||||
])('loads proper amount of pages based on the amount of results', async (amount, expectedPageLoads) => {
|
||||
const wrapper = createWrapper(amount, Mock.of<ReachableServer>({ id: '123' }));
|
||||
|
||||
listShortUrls.mockResolvedValue({ data: [] });
|
||||
const { user } = setUp(amount, Mock.of<ReachableServer>({ id: '123' }));
|
||||
|
||||
await (wrapper.prop('onClick') as Function)();
|
||||
await user.click(screen.getByRole('button'));
|
||||
await waitForElementToBeRemoved(() => screen.getByText('Exporting...'));
|
||||
|
||||
expect(listShortUrls).toHaveBeenCalledTimes(expectedPageLoads);
|
||||
expect(exportShortUrls).toHaveBeenCalledTimes(1);
|
||||
expect(exportShortUrls).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,43 +1,28 @@
|
|||
import { shallow, ShallowWrapper } from 'enzyme';
|
||||
import { UncontrolledTooltip } from 'reactstrap';
|
||||
import { render } from '@testing-library/react';
|
||||
import { Mock } from 'ts-mockery';
|
||||
import { ShortUrlVisitsCount } from '../../../src/short-urls/helpers/ShortUrlVisitsCount';
|
||||
import { ShortUrl } from '../../../src/short-urls/data';
|
||||
|
||||
describe('<ShortUrlVisitsCount />', () => {
|
||||
let wrapper: ShallowWrapper;
|
||||
|
||||
const createWrapper = (visitsCount: number, shortUrl: ShortUrl) => {
|
||||
wrapper = shallow(<ShortUrlVisitsCount visitsCount={visitsCount} shortUrl={shortUrl} />);
|
||||
|
||||
return wrapper;
|
||||
};
|
||||
|
||||
afterEach(() => wrapper?.unmount());
|
||||
const setUp = (visitsCount: number, shortUrl: ShortUrl) => render(
|
||||
<ShortUrlVisitsCount visitsCount={visitsCount} shortUrl={shortUrl} />,
|
||||
);
|
||||
|
||||
it.each([undefined, {}])('just returns visits when no maxVisits is provided', (meta) => {
|
||||
const visitsCount = 45;
|
||||
const wrapper = createWrapper(visitsCount, Mock.of<ShortUrl>({ meta }));
|
||||
const maxVisitsHelper = wrapper.find('.short-urls-visits-count__max-visits-control');
|
||||
const maxVisitsTooltip = wrapper.find(UncontrolledTooltip);
|
||||
const { container } = setUp(visitsCount, Mock.of<ShortUrl>({ meta }));
|
||||
|
||||
expect(wrapper.html()).toEqual(
|
||||
`<span><strong class="short-url-visits-count__amount">${visitsCount}</strong></span>`,
|
||||
);
|
||||
expect(maxVisitsHelper).toHaveLength(0);
|
||||
expect(maxVisitsTooltip).toHaveLength(0);
|
||||
expect(container.firstChild).toHaveTextContent(`${visitsCount}`);
|
||||
expect(container.querySelector('.short-urls-visits-count__max-visits-control')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('displays the maximum amount of visits when present', () => {
|
||||
const visitsCount = 45;
|
||||
const maxVisits = 500;
|
||||
const meta = { maxVisits };
|
||||
const wrapper = createWrapper(visitsCount, Mock.of<ShortUrl>({ meta }));
|
||||
const maxVisitsHelper = wrapper.find('.short-urls-visits-count__max-visits-control');
|
||||
const maxVisitsTooltip = wrapper.find(UncontrolledTooltip);
|
||||
const { container } = setUp(visitsCount, Mock.of<ShortUrl>({ meta }));
|
||||
|
||||
expect(wrapper.html()).toContain(`/ ${maxVisits}`);
|
||||
expect(maxVisitsHelper).toHaveLength(1);
|
||||
expect(maxVisitsTooltip).toHaveLength(1);
|
||||
expect(container.firstChild).toHaveTextContent(`/ ${maxVisits}`);
|
||||
expect(container.querySelector('.short-urls-visits-count__max-visits-control')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import { shallow, ShallowWrapper } from 'enzyme';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { Mock } from 'ts-mockery';
|
||||
import { TagsCards as createTagsCards } from '../../src/tags/TagsCards';
|
||||
import { SelectedServer } from '../../src/servers/data';
|
||||
|
|
@ -8,30 +9,19 @@ import { NormalizedTag } from '../../src/tags/data';
|
|||
describe('<TagsCards />', () => {
|
||||
const amountOfTags = 10;
|
||||
const sortedTags = rangeOf(amountOfTags, (i) => Mock.of<NormalizedTag>({ tag: `tag_${i}` }));
|
||||
const TagCard = () => null;
|
||||
const TagsCards = createTagsCards(TagCard);
|
||||
let wrapper: ShallowWrapper;
|
||||
|
||||
beforeEach(() => {
|
||||
wrapper = shallow(<TagsCards sortedTags={sortedTags} selectedServer={Mock.all<SelectedServer>()} />);
|
||||
const TagsCards = createTagsCards(() => <span>TagCard</span>);
|
||||
const setUp = () => ({
|
||||
user: userEvent.setup(),
|
||||
...render(<TagsCards sortedTags={sortedTags} selectedServer={Mock.all<SelectedServer>()} />),
|
||||
});
|
||||
|
||||
afterEach(() => wrapper?.unmount());
|
||||
|
||||
it('renders the proper amount of groups and cards based on the amount of tags', () => {
|
||||
const { container } = setUp();
|
||||
const amountOfGroups = 4;
|
||||
const cards = wrapper.find(TagCard);
|
||||
const groups = wrapper.find('.col-md-6');
|
||||
const cards = screen.getAllByText('TagCard');
|
||||
const groups = container.querySelectorAll('.col-md-6');
|
||||
|
||||
expect(cards).toHaveLength(amountOfTags);
|
||||
expect(groups).toHaveLength(amountOfGroups);
|
||||
});
|
||||
|
||||
it('displays card on toggle', () => {
|
||||
const card = () => wrapper.find(TagCard).at(5);
|
||||
|
||||
expect(card().prop('displayed')).toEqual(false);
|
||||
(card().prop('toggle') as Function)();
|
||||
expect(card().prop('displayed')).toEqual(true);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,42 +1,37 @@
|
|||
import { shallow, ShallowWrapper } from 'enzyme';
|
||||
import { DropdownItem } from 'reactstrap';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { faBars as listIcon, faThLarge as cardsIcon } from '@fortawesome/free-solid-svg-icons';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { TagsModeDropdown } from '../../src/tags/TagsModeDropdown';
|
||||
import { DropdownBtn } from '../../src/utils/DropdownBtn';
|
||||
import { TagsMode } from '../../src/settings/reducers/settings';
|
||||
|
||||
describe('<TagsModeDropdown />', () => {
|
||||
const onChange = jest.fn();
|
||||
let wrapper: ShallowWrapper;
|
||||
|
||||
beforeEach(() => {
|
||||
wrapper = shallow(<TagsModeDropdown mode="list" onChange={onChange} />);
|
||||
const setUp = (mode: TagsMode) => ({
|
||||
user: userEvent.setup(),
|
||||
...render(<TagsModeDropdown mode={mode} onChange={onChange} />),
|
||||
});
|
||||
|
||||
afterEach(jest.clearAllMocks);
|
||||
afterEach(() => wrapper?.unmount());
|
||||
|
||||
it('renders expected items', () => {
|
||||
const btn = wrapper.find(DropdownBtn);
|
||||
const items = wrapper.find(DropdownItem);
|
||||
const icons = wrapper.find(FontAwesomeIcon);
|
||||
|
||||
expect(btn).toHaveLength(1);
|
||||
expect(btn.prop('text')).toEqual('Display mode: list');
|
||||
expect(items).toHaveLength(2);
|
||||
expect(icons).toHaveLength(2);
|
||||
expect(icons.first().prop('icon')).toEqual(cardsIcon);
|
||||
expect(icons.last().prop('icon')).toEqual(listIcon);
|
||||
it.each([
|
||||
['cards' as TagsMode],
|
||||
['list' as TagsMode],
|
||||
])('renders expected initial value', (mode) => {
|
||||
setUp(mode);
|
||||
expect(screen.getByRole('button')).toHaveTextContent(`Display mode: ${mode}`);
|
||||
});
|
||||
|
||||
it('changes active element on click', () => {
|
||||
const items = wrapper.find(DropdownItem);
|
||||
it('changes active element on click', async () => {
|
||||
const { user } = setUp('list');
|
||||
const clickItem = async (index: 0 | 1) => {
|
||||
await user.click(screen.getByRole('button'));
|
||||
await user.click(screen.getAllByRole('menuitem')[index]);
|
||||
};
|
||||
|
||||
expect(onChange).not.toHaveBeenCalled();
|
||||
items.first().simulate('click');
|
||||
await clickItem(0);
|
||||
expect(onChange).toHaveBeenCalledWith('cards');
|
||||
|
||||
items.last().simulate('click');
|
||||
await clickItem(1);
|
||||
expect(onChange).toHaveBeenCalledWith('list');
|
||||
});
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in a new issue