Skip to content

Commit 5fe1955

Browse files
eschuthoclaude
andcommitted
test(filters): add comprehensive tests for sortMetric functionality
Adds test coverage for the sortMetric sorting behavior implemented in the SelectFilterPlugin component: - Tests that backend order is preserved when sortMetric is specified - Tests that alphabetical sorting is applied when no sortMetric is specified - Tests ascending and descending alphabetical sorting behavior - Tests that sortMetric takes precedence over sortAscending setting These tests ensure the fix for metric-based sorting works correctly across all scenarios while maintaining backwards compatibility with existing alphabetical sorting behavior. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
1 parent 4fa205a commit 5fe1955

1 file changed

Lines changed: 296 additions & 0 deletions

File tree

superset-frontend/src/filters/components/Select/SelectFilterPlugin.test.tsx

Lines changed: 296 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -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

Comments
 (0)