Created PieChartLegend test

src/visits/helpers/PieChartLegend.scss

@@ -1,6 +1,6 @@
 @import '../../utils/base';
 
-.default-chart__pie-chart-legend {
+.pie-chart-legend {
   list-style-type: none;
   padding: 0;
   margin: 0;
@@ -10,11 +10,11 @@
   }
 }
 
-.default-chart__pie-chart-legend-item:not(:first-child) {
+.pie-chart-legend__item:not(:first-child) {
   margin-top: .3rem;
 }
 
-.default-chart__pie-chart-legend-item-color {
+.pie-chart-legend__item-color {
   width: 20px;
   min-width: 20px;
   height: 20px;
@@ -22,7 +22,7 @@
   border-radius: 10px;
 }
 
-.default-chart__pie-chart-legend-item-text {
+.pie-chart-legend__item-text {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;

src/visits/helpers/PieChartLegend.tsx

@@ -2,21 +2,25 @@ import { FC } from 'react';
 import { Chart } from 'chart.js';
 import './PieChartLegend.scss';
 
-export const PieChartLegend: FC<{ chart: Chart }> = ({ chart }) => {
+interface PieChartLegendProps {
+  chart: Chart;
+}
+
+export const PieChartLegend: FC<PieChartLegendProps> = ({ chart }) => {
   const { config } = chart;
   const { labels = [], datasets = [] } = config.data ?? {};
-  const { defaultColor } = config.options ?? {} as any;
   const [{ backgroundColor: colors }] = datasets;
+  const { defaultColor } = config.options ?? {} as any;
 
   return (
-    <ul className="default-chart__pie-chart-legend">
+    <ul className="pie-chart-legend">
       {(labels as string[]).map((label, index) => (
-        <li key={label} className="default-chart__pie-chart-legend-item d-flex">
+        <li key={label} className="pie-chart-legend__item d-flex">
           <div
-            className="default-chart__pie-chart-legend-item-color"
-            style={{ backgroundColor: (colors as string[])[index] || defaultColor }}
+            className="pie-chart-legend__item-color"
+            style={{ backgroundColor: (colors as string[])[index] ?? defaultColor }}
           />
-          <small className="default-chart__pie-chart-legend-item-text flex-fill">{label}</small>
+          <small className="pie-chart-legend__item-text flex-fill">{label}</small>
         </li>
       ))}
     </ul>

test/visits/helpers/PieChartLegend.test.tsx

@@ -0,0 +1,33 @@
+import { shallow } from 'enzyme';
+import { Mock } from 'ts-mockery';
+import { Chart, ChartDataset } from 'chart.js';
+import { PieChartLegend } from '../../../src/visits/helpers/PieChartLegend';
+
+describe('<PieChartLegend />', () => {
+  const labels = [ 'foo', 'bar', 'baz', 'foo2', 'bar2' ];
+  const colors = [ 'foo_color', 'bar_color', 'baz_color' ];
+  const defaultColor = 'red';
+  const datasets = [ Mock.of<ChartDataset>({ backgroundColor: colors }) ];
+  const chart = Mock.of<Chart>({
+    config: {
+      data: { labels, datasets },
+      options: { defaultColor } as any,
+    },
+  });
+
+  test('renders the expected amount of items with expected colors and labels', () => {
+    const wrapper = shallow(<PieChartLegend chart={chart} />);
+    const items = wrapper.find('li');
+
+    expect.assertions(labels.length * 2 + 1);
+    expect(items).toHaveLength(labels.length);
+    labels.forEach((label, index) => {
+      const item = items.at(index);
+
+      expect(item.find('.pie-chart-legend__item-color').prop('style')).toEqual({
+        backgroundColor: colors[index] ?? defaultColor,
+      });
+      expect(item.find('.pie-chart-legend__item-text').text()).toEqual(label);
+    });
+  });
+});