unit test coverage for HostNameTableCell

packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyTable/HostNameTableCell.test.tsx

@@ -0,0 +1,115 @@
+import '@testing-library/jest-dom';
+import { waitFor } from '@testing-library/react';
+import React from 'react';
+
+import { regionFactory } from 'src/factories';
+import { makeResourcePage } from 'src/mocks/serverHandlers';
+import { HttpResponse, http, server } from 'src/mocks/testServer';
+import { renderWithThemeAndHookFormContext } from 'src/utilities/testHelpers';
+
+import { HostNameTableCell } from './HostNameTableCell';
+
+const storageKeyData = {
+  access_key: 'test_key',
+  bucket_access: null,
+  id: 12345,
+  label: 'this is regular key',
+  limited: false,
+  regions: [
+    {
+      id: 'us-east',
+      s3_endpoint: 'alpha.test.com',
+    },
+  ],
+  secret_key: '[test]',
+};
+
+describe('HostNameTableCell', () => {
+  it('should render  "None" when there are no regions', () => {
+    const { getByText } = renderWithThemeAndHookFormContext({
+      component: (
+        <HostNameTableCell
+          storageKeyData={{
+            access_key: 'test_key',
+            bucket_access: null,
+            id: 0,
+            label: 'test',
+            limited: false,
+            regions: [],
+            secret_key: '',
+          }}
+          setHostNames={vi.fn()}
+          setShowHostNamesDrawers={vi.fn()}
+        />
+      ),
+    });
+
+    expect(getByText('None')).toBeInTheDocument();
+  });
+
+  test('should render  "Regions/S3 Hostnames" cell when there are regions', async () => {
+    const region = regionFactory.build({
+      capabilities: ['Object Storage'],
+      id: 'us-east',
+      label: 'Newark, NJ',
+    });
+
+    server.use(
+      http.get('*/v4/regions', () => {
+        return HttpResponse.json(makeResourcePage([region]));
+      })
+    );
+    const { findByText } = renderWithThemeAndHookFormContext({
+      component: (
+        <HostNameTableCell
+          setHostNames={vi.fn()}
+          setShowHostNamesDrawers={vi.fn()}
+          storageKeyData={storageKeyData}
+        />
+      ),
+    });
+
+    const hostname = await findByText('Newark, NJ: alpha.test.com');
+
+    await waitFor(() => expect(hostname).toBeInTheDocument());
+  });
+  test('should render all  "Regions/S3 Hostnames" in the cell when there are multiple regions', async () => {
+    const region = regionFactory.build({
+      capabilities: ['Object Storage'],
+      id: 'us-east',
+      label: 'Newark, NJ',
+    });
+
+    server.use(
+      http.get('*/v4/regions', () => {
+        return HttpResponse.json(makeResourcePage([region]));
+      })
+    );
+    const { findByText } = renderWithThemeAndHookFormContext({
+      component: (
+        <HostNameTableCell
+          storageKeyData={{
+            ...storageKeyData,
+            regions: [
+              {
+                id: 'us-east',
+                s3_endpoint: 'alpha.test.com',
+              },
+              {
+                id: 'us-south',
+                s3_endpoint: 'alpha.test.com',
+              },
+            ],
+          }}
+          setHostNames={vi.fn()}
+          setShowHostNamesDrawers={vi.fn()}
+        />
+      ),
+    });
+    const hostname = await findByText('Newark, NJ: alpha.test.com');
+    const moreButton = await findByText(/and\s+1\s+more\.\.\./);
+    await waitFor(() => expect(hostname).toBeInTheDocument());
+
+    await expect(moreButton).toBeInTheDocument();
+  });
+});

packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyTable/HostNameTableCell.tsx

@@ -1,7 +1,3 @@
-import {
-  ObjectStorageKey,
-  RegionS3EndpointAndID,
-} from '@linode/api-v4/lib/object-storage';
 import { styled } from '@mui/material/styles';
 import React from 'react';
 
@@ -11,6 +7,11 @@ import { TableCell } from 'src/components/TableCell';
 import { useRegionsQuery } from 'src/queries/regions/regions';
 import { getRegionsByRegionId } from 'src/utilities/regions';
 
+import type {
+  ObjectStorageKey,
+  RegionS3EndpointAndID,
+} from '@linode/api-v4/lib/object-storage';
+
 type Props = {
   setHostNames: (hostNames: RegionS3EndpointAndID[]) => void;
   setShowHostNamesDrawers: (show: boolean) => void;
@@ -31,14 +32,14 @@ export const HostNameTableCell = ({
   if (!regionsLookup || !regionsData || !regions || regions.length === 0) {
     return <TableCell>None</TableCell>;
   }
+  const label = regionsLookup[storageKeyData.regions[0].id]?.label;
+  const s3endPoint = storageKeyData?.regions[0]?.s3_endpoint;
 
   return (
     <TableCell>
-      {`${regionsLookup[storageKeyData.regions[0].id].label}: ${
-        storageKeyData?.regions[0]?.s3_endpoint
-      } `}
+      {`${label}: ${s3endPoint} `}
       {storageKeyData?.regions?.length === 1 && (
-        <StyledCopyIcon text={storageKeyData.regions[0].s3_endpoint} />
+        <StyledCopyIcon text={s3endPoint} />
       )}
       {storageKeyData.regions.length > 1 && (
         <StyledLinkButton