Improve testing for react 18

src/react/account/iamAttachment/__tests__/Attachments.test.tsx

@@ -247,7 +247,7 @@ describe('Policy Attachments', () => {
     const firstRow = screen.getAllByRole('row')[1];
     expect(
       getByRole(firstRow, 'gridcell', {
-        name: /attached-user/i,
+        name: /attached-group/i,
       }),
     ).toBeInTheDocument();
     expect(

src/react/databrowser/objects/ObjectLockSetting.tsx

@@ -97,12 +97,9 @@ export default function ObjectLockSetting() {
         .putObjectRetention(params)
         .promise()
         .then(() => {
-          const event = new CustomEvent('HistoryPushEvent', {
-            detail: {
-              path: `/accounts/${account.Name}/buckets/${bucketNameParam}/objects?prefix=${objectKey}`,
-            },
-          });
-          window.dispatchEvent(event);
+          navigate(
+            `/accounts/${account.Name}/buckets/${bucketNameParam}/objects?prefix=${objectKey}`,
+          );
         });
     },
   });

src/react/databrowser/objects/__tests__/ObjectLockSetting.test.tsx

@@ -1,34 +1,111 @@
-import { screen } from '@testing-library/react';
-import { XDM_FEATURE } from '../../../../js/config';
-import { AppConfig } from '../../../../types/entities';
+import { screen, waitFor } from '@testing-library/react';
 import { renderWithRouterMatch } from '../../../utils/testUtil';
 import ObjectLockSetting from '../ObjectLockSetting';
+import { setupServer } from 'msw/node';
+import { rest } from 'msw';
+import userEvent from '@testing-library/user-event';
 
-const config: AppConfig = {
-  zenkoEndpoint: 'http://localhost:8000',
-  stsEndpoint: 'http://localhost:9000',
-  iamEndpoint: 'http://localhost:10000',
-  managementEndpoint: 'http://localhost:11000',
-  //@ts-expect-error fix this when you are working on it
-  navbarEndpoint: 'http://localhost:12000',
-  navbarConfigUrl: 'http://localhost:13000',
-  features: [XDM_FEATURE],
-};
-
+const server = setupServer();
 describe('ObjectLockSetting', () => {
-  const errorMessage = 'This is an error test message';
+  beforeEach(() => {
+    server.listen({ onUnhandledRequest: 'error' });
+  });
+
+  it('should submit the form accordingly', async () => {
+    //S
+    const putInterceptor = jest.fn();
+    server.use(
+      rest.put('http://testendpoint/test-bucket/object', (req, res, ctx) => {
+        if (req.url.searchParams.has('retention')) {
+          putInterceptor(req.body);
+          return res(ctx.status(200), ctx.json({}));
+        } else {
+          return res(ctx.status(500));
+        }
+      }),
+    );
 
-  it('should render ObjectLockSetting component with an error banner', async () => {
-    renderWithRouterMatch(<ObjectLockSetting />, undefined, {
-      uiErrors: {
-        errorMsg: errorMessage,
-        errorType: 'byComponent',
+    //E
+    renderWithRouterMatch(
+      <ObjectLockSetting />,
+      {
+        route: '/test-bucket/objects?prefix=object&versionId=1',
+        path: '/:bucketName/objects',
       },
-    });
+      {
+        s3: {
+          objectMetadata: {
+            bucketName: 'test-bucket',
+            objectRetention: {
+              mode: 'GOVERNANCE',
+              retainUntilDate: new Date('2022-01-31 00:00:00'),
+            },
+          },
+        },
+      },
+    );
 
-    expect(screen.getByText(errorMessage)).toBeInTheDocument();
+    await userEvent.click(screen.getByRole('button', { name: /Save/i }));
+
+    //V
+    await waitFor(() => {
+      expect(putInterceptor).toHaveBeenCalledWith(
+        '<Retention xmlns="http://s3.amazonaws.com/doc/2006-03-01/"><Mode>GOVERNANCE</Mode><RetainUntilDate>2022-01-31T00:00:00Z</RetainUntilDate></Retention>',
+      );
+    });
   });
 
+  it('should display and error when the submission failed', async () => {
+    //S
+    const putInterceptor = jest.fn();
+    server.use(
+      rest.put('http://testendpoint/test-bucket/object', (req, res, ctx) => {
+        if (req.url.searchParams.has('retention')) {
+          putInterceptor(req.body);
+          return res(ctx.status(500));
+        } else {
+          return res(ctx.status(500));
+        }
+      }),
+    );
+
+    //E
+    renderWithRouterMatch(
+      <ObjectLockSetting />,
+      {
+        route: '/test-bucket/objects?prefix=object&versionId=1',
+        path: '/:bucketName/objects',
+      },
+      {
+        s3: {
+          objectMetadata: {
+            bucketName: 'test-bucket',
+            objectRetention: {
+              mode: 'GOVERNANCE',
+              retainUntilDate: new Date('2022-01-31 00:00:00'),
+            },
+          },
+        },
+      },
+    );
+
+    await userEvent.click(screen.getByRole('button', { name: /Save/i }));
+
+    //V
+    await waitFor(() => {
+      expect(putInterceptor).toHaveBeenCalledWith(
+        '<Retention xmlns="http://s3.amazonaws.com/doc/2006-03-01/"><Mode>GOVERNANCE</Mode><RetainUntilDate>2022-01-31T00:00:00Z</RetainUntilDate></Retention>',
+      );
+    });
+
+    await waitFor(() => {
+      expect(
+        screen.getByText(
+          'An error occurred while saving the retention settings.',
+        ),
+      ).toBeInTheDocument();
+    });
+  });
   it('should render ObjectLockSetting component with current data filled', async () => {
     renderWithRouterMatch(
       <ObjectLockSetting />,