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

Removed references to tags cards

Browse Source
This commit is contained in:
Alejandro Celaya
2022-12-17 19:56:58 +01:00
parent 0312a0911c
commit 37caa1ad19
12 changed files with 15 additions and 381 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
test/settings/TagsSettings.test.tsx
View File

@@ -1,9 +1,8 @@
import { screen } from '@testing-library/react';
import { Mock } from 'ts-mockery';
import { Settings, TagsMode, TagsSettings as TagsSettingsOptions } from '../../src/settings/reducers/settings';
import { Settings, TagsSettings as TagsSettingsOptions } from '../../src/settings/reducers/settings';
import { TagsSettings } from '../../src/settings/TagsSettings';
import { TagsOrder } from '../../src/tags/data/TagsListChildrenProps';
import { capitalize } from '../../src/utils/utils';
import { renderWithEvents } from '../__helpers__/setUpTest';
describe('<TagsSettings />', () => {
@@ -17,35 +16,10 @@ describe('<TagsSettings />', () => {
it('renders expected amount of groups', () => {
setUp();
expect(screen.getByText('Default display mode when managing tags:')).toBeInTheDocument();
expect(screen.getByText('Default ordering for tags list:')).toBeInTheDocument();
expect(screen.getByRole('button', { name: 'Order by...' })).toBeInTheDocument();
});
it.each([
[undefined, 'cards'],
[{}, 'cards'],
[{ defaultMode: 'cards' as TagsMode }, 'cards'],
[{ defaultMode: 'list' as TagsMode }, 'list'],
])('shows expected tags displaying mode', (tags, expectedMode) => {
const { container } = setUp(tags);
expect(screen.getByRole('button', { name: capitalize(expectedMode) })).toBeInTheDocument();
expect(container.querySelector('.form-text')).toHaveTextContent(`Tags will be displayed as ${expectedMode}.`);
});
it.each([
['cards' as TagsMode],
['list' as TagsMode],
])('invokes setTagsSettings when tags mode changes', async (defaultMode) => {
const { user } = setUp();
expect(setTagsSettings).not.toHaveBeenCalled();
await user.click(screen.getByText('List'));
await user.click(screen.getByRole('menuitem', { name: capitalize(defaultMode) }));
expect(setTagsSettings).toHaveBeenCalledWith({ defaultMode });
});
it.each([
[undefined, 'Order by...'],
[{}, 'Order by...'],

57
test/tags/TagCard.test.tsx
View File

@@ -1,57 +0,0 @@
import { screen } from '@testing-library/react';
import { MemoryRouter } from 'react-router-dom';
import { Mock } from 'ts-mockery';
import { TagCard as createTagCard } from '../../src/tags/TagCard';
import { ReachableServer } from '../../src/servers/data';
import { renderWithEvents } from '../__helpers__/setUpTest';
import { colorGeneratorMock } from '../utils/services/__mocks__/ColorGenerator.mock';
describe('<TagCard />', () => {
const TagCard = createTagCard(
({ isOpen }) => <span>DeleteTagConfirmModal {isOpen ? '[Open]' : '[Closed]'}</span>,
({ isOpen }) => <span>EditTagModal {isOpen ? '[Open]' : '[Closed]'}</span>,
colorGeneratorMock,
);
const setUp = (tag = 'ssr') => renderWithEvents(
<MemoryRouter>
<TagCard
tag={{ tag, visits: 23257, shortUrls: 48 }}
selectedServer={Mock.of<ReachableServer>({ id: '1' })}
displayed
toggle={() => {}}
/>
</MemoryRouter>,
);
afterEach(jest.resetAllMocks);
it.each([
['ssr', '/server/1/list-short-urls/1?tags=ssr', '/server/1/tag/ssr/visits'],
['ssr-&-foo', '/server/1/list-short-urls/1?tags=ssr-%26-foo', '/server/1/tag/ssr-&-foo/visits'],
])('shows expected links for provided tags', (tag, shortUrlsLink, visitsLink) => {
setUp(tag);
expect(screen.getByText('48').parentNode).toHaveAttribute('href', shortUrlsLink);
expect(screen.getByText('23,257').parentNode).toHaveAttribute('href', visitsLink);
});
it('displays delete modal when delete btn is clicked', async () => {
const { user } = setUp();
expect(screen.getByText(/^DeleteTagConfirmModal/)).not.toHaveTextContent('[Open]');
expect(screen.getByText(/^DeleteTagConfirmModal/)).toHaveTextContent('[Closed]');
await user.click(screen.getByLabelText('Delete tag'));
expect(screen.getByText(/^DeleteTagConfirmModal/)).toHaveTextContent('[Open]');
expect(screen.getByText(/^DeleteTagConfirmModal/)).not.toHaveTextContent('[Closed]');
});
it('displays edit modal when edit btn is clicked', async () => {
const { user } = setUp();
expect(screen.getByText(/^EditTagModal/)).not.toHaveTextContent('[Open]');
expect(screen.getByText(/^EditTagModal/)).toHaveTextContent('[Closed]');
await user.click(screen.getByLabelText('Edit tag'));
expect(screen.getByText(/^EditTagModal/)).toHaveTextContent('[Open]');
expect(screen.getByText(/^EditTagModal/)).not.toHaveTextContent('[Closed]');
});
});

26
test/tags/TagsCards.test.tsx
View File

@@ -1,26 +0,0 @@
import { screen } from '@testing-library/react';
import { Mock } from 'ts-mockery';
import { TagsCards as createTagsCards } from '../../src/tags/TagsCards';
import { SelectedServer } from '../../src/servers/data';
import { rangeOf } from '../../src/utils/utils';
import { NormalizedTag } from '../../src/tags/data';
import { renderWithEvents } from '../__helpers__/setUpTest';
describe('<TagsCards />', () => {
const amountOfTags = 10;
const sortedTags = rangeOf(amountOfTags, (i) => Mock.of<NormalizedTag>({ tag: `tag_${i}` }));
const TagsCards = createTagsCards(() => <span>TagCard</span>);
const setUp = () => renderWithEvents(
<TagsCards sortedTags={sortedTags} selectedServer={Mock.all<SelectedServer>()} />,
);
it('renders the proper amount of groups and cards based on the amount of tags', () => {
const { container } = setUp();
const amountOfGroups = 4;
const cards = screen.getAllByText('TagCard');
const groups = container.querySelectorAll('.col-md-6');
expect(cards).toHaveLength(amountOfTags);
expect(groups).toHaveLength(amountOfGroups);
});
});

15
test/tags/TagsList.test.tsx
View File

@@ -9,7 +9,7 @@ import { renderWithEvents } from '../__helpers__/setUpTest';
describe('<TagsList />', () => {
const filterTags = jest.fn();
const TagsListComp = createTagsList(() => <>TagsCards</>, () => <>TagsTable</>);
const TagsListComp = createTagsList(() => <>TagsTable</>);
const setUp = (tagsList: Partial<TagsList>) => renderWithEvents(
<TagsListComp
{...Mock.all<TagsListProps>()}
@@ -45,19 +45,6 @@ describe('<TagsList />', () => {
expect(screen.queryByText('Loading')).not.toBeInTheDocument();
});
it('renders proper component based on the display mode', async () => {
const { user } = setUp({ filteredTags: ['foo', 'bar'], stats: {} });
expect(screen.getByText('TagsCards')).toBeInTheDocument();
expect(screen.queryByText('TagsTable')).not.toBeInTheDocument();
await user.click(screen.getByRole('button', { name: /^Display mode/ }));
await user.click(screen.getByRole('menuitem', { name: /List/ }));
expect(screen.queryByText('TagsCards')).not.toBeInTheDocument();
expect(screen.getByText('TagsTable')).toBeInTheDocument();
});
it('triggers tags filtering when search field changes', async () => {
const { user } = setUp({ filteredTags: [] });

34
test/tags/TagsModeDropdown.test.tsx
View File

@@ -1,34 +0,0 @@
import { screen } from '@testing-library/react';
import { TagsModeDropdown } from '../../src/tags/TagsModeDropdown';
import { TagsMode } from '../../src/settings/reducers/settings';
import { renderWithEvents } from '../__helpers__/setUpTest';
describe('<TagsModeDropdown />', () => {
const onChange = jest.fn();
const setUp = (mode: TagsMode) => renderWithEvents(<TagsModeDropdown mode={mode} onChange={onChange} />);
afterEach(jest.clearAllMocks);
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', 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();
await clickItem(0);
expect(onChange).toHaveBeenCalledWith('cards');
await clickItem(1);
expect(onChange).toHaveBeenCalledWith('list');
});
});