Refactored completely the testing strategy, added 100-ish tests

package.json

@@ -90,6 +90,9 @@
 		"check": "biome check .",
 		"check:fix": "biome check --fix .",
 		"test": "vitest run",
+		"test:ui": "vitest --ui --api 6532",
+		"test:debug": "jest-preview",
+		"test:live": "npm-run-all -p test:ui test:debug",
 		"test:cov": "vitest run --coverage",
 		"typecheck": "tsc --noEmit",
 		"validate": "npm run check && npm run typecheck && npm run test",
@@ -102,24 +105,27 @@
 	"peerDependencies": {
 		"react": ">=17",
 		"react-dom": ">=17",
-		"vite": ">=5.0.0",
-		"react-router": ">=7.0.0-pre.0"
+		"react-router": ">=7.0.0-pre.0",
+		"vite": ">=5.0.0"
 	},
 	"devDependencies": {
 		"@biomejs/biome": "1.9.4",
 		"@react-router/dev": "7.0.0-pre.2",
 		"@react-router/node": "7.0.0-pre.2",
 		"@react-router/serve": "7.0.0-pre.2",
+		"@testing-library/dom": "^10.4.0",
 		"@testing-library/react": "^16.0.1",
 		"@types/babel__core": "^7.20.5",
 		"@types/beautify": "^0.0.3",
 		"@types/node": "^20.16.14",
-		"@types/react": "^18.3.11",
+		"@types/react": "^18.3.12",
 		"@types/react-dom": "^18.3.1",
-		"@vitest/coverage-v8": "^2.1.3",
+		"@vitest/coverage-v8": "^2.1.5",
+		"@vitest/ui": "^2.1.5",
 		"autoprefixer": "^10.4.20",
 		"glob": "^11.0.0",
 		"happy-dom": "^15.7.4",
+		"jest-preview": "^0.3.1",
 		"knip": "^5.34.0",
 		"lefthook": "^1.8.0",
 		"node-html-parser": "^6.1.13",
@@ -133,7 +139,7 @@
 		"tsx": "^4.19.2",
 		"typescript": "^5.6.3",
 		"vite": "^5.4.10",
-		"vitest": "^2.1.3"
+		"vitest": "^2.1.5"
 	},
 	"dependencies": {
 		"@babel/core": "^7.26.0",

src/client/components/Breakpoints.tsx

@@ -0,0 +1,23 @@
+import clsx from "clsx"
+import { useSettingsContext } from "../context/useRDTContext"
+import { useOnWindowResize } from "../hooks/useOnWindowResize"
+
+export const Breakpoints = () => {
+	const { width } = useOnWindowResize()
+	const { settings } = useSettingsContext()
+	const breakpoints = settings.breakpoints
+	const show = settings.showBreakpointIndicator
+	const breakpoint = breakpoints.find((bp) => bp.min <= width && bp.max >= width)
+	if (!breakpoint || !breakpoint.name || !show) {
+		return null
+	}
+	return (
+		<div
+			className={clsx(
+				"flex fixed bottom-0 left-0 mb-5 rounded-full bg-[#212121] z-[9998] size-10 text-white flex items-center justify-center items-center gap-2 mx-1"
+			)}
+		>
+			{breakpoint?.name}
+		</div>
+	)
+}

src/client/components/EditorButton.tsx

@@ -1,18 +1,19 @@
 import clsx from "clsx"
 
-interface EditorButtonProps {
+interface EditorButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
 	onClick: () => void
 	name: string
 }
 
-const EditorButton = ({ name, onClick }: EditorButtonProps) => {
+const EditorButton = ({ name, onClick, ...props }: EditorButtonProps) => {
 	return (
 		<button
 			onClick={onClick}
 			type="button"
 			className={clsx(
 				"flex cursor-pointer items-center gap-1 rounded border border-[#1F9CF0] px-2.5 py-0.5 text-sm font-medium text-[#1F9CF0]"
 			)}
+			{...props}
 		>
 			Open in {name}
 		</button>

src/client/components/LiveUrls.tsx

@@ -0,0 +1,33 @@
+import clsx from "clsx"
+import { Link, useLocation } from "react-router"
+import { useSettingsContext } from "../context/useRDTContext"
+
+export const LiveUrls = () => {
+	const { settings } = useSettingsContext()
+	const location = useLocation()
+	const envsPosition = settings.liveUrlsPosition
+	const envsClassName = {
+		"bottom-0": envsPosition === "bottom-left" || envsPosition === "bottom-right",
+		"top-0": envsPosition === "top-left" || envsPosition === "top-right",
+		"right-0": envsPosition === "bottom-right" || envsPosition === "top-right",
+		"left-0": envsPosition === "bottom-left" || envsPosition === "top-left",
+	}
+	if (settings.liveUrls.length === 0) return null
+	return (
+		<div className={clsx("flex fixed items-center z-[9998] gap-2 px-2", envsClassName)}>
+			{settings.liveUrls.map((env) => {
+				return (
+					<Link
+						key={env.name}
+						referrerPolicy="no-referrer"
+						target="_blank"
+						to={env.url + location.pathname}
+						className="flex transition-all hover:text-gray-500 items-center gap-2 text-sm font-semibold text-gray-400"
+					>
+						{env.name}
+					</Link>
+				)
+			})}
+		</div>
+	)
+}

src/client/components/RouteSegmentInfo.tsx

@@ -100,6 +100,7 @@ export const RouteSegmentInfo = ({ route, i }: { route: UIMatch<unknown, unknown
 
 	return (
 		<li
+			data-testid={route.id}
 			onMouseEnter={() => onHover(route.id === "root" ? "root" : i.toString(), "enter")}
 			onMouseLeave={() => onHover(route.id === "root" ? "root" : i.toString(), "leave")}
 			className="mb-8 ml-6 lg:ml-8"
@@ -116,28 +117,31 @@ export const RouteSegmentInfo = ({ route, i }: { route: UIMatch<unknown, unknown
 				{route.pathname}
 
 				<div className="flex gap-2">
-					{cacheControl && serverInfo?.lastLoader.timestamp && (
+					{Boolean(cacheControl && serverInfo?.lastLoader.timestamp) && (
 						<CacheInfo
 							key={JSON.stringify(serverInfo?.lastLoader ?? "")}
-							cacheControl={cacheControl}
+							// biome-ignore lint/style/noNonNullAssertion: <explanation>
+							cacheControl={cacheControl!}
 							cacheDate={new Date(serverInfo?.lastLoader.timestamp ?? "")}
 						/>
 					)}
 					<div className="flex items-center gap-2">
 						{isConnected && import.meta.env.DEV && (
 							<EditorButton
 								name={editorName}
-								onClick={() =>
+								data-testid={`${route.id}-open-source`}
+								onClick={() => {
 									sendJsonMessage({
 										type: "open-source",
 										data: { routeID: route.id },
 									} satisfies OpenSourceData)
-								}
+								}}
 							/>
 						)}
 						{settings.showRouteBoundariesOn === "click" && (
 							<button
 								type="button"
+								data-testid={`${route.id}-show-route-boundaries`}
 								className="rounded border border-green-600 rounded border border-[#1F9CF0] px-2.5 py-0.5 text-sm font-medium text-green-600"
 								onClick={() => {
 									const routeId = route.id === "root" ? "root" : i.toString()

src/client/components/Trigger.tsx

@@ -12,7 +12,7 @@ export const Trigger = ({
 	const { settings } = useSettingsContext()
 	const { setPersistOpen } = usePersistOpen()
 	const { hideUntilHover, position } = settings
-	const handleHover = (e: React.MouseEvent<HTMLDivElement, MouseEvent>, event: "enter" | "leave") => {
+	const handleHover = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>, event: "enter" | "leave") => {
 		if (!hideUntilHover) return
 		const classesToRemove = "opacity-0"
 		const classesToAdd = "opacity-100"
@@ -27,8 +27,9 @@ export const Trigger = ({
 	}
 
 	return (
-		// biome-ignore lint/a11y/useKeyWithClickEvents: must be like this
-		<div
+		<button
+			type="button"
+			data-testid="react-router-devtools-trigger"
 			style={{ zIndex: 9999 }}
 			onClick={() => {
 				setIsOpen(!isOpen)
@@ -49,7 +50,11 @@ export const Trigger = ({
 				isOpen && "hidden" // Hide the button when the dev tools is open
 			)}
 		>
-			<Logo className={clsx(" w-full h-full -mt-1 rounded-full transition-all duration-200 overflow-visible")} />
-		</div>
+			<Logo
+				className={clsx(
+					"focus:outline-none w-full h-full -mt-1 rounded-full transition-all duration-200 overflow-visible"
+				)}
+			/>
+		</button>
 	)
 }

src/client/context/RDTContext.tsx

@@ -108,6 +108,7 @@ export type RdtClientConfig = Pick<
 	| "hideUntilHover"
 	| "panelLocation"
 	| "requireUrlFlag"
+	| "openHotkey"
 	| "urlFlag"
 	| "routeBoundaryGradient"
 >

src/client/context/requests/request-context.tsx

@@ -1,7 +1,7 @@
 import { createContext, useCallback, useContext, useEffect, useState } from "react"
 import type { RequestEvent } from "../../../shared/request-event"
 
-export const RequestContext = createContext<{
+const RequestContext = createContext<{
 	requests: RequestEvent[]
 	removeAllRequests: () => void
 }>({ requests: [], removeAllRequests: () => {} })
@@ -24,8 +24,8 @@ export const RequestProvider = ({ children }: any) => {
 		import.meta.hot?.on("get-events", setNewRequests)
 		import.meta.hot?.on("request-event", setNewRequests)
 		return () => {
-			import.meta.hot?.off("get-events", setNewRequests)
-			import.meta.hot?.off("request-event", setNewRequests)
+			import.meta.hot?.off?.("get-events", setNewRequests)
+			import.meta.hot?.off?.("request-event", setNewRequests)
 		}
 	}, [setNewRequests])
 

src/client/hooks/useOnWindowResize.ts

@@ -0,0 +1,28 @@
+import { useEffect, useState } from "react"
+
+type WindowSize = {
+	width: number
+	height: number
+}
+export const useOnWindowResize = () => {
+	const [windowSize, setWindowSize] = useState<WindowSize>({
+		width: window.innerWidth,
+		height: window.innerHeight,
+	})
+
+	useEffect(() => {
+		const handleResize = () => {
+			setWindowSize({
+				width: window.innerWidth,
+				height: window.innerHeight,
+			})
+		}
+
+		window.addEventListener("resize", handleResize)
+
+		return () => {
+			window.removeEventListener("resize", handleResize)
+		}
+	}, [])
+	return windowSize
+}

src/client/init/root.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react"
 import { createPortal } from "react-dom"
 import type { RdtClientConfig } from "../context/RDTContext.js"
-import { RequestContext, RequestProvider } from "../context/requests/request-context.js"
+import { RequestProvider } from "../context/requests/request-context.js"
 import { ReactRouterDevTools, type ReactRouterDevtoolsProps } from "../react-router-dev-tools.js"
 import { hydrationDetector } from "./hydration.js"
 

src/client/layout/MainPanel.tsx

@@ -30,6 +30,7 @@ const MainPanel = ({ children, isOpen, isEmbedded = false, className }: MainPane
 
 	return (
 		<div
+			data-testid="react-router-devtools-main-panel"
 			style={{
 				zIndex: 9998,
 				...(!isEmbedded && { height: detachedWindow ? window.innerHeight : height }),

src/client/layout/Tabs.tsx

@@ -44,6 +44,7 @@ const Tab = ({
 	return (
 		// biome-ignore lint/a11y/useKeyWithClickEvents: ignored
 		<div
+			data-testid={tab.id}
 			onClick={() => (onClick ? onClick() : setSettings({ activeTab: tab.id as TabsType }))}
 			className={clsx(
 				"group relative flex shrink-0 cursor-pointer items-center justify-center border-0 border-b border-solid border-b-[#212121] border-r-[#212121] p-2 font-sans transition-all",