From 4999f982e432f456dc8b6a24d499fdc8e6bceca0 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Fri, 13 May 2022 19:59:30 +0200
Subject: [PATCH] Migrated ChartCard test to react testing library

---
 test/visits/charts/ChartCard.test.tsx | 40 ++++++---------------------
 1 file changed, 8 insertions(+), 32 deletions(-)

diff --git a/test/visits/charts/ChartCard.test.tsx b/test/visits/charts/ChartCard.test.tsx
index c9745e59..fce343a2 100644
--- a/test/visits/charts/ChartCard.test.tsx
+++ b/test/visits/charts/ChartCard.test.tsx
@@ -1,46 +1,22 @@
 import { ReactNode } from 'react';
-import { shallow, ShallowWrapper } from 'enzyme';
-import { Card, CardBody, CardHeader, CardFooter } from 'reactstrap';
+import { render, screen } from '@testing-library/react';
 import { ChartCard } from '../../../src/visits/charts/ChartCard';
 
 describe('<ChartCard />', () => {
-  let wrapper: ShallowWrapper;
-  const createWrapper = (title: Function | string = '', footer?: ReactNode) => {
-    wrapper = shallow(<ChartCard title={title} footer={footer} />);
-
-    return wrapper;
-  };
-
-  afterEach(() => wrapper?.unmount());
-
-  it('renders expected components', () => {
-    const wrapper = createWrapper();
-    const card = wrapper.find(Card);
-    const header = wrapper.find(CardHeader);
-    const body = wrapper.find(CardBody);
-    const footer = wrapper.find(CardFooter);
-
-    expect(card).toHaveLength(1);
-    expect(header).toHaveLength(1);
-    expect(body).toHaveLength(1);
-    expect(footer).toHaveLength(0);
-  });
+  const setUp = (title: Function | string = '', footer?: ReactNode) => render(
+    <ChartCard title={title} footer={footer} />,
+  );
 
   it.each([
     ['the title', 'the title'],
     [() => 'the title from func', 'the title from func'],
   ])('properly renders title by parsing provided value', (title, expectedTitle) => {
-    const wrapper = createWrapper(title);
-    const header = wrapper.find(CardHeader);
-
-    expect(header.html()).toContain(expectedTitle);
+    setUp(title);
+    expect(screen.getByText(expectedTitle)).toBeInTheDocument();
   });
 
   it('renders footer only when provided', () => {
-    const wrapper = createWrapper('', 'the footer');
-    const footer = wrapper.find(CardFooter);
-
-    expect(footer).toHaveLength(1);
-    expect(footer.html()).toContain('the footer');
+    setUp('', 'the footer');
+    expect(screen.getByText('the footer')).toBeInTheDocument();
   });
 });