coder · BrunoQuaresma · Jun 5, 2023 · Jun 2, 2023 · Jun 2, 2023 · Jun 5, 2023
diff --git a/site/src/components/Dashboard/DashboardLayout.test.tsx b/site/src/components/Dashboard/DashboardLayout.test.tsx
@@ -1,4 +1,3 @@
-import { Route, Routes } from "react-router-dom"
 import { renderWithAuth } from "testHelpers/renderHelpers"
 import { DashboardLayout } from "./DashboardLayout"
 import * as API from "api/api"
@@ -10,12 +9,8 @@ test("Show the new Coder version notification", async () => {
     version: "v0.12.9",
     url: "https://github.com/coder/coder/releases/tag/v0.12.9",
   })
-  renderWithAuth(
-    <Routes>
-      <Route element={<DashboardLayout />}>
-        <Route element={<h1>Test page</h1>} />
-      </Route>
-    </Routes>,
-  )
+  renderWithAuth(<DashboardLayout />, {
+    children: [{ element: <h1>Test page</h1> }],
+  })
   await screen.findByTestId("update-check-snackbar")
 })
diff --git a/site/src/components/Navbar/NavbarView.tsx b/site/src/components/Navbar/NavbarView.tsx
@@ -2,7 +2,7 @@ import Drawer from "@mui/material/Drawer"
 import IconButton from "@mui/material/IconButton"
 import List from "@mui/material/List"
 import ListItem from "@mui/material/ListItem"
-import { makeStyles, useTheme } from "@mui/styles"
+import { makeStyles } from "@mui/styles"
 import MenuIcon from "@mui/icons-material/Menu"
 import { CoderIcon } from "components/Icons/CoderIcon"
 import { FC, useRef, useState } from "react"
@@ -20,10 +20,9 @@ import KeyboardArrowDownOutlined from "@mui/icons-material/KeyboardArrowDownOutl
 import { ProxyContextValue } from "contexts/ProxyContext"
 import { displayError } from "components/GlobalSnackbar/utils"
 import Divider from "@mui/material/Divider"
-import HelpOutline from "@mui/icons-material/HelpOutline"
-import Tooltip from "@mui/material/Tooltip"
 import Skeleton from "@mui/material/Skeleton"
 import { BUTTON_SM_HEIGHT } from "theme/theme"
+import { ProxyStatusLatency } from "components/ProxyStatusLatency/ProxyStatusLatency"
 
 export const USERS_LINK = `/users?filter=${encodeURIComponent("status:active")}`
 
