chore: fix test notification button styling

frontend/src/container/CreateAlertV2/Footer/styles.scss

@@ -28,6 +28,12 @@
 		background-color: var(--bg-slate-500);
 		border: 1px solid var(--bg-slate-400);
 		color: var(--bg-vanilla-400);
+
+		&:hover:not(:disabled) {
+			.ant-typography {
+				color: inherit;
+			}
+		}
 	}
 }
 
@@ -40,6 +46,12 @@
 			background-color: var(--bg-vanilla-300);
 			border: 1px solid var(--bg-vanilla-400);
 			color: var(--bg-ink-400);
+
+			&:hover:not(:disabled) {
+				.ant-typography {
+					color: inherit;
+				}
+			}
 		}
 
 		.ant-btn-primary {

frontend/src/container/CreateAlertV2/__tests__/utils.test.tsx

@@ -1,13 +1,16 @@
 import { Color } from '@signozhq/design-tokens';
+import { render, screen } from '@testing-library/react';
 import { UniversalYAxisUnit } from 'components/YAxisUnitSelector/types';
 import { PostableAlertRuleV2 } from 'types/api/alerts/alertTypesV2';
 
 import { defaultPostableAlertRuleV2 } from '../constants';
+import * as context from '../context';
 import { INITIAL_ALERT_STATE } from '../context/constants';
 import {
 	AlertThresholdMatchType,
 	AlertThresholdOperator,
 } from '../context/types';
+import { createMockAlertContextState } from '../EvaluationSettings/__tests__/testUtils';
 import {
 	getAdvancedOptionsStateFromAlertDef,
 	getColorForThreshold,
@@ -16,6 +19,7 @@ import {
 	getNotificationSettingsStateFromAlertDef,
 	getThresholdStateFromAlertDef,
 	parseGoTime,
+	Spinner,
 } from '../utils';
 
 describe('CreateAlertV2 utils', () => {
@@ -355,4 +359,48 @@ describe('CreateAlertV2 utils', () => {
 			});
 		});
 	});
+
+	describe('Spinner', () => {
+		it('should return null when not creating or updating or testing alert rule', () => {
+			jest.spyOn(context, 'useCreateAlertState').mockReturnValue(
+				createMockAlertContextState({
+					isCreatingAlertRule: false,
+					isUpdatingAlertRule: false,
+					isTestingAlertRule: false,
+				}),
+			);
+			render(<Spinner />);
+			expect(screen.queryByTestId('spinner')).not.toBeInTheDocument();
+		});
+	});
+
+	it('should return the spinner when creating  alert rule', () => {
+		jest.spyOn(context, 'useCreateAlertState').mockReturnValue(
+			createMockAlertContextState({
+				isCreatingAlertRule: true,
+			}),
+		);
+		render(<Spinner />);
+		expect(screen.getByTestId('spinner')).toBeInTheDocument();
+	});
+
+	it('should return the spinner when updating alert rule', () => {
+		jest.spyOn(context, 'useCreateAlertState').mockReturnValue(
+			createMockAlertContextState({
+				isUpdatingAlertRule: true,
+			}),
+		);
+		render(<Spinner />);
+		expect(screen.getByTestId('spinner')).toBeInTheDocument();
+	});
+
+	it('should return the spinner when testing alert rule', () => {
+		jest.spyOn(context, 'useCreateAlertState').mockReturnValue(
+			createMockAlertContextState({
+				isTestingAlertRule: true,
+			}),
+		);
+		render(<Spinner />);
+		expect(screen.getByTestId('spinner')).toBeInTheDocument();
+	});
 });

frontend/src/container/CreateAlertV2/utils.tsx

@@ -28,12 +28,17 @@ import { EVALUATION_WINDOW_TIMEFRAME } from './EvaluationSettings/constants';
 import { GetCreateAlertLocalStateFromAlertDefReturn } from './types';
 
 export function Spinner(): JSX.Element | null {
-	const { isCreatingAlertRule, isUpdatingAlertRule } = useCreateAlertState();
+	const {
+		isCreatingAlertRule,
+		isUpdatingAlertRule,
+		isTestingAlertRule,
+	} = useCreateAlertState();
 
-	if (!isCreatingAlertRule && !isUpdatingAlertRule) return null;
+	if (!isCreatingAlertRule && !isUpdatingAlertRule && !isTestingAlertRule)
+		return null;
 
 	return createPortal(
-		<div className="sticky-page-spinner">
+		<div className="sticky-page-spinner" data-testid="spinner">
 			<Spin size="large" spinning />
 		</div>,
 		document.body,