Merge branch 'main' into prepro_fix

website/src/components/Navigation/Navigation.astro

@@ -18,7 +18,7 @@ const isLoggedIn = Astro.locals.session?.isLoggedIn ?? false;
 const loginUrl = await getAuthUrl(Astro.url.toString());
 ---
 
-<div class='flex justify-end'>
+<div class='flex justify-end relative'>
     <div class='subtitle hidden sm:flex sm:z-6 gap-4'>
         {
             navigationItems
@@ -27,14 +27,14 @@ const loginUrl = await getAuthUrl(Astro.url.toString());
         }
     </div>
 
-    <div class='sm:hidden fixed z-0'>
-        <SandwichMenu
-            top={16}
-            right={28}
-            organism={selectedOrganism}
-            isLoggedIn={isLoggedIn}
-            loginUrl={loginUrl}
-            client:load
-        />
+    <div
+        class='sm:hidden z-0'
+        style={{
+            position: 'absolute',
+            right: '1.5rem',
+            top: '-2rem',
+        }}
+    >
+        <SandwichMenu organism={selectedOrganism} isLoggedIn={isLoggedIn} loginUrl={loginUrl} client:load />
     </div>
 </div>

website/src/components/Navigation/SandwichMenu.tsx

@@ -7,33 +7,35 @@ import { OffCanvasOverlay } from '../OffCanvasOverlay';
 import { SandwichIcon } from '../SandwichIcon';
 
 type SandwichMenuProps = {
-    top: number;
-    right: number;
     organism: Organism | undefined;
     isLoggedIn: boolean;
     loginUrl: string | undefined;
 };
 
-export const SandwichMenu: FC<SandwichMenuProps> = ({ top, right, organism, isLoggedIn, loginUrl }) => {
+export const SandwichMenu: FC<SandwichMenuProps> = ({ organism, isLoggedIn, loginUrl }) => {
     const { isOpen, toggle: toggleMenu, close: closeMenu } = useOffCanvas();
 
     return (
         <div className='relative'>
-            <button
-                className='fixed z-50 bg-transparent border-none cursor-pointer'
-                onClick={toggleMenu}
-                style={{ top: `${top}px`, right: `${right}px` }}
-            >
-                <SandwichIcon isOpen={isOpen} />
-            </button>
-
-            {isOpen && <OffCanvasOverlay onClick={closeMenu} />}
+            {!isOpen ? (
+                <button className='absolute z-50 bg-transparent border-none cursor-pointer' onClick={toggleMenu}>
+                    <SandwichIcon isOpen={isOpen} />
+                </button>
+            ) : (
+                <OffCanvasOverlay onClick={closeMenu} />
+            )}
 
             <div
                 className={`fixed top-0 right-0 bg-white w-64 min-h-screen flex flex-col offCanvasTransform ${
                     isOpen ? 'translate-x-0' : 'translate-x-full'
                 }`}
             >
+                <button
+                    className='absolute z-50 bg-transparent border-none cursor-pointer right-3 top-4'
+                    onClick={toggleMenu}
+                >
+                    <SandwichIcon isOpen={isOpen} />
+                </button>
                 <div className='font-bold p-5 flex flex-col justify-between min-h-screen max-h-screen overflow-y-auto'>
                     <div>
                         <div className='h-10'>

website/src/components/SearchPage/SearchForm.spec.tsx

@@ -0,0 +1,100 @@
+/* eslint-disable @typescript-eslint/explicit-member-accessibility */
+/* eslint-disable @typescript-eslint/no-empty-function */
+
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+
+import { SearchForm } from './SearchForm';
+import { testConfig, testOrganism } from '../../../vitest.setup.ts';
+import type { MetadataFilter } from '../../types/config.ts';
+import type { ReferenceGenomesSequenceNames } from '../../types/referencesGenomes.ts';
+
+global.ResizeObserver = class FakeResizeObserver {
+    observe() {}
+    disconnect() {}
+    unobserve() {}
+};
+
+const queryClient = new QueryClient();
+
+const defaultSearchFormFilters: MetadataFilter[] = [
+    {
+        name: 'field1',
+        type: 'string',
+        autocomplete: false,
+        label: 'Field 1',
+        initiallyVisible: true,
+    },
+    {
+        name: 'field3',
+        type: 'pango_lineage',
+        label: 'Field 3',
+        autocomplete: true,
+        initiallyVisible: true,
+    },
+];
+
+const defaultReferenceGenomesSequenceNames: ReferenceGenomesSequenceNames = {
+    nucleotideSequences: ['main'],
+    genes: ['gene1', 'gene2'],
+};
+
+const visibilities = new Map<string, boolean>([
+    ['field1', true],
+    ['field3', true],
+]);
+
+const setAFieldValue = vi.fn();
+const setAVisibility = vi.fn();
+
+const renderSearchForm = ({
+    consolidatedMetadataSchema = [...defaultSearchFormFilters],
+    fieldValues = {},
+    referenceGenomesSequenceNames = defaultReferenceGenomesSequenceNames,
+    lapisSearchParameters = {},
+} = {}) => {
+    const props = {
+        organism: testOrganism,
+        consolidatedMetadataSchema,
+        clientConfig: testConfig.public,
+        fieldValues,
+        setAFieldValue,
+        lapisUrl: 'http://lapis.dummy.url',
+        visibilities,
+        setAVisibility,
+        referenceGenomesSequenceNames,
+        lapisSearchParameters,
+    };
+
+    render(
+        <QueryClientProvider client={queryClient}>
+            <SearchForm {...props} />
+        </QueryClientProvider>,
+    );
+};
+
+describe('SearchForm', () => {
+    it('renders without crashing', () => {
+        renderSearchForm();
+        expect(screen.getByText('Field 1')).toBeInTheDocument();
+        expect(screen.getByText('Field 3')).toBeInTheDocument();
+    });
+
+    it('handles field value changes', async () => {
+        renderSearchForm();
+
+        const field1Input = await screen.findByLabelText('Field 1');
+        fireEvent.change(field1Input, { target: { value: '2023-01-01' } });
+
+        expect(setAFieldValue).toHaveBeenCalledWith('field1', '2023-01-01');
+    });
+
+    it('resets the form fields', () => {
+        renderSearchForm();
+
+        const resetButton = screen.getByText('Reset');
+        fireEvent.click(resetButton);
+        expect(window.location.href).toMatch(/\/$/);
+    });
+});