@@ -29,6 +29,15 @@ const getListbox = () => {
29
29
return listbox ;
30
30
} ;
31
31
32
+ const getValue = ( ) => {
33
+ const value = document . getElementById ( "select-value" ) ;
34
+ if ( ! value ) {
35
+ throw new Error ( ) ;
36
+ }
37
+
38
+ return value as HTMLInputElement ;
39
+ } ;
40
+
32
41
describe ( "Select" , ( ) => {
33
42
it ( "should render correctly" , ( ) => {
34
43
const { container, rerender } = render ( < Select { ...PROPS } /> ) ;
@@ -255,4 +264,23 @@ describe("Select", () => {
255
264
fireEvent . keyDown ( listbox , { key : "Escape" } ) ;
256
265
expect ( document . activeElement ) . toBe ( select ) ;
257
266
} ) ;
267
+
268
+ it ( "should not allow the values to be changed when the readOnly prop is enabled" , ( ) => {
269
+ const onChange = jest . fn ( ) ;
270
+ const { getByRole } = render (
271
+ < Select { ...PROPS } label = "Label" readOnly onChange = { onChange } />
272
+ ) ;
273
+
274
+ const button = getByRole ( "button" , { name : "Label" } ) ;
275
+ const value = getValue ( ) ;
276
+ expect ( value . value ) . toBe ( "" ) ;
277
+
278
+ fireEvent . click ( button ) ;
279
+ const listbox = getByRole ( "listbox" , { name : "Label" } ) ;
280
+ expect ( document . activeElement ) . toBe ( listbox ) ;
281
+ fireEvent . click ( getByRole ( "option" , { name : "Option 1" } ) ) ;
282
+ expect ( onChange ) . not . toBeCalled ( ) ;
283
+
284
+ expect ( value . value ) . toBe ( "" ) ;
285
+ } ) ;
258
286
} ) ;
0 commit comments