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 (
+
+ {props.children}
+
+ );
+ };
+
+ 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(
+
+
+ ,
+ );
+ 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 ? (
{
/>
) : null}