Refactor: Use path aliases in webview source files. (RooCodeInc#2801)

* Refactor: Use path aliases in webview source files.

* Add module resolution to root jest config.

* Add tests.

Broken import.

Another broken import.

 Broken test.

Author: sachasayan

jest.config.js

@@ -36,6 +36,8 @@ module.exports = {
 		"^default-shell$": "<rootDir>/src/__mocks__/default-shell.js",
 		"^os-name$": "<rootDir>/src/__mocks__/os-name.js",
 		"^strip-bom$": "<rootDir>/src/__mocks__/strip-bom.js",
+		"^@roo/(.*)$": "<rootDir>/src/$1",
+		"^@src/(.*)$": "<rootDir>/webview-ui/src/$1",
 	},
 	transformIgnorePatterns: [
 		"node_modules/(?!(@modelcontextprotocol|delay|p-wait-for|serialize-error|strip-ansi|default-shell|os-name|strip-bom)/)",

webview-ui/jest.config.cjs

@@ -12,6 +12,8 @@ module.exports = {
 		"^vscrui$": "<rootDir>/src/__mocks__/vscrui.ts",
 		"^@vscode/webview-ui-toolkit/react$": "<rootDir>/src/__mocks__/@vscode/webview-ui-toolkit/react.ts",
 		"^@/(.*)$": "<rootDir>/src/$1",
+		'^@roo/(.*)$': '<rootDir>/../src/$1',
+		'^@src/(.*)$': '<rootDir>/src/$1',		
 		"^src/i18n/setup$": "<rootDir>/src/__mocks__/i18n/setup.ts",
 		"^\\.\\./setup$": "<rootDir>/src/__mocks__/i18n/setup.ts",
 		"^\\./setup$": "<rootDir>/src/__mocks__/i18n/setup.ts",

webview-ui/src/App.tsx

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useRef, useState } from "react"
 import { useEvent } from "react-use"
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
 
-import { ExtensionMessage } from "../../src/shared/ExtensionMessage"
+import { ExtensionMessage } from "@roo/shared/ExtensionMessage"
 import TranslationProvider from "./i18n/TranslationContext"
 
 import { vscode } from "./utils/vscode"

webview-ui/src/__tests__/App.test.tsx

@@ -6,13 +6,13 @@ import "@testing-library/jest-dom"
 
 import AppWithProviders from "../App"
 
-jest.mock("../utils/vscode", () => ({
+jest.mock("@src/utils/vscode", () => ({
 	vscode: {
 		postMessage: jest.fn(),
 	},
 }))
 
-jest.mock("../components/chat/ChatView", () => ({
+jest.mock("@src/components/chat/ChatView", () => ({
 	__esModule: true,
 	default: function ChatView({ isHidden }: { isHidden: boolean }) {
 		return (
@@ -23,7 +23,7 @@ jest.mock("../components/chat/ChatView", () => ({
 	},
 }))
 
-jest.mock("../components/settings/SettingsView", () => ({
+jest.mock("@src/components/settings/SettingsView", () => ({
 	__esModule: true,
 	default: function SettingsView({ onDone }: { onDone: () => void }) {
 		return (
@@ -34,7 +34,7 @@ jest.mock("../components/settings/SettingsView", () => ({
 	},
 }))
 
-jest.mock("../components/history/HistoryView", () => ({
+jest.mock("@src/components/history/HistoryView", () => ({
 	__esModule: true,
 	default: function HistoryView({ onDone }: { onDone: () => void }) {
 		return (
@@ -45,7 +45,7 @@ jest.mock("../components/history/HistoryView", () => ({
 	},
 }))
 
-jest.mock("../components/mcp/McpView", () => ({
+jest.mock("@src/components/mcp/McpView", () => ({
 	__esModule: true,
 	default: function McpView({ onDone }: { onDone: () => void }) {
 		return (
@@ -56,7 +56,7 @@ jest.mock("../components/mcp/McpView", () => ({
 	},
 }))
 
-jest.mock("../components/prompts/PromptsView", () => ({
+jest.mock("@src/components/prompts/PromptsView", () => ({
 	__esModule: true,
 	default: function PromptsView({ onDone }: { onDone: () => void }) {
 		return (
@@ -67,7 +67,7 @@ jest.mock("../components/prompts/PromptsView", () => ({
 	},
 }))
 
-jest.mock("../context/ExtensionStateContext", () => ({
+jest.mock("@src/context/ExtensionStateContext", () => ({
 	useExtensionState: () => ({
 		didHydrateState: true,
 		showWelcome: false,

webview-ui/src/__tests__/ContextWindowProgress.test.tsx

@@ -2,7 +2,7 @@
 
 import { render, screen } from "@testing-library/react"
 import "@testing-library/jest-dom"
-import TaskHeader from "../components/chat/TaskHeader"
+import TaskHeader from "@src/components/chat/TaskHeader"
 
 // Mock formatLargeNumber function
 jest.mock("@/utils/format", () => ({
@@ -15,7 +15,7 @@ jest.mock("@vscode/webview-ui-toolkit/react", () => ({
 }))
 
 // Mock ExtensionStateContext since we use useExtensionState
-jest.mock("../context/ExtensionStateContext", () => ({
+jest.mock("@src/context/ExtensionStateContext", () => ({
 	useExtensionState: jest.fn(() => ({
 		apiConfiguration: {
 			apiProvider: "openai",
@@ -30,8 +30,8 @@ jest.mock("../context/ExtensionStateContext", () => ({
 }))
 
 // Mock highlighting function to avoid JSX parsing issues in tests
-jest.mock("../components/chat/TaskHeader", () => {
-	const originalModule = jest.requireActual("../components/chat/TaskHeader")
+jest.mock("@src/components/chat/TaskHeader", () => {
+	const originalModule = jest.requireActual("@src/components/chat/TaskHeader")
 	return {
 		__esModule: true,
 		...originalModule,

webview-ui/src/__tests__/ContextWindowProgressLogic.test.ts

@@ -1,7 +1,7 @@
 // This test directly tests the logic of the ContextWindowProgress component calculations
 // without needing to render the full component
 import { describe, test, expect } from "@jest/globals"
-import { calculateTokenDistribution } from "../utils/model-utils"
+import { calculateTokenDistribution } from "@src/utils/model-utils"
 
 export {} // This makes the file a proper TypeScript module
 

webview-ui/src/__tests__/TelemetryClient.test.ts

@@ -1,7 +1,7 @@
 /**
  * Tests for TelemetryClient
  */
-import { telemetryClient } from "../utils/TelemetryClient"
+import { telemetryClient } from "@src/utils/TelemetryClient"
 import posthog from "posthog-js"
 
 describe("TelemetryClient", () => {

webview-ui/src/__tests__/components/common/CommandOutputViewer.test.tsx

@@ -1,9 +1,9 @@
 import React from "react"
 import { render, screen } from "@testing-library/react"
-import CommandOutputViewer from "../../../components/common/CommandOutputViewer"
+import CommandOutputViewer from "@src/components/common/CommandOutputViewer"
 
 // Mock the cn utility function
-jest.mock("../../../lib/utils", () => ({
+jest.mock("@src/lib/utils", () => ({
 	cn: (...inputs: any[]) => inputs.filter(Boolean).join(" "),
 }))
 

webview-ui/src/components/chat/AutoApproveMenu.tsx

@@ -2,9 +2,9 @@ import { useCallback, useMemo, useState } from "react"
 import { Trans } from "react-i18next"
 import { VSCodeCheckbox, VSCodeLink } from "@vscode/webview-ui-toolkit/react"
 
-import { vscode } from "../../utils/vscode"
-import { useExtensionState } from "../../context/ExtensionStateContext"
-import { useAppTranslation } from "../../i18n/TranslationContext"
+import { vscode } from "@src/utils/vscode"
+import { useExtensionState } from "@src/context/ExtensionStateContext"
+import { useAppTranslation } from "@src/i18n/TranslationContext"
 import { AutoApproveToggle, AutoApproveSetting, autoApproveSettingsConfig } from "../settings/AutoApproveToggle"
 
 interface AutoApproveMenuProps {

webview-ui/src/components/chat/BrowserSessionRow.tsx

@@ -1,14 +1,9 @@
 import deepEqual from "fast-deep-equal"
 import React, { memo, useEffect, useMemo, useRef, useState } from "react"
 import { useSize } from "react-use"
-import { useExtensionState } from "../../context/ExtensionStateContext"
-import {
-	BrowserAction,
-	BrowserActionResult,
-	ClineMessage,
-	ClineSayBrowserAction,
-} from "../../../../src/shared/ExtensionMessage"
-import { vscode } from "../../utils/vscode"
+import { useExtensionState } from "@src/context/ExtensionStateContext"
+import { BrowserAction, BrowserActionResult, ClineMessage, ClineSayBrowserAction } from "@roo/shared/ExtensionMessage"
+import { vscode } from "@src/utils/vscode"
 import CodeBlock, { CODE_BLOCK_BG_COLOR } from "../common/CodeBlock"
 import { ChatRowContent, ProgressIndicator } from "./ChatRow"
 import { VSCodeButton } from "@vscode/webview-ui-toolkit/react"