Merge pull request #2443 from dxc-technology/PelayoFelgueroso/theme-generator_test

[doc] Test Theme Generator

Author: Jialecl

apps/website/eslint.config.mjs

@@ -1,6 +1,8 @@
 import nextPlugin from "@next/eslint-plugin-next";
 import nextConfig from "@dxc-technology/eslint-config/next.js";
 import js from "@eslint/js";
+import jest from "eslint-plugin-jest";
+import globals from "globals";
 import path from "node:path";
 import { fileURLToPath } from "node:url";
 
@@ -19,6 +21,20 @@ export default [
     tsconfigRootDir: __dirname,
     tsconfigName: "tsconfig.lint.json",
   }),
+  {
+    files: ["**/*.test.{ts,tsx,js,jsx}"],
+    plugins: { jest },
+    rules: {
+      ...jest.configs.recommended.rules,
+      "jest/no-commented-out-tests": "off",
+    },
+    languageOptions: {
+      globals: {
+        ...globals.jest,
+        ...globals.node,
+      },
+    },
+  },
   {
     ignores: ["out/**", ".next/**"],
   },

apps/website/jest.config.mjs

@@ -0,0 +1,27 @@
+import nextJest from "next/jest.js";
+
+const createJestConfig = nextJest({
+  dir: "./",
+});
+
+const customJestConfig = {
+  testEnvironment: "jsdom",
+  collectCoverage: true,
+  coveragePathIgnorePatterns: [
+    "utils.ts",
+    "index.ts",
+    "test/mocks",
+    ".*Context\\.tsx$",
+  ],
+  moduleNameMapper: {
+    "\\.(css|less|scss|sass)$": "identity-obj-proxy",
+    "\\.(svg)$": "<rootDir>/test/mocks/svgMock.ts",
+    "\\.(png)$": "<rootDir>/test/mocks/pngMock.ts",
+    "^screens/(.*)$": "<rootDir>/screens/$1",
+    "^hooks/(.*)$": "<rootDir>/hooks/$1",
+    "^@/(.*)$": "<rootDir>/$1",
+  },
+  testMatch: ["**/?(*.)+(spec|test).[jt]s?(x)", "!**/?(*.)+(accessibility.)(spec|test).[jt]s?(x)"],
+};
+
+export default createJestConfig(customJestConfig);

apps/website/package.json

@@ -5,7 +5,8 @@
     "dev": "next dev --webpack",
     "build": "next build --webpack",
     "start": "next start",
-    "lint": "eslint . --max-warnings 0"
+    "lint": "eslint . --max-warnings 0",
+    "test": "jest --config=./jest.config.mjs"
   },
   "dependencies": {
     "@adobe/leonardo-contrast-colors": "^1.0.0",
@@ -29,15 +30,20 @@
     "slugify": "^1.6.5"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^6.8.0",
+    "@testing-library/react": "^16.3.0",
     "@dxc-technology/typescript-config": "*",
     "@eslint/js": "^9.31.1",
+    "@types/jest": "^29.5.12",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-color": "^3.0.6",
     "@types/react-dom": "^18",
     "@types/webpack": "^5.28.5",
     "eslint": "^9.39.1",
     "eslint-config-next": "16.2.6",
+    "jest": "^30.2.0",
+    "jest-environment-jsdom": "^30.2.0",
     "typescript": "^5.6.3"
   }
 }

apps/website/screens/theme-generator/steps/ReviewDetails.tsx

