Update tests

src/views/workflow-actions/workflow-actions-modal-content/__tests__/workflow-actions-modal-content.test.tsx

@@ -1,16 +1,30 @@
+import { HttpResponse } from 'msw';
+
 import { render, screen, userEvent } from '@/test-utils/rtl';
 
+import { type CancelWorkflowResponse } from '@/route-handlers/cancel-workflow/cancel-workflow.types';
+
 import { mockWorkflowActionsConfig } from '../../__fixtures__/workflow-actions-config';
 import { mockWorkflowDetailsParams } from '../../__fixtures__/workflow-details-params';
 import WorkflowActionsModalContent from '../workflow-actions-modal-content';
 
+const mockEnqueue = jest.fn();
+const mockDequeue = jest.fn();
+jest.mock('baseui/snackbar', () => ({
+  ...jest.requireActual('baseui/snackbar'),
+  useSnackbar: () => ({
+    enqueue: mockEnqueue,
+    dequeue: mockDequeue,
+  }),
+}));
+
 describe(WorkflowActionsModalContent.name, () => {
   beforeEach(() => {
     jest.clearAllMocks();
   });
 
   it('renders the modal content as expected', async () => {
-    setup();
+    setup({});
 
     expect(await screen.findAllByText('Mock cancel workflow')).toHaveLength(2);
     expect(
@@ -22,26 +36,79 @@ describe(WorkflowActionsModalContent.name, () => {
   });
 
   it('calls onCloseModal when the Go Back button is clicked', async () => {
-    const { user, mockOnClose } = setup();
+    const { user, mockOnClose } = setup({});
 
     const goBackButton = await screen.findByText('Go back');
     await user.click(goBackButton);
 
     expect(mockOnClose).toHaveBeenCalled();
   });
+
+  it('calls mockCancelWorkflow, sends toast, and closes modal when the action button is clicked', async () => {
+    const { user, mockOnClose, mockCancelWorkflow } = setup({});
+
+    const cancelButton = await screen.findByRole('button', {
+      name: 'Mock cancel workflow',
+    });
+    await user.click(cancelButton);
+
+    expect(mockCancelWorkflow).toHaveBeenCalled();
+    expect(mockEnqueue).toHaveBeenCalledWith(
+      expect.objectContaining({
+        message: 'Mock notification',
+      }),
+      undefined
+    );
+    expect(mockOnClose).toHaveBeenCalled();
+  });
+
+  it('Displays banner when the action button is clicked and action fails', async () => {
+    const { user, mockOnClose, mockCancelWorkflow } = setup({ error: true });
+
+    const cancelButton = await screen.findByRole('button', {
+      name: 'Mock cancel workflow',
+    });
+    await user.click(cancelButton);
+
+    expect(mockCancelWorkflow).toHaveBeenCalled();
+    expect(
+      await screen.findByText('Failed to cancel workflow')
+    ).toBeInTheDocument();
+    expect(mockOnClose).not.toHaveBeenCalled();
+  });
 });
 
-function setup() {
+function setup({ error }: { error?: boolean }) {
   const user = userEvent.setup();
   const mockOnClose = jest.fn();
+  const mockCancelWorkflow = jest.fn();
 
   render(
     <WorkflowActionsModalContent
       action={mockWorkflowActionsConfig[0]}
       params={{ ...mockWorkflowDetailsParams }}
       onCloseModal={mockOnClose}
-    />
+    />,
+    {
+      endpointsMocks: [
+        {
+          path: '/api/domains/:domain/:cluster/workflows/:workflowId/:runId/cancel',
+          httpMethod: 'POST',
+          mockOnce: false,
+          httpResolver: () => {
+            mockCancelWorkflow();
+            if (error) {
+              return HttpResponse.json(
+                { message: 'Failed to cancel workflow' },
+                { status: 500 }
+              );
+            }
+            return HttpResponse.json({} satisfies CancelWorkflowResponse);
+          },
+        },
+      ],
+    }
   );
 
-  return { user, mockOnClose };
+  return { user, mockOnClose, mockCancelWorkflow };
 }

src/views/workflow-actions/workflow-actions-modal-content/workflow-actions-modal-content.tsx

@@ -5,6 +5,7 @@ import { ModalButton } from 'baseui/modal';
 import { useSnackbar } from 'baseui/snackbar';
 import { MdCheckCircle, MdErrorOutline } from 'react-icons/md';
 
+import logger from '@/utils/logger';
 import request from '@/utils/request';
 import { type RequestError } from '@/utils/request/request-error';
 
@@ -75,32 +76,39 @@ export default function WorkflowActionsModalContent<R>({
           size={SIZE.compact}
           kind={BUTTON_KIND.primary}
           onClick={async () => {
-            mutateAsync(params).then((result) => {
-              const {
-                // TODO: input,
-                ...workflowDetailsParams
-              } = params;
+            mutateAsync(params).then(
+              (result) => {
+                const {
+                  // TODO: input,
+                  ...workflowDetailsParams
+                } = params;
 
-              queryClient.invalidateQueries({
-                queryKey: ['describe_workflow', workflowDetailsParams],
-              });
+                queryClient.invalidateQueries({
+                  queryKey: ['describe_workflow', workflowDetailsParams],
+                });
 
-              action.onSuccess({
-                result,
-                inputParams: params,
-                onCloseModal,
-                sendNotification: (message, duration) =>
-                  enqueue(
-                    {
-                      message,
-                      startEnhancer: MdCheckCircle,
-                      actionMessage: 'OK',
-                      actionOnClick: () => dequeue(),
-                    },
-                    duration
-                  ),
-              });
-            });
+                action.onSuccess({
+                  result,
+                  inputParams: params,
+                  onCloseModal,
+                  sendNotification: (message, duration) =>
+                    enqueue(
+                      {
+                        message,
+                        startEnhancer: MdCheckCircle,
+                        actionMessage: 'OK',
+                        actionOnClick: () => dequeue(),
+                      },
+                      duration
+                    ),
+                });
+              },
+              (e) =>
+                logger.error(
+                  { error: e, params },
+                  'Failed to perform workflow action'
+                )
+            );
           }}
           isLoading={isPending}
         >

src/views/workflow-page/workflow-page-tabs/__tests__/workflow-page-tabs.test.tsx

@@ -43,7 +43,7 @@ jest.mock(
   () => jest.fn(() => <div>CLI Commands</div>)
 );
 
-jest.mock('../../workflow-actions-button/workflow-actions-button', () =>
+jest.mock('@/views/workflow-actions/workflow-actions', () =>
   jest.fn(() => <div>Actions</div>)
 );