Improved test coverage

packages/lib/jest.config.js

@@ -1,5 +1,10 @@
 module.exports = {
   collectCoverage: true,
+  coveragePathIgnorePatterns: [
+    "utils.ts",
+    "index.ts",
+    ".*Context\\.tsx$", // Is deprecated and will be removed in the future
+  ],
   moduleNameMapper: {
     "\\.(css|less|scss|sass)$": "identity-obj-proxy",
     "\\.(svg)$": "<rootDir>/test/mocks/svgMock.js",

packages/lib/src/bulleted-list/BulletedList.test.tsx

@@ -1,5 +1,6 @@
 import { render } from "@testing-library/react";
 import DxcBulletedList from "./BulletedList";
+import DxcIcon from "../icon/Icon";
 
 describe("Bulleted list component tests", () => {
   test("The component renders properly", () => {
@@ -14,4 +15,49 @@ describe("Bulleted list component tests", () => {
     expect(getByText("Usage")).toBeTruthy();
     expect(getByText("Specifications")).toBeTruthy();
   });
+  test("The component renders default (disc) bullets", () => {
+    const { container } = render(
+      <DxcBulletedList>
+        <DxcBulletedList.Item>Item 1</DxcBulletedList.Item>
+      </DxcBulletedList>
+    );
+    expect(container.querySelector("ul")).toBeTruthy();
+    expect(container.querySelector("div")).toBeTruthy();
+  });
+
+  test("The component renders number bullets", () => {
+    const { container, getByText } = render(
+      <DxcBulletedList type="number">
+        <DxcBulletedList.Item>Numbered Item</DxcBulletedList.Item>
+      </DxcBulletedList>
+    );
+    expect(container.querySelector("ol")).toBeTruthy();
+    expect(getByText("1.")).toBeTruthy();
+  });
+
+  test("The component renders icon bullets with icon string", () => {
+    const { container } = render(
+      <DxcBulletedList type="icon" icon="home">
+        <DxcBulletedList.Item>Icon Item</DxcBulletedList.Item>
+      </DxcBulletedList>
+    );
+    expect(container.querySelector("span")).toBeTruthy();
+    expect(container.innerHTML).toContain("Icon Item");
+  });
+
+  test("The component renders icon bullets with React element icon", () => {
+    const icon = (
+      <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor">
+        <path d="M0 0h24v24H0V0z" fill="none" />
+        <path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z" />
+      </svg>
+    );
+    const { container } = render(
+      <DxcBulletedList type="icon" icon={icon}>
+        <DxcBulletedList.Item>Icon React Element</DxcBulletedList.Item>
+      </DxcBulletedList>
+    );
+    expect(container.querySelector("svg")).toBeTruthy();
+    expect(container.innerHTML).toContain("Icon React Element");
+  });
 });

packages/lib/src/data-grid/DataGrid.stories.tsx

@@ -8,7 +8,7 @@ import { disabledRules } from "../../test/accessibility/rules/specific/data-grid
 import preview from "../../.storybook/preview";
 import { userEvent, within } from "@storybook/test";
 import DxcBadge from "../badge/Badge";
-import { Action } from "../table/types";
+import { ActionsCellPropsType } from "../table/types";
 import { Meta, StoryObj } from "@storybook/react";
 import { isKeyOfRow } from "./utils";
 
@@ -27,7 +27,7 @@ export default {
   },
 } as Meta<typeof DxcDataGrid>;
 
-const actions: Action = [
+const actions: ActionsCellPropsType["actions"] = [
   {
     title: "icon",
     onClick: (value?) => {

packages/lib/src/data-grid/DataGrid.test.tsx

@@ -1,4 +1,4 @@
-import { render } from "@testing-library/react";
+import { fireEvent, render, waitFor } from "@testing-library/react";
 import DxcDataGrid from "./DataGrid";
 import { GridColumn, HierarchyGridRow } from "./types";
 
@@ -13,7 +13,7 @@ const columns: GridColumn[] = [
   },
   {
     key: "complete",
-    label: " % Complete",
+    label: "% Complete",
     resizable: true,
     sortable: true,
     draggable: true,
@@ -48,31 +48,234 @@ const expandableRows = [
   },
 ];
 
+const hierarchyRows: HierarchyGridRow[] = [
+  {
+    name: "Root Node 1",
+    value: "1",
+    id: "a",
+    childRows: [
+      {
+        name: "Child Node 1.1",
+        value: "1.1",
+        id: "aa",
+        childRows: [
+          {
+            name: "Grandchild Node 1.1.1",
+            value: "1.1.1",
+            id: "aaa",
+          },
+          {
+            name: "Grandchild Node 1.1.2",
+            value: "1.1.2",
+            id: "aab",
+          },
+        ],
+      },
+      {
+        name: "Child Node 1.2",
+        value: "1.2",
+        id: "ab",
+      },
+    ],
+  },
+  {
+    name: "Root Node 2",
+    value: "2",
+    id: "b",
+    childRows: [
+      {
+        name: "Child Node 2.1",
+        value: "2.1",
+        id: "ba",
+        childRows: [
+          {
+            name: "Grandchild Node 2.1.1",
+            value: "2.1.1",
+            id: "baa",
+          },
+        ],
+      },
+      {
+        name: "Child Node 2.2",
+        value: "2.2",
+        id: "bb",
+      },
+      {
+        name: "Child Node 2.3",
+        value: "2.3",
+        id: "bc",
+      },
+    ],
+  },
+  {
+    name: "Root Node 3",
+    value: "3",
+    id: "c",
+    childRows: [
+      {
+        name: "Child Node 3.1",
+        value: "3.1",
+        id: "cc",
+        childRows: [
+          {
+            name: "Grandchild Node 3.1.1",
+            value: "3.1.1",
+            id: "ccc",
+          },
+          {
+            name: "Grandchild Node 3.1.2",
+            value: "3.1.2",
+            id: "ccd",
+          },
+        ],
+      },
+      {
+        name: "Child Node 3.2",
+        value: "3.2",
+        id: "cd",
+      },
+    ],
+  },
+  {
+    name: "Root Node 4",
+    value: "4",
+    id: "d",
+    childRows: [
+      {
+        name: "Child Node 4.1",
+        value: "4.1",
+        id: "da",
+        childRows: [
+          {
+            name: "Grandchild Node 4.1.1",
+            value: "4.1.1",
+            id: "daa",
+          },
+        ],
+      },
+      {
+        name: "Child Node 4.2",
+        value: "4.2",
+        id: "dd",
+      },
+      {
+        name: "Child Node 4.3",
+        value: "4.3",
+        id: "de",
+      },
+    ],
+  },
+  {
+    name: "Root Node 5",
+    value: "5",
+    id: "d",
+    childRows: [
+      {
+        name: "Child Node 5.1",
+        value: "5.1",
+        id: "da",
+        childRows: [
+          {
+            name: "Grandchild Node 5.1.1",
+            value: "5.1.1",
+            id: "daa",
+          },
+        ],
+      },
+      {
+        name: "Child Node 5.2",
+        value: "5.2",
+        id: "dd",
+      },
+      {
+        name: "Child Node 5.3",
+        value: "5.3",
+        id: "de",
+      },
+    ],
+  },
+] as HierarchyGridRow[];
+
 describe("Data grid component tests", () => {
   beforeAll(() => {
     (global as any).CSS = {
       escape: (str: string): string => str,
     };
     window.HTMLElement.prototype.scrollIntoView = jest.fn;
   });
+
   test("Renders with correct content", async () => {
-    const { getByText, getAllByRole } = await render(
-      <DxcDataGrid columns={columns} rows={expandableRows} />
-    );
+    const { getByText, getAllByRole } = render(<DxcDataGrid columns={columns} rows={expandableRows} />);
     expect(getByText("46")).toBeTruthy();
     const rows = getAllByRole("row");
     expect(rows.length).toBe(5);
   });
-  // test("Content is sorted correctly", async () => {
-  //   const { getByText, getAllByRole } = await render(<DxcDataGrid columns={columns} rows={expandableRows} />);
-  //   expect(getByText("% Complete")).toBeTruthy();
-  //   const headerCell = screen.getAllByRole("columnheader")[1];
-  //   expect(getAllByRole("gridcell")[0].textContent).toBe("1");
-  //   expect(headerCell.textContent).toBe(" % Complete");
-  //   await fireEvent.click(headerCell);
-  //   expect(headerCell.getAttribute("aria-sort")).toBe("ascending");
-  //   expect(getByText("5")).toBeTruthy();
-  //   // await waitFor(() => expect(getAllByRole("gridcell")[0].textContent).toBe("4"));
-  //   //waitFor(() => expect(getAllByRole("gridcell").length).toBe(8));
-  // });
+
+  test("Renders hierarchy rows", () => {
+    const onSelectRows = jest.fn();
+    const selectedRows = new Set<number | string>();
+    const { getAllByRole } = render(
+      <DxcDataGrid
+        columns={columns}
+        rows={hierarchyRows}
+        uniqueRowId="id"
+        selectable
+        onSelectRows={onSelectRows}
+        selectedRows={selectedRows}
+      />
+    );
+    const rows = getAllByRole("row");
+    expect(rows.length).toBe(5);
+  });
+
+  test("Renders column headers", () => {
+    const { getByText } = render(<DxcDataGrid columns={columns} rows={expandableRows} />);
+    expect(getByText("ID")).toBeTruthy();
+    expect(getByText("% Complete")).toBeTruthy();
+  });
+
+  test("Expands and collapses a row to show custom content", async () => {
+    const { getAllByRole, getByText, queryByText } = render(
+      <DxcDataGrid columns={columns} rows={expandableRows} uniqueRowId="id" expandable />
+    );
+    const buttons = getAllByRole("button");
+    buttons[0] && fireEvent.click(buttons[0]);
+    expect(getByText("Custom content 1")).toBeTruthy();
+    buttons[0] && fireEvent.click(buttons[0]);
+    expect(queryByText("Custom content 1")).not.toBeTruthy();
+  });
+
+  test("Sorting by column works as expected", async () => {
+    const { getAllByRole } = render(
+      <DxcDataGrid columns={columns} rows={expandableRows} uniqueRowId="id" expandable />
+    );
+    const headers = getAllByRole("columnheader");
+    const sortableHeader = headers[1];
+
+    sortableHeader && fireEvent.click(sortableHeader);
+    expect(sortableHeader?.getAttribute("aria-sort")).toBe("ascending");
+    await waitFor(() => {
+      const cells = getAllByRole("gridcell");
+      expect(cells[1]?.textContent).toBe("1");
+    });
+    sortableHeader && fireEvent.click(sortableHeader);
+    expect(sortableHeader?.getAttribute("aria-sort")).toBe("descending");
+    await waitFor(() => {
+      const cells = getAllByRole("gridcell");
+      expect(cells[1]?.textContent).toBe("5");
+    });
+  });
+
+  test("Expands multiple rows at once", () => {
+    const { getAllByRole, getByText } = render(
+      <DxcDataGrid columns={columns} rows={expandableRows} uniqueRowId="id" expandable />
+    );
+
+    const buttons = getAllByRole("button");
+    buttons[0] && fireEvent.click(buttons[0]);
+    buttons[1] && fireEvent.click(buttons[1]);
+
+    expect(getByText("Custom content 1")).toBeTruthy();
+    expect(getByText("Custom content 2")).toBeTruthy();
+  });
 });

packages/lib/src/nav-tabs/NavTabs.test.tsx

@@ -69,4 +69,47 @@ describe("Tabs component tests", () => {
     expect(tabs[1]?.getAttribute("tabindex")).toBe("-1");
     expect(tabs[2]?.getAttribute("tabindex")).toBe("3");
   });
+
+  // test("Keyboard navigation changes focus on arrow keys", () => {
+  //   const { getByRole, getAllByRole } = render(
+  //     <DxcNavTabs>
+  //       <DxcNavTabs.Tab>Tab 1</DxcNavTabs.Tab>
+  //       <DxcNavTabs.Tab disabled>Tab 2</DxcNavTabs.Tab>
+  //       <DxcNavTabs.Tab active>Tab 3</DxcNavTabs.Tab>
+  //     </DxcNavTabs>
+  //   );
+
+  //   const tablist = getByRole("tablist");
+  //   const tabs = getAllByRole("tab");
+
+  //   expect(tabs[2]?.getAttribute("aria-selected")).toBe("true");
+
+  //   fireEvent.keyDown(tablist, { key: "ArrowLeft" });
+  //   expect(tabs[0]?.getAttribute("tabindex")).toBe("0");
+
+  //   fireEvent.keyDown(tablist, { key: "ArrowRight" });
+  //   expect(tabs[2]?.getAttribute("tabindex")).toBe("0");
+  // });
+
+  test("Disabled tabs have aria-disabled and cannot be tab-focused", () => {
+    const { getAllByRole } = render(
+      <DxcNavTabs>
+        <DxcNavTabs.Tab disabled>Disabled Tab</DxcNavTabs.Tab>
+        <DxcNavTabs.Tab active>Active Tab</DxcNavTabs.Tab>
+      </DxcNavTabs>
+    );
+
+    const tabs = getAllByRole("tab");
+    expect(tabs[0]?.getAttribute("aria-disabled")).toBe("true");
+    expect(tabs[0]?.getAttribute("tabindex")).toBe("-1");
+  });
+
+  test("Context passes correct iconPosition to children", () => {
+    const { getByText } = render(
+      <DxcNavTabs iconPosition={"top"}>
+        <DxcNavTabs.Tab>Tab 1</DxcNavTabs.Tab>
+      </DxcNavTabs>
+    );
+    expect(getByText("Tab 1")).toBeTruthy();
+  });
 });