added unit tests for the SubnetNodebalancerRow component

Author: hasyed-akamai

packages/manager/src/factories/subnets.ts

@@ -3,6 +3,7 @@ import { Factory } from '@linode/utilities';
 import type {
   Subnet,
   SubnetAssignedLinodeData,
+  SubnetAssignedNodeBalancerData,
 } from '@linode/api-v4/lib/vpcs/types';
 
 // NOTE: Changing to fixed array length for the interfaces and linodes fields of the
@@ -20,6 +21,12 @@ export const subnetAssignedLinodeDataFactory =
     ),
   });
 
+export const subnetAssignedNodebalancerDataFactory =
+  Factory.Sync.makeFactory<SubnetAssignedNodeBalancerData>({
+    id: Factory.each((i) => i),
+    ipv4_range: Factory.each((i) => `192.168.${i}.0/30`),
+  });
+
 export const subnetFactory = Factory.Sync.makeFactory<Subnet>({
   created: '2023-07-12T16:08:53',
   id: Factory.each((i) => i),
@@ -32,6 +39,12 @@ export const subnetFactory = Factory.Sync.makeFactory<Subnet>({
       })
     )
   ),
-  nodebalancers: [],
+  nodebalancers: Factory.each((i) =>
+    Array.from({ length: 3 }, (_, arrIdx) =>
+      subnetAssignedNodebalancerDataFactory.build({
+        id: i * 10 + arrIdx,
+      })
+    )
+  ),
   updated: '2023-07-12T16:08:53',
 });

packages/manager/src/features/VPCs/VPCDetail/SubnetNodebalancerRow.test.tsx

@@ -0,0 +1,97 @@
+import { waitFor, waitForElementToBeRemoved } from '@testing-library/react';
+import * as React from 'react';
+import { afterAll, afterEach, beforeAll, describe, it } from 'vitest';
+
+import {
+  firewallFactory,
+  subnetAssignedNodebalancerDataFactory,
+} from 'src/factories';
+import { makeResourcePage } from 'src/mocks/serverHandlers';
+import { http, HttpResponse, server } from 'src/mocks/testServer';
+import {
+  mockMatchMedia,
+  renderWithTheme,
+  wrapWithTableBody,
+} from 'src/utilities/testHelpers';
+
+import { SubnetNodeBalancerRow } from './SubnetNodebalancerRow';
+
+const LOADING_TEST_ID = 'circle-progress';
+
+beforeAll(() => mockMatchMedia());
+afterEach(() => server.resetHandlers());
+afterAll(() => server.close());
+
+describe('SubnetNodeBalancerRow', () => {
+  const nodebalancer = {
+    id: 123,
+    label: 'test-nodebalancer',
+  };
+
+  const configs = [
+    { nodes_status: { up: 3, down: 1 } },
+    { nodes_status: { up: 2, down: 2 } },
+  ];
+
+  const firewalls = makeResourcePage(
+    firewallFactory.buildList(1, { label: 'mock-firewall' })
+  );
+
+  const subnetNodebalancer = subnetAssignedNodebalancerDataFactory.build({
+    id: nodebalancer.id,
+    ipv4_range: '192.168.99.0/30',
+  });
+
+  it('renders loading state', async () => {
+    const { getByTestId } = renderWithTheme(
+      wrapWithTableBody(
+        <SubnetNodeBalancerRow
+          ipv4={subnetNodebalancer.ipv4_range}
+          nodeBalancerId={subnetNodebalancer.id}
+        />
+      )
+    );
+
+    expect(getByTestId(LOADING_TEST_ID)).toBeInTheDocument();
+    await waitForElementToBeRemoved(() => getByTestId(LOADING_TEST_ID));
+  });
+
+  it('renders nodebalancer row with data', async () => {
+    server.use(
+      http.get('*/nodebalancers/:id', () => {
+        return HttpResponse.json(nodebalancer);
+      }),
+      http.get('*/nodebalancers/:id/configs', () => {
+        return HttpResponse.json(configs);
+      }),
+      http.get('*/nodebalancers/:id/firewalls', () => {
+        return HttpResponse.json(firewalls);
+      })
+    );
+
+    const { getByText, getByRole } = renderWithTheme(
+      wrapWithTableBody(
+        <SubnetNodeBalancerRow
+          ipv4={subnetNodebalancer.ipv4_range}
+          nodeBalancerId={nodebalancer.id}
+        />
+      )
+    );
+
+    await waitFor(() => {
+      expect(getByText(nodebalancer.label)).toBeInTheDocument();
+    });
+
+    expect(getByText(subnetNodebalancer.ipv4_range)).toBeInTheDocument();
+    expect(getByText('mock-firewall')).toBeInTheDocument();
+
+    const nodebalancerLink = getByRole('link', {
+      name: nodebalancer.label,
+    });
+
+    expect(nodebalancerLink).toHaveAttribute(
+      'href',
+      `/nodebalancers/${nodebalancer.id}/summary`
+    );
+  });
+});

packages/manager/src/features/VPCs/VPCDetail/SubnetNodebalancerRow.tsx

@@ -50,7 +50,7 @@ export const SubnetNodeBalancerRow = ({
   if (nodebalancerLoading || !nodebalancer) {
     return (
       <TableRow hover={hover}>
-        <TableCell colSpan={6}>
+        <TableCell colSpan={6} style={{ justifyItems: 'center' }}>
           <CircleProgress size="sm" />
         </TableCell>
       </TableRow>
@@ -60,7 +60,7 @@ export const SubnetNodeBalancerRow = ({
   if (nodebalancerError) {
     return (
       <TableRow data-testid="subnet-nodebalancer-row-error" hover={hover}>
-        <TableCell colSpan={5} style={{ paddingLeft: 24 }}>
+        <TableCell colSpan={6} style={{ justifyItems: 'center' }}>
           <Box alignItems="center" display="flex">
             <ErrorOutline
               data-qa-error-icon