fix(site): add test and fix username params in terminal (#8052)

site/src/pages/TerminalPage/TerminalPage.test.tsx

@@ -15,6 +15,7 @@ import {
 } from "../../testHelpers/renderHelpers"
 import { server } from "../../testHelpers/server"
 import TerminalPage, { Language } from "./TerminalPage"
+import * as API from "api/api"
 
 Object.defineProperty(window, "matchMedia", {
   writable: true,
@@ -63,6 +64,20 @@ const expectTerminalText = (container: HTMLElement, text: string) => {
 }
 
 describe("TerminalPage", () => {
+  it("loads the right workspace data", async () => {
+    const spy = jest
+      .spyOn(API, "getWorkspaceByOwnerAndName")
+      .mockResolvedValue(MockWorkspace)
+    await renderTerminal(`/${MockUser.username}/${MockWorkspace.name}/terminal`)
+    await waitFor(() => {
+      expect(API.getWorkspaceByOwnerAndName).toHaveBeenCalledWith(
+        MockUser.username,
+        MockWorkspace.name,
+      )
+    })
+    spy.mockRestore()
+  })
+
   it("shows an error if fetching workspace fails", async () => {
     // Given
     server.use(

site/src/pages/TerminalPage/TerminalPage.tsx

@@ -73,7 +73,9 @@ const TerminalPage: FC = () => {
   const navigate = useNavigate()
   const styles = useStyles()
   const { proxy } = useProxy()
-  const { username, workspace: workspaceName } = useParams()
+  const params = useParams() as { username: string; workspace: string }
+  const username = params.username.replace("@", "")
+  const workspaceName = params.workspace
   const xtermRef = useRef<HTMLDivElement>(null)
   const [terminal, setTerminal] = useState<XTerm.Terminal | null>(null)
   const [fitAddon, setFitAddon] = useState<FitAddon | null>(null)