From 28b15e4a85435e6adb6759b95392da526765939d Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Thu, 7 Jul 2022 18:51:58 +0200
Subject: [PATCH] Migrated TagsCards test to react testing library

---
 test/tags/TagsCards.test.tsx | 28 +++++++++-------------------
 1 file changed, 9 insertions(+), 19 deletions(-)

diff --git a/test/tags/TagsCards.test.tsx b/test/tags/TagsCards.test.tsx
index e41e7d5e..6593569a 100644
--- a/test/tags/TagsCards.test.tsx
+++ b/test/tags/TagsCards.test.tsx
@@ -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);
-  });
 });