@@ -232,7 +231,6 @@ const ProxyMenu: FC<{ proxyContextValue: ProxyContextValue }> = ({
             </Box>
             {selectedProxy.display_name}
             <ProxyStatusLatency
-              proxy={selectedProxy}
               latency={latencies?.[selectedProxy.id]?.latencyMS}
             />
           </Box>
@@ -277,10 +275,7 @@ const ProxyMenu: FC<{ proxyContextValue: ProxyContextValue }> = ({
                 />
               </Box>
               {proxy.display_name}
-              <ProxyStatusLatency
-                proxy={proxy}
-                latency={latencies?.[proxy.id]?.latencyMS}
-              />
+              <ProxyStatusLatency latency={latencies?.[proxy.id]?.latencyMS} />
             </Box>
           </MenuItem>
         ))}
@@ -301,42 +296,6 @@ const ProxyMenu: FC<{ proxyContextValue: ProxyContextValue }> = ({
   )
 }
 
-const ProxyStatusLatency: FC<{ proxy: TypesGen.Region; latency?: number }> = ({
-  proxy,
-  latency,
-}) => {
-  const theme = useTheme()
-  let color = theme.palette.success.light
-
-  if (!latency) {
-    return (
-      <Tooltip title="Latency not available">
-        <HelpOutline
-          sx={{
-            ml: "auto",
-            fontSize: "14px !important",
-            color: (theme) => theme.palette.text.secondary,
-          }}
-        />
-      </Tooltip>
-    )
-  }
-
-  if (latency >= 300) {
-    color = theme.palette.error.light
-  }
-
-  if (!proxy.healthy || latency >= 100) {
-    color = theme.palette.warning.light
-  }
-
-  return (
-    <Box sx={{ color, fontSize: 13, marginLeft: "auto" }}>
-      {latency.toFixed(0)}ms
-    </Box>
-  )
-}
-
 const useStyles = makeStyles((theme) => ({
   root: {
     height: navHeight,

diff --git a/site/src/components/ProxyStatusLatency/ProxyStatusLatency.tsx b/site/src/components/ProxyStatusLatency/ProxyStatusLatency.tsx
@@ -0,0 +1,31 @@
+import { useTheme } from "@mui/material/styles"
+import HelpOutline from "@mui/icons-material/HelpOutline"
+import Box from "@mui/material/Box"
+import Tooltip from "@mui/material/Tooltip"
+import { FC } from "react"
+import { getLatencyColor } from "utils/latency"
+
+export const ProxyStatusLatency: FC<{ latency?: number }> = ({ latency }) => {
+  const theme = useTheme()
+  const color = getLatencyColor(theme, latency)
+
+  if (!latency) {
+    return (
+      <Tooltip title="Latency not available">
+        <HelpOutline
+          sx={{
+            ml: "auto",
+            fontSize: "14px !important",
+            color,
+          }}
+        />
+      </Tooltip>
+    )
+  }
+
+  return (
+    <Box sx={{ color, fontSize: 13, marginLeft: "auto" }}>
+      {latency.toFixed(0)}ms
+    </Box>
+  )
+}
diff --git a/site/src/components/Resources/AgentLatency.tsx b/site/src/components/Resources/AgentLatency.tsx
@@ -8,7 +8,7 @@ import {
 } from "components/Tooltips/HelpTooltip"
 import { Stack } from "components/Stack/Stack"
 import { WorkspaceAgent, DERPRegion } from "api/typesGenerated"
-import { getLatencyColor } from "utils/colors"
+import { getLatencyColor } from "utils/latency"
 
 const getDisplayLatency = (theme: Theme, agent: WorkspaceAgent) => {
   // Find the right latency to display

diff --git a/site/src/pages/TerminalPage/TerminalPage.test.tsx b/site/src/pages/TerminalPage/TerminalPage.test.tsx
@@ -3,19 +3,18 @@ import "jest-canvas-mock"
 import WS from "jest-websocket-mock"
 import { rest } from "msw"
 import {
-  MockPrimaryWorkspaceProxy,
-  MockProxyLatencies,
+  MockUser,
   MockWorkspace,
   MockWorkspaceAgent,
-  MockWorkspaceProxies,
 } from "testHelpers/entities"
 import { TextDecoder, TextEncoder } from "util"
 import { ReconnectingPTYRequest } from "../../api/types"
-import { history, render } from "../../testHelpers/renderHelpers"
+import {
+  renderWithAuth,
+  waitForLoaderToBeRemoved,
+} from "../../testHelpers/renderHelpers"
 import { server } from "../../testHelpers/server"
 import TerminalPage, { Language } from "./TerminalPage"
-import { Route, Routes } from "react-router-dom"
-import { ProxyContext } from "contexts/ProxyContext"
 
 Object.defineProperty(window, "matchMedia", {
   writable: true,
@@ -35,56 +34,35 @@ Object.defineProperty(window, "TextEncoder", {
   value: TextEncoder,
 })
 
-const renderTerminal = () => {
-  // @emyrk using renderWithAuth would be best here, but I was unable to get it to work.
-  return render(
-    <Routes>
-      <Route
-        path="/:username/:workspace/terminal"
-        element={
-          <ProxyContext.Provider
-            value={{
-              proxyLatencies: MockProxyLatencies,
-              proxy: {
-                proxy: MockPrimaryWorkspaceProxy,
-                preferredPathAppURL: "",
-                preferredWildcardHostname: "",
-              },
-              proxies: MockWorkspaceProxies,
-              isFetched: true,
-              isLoading: false,
-              setProxy: jest.fn(),
-              clearProxy: jest.fn(),
-              refetchProxyLatencies: jest.fn(),
-            }}
-          >
-            <TerminalPage />
-          </ProxyContext.Provider>
-        }
-      />
-    </Routes>,
-  )
+const renderTerminal = async (
+  route = `/${MockUser.username}/${MockWorkspace.name}/terminal`,
+) => {
+  const utils = renderWithAuth(<TerminalPage />, {
+    route,
+    path: "/:username/:workspace/terminal",
+  })
+  await waitForLoaderToBeRemoved()
+  return utils
 }
 
 const expectTerminalText = (container: HTMLElement, text: string) => {
-  return waitFor(() => {
-    const elements = container.getElementsByClassName("xterm-rows")
-    if (elements.length === 0) {
-      throw new Error("no xterm-rows")
-    }
-    const row = elements[0] as HTMLDivElement
-    if (!row.textContent) {
-      throw new Error("no text content")
-    }
-    expect(row.textContent).toContain(text)
-  })
+  return waitFor(
+    () => {
+      const elements = container.getElementsByClassName("xterm-rows")
+      if (elements.length === 0) {
+        throw new Error("no xterm-rows")
+      }
+      const row = elements[0] as HTMLDivElement
+      if (!row.textContent) {
+        throw new Error("no text content")
+      }
+      expect(row.textContent).toContain(text)
+    },
+    { timeout: 3_000 },
+  )
 }
 
 describe("TerminalPage", () => {
-  beforeEach(() => {
-    history.push(`/some-user/${MockWorkspace.name}/terminal`)
-  })
-
   it("shows an error if fetching workspace fails", async () => {
     // Given
     server.use(
@@ -97,7 +75,7 @@ describe("TerminalPage", () => {
     )
 
     // When
-    const { container } = renderTerminal()
+    const { container } = await renderTerminal()
 
     // Then
     await expectTerminalText(container, Language.workspaceErrorMessagePrefix)
@@ -112,67 +90,66 @@ describe("TerminalPage", () => {
     )
 
     // When
-    const { container } = renderTerminal()
+    const { container } = await renderTerminal()
 
     // Then
     await expectTerminalText(container, Language.websocketErrorMessagePrefix)
   })
 
   it("renders data from the backend", async () => {
     // Given
-    const server = new WS(
-      "ws://localhost/api/v2/workspaceagents/" + MockWorkspaceAgent.id + "/pty",
+    const ws = new WS(
+      `ws://localhost/api/v2/workspaceagents/${MockWorkspaceAgent.id}/pty`,
     )
     const text = "something to render"
 
     // When
-    const { container } = renderTerminal()
+    const { container } = await renderTerminal()
 
     // Then
-    await server.connected
-    server.send(text)
+    await ws.connected
+    ws.send(text)
     await expectTerminalText(container, text)
-    server.close()
+    ws.close()
   })
 
   it("resizes on connect", async () => {
     // Given
-    const server = new WS(
-      "ws://localhost/api/v2/workspaceagents/" + MockWorkspaceAgent.id + "/pty",
+    const ws = new WS(
+      `ws://localhost/api/v2/workspaceagents/${MockWorkspaceAgent.id}/pty`,
     )
 
     // When
-    renderTerminal()
+    await renderTerminal()
 
     // Then
-    await server.connected
-    const msg = await server.nextMessage
+    await ws.connected
+    const msg = await ws.nextMessage
     const req: ReconnectingPTYRequest = JSON.parse(
       new TextDecoder().decode(msg as Uint8Array),
     )
 
     expect(req.height).toBeGreaterThan(0)
     expect(req.width).toBeGreaterThan(0)
-    server.close()
+    ws.close()
   })
 
   it("supports workspace.agent syntax", async () => {
     // Given
-    const server = new WS(
-      "ws://localhost/api/v2/workspaceagents/" + MockWorkspaceAgent.id + "/pty",
+    const ws = new WS(
+      `ws://localhost/api/v2/workspaceagents/${MockWorkspaceAgent.id}/pty`,
     )
     const text = "something to render"
 
     // When
-    history.push(
+    const { container } = await renderTerminal(
       `/some-user/${MockWorkspace.name}.${MockWorkspaceAgent.name}/terminal`,
     )
-    const { container } = renderTerminal()
 
     // Then
-    await server.connected
-    server.send(text)
+    await ws.connected
+    ws.send(text)
     await expectTerminalText(container, text)
-    server.close()
+    ws.close()
   })
 })