ci: locate topbar buttons and configs without UI copy

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

Author: Dhruv-0-Arora

fission/src/test/ui/MatchModeConfigPanel.test.tsx

@@ -58,7 +58,7 @@ describe("MatchModeConfigPanel", () => {
     }
 
     function getMatchModeCount(container: HTMLElement): number {
-        return parseInt(getByText(container, /^\d+ Match Modes?$/).textContent!, 10)
+        return container.querySelectorAll("[data-testid='match-mode-config']").length
     }
 
     async function uploadMatchModeConfig(container: HTMLElement, json: unknown) {

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

@@ -5,7 +5,7 @@ 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 ScoreboardButton from "@/ui/components/topbar/ScoreboardButton"
+import { ScoreboardButton } from "@/ui/components/topbar/GameplayControls"
 
 const isShown = (container: HTMLElement) => container.firstChild !== null
 

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

@@ -1,27 +1,27 @@
-import { fireEvent, render, screen, waitFor, within } from "@testing-library/react"
+import { fireEvent, render, screen, waitFor } 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"
+import { DragModeButton } from "@/ui/components/TopBar"
 
-const dragButton = () => within(screen.getByLabelText(/Drag Mode$/)).getByRole("button")
+const button = () => screen.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")
+        render(<DragModeButton />)
+        expect(button()).toHaveAttribute("aria-pressed", "false")
 
         act(() => EventSystem.dispatch("SetDragModeEvent", { enabled: true }))
 
-        await waitFor(() => expect(dragButton()).toHaveAttribute("aria-pressed", "true"))
+        await waitFor(() => expect(button()).toHaveAttribute("aria-pressed", "true"))
 
-        fireEvent.click(dragButton())
+        fireEvent.click(button())
 
         expect(listener).toHaveBeenLastCalledWith(expect.objectContaining({ enabled: false }))
-        await waitFor(() => expect(dragButton()).toHaveAttribute("aria-pressed", "false"))
+        await waitFor(() => expect(button()).toHaveAttribute("aria-pressed", "false"))
 
         unlisten()
     })

fission/src/ui/components/TopBar.tsx

@@ -34,6 +34,27 @@ import { hasSimBrain } from "@/systems/simulation/wpilib_brain/WPILibState"
 
 const TUTORIALS_URL = "https://synthesis.autodesk.com/tutorials"
 
+export const DragModeButton: React.FC = () => {
+    const [enabled, setEnabled] = useState(World.isAlive && World.dragModeSystem.enabled)
+
+    useEffect(() => EventSystem.listen("SetDragModeEvent", e => setEnabled(e.enabled)), [])
+
+    const toggleDragMode = () => EventSystem.dispatch("SetDragModeEvent", { enabled: !enabled })
+
+    return (
+        <TopBarButton
+            label={enabled ? "Disable Drag Mode" : "Drag Mode"}
+            active={enabled}
+            icon={
+                <Box sx={TOP_BAR_GLYPH_SX}>
+                    <SynthesisIcons.HAND />
+                </Box>
+            }
+            onClick={toggleDragMode}
+        />
+    )
+}
+
 const TopBar: React.FC = () => {
     const { openModal, openPanel, togglePanel, addToast } = useUIContext()
     const { appMode } = useStateContext()
@@ -47,16 +68,13 @@ const TopBar: React.FC = () => {
     const [userInfo, setUserInfo] = useState(APS.userInfo)
     const [modeHovered, setModeHovered] = useState(false)
     const [modeMenuOpen, setModeMenuOpen] = useState(false)
-    const [dragModeEnabled, setDragModeEnabled] = useState(World.isAlive && World.dragModeSystem.enabled)
     const [touchControlsVisible, setTouchControlsVisible] = useState(() =>
         PreferencesSystem.getUserPreference("TouchControls")
     )
 
     const rowRef = useRef<HTMLDivElement>(null)
     const spacerRef = useRef<HTMLDivElement>(null)
 
-    useEffect(() => EventSystem.listen("SetDragModeEvent", ({ enabled }) => setDragModeEnabled(enabled)), [])
-
     useEffect(
         () =>
             EventSystem.listen("TouchControlsVisibilityChangedEvent", ({ visible }) =>
@@ -196,16 +214,7 @@ const TopBar: React.FC = () => {
                             onClick={() => EventSystem.dispatch("ToggleTouchControlsVisibilityEvent")}
                         />
                     )}
-                    <TopBarButton
-                        label={dragModeEnabled ? "Disable Drag Mode" : "Drag Mode"}
-                        active={dragModeEnabled}
-                        icon={
-                            <Box sx={TOP_BAR_GLYPH_SX}>
-                                <SynthesisIcons.HAND />
-                            </Box>
-                        }
-                        onClick={() => EventSystem.dispatch("SetDragModeEvent", { enabled: !dragModeEnabled })}
-                    />
+                    <DragModeButton />
                     <TopBarButton
                         label="Configure Camera"
                         icon={

fission/src/ui/components/topbar/GameplayControls.tsx

@@ -1,13 +1,43 @@
-import { Stack } from "@mui/material"
+import { Box, Stack } from "@mui/material"
 import type React from "react"
+import { useEffect, useState } from "react"
+import PreferencesSystem from "@/systems/preferences/PreferencesSystem"
 import { useUIContext } from "@/ui/helpers/UIProviderHelpers"
 import MatchModeConfigPanel from "@/ui/panels/configuring/MatchModeConfigPanel"
 import MultiplayerStartModal from "@/ui/modals/MultiplayerStartModal"
 import { startMultiplayerWorld } from "@/ui/helpers/StartMultiplayerWorld"
-import ScoreboardButton from "@/ui/components/topbar/ScoreboardButton"
+import { SynthesisIcons } from "@/ui/components/StyledComponents"
 import { TopBarButton } from "@/ui/components/topbar/TopBarButton"
+import { TOP_BAR_GLYPH_SX } from "@/ui/components/topbar/TopBarConfig"
 import { TopBarIcon } from "@/ui/components/topbar/TopBarIcons"
 
+export const ScoreboardButton: React.FC = () => {
+    const [alwaysOn, setAlwaysOn] = useState(() => PreferencesSystem.getUserPreference("AlwaysShowScoreboard"))
+
+    useEffect(
+        () => PreferencesSystem.addPreferenceEventListener("AlwaysShowScoreboard", e => setAlwaysOn(e.prefValue)),
+        []
+    )
+
+    const toggleAlwaysOn = () => {
+        PreferencesSystem.setUserPreference("AlwaysShowScoreboard", !alwaysOn)
+        PreferencesSystem.savePreferences()
+    }
+
+    return (
+        <TopBarButton
+            label={alwaysOn ? "Scoreboard: Always On" : "Scoreboard: Only During Matches"}
+            active={alwaysOn}
+            icon={
+                <Box sx={TOP_BAR_GLYPH_SX}>
+                    <SynthesisIcons.SCOREBOARD />
+                </Box>
+            }
+            onClick={toggleAlwaysOn}
+        />
+    )
+}
+
 const GameplayControls: React.FC = () => {
     const { openModal, togglePanel } = useUIContext()
 

fission/src/ui/components/topbar/ScoreboardButton.tsx

@@ -152,6 +152,7 @@ const ItemCard: React.FC<ItemCardProps> = ({ id, name, primaryOnClick, secondary
         <Stack
             direction="row"
             key={id}
+            data-testid="match-mode-config"
             justifyContent={"space-between"}
             alignItems={"center"}
             gap={"1rem"}