WIP011

src/features/navigator/NarrativeControl/Delete.test.tsx

@@ -1,20 +1,22 @@
 /* Delete.test */
+import { FC } from 'react';
 import { act, render, screen } from '@testing-library/react';
 import fetchMock, {
-  MockParams,
+  //MockParams,
   disableFetchMocks,
   enableFetchMocks,
 } from 'jest-fetch-mock';
+import { ErrorBoundary, FallbackProps } from 'react-error-boundary';
 import { noOp } from '../../common';
 import { testNarrativeDoc, testNarrativeDocFactory } from '../fixtures';
 import { DeleteTemplate } from './NarrativeControl.stories';
 
-// const consoleError = jest.spyOn(console, 'error');
+const consoleError = jest.spyOn(console, 'error');
 // This mockImplementation supresses console.error calls.
 // eslint-disable-next-line @typescript-eslint/no-empty-function
 // consoleError.mockImplementation(() => {});
 
-const wsIdError = 111111;
+const wsIdError = 1111111;
 
 export const testNarrativeDocError = testNarrativeDocFactory({
   access_group: wsIdError,
@@ -23,20 +25,36 @@ export const testNarrativeDocError = testNarrativeDocFactory({
 const testResponseErrorMessageTemplate = (wsId: number) =>
   `us.kbase.workspace.database.exceptions.NoSuchWorkspaceException: No workspace with id ${wsId} exists`;
 
-const testResponseError: [string, MockParams] = [
+const testResponseErrorFactory = ({
+  id,
+  wsId,
+}: {
+  id: string;
+  wsId: number;
+}): [string, { status: number }] => [
   JSON.stringify({
     error: {
       name: 'JSONRPCError',
       code: -32500,
-      message: `No workspace with id ${wsIdError} exists`,
-      error: testResponseErrorMessageTemplate(wsIdError),
+      message: `No workspace with id ${wsId} exists`,
+      error: testResponseErrorMessageTemplate(wsId),
     },
-    id: 1,
     version: '2.0',
+    id,
   }),
   { status: 500 },
 ];
 
+const TestingError: FC<FallbackProps> = ({ error }) => {
+  return <>Error: {JSON.stringify(error)}</>;
+};
+
+const logError = (error: Error, info: { componentStack: string }) => {
+  console.log({ error }); // eslint-disable-line no-console
+  console.log(info.componentStack); // eslint-disable-line no-console
+  screen.debug();
+};
+
 describe('The <Delete /> component...', () => {
   beforeAll(() => {
     enableFetchMocks();
@@ -79,7 +97,17 @@ describe('The <Delete /> component...', () => {
   });
 
   test('throws an error if the delete fails.', async () => {
-    fetchMock.mockResponses(testResponseError);
+    fetchMock.mockImplementation(async (req) => {
+      const id =
+        req &&
+        JSON.parse((await (req as Request).body?.toString()) || 'null')?.id;
+      const testResponseError = testResponseErrorFactory({
+        id,
+        wsId: wsIdError,
+      });
+      const [body, options] = testResponseError;
+      return new Response(body, options);
+    });
     const { container } = render(
       <DeleteTemplate modalClose={noOp} narrativeDoc={testNarrativeDocError} />
     );
@@ -89,7 +117,25 @@ describe('The <Delete /> component...', () => {
     if (!buttonDelete) throw Error();
     await act(async () => buttonDelete.click());
     expect(buttonDelete.click).toThrow();
-    /*
-     */
+  });
+
+  test('throws an error if the delete request fails.', async () => {
+    fetchMock.mockRejectedValue(null);
+    const { container } = render(
+      <ErrorBoundary FallbackComponent={TestingError} onError={logError}>
+        <DeleteTemplate
+          modalClose={noOp}
+          narrativeDoc={testNarrativeDocError}
+        />
+      </ErrorBoundary>
+    );
+    expect(container).toBeTruthy();
+    const buttonDelete = container.querySelector('button');
+    expect(buttonDelete).toBeTruthy();
+    if (!buttonDelete) throw Error();
+    await act(async () => {
+      await buttonDelete.click();
+    });
+    expect(consoleError).toHaveBeenCalledTimes(1);
   });
 });

src/features/navigator/NarrativeControl/Delete.tsx

@@ -4,10 +4,7 @@ import { useNavigate } from 'react-router-dom';
 import toast from 'react-hot-toast';
 import { Button } from '../../../common/components';
 import { useAppDispatch, useAppSelector } from '../../../common/hooks';
-import {
-  isJsonRpcError,
-  isKBaseBaseQueryError,
-} from '../../../common/api/utils/kbaseBaseQuery';
+import { isKBaseBaseQueryError } from '../../../common/api/utils/kbaseBaseQuery';
 import { deleteWorkspace } from '../../../common/api/workspaceApi';
 import {
   generatePathWithSearchParams,
@@ -41,18 +38,14 @@ export const Delete: FC<ControlProps> = ({ narrativeDoc, modalClose }) => {
       console.log({ out }); // eslint-disable-line no-console
       dispatch(setLoading(false));
     } catch (err) {
-      console.error({ err }); // eslint-disable-line no-console
       if (!isKBaseBaseQueryError(err)) {
-        throw err;
-      }
-      if (isJsonRpcError(err.data)) {
+        console.error({ err }); // eslint-disable-line no-console
         toast(
           <>
             <span>There was an error! Guru meditation:</span>
-            <span>{err.data.error.message}</span>
+            <span>{JSON.stringify(err)}</span>
           </>
         );
-        return;
       }
       dispatch(setLoading(false));
       return;