Add unit tests for breakdown card

frontend/packages/ceph-storage-plugin/src/__mocks__/breakdown-data.ts

@@ -0,0 +1,48 @@
+import { humanizeBinaryBytes } from '@console/internal/components/utils';
+
+export const mockData = {
+  top5: [
+    {
+      x: 1,
+      y: 10 * 1000, // 10 MiB
+      label: 'First Data',
+      metric: { namespace: 'default' },
+    },
+    {
+      x: 2,
+      y: 20 * 1000, // 20 MiB
+      label: 'First Data',
+      metric: { namespace: 'default' },
+    },
+    {
+      x: 3,
+      y: 30 * 1000, // 30 MiB
+      label: 'First Data',
+      metric: { namespace: 'default' },
+    },
+    {
+      x: 4,
+      y: 40 * 1000, // 40 MiB
+      label: 'First Data',
+      metric: { namespace: 'default' },
+    },
+    {
+      x: 5,
+      y: 50 * 1000, // 50 MiB
+      label: 'First Data',
+      metric: { namespace: 'default' },
+    },
+  ],
+  capacityTotal: '10000000',
+  metricTotal: '10000000',
+  capacityUsed: '150000',
+  humanize: humanizeBinaryBytes,
+  fakeModel: {
+    abbr: 'fk',
+    kind: 'fake',
+    label: 'Fake',
+    labelPlural: 'Fakes',
+    plural: 'fakes',
+    apiVersion: 'v1',
+  },
+};

frontend/packages/ceph-storage-plugin/src/__tests__/breakdown-body.spec.tsx

@@ -0,0 +1,79 @@
+import * as React from 'react';
+import { ShallowWrapper, shallow } from 'enzyme';
+import {
+  BreakdownBodyProps,
+  BreakdownCardBody,
+} from '../components/dashboard-page/storage-dashboard/breakdown-card/breakdown-body';
+import { getStackChartStats } from '../components/dashboard-page/storage-dashboard/breakdown-card/utils';
+import { mockData } from '../__mocks__/breakdown-data';
+import { BreakdownChart } from '../components/dashboard-page/storage-dashboard/breakdown-card/breakdown-chart';
+import { TotalCapacityBody } from '../components/dashboard-page/storage-dashboard/breakdown-card/breakdown-capacity';
+import { BreakdownChartLoading } from '../components/dashboard-page/storage-dashboard/breakdown-card/breakdown-loading';
+
+const top5MetricsStats = getStackChartStats(mockData.top5, mockData.humanize);
+
+describe('<BreakdownCardBody>', () => {
+  const wrapper: ShallowWrapper<BreakdownBodyProps> = shallow(
+    <BreakdownCardBody
+      isLoading={false}
+      hasLoadError={false}
+      metricTotal={mockData.metricTotal}
+      capacityUsed={mockData.capacityUsed}
+      capacityTotal={mockData.capacityTotal}
+      humanize={mockData.humanize}
+      metricModel={null}
+      top5MetricsStats={top5MetricsStats}
+    />,
+  );
+
+  it('Renders Breakdown Chart', () => {
+    const breakdownChart = wrapper.find(BreakdownChart);
+    expect(breakdownChart.exists()).toBe(true);
+    expect(breakdownChart.props().data.length).toBe(7);
+    // Last is poopped if capacityTotal is available(7 - 1)
+    expect(breakdownChart.props().legends.length).toBe(6);
+    expect(breakdownChart.props().ocsVersion).toBeFalsy();
+  });
+
+  it('Shows used and available capacity', () => {
+    expect(wrapper.find(TotalCapacityBody).exists()).toBe(true);
+    expect(wrapper.find('.capacity-breakdown-card__available-body').exists()).toBe(true);
+  });
+
+  it('Hides available capacity text, legend, stack', () => {
+    wrapper.setProps({ capacityTotal: null });
+    expect(wrapper.find(TotalCapacityBody).exists()).toBe(true);
+    expect(wrapper.find('.capacity-breakdown-card__available-body').exists()).toBe(false);
+    const breakdownChart = wrapper.find(BreakdownChart);
+    expect(breakdownChart.exists()).toBe(true);
+    expect(breakdownChart.props().data.length).toBe(6);
+    expect(breakdownChart.props().legends.length).toBe(6);
+    expect(breakdownChart.props().ocsVersion).toBeFalsy();
+  });
+
+  it('Hides others capacity text, legend, stack', () => {
+    wrapper.setProps({
+      top5MetricsStats: getStackChartStats(mockData.top5.slice(0, 4), mockData.humanize),
+    });
+    const breakdownChart = wrapper.find(BreakdownChart);
+    expect(breakdownChart.exists()).toBe(true);
+    expect(breakdownChart.props().data.length).toBe(4);
+    expect(breakdownChart.props().legends.length).toBe(4);
+    expect(breakdownChart.props().ocsVersion).toBeFalsy();
+  });
+
+  it('Shows usage data warning', () => {
+    wrapper.setProps({ capacityUsed: '0' });
+    expect(wrapper.text()).toBe('Not enough usage data');
+  });
+
+  it('Shows loading state', () => {
+    wrapper.setProps({ isLoading: true });
+    expect(wrapper.find(BreakdownChartLoading).exists()).toBe(true);
+  });
+
+  it('Shows not available', () => {
+    wrapper.setProps({ capacityUsed: null, top5MetricsStats: [], hasLoadError: true });
+    expect(wrapper.text()).toBe('Not available');
+  });
+});

