From 30f502a51bdd127fb8e72f53e7e3f18d3f4759a0 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Sun, 5 Jun 2022 10:19:08 +0200
Subject: [PATCH] Migrated HighlightCard test to react testing library

---
 test/servers/helpers/HighlightCard.test.tsx | 50 ++++++++-------------
 1 file changed, 18 insertions(+), 32 deletions(-)

diff --git a/test/servers/helpers/HighlightCard.test.tsx b/test/servers/helpers/HighlightCard.test.tsx
index 52815fd9..199fe4c9 100644
--- a/test/servers/helpers/HighlightCard.test.tsx
+++ b/test/servers/helpers/HighlightCard.test.tsx
@@ -1,32 +1,23 @@
-import { shallow, ShallowWrapper } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 import { ReactNode } from 'react';
-import { Card, CardText, CardTitle } from 'reactstrap';
-import { Link } from 'react-router-dom';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { MemoryRouter } from 'react-router-dom';
 import { HighlightCard, HighlightCardProps } from '../../../src/servers/helpers/HighlightCard';
 
 describe('<HighlightCard />', () => {
-  let wrapper: ShallowWrapper;
-  const createWrapper = (props: HighlightCardProps & { children?: ReactNode }) => {
-    wrapper = shallow(<HighlightCard {...props} />);
-
-    return wrapper;
-  };
-
-  afterEach(() => wrapper?.unmount());
+  const setUp = (props: HighlightCardProps & { children?: ReactNode }) => render(
+    <MemoryRouter>
+      <HighlightCard {...props} />
+    </MemoryRouter>,
+  );
 
   it.each([
     [undefined],
     [false],
-  ])('renders expected components', (link) => {
-    const wrapper = createWrapper({ title: 'foo', link: link as undefined | false });
+  ])('does not render icon when there is no link', (link) => {
+    setUp({ title: 'foo', link: link as undefined | false });
 
-    expect(wrapper.find(Card)).toHaveLength(1);
-    expect(wrapper.find(CardTitle)).toHaveLength(1);
-    expect(wrapper.find(CardText)).toHaveLength(1);
-    expect(wrapper.find(FontAwesomeIcon)).toHaveLength(0);
-    expect(wrapper.prop('tag')).not.toEqual(Link);
-    expect(wrapper.prop('to')).not.toBeDefined();
+    expect(screen.queryByRole('img', { hidden: true })).not.toBeInTheDocument();
+    expect(screen.queryByRole('link')).not.toBeInTheDocument();
   });
 
   it.each([
@@ -34,10 +25,8 @@ describe('<HighlightCard />', () => {
     ['bar'],
     ['baz'],
   ])('renders provided title', (title) => {
-    const wrapper = createWrapper({ title });
-    const cardTitle = wrapper.find(CardTitle);
-
-    expect(cardTitle.html()).toContain(`>${title}<`);
+    setUp({ title });
+    expect(screen.getByText(title)).toHaveAttribute('class', expect.stringContaining('highlight-card__title'));
   });
 
   it.each([
@@ -45,10 +34,8 @@ describe('<HighlightCard />', () => {
     ['bar'],
     ['baz'],
   ])('renders provided children', (children) => {
-    const wrapper = createWrapper({ title: 'foo', children });
-    const cardText = wrapper.find(CardText);
-
-    expect(cardText.html()).toContain(`>${children}<`);
+    setUp({ title: 'title', children });
+    expect(screen.getByText(children)).toHaveAttribute('class', expect.stringContaining('card-text'));
   });
 
   it.each([
@@ -56,10 +43,9 @@ describe('<HighlightCard />', () => {
     ['bar'],
     ['baz'],
   ])('adds extra props when a link is provided', (link) => {
-    const wrapper = createWrapper({ title: 'foo', link });
+    setUp({ title: 'title', link });
 
-    expect(wrapper.find(FontAwesomeIcon)).toHaveLength(1);
-    expect(wrapper.prop('tag')).toEqual(Link);
-    expect(wrapper.prop('to')).toEqual(link);
+    expect(screen.getByRole('img', { hidden: true })).toBeInTheDocument();
+    expect(screen.getByRole('link')).toHaveAttribute('href', `/${link}`);
   });
 });