chore: add tests for delete button visibility

frontend/src/components/QueryBuilderV2/QueryBuilderV2.tsx

@@ -179,7 +179,7 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 							isListViewPanel={isListViewPanel}
 							onSignalSourceChange={onSignalSourceChange || ((): void => {})}
 							signalSourceChangeEnabled={signalSourceChangeEnabled}
-							queriesCount={1}
+							canDelete={false}
 						/>
 					) : (
 						currentQuery.builder.queryData.map((query, index) => (
@@ -201,7 +201,7 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 								signalSource={query.source as 'meter' | ''}
 								onSignalSourceChange={onSignalSourceChange || ((): void => {})}
 								signalSourceChangeEnabled={signalSourceChangeEnabled}
-								queriesCount={currentQuery.builder.queryData.length}
+								canDelete={currentQuery.builder.queryData.length > 1}
 							/>
 						))
 					)}

frontend/src/components/QueryBuilderV2/QueryV2/QueryV2.tsx

@@ -41,11 +41,11 @@ export const QueryV2 = forwardRef(function QueryV2(
 		isMultiQueryAllowed = false,
 		onSignalSourceChange,
 		signalSourceChangeEnabled = false,
-		queriesCount = 1,
+		canDelete = false,
 	}: QueryProps & {
 		onSignalSourceChange: (value: string) => void;
 		signalSourceChangeEnabled: boolean;
-		queriesCount: number;
+		canDelete: boolean;
 	},
 	ref: ForwardedRef<HTMLDivElement>,
 ): JSX.Element {
@@ -201,7 +201,7 @@ export const QueryV2 = forwardRef(function QueryV2(
 												icon: <Copy size={14} />,
 												onClick: handleCloneEntity,
 											},
-											...(queriesCount && queriesCount > 1
+											...(canDelete
 												? [
 														{
 															label: 'Delete',

frontend/src/components/QueryBuilderV2/QueryV2/__tests__/QueryV2.test.tsx

@@ -0,0 +1,126 @@
+import {
+	initialQueriesMap,
+	initialQueryBuilderFormValues,
+	PANEL_TYPES,
+} from 'constants/queryBuilder';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';
+import { render, screen, userEvent, waitFor } from 'tests/test-utils';
+
+import { QueryBuilderV2Provider } from '../../QueryBuilderV2Context';
+import { QueryV2 } from '../QueryV2';
+
+jest.mock('hooks/queryBuilder/useQueryBuilder');
+jest.mock('hooks/queryBuilder/useQueryBuilderOperations');
+
+jest.mock('container/QueryBuilder/components/QBEntityOptions/QBEntityOptions');
+
+jest.mock('../QuerySearch/QuerySearch');
+
+jest.mock('../MetricsSelect/MetricsSelect');
+
+jest.mock('../MerticsAggregateSection/MetricsAggregateSection');
+
+jest.mock('../QueryAggregation/QueryAggregation');
+
+jest.mock('../QueryAddOns/QueryAddOns');
+
+jest.mock(
+	'container/QueryBuilder/filters/QueryBuilderSearchV2/SpanScopeSelector',
+);
+
+const mockUseQueryBuilder = jest.mocked(useQueryBuilder);
+const mockUseQueryOperations = jest.mocked(useQueryOperations);
+
+describe('QueryV2', () => {
+	const mockHandleDeleteQuery = jest.fn();
+	const mockHandleChangeQueryData = jest.fn();
+	const mockHandleQueryFunctionsUpdates = jest.fn();
+	const mockHandleChangeDataSource = jest.fn();
+	const mockOnSignalSourceChange = jest.fn();
+
+	beforeEach(() => {
+		mockUseQueryBuilder.mockReturnValue({
+			cloneQuery: jest.fn(),
+			panelType: PANEL_TYPES.TIME_SERIES,
+			updateAllQueriesOperators: jest.fn(() => initialQueriesMap.metrics),
+		} as any);
+
+		mockUseQueryOperations.mockReturnValue({
+			handleDeleteQuery: mockHandleDeleteQuery,
+			handleChangeQueryData: mockHandleChangeQueryData,
+			handleQueryFunctionsUpdates: mockHandleQueryFunctionsUpdates,
+			handleChangeDataSource: mockHandleChangeDataSource,
+			operators: [],
+			spaceAggregationOptions: [],
+		} as any);
+	});
+
+	afterEach(() => {
+		jest.clearAllMocks();
+	});
+
+	it('should show delete button when canDelete is true', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+		const { container } = render(
+			<QueryBuilderV2Provider>
+				<QueryV2
+					isAvailableToDisable={false}
+					index={0}
+					query={initialQueryBuilderFormValues}
+					isMultiQueryAllowed
+					canDelete
+					version="v5"
+					onSignalSourceChange={mockOnSignalSourceChange}
+					signalSourceChangeEnabled={false}
+					filterConfigs={{}}
+				/>
+			</QueryBuilderV2Provider>,
+		);
+
+		const dropdown = container.querySelector('.query-actions-dropdown');
+		expect(dropdown).toBeInTheDocument();
+
+		const trigger = dropdown?.firstElementChild as HTMLElement;
+		expect(trigger).toBeTruthy();
+		await user.click(trigger);
+
+		await waitFor(() => {
+			expect(screen.getByText('Delete')).toBeInTheDocument();
+		});
+	});
+
+	it('should hide delete button when canDelete is false', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+		const { container } = render(
+			<QueryBuilderV2Provider>
+				<QueryV2
+					isAvailableToDisable={false}
+					index={0}
+					query={initialQueryBuilderFormValues}
+					isMultiQueryAllowed
+					canDelete={false}
+					version="v5"
+					onSignalSourceChange={mockOnSignalSourceChange}
+					signalSourceChangeEnabled={false}
+					filterConfigs={{}}
+				/>
+			</QueryBuilderV2Provider>,
+		);
+
+		const dropdown = container.querySelector('.query-actions-dropdown');
+		expect(dropdown).toBeInTheDocument();
+
+		const trigger = dropdown?.firstElementChild as HTMLElement;
+		expect(trigger).toBeTruthy();
+		await user.click(trigger);
+
+		await waitFor(() => {
+			expect(screen.getByText('Clone')).toBeInTheDocument();
+		});
+
+		expect(screen.queryByText('Delete')).not.toBeInTheDocument();
+	});
+});