upcoming:[M3-8485] - Browsing Buckets & Objects - Unit Tests

linode · Aug 29, 2024 · 35c2bab · 35c2bab
1 parent 812843a
commit 35c2bab
Show file tree

Hide file tree

Showing 3 changed files with 114 additions and 4 deletions.
diff --git a/packages/manager/src/features/ObjectStorage/BucketDetail/ObjectDetailsDrawer.test.tsx b/packages/manager/src/features/ObjectStorage/BucketDetail/ObjectDetailsDrawer.test.tsx
@@ -2,7 +2,7 @@ import { act, waitFor } from '@testing-library/react';
 import * as React from 'react';
 
 import { profileFactory } from 'src/factories';
-import { http, HttpResponse, server } from 'src/mocks/testServer';
+import { HttpResponse, http, server } from 'src/mocks/testServer';
 import { renderWithTheme } from 'src/utilities/testHelpers';
 
 import { ObjectDetailsDrawer } from './ObjectDetailsDrawer';
@@ -64,4 +64,15 @@ describe('ObjectDetailsDrawer', () => {
       expect(queryByTestId('lastModified')).not.toBeInTheDocument();
     });
   });
+
+  it("doesn't show the ACL Switch for E2 and E3 buckets", async () => {
+    const { queryByLabelText } = renderWithTheme(
+      <ObjectDetailsDrawer {...props} endpointType="E3" />
+    );
+    await waitFor(() => {
+      expect(
+        queryByLabelText('Access Control List (ACL)')
+      ).not.toBeInTheDocument();
+    });
+  });
 });
diff --git a/packages/manager/src/features/ObjectStorage/BucketLanding/BucketDetailsDrawer.test.tsx b/packages/manager/src/features/ObjectStorage/BucketLanding/BucketDetailsDrawer.test.tsx
@@ -4,6 +4,7 @@ import { vi } from 'vitest';
 
 import {
   objectStorageBucketFactory,
+  objectStorageBucketFactoryGen2,
   profileFactory,
   regionFactory,
 } from 'src/factories';
@@ -200,3 +201,100 @@ describe('BucketDetailsDrawer: Legacy UI', () => {
     });
   });
 });
+
+describe('BucketDetailDrawer: Gen2 UI', () => {
+  const e3Bucket = objectStorageBucketFactoryGen2.build();
+  const e1Bucket = objectStorageBucketFactoryGen2.build({
+    endpoint_type: 'E1',
+  });
+
+  const region = regionFactory.build({
+    id: e3Bucket.region,
+  });
+
+  it('renders correctly when open', () => {
+    renderWithThemeAndHookFormContext({
+      component: (
+        <BucketDetailsDrawer
+          onClose={mockOnClose}
+          open={true}
+          selectedBucket={e3Bucket}
+        />
+      ),
+      options: {
+        flags: { objMultiCluster: false, objectStorageGen2: { enabled: true } },
+      },
+    });
+
+    expect(screen.getByText(e3Bucket.label)).toBeInTheDocument();
+    expect(screen.getByTestId('createdTime')).toHaveTextContent(
+      'Created: 2019-12-12'
+    );
+    expect(screen.getByTestId('endpointType')).toHaveTextContent(
+      `Endpoint Type: E3`
+    );
+    expect(screen.getByTestId('cluster')).toHaveTextContent(region.id);
+    expect(screen.getByText(e3Bucket.hostname)).toBeInTheDocument();
+    expect(screen.getByText('1 MB')).toBeInTheDocument();
+    expect(screen.getByText('103 objects')).toBeInTheDocument();
+  });
+
+  it('doesnt show the CORS switch for E2 and E3 buckets', async () => {
+    const { getByText } = renderWithThemeAndHookFormContext({
+      component: (
+        <BucketDetailsDrawer
+          onClose={mockOnClose}
+          open={true}
+          selectedBucket={e3Bucket}
+        />
+      ),
+      options: {
+        flags: { objMultiCluster: false, objectStorageGen2: { enabled: true } },
+      },
+    });
+
+    expect(
+      getByText(
+        /CORS \(Cross Origin Sharing\) is not available for endpoint types E2 and E3./
+      )
+    ).toBeInTheDocument();
+  });
+
+  it('renders the Bucket Rate Limit Table for E2 and E3 buckets', async () => {
+    const { getAllByRole } = renderWithThemeAndHookFormContext({
+      component: (
+        <BucketDetailsDrawer
+          onClose={mockOnClose}
+          open={true}
+          selectedBucket={e3Bucket}
+        />
+      ),
+      options: {
+        flags: { objMultiCluster: false, objectStorageGen2: { enabled: true } },
+      },
+    });
+
+    const rows = getAllByRole('row');
+    expect(rows).toHaveLength(3);
+  });
+
+  it('renders the Bucket Rate Limit Text for E0 and E1 buckets', async () => {
+    const { getByText } = renderWithThemeAndHookFormContext({
+      component: (
+        <BucketDetailsDrawer
+          onClose={mockOnClose}
+          open={true}
+          selectedBucket={e1Bucket}
+        />
+      ),
+      options: {
+        flags: { objMultiCluster: false, objectStorageGen2: { enabled: true } },
+      },
+    });
+    expect(
+      getByText(
+        /This endpoint type supports up to 750 Requests Per Second\(RPS\)./
+      )
+    ).toBeInTheDocument();
+  });
+});
diff --git a/packages/manager/src/features/ObjectStorage/BucketLanding/BucketDetailsDrawer.tsx b/packages/manager/src/features/ObjectStorage/BucketLanding/BucketDetailsDrawer.tsx
@@ -141,7 +141,7 @@ export const BucketDetailsDrawer = React.memo(
         )}
         {/* @TODO OBJ Multicluster: use region instead of cluster if isObjMultiClusterEnabled
          to getBucketAccess and updateBucketAccess.  */}
-        {
+        {Boolean(endpoint_type) && (
           <>
             <Typography data-testid="bucketRateLimit" variant="h3">
               Bucket Rate Limits
@@ -154,9 +154,9 @@ export const BucketDetailsDrawer = React.memo(
                 <Link to="#">Understand bucket rate limits</Link>.
               </Typography>
             )}
+            <Divider spacingBottom={16} spacingTop={16} />
           </>
-        }
-        {<Divider spacingBottom={16} spacingTop={16} />}
+        )}
         {cluster && label && (
           <AccessSelect
             getAccess={() =>
@@ -181,6 +181,7 @@ export const BucketDetailsDrawer = React.memo(
                 payload
               );
             }}
+            endpointType={endpoint_type}
             name={label}
             variant="bucket"
           />