Merge pull request #2838 from andrewbaldwin44/feature/chart-tests

Add Tests for Web UI Line Chart

locust/webui/src/components/LineChart/LineChart.types.ts

@@ -11,7 +11,7 @@ export interface ILineChart<ChartType> {
   title: string;
   lines: ILine<ChartType>[];
   colors?: string[];
-  chartValueFormatter?: (value: string | number | string[] | number[]) => string | number;
+  chartValueFormatter?: (value?: any) => string | number;
   splitAxis?: boolean;
   yAxisLabels?: string | [string, string];
 }
@@ -27,3 +27,10 @@ export interface ILineChartTimeAxis {
 export interface ILineChartMarkers {
   markers?: string[];
 }
+
+export interface ILineChartTooltipFormatterParams {
+  axisValue: string;
+  color: string;
+  seriesName: string;
+  value: number;
+}

locust/webui/src/components/LineChart/LineChart.utils.ts

@@ -1,19 +1,28 @@
-import { ECharts, DefaultLabelFormatterCallbackParams, TooltipComponentOption } from 'echarts';
+import {
+  ECharts,
+  DefaultLabelFormatterCallbackParams,
+  LineSeriesOption,
+  YAXisComponentOption,
+} from 'echarts';
 
+import { CHART_THEME } from 'components/LineChart/LineChart.constants';
+import {
+  ILineChartTimeAxis,
+  ILineChart,
+  ILineChartZoomEvent,
+  ILineChartTooltipFormatterParams,
+} from 'components/LineChart/LineChart.types';
 import { ICharts } from 'types/ui.types';
 import { formatLocaleString, formatLocaleTime } from 'utils/date';
 
-import { CHART_THEME } from './LineChart.constants';
-import { ILineChartTimeAxis, ILineChart, ILineChartZoomEvent } from './LineChart.types';
-
 export const getSeriesData = <ChartType>({
   charts,
   lines,
-}: Pick<ILineChart<ChartType>, 'charts' | 'lines'>) =>
+}: Pick<ILineChart<ChartType>, 'charts' | 'lines'>): LineSeriesOption[] =>
   lines.map(({ key, name }) => ({
     type: 'line',
     name,
-    data: charts[key],
+    data: charts[key] as LineSeriesOption['data'],
   }));
 
 const Y_AXIS_CONFIG = {
@@ -24,7 +33,9 @@ const Y_AXIS_CONFIG = {
 const createYAxis = <ChartType>({
   splitAxis,
   yAxisLabels,
-}: Pick<ILineChart<ChartType>, 'splitAxis' | 'yAxisLabels'>) => {
+}: Pick<ILineChart<ChartType>, 'splitAxis' | 'yAxisLabels'>):
+  | YAXisComponentOption
+  | YAXisComponentOption[] => {
   if (splitAxis && (!yAxisLabels || Array.isArray(yAxisLabels))) {
     return Array(2)
       .fill(Y_AXIS_CONFIG)
@@ -37,7 +48,7 @@ const createYAxis = <ChartType>({
   return {
     ...Y_AXIS_CONFIG,
     ...(yAxisLabels ? { name: yAxisLabels } : {}),
-  };
+  } as YAXisComponentOption;
 };
 
 export const createOptions = <ChartType extends ILineChartTimeAxis>({
@@ -49,11 +60,7 @@ export const createOptions = <ChartType extends ILineChartTimeAxis>({
   splitAxis,
   yAxisLabels,
 }: ILineChart<ChartType>) => ({
-  title: {
-    text: title,
-    x: 10,
-    y: 10,
-  },
+  title: { text: title },
   dataZoom: [
     {
       type: 'inside',
@@ -63,10 +70,11 @@ export const createOptions = <ChartType extends ILineChartTimeAxis>({
   ],
   tooltip: {
     trigger: 'axis',
-    formatter: (params: TooltipComponentOption) => {
+    formatter: (params?: ILineChartTooltipFormatterParams[] | null) => {
       if (Array.isArray(params) && params.length > 0 && params.some(param => !!param.value)) {
         return params.reduce(
-          (tooltipText, { axisValue, color, seriesName, value }, index) => `
+          (tooltipText, { axisValue, color, seriesName, value }, index) =>
+            `
             ${index === 0 ? formatLocaleString(axisValue) : ''}
             ${tooltipText}
             <br>
@@ -89,7 +97,6 @@ export const createOptions = <ChartType extends ILineChartTimeAxis>({
   },
   yAxis: createYAxis({ splitAxis, yAxisLabels }),
   series: getSeriesData<ChartType>({ charts, lines }),
-  grid: { x: 60, y: 70, x2: 40, y2: 40 },
   color: colors,
   toolbox: {
     feature: {

locust/webui/src/components/LineChart/tests/LineChart.mocks.ts

@@ -0,0 +1,43 @@
+import { ICharts } from 'types/ui.types';
+import { formatLocaleTime } from 'utils/date';
+
+export type MockChartType = Pick<ICharts, 'currentRps' | 'currentFailPerSec' | 'time'>;
+
+export const mockChartLines = [
+  { name: 'RPS', key: 'currentRps' as keyof MockChartType },
+  { name: 'Failures/s', key: 'currentFailPerSec' as keyof MockChartType },
+];
+
+export const mockCharts = {
+  currentRps: [3, 3.1, 3.27, 3.62, 4.19],
+  currentFailPerSec: [0, 0, 0, 0, 0],
+  time: [
+    'Tue, 06 Aug 2024 11:33:02 GMT',
+    'Tue, 06 Aug 2024 11:33:08 GMT',
+    'Tue, 06 Aug 2024 11:33:10 GMT',
+    'Tue, 06 Aug 2024 11:33:12 GMT',
+    'Tue, 06 Aug 2024 11:33:14 GMT',
+  ],
+};
+
+export const mockFormattedTimeAxis = mockCharts.time.map(formatLocaleTime);
+
+export const mockSeriesData = [
+  { type: 'line', name: 'RPS', data: mockCharts.currentRps },
+  { type: 'line', name: 'Failures/s', data: mockCharts.currentFailPerSec },
+];
+
+export const mockTooltipParams = [
+  {
+    axisValue: 'Tue, 06 Aug 2024 11:33:02 GMT',
+    color: '#ff0',
+    seriesName: 'RPS',
+    value: 1,
+  },
+  {
+    axisValue: 'Tue, 06 Aug 2024 11:33:08 GMT',
+    color: '#0ff',
+    seriesName: 'User',
+    value: 10,
+  },
+];

locust/webui/src/components/LineChart/tests/LineChart.test.tsx

@@ -0,0 +1,28 @@
+import { describe, test, expect } from 'vitest';
+
+import LineChart from 'components/LineChart/LineChart';
+import { mockChartLines } from 'components/LineChart/tests/LineChart.mocks';
+import { statsResponseTransformed } from 'test/mocks/statsRequest.mock';
+import { renderWithProvider } from 'test/testUtils';
+import { ICharts } from 'types/ui.types';
+
+const mockChart = {
+  title: 'Total Requests per Second',
+  lines: mockChartLines,
+  colors: ['#00ca5a', '#ff6d6d'],
+};
+
+describe('LineChart', () => {
+  test('renders LineChart with charts and lines', () => {
+    const { container } = renderWithProvider(
+      <LineChart<ICharts>
+        charts={statsResponseTransformed.charts}
+        colors={mockChart.colors}
+        lines={mockChart.lines}
+        title={mockChart.title}
+      />,
+    );
+
+    expect(container.querySelector('canvas')).toBeTruthy();
+  });
+});