test: [M3-8541, M3-8621] - Unit tests for CollapsibleTable and Collap…

…sibleRow components (#11016)

* Unit tests for CollapsibleTable components

* Added changeset: Add unit tests for CollapsibleTable and CollapsibleRow components

* Change TableRowEmpty colSpan value from 5 to 4

* Use self-closing tags for empty TableCell

packages/manager/.changeset/pr-11016-tests-1727686556299.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tests
+---
+
+Add unit tests for CollapsibleTable and CollapsibleRow components ([#11016](https://github.com/linode/manager/pull/11016))

packages/manager/src/components/CollapsibleTable/CollapsibleRow.test.tsx

@@ -0,0 +1,65 @@
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+
+import { wrapWithTableBody } from 'src/utilities/testHelpers';
+
+import { CollapsibleRow } from './CollapsibleRow';
+import { tableItems, tableRowItems } from './CollapsibleTable.test';
+
+const defaultArgs = tableItems[0];
+const rowLabel = tableRowItems[0].label;
+const outerTableCells = tableRowItems[0].outerTableCells;
+const innerTableData = tableRowItems[0].innerTable;
+
+describe('CollapsibleRow', () => {
+  it('should render CollapsibleRow with label, outer table cells and ArrowRightIcon', () => {
+    const { getByTestId, getByText } = render(
+      wrapWithTableBody(<CollapsibleRow {...defaultArgs} />)
+    );
+
+    expect(getByText(rowLabel)).toBeVisible();
+
+    outerTableCells.forEach((cell) => {
+      expect(getByText(cell.label)).toBeVisible();
+    });
+
+    expect(getByTestId('KeyboardArrowRightIcon')).toBeInTheDocument();
+  });
+
+  it('should render an Expanded Row with ArowDownIcon when ArrowRightIcon button is clicked', async () => {
+    const { getByTestId, queryByText } = render(
+      wrapWithTableBody(<CollapsibleRow {...defaultArgs} />)
+    );
+
+    // Expect no innerTableData to be visible when row is in a Collapsed state.
+    innerTableData.headCells.forEach((cell) =>
+      expect(queryByText(cell.label)).not.toBeInTheDocument()
+    );
+    innerTableData.rows.forEach((row) => {
+      row.cells.forEach((cell) =>
+        expect(queryByText(cell.label)).not.toBeInTheDocument()
+      );
+    });
+
+    const arrowRightButton = getByTestId('KeyboardArrowRightIcon').closest(
+      'button'
+    );
+
+    if (arrowRightButton) {
+      await userEvent.click(arrowRightButton);
+    }
+
+    expect(getByTestId('KeyboardArrowDownIcon')).toBeInTheDocument();
+
+    // Expect innerTableData to be visible when row is in an Expanded state.
+    innerTableData.headCells.forEach((cell) =>
+      expect(queryByText(cell.label)).toBeInTheDocument()
+    );
+    innerTableData.rows.forEach((row) => {
+      row.cells.forEach((cell) =>
+        expect(queryByText(cell.label)).toBeInTheDocument()
+      );
+    });
+  });
+});

packages/manager/src/components/CollapsibleTable/CollapsibleTable.stories.tsx

@@ -47,6 +47,7 @@ export const Default: StoryObj<typeof CollapsibleTable> = {
             <TableCell>159</TableCell>
             <TableCell>6</TableCell>
             <TableCell>24</TableCell>
+            <TableCell />
           </>
         ),
         id: 1,
@@ -59,7 +60,7 @@ export const Default: StoryObj<typeof CollapsibleTable> = {
         <TableCell sx={{ width: '14%' }}>Calories</TableCell>
         <TableCell sx={{ width: '18%' }}>Fat (g)</TableCell>
         <TableCell sx={{ width: '10%' }}>Carbs (g) </TableCell>
-        <TableCell></TableCell>
+        <TableCell />
       </TableRow>
     ),
   },

packages/manager/src/components/CollapsibleTable/CollapsibleTable.test.tsx

@@ -0,0 +1,164 @@
+import React from 'react';
+
+import { Table } from 'src/components/Table';
+import { TableBody } from 'src/components/TableBody';
+import { TableCell } from 'src/components/TableCell';
+import { TableHead } from 'src/components/TableHead';
+import { TableRow } from 'src/components/TableRow';
+import { TableRowEmpty } from 'src/components/TableRowEmpty/TableRowEmpty';
+import { renderWithTheme } from 'src/utilities/testHelpers';
+
+import { CollapsibleTable } from './CollapsibleTable';
+
+const tableRowHeadCells = [
+  { label: 'Dessert (100g serving)' },
+  { label: 'Calories' },
+  { label: 'Fat (g)' },
+  { label: 'Carbs (g)' },
+];
+
+export const tableRowItems = [
+  {
+    id: 1,
+    innerTable: {
+      headCells: [
+        { label: 'Date' },
+        { label: 'Customer' },
+        { label: 'Amount' },
+        { label: 'Total price ($)' },
+      ],
+      rows: [
+        {
+          cells: [
+            { label: '2020-01-05' },
+            { label: '11091700' },
+            { label: '3' },
+            { label: '11.97' },
+          ],
+          id: '1-row-1',
+        },
+        {
+          cells: [
+            { label: '2020-01-02' },
+            { label: 'Anonymous' },
+            { label: '1' },
+            { label: '3.99' },
+          ],
+          id: '1-row-2',
+        },
+      ],
+    },
+    label: 'Frozen Yoghurt',
+    outerTableCells: [{ label: '159' }, { label: '6' }, { label: '24' }],
+  },
+  {
+    id: 2,
+    innerTable: {
+      headCells: [
+        { label: 'Date' },
+        { label: 'Customer' },
+        { label: 'Amount' },
+        { label: 'Total price ($)' },
+      ],
+      rows: [
+        {
+          cells: [
+            { label: '2024-09-23' },
+            { label: 'Customer-1' },
+            { label: '4' },
+            { label: '19.96' },
+          ],
+          id: '2-row-1',
+        },
+        {
+          cells: [
+            { label: '2024-09-25' },
+            { label: 'Customer-2' },
+            { label: '3' },
+            { label: '11.97' },
+          ],
+          id: '2-row-2',
+        },
+      ],
+    },
+    label: 'Chocolate Cake',
+    outerTableCells: [{ label: '300' }, { label: '12' }, { label: '40' }],
+  },
+];
+
+const tableRowHead = (
+  <TableRow>
+    {tableRowHeadCells.map((cell, idx) => (
+      <TableCell key={idx}>{cell.label}</TableCell>
+    ))}
+  </TableRow>
+);
+
+export const tableItems = tableRowItems.map((table) => {
+  return {
+    InnerTable: (
+      <Table aria-label={table.label} size="small">
+        <TableHead>
+          <TableRow>
+            {table.innerTable.headCells.map((cell, idx) => (
+              <TableCell key={idx}>{cell.label}</TableCell>
+            ))}
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {table.innerTable.rows.map((row) => (
+            <TableRow key={row.id}>
+              {row.cells.map((cell, idx) => (
+                <TableCell key={idx}>{cell.label}</TableCell>
+              ))}
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    ),
+    OuterTableCells: (
+      <>
+        {table.outerTableCells.map((cell, idx) => (
+          <TableCell key={idx}>{cell.label}</TableCell>
+        ))}
+      </>
+    ),
+    id: table.id,
+    label: table.label,
+  };
+});
+
+const tableRowEmpty = <TableRowEmpty colSpan={4} />;
+
+const defaultArgs = {
+  TableItems: tableItems,
+  TableRowEmpty: tableRowEmpty,
+  TableRowHead: tableRowHead,
+};
+
+describe('CollapsibleTable', () => {
+  it('should render CollapsibleTable with tableRowHead and TableItems', () => {
+    const { getByText } = renderWithTheme(
+      <CollapsibleTable {...defaultArgs} />
+    );
+
+    tableRowHeadCells.forEach((cell) =>
+      expect(getByText(cell.label)).toBeVisible()
+    );
+
+    tableRowItems.forEach((row) => {
+      expect(getByText(row.label)).toBeVisible();
+      row.outerTableCells.forEach((cell) =>
+        expect(getByText(cell.label)).toBeVisible()
+      );
+    });
+  });
+
+  it('should render "No items to display." message when no data is available', () => {
+    const { getByText } = renderWithTheme(
+      <CollapsibleTable {...defaultArgs} TableItems={[]} />
+    );
+
+    expect(getByText('No items to display.')).toBeVisible();
+  });
+});