diff --git a/frontend/src/container/GridCardLayout/__tests__/GraphManager.test.tsx b/frontend/src/container/GridCardLayout/__tests__/GraphManager.test.tsx index 56691e467883..979ad17ca0f5 100644 --- a/frontend/src/container/GridCardLayout/__tests__/GraphManager.test.tsx +++ b/frontend/src/container/GridCardLayout/__tests__/GraphManager.test.tsx @@ -1,6 +1,6 @@ -// test getGraphManagerTableColumns - -import { render, screen } from 'tests/test-utils'; +/* eslint-disable sonarjs/no-duplicate-string */ +/* eslint-disable react/jsx-props-no-spreading */ +import { render, screen, userEvent } from 'tests/test-utils'; import GraphManager from '../GridCard/FullView/GraphManager'; import { @@ -178,4 +178,161 @@ describe('GraphManager', () => { expect(screen.getByText('83.8 ops/s')).toBeInTheDocument(); expect(screen.getByText('66.2 ops/s')).toBeInTheDocument(); }); + + it('should handle checkbox click correctly', async () => { + const mockToggleGraph = jest.fn(); + const mockSetGraphsVisibilityStates = jest.fn(); + + const testProps: GraphManagerProps = { + data: [ + [1759729380, 1759729440, 1759729500], + [66.167, 76.833, 83.767], + [46.6, 52.7, 70.867], + ], + name: 'test-graph', + yAxisUnit: 'ops', + onToggleModelHandler: jest.fn(), + setGraphsVisibilityStates: mockSetGraphsVisibilityStates, + graphsVisibilityStates: [true, true, true], + lineChartRef: { current: { toggleGraph: mockToggleGraph } }, + parentChartRef: { current: { toggleGraph: mockToggleGraph } }, + options: { + series: [ + { label: 'Timestamp' }, + { label: '{service.name=""}' }, + { label: '{service.name="recommendationservice"}' }, + ], + width: 100, + height: 100, + }, + }; + + render(); + + // Find the first checkbox input (index 1, since index 0 is timestamp) + const checkbox = screen.getAllByRole('checkbox')[0]; + expect(checkbox).toBeInTheDocument(); + + // Simulate checkbox click + await userEvent.click(checkbox); + + // Verify toggleGraph was called on both chart refs + expect(mockToggleGraph).toHaveBeenCalledWith(1, false); + expect(mockToggleGraph).toHaveBeenCalledTimes(2); // lineChartRef and parentChartRef + + // Verify state update function was called + expect(mockSetGraphsVisibilityStates).toHaveBeenCalledWith([ + true, + false, + true, + ]); + }); + + it('should handle label click correctly for visibility toggle', async () => { + const mockToggleGraph = jest.fn(); + const mockSetGraphsVisibilityStates = jest.fn(); + + const testProps: GraphManagerProps = { + data: [ + [1759729380, 1759729440, 1759729500], + [66.167, 76.833, 83.767], + [46.6, 52.7, 70.867], + ], + name: 'test-graph', + yAxisUnit: 'ops', + onToggleModelHandler: jest.fn(), + setGraphsVisibilityStates: mockSetGraphsVisibilityStates, + graphsVisibilityStates: [true, true, true], + lineChartRef: { current: { toggleGraph: mockToggleGraph } }, + parentChartRef: { current: { toggleGraph: mockToggleGraph } }, + options: { + series: [ + { label: 'Timestamp' }, + { label: '{service.name="loadgenerator"}' }, + { label: '{service.name="recommendationservice"}' }, + ], + width: 100, + height: 100, + }, + }; + + render(); + + // Find the first label button (skip Cancel and Save buttons) + const buttons = screen.getAllByRole('button'); + const label = buttons.find((button) => + button.textContent?.includes('{service.name="loadgenerator"}'), + ) as HTMLElement; + expect(label).toBeInTheDocument(); + + // Simulate label click + await userEvent.click(label); + + // Verify setGraphsVisibilityStates was called with show-only behavior + expect(mockSetGraphsVisibilityStates).toHaveBeenCalledWith([ + false, + true, + false, + ]); + + // Check if toggleGraph was called for each series + expect(mockToggleGraph).toHaveBeenCalledWith(0, false); // timestamp + expect(mockToggleGraph).toHaveBeenCalledWith(1, true); // selected series + expect(mockToggleGraph).toHaveBeenCalledWith(2, false); // other series + expect(mockToggleGraph).toHaveBeenCalledTimes(6); // 3 series × 2 chart refs + }); + + it('should handle label click to show all when only one is visible', async () => { + const mockToggleGraph = jest.fn(); + const mockSetGraphsVisibilityStates = jest.fn(); + + const testProps: GraphManagerProps = { + data: [ + [1759729380, 1759729440, 1759729500], + [66.167, 76.833, 83.767], + [46.6, 52.7, 70.867], + ], + name: 'test-graph', + yAxisUnit: 'ops', + onToggleModelHandler: jest.fn(), + setGraphsVisibilityStates: mockSetGraphsVisibilityStates, + graphsVisibilityStates: [false, true, false], // Only one series visible + lineChartRef: { current: { toggleGraph: mockToggleGraph } }, + parentChartRef: { current: { toggleGraph: mockToggleGraph } }, + options: { + series: [ + { label: 'Timestamp' }, + { label: '{service.name=""}' }, + { label: '{service.name="recommendationservice"}' }, + ], + width: 100, + height: 100, + }, + }; + + render(); + + // Find the visible label button (skip Cancel and Save buttons) + const buttons = screen.getAllByRole('button'); + const label = buttons.find((button) => + button.textContent?.includes('{service.name=""}'), + ) as HTMLElement; + expect(label).toBeInTheDocument(); + + // Simulate label click (should show all since only this one is visible) + await userEvent.click(label); + + // Verify setGraphsVisibilityStates was called with show-all behavior + expect(mockSetGraphsVisibilityStates).toHaveBeenCalledWith([ + true, + true, + true, + ]); + + // Check if toggleGraph was called to show all series + expect(mockToggleGraph).toHaveBeenCalledWith(0, true); // timestamp + expect(mockToggleGraph).toHaveBeenCalledWith(1, true); // current series + expect(mockToggleGraph).toHaveBeenCalledWith(2, true); // other series + expect(mockToggleGraph).toHaveBeenCalledTimes(6); // 3 series × 2 chart refs + }); });