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 ? (
-