Add test for TemporaryAlert (#81416)

packages/grafana-o11y-ds-frontend/src/TemporaryAlert.test.tsx

@@ -0,0 +1,28 @@
+import { act, render, screen } from '@testing-library/react';
+import React from 'react';
+
+import { TemporaryAlert } from './TemporaryAlert';
+
+describe('TemporaryAlert', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.runOnlyPendingTimers();
+    jest.useRealTimers();
+  });
+
+  it('full component life cycle', async () => {
+    render(<TemporaryAlert severity="error" text="" />);
+    expect(screen.queryByTestId('data-testid Alert error')).not.toBeInTheDocument();
+
+    render(<TemporaryAlert severity="error" text="Error message" />);
+    expect(screen.getByTestId('data-testid Alert error')).toBeInTheDocument();
+    expect(screen.getByText('Error message')).toBeInTheDocument();
+
+    act(() => jest.runAllTimers());
+    expect(screen.queryByTestId('data-testid Alert error')).not.toBeInTheDocument();
+    expect(screen.queryByText('Error message')).not.toBeInTheDocument();
+  });
+});

packages/grafana-o11y-ds-frontend/src/TemporaryAlert.tsx

@@ -27,7 +27,14 @@ const timeoutMap = {
   ['warning']: AlertTimeout.Warning,
 };
 
-export const TemporaryAlert = (props: { severity: AlertVariant; text: string }) => {
+type AlertProps = {
+  // Severity of the alert. Controls the style of the alert (e.g., background color)
+  severity: AlertVariant;
+  // Displayed message. If set to empty string, the alert is not displayed
+  text: string;
+};
+
+export const TemporaryAlert = (props: AlertProps) => {
   const style = getStyle(useTheme2());
   const [visible, setVisible] = useState(false);
   const [timer, setTimer] = useState<NodeJS.Timeout>();