test(ui): add component-level coverage for size categories and tooltips

- Add XXL sizeCategory filter integration test
- Add S, M, L, XL badge rendering tests for SizeBadge
- Add S and XXL tooltip text verification tests
- Extract tooltip tests into nested describe with beforeEach/afterEach
  for robust timer lifecycle management

Author: wgordon17

tests/components/PullRequestsTab.test.tsx

@@ -244,6 +244,18 @@ describe("PullRequestsTab", () => {
     expect(screen.queryByText("Large PR")).toBeNull();
   });
 
+  it("filters by sizeCategory 'XXL' tab filter", () => {
+    const prs = [
+      makePullRequest({ id: 1, title: "Huge PR", additions: 800, deletions: 500, repoFullName: "org/repo-a" }),
+      makePullRequest({ id: 2, title: "Medium PR", additions: 30, deletions: 20, repoFullName: "org/repo-a" }),
+    ];
+    viewStore.setTabFilter("pullRequests", "sizeCategory", "XXL");
+    setAllExpanded("pullRequests", ["org/repo-a"], true);
+    render(() => <PullRequestsTab pullRequests={prs} userLogin="" />);
+    screen.getByText("Huge PR");
+    expect(screen.queryByText("Medium PR")).toBeNull();
+  });
+
   it("groups PRs by repo with collapsible headers", () => {
     const prs = [
       makePullRequest({ id: 1, title: "PR in repo A", repoFullName: "org/repo-a" }),

tests/components/shared-badges.test.tsx

@@ -1,4 +1,4 @@
-import { describe, it, expect, vi } from "vitest";
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
 import { render, screen, fireEvent } from "@solidjs/testing-library";
 import RoleBadge from "../../src/app/components/shared/RoleBadge";
 import ReviewBadge from "../../src/app/components/shared/ReviewBadge";
@@ -67,6 +67,26 @@ describe("SizeBadge", () => {
     screen.getByText("1 file");
   });
 
+  it("renders S badge for small-medium changes", () => {
+    render(() => <SizeBadge additions={15} deletions={14} changedFiles={2} />);
+    screen.getByText("S");
+  });
+
+  it("renders M badge for medium changes", () => {
+    render(() => <SizeBadge additions={15} deletions={15} changedFiles={3} />);
+    screen.getByText("M");
+  });
+
+  it("renders L badge for large changes", () => {
+    render(() => <SizeBadge additions={200} deletions={100} changedFiles={10} />);
+    screen.getByText("L");
+  });
+
+  it("renders XL badge for extra-large changes", () => {
+    render(() => <SizeBadge additions={400} deletions={200} changedFiles={20} />);
+    screen.getByText("XL");
+  });
+
   it("renders XXL badge for large changes", () => {
     render(() => <SizeBadge additions={800} deletions={500} changedFiles={42} />);
     screen.getByText("XXL");
@@ -85,18 +105,47 @@ describe("SizeBadge", () => {
     screen.getByText("XS");
   });
 
-  it("shows tooltip with size description on hover", () => {
-    vi.useFakeTimers();
-    const { container } = render(() => (
-      <SizeBadge additions={3} deletions={2} changedFiles={1} />
-    ));
-    const trigger = container.querySelector("span.inline-flex");
-    expect(trigger).not.toBeNull();
-    fireEvent.pointerEnter(trigger!);
-    vi.advanceTimersByTime(300);
-    expect(document.body.textContent).toContain("XS: <10 lines changed");
-    fireEvent.pointerLeave(trigger!);
-    vi.advanceTimersByTime(500);
-    vi.useRealTimers();
+  describe("tooltips", () => {
+    beforeEach(() => vi.useFakeTimers());
+    afterEach(() => vi.useRealTimers());
+
+    it("shows tooltip with size description on hover", () => {
+      const { container } = render(() => (
+        <SizeBadge additions={3} deletions={2} changedFiles={1} />
+      ));
+      const trigger = container.querySelector("span.inline-flex");
+      expect(trigger).not.toBeNull();
+      fireEvent.pointerEnter(trigger!);
+      vi.advanceTimersByTime(300);
+      expect(document.body.textContent).toContain("XS: <10 lines changed");
+      fireEvent.pointerLeave(trigger!);
+      vi.advanceTimersByTime(500);
+    });
+
+    it("shows tooltip with S size description on hover", () => {
+      const { container } = render(() => (
+        <SizeBadge additions={10} deletions={5} changedFiles={2} />
+      ));
+      const trigger = container.querySelector("span.inline-flex");
+      expect(trigger).not.toBeNull();
+      fireEvent.pointerEnter(trigger!);
+      vi.advanceTimersByTime(300);
+      expect(document.body.textContent).toContain("S: 10–29 lines changed");
+      fireEvent.pointerLeave(trigger!);
+      vi.advanceTimersByTime(500);
+    });
+
+    it("shows tooltip with XXL size description on hover", () => {
+      const { container } = render(() => (
+        <SizeBadge additions={800} deletions={500} changedFiles={42} />
+      ));
+      const trigger = container.querySelector("span.inline-flex");
+      expect(trigger).not.toBeNull();
+      fireEvent.pointerEnter(trigger!);
+      vi.advanceTimersByTime(300);
+      expect(document.body.textContent).toContain("XXL: 1000+ lines changed");
+      fireEvent.pointerLeave(trigger!);
+      vi.advanceTimersByTime(500);
+    });
   });
 });