diff --git a/src/tags/TagsTableRow.tsx b/src/tags/TagsTableRow.tsx index 04fb29f1..dff5f936 100644 --- a/src/tags/TagsTableRow.tsx +++ b/src/tags/TagsTableRow.tsx @@ -52,8 +52,8 @@ export const TagsTableRow = (DeleteTagConfirmModal: FC, EditTagMo - + ); }; diff --git a/test/tags/TagsTableRow.test.tsx b/test/tags/TagsTableRow.test.tsx new file mode 100644 index 00000000..b5ae6a2d --- /dev/null +++ b/test/tags/TagsTableRow.test.tsx @@ -0,0 +1,78 @@ +import { shallow, ShallowWrapper } from 'enzyme'; +import { Mock } from 'ts-mockery'; +import { Link } from 'react-router-dom'; +import { DropdownItem } from 'reactstrap'; +import { TagsTableRow as createTagsTableRow } from '../../src/tags/TagsTableRow'; +import { ReachableServer } from '../../src/servers/data'; +import ColorGenerator from '../../src/utils/services/ColorGenerator'; +import { TagStats } from '../../src/tags/data'; +import { DropdownBtnMenu } from '../../src/utils/DropdownBtnMenu'; + +describe('', () => { + const DeleteTagConfirmModal = () => null; + const EditTagModal = () => null; + const TagsTableRow = createTagsTableRow(DeleteTagConfirmModal, EditTagModal); + let wrapper: ShallowWrapper; + const createWrapper = (tagStats?: TagStats) => { + wrapper = shallow( + ({ id: 'abc123' })} + colorGenerator={Mock.all()} + />, + ); + + return wrapper; + }; + + afterEach(() => wrapper?.unmount()); + + it.each([ + [ undefined, '0', '0' ], + [ Mock.of({ shortUrlsCount: 10, visitsCount: 3480 }), '10', '3,480' ], + ])('shows expected tag stats', (stats, expectedShortUrls, expectedVisits) => { + const wrapper = createWrapper(stats); + const links = wrapper.find(Link); + const shortUrlsLink = links.first(); + const visitsLink = links.last(); + + expect(shortUrlsLink.prop('children')).toEqual(expectedShortUrls); + expect(shortUrlsLink.prop('to')).toEqual(`/server/abc123/list-short-urls/1?tag=${encodeURIComponent('foo&bar')}`); + expect(visitsLink.prop('children')).toEqual(expectedVisits); + expect(visitsLink.prop('to')).toEqual('/server/abc123/tag/foo&bar/visits'); + }); + + it('allows toggling dropdown menu', () => { + const wrapper = createWrapper(); + + expect(wrapper.find(DropdownBtnMenu).prop('isOpen')).toEqual(false); + (wrapper.find(DropdownBtnMenu).prop('toggle') as Function)(); + expect(wrapper.find(DropdownBtnMenu).prop('isOpen')).toEqual(true); + }); + + it('allows toggling modals through dropdown items', () => { + const wrapper = createWrapper(); + const items = wrapper.find(DropdownItem); + + expect(wrapper.find(EditTagModal).prop('isOpen')).toEqual(false); + items.first().simulate('click'); + expect(wrapper.find(EditTagModal).prop('isOpen')).toEqual(true); + + expect(wrapper.find(DeleteTagConfirmModal).prop('isOpen')).toEqual(false); + items.last().simulate('click'); + expect(wrapper.find(DeleteTagConfirmModal).prop('isOpen')).toEqual(true); + }); + + it('allows toggling modals through the modals themselves', () => { + const wrapper = createWrapper(); + + expect(wrapper.find(EditTagModal).prop('isOpen')).toEqual(false); + (wrapper.find(EditTagModal).prop('toggle') as Function)(); // eslint-disable-line @typescript-eslint/no-unnecessary-type-assertion + expect(wrapper.find(EditTagModal).prop('isOpen')).toEqual(true); + + expect(wrapper.find(DeleteTagConfirmModal).prop('isOpen')).toEqual(false); + (wrapper.find(DeleteTagConfirmModal).prop('toggle') as Function)(); // eslint-disable-line @typescript-eslint/no-unnecessary-type-assertion + expect(wrapper.find(DeleteTagConfirmModal).prop('isOpen')).toEqual(true); + }); +});