@@ -378,4 +378,300 @@ describe('SelectFilterPlugin', () => {
378378 userEvent . type ( screen . getByRole ( 'combobox' ) , 'new value' ) ;
379379 expect ( await screen . findByTitle ( 'new value' ) ) . toBeInTheDocument ( ) ;
380380 } ) ;
381+
382+ test ( 'preserves backend order when sortMetric is specified' , ( ) => {
383+ const testData = [
384+ { gender : 'zebra' } ,
385+ { gender : 'alpha' } ,
386+ { gender : 'beta' } ,
387+ ] ;
388+
389+ const testProps = {
390+ ...selectMultipleProps ,
391+ formData : {
392+ ...selectMultipleProps . formData ,
393+ sortMetric : 'count' ,
394+ sortAscending : true ,
395+ } ,
396+ queriesData : [
397+ {
398+ rowcount : 3 ,
399+ colnames : [ 'gender' ] ,
400+ coltypes : [ 1 ] ,
401+ data : testData ,
402+ applied_filters : [ { column : 'gender' } ] ,
403+ rejected_filters : [ ] ,
404+ } ,
405+ ] ,
406+ filterState : {
407+ value : [ ] ,
408+ label : '' ,
409+ excludeFilterValues : true ,
410+ } ,
411+ } ;
412+
413+ render (
414+ // @ts -ignore
415+ < SelectFilterPlugin
416+ // @ts -ignore
417+ { ...transformProps ( testProps ) }
418+ setDataMask = { jest . fn ( ) }
419+ showOverflow = { false }
420+ /> ,
421+ {
422+ useRedux : true ,
423+ initialState : {
424+ nativeFilters : {
425+ filters : {
426+ 'test-filter' : {
427+ name : 'Test Filter' ,
428+ } ,
429+ } ,
430+ } ,
431+ dataMask : {
432+ 'test-filter' : {
433+ extraFormData : { } ,
434+ filterState : {
435+ value : [ ] ,
436+ label : '' ,
437+ excludeFilterValues : true ,
438+ } ,
439+ } ,
440+ } ,
441+ } ,
442+ } ,
443+ ) ;
444+
445+ const filterSelect = screen . getAllByRole ( 'combobox' ) [ 0 ] ;
446+ userEvent . click ( filterSelect ) ;
447+
448+ // When sortMetric is specified, options should appear in the original data order
449+ // (zebra, alpha, beta) not alphabetically sorted
450+ const options = screen . getAllByRole ( 'option' ) ;
451+ expect ( options [ 0 ] ) . toHaveTextContent ( 'zebra' ) ;
452+ expect ( options [ 1 ] ) . toHaveTextContent ( 'alpha' ) ;
453+ expect ( options [ 2 ] ) . toHaveTextContent ( 'beta' ) ;
454+ } ) ;
455+
456+ test ( 'applies alphabetical sorting when sortMetric is not specified' , ( ) => {
457+ const testData = [
458+ { gender : 'zebra' } ,
459+ { gender : 'alpha' } ,
460+ { gender : 'beta' } ,
461+ ] ;
462+
463+ const testProps = {
464+ ...selectMultipleProps ,
465+ formData : {
466+ ...selectMultipleProps . formData ,
467+ sortMetric : undefined ,
468+ sortAscending : true ,
469+ } ,
470+ queriesData : [
471+ {
472+ rowcount : 3 ,
473+ colnames : [ 'gender' ] ,
474+ coltypes : [ 1 ] ,
475+ data : testData ,
476+ applied_filters : [ { column : 'gender' } ] ,
477+ rejected_filters : [ ] ,
478+ } ,
479+ ] ,
480+ filterState : {
481+ value : [ ] ,
482+ label : '' ,
483+ excludeFilterValues : true ,
484+ } ,
485+ } ;
486+
487+ render (
488+ // @ts -ignore
489+ < SelectFilterPlugin
490+ // @ts -ignore
491+ { ...transformProps ( testProps ) }
492+ setDataMask = { jest . fn ( ) }
493+ showOverflow = { false }
494+ /> ,
495+ {
496+ useRedux : true ,
497+ initialState : {
498+ nativeFilters : {
499+ filters : {
500+ 'test-filter' : {
501+ name : 'Test Filter' ,
502+ } ,
503+ } ,
504+ } ,
505+ dataMask : {
506+ 'test-filter' : {
507+ extraFormData : { } ,
508+ filterState : {
509+ value : [ ] ,
510+ label : '' ,
511+ excludeFilterValues : true ,
512+ } ,
513+ } ,
514+ } ,
515+ } ,
516+ } ,
517+ ) ;
518+
519+ const filterSelect = screen . getAllByRole ( 'combobox' ) [ 0 ] ;
520+ userEvent . click ( filterSelect ) ;
521+
522+ // When sortMetric is not specified, options should be sorted alphabetically
523+ // (alpha, beta, zebra)
524+ const options = screen . getAllByRole ( 'option' ) ;
525+ expect ( options [ 0 ] ) . toHaveTextContent ( 'alpha' ) ;
526+ expect ( options [ 1 ] ) . toHaveTextContent ( 'beta' ) ;
527+ expect ( options [ 2 ] ) . toHaveTextContent ( 'zebra' ) ;
528+ } ) ;
529+
530+ test ( 'applies descending alphabetical sorting when sortAscending is false and no sortMetric' , ( ) => {
531+ const testData = [
532+ { gender : 'zebra' } ,
533+ { gender : 'alpha' } ,
534+ { gender : 'beta' } ,
535+ ] ;
536+
537+ const testProps = {
538+ ...selectMultipleProps ,
539+ formData : {
540+ ...selectMultipleProps . formData ,
541+ sortMetric : undefined ,
542+ sortAscending : false ,
543+ } ,
544+ queriesData : [
545+ {
546+ rowcount : 3 ,
547+ colnames : [ 'gender' ] ,
548+ coltypes : [ 1 ] ,
549+ data : testData ,
550+ applied_filters : [ { column : 'gender' } ] ,
551+ rejected_filters : [ ] ,
552+ } ,
553+ ] ,
554+ filterState : {
555+ value : [ ] ,
556+ label : '' ,
557+ excludeFilterValues : true ,
558+ } ,
559+ } ;
560+
561+ render (
562+ // @ts -ignore
563+ < SelectFilterPlugin
564+ // @ts -ignore
565+ { ...transformProps ( testProps ) }
566+ setDataMask = { jest . fn ( ) }
567+ showOverflow = { false }
568+ /> ,
569+ {
570+ useRedux : true ,
571+ initialState : {
572+ nativeFilters : {
573+ filters : {
574+ 'test-filter' : {
575+ name : 'Test Filter' ,
576+ } ,
577+ } ,
578+ } ,
579+ dataMask : {
580+ 'test-filter' : {
581+ extraFormData : { } ,
582+ filterState : {
583+ value : [ ] ,
584+ label : '' ,
585+ excludeFilterValues : true ,
586+ } ,
587+ } ,
588+ } ,
589+ } ,
590+ } ,
591+ ) ;
592+
593+ const filterSelect = screen . getAllByRole ( 'combobox' ) [ 0 ] ;
594+ userEvent . click ( filterSelect ) ;
595+
596+ // When sortAscending is false and no sortMetric, options should be sorted
597+ // in descending alphabetical order (zebra, beta, alpha)
598+ const options = screen . getAllByRole ( 'option' ) ;
599+ expect ( options [ 0 ] ) . toHaveTextContent ( 'zebra' ) ;
600+ expect ( options [ 1 ] ) . toHaveTextContent ( 'beta' ) ;
601+ expect ( options [ 2 ] ) . toHaveTextContent ( 'alpha' ) ;
602+ } ) ;
603+
604+ test ( 'preserves backend order even when sortAscending is false and sortMetric is specified' , ( ) => {
605+ const testData = [
606+ { gender : 'zebra' } ,
607+ { gender : 'alpha' } ,
608+ { gender : 'beta' } ,
609+ ] ;
610+
611+ const testProps = {
612+ ...selectMultipleProps ,
613+ formData : {
614+ ...selectMultipleProps . formData ,
615+ sortMetric : 'count' ,
616+ sortAscending : false ,
617+ } ,
618+ queriesData : [
619+ {
620+ rowcount : 3 ,
621+ colnames : [ 'gender' ] ,
622+ coltypes : [ 1 ] ,
623+ data : testData ,
624+ applied_filters : [ { column : 'gender' } ] ,
625+ rejected_filters : [ ] ,
626+ } ,
627+ ] ,
628+ filterState : {
629+ value : [ ] ,
630+ label : '' ,
631+ excludeFilterValues : true ,
632+ } ,
633+ } ;
634+
635+ render (
636+ // @ts -ignore
637+ < SelectFilterPlugin
638+ // @ts -ignore
639+ { ...transformProps ( testProps ) }
640+ setDataMask = { jest . fn ( ) }
641+ showOverflow = { false }
642+ /> ,
643+ {
644+ useRedux : true ,
645+ initialState : {
646+ nativeFilters : {
647+ filters : {
648+ 'test-filter' : {
649+ name : 'Test Filter' ,
650+ } ,
651+ } ,
652+ } ,
653+ dataMask : {
654+ 'test-filter' : {
655+ extraFormData : { } ,
656+ filterState : {
657+ value : [ ] ,
658+ label : '' ,
659+ excludeFilterValues : true ,
660+ } ,
661+ } ,
662+ } ,
663+ } ,
664+ } ,
665+ ) ;
666+
667+ const filterSelect = screen . getAllByRole ( 'combobox' ) [ 0 ] ;
668+ userEvent . click ( filterSelect ) ;
669+
670+ // When sortMetric is specified, original order should be preserved regardless
671+ // of sortAscending value (zebra, alpha, beta)
672+ const options = screen . getAllByRole ( 'option' ) ;
673+ expect ( options [ 0 ] ) . toHaveTextContent ( 'zebra' ) ;
674+ expect ( options [ 1 ] ) . toHaveTextContent ( 'alpha' ) ;
675+ expect ( options [ 2 ] ) . toHaveTextContent ( 'beta' ) ;
676+ } ) ;
381677} ) ;
0 commit comments