From b1fec831c529fcee5a1101fd304e5a1af9ea7606 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Fri, 10 Jun 2022 21:35:42 +0200
Subject: [PATCH] Migrated VisitsHeader test to react testing library

---
 test/visits/VisitsHeader.test.tsx | 27 ++++++---------------------
 1 file changed, 6 insertions(+), 21 deletions(-)

diff --git a/test/visits/VisitsHeader.test.tsx b/test/visits/VisitsHeader.test.tsx
index f05cb6a0..73f3f8cc 100644
--- a/test/visits/VisitsHeader.test.tsx
+++ b/test/visits/VisitsHeader.test.tsx
@@ -1,36 +1,21 @@
-import { shallow, ShallowWrapper } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 import { Mock } from 'ts-mockery';
 import { VisitsHeader } from '../../src/visits/VisitsHeader';
 import { Visit } from '../../src/visits/types';
 
 describe('<VisitsHeader />', () => {
-  let wrapper: ShallowWrapper;
   const visits = [Mock.all<Visit>(), Mock.all<Visit>(), Mock.all<Visit>()];
   const title = 'My header title';
   const goBack = jest.fn();
-
-  beforeEach(() => {
-    wrapper = shallow(
-      <VisitsHeader visits={visits} goBack={goBack} title={title} />,
-    );
-  });
-
-  afterEach(() => wrapper.unmount());
-  afterEach(jest.resetAllMocks);
+  const setUp = () => render(<VisitsHeader visits={visits} goBack={goBack} title={title} />);
 
   it('shows the amount of visits', () => {
-    const visitsBadge = wrapper.find('.badge');
-
-    expect(visitsBadge.html()).toContain(
-      `Visits: <span><strong class="short-url-visits-count__amount">${visits.length}</strong></span>`,
-    );
+    const { container } = setUp();
+    expect(container.querySelector('.badge')).toHaveTextContent(`Visits: ${visits.length}`);
   });
 
   it('shows the title in two places', () => {
-    const titles = wrapper.find('.text-center');
-
-    expect(titles).toHaveLength(2);
-    expect(titles.at(0).html()).toContain(title);
-    expect(titles.at(1).html()).toContain(title);
+    setUp();
+    expect(screen.getAllByText(title)).toHaveLength(2);
   });
 });