task-inspector

Signed-off-by: Aaron Chong <aaronchongth@gmail.com>

packages/rmf-dashboard-framework/src/components/tasks/task-inspector.test.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+
+import { RmfApiProvider } from '../../hooks';
+import { MockRmfApi, render, TestProviders } from '../../utils/test-utils.test';
+import { TaskInspector } from './task-inspector';
+import { makeTaskLog, makeTaskState } from './test-data.test';
+
+describe('Task inspector', () => {
+  const rmfApi = new MockRmfApi();
+  const Base = (props: React.PropsWithChildren<{}>) => {
+    return (
+      <TestProviders>
+        <RmfApiProvider value={rmfApi}>{props.children}</RmfApiProvider>
+      </TestProviders>
+    );
+  };
+
+  it('Task inspector without task', async () => {
+    const onClose = vi.fn();
+    const root = render(
+      <Base>
+        <TaskInspector task={null} onClose={onClose} />
+      </Base>,
+    );
+    expect(root.getByText(/Click on a task to view more information/i)).toBeTruthy();
+  });
+
+  it('Task inspector renders', async () => {
+    const mockTaskState = makeTaskState('mock_task_id');
+    const mockTaskLogs = makeTaskLog('mock_task_id');
+    rmfApi.tasksApi.getTaskLogTasksTaskIdLogGet = vi.fn().mockResolvedValue({ data: mockTaskLogs });
+
+    const onClose = vi.fn();
+    const root = render(
+      <Base>
+        <TaskInspector task={mockTaskState} onClose={onClose} />
+      </Base>,
+    );
+
+    expect(root.getByText(/mock_task_id/i)).toBeTruthy();
+    expect(root.getByTestId('task-cancel-button')).toBeTruthy();
+  });
+});

packages/rmf-dashboard-framework/src/components/tasks/task-inspector.tsx

@@ -17,7 +17,7 @@ export function TaskInspector({ task, onClose }: TableDataGridState): JSX.Elemen
   const theme = useTheme();
   const rmfApi = useRmfApi();
 
-  const [taskState, setTaskState] = React.useState<TaskState | null>(null);
+  const [taskState, setTaskState] = React.useState<TaskState | null>(task);
   const [taskLogs, setTaskLogs] = React.useState<TaskEventLog | null>(null);
   const [isOpen, setIsOpen] = React.useState(true);
 
@@ -79,6 +79,7 @@ export function TaskInspector({ task, onClose }: TableDataGridState): JSX.Elemen
                       </CardContent>
                       <Grid item paddingLeft={2} paddingRight={2}>
                         <TaskCancelButton
+                          data-testid="task-cancel-button"
                           taskId={taskState ? taskState.booking.id : null}
                           style={{
                             marginTop: theme.spacing(1),