diff --git a/package-lock.json b/package-lock.json
index 445632478..e28622c70 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,6 +19,7 @@
"lint-staged": "^15.2.7",
"prettier": "^3.2.5",
"storybook-addon-pseudo-states": "^9.1.10",
+ "ts-node": "^10.9.2",
"turbo": "^2.0.4",
"typescript": "^5.6.3"
},
@@ -2156,6 +2157,30 @@
"tslib": "^2.4.0"
}
},
+ "node_modules/@cspotcode/source-map-support": {
+ "version": "0.8.1",
+ "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz",
+ "integrity": "sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==",
+ "dev": true,
+ "license": "MIT",
+ "dependencies": {
+ "@jridgewell/trace-mapping": "0.3.9"
+ },
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/@cspotcode/source-map-support/node_modules/@jridgewell/trace-mapping": {
+ "version": "0.3.9",
+ "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz",
+ "integrity": "sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==",
+ "dev": true,
+ "license": "MIT",
+ "dependencies": {
+ "@jridgewell/resolve-uri": "^3.0.3",
+ "@jridgewell/sourcemap-codec": "^1.4.10"
+ }
+ },
"node_modules/@dnd-kit/accessibility": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/@dnd-kit/accessibility/-/accessibility-3.1.1.tgz",
@@ -6123,6 +6148,34 @@
"node": ">= 10"
}
},
+ "node_modules/@tsconfig/node10": {
+ "version": "1.0.12",
+ "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.12.tgz",
+ "integrity": "sha512-UCYBaeFvM11aU2y3YPZ//O5Rhj+xKyzy7mvcIoAjASbigy8mHMryP5cK7dgjlz2hWxh1g5pLw084E0a/wlUSFQ==",
+ "dev": true,
+ "license": "MIT"
+ },
+ "node_modules/@tsconfig/node12": {
+ "version": "1.0.11",
+ "resolved": "https://registry.npmjs.org/@tsconfig/node12/-/node12-1.0.11.tgz",
+ "integrity": "sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==",
+ "dev": true,
+ "license": "MIT"
+ },
+ "node_modules/@tsconfig/node14": {
+ "version": "1.0.3",
+ "resolved": "https://registry.npmjs.org/@tsconfig/node14/-/node14-1.0.3.tgz",
+ "integrity": "sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==",
+ "dev": true,
+ "license": "MIT"
+ },
+ "node_modules/@tsconfig/node16": {
+ "version": "1.0.4",
+ "resolved": "https://registry.npmjs.org/@tsconfig/node16/-/node16-1.0.4.tgz",
+ "integrity": "sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==",
+ "dev": true,
+ "license": "MIT"
+ },
"node_modules/@tybys/wasm-util": {
"version": "0.10.1",
"resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.1.tgz",
@@ -7709,6 +7762,13 @@
"url": "https://github.com/sponsors/jonschlinkert"
}
},
+ "node_modules/arg": {
+ "version": "4.1.3",
+ "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz",
+ "integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==",
+ "dev": true,
+ "license": "MIT"
+ },
"node_modules/argparse": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -8902,6 +8962,13 @@
"node": ">= 6"
}
},
+ "node_modules/create-require": {
+ "version": "1.1.1",
+ "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",
+ "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==",
+ "dev": true,
+ "license": "MIT"
+ },
"node_modules/cross-env": {
"version": "7.0.3",
"resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz",
@@ -14687,6 +14754,13 @@
"node": ">=10"
}
},
+ "node_modules/make-error": {
+ "version": "1.3.6",
+ "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
+ "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==",
+ "dev": true,
+ "license": "ISC"
+ },
"node_modules/makeerror": {
"version": "1.0.12",
"resolved": "https://registry.npmjs.org/makeerror/-/makeerror-1.0.12.tgz",
@@ -19166,6 +19240,60 @@
"integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
"license": "Apache-2.0"
},
+ "node_modules/ts-node": {
+ "version": "10.9.2",
+ "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.2.tgz",
+ "integrity": "sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==",
+ "dev": true,
+ "license": "MIT",
+ "dependencies": {
+ "@cspotcode/source-map-support": "^0.8.0",
+ "@tsconfig/node10": "^1.0.7",
+ "@tsconfig/node12": "^1.0.7",
+ "@tsconfig/node14": "^1.0.0",
+ "@tsconfig/node16": "^1.0.2",
+ "acorn": "^8.4.1",
+ "acorn-walk": "^8.1.1",
+ "arg": "^4.1.0",
+ "create-require": "^1.1.0",
+ "diff": "^4.0.1",
+ "make-error": "^1.1.1",
+ "v8-compile-cache-lib": "^3.0.1",
+ "yn": "3.1.1"
+ },
+ "bin": {
+ "ts-node": "dist/bin.js",
+ "ts-node-cwd": "dist/bin-cwd.js",
+ "ts-node-esm": "dist/bin-esm.js",
+ "ts-node-script": "dist/bin-script.js",
+ "ts-node-transpile-only": "dist/bin-transpile.js",
+ "ts-script": "dist/bin-script-deprecated.js"
+ },
+ "peerDependencies": {
+ "@swc/core": ">=1.2.50",
+ "@swc/wasm": ">=1.2.50",
+ "@types/node": "*",
+ "typescript": ">=2.7"
+ },
+ "peerDependenciesMeta": {
+ "@swc/core": {
+ "optional": true
+ },
+ "@swc/wasm": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/ts-node/node_modules/diff": {
+ "version": "4.0.2",
+ "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz",
+ "integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==",
+ "dev": true,
+ "license": "BSD-3-Clause",
+ "engines": {
+ "node": ">=0.3.1"
+ }
+ },
"node_modules/tsconfig-paths": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-4.2.0.tgz",
@@ -20431,6 +20559,13 @@
"node": ">=6"
}
},
+ "node_modules/v8-compile-cache-lib": {
+ "version": "3.0.1",
+ "resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz",
+ "integrity": "sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==",
+ "dev": true,
+ "license": "MIT"
+ },
"node_modules/v8-to-istanbul": {
"version": "9.3.0",
"resolved": "https://registry.npmjs.org/v8-to-istanbul/-/v8-to-istanbul-9.3.0.tgz",
@@ -21326,6 +21461,16 @@
"node": ">=8"
}
},
+ "node_modules/yn": {
+ "version": "3.1.1",
+ "resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz",
+ "integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==",
+ "dev": true,
+ "license": "MIT",
+ "engines": {
+ "node": ">=6"
+ }
+ },
"node_modules/yocto-queue": {
"version": "0.1.0",
"resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
diff --git a/packages/lib/jest.config.ts b/packages/lib/jest.config.ts
index c84a9d09a..121bf4756 100644
--- a/packages/lib/jest.config.ts
+++ b/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: {
diff --git a/packages/lib/package.json b/packages/lib/package.json
index 35121a2e1..e394d3f8c 100644
--- a/packages/lib/package.json
+++ b/packages/lib/package.json
@@ -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",
diff --git a/packages/lib/src/bleed/Bleed.test.tsx b/packages/lib/src/bleed/Bleed.test.tsx
new file mode 100644
index 000000000..0c59649b5
--- /dev/null
+++ b/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(
+
+ {testContent}
+
+ );
+ expect(getByText(testContent)).toBeTruthy();
+ });
+});
diff --git a/packages/lib/src/bleed/Bleed.tsx b/packages/lib/src/bleed/Bleed.tsx
index 26ccf92fd..c4a9af9f6 100644
--- a/packages/lib/src/bleed/Bleed.tsx
+++ b/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 (
-
- {children}
-
- );
-}
+const DxcBleed = ({ space, horizontal, vertical, top, right, bottom, left, children }: BleedPropsType) => (
+
+ {children}
+
+);
+
+export default DxcBleed;
diff --git a/packages/lib/src/breadcrumbs/Breadcrumbs.test.tsx b/packages/lib/src/breadcrumbs/Breadcrumbs.test.tsx
index 7d0860d4a..d04f6af56 100644
--- a/packages/lib/src/breadcrumbs/Breadcrumbs.test.tsx
+++ b/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(
+
+ );
+ const homeLink = getByText("Home");
+ userEvent.click(homeLink);
+ expect(onItemClick).toHaveBeenCalledWith("/home");
+ });
+ test("handleOnMouseEnter sets title when text overflows", () => {
+ const { getByText } = render(
+
+ );
+
+ 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");
+ });
});
diff --git a/packages/lib/src/footer/Footer.tsx b/packages/lib/src/footer/Footer.tsx
index 8029b93b2..577dfe1c5 100644
--- a/packages/lib/src/footer/Footer.tsx
+++ b/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;
diff --git a/packages/lib/src/header/Header.test.tsx b/packages/lib/src/header/Header.test.tsx
index 74727b755..e835df1f2 100644
--- a/packages/lib/src/header/Header.test.tsx
+++ b/packages/lib/src/header/Header.test.tsx
@@ -1,5 +1,7 @@
-import { render } from "@testing-library/react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import "@testing-library/jest-dom";
import DxcHeader from "./Header";
+import { Item, GroupItem } from "../base-menu/types";
const defaultHeaderBranding = {
src: "url-to-dxc-logo",
@@ -7,16 +9,64 @@ const defaultHeaderBranding = {
};
describe("Header component tests", () => {
+ const mockMatchMedia = jest.fn();
+
beforeAll(() => {
Object.defineProperty(window, "matchMedia", {
writable: true,
- value: jest.fn().mockImplementation(() => ({
- matches: false,
- })),
+ value: mockMatchMedia,
});
});
+
+ beforeEach(() => {
+ mockMatchMedia.mockImplementation(() => ({
+ matches: false,
+ addEventListener: jest.fn(),
+ removeEventListener: jest.fn(),
+ }));
+ });
+
test("Header renders with default logo", () => {
const { getByAltText } = render();
expect(getByAltText("DXC Logo")).toBeTruthy();
});
+
+ test("hamburger button triggers onClick when clicked", () => {
+ mockMatchMedia.mockImplementation(() => ({
+ matches: true,
+ addEventListener: jest.fn(),
+ removeEventListener: jest.fn(),
+ }));
+
+ const navItems: Item[] = [{ label: "Home", onSelect: jest.fn() }];
+ render();
+
+ const menuButton = screen.getByRole("button", { name: /toggle menu/i });
+ fireEvent.click(menuButton);
+ expect(screen.getByText("Home")).toBeInTheDocument();
+ });
+
+ test("handles nested group items beyond LEVEL_LIMIT (should be ignored)", () => {
+ const deepNestedItems: (Item | GroupItem)[] = [
+ {
+ label: "Services",
+ items: [
+ { label: "Web Design", onSelect: jest.fn() },
+ {
+ label: "Development", // This nested group should be ignored due to LEVEL_LIMIT = 1
+ items: [
+ { label: "Frontend", onSelect: jest.fn() },
+ { label: "Backend", onSelect: jest.fn() },
+ ],
+ },
+ ],
+ },
+ ];
+
+ render();
+ expect(screen.getByText("Services")).toBeInTheDocument();
+ expect(screen.queryByText("Development")).not.toBeInTheDocument();
+ expect(screen.queryByText("Frontend")).not.toBeInTheDocument();
+ expect(screen.queryByText("Backend")).not.toBeInTheDocument();
+ });
});
diff --git a/packages/lib/src/nav-tabs/NavTabs.test.tsx b/packages/lib/src/nav-tabs/NavTabs.test.tsx
index a18a9868c..64fa9e467 100644
--- a/packages/lib/src/nav-tabs/NavTabs.test.tsx
+++ b/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(
- //
- // Tab 1
- // Tab 2
- // Tab 3
- //
- // );
+ test("Keyboard navigation changes focus on arrow keys", () => {
+ const { getByRole, getAllByRole } = render(
+
+ Tab 1
+ Tab 2
+ Tab 3
+
+ );
- // 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(