From 89f830d9bbea21c01d3b833322efd91032500dbc Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Sat, 28 May 2022 12:33:50 +0200
Subject: [PATCH] Migrated DoughnutChartLegend test to react testing library

---
 .../charts/DoughnutChartLegend.test.tsx       | 23 +++++++++++--------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/test/visits/charts/DoughnutChartLegend.test.tsx b/test/visits/charts/DoughnutChartLegend.test.tsx
index 0e7f1b42..58f63ab3 100644
--- a/test/visits/charts/DoughnutChartLegend.test.tsx
+++ b/test/visits/charts/DoughnutChartLegend.test.tsx
@@ -1,11 +1,11 @@
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 import { Mock } from 'ts-mockery';
 import { Chart, ChartDataset } from 'chart.js';
 import { DoughnutChartLegend } from '../../../src/visits/charts/DoughnutChartLegend';
 
 describe('<DoughnutChartLegend />', () => {
   const labels = ['foo', 'bar', 'baz', 'foo2', 'bar2'];
-  const colors = ['foo_color', 'bar_color', 'baz_color'];
+  const colors = ['green', 'blue', 'yellow'];
   const defaultColor = 'red';
   const datasets = [Mock.of<ChartDataset>({ backgroundColor: colors })];
   const chart = Mock.of<Chart>({
@@ -16,18 +16,21 @@ describe('<DoughnutChartLegend />', () => {
   });
 
   it('renders the expected amount of items with expected colors and labels', () => {
-    const wrapper = shallow(<DoughnutChartLegend chart={chart} />);
-    const items = wrapper.find('li');
+    render(<DoughnutChartLegend chart={chart} />);
+
+    const items = screen.getAllByRole('listitem');
 
     expect.assertions(labels.length * 2 + 1);
     expect(items).toHaveLength(labels.length);
-    labels.forEach((label, index) => {
-      const item = items.at(index);
 
-      expect(item.find('.doughnut-chart-legend__item-color').prop('style')).toEqual({
-        backgroundColor: colors[index] ?? defaultColor,
-      });
-      expect(item.find('.doughnut-chart-legend__item-text').text()).toEqual(label);
+    labels.forEach((label, index) => {
+      const item = items[index];
+
+      expect(item.querySelector('.doughnut-chart-legend__item-color')).toHaveAttribute(
+        'style',
+        `background-color: ${colors[index] ?? defaultColor};`,
+      );
+      expect(item.querySelector('.doughnut-chart-legend__item-text')).toHaveTextContent(label);
     });
   });
 });