diff --git a/frontend/__tests__/components/conversation-tab-title.test.tsx b/frontend/__tests__/components/conversation-tab-title.test.tsx new file mode 100644 index 0000000000..4e3a0aa0fe --- /dev/null +++ b/frontend/__tests__/components/conversation-tab-title.test.tsx @@ -0,0 +1,149 @@ +import { render, screen, waitFor } from "@testing-library/react"; +import userEvent from "@testing-library/user-event"; +import { describe, expect, it, vi, beforeEach, afterEach } from "vitest"; +import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; +import { ConversationTabTitle } from "#/components/features/conversation/conversation-tabs/conversation-tab-title"; +import GitService from "#/api/git-service/git-service.api"; +import V1GitService from "#/api/git-service/v1-git-service.api"; + +// Mock the services that the hook depends on +vi.mock("#/api/git-service/git-service.api"); +vi.mock("#/api/git-service/v1-git-service.api"); + +// Mock the hooks that useUnifiedGetGitChanges depends on +vi.mock("#/hooks/use-conversation-id", () => ({ + useConversationId: () => ({ + conversationId: "test-conversation-id", + }), +})); + +vi.mock("#/hooks/query/use-active-conversation", () => ({ + useActiveConversation: () => ({ + data: { + conversation_version: "V0", + url: null, + session_api_key: null, + selected_repository: null, + }, + }), +})); + +vi.mock("#/hooks/use-runtime-is-ready", () => ({ + useRuntimeIsReady: () => true, +})); + +vi.mock("#/utils/get-git-path", () => ({ + getGitPath: () => "/workspace", +})); + +describe("ConversationTabTitle", () => { + let queryClient: QueryClient; + + beforeEach(() => { + queryClient = new QueryClient({ + defaultOptions: { + queries: { + retry: false, + }, + }, + }); + + // Mock GitService methods + vi.mocked(GitService.getGitChanges).mockResolvedValue([]); + vi.mocked(V1GitService.getGitChanges).mockResolvedValue([]); + }); + + afterEach(() => { + vi.clearAllMocks(); + queryClient.clear(); + }); + + const renderWithProviders = (ui: React.ReactElement) => { + return render( + {ui}, + ); + }; + + describe("Rendering", () => { + it("should render the title", () => { + // Arrange + const title = "Test Title"; + + // Act + renderWithProviders( + , + ); + + // Assert + expect(screen.getByText(title)).toBeInTheDocument(); + }); + + it("should show refresh button when conversationKey is 'editor'", () => { + // Arrange + const title = "Changes"; + + // Act + renderWithProviders( + , + ); + + // Assert + const refreshButton = screen.getByRole("button"); + expect(refreshButton).toBeInTheDocument(); + }); + + it("should not show refresh button when conversationKey is not 'editor'", () => { + // Arrange + const title = "Browser"; + + // Act + renderWithProviders( + , + ); + + // Assert + expect(screen.queryByRole("button")).not.toBeInTheDocument(); + }); + }); + + describe("User Interactions", () => { + it("should call refetch and trigger GitService.getGitChanges when refresh button is clicked", async () => { + // Arrange + const user = userEvent.setup(); + const title = "Changes"; + const mockGitChanges: Array<{ + path: string; + status: "M" | "A" | "D" | "R" | "U"; + }> = [ + { path: "file1.ts", status: "M" }, + { path: "file2.ts", status: "A" }, + ]; + + vi.mocked(GitService.getGitChanges).mockResolvedValue(mockGitChanges); + + renderWithProviders( + , + ); + + const refreshButton = screen.getByRole("button"); + + // Wait for initial query to complete + await waitFor(() => { + expect(GitService.getGitChanges).toHaveBeenCalled(); + }); + + // Clear the mock to track refetch calls + vi.mocked(GitService.getGitChanges).mockClear(); + + // Act + await user.click(refreshButton); + + // Assert - refetch should trigger another service call + await waitFor(() => { + expect(GitService.getGitChanges).toHaveBeenCalledWith( + "test-conversation-id", + ); + }); + }); + }); +}); diff --git a/frontend/src/components/features/conversation/conversation-tabs/conversation-tab-content/conversation-tab-content.tsx b/frontend/src/components/features/conversation/conversation-tabs/conversation-tab-content/conversation-tab-content.tsx index 70b45ea73a..39b68c9033 100644 --- a/frontend/src/components/features/conversation/conversation-tabs/conversation-tab-content/conversation-tab-content.tsx +++ b/frontend/src/components/features/conversation/conversation-tabs/conversation-tab-content/conversation-tab-content.tsx @@ -82,13 +82,45 @@ export function ConversationTabContent() { isPlannerActive, ]); + const conversationKey = useMemo(() => { + if (isEditorActive) { + return "editor"; + } + if (isBrowserActive) { + return "browser"; + } + if (isServedActive) { + return "served"; + } + if (isVSCodeActive) { + return "vscode"; + } + if (isTerminalActive) { + return "terminal"; + } + if (isPlannerActive) { + return "planner"; + } + return ""; + }, [ + isEditorActive, + isBrowserActive, + isServedActive, + isVSCodeActive, + isTerminalActive, + isPlannerActive, + ]); + if (shouldShownAgentLoading) { return ; } return ( - + {tabs.map(({ key, component: Component, isActive }) => ( { + refetch(); + }; + return (
{title} + {conversationKey === "editor" && ( + + )}
); } diff --git a/frontend/src/hooks/query/use-unified-get-git-changes.ts b/frontend/src/hooks/query/use-unified-get-git-changes.ts index ae5600469a..6b0856031c 100644 --- a/frontend/src/hooks/query/use-unified-get-git-changes.ts +++ b/frontend/src/hooks/query/use-unified-get-git-changes.ts @@ -103,5 +103,6 @@ export const useUnifiedGetGitChanges = () => { isSuccess: result.isSuccess, isError: result.isError, error: result.error, + refetch: result.refetch, }; }; diff --git a/frontend/src/icons/u-refresh.svg b/frontend/src/icons/u-refresh.svg new file mode 100644 index 0000000000..9e3a2051d2 --- /dev/null +++ b/frontend/src/icons/u-refresh.svg @@ -0,0 +1,3 @@ + + +