feat: Added additional E2E Integration Testing (#344)

Author: Justin-MacIntosh

.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"
@@ -82,7 +84,6 @@ jobs:
       # 3) Run App + E2E Test #
       - name: Run all Devbox services
         run: devbox services up -b
-        continue-on-error: true
 
       - name: Install Playwright dependencies
         run: npm ci
@@ -99,12 +100,10 @@ jobs:
           responseCode: 200
           timeout: 90000
           interval: 1000
-        continue-on-error: true
 
       - name: Run Playwright tests
         run: npx playwright test
         working-directory: e2e
-        continue-on-error: true
 
       - uses: actions/upload-artifact@v4
         if: ${{ !cancelled() }}
@@ -113,7 +112,14 @@ jobs:
           path: e2e/playwright-report/
           retention-days: 30
 
+      - name: Upload process logs on failure
+        uses: actions/upload-artifact@v4
+        if: failure()
+        with:
+          name: process-logs
+          path: logs/
+          retention-days: 30
+
       # 4) Cleanup #
       - name: Stop all Devbox services
         run: devbox services stop
-        continue-on-error: true

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

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>

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">

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()}

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"

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.");

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)

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

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;