From 9791486341e4b25923eb05069ae37c40e4831744 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Sat, 25 Sep 2021 10:57:42 +0200
Subject: [PATCH] Created TagsTableRow test

---
 src/tags/TagsTableRow.tsx       |  2 +-
 test/tags/TagsTableRow.test.tsx | 78 +++++++++++++++++++++++++++++++++
 2 files changed, 79 insertions(+), 1 deletion(-)
 create mode 100644 test/tags/TagsTableRow.test.tsx

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<TagModalProps>, EditTagMo
         </DropdownBtnMenu>
       </td>
 
-      <DeleteTagConfirmModal tag={tag} toggle={toggleDelete} isOpen={isDeleteModalOpen} />
       <EditTagModal tag={tag} toggle={toggleEdit} isOpen={isEditModalOpen} />
+      <DeleteTagConfirmModal tag={tag} toggle={toggleDelete} isOpen={isDeleteModalOpen} />
     </tr>
   );
 };
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('<TagsTableRow />', () => {
+  const DeleteTagConfirmModal = () => null;
+  const EditTagModal = () => null;
+  const TagsTableRow = createTagsTableRow(DeleteTagConfirmModal, EditTagModal);
+  let wrapper: ShallowWrapper;
+  const createWrapper = (tagStats?: TagStats) => {
+    wrapper = shallow(
+      <TagsTableRow
+        tag="foo&bar"
+        tagStats={tagStats}
+        selectedServer={Mock.of<ReachableServer>({ id: 'abc123' })}
+        colorGenerator={Mock.all<ColorGenerator>()}
+      />,
+    );
+
+    return wrapper;
+  };
+
+  afterEach(() => wrapper?.unmount());
+
+  it.each([
+    [ undefined, '0', '0' ],
+    [ Mock.of<TagStats>({ 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);
+  });
+});