From 66d8a32f499743452bf0618c992f3bc77f26e378 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Mon, 2 May 2022 10:01:29 +0200
Subject: [PATCH] Migrated SimpleCard test to react testing library

---
 src/utils/SimpleCard.tsx       |  2 +-
 test/utils/SimpleCard.test.tsx | 32 +++++++++++++-------------------
 2 files changed, 14 insertions(+), 20 deletions(-)

diff --git a/src/utils/SimpleCard.tsx b/src/utils/SimpleCard.tsx
index f1551f3b..2243037b 100644
--- a/src/utils/SimpleCard.tsx
+++ b/src/utils/SimpleCard.tsx
@@ -8,7 +8,7 @@ interface SimpleCardProps extends Omit<CardProps, 'title'> {
 
 export const SimpleCard = ({ title, children, bodyClassName, ...rest }: SimpleCardProps) => (
   <Card {...rest}>
-    {title && <CardHeader>{title}</CardHeader>}
+    {title && <CardHeader role="heading">{title}</CardHeader>}
     <CardBody className={bodyClassName}>{children}</CardBody>
   </Card>
 );
diff --git a/test/utils/SimpleCard.test.tsx b/test/utils/SimpleCard.test.tsx
index a589c486..b570fc28 100644
--- a/test/utils/SimpleCard.test.tsx
+++ b/test/utils/SimpleCard.test.tsx
@@ -1,30 +1,24 @@
-import { shallow } from 'enzyme';
-import { Card, CardBody, CardHeader } from 'reactstrap';
+import { render, screen } from '@testing-library/react';
 import { SimpleCard } from '../../src/utils/SimpleCard';
 
 describe('<SimpleCard />', () => {
-  it.each([
-    [{}, 0],
-    [{ title: 'Cool title' }, 1],
-  ])('renders header only if title is provided', (props, expectedAmountOfHeaders) => {
-    const wrapper = shallow(<SimpleCard {...props} />);
+  it('does not render title if not provided', () => {
+    render(<SimpleCard />);
+    expect(screen.queryByRole('heading')).not.toBeInTheDocument();
+  });
 
-    expect(wrapper.find(CardHeader)).toHaveLength(expectedAmountOfHeaders);
+  it('renders provided title', () => {
+    render(<SimpleCard title="Cool title" />);
+    expect(screen.getByRole('heading')).toHaveTextContent('Cool title');
   });
 
   it('renders children inside body', () => {
-    const wrapper = shallow(<SimpleCard>Hello world</SimpleCard>);
-    const body = wrapper.find(CardBody);
-
-    expect(body).toHaveLength(1);
-    expect(body.html()).toContain('Hello world');
+    render(<SimpleCard>Hello world</SimpleCard>);
+    expect(screen.getByText('Hello world')).toBeInTheDocument();
   });
 
-  it('passes extra props to nested card', () => {
-    const wrapper = shallow(<SimpleCard className="foo" color="primary">Hello world</SimpleCard>);
-    const card = wrapper.find(Card);
-
-    expect(card.prop('className')).toEqual('foo');
-    expect(card.prop('color')).toEqual('primary');
+  it.each(['primary', 'danger', 'warning'])('passes extra props to nested card', (color) => {
+    const { container } = render(<SimpleCard className="foo" color={color}>Hello world</SimpleCard>);
+    expect(container.firstChild).toHaveAttribute('class', `foo card bg-${color}`);
   });
 });