test: Unit test coverage - HostNameTableCell

packages/manager/.changeset/pr-10596-tests-1718806691101.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tests
+---
+
+Unit test coverage - HostNameTableCell ([#10596](https://github.com/linode/manager/pull/10596))

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

@@ -0,0 +1,103 @@
+import '@testing-library/jest-dom';
+import { waitFor } from '@testing-library/react';
+import React from 'react';
+
+import { objectStorageKeyFactory, regionFactory } from 'src/factories';
+import { makeResourcePage } from 'src/mocks/serverHandlers';
+import { HttpResponse, http, server } from 'src/mocks/testServer';
+import { renderWithTheme } from 'src/utilities/testHelpers';
+
+import { HostNameTableCell } from './HostNameTableCell';
+
+const storageKeyData = objectStorageKeyFactory.build({
+  regions: [
+    {
+      id: 'us-east',
+      s3_endpoint: 'alpha.test.com',
+    },
+  ],
+});
+
+describe('HostNameTableCell', () => {
+  it('should render  "None" when there are no regions', () => {
+    const { getByText } = renderWithTheme(
+      <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 } = renderWithTheme(
+      <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 } = renderWithTheme(
+      <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