expanded tests and made better mock

Author: liwilliam2021

webview-ui/src/components/chat/__tests__/FollowUpSuggest.spec.tsx

@@ -1,7 +1,7 @@
+import React, { createContext, useContext } from "react"
 import { render, screen } from "@testing-library/react"
 import { describe, it, expect, vi, beforeEach, afterEach } from "vitest"
 import { FollowUpSuggest } from "../FollowUpSuggest"
-import { ExtensionStateContext, ExtensionStateContextType } from "@src/context/ExtensionStateContext"
 import { TooltipProvider } from "@radix-ui/react-tooltip"
 
 // Mock the translation hook
@@ -23,87 +23,40 @@ vi.mock("@src/i18n/TranslationContext", () => ({
 	}),
 }))
 
-// Mock the extension state
-const createMockExtensionState = (overrides?: Partial<ExtensionStateContextType>): ExtensionStateContextType =>
-	({
-		version: "1.0.0",
-		clineMessages: [],
-		taskHistory: [],
-		shouldShowAnnouncement: false,
-		allowedCommands: [],
-		soundEnabled: false,
-		soundVolume: 0.5,
-		ttsEnabled: false,
-		ttsSpeed: 1.0,
-		diffEnabled: false,
-		enableCheckpoints: true,
-		fuzzyMatchThreshold: 1.0,
-		language: "en",
-		writeDelayMs: 1000,
-		browserViewportSize: "900x600",
-		screenshotQuality: 75,
-		terminalOutputLineLimit: 500,
-		terminalShellIntegrationTimeout: 4000,
-		mcpEnabled: true,
-		enableMcpServerCreation: false,
-		alwaysApproveResubmit: false,
-		requestDelaySeconds: 5,
-		currentApiConfigName: "default",
-		listApiConfigMeta: [],
-		mode: "code",
-		customModePrompts: {},
-		customSupportPrompts: {},
-		experiments: {},
-		enhancementApiConfigId: "",
-		condensingApiConfigId: "",
-		customCondensingPrompt: "",
-		hasOpenedModeSelector: false,
-		autoApprovalEnabled: true,
-		alwaysAllowFollowupQuestions: true,
-		followupAutoApproveTimeoutMs: 3000, // 3 seconds for testing
-		customModes: [],
-		maxOpenTabsContext: 20,
-		maxWorkspaceFiles: 200,
-		cwd: "",
-		browserToolEnabled: true,
-		telemetrySetting: "unset",
-		showRooIgnoredFiles: true,
-		renderContext: "sidebar",
-		maxReadFileLine: -1,
-		pinnedApiConfigs: {},
-		didHydrateState: true,
-		showWelcome: false,
-		theme: {},
-		mcpServers: [],
-		filePaths: [],
-		openedTabs: [],
-		organizationAllowList: { type: "all" },
-		cloudIsAuthenticated: false,
-		sharingEnabled: false,
-		mdmCompliant: true,
-		autoCondenseContext: false,
-		autoCondenseContextPercent: 50,
-		setHasOpenedModeSelector: vi.fn(),
-		setAlwaysAllowFollowupQuestions: vi.fn(),
-		setFollowupAutoApproveTimeoutMs: vi.fn(),
-		setCondensingApiConfigId: vi.fn(),
-		setCustomCondensingPrompt: vi.fn(),
-		setPinnedApiConfigs: vi.fn(),
-		togglePinnedApiConfig: vi.fn(),
-		setTerminalCompressProgressBar: vi.fn(),
-		setHistoryPreviewCollapsed: vi.fn(),
-		setAutoCondenseContext: vi.fn(),
-		setAutoCondenseContextPercent: vi.fn(),
-		...overrides,
-	}) as ExtensionStateContextType
-
-const renderWithProviders = (component: React.ReactElement, stateOverrides?: Partial<ExtensionStateContextType>) => {
-	const mockState = createMockExtensionState(stateOverrides)
+// Test-specific extension state context that only provides the values needed by FollowUpSuggest
+interface TestExtensionState {
+	autoApprovalEnabled: boolean
+	alwaysAllowFollowupQuestions: boolean
+	followupAutoApproveTimeoutMs: number
+}
+
+const TestExtensionStateContext = createContext<TestExtensionState | undefined>(undefined)
 
+// Mock the useExtensionState hook to use our test context
+vi.mock("@src/context/ExtensionStateContext", () => ({
+	useExtensionState: () => {
+		const context = useContext(TestExtensionStateContext)
+		if (!context) {
+			throw new Error("useExtensionState must be used within TestExtensionStateProvider")
+		}
+		return context
+	},
+}))
+
+// Test provider that only provides the specific values needed by FollowUpSuggest
+const TestExtensionStateProvider: React.FC<{
+	children: React.ReactNode
+	value: TestExtensionState
+}> = ({ children, value }) => {
+	return <TestExtensionStateContext.Provider value={value}>{children}</TestExtensionStateContext.Provider>
+}
+
+// Helper function to render component with test providers
+const renderWithTestProviders = (component: React.ReactElement, extensionState: TestExtensionState) => {
 	return render(
-		<ExtensionStateContext.Provider value={mockState}>
+		<TestExtensionStateProvider value={extensionState}>
 			<TooltipProvider>{component}</TooltipProvider>
-		</ExtensionStateContext.Provider>,
+		</TestExtensionStateProvider>,
 	)
 }
 
@@ -113,6 +66,13 @@ describe("FollowUpSuggest", () => {
 	const mockOnSuggestionClick = vi.fn()
 	const mockOnUnmount = vi.fn()
 
+	// Default test state with auto-approval enabled
+	const defaultTestState: TestExtensionState = {
+		autoApprovalEnabled: true,
+		alwaysAllowFollowupQuestions: true,
+		followupAutoApproveTimeoutMs: 3000, // 3 seconds for testing
+	}
+
 	beforeEach(() => {
 		vi.clearAllMocks()
 		vi.useFakeTimers()
@@ -123,42 +83,45 @@ describe("FollowUpSuggest", () => {
 	})
 
 	it("should display countdown timer when auto-approval is enabled", () => {
-		renderWithProviders(
+		renderWithTestProviders(
 			<FollowUpSuggest
 				suggestions={mockSuggestions}
 				onSuggestionClick={mockOnSuggestionClick}
 				ts={123}
 				onUnmount={mockOnUnmount}
 			/>,
+			defaultTestState,
 		)
 
 		// Should show initial countdown (3 seconds)
 		expect(screen.getByText(/3s/)).toBeInTheDocument()
 	})
 
 	it("should not display countdown timer when isAnswered is true", () => {
-		renderWithProviders(
+		renderWithTestProviders(
 			<FollowUpSuggest
 				suggestions={mockSuggestions}
 				onSuggestionClick={mockOnSuggestionClick}
 				ts={123}
 				onUnmount={mockOnUnmount}
 				isAnswered={true}
 			/>,
+			defaultTestState,
 		)
 
 		// Should not show countdown
 		expect(screen.queryByText(/\d+s/)).not.toBeInTheDocument()
 	})
 
 	it("should clear interval and call onUnmount when component unmounts", () => {
-		const { unmount } = renderWithProviders(
+		const { unmount } = renderWithTestProviders(
 			<FollowUpSuggest
 				suggestions={mockSuggestions}
 				onSuggestionClick={mockOnSuggestionClick}
 				ts={123}
 				onUnmount={mockOnUnmount}
 			/>,
+			defaultTestState,
 		)
 
 		// Unmount the component
@@ -169,32 +132,158 @@ describe("FollowUpSuggest", () => {
 	})
 
 	it("should not show countdown when auto-approval is disabled", () => {
-		renderWithProviders(
+		const testState: TestExtensionState = {
+			...defaultTestState,
+			autoApprovalEnabled: false,
+		}
+
+		renderWithTestProviders(
 			<FollowUpSuggest
 				suggestions={mockSuggestions}
 				onSuggestionClick={mockOnSuggestionClick}
 				ts={123}
 				onUnmount={mockOnUnmount}
 			/>,
-			{ autoApprovalEnabled: false },
+			testState,
 		)
 
 		// Should not show countdown
 		expect(screen.queryByText(/\d+s/)).not.toBeInTheDocument()
 	})
 
 	it("should not show countdown when alwaysAllowFollowupQuestions is false", () => {
-		renderWithProviders(
+		const testState: TestExtensionState = {
+			...defaultTestState,
+			alwaysAllowFollowupQuestions: false,
+		}
+
+		renderWithTestProviders(
+			<FollowUpSuggest
+				suggestions={mockSuggestions}
+				onSuggestionClick={mockOnSuggestionClick}
+				ts={123}
+				onUnmount={mockOnUnmount}
+			/>,
+			testState,
+		)
+
+		// Should not show countdown
+		expect(screen.queryByText(/\d+s/)).not.toBeInTheDocument()
+	})
+
+	it("should use custom timeout value from extension state", () => {
+		const testState: TestExtensionState = {
+			...defaultTestState,
+			followupAutoApproveTimeoutMs: 5000, // 5 seconds
+		}
+
+		renderWithTestProviders(
+			<FollowUpSuggest
+				suggestions={mockSuggestions}
+				onSuggestionClick={mockOnSuggestionClick}
+				ts={123}
+				onUnmount={mockOnUnmount}
+			/>,
+			testState,
+		)
+
+		// Should show initial countdown (5 seconds)
+		expect(screen.getByText(/5s/)).toBeInTheDocument()
+	})
+
+	it("should render suggestions without countdown when both auto-approval settings are disabled", () => {
+		const testState: TestExtensionState = {
+			autoApprovalEnabled: false,
+			alwaysAllowFollowupQuestions: false,
+			followupAutoApproveTimeoutMs: 3000,
+		}
+
+		renderWithTestProviders(
 			<FollowUpSuggest
 				suggestions={mockSuggestions}
 				onSuggestionClick={mockOnSuggestionClick}
 				ts={123}
 				onUnmount={mockOnUnmount}
 			/>,
-			{ alwaysAllowFollowupQuestions: false },
+			testState,
 		)
 
+		// Should render suggestions
+		expect(screen.getByText("First suggestion")).toBeInTheDocument()
+		expect(screen.getByText("Second suggestion")).toBeInTheDocument()
+
 		// Should not show countdown
 		expect(screen.queryByText(/\d+s/)).not.toBeInTheDocument()
 	})
+
+	it("should not render when no suggestions are provided", () => {
+		const { container } = renderWithTestProviders(
+			<FollowUpSuggest
+				suggestions={[]}
+				onSuggestionClick={mockOnSuggestionClick}
+				ts={123}
+				onUnmount={mockOnUnmount}
+			/>,
+			defaultTestState,
+		)
+
+		// Component should not render anything
+		expect(container.firstChild).toBeNull()
+	})
+
+	it("should not render when onSuggestionClick is not provided", () => {
+		const { container } = renderWithTestProviders(
+			<FollowUpSuggest suggestions={mockSuggestions} ts={123} onUnmount={mockOnUnmount} />,
+			defaultTestState,
+		)
+
+		// Component should not render anything
+		expect(container.firstChild).toBeNull()
+	})
+
+	it("should stop countdown when user manually responds (isAnswered becomes true)", () => {
+		const { rerender } = renderWithTestProviders(
+			<FollowUpSuggest
+				suggestions={mockSuggestions}
+				onSuggestionClick={mockOnSuggestionClick}
+				ts={123}
+				onUnmount={mockOnUnmount}
+				isAnswered={false}
+			/>,
+			defaultTestState,
+		)
+
+		// Initially should show countdown
+		expect(screen.getByText(/3s/)).toBeInTheDocument()
+
+		// Simulate user manually responding by setting isAnswered to true
+		rerender(
+			<TestExtensionStateProvider value={defaultTestState}>
+				<TooltipProvider>
+					<FollowUpSuggest
+						suggestions={mockSuggestions}
+						onSuggestionClick={mockOnSuggestionClick}
+						ts={123}
+						onUnmount={mockOnUnmount}
+						isAnswered={true}
+					/>
+				</TooltipProvider>
+			</TestExtensionStateProvider>,
+		)
+
+		// Countdown should no longer be visible immediately after isAnswered becomes true
+		expect(screen.queryByText(/\d+s/)).not.toBeInTheDocument()
+
+		// Advance timer to ensure countdown doesn't restart or continue
+		vi.advanceTimersByTime(5000)
+
+		// onSuggestionClick should not have been called (auto-selection stopped)
+		expect(mockOnSuggestionClick).not.toHaveBeenCalled()
+
+		// Countdown should still not be visible
+		expect(screen.queryByText(/\d+s/)).not.toBeInTheDocument()
+
+		// Verify onUnmount was called when the countdown was stopped
+		expect(mockOnUnmount).toHaveBeenCalled()
+	})
 })