ci: trim redundant tests & add topbar and scoreboard buttons

Signed-off-by: Dhruv Arora <dhruv.arora1@autodesk.com>

Author: Dhruv-0-Arora

fission/src/test/PreferencesSystem.test.ts

@@ -35,7 +35,7 @@ describe("Preferences System Global Values", () => {
     test("Setting without saving", () => {
         PreferencesSystem.setUserPreference("SceneRotationSensitivity", 13)
         PreferencesSystem.setUserPreference("RenderSceneTags", false)
-        PreferencesSystem.setUserPreference("ShowViewCube", true)
+        PreferencesSystem.setUserPreference("ShowViewCube", false)
 
         window.localStorage.setItem("Preferences", "{}") // Clears local storage
         PreferencesSystem.loadPreferences()

fission/src/test/scene/DragModeSystem.test.ts

@@ -2,7 +2,7 @@ import * as THREE from "three"
 import { afterEach, beforeEach, describe, expect, test, vi } from "vitest"
 import { MiraType } from "@/mirabuf/MirabufLoader"
 import MirabufSceneObject, { RigidNodeAssociate } from "@/mirabuf/MirabufSceneObject"
-import EventSystem, { type SynthesisEventListener } from "@/systems/EventSystem.ts"
+import EventSystem from "@/systems/EventSystem.ts"
 import PhysicsSystem from "@/systems/physics/PhysicsSystem"
 import { CameraMode, CustomTargetControls } from "@/systems/scene/CameraControls"
 import DragModeSystem from "@/systems/scene/DragModeSystem"
@@ -98,33 +98,18 @@ describe("DragModeSystem Integration Tests", () => {
             EventSystem.dispatch("SetDragModeEvent", { enabled: false })
             expect(dragModeSystem.enabled).toBe(false)
         })
-
-        // The top bar button mirrors the same command it dispatches, so every caller has to go
-        // through the event rather than assigning `enabled` directly or the button goes stale.
-        test("the command reaches listeners alongside the system", () => {
-            const listener = vi.fn<SynthesisEventListener<"SetDragModeEvent">>()
-            const unlisten = EventSystem.listen("SetDragModeEvent", listener)
-
-            EventSystem.dispatch("SetDragModeEvent", { enabled: true })
-
-            expect(listener).toHaveBeenLastCalledWith(expect.objectContaining({ enabled: true }))
-            expect(dragModeSystem.enabled).toBe(true)
-
-            unlisten()
-        })
     })
 
     describe("Cleanup", () => {
-        test("should cleanup properly on destroy", () => {
-            const removeEventListenerSpy = vi.spyOn(window, "removeEventListener")
+        test("stops responding to the command once destroyed", () => {
+            EventSystem.dispatch("SetDragModeEvent", { enabled: true })
 
-            dragModeSystem.enabled = true
             dragModeSystem.destroy()
-
             expect(dragModeSystem.enabled).toBe(false)
-            expect(removeEventListenerSpy).toHaveBeenCalledWith("SetDragModeEvent", expect.any(Function))
 
-            removeEventListenerSpy.mockRestore()
+            EventSystem.dispatch("SetDragModeEvent", { enabled: true })
+
+            expect(dragModeSystem.enabled).toBe(false)
         })
     })
 

fission/src/test/ui/CollapsibleGroup.test.tsx

@@ -3,24 +3,28 @@ import type React from "react"
 import { useRef } from "react"
 import { describe, expect, test } from "vitest"
 import { CollapsibleGroup, type CollapsibleItem } from "@/ui/components/topbar/CollapsibleGroup"
+import { TOP_BAR_GAP_PX } from "@/ui/components/topbar/TopBarConfig"
 import { TopBarFitProvider } from "@/ui/components/topbar/TopBarFitProvider"
 
 const ITEM_COUNT = 5
 
-const ITEMS: readonly CollapsibleItem[] = Array.from({ length: ITEM_COUNT }, (_, i) => ({
-    key: `item-${i}`,
-    node: <div data-testid="item" style={{ width: 40, height: 20 }} />,
-}))
+const makeItems = (count: number, width: number): CollapsibleItem[] =>
+    Array.from({ length: count }, (_, i) => ({
+        key: `w${width}-${i}`,
+        node: <div data-testid="item" style={{ width, height: 20 }} />,
+    }))
 
-const Harness: React.FC<{ width: number }> = ({ width }) => {
+const ITEMS = makeItems(ITEM_COUNT, 40)
+
+const Harness: React.FC<{ width: number; items?: readonly CollapsibleItem[] }> = ({ width, items = ITEMS }) => {
     const rowRef = useRef<HTMLDivElement>(null)
     const spacerRef = useRef<HTMLDivElement>(null)
 
     return (
-        <div ref={rowRef} style={{ display: "flex", alignItems: "center", gap: 12, width }}>
+        <div ref={rowRef} style={{ display: "flex", alignItems: "center", gap: TOP_BAR_GAP_PX, width }}>
             <TopBarFitProvider rowRef={rowRef} spacerRef={spacerRef}>
                 <CollapsibleGroup
-                    items={ITEMS}
+                    items={items}
                     always={<div data-testid="always" style={{ width: 60, height: 20, flexShrink: 0 }} />}
                 />
                 <div ref={spacerRef} style={{ flexGrow: 1 }} />
@@ -48,13 +52,22 @@ describe("CollapsibleGroup", () => {
 
         await waitFor(() => expect(visibleItems(container)).toBe(ITEM_COUNT))
         expectNoOverflow(container)
-    })
 
-    test("keeps the always slot even when every item has been shed", async () => {
-        const { container } = render(<Harness width={80} />)
+        rerender(<Harness width={80} />)
 
         await waitFor(() => expect(visibleItems(container)).toBe(0))
         expect(container.querySelectorAll("[data-testid=always]")).toHaveLength(1)
         expectNoOverflow(container)
     })
+
+    test("re-measures when the item set changes instead of reusing stale widths", async () => {
+        const { container, rerender } = render(<Harness width={400} items={makeItems(5, 40)} />)
+
+        await waitFor(() => expect(visibleItems(container)).toBe(5))
+
+        rerender(<Harness width={400} items={makeItems(5, 150)} />)
+
+        await waitFor(() => expect(visibleItems(container)).toBeLessThan(5))
+        expectNoOverflow(container)
+    })
 })

fission/src/test/ui/Scoreboard.test.tsx

@@ -1,20 +1,22 @@
-import { render, waitFor } from "@testing-library/react"
+import { fireEvent, render, screen, waitFor, within } from "@testing-library/react"
 import { act } from "react"
-import { describe, expect, test } from "vitest"
+import { beforeEach, describe, expect, test } from "vitest"
 import EventSystem from "@/systems/EventSystem"
 import { MatchModeType } from "@/systems/match_mode/MatchModeTypes"
 import PreferencesSystem from "@/systems/preferences/PreferencesSystem"
 import Scoreboard from "@/ui/components/Scoreboard"
+import GameplayControls from "@/ui/components/topbar/GameplayControls"
 
-const isShown = (container: HTMLElement) => container.textContent?.includes("RED") === true
+const isShown = (container: HTMLElement) => container.firstChild !== null
 
 const setAlwaysShow = (value: boolean) => act(() => PreferencesSystem.setUserPreference("AlwaysShowScoreboard", value))
 
 const setMatchMode = (mode: MatchModeType) => act(() => EventSystem.dispatch("MatchStateChangedEvent", { mode }))
 
 describe("Scoreboard", () => {
+    beforeEach(() => setAlwaysShow(false))
+
     test("only follows match state when it is not set to always show", async () => {
-        setAlwaysShow(false)
         const { container } = render(<Scoreboard />)
         expect(isShown(container)).toBe(false)
 
@@ -34,3 +36,30 @@ describe("Scoreboard", () => {
         await waitFor(() => expect(isShown(container)).toBe(false))
     })
 })
+
+describe("ScoreboardButton", () => {
+    const button = () => within(screen.getByLabelText(/^Scoreboard:/)).getByRole("button")
+
+    beforeEach(() => setAlwaysShow(false))
+
+    test("reports the current mode and toggles the preference when clicked", async () => {
+        render(<GameplayControls />)
+
+        expect(screen.getByLabelText("Scoreboard: Only During Matches")).toBeInTheDocument()
+        expect(button()).toHaveAttribute("aria-pressed", "false")
+
+        fireEvent.click(button())
+
+        expect(PreferencesSystem.getUserPreference("AlwaysShowScoreboard")).toBe(true)
+        await waitFor(() => expect(screen.getByLabelText("Scoreboard: Always On")).toBeInTheDocument())
+        expect(button()).toHaveAttribute("aria-pressed", "true")
+    })
+
+    test("follows the preference when it changes elsewhere", async () => {
+        render(<GameplayControls />)
+
+        setAlwaysShow(true)
+
+        await waitFor(() => expect(button()).toHaveAttribute("aria-pressed", "true"))
+    })
+})

fission/src/test/ui/SplitButtonDropdown.test.tsx

@@ -2,33 +2,48 @@ import { fireEvent, render, screen, waitFor } from "@testing-library/react"
 import { describe, expect, test, vi } from "vitest"
 import SplitButtonDropdown, { type SplitButtonMenuItem } from "@/ui/components/SplitButtonDropdown"
 
-const renderDropdown = (items: SplitButtonMenuItem[], onIconClick = vi.fn()) => {
-    render(<SplitButtonDropdown icon={<span>icon</span>} onIconClick={onIconClick} items={items} />)
-    return onIconClick
-}
-
 const openMenu = () => fireEvent.click(screen.getByLabelText("Open dropdown"))
 
-const expectMenuClosed = () => waitFor(() => expect(screen.queryByRole("menu")).toBeNull())
-
 describe("SplitButtonDropdown", () => {
-    test("a click anywhere inside a row selects it and closes the menu", async () => {
+    test("clicking a row's leading icon still selects the item and closes the menu", async () => {
         const onSelect = vi.fn()
-        renderDropdown([{ key: "only", label: "Always shown", icon: <span data-testid="leading-icon" />, onSelect }])
+        const items: SplitButtonMenuItem[] = [
+            { key: "only", label: "Always shown", icon: <span data-testid="leading-icon" />, onSelect },
+        ]
+        render(<SplitButtonDropdown icon={<span>icon</span>} onIconClick={vi.fn()} items={items} />)
 
         openMenu()
         fireEvent.click(screen.getByTestId("leading-icon"))
 
         expect(onSelect).toHaveBeenCalledTimes(1)
-        await expectMenuClosed()
+        await waitFor(() => expect(screen.queryByRole("menu")).toBeNull())
     })
 
     test("the icon half runs its own action without opening the menu", () => {
-        const onIconClick = renderDropdown([{ key: "only", label: "Always shown", onSelect: vi.fn() }])
+        const onIconClick = vi.fn()
+        const items: SplitButtonMenuItem[] = [{ key: "only", label: "Always shown", onSelect: vi.fn() }]
+        render(<SplitButtonDropdown icon={<span>icon</span>} onIconClick={onIconClick} items={items} />)
 
         fireEvent.click(screen.getByText("icon"))
 
         expect(onIconClick).toHaveBeenCalledTimes(1)
         expect(screen.queryByRole("menu")).toBeNull()
     })
+
+    test("reserves the icon slot on every row once any row has an icon", () => {
+        const items: SplitButtonMenuItem[] = [
+            { key: "with", label: "With icon", icon: <span data-testid="leading-icon" />, onSelect: vi.fn() },
+            { key: "without", label: "Without icon", onSelect: vi.fn() },
+        ]
+        render(<SplitButtonDropdown icon={<span>icon</span>} onIconClick={vi.fn()} items={items} />)
+
+        openMenu()
+
+        const rows = screen.getAllByRole("menuitem")
+        const slotWidth = (row: HTMLElement) => row.firstElementChild!.getBoundingClientRect().width
+
+        expect(rows).toHaveLength(2)
+        expect(slotWidth(rows[1])).toBe(slotWidth(rows[0]))
+        expect(slotWidth(rows[1])).toBeGreaterThan(0)
+    })
 })

fission/src/test/ui/TopBar.test.tsx

@@ -0,0 +1,28 @@
+import { fireEvent, render, screen, waitFor, within } from "@testing-library/react"
+import { act } from "react"
+import { describe, expect, test, vi } from "vitest"
+import EventSystem from "@/systems/EventSystem"
+import TopBar from "@/ui/components/TopBar"
+
+const dragButton = () => within(screen.getByLabelText(/Drag Mode$/)).getByRole("button")
+
+describe("TopBar drag mode", () => {
+    test("mirrors the drag mode command in both directions", async () => {
+        const listener = vi.fn()
+        const unlisten = EventSystem.listen("SetDragModeEvent", listener)
+
+        render(<TopBar />)
+        expect(dragButton()).toHaveAttribute("aria-pressed", "false")
+
+        act(() => EventSystem.dispatch("SetDragModeEvent", { enabled: true }))
+
+        await waitFor(() => expect(dragButton()).toHaveAttribute("aria-pressed", "true"))
+
+        fireEvent.click(dragButton())
+
+        expect(listener).toHaveBeenLastCalledWith(expect.objectContaining({ enabled: false }))
+        await waitFor(() => expect(dragButton()).toHaveAttribute("aria-pressed", "false"))
+
+        unlisten()
+    })
+})

fission/src/test/ui/TopBarFit.test.ts

@@ -3,51 +3,27 @@ import { computeVisibleCount } from "@/ui/components/topbar/TopBarFit"
 
 const GAP = 12
 const BUTTON = 40
-const SLACK = 8
+const SUBPIXEL_SLACK_PX = 8
 
 const BUTTONS = Array<number>(6).fill(BUTTON)
 
-const budgetFor = (n: number) => n * (BUTTON + GAP) + SLACK
+const leastBudgetFitting = (n: number) => n * (BUTTON + GAP) + SUBPIXEL_SLACK_PX
 
 describe("computeVisibleCount", () => {
-    test("shows everything when there is room to spare", () => {
-        expect(computeVisibleCount(budgetFor(6) + 100, BUTTONS, GAP)).toBe(6)
-    })
-
-    test("shows everything at exactly the budget it needs", () => {
-        expect(computeVisibleCount(budgetFor(6), BUTTONS, GAP)).toBe(6)
-    })
-
-    test("holds back slack so a sub-pixel measurement error cannot overflow the row", () => {
-        expect(computeVisibleCount(budgetFor(6) - 1, BUTTONS, GAP)).toBe(5)
-        expect(computeVisibleCount(budgetFor(6) - SLACK, BUTTONS, GAP)).toBe(5)
-    })
-
-    test("drops one item at a time as the budget shrinks", () => {
-        for (let visible = 0; visible <= 6; visible++) {
-            expect(computeVisibleCount(budgetFor(visible), BUTTONS, GAP)).toBe(visible)
-            expect(computeVisibleCount(budgetFor(visible + 1) - 1, BUTTONS, GAP)).toBe(visible)
+    test("drops exactly one item per item-width of budget, holding back slack", () => {
+        for (let visible = 0; visible <= BUTTONS.length; visible++) {
+            expect(computeVisibleCount(leastBudgetFitting(visible), BUTTONS, GAP)).toBe(visible)
+            expect(computeVisibleCount(leastBudgetFitting(visible + 1) - 1, BUTTONS, GAP)).toBe(visible)
         }
     })
 
-    test("drops from the end, so the front of the list is the last to go", () => {
-        const widths = [BUTTON, BUTTON, 200]
-
-        expect(computeVisibleCount(budgetFor(2) + 200 + GAP, widths, GAP)).toBe(3)
-        expect(computeVisibleCount(budgetFor(2), widths, GAP)).toBe(2)
-        expect(computeVisibleCount(budgetFor(1), widths, GAP)).toBe(1)
-    })
-
     test("stops at an item too wide to fit rather than skipping past it", () => {
-        expect(computeVisibleCount(budgetFor(3), [200, BUTTON, BUTTON, BUTTON], GAP)).toBe(0)
+        expect(computeVisibleCount(leastBudgetFitting(3), [200, BUTTON, BUTTON, BUTTON], GAP)).toBe(0)
     })
 
-    test("shows nothing when the budget is gone or negative", () => {
+    test("shows nothing for an exhausted budget or an empty list", () => {
         expect(computeVisibleCount(0, BUTTONS, GAP)).toBe(0)
         expect(computeVisibleCount(-500, BUTTONS, GAP)).toBe(0)
-    })
-
-    test("handles an empty item list", () => {
         expect(computeVisibleCount(1000, [], GAP)).toBe(0)
     })
 })

fission/src/test/ui/TopBarIcons.test.tsx

@@ -3,7 +3,13 @@ import { describe, expect, test } from "vitest"
 import { TOP_BAR_ICON_NAMES, TopBarIcon } from "@/ui/components/topbar/TopBarIcons"
 
 describe("TopBarIcon", () => {
-    test("every declared icon name resolves to an svg file", () => {
+    test("every icon name maps to an svg on disk, and every svg on disk is named", () => {
+        const onDisk = Object.keys(import.meta.glob("../../ui/components/topbar/icons/*.svg")).map(path =>
+            path.replace(/^.*\//, "").replace(/\.svg$/, "")
+        )
+
+        expect([...TOP_BAR_ICON_NAMES].sort()).toEqual(onDisk.sort())
+
         for (const name of TOP_BAR_ICON_NAMES) {
             const { container } = render(<TopBarIcon name={name} />)