Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Apr 21, 2025
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9871e2f
Refactor: Use path aliases in webview source files.
sachasayan Apr 20, 2025
9b77fda
Add module resolution to root jest config.
sachasayan Apr 20, 2025
ae397f2
Add tests.
sachasayan Apr 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions jest.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)/)",
Expand Down
2 changes: 2 additions & 0 deletions webview-ui/jest.config.cjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Copy link
Contributor

@ellipsis-dev ellipsis-dev bot Apr 20, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This alias mapping is redundant with the existing @/ alias that points to the same directory.

Suggested change
'^@src/(.*)$': '<rootDir>/src/$1',

Copy link
Contributor Author

@sachasayan sachasayan Apr 20, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(Yup, but I think this should be explicit so that people poking around unfamiliar with aliases / module resolution can clue in — at least for now.)

"^src/i18n/setup$": "<rootDir>/src/__mocks__/i18n/setup.ts",
"^\\.\\./setup$": "<rootDir>/src/__mocks__/i18n/setup.ts",
"^\\./setup$": "<rootDir>/src/__mocks__/i18n/setup.ts",
Expand Down
2 changes: 1 addition & 1 deletion webview-ui/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
14 changes: 7 additions & 7 deletions webview-ui/src/__tests__/App.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand All @@ -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 (
Expand All @@ -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 (
Expand All @@ -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 (
Expand All @@ -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 (
Expand All @@ -67,7 +67,7 @@ jest.mock("../components/prompts/PromptsView", () => ({
},
}))

jest.mock("../context/ExtensionStateContext", () => ({
jest.mock("@src/context/ExtensionStateContext", () => ({
useExtensionState: () => ({
didHydrateState: true,
showWelcome: false,
Expand Down
8 changes: 4 additions & 4 deletions webview-ui/src/__tests__/ContextWindowProgress.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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", () => ({
Expand All @@ -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",
Expand All @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion webview-ui/src/__tests__/ContextWindowProgressLogic.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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

Expand Down
2 changes: 1 addition & 1 deletion webview-ui/src/__tests__/TelemetryClient.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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", () => {
Expand Down
4 changes: 2 additions & 2 deletions webview-ui/src/__tests__/components/common/CommandOutputViewer.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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(" "),
}))

Expand Down
6 changes: 3 additions & 3 deletions webview-ui/src/components/chat/AutoApproveMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
11 changes: 3 additions & 8 deletions webview-ui/src/components/chat/BrowserSessionRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"
Expand Down
19 changes: 7 additions & 12 deletions webview-ui/src/components/chat/ChatRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,18 +6,13 @@ import { VSCodeBadge, VSCodeButton, VSCodeProgressRing } from "@vscode/webview-u

import { Button } from "@/components/ui"

import { useCopyToClipboard } from "../../utils/clipboard"
import { safeJsonParse } from "../../utils/json"
import {
ClineApiReqInfo,
ClineAskUseMcpServer,
ClineMessage,
ClineSayTool,
} from "../../../../src/shared/ExtensionMessage"
import { COMMAND_OUTPUT_STRING } from "../../../../src/shared/combineCommandSequences"
import { useExtensionState } from "../../context/ExtensionStateContext"
import { findMatchingResourceOrTemplate } from "../../utils/mcp"
import { vscode } from "../../utils/vscode"
import { useCopyToClipboard } from "@src/utils/clipboard"
import { safeJsonParse } from "@src/utils/json"
import { ClineApiReqInfo, ClineAskUseMcpServer, ClineMessage, ClineSayTool } from "@roo/shared/ExtensionMessage"
import { COMMAND_OUTPUT_STRING } from "@roo/shared/combineCommandSequences"
import { useExtensionState } from "@src/context/ExtensionStateContext"
import { findMatchingResourceOrTemplate } from "@src/utils/mcp"
import { vscode } from "@src/utils/vscode"
import CodeAccordian, { removeLeadingNonAlphanumeric } from "../common/CodeAccordian"
import CodeBlock, { CODE_BLOCK_BG_COLOR } from "../common/CodeBlock"
import CommandOutputViewer from "../common/CommandOutputViewer"
Expand Down
10 changes: 5 additions & 5 deletions webview-ui/src/components/chat/ChatTextArea.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@ import React, { forwardRef, useCallback, useEffect, useLayoutEffect, useMemo, us
import { useEvent } from "react-use"
import DynamicTextArea from "react-textarea-autosize"

import { mentionRegex, mentionRegexGlobal } from "../../../../src/shared/context-mentions"
import { WebviewMessage } from "../../../../src/shared/WebviewMessage"
import { Mode, getAllModes } from "../../../../src/shared/modes"
import { ExtensionMessage } from "../../../../src/shared/ExtensionMessage"
import { mentionRegex, mentionRegexGlobal } from "@roo/shared/context-mentions"
import { WebviewMessage } from "@roo/shared/WebviewMessage"
import { Mode, getAllModes } from "@roo/shared/modes"
import { ExtensionMessage } from "@roo/shared/ExtensionMessage"

import { vscode } from "@/utils/vscode"
import { useExtensionState } from "@/context/ExtensionStateContext"
Expand All @@ -17,7 +17,7 @@ import {
removeMention,
shouldShowContextMenu,
SearchResult,
} from "@/utils/context-mentions"
} from "@src/utils/context-mentions"
import { convertToMentionPath } from "@/utils/path-mentions"
import { SelectDropdown, DropdownOptionType, Button } from "@/components/ui"

Expand Down
22 changes: 11 additions & 11 deletions webview-ui/src/components/chat/ChatView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,14 @@ import {
ClineSayBrowserAction,
ClineSayTool,
ExtensionMessage,
} from "../../../../src/shared/ExtensionMessage"
import { McpServer, McpTool } from "../../../../src/shared/mcp"
import { findLast } from "../../../../src/shared/array"
import { combineApiRequests } from "../../../../src/shared/combineApiRequests"
import { combineCommandSequences } from "../../../../src/shared/combineCommandSequences"
import { getApiMetrics } from "../../../../src/shared/getApiMetrics"
import { useExtensionState } from "../../context/ExtensionStateContext"
import { vscode } from "../../utils/vscode"
} from "@roo/shared/ExtensionMessage"
import { McpServer, McpTool } from "@roo/shared/mcp"
import { findLast } from "@roo/shared/array"
import { combineApiRequests } from "@roo/shared/combineApiRequests"
import { combineCommandSequences } from "@roo/shared/combineCommandSequences"
import { getApiMetrics } from "@roo/shared/getApiMetrics"
import { useExtensionState } from "@src/context/ExtensionStateContext"
import { vscode } from "@src/utils/vscode"
import HistoryPreview from "../history/HistoryPreview"
import RooHero from "../welcome/RooHero"
import { normalizeApiConfiguration } from "../settings/ApiOptions"
Expand All @@ -27,9 +27,9 @@ import ChatRow from "./ChatRow"
import ChatTextArea from "./ChatTextArea"
import TaskHeader from "./TaskHeader"
import AutoApproveMenu from "./AutoApproveMenu"
import { AudioType } from "../../../../src/shared/WebviewMessage"
import { validateCommand } from "../../utils/command-validation"
import { getAllModes } from "../../../../src/shared/modes"
import { AudioType } from "@roo/shared/WebviewMessage"
import { validateCommand } from "@src/utils/command-validation"
import { getAllModes } from "@roo/shared/modes"
import TelemetryBanner from "../common/TelemetryBanner"
import { useAppTranslation } from "@/i18n/TranslationContext"
import removeMd from "remove-markdown"
Expand Down
4 changes: 2 additions & 2 deletions webview-ui/src/components/chat/ContextMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@ import {
ContextMenuQueryItem,
getContextMenuOptions,
SearchResult,
} from "../../utils/context-mentions"
} from "@src/utils/context-mentions"
import { removeLeadingNonAlphanumeric } from "../common/CodeAccordian"
import { ModeConfig } from "../../../../src/shared/modes"
import { ModeConfig } from "@roo/shared/modes"

interface ContextMenuProps {
onSelect: (type: ContextMenuOptionType, value?: string) => void
Expand Down
2 changes: 1 addition & 1 deletion webview-ui/src/components/chat/FollowUpSuggest.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { Edit } from "lucide-react"

import { Button } from "@/components/ui"

import { useAppTranslation } from "../../i18n/TranslationContext"
import { useAppTranslation } from "@src/i18n/TranslationContext"

interface FollowUpSuggestProps {
suggestions?: string[]
Expand Down
8 changes: 4 additions & 4 deletions webview-ui/src/components/chat/TaskHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,11 @@ import { formatLargeNumber } from "@/utils/format"
import { calculateTokenDistribution, getMaxTokensForModel } from "@/utils/model-utils"
import { Button } from "@/components/ui"

import { ClineMessage } from "../../../../src/shared/ExtensionMessage"
import { mentionRegexGlobal } from "../../../../src/shared/context-mentions"
import { HistoryItem } from "../../../../src/shared/HistoryItem"
import { ClineMessage } from "@roo/shared/ExtensionMessage"
import { mentionRegexGlobal } from "@roo/shared/context-mentions"
import { HistoryItem } from "@roo/shared/HistoryItem"

import { useExtensionState } from "../../context/ExtensionStateContext"
import { useExtensionState } from "@src/context/ExtensionStateContext"
import Thumbnails from "../common/Thumbnails"
import { normalizeApiConfiguration } from "../settings/ApiOptions"
import { DeleteTaskDialog } from "../history/DeleteTaskDialog"
Expand Down
18 changes: 9 additions & 9 deletions webview-ui/src/components/chat/__tests__/ChatTextArea.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,19 @@
import { render, fireEvent, screen } from "@testing-library/react"
import ChatTextArea from "../ChatTextArea"
import { useExtensionState } from "../../../context/ExtensionStateContext"
import { vscode } from "../../../utils/vscode"
import { defaultModeSlug } from "../../../../../src/shared/modes"
import * as pathMentions from "../../../utils/path-mentions"
import { useExtensionState } from "@src/context/ExtensionStateContext"
import { vscode } from "@src/utils/vscode"
import { defaultModeSlug } from "@roo/shared/modes"
import * as pathMentions from "@src/utils/path-mentions"

// Mock modules
jest.mock("../../../utils/vscode", () => ({
jest.mock("@src/utils/vscode", () => ({
vscode: {
postMessage: jest.fn(),
},
}))
jest.mock("../../../components/common/CodeBlock")
jest.mock("../../../components/common/MarkdownBlock")
jest.mock("../../../utils/path-mentions", () => ({
jest.mock("@src/components/common/CodeBlock")
jest.mock("@src/components/common/MarkdownBlock")
jest.mock("@src/utils/path-mentions", () => ({
convertToMentionPath: jest.fn((path, cwd) => {
// Simple mock implementation that mimics the real function's behavior
if (cwd && path.toLowerCase().startsWith(cwd.toLowerCase())) {
Expand All @@ -29,7 +29,7 @@ const mockPostMessage = vscode.postMessage as jest.Mock
const mockConvertToMentionPath = pathMentions.convertToMentionPath as jest.Mock

// Mock ExtensionStateContext
jest.mock("../../../context/ExtensionStateContext")
jest.mock("@src/context/ExtensionStateContext")

// Custom query function to get the enhance prompt button
const getEnhancePromptButton = () => {
Expand Down
12 changes: 6 additions & 6 deletions webview-ui/src/components/chat/__tests__/ChatView.auto-approve.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import React from "react"
import { render, waitFor } from "@testing-library/react"
import ChatView from "../ChatView"
import { ExtensionStateContextProvider } from "../../../context/ExtensionStateContext"
import { vscode } from "../../../utils/vscode"
import { ExtensionStateContextProvider } from "@src/context/ExtensionStateContext"
import { vscode } from "@src/utils/vscode"

// Mock vscode API
jest.mock("../../../utils/vscode", () => ({
jest.mock("@src/utils/vscode", () => ({
vscode: {
postMessage: jest.fn(),
},
Expand Down Expand Up @@ -49,18 +49,18 @@ jest.mock("../AutoApproveMenu", () => ({
default: () => null,
}))

jest.mock("../../common/CodeBlock", () => ({
jest.mock("@src/components/common/CodeBlock", () => ({
__esModule: true,
default: () => null,
CODE_BLOCK_BG_COLOR: "rgb(30, 30, 30)",
}))

jest.mock("../../common/CodeAccordian", () => ({
jest.mock("@src/components/common/CodeAccordian", () => ({
__esModule: true,
default: () => null,
}))

jest.mock("../ContextMenu", () => ({
jest.mock("@src/components/chat/ContextMenu", () => ({
__esModule: true,
default: () => null,
}))
Expand Down
6 changes: 3 additions & 3 deletions webview-ui/src/components/chat/__tests__/ChatView.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import React from "react"
import { render, waitFor, act } from "@testing-library/react"
import ChatView from "../ChatView"
import { ExtensionStateContextProvider } from "../../../context/ExtensionStateContext"
import { vscode } from "../../../utils/vscode"
import { ExtensionStateContextProvider } from "@src/context/ExtensionStateContext"
import { vscode } from "@src/utils/vscode"

// Define minimal types needed for testing
interface ClineMessage {
Expand All @@ -25,7 +25,7 @@ interface ExtensionState {
}

// Mock vscode API
jest.mock("../../../utils/vscode", () => ({
jest.mock("@src/utils/vscode", () => ({
vscode: {
postMessage: jest.fn(),
},
Expand Down
Loading