diff --git a/website/src/components/common/ActiveFilters.spec.tsx b/website/src/components/common/ActiveFilters.spec.tsx index 3435acfe7..f6c30d685 100644 --- a/website/src/components/common/ActiveFilters.spec.tsx +++ b/website/src/components/common/ActiveFilters.spec.tsx @@ -1,10 +1,10 @@ -import { render, screen } from '@testing-library/react'; -import { describe, expect, it } from 'vitest'; +import { fireEvent, render, screen } from '@testing-library/react'; +import { beforeEach, describe, expect, it, vi } from 'vitest'; import { ActiveFilters } from './ActiveFilters'; import { FieldFilter, SelectFilter } from '../SearchPage/DownloadDialog/SequenceFilters'; -describe('ActiveDownloadFilters', () => { +describe('ActiveFilters', () => { describe('with LAPIS filters', () => { it('renders empty filters as null', () => { const { container } = render(); @@ -17,11 +17,31 @@ describe('ActiveDownloadFilters', () => { sequenceFilter={new FieldFilter({ field1: 'value1', nucleotideMutations: 'A123T,G234C' }, {}, [])} />, ); - expect(screen.queryByText(/Active filters/)).toBeInTheDocument(); expect(screen.queryByText('field1:')).toBeInTheDocument(); expect(screen.getByText('value1')).toBeInTheDocument(); expect(screen.queryByText(/A123T,G234C/)).toBeInTheDocument(); }); + + const mockRemoveFilter = vi.fn(); + beforeEach(() => { + mockRemoveFilter.mockReset(); + }); + + it('remove button is there and handles removal correctly', () => { + render( + , + ); + + const field1Text = screen.getByText('field1:'); + const removeButton = field1Text.closest('div')!.querySelector('button'); + expect(removeButton).toBeInTheDocument(); + fireEvent.click(removeButton!); + + expect(mockRemoveFilter).toHaveBeenCalledWith('field1'); + }); }); describe('with selected sequences', () => { @@ -32,21 +52,18 @@ describe('ActiveDownloadFilters', () => { it('renders a single selected sequence correctly', () => { render(); - expect(screen.queryByText(/Active filters/)).toBeInTheDocument(); expect(screen.getByText('single sequence:')).toBeInTheDocument(); expect(screen.getByText('SEQID1')).toBeInTheDocument(); }); it('renders a two selected sequences correctly', () => { render(); - expect(screen.queryByText(/Active filters/)).toBeInTheDocument(); expect(screen.getByText('sequences selected:')).toBeInTheDocument(); expect(screen.getByText('SEQID1, SEQID2')).toBeInTheDocument(); }); it('renders a three selected sequences correctly', () => { render(); - expect(screen.queryByText(/Active filters/)).toBeInTheDocument(); expect(screen.getByText('sequences selected:')).toBeInTheDocument(); expect(screen.getByText('3')).toBeInTheDocument(); }); diff --git a/website/src/components/common/ActiveFilters.tsx b/website/src/components/common/ActiveFilters.tsx index 93decd07f..e4aa92f57 100644 --- a/website/src/components/common/ActiveFilters.tsx +++ b/website/src/components/common/ActiveFilters.tsx @@ -21,7 +21,11 @@ export const ActiveFilters: FC = ({ sequenceFilter, removeFi {label}: {value} {showXButton ? ( -