feat(e2e): deflake, throw on console error, all-browser workflow disp…

…atch, hydration bug workaround (#1881) - Superficially fix a hydration bug (#1888) having impact on dummy-organism (when displayName is not set for grouped metadata search fields) - Deflake seqSet tests by disabling buttons when server side rendered (and adding TestID only on hydration) - Make E2E throw in the future when we have hydration errors: so we spot them soon and fix them - Allow running E2E tests in all browsers on request using workflow dispatch - Fix shas in docker image build workflows
loculus-project · May 13, 2024 · 618ceff · 618ceff
1 parent 2589319
commit 618ceff
Show file tree

Hide file tree

Showing 24 changed files with 180 additions and 89 deletions.
diff --git a/.github/workflows/backend-image.yml b/.github/workflows/backend-image.yml
@@ -24,6 +24,7 @@ env:
   DOCKER_IMAGE_NAME: ghcr.io/loculus-project/backend
   BRANCH_NAME: ${{ github.head_ref || github.ref_name }}
   BUILD_ARM: ${{ github.event.inputs.build_arm || inputs.build_arm || github.ref == 'refs/heads/main' }}
+  sha: ${{ github.event.pull_request.head.sha || github.sha }}
 
 concurrency:
   group: ci-${{ github.ref == 'refs/heads/main' && github.run_id || github.ref }}-backend
@@ -41,6 +42,8 @@ jobs:
       contents: read
       checks: read
     steps:
+      - name: Shorten sha
+        run: echo "sha=${sha::7}" >> $GITHUB_ENV
       - uses: actions/checkout@v4
 
       - name: Generate files hash
@@ -58,7 +61,7 @@ jobs:
             type=raw,value=${{ env.DIR_HASH }}
             type=raw,value=latest,enable=${{ github.ref == 'refs/heads/main' }}
             type=ref,event=branch
-            type=sha,prefix=commit-
+            type=raw,value=commit-${{ env.sha }}
             type=raw,value=${{ env.BRANCH_NAME }}-arm,enable=${{ env.BUILD_ARM }}
       - name: Login to GitHub Container Registry
         uses: docker/login-action@v3

diff --git a/.github/workflows/config-preprocessor-image.yml b/.github/workflows/config-preprocessor-image.yml
@@ -24,6 +24,7 @@ env:
   DOCKER_IMAGE_NAME: ghcr.io/loculus-project/config-processor
   BRANCH_NAME: ${{ github.head_ref || github.ref_name }}
   BUILD_ARM: ${{ github.event.inputs.build_arm || inputs.build_arm || github.ref == 'refs/heads/main' }}
+  sha: ${{ github.event.pull_request.head.sha || github.sha }}
 
 defaults:
   run:
@@ -44,6 +45,8 @@ jobs:
       checks: read
     steps:
       - uses: actions/checkout@v4
+      - name: Shorten sha
+        run: echo "sha=${sha::7}" >> $GITHUB_ENV
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v3
       - name: Login to GitHub Container Registry
@@ -60,7 +63,7 @@ jobs:
           tags: |
             type=ref,event=branch
             type=raw,value=latest,enable=${{ github.ref == 'refs/heads/main' }}
-            type=sha,prefix=commit-
+            type=raw,value=commit-${{ env.sha }}
             type=raw,value=${{ env.BRANCH_NAME }}-arm,enable=${{ env.BUILD_ARM }}
       - name: Build and push image
         uses: docker/build-push-action@v5

diff --git a/.github/workflows/e2e-k3d.yml b/.github/workflows/e2e-k3d.yml
@@ -2,6 +2,12 @@ name: E2E test (on kubernetes)
 
 on:
   workflow_dispatch:
+    inputs:
+      all_browsers:
+        description: "Run tests on all browsers"
+        required: false
+        default: false
+        type: boolean
   pull_request:
     paths:
       - "backend/**"
@@ -31,9 +37,12 @@ jobs:
     timeout-minutes: 30
 
     env:
-      ALL_BROWSERS: ${{ github.ref == 'refs/heads/main' && 'true' || 'false' }}
+      ALL_BROWSERS: ${{ github.ref == 'refs/heads/main' || github.event.inputs.all_browsers && 'true' || 'false' }}
+      sha: ${{ github.event.pull_request.head.sha || github.sha }}
 
     steps:
+      - name: Shorten sha
+        run: echo "sha=${sha::7}" >> $GITHUB_ENV
       - name: Collect Workflow Telemetry
         uses: catchpoint/workflow-telemetry-action@v2
 
@@ -53,7 +62,7 @@ jobs:
       - name: Template with helm
         uses: WyriHaximus/github-action-helm3@v4
         with:
-          exec: ./deploy.py --verbose helm --branch ${{ github.ref_name }} --sha ${{ github.sha }}  --for-e2e --template > /tmp/helm_template.yaml
+          exec: ./deploy.py --verbose helm --branch ${{ github.ref_name }} --sha ${{ env.sha }} --for-e2e --template > /tmp/helm_template.yaml
 
       - name: Upload default helm template
         uses: actions/upload-artifact@v4
@@ -62,7 +71,7 @@ jobs:
           path: /tmp/helm_template.yaml
       - name: Deploy with helm
         run: |
-          ./deploy.py --verbose helm --branch ${{ github.ref_name }} --sha ${{ github.sha }} --for-e2e
+          ./deploy.py --verbose helm --branch ${{ github.ref_name }} --sha ${{ env.sha }} --for-e2e
 
       - uses: actions/setup-node@v4
         with:

diff --git a/.github/workflows/ingest-image.yml b/.github/workflows/ingest-image.yml
@@ -23,6 +23,7 @@ env:
   DOCKER_IMAGE_NAME: ghcr.io/loculus-project/ingest
   BRANCH_NAME: ${{ github.head_ref || github.ref_name }}
   BUILD_ARM: ${{ github.event.inputs.build_arm || inputs.build_arm || github.ref == 'refs/heads/main' }}
+  sha: ${{ github.event.pull_request.head.sha || github.sha }}
 
 concurrency:
   group: ci-${{ github.ref == 'refs/heads/main' && github.run_id || github.ref }}-ingest-${{github.event.inputs.build_arm}}
@@ -38,6 +39,8 @@ jobs:
       packages: write
       checks: read
     steps:
+      - name: Shorten sha
+        run: echo "sha=${sha::7}" >> $GITHUB_ENV
       - uses: actions/checkout@v4
 
       - name: Generate files hash
@@ -55,7 +58,7 @@ jobs:
             type=raw,value=${{ env.DIR_HASH }}
             type=raw,value=latest,enable=${{ github.ref == 'refs/heads/main' }}
             type=ref,event=branch
-            type=sha,prefix=commit-
+            type=raw,value=commit-${{ env.sha }}
             type=raw,value=${{ env.BRANCH_NAME }}-arm,enable=${{ env.BUILD_ARM }}
 
       - name: Login to GitHub Container Registry

diff --git a/.github/workflows/keycloakify-image.yml b/.github/workflows/keycloakify-image.yml
@@ -23,6 +23,7 @@ env:
   DOCKER_IMAGE_NAME: ghcr.io/loculus-project/keycloakify
   BRANCH_NAME: ${{ github.head_ref || github.ref_name }}
   BUILD_ARM: ${{ github.event.inputs.build_arm || inputs.build_arm || github.ref == 'refs/heads/main' }}
+  sha: ${{ github.event.pull_request.head.sha || github.sha }}
 
 concurrency:
   group: ci-${{ github.ref == 'refs/heads/main' && github.run_id || github.ref }}-keycloak-buil-${{github.event.inputs.build_arm}}d
@@ -38,6 +39,8 @@ jobs:
       packages: write
       checks: read
     steps:
+      - name: Shorten sha
+        run: echo "sha=${sha::7}" >> $GITHUB_ENV
       - uses: actions/checkout@v4
       - name: Login to GitHub Container Registry
         uses: docker/login-action@v3
@@ -59,7 +62,7 @@ jobs:
             type=raw,value=${{ env.DIR_HASH }}
             type=raw,value=latest,enable=${{ github.ref == 'refs/heads/main' }}
             type=ref,event=branch
-            type=sha,prefix=commit-
+            type=raw,value=commit-${{ env.sha }}
             type=raw,value=${{ env.BRANCH_NAME }}-arm,enable=${{ env.BUILD_ARM }}
       - name: Check if image exists
         id: check-image

diff --git a/.github/workflows/preprocessing-dummy-image.yml b/.github/workflows/preprocessing-dummy-image.yml
@@ -24,6 +24,7 @@ env:
   DOCKER_IMAGE_NAME: ghcr.io/loculus-project/preprocessing-dummy
   BRANCH_NAME: ${{ github.head_ref || github.ref_name }}
   BUILD_ARM: ${{ github.event.inputs.build_arm || inputs.build_arm || github.ref == 'refs/heads/main' }}
+  sha: ${{ github.event.pull_request.head.sha || github.sha }}
 
 concurrency:
   group: ci-${{ github.ref == 'refs/heads/main' && github.run_id || github.ref }}-preprocessing-dumm-${{github.event.inputs.build_arm}}y
@@ -38,6 +39,8 @@ jobs:
       contents: read
       packages: write
     steps:
+      - name: Shorten sha
+        run: echo "sha=${sha::7}" >> $GITHUB_ENV
       - uses: actions/checkout@v4
 
       - name: Generate files hash
@@ -55,7 +58,7 @@ jobs:
             type=raw,value=${{ env.DIR_HASH }}
             type=raw,value=latest,enable=${{ github.ref == 'refs/heads/main' }}
             type=ref,event=branch
-            type=sha,prefix=commit-
+            type=raw,value=commit-${{ env.sha }}
             type=raw,value=${{ env.BRANCH_NAME }}-arm,enable=${{ env.BUILD_ARM }}
 
       - name: Login to GitHub Container Registry

diff --git a/.github/workflows/preprocessing-nextclade-image.yml b/.github/workflows/preprocessing-nextclade-image.yml
@@ -24,6 +24,7 @@ env:
   DOCKER_IMAGE_NAME: ghcr.io/loculus-project/preprocessing-nextclade
   BRANCH_NAME: ${{ github.head_ref || github.ref_name }}
   BUILD_ARM: ${{ github.event.inputs.build_arm || inputs.build_arm || github.ref == 'refs/heads/main' }}
+  sha: ${{ github.event.pull_request.head.sha || github.sha }}
 
 concurrency:
   group: ci-${{ github.ref == 'refs/heads/main' && github.run_id || github.ref }}-preprocessing-nextclade-${{github.event.inputs.build_arm}}
@@ -39,6 +40,8 @@ jobs:
       packages: write
       checks: read
     steps:
+      - name: Shorten sha
+        run: echo "sha=${sha::7}" >> $GITHUB_ENV
       - uses: actions/checkout@v4
 
       - name: Generate files hash
@@ -56,7 +59,7 @@ jobs:
             type=raw,value=${{ env.DIR_HASH }}
             type=raw,value=latest,enable=${{ github.ref == 'refs/heads/main' }}
             type=ref,event=branch
-            type=sha,prefix=commit-
+            type=raw,value=commit-${{ env.sha }}
             type=raw,value=${{ env.BRANCH_NAME }}-arm,enable=${{ env.BUILD_ARM }}
 
       - name: Login to GitHub Container Registry

diff --git a/.github/workflows/website-image.yml b/.github/workflows/website-image.yml
@@ -1,4 +1,4 @@
-name: website
+name: website-image
 
 on:
   pull_request:
@@ -23,6 +23,7 @@ env:
   DOCKER_IMAGE_NAME: ghcr.io/loculus-project/website
   BRANCH_NAME: ${{ github.head_ref || github.ref_name }}
   BUILD_ARM: ${{ github.event.inputs.build_arm || inputs.build_arm || github.ref == 'refs/heads/main' }}
+  sha: ${{ github.event.pull_request.head.sha || github.sha }}
 
 concurrency:
   group: ci-${{ github.ref == 'refs/heads/main' && github.run_id || github.ref }}-website-${{github.event.inputs.build_arm}}
@@ -38,6 +39,9 @@ jobs:
       packages: write
       checks: read
     steps:
+      - name: Shorten sha
+        run: echo "sha=${sha::7}" >> $GITHUB_ENV
+
       - uses: actions/checkout@v4
 
       - name: Generate files hash
@@ -55,7 +59,7 @@ jobs:
             type=raw,value=${{ env.DIR_HASH }}
             type=raw,value=latest,enable=${{ github.ref == 'refs/heads/main' }}
             type=ref,event=branch
-            type=sha,prefix=commit-
+            type=raw,value=commit-${{ env.sha }}
             type=raw,value=${{ env.BRANCH_NAME }}-arm,enable=${{ env.BUILD_ARM }}
 
       - name: Login to GitHub Container Registry

diff --git a/website/src/components/SearchPage/SearchForm.spec.tsx b/website/src/components/SearchPage/SearchForm.spec.tsx
@@ -3,7 +3,7 @@ import { render, screen, act } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { beforeEach, describe, expect, test, vi } from 'vitest';
 
-import { SearchForm } from './SearchForm';
+import { SearchForm, searchButtonText } from './SearchForm';
 import { testConfig, testOrganism } from '../../../vitest.setup.ts';
 import { routes, SEARCH } from '../../routes/routes.ts';
 import type { MetadataFilter } from '../../types/config.ts';
@@ -20,8 +20,6 @@ global.ResizeObserver = class FakeResizeObserver {
     unobserve() {}
 };
 
-const searchButtonText = 'Search sequences';
-
 vi.mock('../../config', () => ({
     fetchAutoCompletion: vi.fn().mockResolvedValue([]),
     getLapisUrl: vi.fn().mockReturnValue('lapis.dummy.url'),
@@ -173,7 +171,7 @@ describe('SearchForm', () => {
 
         await userEvent.type(dateField, '2025');
 
-        await userEvent.click(screen.getByRole('button', { name: 'Search sequences' }));
+        await userEvent.click(screen.getByRole('button', { name: searchButtonText }));
 
         expect(window.location.href).toContain(`${dateFieldName}=2025-01-25`);
     });

diff --git a/website/src/components/SearchPage/SearchForm.tsx b/website/src/components/SearchPage/SearchForm.tsx
@@ -1,7 +1,7 @@
 import CircularProgress from '@mui/material/CircularProgress';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { sentenceCase } from 'change-case';
-import { type FC, type FormEventHandler, useMemo, useState, useCallback } from 'react';
+import { type FC, type FormEventHandler, useMemo, useState, useCallback, useEffect } from 'react';
 
 import { CustomizeModal } from './CustomizeModal.tsx';
 import { AccessionField } from './fields/AccessionField.tsx';
@@ -61,6 +61,10 @@ export const SearchForm: FC<SearchFormProps> = ({
     const [isLoading, setIsLoading] = useState(false);
     const { isOpen: isMobileOpen, close: closeOnMobile, toggle: toggleMobileOpen } = useOffCanvas();
     const [isCustomizeModalOpen, setIsCustomizeModalOpen] = useState(false);
+    const [isClient, setIsClient] = useState(false);
+    useEffect(() => {
+        setIsClient(true);
+    }, []);
 
     const handleFieldChange = useCallback(
         (metadataName: string, filter: string) => {
@@ -123,9 +127,7 @@ export const SearchForm: FC<SearchFormProps> = ({
                 if (field.grouped === true) {
                     return (
                         <div key={field.name} className='flex flex-col border p-3 mb-3 rounded-md border-gray-300'>
-                            <h3 className='text-gray-500 text-sm mb-1'>
-                                {field.displayName !== undefined ? field.displayName : field.label}
-                            </h3>
+                            <h3 className='text-gray-500 text-sm mb-1'>{field.displayName}</h3>
 
                             {field.groupedFields.map((groupedField) => (
                                 <SearchField
@@ -234,7 +236,7 @@ export const SearchForm: FC<SearchFormProps> = ({
                                 style={{ background: 'linear-gradient(to bottom, transparent, white)' }}
                             />
                             <div className='bg-white pb-2 pt-1.5'>
-                                <SearchButton isLoading={isLoading} />
+                                <SearchButton isLoading={isLoading} isClient={isClient} />
                             </div>
                         </div>
                     </form>
@@ -274,9 +276,11 @@ const SearchField: FC<AutoCompleteFieldProps> = (props) => {
     }
 };
 
-const SearchButton: FC<{ isLoading: boolean }> = ({ isLoading }) => (
+export const searchButtonText = 'Search sequences';
+
+const SearchButton: FC<{ isLoading: boolean; isClient: boolean }> = ({ isLoading }) => (
     <button className='outlineButton w-full' type='submit' disabled={isLoading}>
-        {isLoading ? <CircularProgress size={20} color='inherit' /> : 'Search sequences'}
+        {isLoading ? <CircularProgress size={20} color='inherit' /> : searchButtonText}
     </button>
 );
 

diff --git a/website/src/components/SearchPage/fields/DateField.tsx b/website/src/components/SearchPage/fields/DateField.tsx
@@ -42,7 +42,7 @@ const CustomizedDatePicker: FC<FieldProps & ValueConverter> = ({
     return (
         <div>
             <div className='flex justify-between items-center'>
-                <label htmlFor={field.name} className='block text-sm  w-10 my-3 text-right mr-2 text-gray-400'>
+                <label htmlFor={field.name} className='block text-sm w-10 my-3 text-right mr-2 text-gray-400'>
                     {field.label}
                 </label>
                 <DatePicker

diff --git a/website/src/components/SeqSetCitations/SeqSetItemActions.tsx b/website/src/components/SeqSetCitations/SeqSetItemActions.tsx
@@ -1,4 +1,4 @@
-import { type FC, useState } from 'react';
+import { type FC, useState, useEffect } from 'react';
 
 import { ExportSeqSet } from './ExportSeqSet';
 import { SeqSetForm } from './SeqSetForm';
@@ -32,6 +32,11 @@ const SeqSetItemActionsInner: FC<SeqSetItemActionsProps> = ({
     const [editModalVisible, setEditModalVisible] = useState(false);
     const [exportModalVisible, setExportModalVisible] = useState(false);
     const { errorMessage, isErrorOpen, openErrorFeedback, closeErrorFeedback } = useErrorFeedbackState();
+    const [isClient, setIsClient] = useState(false);
+
+    useEffect(() => {
+        setIsClient(true);
+    }, []);
 
     const { mutate: deleteSeqSet } = useDeleteSeqSetAction(
         clientConfig,
@@ -51,13 +56,13 @@ const SeqSetItemActionsInner: FC<SeqSetItemActionsProps> = ({
             <div className='flex-row items-center justify-between w-full'>
                 <div className='flex justify-start items-center pt-4 pb-8'>
                     <div className='pr-2'>
-                        <button className='btn' onClick={() => setExportModalVisible(true)}>
+                        <button className='btn' onClick={() => setExportModalVisible(true)} disabled={!isClient}>
                             Export
                         </button>
                     </div>
                     <div className='px-2'>
                         {isAdminView ? (
-                            <button className='btn' onClick={() => setEditModalVisible(true)}>
+                            <button className='btn' onClick={() => setEditModalVisible(true)} disabled={!isClient}>
                                 Edit
                             </button>
                         ) : null}
@@ -72,6 +77,7 @@ const SeqSetItemActionsInner: FC<SeqSetItemActionsProps> = ({
                                         onConfirmation: handleDeleteSeqSet,
                                     })
                                 }
+                                disabled={!isClient}
                             >
                                 Delete
                             </button>

diff --git a/website/src/components/SeqSetCitations/SeqSetList.tsx b/website/src/components/SeqSetCitations/SeqSetList.tsx
@@ -1,5 +1,5 @@
 import MUIPagination from '@mui/material/Pagination';
-import { type FC, type MouseEvent, useState, useMemo } from 'react';
+import { type FC, type MouseEvent, useState, useMemo, useEffect } from 'react';
 
 import { routes } from '../../routes/routes';
 import type { SeqSet } from '../../types/seqSetCitation';
@@ -85,8 +85,13 @@ export const SeqSetList: FC<SeqSetListProps> = ({ seqSets, username }) => {
     const [order, setOrder] = useState<Order>('desc');
     const [orderBy, setOrderBy] = useState<keyof SeqSet>('createdAt');
     const [page, setPage] = useState(1);
+    const [isClient, setIsClient] = useState(false);
     const rowsPerPage = 5;
 
+    useEffect(() => {
+        setIsClient(true);
+    }, []);
+
     const handleRequestSort = (_: MouseEvent<unknown>, property: keyof SeqSet) => {
         const isAsc = orderBy === property && order === 'asc';
         setOrder(isAsc ? 'desc' : 'asc');
@@ -174,6 +179,7 @@ export const SeqSetList: FC<SeqSetListProps> = ({ seqSets, username }) => {
                                 className='hover:bg-primary-100 border-gray-100 cursor-pointer'
                                 onClick={(event) => handleClick(event, row.seqSetId, row.seqSetVersion.toString())}
                                 key={row.seqSetId}
+                                data-testid={isClient ? row.name : 'disabled'}
                             >
                                 <td className='px-2 whitespace-nowrap text-primary-900 pl-6'>
                                     {formatDate(row.createdAt)}