@@ -74,7 +74,7 @@ describe('FilterBar.cy.tsx', () => {
74
74
75
75
it ( 'Selection: FilterGroupItems in Dialog + events' , ( ) => {
76
76
const TestComp = ( props : Omit < FilterBarPropTypes , 'children' > ) => {
77
- const [ selectedFilters , setSelectedFilters ] = useState ( '' ) ;
77
+ const [ selectedFilters , setSelectedFilters ] = useState ( '0 1 2 ' ) ;
78
78
const [ closeTrigger , setCloseTrigger ] = useState ( '' ) ;
79
79
const [ savedVisibleFilters , setSavedVisibleFilters ] = useState ( '' ) ;
80
80
const {
@@ -217,24 +217,17 @@ describe('FilterBar.cy.tsx', () => {
217
217
}
218
218
219
219
const checkboxes = cy . get ( '[ui5-checkbox]' ) ;
220
- checkboxes . should ( 'have.length' , 4 ) ;
220
+ checkboxes . should ( 'have.length' , 3 ) ;
221
221
222
- let selected = '2' ;
223
- checkboxes . each ( ( item , index , arr ) => {
222
+ let selected = '0 1 2' ;
223
+ checkboxes . each ( ( item , cbIndex , arr ) => {
224
224
const wrappedItem = cy . wrap ( item ) ;
225
225
wrappedItem . should ( 'be.visible' ) ;
226
+ wrappedItem . realClick ( ) ;
226
227
227
- wrappedItem . click ( ) ;
228
-
229
- if ( index === 0 ) {
230
- // select-all: deselect all - only required is checked
231
- wrappedItem . should ( 'not.have.attr' , 'checked' ) ;
232
- cy . findByTestId ( 'selected' ) . should ( 'have.text' , selected ) ;
233
- const requiredItem = cy . wrap ( arr [ arr . length - 1 ] ) ;
234
- requiredItem . should ( 'have.attr' , 'checked' ) ;
235
- } else if ( index !== arr . length - 1 ) {
236
- wrappedItem . should ( 'have.attr' , 'checked' ) ;
237
- selected += ` ${ index - 1 } ` ;
228
+ if ( cbIndex !== arr . length - 1 ) {
229
+ wrappedItem . find ( '[role="checkbox"]' ) . should ( 'have.attr' , 'aria-checked' , 'false' ) ;
230
+ selected = selected . split ( ' ' ) . slice ( 1 ) . join ( ' ' ) ;
238
231
cy . findByTestId ( 'selected' ) . should ( 'have.text' , selected ) ;
239
232
} else {
240
233
// is sometimes not selected, seems to be related to the click target and cypress
@@ -243,7 +236,7 @@ describe('FilterBar.cy.tsx', () => {
243
236
}
244
237
} ) ;
245
238
246
- cy . get ( '@selectSpy' ) . should ( 'have.callCount' , 3 * ( index + 1 ) ) ;
239
+ cy . get ( '@selectSpy' ) . should ( 'have.callCount' , 2 * ( index + 1 ) ) ;
247
240
248
241
cy . findAllByText ( 'INPUT' ) . should ( 'have.length' , 2 ) ;
249
242
cy . findAllByText ( 'SWITCH' ) . should ( 'have.length' , 2 ) ;
@@ -261,7 +254,7 @@ describe('FilterBar.cy.tsx', () => {
261
254
cy . get ( '@saveSpy' ) . should ( 'have.callCount' , saveCallCount ) ;
262
255
saveCallCount ++ ;
263
256
cy . findByTestId ( 'close-trigger' ) . should ( 'have.text' , 'okButtonPressed' ) ;
264
- cy . findByTestId ( 'saved-filters' ) . should ( 'have.text' , '0 1 2' ) ;
257
+ cy . findByTestId ( 'saved-filters' ) . should ( 'have.text' , '2' ) ;
265
258
} else {
266
259
if ( action === 'Reset' ) {
267
260
cy . get ( '[data-component-name="FilterBarDialogResetMessageBox"]' ) . contains ( 'Cancel' ) . click ( ) ;
@@ -298,10 +291,10 @@ describe('FilterBar.cy.tsx', () => {
298
291
} ) ;
299
292
} ) ;
300
293
301
- it ( 'select-all without required ' , ( ) => {
294
+ it ( 'select/clear -all' , ( ) => {
302
295
const TestComp = ( props ) => {
303
- const [ selectedFilters , setSelectedFilters ] = useState ( '' ) ;
304
- const [ savedVisibleFilters , setSavedVisibleFilters ] = useState ( '' ) ;
296
+ const [ selectedFilters , setSelectedFilters ] = useState ( '0 1 2 3 ' ) ;
297
+ const [ savedVisibleFilters , setSavedVisibleFilters ] = useState ( '0 1 2 3 ' ) ;
305
298
306
299
const handleSelectionChange : FilterBarPropTypes [ 'onFiltersDialogSelectionChange' ] = ( e ) => {
307
300
setSelectedFilters ( Array . from ( e . selectedFilterKeys ) . join ( ' ' ) ) ;
@@ -312,20 +305,28 @@ describe('FilterBar.cy.tsx', () => {
312
305
return (
313
306
< >
314
307
< FilterBar { ...props } onFiltersDialogSelectionChange = { handleSelectionChange } onFiltersDialogSave = { handleSave } >
315
- < FilterGroupItem label = "INPUT" filterKey = "0" >
308
+ < FilterGroupItem label = "INPUT" filterKey = "0" hiddenInFilterBar = { ! savedVisibleFilters . includes ( '0' ) } >
316
309
< Input placeholder = "Placeholder" value = "123123" data-testid = "INPUT" />
317
310
</ FilterGroupItem >
318
- < FilterGroupItem label = "SWITCH" filterKey = "1" >
311
+ < FilterGroupItem label = "SWITCH" filterKey = "1" hiddenInFilterBar = { ! savedVisibleFilters . includes ( '1' ) } >
319
312
< Switch checked = { true } data-testid = "SWITCH" />
320
313
</ FilterGroupItem >
321
- < FilterGroupItem label = "SELECT" filterKey = "2" >
314
+ < FilterGroupItem label = "SELECT" filterKey = "2" hiddenInFilterBar = { ! savedVisibleFilters . includes ( '2' ) } >
322
315
< Select data-testid = "SELECT" >
323
316
< Option selected = { true } > Option 1</ Option >
324
317
< Option > Option 2</ Option >
325
318
< Option > Option 3</ Option >
326
319
< Option > Option 4</ Option >
327
320
</ Select >
328
321
</ FilterGroupItem >
322
+ < FilterGroupItem
323
+ label = "Required"
324
+ filterKey = "3"
325
+ hiddenInFilterBar = { ! savedVisibleFilters . includes ( '3' ) }
326
+ required
327
+ >
328
+ < Input placeholder = "Placeholder" value = "123123" data-testid = "INPUT" />
329
+ </ FilterGroupItem >
329
330
</ FilterBar >
330
331
< hr />
331
332
< span > Selected: </ span >
@@ -339,22 +340,28 @@ describe('FilterBar.cy.tsx', () => {
339
340
340
341
cy . mount ( < TestComp /> ) ;
341
342
342
- cy . findByTestId ( 'selected' , '0 1 2' ) ;
343
+ cy . findByTestId ( 'selected' ) . should ( 'have.text' , '0 1 2 3 ' ) ;
343
344
cy . get ( '[text="Filters"]' ) . click ( { force : true } ) ;
344
345
cy . get ( '[ui5-checkbox]' ) . first ( ) . click ( ) ;
345
- cy . findByTestId ( 'selected' , '' ) ;
346
+ cy . findByTestId ( 'selected' ) . should ( 'have.text' , '1 2 3 ' ) ;
346
347
cy . get ( '[ui5-checkbox]' ) . eq ( 1 ) . click ( ) ;
347
- cy . findByTestId ( 'selected' , '0 ' ) ;
348
+ cy . findByTestId ( 'selected' ) . should ( 'have.text' , '2 3 ' ) ;
348
349
cy . get ( '[ui5-checkbox]' ) . first ( ) . click ( ) ;
349
350
cy . get ( '[ui5-checkbox]' ) . first ( ) . click ( ) ;
350
351
351
352
cy . findByText ( 'OK' ) . click ( ) ;
352
- cy . findByTestId ( 'saved' , '' ) ;
353
+ cy . findByTestId ( 'saved' ) . should ( 'have.text' , '2 3 ' ) ;
353
354
354
355
cy . get ( '[text="Filters"]' ) . click ( { force : true } ) ;
355
356
cy . get ( '[ui5-checkbox]' ) . first ( ) . click ( ) ;
356
357
cy . findByText ( 'OK' ) . click ( ) ;
357
- cy . findByTestId ( 'saved' , '0 1 2' ) ;
358
+ cy . findByTestId ( 'saved' ) . should ( 'have.text' , '2 3 0' ) ;
359
+
360
+ cy . get ( '[text="Filters"]' ) . click ( { force : true } ) ;
361
+ cy . get ( '[name="clear-all"]' ) . click ( ) ;
362
+ cy . findByTestId ( 'selected' ) . should ( 'have.text' , '3' ) ;
363
+ cy . findByText ( 'OK' ) . click ( ) ;
364
+ cy . findByTestId ( 'saved' ) . should ( 'have.text' , '3' ) ;
358
365
} ) ;
359
366
360
367
// todo selection, group + list view
@@ -473,25 +480,10 @@ describe('FilterBar.cy.tsx', () => {
473
480
cy . get ( '[text="Filters"]' ) . click ( { force : true } ) ;
474
481
cy . get ( '[accessible-name="Group View"]' ) . click ( ) ;
475
482
476
- cy . get ( '[data-component-name="FilterBarDialogGroupTableHeaderRow"]' )
477
- . shadow ( )
478
- . find ( '[ui5-table-header-cell]' )
479
- . should ( 'have.css' , 'visibility' , 'hidden' ) ;
480
-
481
483
cy . get ( '[data-component-name="FilterBarDialogTable"][data-is-grouped]' )
482
484
. shadow ( )
483
485
. find ( '#no-data-row' )
484
486
. should ( 'have.css' , 'display' , 'none' ) ;
485
-
486
- cy . get ( '[data-component-name="FilterBarDialogTable"]' )
487
- . shadow ( )
488
- . find ( '#table' )
489
- . should ( 'have.css' , 'grid-template-columns' , '44px 436px 160px' ) ;
490
-
491
- cy . get ( '[data-component-name="FilterBarDialogPanelTable"]' )
492
- . shadow ( )
493
- . find ( '#table' )
494
- . should ( 'have.css' , 'grid-template-columns' , '44px 436px 160px' ) ;
495
487
} ) ;
496
488
497
489
it ( 'fire FilterBar events' , ( ) => {
0 commit comments