frontend/packages/ceph-storage-plugin/src/__tests__/breakdown-chart.spec.tsx

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { ShallowWrapper, shallow } from 'enzyme';
+import {
+  addAvailable,
+  getStackChartStats,
+  getLegends,
+} from '../components/dashboard-page/storage-dashboard/breakdown-card/utils';
+import { mockData } from '../__mocks__/breakdown-data';
+import {
+  BreakdownChart,
+  BreakdownChartProps,
+  LinkableLegend,
+  LinkableLegendProps,
+} from '../components/dashboard-page/storage-dashboard/breakdown-card/breakdown-chart';
+import { Link } from 'react-router-dom';
+import { Chart, ChartBar } from '@patternfly/react-charts';
+import { Tooltip } from '@patternfly/react-core';
+
+const stackData = getStackChartStats(mockData.top5, mockData.humanize);
+
+const chartData = addAvailable(
+  stackData,
+  mockData.capacityTotal,
+  mockData.capacityUsed,
+  mockData.metricTotal,
+  mockData.humanize,
+);
+
+const legends = getLegends(chartData);
+
+describe('<BreakdownChart>', () => {
+  const wrapper: ShallowWrapper<BreakdownChartProps> = shallow(
+    <BreakdownChart data={chartData} legends={legends} metricModel={mockData.fakeModel} />,
+  );
+
+  it('Renders <Chart>', () => {
+    const chart = wrapper.find(Chart);
+    expect(chart.exists()).toBe(true);
+    expect(chart.find(ChartBar).length).toBe(chartData.length);
+  });
+});
+
+describe('<LinkableLegend>', () => {
+  const wrapper: ShallowWrapper<LinkableLegendProps> = shallow(
+    <LinkableLegend metricModel={mockData.fakeModel} datum={legends[0]} />,
+  );
+
+  it('Renders Link', () => {
+    expect(wrapper.find(Link).exists()).toBe(true);
+  });
+
+  it('Returns tooltip', () => {
+    wrapper.setProps({ datum: { name: ['Other'], link: '#', labels: { fill: '#000' } } });
+    expect(wrapper.find(Tooltip).exists()).toBe(true);
+  });
+});

frontend/packages/ceph-storage-plugin/src/components/dashboard-page/storage-dashboard/breakdown-card/breakdown-body.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Grid, GridItem } from '@patternfly/react-core';
 import { Humanize } from '@console/internal/components/utils';
 import { K8sKind } from '@console/internal/module/k8s';
-import { addAvailable, getCapacityValue, StackDataPoint } from './utils';
+import { addAvailable, getCapacityValue, StackDataPoint, getLegends } from './utils';
 import { BreakdownChart } from './breakdown-chart';
 import { BreakdownChartLoading } from './breakdown-loading';
 import { TotalCapacityBody } from './breakdown-capacity';
@@ -42,13 +42,7 @@ export const BreakdownCardBody: React.FC<BreakdownBodyProps> = ({
     humanize,
   );
 
-  const legends = chartData.map((d: StackDataPoint) => ({
-    name: [d.name, d.label],
-    labels: { fill: d.color },
-    symbol: { fill: d.fill },
-    link: d.link,
-    ns: d.ns,
-  }));
+  const legends = getLegends(chartData);
 
   // Removes Legend for available
   if (capacityTotal) {
@@ -81,7 +75,7 @@ export const BreakdownCardBody: React.FC<BreakdownBodyProps> = ({
   );
 };
 
-type BreakdownBodyProps = {
+export type BreakdownBodyProps = {
   isLoading: boolean;
   hasLoadError: boolean;
   metricTotal: string;