Refactored components used to render charts for visits

test/visits/charts/DoughnutChart.test.tsx

@@ -0,0 +1,47 @@
+import { shallow, ShallowWrapper } from 'enzyme';
+import { Doughnut } from 'react-chartjs-2';
+import { keys, values } from 'ramda';
+import { DoughnutChart } from '../../../src/visits/charts/DoughnutChart';
+
+describe.skip('<DoughnutChart />', () => {
+  let wrapper: ShallowWrapper;
+  const stats = {
+    foo: 123,
+    bar: 456,
+  };
+
+  afterEach(() => wrapper?.unmount());
+
+  it('renders Doughnut with expected props', () => {
+    wrapper = shallow(<DoughnutChart stats={stats} />);
+    const doughnut = wrapper.find(Doughnut);
+    const cols = wrapper.find('.col-sm-12');
+
+    expect(doughnut).toHaveLength(1);
+
+    const { labels, datasets } = doughnut.prop('data');
+    const [{ data, backgroundColor, borderColor }] = datasets;
+    const { plugins, scales } = doughnut.prop('options') ?? {};
+
+    expect(labels).toEqual(keys(stats));
+    expect(data).toEqual(values(stats));
+    expect(datasets).toHaveLength(1);
+    expect(backgroundColor).toEqual([
+      '#97BBCD',
+      '#F7464A',
+      '#46BFBD',
+      '#FDB45C',
+      '#949FB1',
+      '#57A773',
+      '#414066',
+      '#08B2E3',
+      '#B6C454',
+      '#DCDCDC',
+      '#463730',
+    ]);
+    expect(borderColor).toEqual('white');
+    expect(plugins.legend).toEqual({ display: false });
+    expect(scales).toBeUndefined();
+    expect(cols).toHaveLength(2);
+  });
+});