Add tests for TaskHeader component and mock i18next for translations

Author: d-oit

webview-ui/src/__mocks__/i18next.ts

@@ -0,0 +1,17 @@
+// Mock for i18next
+const i18next = {
+	use: function (plugin: any) {
+		return this
+	},
+	init: function () {
+		return this
+	},
+	t: function (key: string) {
+		const parts = key.split(":")
+		return parts.length > 1 ? parts[1] : key
+	},
+	changeLanguage: () => new Promise(() => {}),
+	addResourceBundle: () => {},
+}
+
+export default i18next

webview-ui/src/__mocks__/react-i18next.ts

@@ -0,0 +1,31 @@
+// Mock for react-i18next
+
+export const initReactI18next = {
+	type: "3rdParty",
+	init: () => {},
+}
+
+// Mock the useTranslation hook
+export const useTranslation = () => ({
+	t: (key: string) => {
+		// Handle number format suffixes
+		if (key === "number_format.million_suffix") return "M"
+		if (key === "number_format.thousand_suffix") return "K"
+
+		// Return the key part after the colon or the whole key if no colon
+		const parts = key.split(":")
+		return parts.length > 1 ? parts[1] : key
+	},
+	i18n: {
+		changeLanguage: () => new Promise(() => {}),
+		t: (key: string) => {
+			if (key === "number_format.million_suffix") return "M"
+			if (key === "number_format.thousand_suffix") return "K"
+			const parts = key.split(":")
+			return parts.length > 1 ? parts[1] : key
+		},
+	},
+})
+
+// Mock the Trans component
+export const Trans = ({ children }: { children: any }) => children

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

@@ -71,7 +71,9 @@ const TaskHeader: React.FC<TaskHeaderProps> = ({
 				<div className="flex justify-between items-center gap-2">
 					<div
 						className="flex items-center cursor-pointer -ml-0.5 select-none grow min-w-0"
-						onClick={() => setIsTaskExpanded(!isTaskExpanded)}>
+						onClick={() => setIsTaskExpanded(!isTaskExpanded)}
+						data-testid="task-header" // Added data-testid here
+					>
 						<div className="flex items-center shrink-0">
 							<span className={`codicon codicon-chevron-${isTaskExpanded ? "down" : "right"}`}></span>
 						</div>