feat: Added additional E2E Integration Testing

Justin-MacIntosh · Justin-MacIntosh · commit e1c326551cf1 · 2026-03-10T21:29:58.000-04:00
diff --git a/.github/workflows/run-e2e-tests.yml b/.github/workflows/run-e2e-tests.yml
@@ -35,14 +35,16 @@ jobs:
         with:
           node-version: lts/*
 
-      # 1) Devbox Setup #
-      - name: Setup devbox
-        uses: ./.github/actions/devbox-setup
-
-      - name: Rename env files
+      - name: Load ENV files from examples
         run: |
           mv builder-frontend/.env.example builder-frontend/.env
           mv builder-api/.env.example builder-api/.env
+          mv library-api/.env.example library-api/.env
+          mv .env.example .env
+
+      # 1) Devbox Setup #
+      - name: Setup devbox
+        uses: ./.github/actions/devbox-setup
 
       # 2) Prepare app dependencies #
       - name: "Cache Maven dependencies"
diff --git a/builder-frontend/.env.example b/builder-frontend/.env.example
@@ -5,6 +5,5 @@ VITE_AUTH_DOMAIN=localhost:9099
 VITE_MEASUREMENT_ID=G-XXXXXXXXXX
 VITE_MESSAGING_SENDER_ID=123456789
 VITE_PROJECT_ID=demo-bdt-dev
-VITE_SCREENER_BASE_URL=http://localhost:5174/
 VITE_STORAGE_BUCKET=demo-bdt-dev.appspot.com
 DEV_SERVER_PORT=5173
diff --git a/builder-frontend/src/components/homeScreen/NewScreenerForm.jsx b/builder-frontend/src/components/homeScreen/NewScreenerForm.jsx
@@ -40,22 +40,24 @@ export default function NewScreenerForm({
             X
           </div>
         </div>
-        <div className="mt-12 text-3xl font-bold w-80">
+        <div class="mt-12 text-3xl font-bold w-80">
           What is the name of your screener?
         </div>
         <form onSubmit={handleSubmit}>
           <div className="mt-8 flex flex-col">
             <label>Screener Name:</label>
             <input
               type="text"
+              id="new-screener-name"
               ref={(el) => (nameInput = el)}
-              className="p-1 border-1 border-gray-400 w-90"
-            ></input>
+              class="form-input-custom"
+            />
           </div>
           <button
             type="submit"
+            id="new-screener-submit"
             disabled={isLoading()}
-            className="mt-3 py-2 px-4 text-white rounded bg-gray-800 disabled:opacity-50"
+            class="mt-3 py-2 px-4 text-white rounded bg-gray-800 disabled:opacity-50"
           >
             Create
           </button>
diff --git a/builder-frontend/src/components/project/FormEditorView.tsx b/builder-frontend/src/components/project/FormEditorView.tsx
@@ -168,7 +168,7 @@ function FormEditorView({ formSchema, setFormSchema }) {
           <div class="h-full" ref={(el) => (container = el)} />
         </div>
         <div class="flex-1 border-l-4 border-l-gray-200">
-          <div class="flex flex-col p-10 gap-4 place-items-center">
+          <div id="form-editor-save_container" class="flex flex-col p-10 gap-4 place-items-center">
             <Switch>
               <Match when={isUnsaved()}>
                 <div onClick={handleSave} class="btn-default btn-yellow">
diff --git a/builder-frontend/src/components/project/Publish.tsx b/builder-frontend/src/components/project/Publish.tsx
@@ -52,7 +52,7 @@ export default function Publish({ project, refetchProject }) {
       <div class="px-8 py-4 w-xl border-1 shadow-sm border-gray-200">
         <div class="text-xl">{screenerName()}</div>
         <div class="mt-4 flex flex-col gap-2">
-          <div class=" flex gap-4">
+          <div id="screener-url-info" class="flex gap-4">
             <div class="text-sm font-bold">Screener URL:</div>
             {isPublished() ? (
               <a href={screenerUrl()} target="_blank" rel="noopener noreferrer">
@@ -62,7 +62,7 @@ export default function Publish({ project, refetchProject }) {
               <a>Publish screener to create public url.</a>
             )}
           </div>
-          <div class="flex gap-4">
+          <div id="screener-last-published-info" class="flex gap-4">
             <div class="text-sm font-bold">Last Published Date:</div>
             {lastPublishDate() ? (
               <div>{formattedDate(lastPublishDate())}</div>
@@ -73,6 +73,7 @@ export default function Publish({ project, refetchProject }) {
         </div>
         <div class="mt-4 flex flex-col gap-2">
           <button
+            id="publish-screener-button"
             onClick={handlePublish}
             class="w-80 bg-gray-800 font-bold text-gray-50 rounded px-4 py-2 hover:bg-gray-700 disabled:opacity-50"
             disabled={isLoading()}
diff --git a/builder-frontend/src/components/project/manageBenefits/benefitList/BenefitList.tsx b/builder-frontend/src/components/project/manageBenefits/benefitList/BenefitList.tsx
@@ -21,7 +21,7 @@ const BenefitList = (
 
   return (
     <div class="p-5">
-      <div class="text-3xl font-bold mb-2 tracking-wide">
+      <div id="manage-benefits-title" class="text-3xl font-bold mb-2 tracking-wide">
         Manage Benefits
       </div>
       <div class="text-lg mb-3">
@@ -32,7 +32,7 @@ const BenefitList = (
         class="btn-default btn-blue mb-3 mr-1"
         onClick={() => {setAddingNewBenefit(true)}}
       >
-        Create New Benefit
+        Create new benefit
       </div>
       {/* <div
         class="btn-default btn-blue mb-3"
diff --git a/builder-frontend/src/components/project/manageBenefits/benefitList/modals/AddNewBenefitModal.tsx b/builder-frontend/src/components/project/manageBenefits/benefitList/modals/AddNewBenefitModal.tsx
@@ -29,7 +29,8 @@ const AddNewBenefitModal = (
           <label class="block font-bold mb-2">Name:</label>
           <input
             type="text"
-            class="w-full border border-gray-300 rounded px-3 py-2"
+            id="new-benefit-name"
+            class="w-full border-2 border-gray-400 rounded px-3 py-2"
             value={newBenefit.name}
             onInput={(e) => setNewBenefit("name", e.currentTarget.value)}
             placeholder="Enter benefit name"
@@ -38,7 +39,8 @@ const AddNewBenefitModal = (
         <div class="mb-4">
           <label class="block font-bold mb-2">Description:</label>
           <textarea
-            class="w-full border border-gray-300 rounded px-3 py-2"
+            id="new-benefit-description"
+            class="w-full border-2 border-gray-400 rounded px-3 py-2"
             value={newBenefit.description}
             onInput={(e) => setNewBenefit("description", e.currentTarget.value)}
             placeholder="Enter benefit description"
@@ -56,6 +58,7 @@ const AddNewBenefitModal = (
           </div>
           <div
             class={"btn-default bg-sky-600 text-white " + addButtonClasses()}
+            id="new-benefit-submit"
             onClick={async () => {
               if (isAddDisabled()) {
                 console.log("Please fill in all fields.");
diff --git a/builder-frontend/src/components/project/manageBenefits/configureBenefit/ConfigureBenefit.tsx b/builder-frontend/src/components/project/manageBenefits/configureBenefit/ConfigureBenefit.tsx
@@ -75,7 +75,7 @@ const ConfigureBenefit = ({
                 Selected eligibility checks for {benefit().name}
               </div>
 
-              <div class="px-4">
+              <div class="px-4" id="selected-eligibility-checks_container">
                 {benefit() && benefit().checks.length === 0 && (
                   <div class="text-gray-500">
                     No eligibility checks selected. Use the checkboxes to add
@@ -84,10 +84,9 @@ const ConfigureBenefit = ({
                 )}
                 {benefit().checks.length > 0 && (
                   <For each={benefit().checks}>
-                    {(checkConfig) => {
+                    {(checkConfig, checkConfigIndex) => {
                       return (
                         <SelectedEligibilityCheck
-                          checkId={() => checkConfig.checkId}
                           checkConfig={() => checkConfig}
                           onRemove={() =>
                             onRemoveEligibilityCheck(checkConfig.checkId)
diff --git a/builder-frontend/src/components/project/manageBenefits/configureBenefit/EligibilityCheckListView.tsx b/builder-frontend/src/components/project/manageBenefits/configureBenefit/EligibilityCheckListView.tsx
@@ -141,7 +141,7 @@ const EligibilityCheckRow = ({
   onAdd: (check: EligibilityCheck) => void;
 }) => {
   return (
-    <tr>
+    <tr id={"check-row_" + check.name}>
       <td class="eligibility-check-table-cell border-top">
         <div class="btn-default btn-blue" onClick={() => onAdd(check)}>
           Add
diff --git a/builder-frontend/src/components/project/manageBenefits/configureBenefit/SelectedEligibilityCheck.tsx b/builder-frontend/src/components/project/manageBenefits/configureBenefit/SelectedEligibilityCheck.tsx
@@ -10,18 +10,11 @@ import type {
   ParameterValues,
 } from "@/types";
 
-interface ParameterWithConfiguredValue {
-  parameter: ParameterDefinition;
-  value: string | number | boolean | string[] | undefined;
-}
-
 const SelectedEligibilityCheck = ({
-  checkId,
   checkConfig,
   onRemove,
   updateCheckConfigParams,
 }: {
-  checkId: Accessor<string>;
   checkConfig: Accessor<CheckConfig>;
   updateCheckConfigParams: (newCheckData: ParameterValues) => void;
   onRemove: () => void | null;
diff --git a/builder-frontend/src/components/project/preview/Results.tsx b/builder-frontend/src/components/project/preview/Results.tsx
@@ -24,7 +24,7 @@ export default function Results({
 }) {
   return (
     <div class="ml-3">
-      <div class="mt-3">
+      <div id="screener-input-data" class="mt-3">
         {inputData() && (
           <>
             <div class="text-md font-semibold text-gray-600">Inputs</div>
@@ -44,7 +44,7 @@ export default function Results({
             </div>
           </>
         )}
-        <div class="mt-3">
+        <div id="screener-results" class="mt-3">
           <Show when={resultsLoading()}>
             <div class="text-gray-600">Loading results...</div>
           </Show>
@@ -59,9 +59,9 @@ export default function Results({
             <div class="p-2">
               <div class="flex flex-col space-y-2">
                 <For each={Object.entries(results())}>
-                  {([benefitKey, benefit]) => (
+                  {([benefitKey, benefit], benefitResultIdx) => (
                     <div class="border-2 border-gray-200 rounded p-3">
-                      <div class="text-md font-medium text-gray-800">
+                      <div id={"benefit-result-title_" + benefitResultIdx()} class="text-md font-medium text-gray-800">
                         {benefit.name}:{" "}
                         <Switch>
                           <Match when={benefit.result === "TRUE"}>
diff --git a/e2e/playwright.config.ts b/e2e/playwright.config.ts
@@ -1,21 +1,16 @@
 import { defineConfig } from '@playwright/test';
-import * as path from 'path';
-
-const authFile = path.join(__dirname, '.auth/user.json');
 
 /**
  * See https://playwright.dev/docs/test-configuration
  */
 export default defineConfig({
   testDir: './tests',
-  /* Run tests in files in parallel */
-  fullyParallel: true,
   /* Fail the build on CI if you accidentally left test.only in the source code. */
   forbidOnly: !!process.env.CI,
   /* Retry on CI only */
   retries: process.env.CI ? 2 : 0,
   /* Opt out of parallel tests on CI. */
-  workers: process.env.CI ? 1 : undefined,
+  workers: 1,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
   reporter: 'html',
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
@@ -25,23 +20,22 @@ export default defineConfig({
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: 'on-first-retry',
+
+    screenshot: "only-on-failure",
   },
 
   /* Configure projects for major browsers */
   projects: [
-    // Setup project - runs authentication before other tests
     {
       name: 'setup',
-      testMatch: /auth\.setup\.ts/,
+      testMatch: /global\.setup\.ts/,
     },
 
     // Main test project - depends on setup for authentication
     {
       name: 'chromium',
       use: {
         browserName: 'chromium',
-        // Use saved authentication state
-        storageState: authFile,
       },
       dependencies: ['setup'],
     },
diff --git a/e2e/tests/authLogin.ts b/e2e/tests/authLogin.ts
@@ -0,0 +1,18 @@
+import { expect, Page } from '@playwright/test';
+
+export const authLogin = async ({ page }: { page: Page }) => {
+  /* Authenticate before each Test */
+
+  // Navigate to login page
+  await page.goto('/login');
+
+  // Fill in credentials (using Firebase emulator test user)
+  await page.locator('#email').fill('test@example.com');
+  await page.locator('#password').fill('testpassword123');
+
+  // Click sign in button
+  await page.getByRole('button', { name: 'Sign In' }).click();
+
+  // Wait for navigation to home page after successful login
+  await expect(page).toHaveURL('/');
+};
diff --git a/e2e/tests/firestore.ts b/e2e/tests/firestore.ts
@@ -0,0 +1,52 @@
+import firebaseConfig from '../../firebase.json';
+const firestoreEmulatorPort = firebaseConfig.emulators.firestore.port;
+
+
+const EMULATOR_PROJECT_ID = "demo-bdt-dev";
+
+async function clearDb_preserveSystem() {
+  const systemDataResponse = await fetch(
+    `http://localhost:${firestoreEmulatorPort}/v1/projects/${EMULATOR_PROJECT_ID}/databases/(default)/documents/system`,
+    {
+      signal: AbortSignal.timeout(5000),
+      method: 'GET',
+    }
+  );
+  if (systemDataResponse.status !== 200) {
+    throw new Error('Trouble retrieving System Data: ' + (await systemDataResponse.text()));
+  }
+  const systemData = await systemDataResponse.json();
+  const configData = systemData["documents"][0];
+
+  const deleteResponse = await fetch(
+    `http://localhost:${firestoreEmulatorPort}/emulator/v1/projects/${EMULATOR_PROJECT_ID}/databases/(default)/documents`,
+    {
+      signal: AbortSignal.timeout(5000),
+      method: 'DELETE',
+    }
+  );
+  if (deleteResponse.status !== 200) {
+    throw new Error('Trouble clearing Emulator: ' + (await deleteResponse.text()));
+  }
+
+  const systemDataPatch = await fetch(
+    `http://localhost:${firestoreEmulatorPort}/v1/projects/${EMULATOR_PROJECT_ID}/databases/(default)/documents/system/config`,
+    {
+      signal: AbortSignal.timeout(5000),
+      method: 'PATCH',
+      body: JSON.stringify(configData),
+      headers: {'Content-Type': 'application/json'}
+    }
+  );
+  if (systemDataPatch.status !== 200) {
+    throw new Error('Trouble Patching System Data: ' + (await systemDataPatch.text()));
+  }
+
+  return;
+}
+
+async function resetDb() {
+  await clearDb_preserveSystem();
+}
+
+export { resetDb };
diff --git a/e2e/tests/global.setup.ts b/e2e/tests/global.setup.ts
@@ -0,0 +1,10 @@
+import { test as setup } from '@playwright/test';
+
+import firebaseConfig from '../../firebase.json';
+const firestoreEmulatorPort = firebaseConfig.emulators.firestore.port;
+
+setup('create new database', async ({ }) => {
+  await fetch(`http://localhost:${firestoreEmulatorPort}/`).catch(() => {
+    throw new Error('Firebase emulator not running');
+  });
+});
diff --git a/e2e/tests/screener.spec.ts b/e2e/tests/screener.spec.ts
diff --git a/e2e/tests/smokeTest.spec.ts b/e2e/tests/smokeTest.spec.ts
diff --git a/e2e/tsconfig.json b/e2e/tsconfig.json
diff --git a/process-compose.yml b/process-compose.yml
