@@ -26,102 +26,147 @@ jest.mock('@apollo/client/react', () => ({
2626
2727// Mock heroui components
2828jest . mock ( '@heroui/react' , ( ) => ( {
29- Autocomplete : ( {
30- children,
31- inputValue,
32- _selectedKey,
33- onInputChange,
34- onSelectionChange,
35- isInvalid,
36- errorMessage,
37- isLoading,
38- label,
29+ ComboBox : Object . assign (
30+ ( {
31+ children,
32+ inputValue,
33+ onInputChange,
34+ onSelectionChange,
35+ isInvalid,
36+ className,
37+ } : {
38+ children ?: React . ReactNode
39+ inputValue ?: string
40+ onInputChange ?: ( value : string ) => void
41+ onSelectionChange ?: ( key : React . Key | null ) => void
42+ isInvalid ?: boolean
43+ className ?: string
44+ } ) => (
45+ < div data-testid = "autocomplete" >
46+ < input
47+ data-testid = "autocomplete-input"
48+ value = { inputValue || '' }
49+ onChange = { ( e ) => onInputChange ?.( e . target . value ) }
50+ />
51+ < div data-testid = "combobox-children" > { children } </ div >
52+ < button
53+ type = "button"
54+ data-testid = "autocomplete-select-item"
55+ onClick = { ( ) => onSelectionChange ?.( 'project-1' ) }
56+ >
57+ Select Project 1
58+ </ button >
59+ < button
60+ type = "button"
61+ data-testid = "autocomplete-select-all"
62+ onClick = { ( ) => onSelectionChange ?.( 'all' as any ) }
63+ >
64+ Select All
65+ </ button >
66+ < button
67+ type = "button"
68+ data-testid = "autocomplete-clear"
69+ onClick = { ( ) => {
70+ onInputChange ?.( '' )
71+ onSelectionChange ?.( null )
72+ } }
73+ >
74+ Clear Selection
75+ </ button >
76+ < button
77+ type = "button"
78+ data-testid = "autocomplete-select-single"
79+ onClick = { ( ) => onSelectionChange ?.( 'project-1' ) }
80+ >
81+ Select Single Key
82+ </ button >
83+ </ div >
84+ ) ,
85+ {
86+ InputGroup : ( { children } : { children ?: React . ReactNode } ) => (
87+ < div data-testid = "combobox-input-group" > { children } </ div >
88+ ) ,
89+ Popover : ( { children } : { children ?: React . ReactNode } ) => (
90+ < div data-testid = "combobox-popover" > { children } </ div >
91+ ) ,
92+ Trigger : ( ) => < button data-testid = "combobox-trigger" /> ,
93+ }
94+ ) ,
95+ Input : ( {
3996 id,
97+ placeholder,
98+ className,
99+ onChange,
40100 } : {
41- children : React . ReactNode
42- inputValue ?: string
43- _selectedKey ?: string | null
44- onInputChange ?: ( value : string ) => void
45- onSelectionChange ?: ( key : React . Key | Set < React . Key > | 'all' ) => void
46- isInvalid ?: boolean
47- errorMessage ?: string
48- isLoading ?: boolean
49- label ?: string
50101 id ?: string
51- } ) => (
52- < div data-testid = "autocomplete" >
53- < label htmlFor = { id } > { label } </ label >
54- < input
55- id = { id }
56- data-testid = "autocomplete-input"
57- value = { inputValue || '' }
58- data-selected-key = { _selectedKey ?? '' }
59- onChange = { ( e ) => onInputChange ?.( e . target . value ) }
60- data-loading = { isLoading }
61- data-invalid = { isInvalid }
62- />
63- { errorMessage && < span data-testid = "autocomplete-error" > { errorMessage } </ span > }
64- < div data-testid = "autocomplete-items" > { children } </ div >
65- < button
66- type = "button"
67- data-testid = "autocomplete-select-item"
68- onClick = { ( ) => onSelectionChange ?.( new Set ( [ 'project-1' ] ) ) }
69- >
70- Select Project 1
71- </ button >
72- < button
73- type = "button"
74- data-testid = "autocomplete-select-all"
75- onClick = { ( ) => onSelectionChange ?.( 'all' ) }
76- >
77- Select All
78- </ button >
79- < button
80- type = "button"
81- data-testid = "autocomplete-clear"
82- onClick = { ( ) => {
83- onInputChange ?.( '' )
84- onSelectionChange ?.( null )
85- } }
86- >
87- Clear Selection
88- </ button >
89- < button
90- type = "button"
91- data-testid = "autocomplete-select-single"
92- onClick = { ( ) => onSelectionChange ?.( 'project-1' ) }
93- >
94- Select Single Key
95- </ button >
96- </ div >
97- ) ,
98- AutocompleteItem : ( {
102+ placeholder ?: string
103+ className ?: string
104+ onChange ?: React . ChangeEventHandler < HTMLInputElement >
105+ } ) => < input id = { id } placeholder = { placeholder } className = { className } onChange = { onChange } /> ,
106+ Label : ( {
99107 children,
100- textValue,
108+ htmlFor,
109+ className,
101110 } : {
102- children : React . ReactNode
103- textValue ?: string
111+ children ?: React . ReactNode
112+ htmlFor ?: string
113+ className ?: string
104114 } ) => (
105- < div data-testid = "autocomplete-item" data-text-value = { textValue } >
115+ < label htmlFor = { htmlFor } className = { className } >
106116 { children }
107- </ div >
117+ </ label >
108118 ) ,
109- Switch : ( {
110- isSelected,
111- onValueChange,
112- 'aria-label' : ariaLabel ,
113- } : {
114- isSelected ?: boolean
115- onValueChange ?: ( value : boolean ) => void
116- 'aria-label' ?: string
117- } ) => (
118- < input
119- type = "checkbox"
120- role = "switch"
121- aria-label = { ariaLabel }
122- checked = { ! ! isSelected }
123- onChange = { ( e ) => onValueChange ?.( e . target . checked ) }
124- />
119+ ListBox : Object . assign (
120+ ( { children } : { children ?: React . ReactNode } ) => (
121+ < div data-testid = "autocomplete-items" > { children } </ div >
122+ ) ,
123+ {
124+ Item : ( {
125+ children,
126+ id,
127+ textValue,
128+ } : {
129+ children ?: React . ReactNode
130+ id ?: string
131+ textValue ?: string
132+ } ) => (
133+ < div data-testid = "autocomplete-item" data-id = { id } data-text-value = { textValue } >
134+ { children }
135+ </ div >
136+ ) ,
137+ }
138+ ) ,
139+ FieldError : ( { children } : { children ?: React . ReactNode } ) => (
140+ < span data-testid = "autocomplete-error" > { children } </ span >
141+ ) ,
142+ Switch : Object . assign (
143+ ( {
144+ isSelected,
145+ onChange,
146+ 'aria-label' : ariaLabel ,
147+ children,
148+ } : {
149+ isSelected ?: boolean
150+ onChange ?: ( value : boolean ) => void
151+ 'aria-label' ?: string
152+ children ?: React . ReactNode
153+ } ) => (
154+ < div >
155+ < input
156+ type = "checkbox"
157+ role = "switch"
158+ aria-label = { ariaLabel }
159+ checked = { ! ! isSelected }
160+ onChange = { ( e ) => onChange ?.( e . target . checked ) }
161+ />
162+ { children }
163+ </ div >
164+ ) ,
165+ {
166+ Content : ( { children } : { children ?: React . ReactNode } ) => < div > { children } </ div > ,
167+ Control : ( { children } : { children ?: React . ReactNode } ) => < div > { children } </ div > ,
168+ Thumb : ( ) => < span /> ,
169+ }
125170 ) ,
126171} ) )
127172
0 commit comments