From 320b6328a7c1d2ae31afe6d68126e376332d2b1c Mon Sep 17 00:00:00 2001
From: Felix Hennig <mail@felixhennig.com>
Date: Fri, 28 Feb 2025 12:53:49 +0000
Subject: [PATCH] fixed tests and added new test

---
 .../components/common/ActiveFilters.spec.tsx  | 31 ++++++++++++++-----
 .../src/components/common/ActiveFilters.tsx   |  6 +++-
 2 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/website/src/components/common/ActiveFilters.spec.tsx b/website/src/components/common/ActiveFilters.spec.tsx
index 3435acfe76..f6c30d685e 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(<ActiveFilters sequenceFilter={new FieldFilter({}, {}, [])} />);
@@ -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(
+                <ActiveFilters
+                    sequenceFilter={new FieldFilter({ field1: 'value1', nucleotideMutations: 'A123T,G234C' }, {}, [])}
+                    removeFilter={mockRemoveFilter}
+                />,
+            );
+
+            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(<ActiveFilters sequenceFilter={new SelectFilter(new Set(['SEQID1']))} />);
-            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(<ActiveFilters sequenceFilter={new SelectFilter(new Set(['SEQID1', 'SEQID2']))} />);
-            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(<ActiveFilters sequenceFilter={new SelectFilter(new Set(['SEQID1', 'SEQID2', 'SEQID3']))} />);
-            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 93decd07f2..e4aa92f574 100644
--- a/website/src/components/common/ActiveFilters.tsx
+++ b/website/src/components/common/ActiveFilters.tsx
@@ -21,7 +21,11 @@ export const ActiveFilters: FC<ActiveFiltersProps> = ({ sequenceFilter, removeFi
                     <span className='text-primary-900 font-light pr-1'>{label}:</span>
                     <span className='text-primary-900 font-semibold'>{value}</span>
                     {showXButton ? (
-                        <button className='inline ml-2 mt-0.5 pr-2' onClick={() => removeFilter(key)}>
+                        <button
+                            aria-label='remove filter'
+                            className='inline ml-2 mt-0.5 pr-2'
+                            onClick={() => removeFilter(key)}
+                        >
                             <svg className='w-3 h-4 text-primary-600' fill='currentColor' viewBox='0 0 20 20'>
                                 <path
                                     fillRule='evenodd'