Merge pull request #2348 from dxc-technology/PelayoFelgueroso/testing-coverage

Improve testing coverage

Author: Mil4n0r

package-lock.json

@@ -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/jest.config.ts

@@ -94,6 +94,7 @@
     "playwright": "^1.54.1",
     "storybook": "^9.1.10",
     "storybook-addon-pseudo-states": "^9.1.10",
+    "ts-node": "^10.9.2",
     "tsup": "^8.1.0",
     "typescript": "^5.6.3",
     "vitest": "^3.2.4",

packages/lib/package.json

@@ -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.test.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/bleed/Bleed.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/breadcrumbs/Breadcrumbs.test.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;