@@ -294,4 +294,76 @@ describe("ComboBox", () => {
294294 await user . keyboard ( "{Escape}" ) ;
295295 expect ( dropdown ) . not . toBeVisible ( ) ;
296296 } ) ;
297+
298+ it ( "should use custom shouldFilterItem function" , async ( ) => {
299+ render ( ComboBoxCustom , {
300+ props : {
301+ items : [
302+ { id : "1" , text : "Apple" } ,
303+ { id : "2" , text : "Banana" } ,
304+ { id : "3" , text : "Cherry" } ,
305+ ] ,
306+ shouldFilterItem : ( item : { text : string } , value : string ) =>
307+ item . text . startsWith ( value ) ,
308+ } ,
309+ } ) ;
310+ const input = screen . getByRole ( "textbox" ) ;
311+ await user . click ( input ) ;
312+ await user . type ( input , "B" ) ;
313+ const options = screen . getAllByRole ( "option" ) ;
314+ expect ( options ) . toHaveLength ( 1 ) ;
315+ expect ( options [ 0 ] ) . toHaveTextContent ( "Banana" ) ;
316+ } ) ;
317+
318+ it ( "should use custom itemToString function" , async ( ) => {
319+ render ( ComboBoxCustom , {
320+ props : {
321+ items : [
322+ { id : "1" , text : "Apple" } ,
323+ { id : "2" , text : "Banana" } ,
324+ ] ,
325+ itemToString : ( item : { text : string } ) => `Item ${ item . text } ` ,
326+ } ,
327+ } ) ;
328+ const input = screen . getByRole ( "textbox" ) ;
329+ await user . click ( input ) ;
330+ const options = screen . getAllByRole ( "option" ) ;
331+ expect ( options [ 0 ] ) . toHaveTextContent ( "Item Apple" ) ;
332+ await user . click ( options [ 1 ] ) ;
333+ expect ( input ) . toHaveValue ( "Item Banana" ) ;
334+ } ) ;
335+
336+ it ( "should open menu if open prop is true on mount" , ( ) => {
337+ render ( ComboBox , { props : { open : true } } ) ;
338+ const dropdown = screen . getAllByRole ( "listbox" ) [ 1 ] ;
339+ expect ( dropdown ) . toBeVisible ( ) ;
340+ } ) ;
341+
342+ it ( "should skip disabled items during keyboard navigation" , async ( ) => {
343+ render ( ComboBoxCustom , {
344+ props : {
345+ items : [
346+ { id : "1" , text : "A" } ,
347+ { id : "2" , text : "B" , disabled : true } ,
348+ { id : "3" , text : "C" } ,
349+ ] ,
350+ } ,
351+ } ) ;
352+ const input = screen . getByRole ( "textbox" ) ;
353+ await user . click ( input ) ;
354+ await user . keyboard ( "{ArrowDown}" ) ; // should highlight A
355+ await user . keyboard ( "{ArrowDown}" ) ; // should skip B and highlight C
356+ await user . keyboard ( "{Enter}" ) ;
357+ expect ( input ) . toHaveValue ( "C" ) ;
358+ } ) ;
359+
360+ it ( "should not show helper text if warn is true" , ( ) => {
361+ render ( ComboBox , { props : { helperText : "Help" , warn : true } } ) ;
362+ expect ( screen . queryByText ( "Help" ) ) . not . toBeInTheDocument ( ) ;
363+ } ) ;
364+
365+ it ( "should not show helper text if invalid is true" , ( ) => {
366+ render ( ComboBox , { props : { helperText : "Help" , invalid : true } } ) ;
367+ expect ( screen . queryByText ( "Help" ) ) . not . toBeInTheDocument ( ) ;
368+ } ) ;
297369} ) ;
0 commit comments