@@ -61,6 +61,55 @@ vi.mock("../AutoApproveMenu", () => ({
6161 default : ( ) => null ,
6262} ) )
6363
64+ vi . mock ( "@src/components/common/VersionIndicator" , ( ) => ( {
65+ default : function MockVersionIndicator ( { onClick, className } : { onClick : ( ) => void ; className ?: string } ) {
66+ // eslint-disable-next-line @typescript-eslint/no-require-imports
67+ const React = require ( "react" )
68+ return React . createElement (
69+ "button" ,
70+ {
71+ onClick,
72+ className,
73+ "aria-label" : "chat:versionIndicator.ariaLabel" ,
74+ "data-testid" : "version-indicator" ,
75+ } ,
76+ "v3.21.5" ,
77+ )
78+ } ,
79+ } ) )
80+
81+ vi . mock ( "@src/components/modals/Announcement" , ( ) => ( {
82+ default : function MockAnnouncement ( { hideAnnouncement } : { hideAnnouncement : ( ) => void } ) {
83+ // eslint-disable-next-line @typescript-eslint/no-require-imports
84+ const React = require ( "react" )
85+ return React . createElement (
86+ "div" ,
87+ { "data-testid" : "announcement-modal" } ,
88+ React . createElement ( "div" , null , "What's New" ) ,
89+ React . createElement ( "button" , { onClick : hideAnnouncement } , "Close" ) ,
90+ )
91+ } ,
92+ } ) )
93+
94+ // Mock i18n
95+ vi . mock ( "react-i18next" , ( ) => ( {
96+ useTranslation : ( ) => ( {
97+ t : ( key : string , options ?: any ) => {
98+ if ( key === "chat:versionIndicator.ariaLabel" && options ?. version ) {
99+ return `Version ${ options . version }
100+ }
101+ return key
102+ } ,
103+ } ) ,
104+ initReactI18next : {
105+ type : "3rdParty" ,
106+ init : ( ) => { } ,
107+ } ,
108+ Trans : ( { i18nKey, children } : { i18nKey : string ; children ?: React . ReactNode } ) => {
109+ return < > { children || i18nKey } </ >
110+ } ,
111+ } ) )
112+
64113interface ChatTextAreaProps {
65114 onSend : ( value : string ) => void
66115 inputValue ?: string
@@ -1068,3 +1117,69 @@ describe("ChatView - Focus Grabbing Tests", () => {
10681117 expect ( mockFocus ) . toHaveBeenCalledTimes ( FOCUS_CALLS_ON_INIT )
10691118 } )
10701119} )
1120+
1121+ describe ( "ChatView - Version Indicator Tests" , ( ) => {
1122+ beforeEach ( ( ) => vi . clearAllMocks ( ) )
1123+
1124+ it ( "displays version indicator button" , ( ) => {
1125+ const { getByLabelText } = renderChatView ( )
1126+
1127+ // First hydrate state
1128+ mockPostMessage ( {
1129+ clineMessages : [ ] ,
1130+ } )
1131+
1132+ // Check that version indicator is displayed
1133+ const versionButton = getByLabelText ( / v e r s i o n / i)
1134+ expect ( versionButton ) . toBeInTheDocument ( )
1135+ expect ( versionButton ) . toHaveTextContent ( / ^ v \d + \. \d + \. \d + / )
1136+ } )
1137+
1138+ it ( "opens announcement modal when version indicator is clicked" , ( ) => {
1139+ const { container } = renderChatView ( )
1140+
1141+ // First hydrate state
1142+ mockPostMessage ( {
1143+ clineMessages : [ ] ,
1144+ } )
1145+
1146+ // Find version indicator
1147+ const versionButton = container . querySelector ( 'button[aria-label*="version"]' ) as HTMLButtonElement
1148+ expect ( versionButton ) . toBeTruthy ( )
1149+
1150+ // Click should trigger modal - we'll just verify the button exists and is clickable
1151+ // The actual modal rendering is handled by the component state
1152+ expect ( versionButton . onclick ) . toBeDefined ( )
1153+ } )
1154+
1155+ it ( "version indicator has correct styling classes" , ( ) => {
1156+ const { getByTestId } = renderChatView ( )
1157+
1158+ // First hydrate state
1159+ mockPostMessage ( {
1160+ clineMessages : [ ] ,
1161+ } )
1162+
1163+ // Check styling classes - the VersionIndicator component receives className prop
1164+ const versionButton = getByTestId ( "version-indicator" )
1165+ expect ( versionButton ) . toBeInTheDocument ( )
1166+ // The className is passed as a prop to VersionIndicator
1167+ expect ( versionButton . className ) . toContain ( "absolute top-2 right-3 z-10" )
1168+ } )
1169+
1170+ it ( "version indicator has proper accessibility attributes" , ( ) => {
1171+ const { container } = renderChatView ( )
1172+
1173+ // First hydrate state
1174+ mockPostMessage ( {
1175+ clineMessages : [ ] ,
1176+ } )
1177+
1178+ // Check accessibility - find button by its content
1179+ const versionButton = container . querySelector ( 'button[aria-label*="version"]' )
1180+ expect ( versionButton ) . toBeTruthy ( )
1181+ expect ( versionButton ) . toHaveAttribute ( "aria-label" )
1182+ // The mock returns the key, so we check for that
1183+ expect ( versionButton ?. getAttribute ( "aria-label" ) ) . toBe ( "chat:versionIndicator.ariaLabel" )
1184+ } )
1185+ } )
0 commit comments