Fixes + add test

Author: janfaracik

src/main/frontend/common/components/dropdown.tsx

@@ -1,5 +1,11 @@
 import React, { useEffect, useRef } from "react";
 
+declare global {
+  interface Window {
+    Behaviour: any;
+  }
+}
+
 /**
  * Provides a bridge between React and the Jenkins' dropdown component
  */
@@ -32,8 +38,7 @@ export default function Dropdown({ items, disabled }: DropdownProps) {
   `;
     buttonRef.current.parentNode?.appendChild(template);
 
-    // @ts-ignore
-    Behaviour.applySubtree(buttonRef.current.parentNode, true);
+    window.Behaviour?.applySubtree(buttonRef.current.parentNode, true);
   }, []);
 
   return (

src/main/frontend/common/components/tooltip.tsx

@@ -1,5 +1,11 @@
 import React, { useEffect, useRef } from "react";
 
+declare global {
+  interface Window {
+    Behaviour: any;
+  }
+}
+
 /**
  * Provides a bridge between React and the Jenkins' tooltip component
  */
@@ -11,8 +17,7 @@ export default function Tooltip({ text, children }: TooltipProps) {
       return;
     }
 
-    // @ts-ignore
-    Behaviour.applySubtree(ref.current.parentNode, true);
+    window.Behaviour?.applySubtree(ref.current.parentNode, true);
   }, []);
 
   return (

src/main/frontend/pipeline-console-view/pipeline-console/main/stage-details.spec.tsx

@@ -0,0 +1,59 @@
+/** * @jest-environment jsdom */
+
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { Result, StageInfo } from "../../../pipeline-graph-view/pipeline-graph/main";
+import { paused } from "../../../common/utils/timings";
+import StageDetails from "./stage-details";
+
+describe("StageDetails", () => {
+  it("renders null when stage is null", () => {
+    const { container } = render(<StageDetails stage={null} />);
+
+    expect(container.firstChild).toBeNull();
+  });
+
+  it("renders stage name and status color class", () => {
+    render(<StageDetails stage={mockStage} />);
+
+    const heading = screen.getByRole("heading", { level: 2 });
+    expect(heading).toHaveTextContent("Build");
+    const wrapper = heading.closest(".pgv-stage-details");
+    expect(wrapper?.className).toMatch("pgv-stage-details jenkins-!-success-color");
+  });
+
+  it("shows running bar if stage is running", () => {
+    render(<StageDetails stage={{ ...mockStage, state: Result.running }} />);
+
+    const runningIndicator = document.querySelector(".pgv-stage-details__running");
+    expect(runningIndicator).toBeInTheDocument()
+  });
+
+  it("does not show pause time if pauseDurationMillis is 0", () => {
+    render(<StageDetails stage={{ ...mockStage, pauseDurationMillis: 0 }} />);
+
+    expect(screen.queryByText(paused(0))).not.toBeInTheDocument();
+  });
+
+  it("disables dropdown if stage is synthetic", () => {
+    render(<StageDetails stage={{ ...mockStage, synthetic: true }} />);
+
+    expect(screen.queryByRole("button")).toBeDisabled();
+  });
+});
+
+const mockStage: StageInfo = {
+  name: "Build",
+  state: Result.success,
+  skeleton: false,
+  completePercent: 100,
+  id: 1,
+  title: "Build",
+  type: "STAGE",
+  agent: "agent-1",
+  children: [],
+  pauseDurationMillis: 5000,
+  startTimeMillis: 1713440000000,
+  totalDurationMillis: 120000,
+  url: "",
+};

src/main/frontend/setupTests.js

@@ -1 +1 @@
-require("@testing-library/react");
+require("@testing-library/jest-dom");

tsconfig.json

@@ -9,6 +9,7 @@
       "jsx": "react",
       "resolveJsonModule": true,
       "esModuleInterop": true,
-      "useUnknownInCatchVariables": false
+      "useUnknownInCatchVariables": false,
+      "types": ["node", "jest", "@testing-library/jest-dom"]
     }
   }