@@ -23,6 +23,7 @@ const ReviewDetails = ({ tokens, logos, themeJson }: { tokens: Tokens; logos: Lo
                   mode="secondary"
                   icon="content_copy"
                   size={{ height: "medium" }}
+                  title="Copy theme"
                   onClick={() => handleCopy(themeJson)}
                 />
               </div>

apps/website/test/hooks/useCopyToClipboard.test.tsx

@@ -0,0 +1,81 @@
+import { renderHook } from "@testing-library/react";
+import { HalstackProvider } from "@dxc-technology/halstack-react";
+import useCopyToClipboard from "../../hooks/useCopyToClipboard";
+
+describe("useCopyToClipboard", () => {
+  const wrapper = ({ children }: { children: React.ReactNode }) => <HalstackProvider>{children}</HalstackProvider>;
+
+  let mockWriteText: jest.Mock;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+
+    mockWriteText = jest.fn();
+    Object.assign(navigator, {
+      clipboard: {
+        writeText: mockWriteText,
+      },
+    });
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it("should return a function", () => {
+    const { result } = renderHook(() => useCopyToClipboard(), { wrapper });
+    expect(typeof result.current).toBe("function");
+  });
+
+  it("should copy text to clipboard successfully", async () => {
+    const { result } = renderHook(() => useCopyToClipboard(), { wrapper });
+    const testText = "Hello World";
+
+    mockWriteText.mockResolvedValue(undefined);
+
+    result.current(testText);
+
+    expect(mockWriteText).toHaveBeenCalledWith(testText);
+
+    await new Promise((resolve) => setTimeout(resolve, 0));
+  });
+
+  it("should handle errors when copying to clipboard", async () => {
+    const { result } = renderHook(() => useCopyToClipboard(), { wrapper });
+    const testText = "Test Error";
+    const error = new Error("Clipboard error");
+
+    mockWriteText.mockRejectedValue(error);
+
+    result.current(testText);
+
+    expect(mockWriteText).toHaveBeenCalledWith(testText);
+
+    await new Promise((resolve) => setTimeout(resolve, 0));
+  });
+
+  it("should call navigator.clipboard.writeText with the correct text", () => {
+    const { result } = renderHook(() => useCopyToClipboard(), { wrapper });
+    const testTexts = ["Text 1", "Example code", ""];
+
+    mockWriteText.mockResolvedValue(undefined);
+
+    for (const text of testTexts) {
+      result.current(text);
+      expect(mockWriteText).toHaveBeenCalledWith(text);
+    }
+  });
+
+  it("should work with multiple consecutive calls", () => {
+    const { result } = renderHook(() => useCopyToClipboard(), { wrapper });
+
+    mockWriteText.mockResolvedValue(undefined);
+
+    result.current("First copy");
+    result.current("Second copy");
+
+    expect(mockWriteText).toHaveBeenCalledTimes(2);
+    expect(mockWriteText).toHaveBeenNthCalledWith(1, "First copy");
+    expect(mockWriteText).toHaveBeenNthCalledWith(2, "Second copy");
+  });
+});

apps/website/test/theme-generator/BottomButtons.test.tsx

@@ -0,0 +1,37 @@
+import "@testing-library/jest-dom";
+import { fireEvent, render, screen } from "@testing-library/react";
+import BottomButtons from "../../screens/theme-generator/components/BottomButtons";
+
+describe("BottomButtons", () => {
+  it("shows Back disabled and Next enabled on first step", () => {
+    const onChangeStep = jest.fn();
+    const onExport = jest.fn();
+
+    render(<BottomButtons currentStep={0} onChangeStep={onChangeStep} onExport={onExport} />);
+
+    const backButton = screen.getByRole("button", { name: "Back" });
+    const nextButton = screen.getByRole("button", { name: "Next" });
+
+    expect(backButton).toBeDisabled();
+    expect(nextButton).toBeEnabled();
+
+    fireEvent.click(nextButton);
+    expect(onChangeStep).toHaveBeenCalledWith(1);
+  });
+
+  it("shows Export theme on last step and triggers export", () => {
+    const onChangeStep = jest.fn();
+    const onExport = jest.fn();
+
+    render(<BottomButtons currentStep={2} onChangeStep={onChangeStep} onExport={onExport} />);
+
+    const backButton = screen.getByRole("button", { name: "Back" });
+    const exportButton = screen.getByRole("button", { name: "Export theme" });
+
+    fireEvent.click(backButton);
+    expect(onChangeStep).toHaveBeenCalledWith(1);
+
+    fireEvent.click(exportButton);
+    expect(onExport).toHaveBeenCalledTimes(1);
+  });
+});

apps/website/test/theme-generator/BrandingDetails.test.tsx

@@ -0,0 +1,116 @@
+import "@testing-library/jest-dom";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import BrandingDetails from "../../screens/theme-generator/steps/BrandingDetails";
+import { Colors, Logos } from "../../screens/theme-generator/types";
+
+// Mock ResizeObserver
+global.ResizeObserver = jest.fn().mockImplementation(() => ({
+  observe: jest.fn(),
+  unobserve: jest.fn(),
+  disconnect: jest.fn(),
+}));
+
+// Mock SketchColorPicker to avoid react-color issues (Canvas/Context errors)
+jest.mock("react-color", () => ({
+  SketchPicker: ({ color, onChange }: { color: string; onChange: (color: { hex: string }) => void }) => (
+    <div data-testid="mock-sketch-picker">
+      Picker for {color}
+      <button onClick={() => onChange({ hex: "#ffffff" })}>Select White</button>
+    </div>
+  ),
+}));
+
+describe("BrandingDetails", () => {
+  beforeAll(() => {
+    global.URL.createObjectURL = jest.fn(() => "blob:mock-url");
+  });
+
+  const colors: Colors = {
+    primary: "#5F249F",
+    secondary: "#0067B3",
+    tertiary: "#F7CF2B",
+    neutral: "#999999",
+    info: "#0067B3",
+    success: "#59D97D",
+    error: "#FE344F",
+    warning: "#F59F3D",
+  };
+
+  it("renders color sections with ColorCard components", () => {
+    const onColorsChange = jest.fn();
+    const onLogosChange = jest.fn();
+
+    const logos: Logos = { mainLogo: [], footerLogo: [], footerReducedLogo: [], favicon: [] };
+
+    render(
+      <BrandingDetails colors={colors} onColorsChange={onColorsChange} logos={logos} onLogosChange={onLogosChange} />
+    );
+
+    expect(screen.getByDisplayValue("#5F249F")).toBeInTheDocument();
+    expect(screen.getByText("Primary")).toBeInTheDocument();
+  });
+
+  it("updates colors when input value changes", () => {
+    const onColorsChange = jest.fn();
+    const onLogosChange = jest.fn();
+
+    const logos: Logos = { mainLogo: [], footerLogo: [], footerReducedLogo: [], favicon: [] };
+
+    render(
+      <BrandingDetails colors={colors} onColorsChange={onColorsChange} logos={logos} onLogosChange={onLogosChange} />
+    );
+
+    const primaryInput = screen.getByDisplayValue("#5F249F");
+    fireEvent.change(primaryInput, { target: { value: "#111111" } });
+    fireEvent.blur(primaryInput);
+
+    expect(onColorsChange).toHaveBeenCalledWith(
+      expect.objectContaining({
+        primary: "#111111",
+      })
+    );
+  });
+
+  it("renders logo sections with FileInput components", () => {
+    const onColorsChange = jest.fn();
+    const onLogosChange = jest.fn();
+
+    const logos: Logos = {
+      mainLogo: [],
+      footerLogo: [{ file: new File(["f"], "footer.png", { type: "image/png" }) }],
+      footerReducedLogo: [],
+      favicon: [],
+    };
+
+    render(
+      <BrandingDetails colors={colors} onColorsChange={onColorsChange} logos={logos} onLogosChange={onLogosChange} />
+    );
+
+    expect(screen.getByText("Main logo")).toBeInTheDocument();
+    expect(screen.getByText("Default footer logo")).toBeInTheDocument();
+  });
+
+  it("updates logos when a file is selected", async () => {
+    const onColorsChange = jest.fn();
+    const onLogosChange = jest.fn();
+
+    const logos: Logos = { mainLogo: [], footerLogo: [], footerReducedLogo: [], favicon: [] };
+
+    render(
+      <BrandingDetails colors={colors} onColorsChange={onColorsChange} logos={logos} onLogosChange={onLogosChange} />
+    );
+
+    const file = new File(["logo content"], "main-logo.png", { type: "image/png" });
+    const mainLogoInput = screen.getByLabelText("Main logo");
+    fireEvent.change(mainLogoInput, { target: { files: [file] } });
+
+    await waitFor(() => {
+      expect(onLogosChange).toHaveBeenCalled();
+      const firstCallArguments = onLogosChange.mock.calls[0] as [Logos];
+      const updatedLogos = firstCallArguments[0];
+      expect(updatedLogos.mainLogo).toHaveLength(1);
+      expect(updatedLogos.mainLogo[0]?.file).toBeInstanceOf(File);
+      expect(updatedLogos.mainLogo[0]?.file.name).toBe("main-logo.png");
+    });
+  });
+});