From 20e2f3006bda11096b57b9decbb4250cd4cd93d4 Mon Sep 17 00:00:00 2001
From: Fabrizio <135109076+fabrizio-grafana@users.noreply.github.com>
Date: Mon, 29 Jan 2024 11:00:11 +0100
Subject: [PATCH] Add test for `TemporaryAlert` (#81416)

---
 .../src/TemporaryAlert.test.tsx               | 28 +++++++++++++++++++
 .../src/TemporaryAlert.tsx                    |  9 +++++-
 2 files changed, 36 insertions(+), 1 deletion(-)
 create mode 100644 packages/grafana-o11y-ds-frontend/src/TemporaryAlert.test.tsx

diff --git a/packages/grafana-o11y-ds-frontend/src/TemporaryAlert.test.tsx b/packages/grafana-o11y-ds-frontend/src/TemporaryAlert.test.tsx
new file mode 100644
index 00000000000..c8ae7b1c1a4
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/packages/grafana-o11y-ds-frontend/src/TemporaryAlert.tsx b/packages/grafana-o11y-ds-frontend/src/TemporaryAlert.tsx
index 84a09bdee78..cabc3e3c493 100644
--- a/packages/grafana-o11y-ds-frontend/src/TemporaryAlert.tsx
+++ b/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>();