Merge pull request #1223 from joshunrau/ci

update ci and e2e testing

Author: joshunrau

.github/workflows/ci.yaml

@@ -8,7 +8,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout Code
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
       - name: Setup PNPM
         uses: pnpm/action-setup@v4
       - name: Setup Node.js
@@ -18,9 +18,21 @@ jobs:
           node-version-file: '.nvmrc'
       - name: Generate Environment
         run: ./scripts/generate-env.sh
+      - name: Setup Mongo
+        run: |
+          docker run -d --name mongo -p 27017:27017 mongo:7 --replSet rs0
+          docker exec mongo mongosh --eval "rs.initiate({_id: 'rs0', members: [{_id: 0, host: 'localhost:27017'}]});"
+      - name: Configure Git
+        run: |
+          # necessary for the git commands used for release info
+          git config --global --add safe.directory /__w/OpenDataCapture/OpenDataCapture
       - name: Install Dependencies
         run: pnpm install --frozen-lockfile
+      - name: Install Playwright
+        run: pnpm --filter "@opendatacapture/e2e" exec playwright install --with-deps
       - name: Lint
         run: pnpm lint
-      - name: Test
+      - name: Unit Tests
         run: pnpm test
+      - name: End-to-End Tests
+        run: pnpm --filter "@opendatacapture/e2e" test

.gitignore

@@ -74,5 +74,4 @@ storybook-static
 .claude/settings.local.json
 
 # playwright
-testing/e2e/.output/
-testing/e2e/playwright/.cache/
+testing/e2e/.playwright

apps/web/src/components/Footer/Footer.tsx

@@ -9,7 +9,7 @@ export const Footer = () => {
   const { t } = useTranslation('layout');
 
   return (
-    <footer className="text-muted-foreground container py-3 text-sm">
+    <footer className="text-muted-foreground container py-3 text-sm" data-testid="footer">
       <hr className="my-3 border-slate-200 dark:border-slate-700" />
       <div className="flex items-center justify-center">
         <div className="mb-1 flex flex-row flex-wrap font-medium lg:flex-nowrap">

apps/web/src/components/IdentificationForm/IdentificationForm.tsx

@@ -113,6 +113,7 @@ export const IdentificationForm = ({ onSubmit }: IdentificationFormProps) => {
           }
         }
       ]}
+      data-testid="identification-form"
       initialValues={{
         identificationMethod: currentGroup?.settings.defaultIdentificationMethod ?? 'PERSONAL_INFO'
       }}

apps/web/src/components/InstrumentCard/InstrumentCard.tsx

@@ -125,6 +125,7 @@ export const InstrumentCard = ({ instrument, onClick }: InstrumentCardProps) =>
   return (
     <Card
       className="group flex gap-8 p-6 transition-transform duration-300 ease-in-out hover:scale-[1.03] hover:cursor-pointer sm:p-8"
+      data-testid={`instrument-card-${instrument.id}`}
       role="button"
       tabIndex={0}
       onClick={onClick}

apps/web/src/components/InstrumentShowcase/InstrumentShowcase.tsx

@@ -59,19 +59,30 @@ export const InstrumentShowcase: React.FC<{
   }, [availableInstruments]);
 
   return (
-    <div className="flex flex-col gap-5">
+    <div className="flex flex-col gap-5" data-testid="instrument-showcase">
       <div className="flex items-center gap-2.5">
-        <SearchBar className="grow" value={searchTerm} onValueChange={setSearchTerm} />
+        <SearchBar
+          className="grow"
+          data-testid="instrument-search-bar"
+          value={searchTerm}
+          onValueChange={setSearchTerm}
+        />
         <div className="flex items-center gap-2.5">
-          <InstrumentKindDropdown selected={selectedKinds} setSelected={setSelectedKinds} />
-          <ListboxDropdown
-            widthFull
-            options={tagOptions}
-            selected={selectedTags}
-            setSelected={setSelectedTags}
-            title={t('core.tags')}
-          />
-          <InstrumentLanguageDropdown selected={selectedLanguages} setSelected={setSelectedLanguages} />
+          <div data-testid="instrument-kind-filter">
+            <InstrumentKindDropdown selected={selectedKinds} setSelected={setSelectedKinds} />
+          </div>
+          <div data-testid="instrument-tag-filter">
+            <ListboxDropdown
+              widthFull
+              options={tagOptions}
+              selected={selectedTags}
+              setSelected={setSelectedTags}
+              title={t('core.tags')}
+            />
+          </div>
+          <div data-testid="instrument-language-filter">
+            <InstrumentLanguageDropdown selected={selectedLanguages} setSelected={setSelectedLanguages} />
+          </div>
         </div>
       </div>
       <ul className="flex flex-col gap-5">

apps/web/src/components/Layout/Layout.tsx

@@ -6,14 +6,14 @@ import { Sidebar } from '../Sidebar';
 
 export const Layout = () => {
   return (
-    <div className="flex h-screen w-screen flex-col md:flex-row">
+    <div className="flex h-screen w-screen flex-col md:flex-row" data-testid="layout">
       <div className="absolute md:hidden">
         <Navbar />
       </div>
       <div className="hidden md:flex md:shrink-0">
         <Sidebar />
       </div>
-      <div className="scrollbar-none flex grow flex-col overflow-y-scroll pt-14 md:pt-0">
+      <div className="scrollbar-none flex grow flex-col overflow-y-scroll pt-14 md:pt-0" data-testid="layout-main">
         <main className="container flex grow flex-col">
           <Outlet />
         </main>

apps/web/src/components/LoginForm/LoginForm.tsx

@@ -25,7 +25,7 @@ export const LoginForm = ({ onSubmit }: LoginFormProps) => {
           variant: 'password'
         }
       }}
-      data-cy="login-form"
+      data-testid="login-form"
       submitBtnLabel={t('login')}
       validationSchema={z.object({
         username: z.string().min(1),

apps/web/src/components/NavButton/NavButton.tsx

@@ -27,6 +27,7 @@ export const NavButton = React.forwardRef<HTMLButtonElement, NavButtonProps>(fun
       )}
       data-nav-url={url}
       data-spotlight-type="nav-button"
+      data-testid={`nav-button-${url}`}
       disabled={disabled}
       ref={ref}
       type="button"

apps/web/src/components/Navbar/Navbar.tsx

@@ -30,11 +30,15 @@ export const Navbar = () => {
 
   return (
     <Sheet open={isOpen} onOpenChange={setIsOpen}>
-      <div className="fixed top-0 z-10 w-full bg-white/80 text-slate-700 shadow-sm backdrop-blur-lg dark:bg-slate-800/75 dark:text-slate-300">
+      <div
+        className="fixed top-0 z-10 w-full bg-white/80 text-slate-700 shadow-sm backdrop-blur-lg dark:bg-slate-800/75 dark:text-slate-300"
+        data-testid="navbar"
+      >
         <div className="h-full w-full bg-inherit">
           <div className="container flex items-center justify-between bg-inherit py-2 font-medium">
             <Branding className="[&>span]:hidden" />
             <Sheet.Trigger
+              data-testid="navbar-menu-trigger"
               onClick={() => {
                 setIsOpen(true);
               }}