Add tests for DxcBleed and DxcBreadcrumbs components; update Jest config to ignore mock files

Author: PelayoFelgueroso

packages/lib/jest.config.ts

@@ -5,6 +5,7 @@ const config: Config = {
   coveragePathIgnorePatterns: [
     "utils.ts",
     "index.ts",
+    "test/mocks",
     ".*Context\\.tsx$", // Is deprecated and will be removed in the future
   ],
   moduleNameMapper: {

packages/lib/src/bleed/Bleed.test.tsx

@@ -0,0 +1,14 @@
+import { render } from "@testing-library/react";
+import DxcBleed from "./Bleed";
+
+describe("Bleed component tests", () => {
+  test("Bleed renders correctly with children", () => {
+    const testContent = "Test content";
+    const { getByText } = render(
+      <DxcBleed space="1rem">
+        <div>{testContent}</div>
+      </DxcBleed>
+    );
+    expect(getByText(testContent)).toBeTruthy();
+  });
+});

packages/lib/src/bleed/Bleed.tsx

@@ -3,17 +3,17 @@ import DxcContainer from "../container/Container";
 
 const getNegativeValue = (value?: string) => (value ? `calc(${value} * -1)` : null);
 
-export default function DxcBleed({ space, horizontal, vertical, top, right, bottom, left, children }: BleedPropsType) {
-  return (
-    <DxcContainer
-      margin={{
-        top: getNegativeValue(top) ?? getNegativeValue(vertical) ?? getNegativeValue(space) ?? "0rem",
-        right: getNegativeValue(right) ?? getNegativeValue(horizontal) ?? getNegativeValue(space) ?? "0rem",
-        bottom: getNegativeValue(bottom) ?? getNegativeValue(vertical) ?? getNegativeValue(space) ?? "0rem",
-        left: getNegativeValue(left) ?? getNegativeValue(horizontal) ?? getNegativeValue(space) ?? "0rem",
-      }}
-    >
-      {children}
-    </DxcContainer>
-  );
-}
+const DxcBleed = ({ space, horizontal, vertical, top, right, bottom, left, children }: BleedPropsType) => (
+  <DxcContainer
+    margin={{
+      top: getNegativeValue(top) ?? getNegativeValue(vertical) ?? getNegativeValue(space) ?? "0rem",
+      right: getNegativeValue(right) ?? getNegativeValue(horizontal) ?? getNegativeValue(space) ?? "0rem",
+      bottom: getNegativeValue(bottom) ?? getNegativeValue(vertical) ?? getNegativeValue(space) ?? "0rem",
+      left: getNegativeValue(left) ?? getNegativeValue(horizontal) ?? getNegativeValue(space) ?? "0rem",
+    }}
+  >
+    {children}
+  </DxcContainer>
+);
+
+export default DxcBleed;

packages/lib/src/breadcrumbs/Breadcrumbs.test.tsx

@@ -93,4 +93,41 @@ describe("Breadcrumbs component tests", () => {
     userEvent.click(getByText("Preferences"));
     expect(onItemClick).toHaveBeenCalledWith("/");
   });
+  test("handleOnClick prevents default and calls onClick when href is provided", () => {
+    const onItemClick = jest.fn();
+    const { getByText } = render(
+      <DxcBreadcrumbs
+        onItemClick={onItemClick}
+        items={[
+          { label: "Home", href: "/home" },
+          { label: "Current Page", href: "" },
+        ]}
+      />
+    );
+    const homeLink = getByText("Home");
+    userEvent.click(homeLink);
+    expect(onItemClick).toHaveBeenCalledWith("/home");
+  });
+  test("handleOnMouseEnter sets title when text overflows", () => {
+    const { getByText } = render(
+      <DxcBreadcrumbs
+        items={[
+          { label: "Home", href: "/home" },
+          { label: "Very Long Current Page Label That Should Overflow", href: "" },
+        ]}
+      />
+    );
+
+    const currentPageElement = getByText("Very Long Current Page Label That Should Overflow");
+
+    // Mock element dimensions to simulate overflow
+    Object.defineProperty(currentPageElement, "scrollWidth", { value: 200, configurable: true });
+    Object.defineProperty(currentPageElement, "clientWidth", { value: 100, configurable: true });
+
+    // Simulate mouse enter
+    userEvent.hover(currentPageElement);
+
+    // Check if title is set when there's overflow
+    expect(currentPageElement.title).toBe("Very Long Current Page Label That Should Overflow");
+  });
 });

packages/lib/src/footer/Footer.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { useContext, useEffect, useMemo, useRef, useState } from "react";
 import styled from "@emotion/styled";
 import DxcIcon from "../icon/Icon";
 import { Tooltip } from "../tooltip/Tooltip";
@@ -288,9 +288,4 @@ const DxcFooter = ({
   );
 };
 
-const LeftContent = ({ children }: { children: ReactNode }) => <>{children}</>;
-const RightContent = ({ children }: { children: ReactNode }) => <>{children}</>;
-
-DxcFooter.LeftContent = LeftContent;
-DxcFooter.RightContent = RightContent;
 export default DxcFooter;

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

@@ -1,4 +1,4 @@
-import { render } from "@testing-library/react";
+import { fireEvent, render } from "@testing-library/react";
 import DxcNavTabs from "./NavTabs";
 
 describe("Tabs component tests", () => {
@@ -70,26 +70,30 @@ describe("Tabs component tests", () => {
     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>
-  //   );
+  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");
+    const tablist = getByRole("tablist");
+    const tabs = getAllByRole("tab");
 
-  //   expect(tabs[2]?.getAttribute("aria-selected")).toBe("true");
+    // Initially, Tab 3 is active
+    expect(tabs[2]?.getAttribute("aria-selected")).toBe("true");
+    expect(tabs[2]?.getAttribute("tabindex")).toBe("0");
 
-  //   fireEvent.keyDown(tablist, { key: "ArrowLeft" });
-  //   expect(tabs[0]?.getAttribute("tabindex")).toBe("0");
+    // Press ArrowLeft - should focus Tab 1 (skips disabled Tab 2)
+    fireEvent.keyDown(tablist, { key: "ArrowLeft" });
+    expect(document.activeElement).toBe(tabs[0]);
 
-  //   fireEvent.keyDown(tablist, { key: "ArrowRight" });
-  //   expect(tabs[2]?.getAttribute("tabindex")).toBe("0");
-  // });
+    // Press ArrowRight from Tab 1 - should focus Tab 3 (skips disabled Tab 2)
+    fireEvent.keyDown(tablist, { key: "ArrowRight" });
+    expect(document.activeElement).toBe(tabs[2]);
+  });
 
   test("Disabled tabs have aria-disabled and cannot be tab-focused", () => {
     const { getAllByRole } = render(