From 31b30129a587f8700225e28f0b953c4b1e02a051 Mon Sep 17 00:00:00 2001
From: Aaron Chong <aaronchongth@gmail.com>
Date: Wed, 18 Dec 2024 17:17:45 +0800
Subject: [PATCH] alert-dialog

Signed-off-by: Aaron Chong <aaronchongth@gmail.com>
---
 .../src/components/alert-manager.test.tsx     | 48 ++++++++++++++++++-
 .../src/components/alert-manager.tsx          |  7 ++-
 2 files changed, 51 insertions(+), 4 deletions(-)

diff --git a/packages/rmf-dashboard-framework/src/components/alert-manager.test.tsx b/packages/rmf-dashboard-framework/src/components/alert-manager.test.tsx
index 17e526cf3..59e474e18 100644
--- a/packages/rmf-dashboard-framework/src/components/alert-manager.test.tsx
+++ b/packages/rmf-dashboard-framework/src/components/alert-manager.test.tsx
@@ -1,9 +1,53 @@
+import { AlertRequest, ApiServerModelsAlertsAlertRequestTier } from 'api-client';
 import React from 'react';
-import { describe, it, vi } from 'vitest';
+import { describe, expect, it, vi } from 'vitest';
 
 import { RmfApiProvider } from '../hooks';
 import { MockRmfApi, render, TestProviders } from '../utils/test-utils.test';
-import { AlertManager } from './alert-manager';
+import { AlertDialog, AlertManager } from './alert-manager';
+
+describe('Alert dialog', () => {
+  const rmfApi = new MockRmfApi();
+  rmfApi.alertsApi.getAlertResponseAlertsRequestAlertIdResponseGet = vi
+    .fn()
+    .mockResolvedValue({ data: [] });
+  rmfApi.tasksApi.getTaskLogTasksTaskIdLogGet = () => new Promise(() => {});
+
+  const Base = (props: React.PropsWithChildren<{}>) => {
+    return (
+      <TestProviders>
+        <RmfApiProvider value={rmfApi}>{props.children}</RmfApiProvider>
+      </TestProviders>
+    );
+  };
+
+  it('renders without crashing', () => {
+    const alertRequest: AlertRequest = {
+      id: 'test-alert',
+      unix_millis_alert_time: 0,
+      title: 'Test Alert',
+      subtitle: 'Test subtitle',
+      message: 'This is a test alert',
+      tier: ApiServerModelsAlertsAlertRequestTier.Error,
+      responses_available: ['ok'],
+      display: true,
+      task_id: 'test-task',
+      alert_parameters: [],
+    };
+    const onDismiss = vi.fn();
+
+    const root = render(
+      <Base>
+        <AlertDialog alertRequest={alertRequest} onDismiss={onDismiss} />
+      </Base>,
+    );
+    expect(root.getByText('Test Alert')).toBeTruthy();
+    expect(root.getByText('This is a test alert')).toBeTruthy();
+    expect(root.getByTestId('test-alert-ok-button')).toBeTruthy();
+    expect(root.getByTestId('task-cancel-button')).toBeTruthy();
+    expect(root.getByTestId('dismiss-button')).toBeTruthy();
+  });
+});
 
 describe('Alert manager', () => {
   const rmfApi = new MockRmfApi();
diff --git a/packages/rmf-dashboard-framework/src/components/alert-manager.tsx b/packages/rmf-dashboard-framework/src/components/alert-manager.tsx
index 54aeeaf23..4b52c6283 100644
--- a/packages/rmf-dashboard-framework/src/components/alert-manager.tsx
+++ b/packages/rmf-dashboard-framework/src/components/alert-manager.tsx
@@ -22,12 +22,12 @@ import { useAppController, useRmfApi } from '../hooks';
 import { AppEvents } from './app-events';
 import { TaskCancelButton } from './tasks/task-cancellation';
 
-interface AlertDialogProps {
+export interface AlertDialogProps {
   alertRequest: AlertRequest;
   onDismiss: () => void;
 }
 
-const AlertDialog = React.memo((props: AlertDialogProps) => {
+export const AlertDialog = React.memo((props: AlertDialogProps) => {
   const { alertRequest, onDismiss } = props;
   const [isOpen, setIsOpen] = React.useState(true);
   const { showAlert } = useAppController();
@@ -196,6 +196,7 @@ const AlertDialog = React.memo((props: AlertDialogProps) => {
               variant="contained"
               autoFocus
               key={`${alertRequest.id}-${response}`}
+              data-testid={`${alertRequest.id}-${response}-button`}
               sx={{
                 fontSize: '1rem',
                 padding: '6px 12px',
@@ -211,6 +212,7 @@ const AlertDialog = React.memo((props: AlertDialogProps) => {
         })}
         {alertRequest.task_id ? (
           <TaskCancelButton
+            data-testid="task-cancel-button"
             taskId={alertRequest.task_id}
             size="small"
             variant="contained"
@@ -223,6 +225,7 @@ const AlertDialog = React.memo((props: AlertDialogProps) => {
           />
         ) : null}
         <Button
+          data-testid="dismiss-button"
           size="small"
           variant="contained"
           autoFocus