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

Added some tests for new tags components

Browse Source
This commit is contained in:
Alejandro Celaya
2021-09-24 19:55:26 +02:00
parent 304a7431ad
commit 2f76c5381f
6 changed files with 115 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
test/tags/TagsCards.test.tsx Normal file
View File

@@ -0,0 +1,37 @@
import { shallow, ShallowWrapper } from 'enzyme';
import { Mock } from 'ts-mockery';
import { TagsCards as createTagsCards } from '../../src/tags/TagsCards';
import { TagsList } from '../../src/tags/reducers/tagsList';
import { SelectedServer } from '../../src/servers/data';
import { rangeOf } from '../../src/utils/utils';
describe('<TagsCards />', () => {
const amountOfTags = 10;
const tagsList = Mock.of<TagsList>({ filteredTags: rangeOf(amountOfTags, (i) => `tag_${i}`), stats: {} });
const TagCard = () => null;
const TagsCards = createTagsCards(TagCard);
let wrapper: ShallowWrapper;
beforeEach(() => {
wrapper = shallow(<TagsCards tagsList={tagsList} selectedServer={Mock.all<SelectedServer>()} />);
});
afterEach(() => wrapper?.unmount());
it('renders the proper amount of groups and cards based on the amount of tags', () => {
const amountOfGroups = 4;
const cards = wrapper.find(TagCard);
const groups = wrapper.find('.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)(); // eslint-disable-line @typescript-eslint/no-unnecessary-type-assertion
expect(card().prop('displayed')).toEqual(true);
});
});

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

@@ -3,19 +3,19 @@ import { identity } from 'ramda';
import { Mock } from 'ts-mockery';
import createTagsList, { TagsListProps } from '../../src/tags/TagsList';
import Message from '../../src/utils/Message';
import SearchField from '../../src/utils/SearchField';
import { rangeOf } from '../../src/utils/utils';
import { TagsList } from '../../src/tags/reducers/tagsList';
import { MercureBoundProps } from '../../src/mercure/helpers/boundToMercureHub';
import { Result } from '../../src/utils/Result';
import { TagsModeDropdown } from '../../src/tags/TagsModeDropdown';
import SearchField from '../../src/utils/SearchField';
describe('<TagsList />', () => {
let wrapper: ShallowWrapper;
const filterTags = jest.fn();
const TagCard = () => null;
const TagsCards = () => null;
const TagsTable = () => null;
const TagsListComp = createTagsList(TagsCards, TagsTable);
const createWrapper = (tagsList: Partial<TagsList>) => {
const TagsListComp = createTagsList(TagCard);
wrapper = shallow(
<TagsListComp
{...Mock.all<TagsListProps>()}
@@ -56,28 +56,23 @@ describe('<TagsList />', () => {
expect(msg.html()).toContain('No tags found');
});
it('renders the proper amount of groups and cards based on the amount of tags', () => {
const amountOfTags = 10;
const amountOfGroups = 4;
const wrapper = createWrapper({ filteredTags: rangeOf(amountOfTags, (i) => `tag_${i}`), stats: {} });
const cards = wrapper.find(TagCard);
const groups = wrapper.find('.col-md-6');
it('renders proper component based on the display mode', () => {
const wrapper = createWrapper({ filteredTags: [ 'foo', 'bar' ], stats: {} });
expect(cards).toHaveLength(amountOfTags);
expect(groups).toHaveLength(amountOfGroups);
expect(wrapper.find(TagsCards)).toHaveLength(1);
expect(wrapper.find(TagsTable)).toHaveLength(0);
wrapper.find(TagsModeDropdown).simulate('change');
expect(wrapper.find(TagsCards)).toHaveLength(0);
expect(wrapper.find(TagsTable)).toHaveLength(1);
});
it('triggers tags filtering when search field changes', (done) => {
it('triggers tags filtering when search field changes', () => {
const wrapper = createWrapper({ filteredTags: [] });
const searchField = wrapper.find(SearchField);
expect(searchField).toHaveLength(1);
expect(filterTags).not.toHaveBeenCalled();
searchField.simulate('change');
setImmediate(() => {
expect(filterTags).toHaveBeenCalledTimes(1);
done();
});
wrapper.find(SearchField).simulate('change');
expect(filterTags).toHaveBeenCalledTimes(1);
});
});