From 6bd628712e8c38cd4927880672c87b46edd35c2c Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Sat, 11 Jun 2022 08:37:10 +0200
Subject: [PATCH] Migrated TagVisitsHeader test to react testing library

---
 test/visits/TagVisitsHeader.test.tsx | 28 ++++++++++------------------
 1 file changed, 10 insertions(+), 18 deletions(-)

diff --git a/test/visits/TagVisitsHeader.test.tsx b/test/visits/TagVisitsHeader.test.tsx
index a48984e9..c9921eb3 100644
--- a/test/visits/TagVisitsHeader.test.tsx
+++ b/test/visits/TagVisitsHeader.test.tsx
@@ -1,35 +1,27 @@
-import { shallow, ShallowWrapper } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 import { Mock } from 'ts-mockery';
-import { Tag } from '../../src/tags/helpers/Tag';
 import { TagVisitsHeader } from '../../src/visits/TagVisitsHeader';
 import { TagVisits } from '../../src/visits/reducers/tagVisits';
 import { ColorGenerator } from '../../src/utils/services/ColorGenerator';
 
 describe('<TagVisitsHeader />', () => {
-  let wrapper: ShallowWrapper;
   const tagVisits = Mock.of<TagVisits>({
     tag: 'foo',
-    visits: [{}, {}, {}],
+    visits: [{}, {}, {}, {}],
   });
   const goBack = jest.fn();
-
-  beforeEach(() => {
-    wrapper = shallow(
-      <TagVisitsHeader tagVisits={tagVisits} goBack={goBack} colorGenerator={Mock.all<ColorGenerator>()} />,
-    );
-  });
-  afterEach(() => wrapper.unmount());
+  const colorGenerator = Mock.of<ColorGenerator>({ isColorLightForKey: () => false, getColorForKey: () => 'red' });
+  const setUp = () => render(<TagVisitsHeader tagVisits={tagVisits} goBack={goBack} colorGenerator={colorGenerator} />);
 
   it('shows expected visits', () => {
-    expect(wrapper.prop('visits')).toEqual(tagVisits.visits);
+    const { container } = setUp();
+
+    expect(screen.getAllByText('Visits for')).toHaveLength(2);
+    expect(container.querySelector('.badge:not(.tag)')).toHaveTextContent(`Visits: ${tagVisits.visits.length}`);
   });
 
   it('shows title for tag', () => {
-    const title = shallow(wrapper.prop('title'));
-    const tag = title.find(Tag).first();
-
-    expect(tag.prop('text')).toEqual(tagVisits.tag);
-
-    title.unmount();
+    const { container } = setUp();
+    expect(container.querySelector('.badge.tag')).toHaveTextContent(tagVisits.tag);
   });
 });