test(FN-4310): complete Step 3 — assert badge spacing and typography styles

Fusion-Task-Id: FN-4310
Fusion-Task-Lineage: 64ade1a4-ae3f-481c-81e8-25bbf7569f0a

packages/dashboard/app/components/__tests__/GitHubBadge.test.tsx

@@ -1,9 +1,23 @@
-import { describe, it, expect, vi } from "vitest";
+import { describe, it, expect, vi, beforeAll, afterAll } from "vitest";
 import { render, screen } from "@testing-library/react";
 import type { IssueInfo, PrInfo } from "@fusion/core";
+import { loadAllAppCss } from "../../test/cssFixture";
 import { GitHubBadge } from "../GitHubBadge";
 
 describe("GitHubBadge", () => {
+  let styleEl: HTMLStyleElement;
+
+  beforeAll(() => {
+    styleEl = document.createElement("style");
+    styleEl.textContent = loadAllAppCss();
+    document.head.appendChild(styleEl);
+  });
+
+  afterAll(() => {
+    styleEl.remove();
+    document.body.innerHTML = "";
+  });
+
   const mockPrInfo: PrInfo = {
     url: "https://github.com/owner/repo/pull/42",
     number: 42,
@@ -141,6 +155,21 @@ describe("GitHubBadge", () => {
     });
   });
 
+  describe("Badge styling", () => {
+    it("uses the updated badge gap and font size", () => {
+      render(<GitHubBadge prInfo={mockPrInfo} />);
+
+      const badge = screen.getByRole("link", { name: "#42" });
+      const styles = getComputedStyle(badge);
+
+      expect(styles.fontSize).toBe("9px");
+      const resolvedGap = styles.gap.startsWith("var(")
+        ? getComputedStyle(document.documentElement).getPropertyValue("--space-sm").trim()
+        : styles.gap;
+      expect(resolvedGap).toBe("8px");
+    });
+  });
+
   describe("Link behavior", () => {
     it("renders PR badge as a semantic link", () => {
       render(<GitHubBadge prInfo={mockPrInfo} />);