Test(e2e): Added UI automated test for EAP Registration

.github/workflows/ci.yml

@@ -63,34 +63,41 @@
           path: packages/ui/dist
 
   test:
-    name: Run tests
+    name: Run tests (Unit + Playwright)
     environment: 'test'
     runs-on: ubuntu-latest
     defaults:
       run:
         working-directory: app
     needs: [ui]
     steps:
       - uses: actions/checkout@v4
       - name: Install pnpm
         uses: pnpm/action-setup@v4
       - name: Install Node.js
         uses: actions/setup-node@v4
         with:
           node-version: 20
           cache: 'pnpm'
       - name: Install dependencies
         run: pnpm install
 
       - uses: actions/download-artifact@v4
         with:
           name: ui-build
           path: packages/ui/dist
 
-      - name: Run test
-        run: pnpm test
+      - name: Build app
+        run: pnpm build
+
+      - name: Install Playwright browsers
+        run: pnpm exec playwright install --with-deps
+
+      - name: Run Playwright tests
+        working-directory: packages/e2e-tests
+        run: pnpm exec playwright test
 
   translation:
     continue-on-error: true
     name: Identify error with translation files
     runs-on: ubuntu-latest

.github/workflows/playwright.yml

@@ -0,0 +1,27 @@
+name: Playwright Tests
+on:
+  push:
+    branches: [ main, master ]
+  pull_request:
+    branches: [ main, master ]
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
+      with:
+        node-version: lts/*
+    - name: Install dependencies
+      run: npm ci
+    - name: Install Playwright Browsers
+      run: npx playwright install --with-deps
+    - name: Run Playwright tests
+      run: npx playwright test
+    - uses: actions/upload-artifact@v4
+      if: ${{ !cancelled() }}
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30

.gitignore

@@ -41,3 +41,10 @@ storybook-static/
 
 # Helm
 .helm-charts/
+
+# Playwright
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+/playwright/.auth/

app/package.json

@@ -48,6 +48,7 @@
         "@togglecorp/toggle-request": "^1.0.0-beta.3",
         "@turf/bbox": "^6.5.0",
         "@turf/buffer": "^6.5.0",
+        "diff": "^8.0.2",
         "exceljs": "^4.3.0",
         "file-saver": "^2.0.5",
         "html-to-image": "^1.11.11",

app/src/App/routes/index.tsx

@@ -319,6 +319,50 @@ const emergencyAdditionalInfo = customWrapRoute({
     },
 });
 
+type DefaultDrefDetailChild = 'dref-detail';
+const drefProcessLayout = customWrapRoute({
+    parent: rootLayout,
+    path: 'dref-process',
+    forwardPath: 'dref-detail' satisfies DefaultDrefDetailChild,
+    component: {
+        render: () => import('#views/DrefProcess'),
+        props: {},
+    },
+    wrapperComponent: Auth,
+    context: {
+        title: 'DREF Process',
+        visibility: 'anything',
+    },
+});
+
+const drefDetail = customWrapRoute({
+    parent: drefProcessLayout,
+    path: 'dref-detail' satisfies DefaultDrefDetailChild,
+    component: {
+        render: () => import('#views/DrefDetail'),
+        props: {},
+    },
+    wrapperComponent: Auth,
+    context: {
+        title: 'Response and Imminent DREF',
+        visibility: 'anything',
+    },
+});
+
+const eapDetail = customWrapRoute({
+    parent: drefProcessLayout,
+    path: 'eap-detail',
+    component: {
+        render: () => import('#views/EarlyActionProtocols'),
+        props: {},
+    },
+    wrapperComponent: Auth,
+    context: {
+        title: 'Early Action Protocols',
+        visibility: 'anything',
+    },
+});
+
 type DefaultPreparednessChild = 'global-summary';
 const preparednessLayout = customWrapRoute({
     parent: rootLayout,
@@ -715,6 +759,49 @@ const accountMyFormsThreeW = customWrapRoute({
     },
 });
 
+const accountMyFormsEap = customWrapRoute({
+    parent: accountMyFormsLayout,
+    path: 'eap-applications',
+    component: {
+        render: () => import('#views/AccountMyFormsEap'),
+        props: {},
+    },
+    context: {
+        title: 'Account - EAP Applications',
+        visibility: 'is-authenticated',
+        permissions: ({ isGuestUser }) => !isGuestUser,
+    },
+});
+
+const fullEapForm = customWrapRoute({
+    parent: rootLayout,
+    path: 'eap/:eapId/full',
+    component: {
+        render: () => import('#views/EapFullForm'),
+        props: {},
+    },
+    wrapperComponent: Auth,
+    context: {
+        title: 'EAP Full Forms',
+        visibility: 'is-authenticated',
+        permissions: ({ isGuestUser }) => !isGuestUser,
+    },
+});
+
+const simplifiedEapForm = customWrapRoute({
+    parent: rootLayout,
+    path: 'eap/:eapId/simplified',
+    component: {
+        render: () => import('#views/SimplifiedEapForm'),
+        props: {},
+    },
+    wrapperComponent: Auth,
+    context: {
+        title: 'Simplified EAP Form',
+        visibility: 'is-authenticated',
+    },
+});
+
 const accountNotifications = customWrapRoute({
     parent: accountLayout,
     path: 'notifications',
@@ -1094,6 +1181,65 @@ const fieldReportDetails = customWrapRoute({
     },
 });
 
+type DefaultEapRegistrationChild = 'new';
+const eapRegistrationLayout = customWrapRoute({
+    parent: rootLayout,
+    path: 'eap-registration',
+    forwardPath: 'new' satisfies DefaultEapRegistrationChild,
+    component: {
+        render: () => import('#views/EapRegistration'),
+        props: {},
+    },
+    wrapperComponent: Auth,
+    context: {
+        title: 'EAP Process',
+        visibility: 'is-authenticated',
+    },
+});
+
+const newEapDevelopmentRegistration = customWrapRoute({
+    parent: eapRegistrationLayout,
+    path: 'new' satisfies DefaultEapRegistrationChild,
+    component: {
+        render: () => import('#views/EapRegistration'),
+        props: {},
+    },
+    wrapperComponent: Auth,
+    context: {
+        title: 'New EAP Development Registration',
+        visibility: 'is-authenticated',
+        permissions: ({ isGuestUser }) => !isGuestUser,
+    },
+});
+
+const eapDevelopmentRegistrationForm = customWrapRoute({
+    parent: eapRegistrationLayout,
+    path: ':eapId/',
+    component: {
+        render: () => import('#views/EapRegistration'),
+        props: {},
+    },
+    wrapperComponent: Auth,
+    context: {
+        title: 'View EAP',
+        visibility: 'is-authenticated',
+    },
+});
+
+const simplifiedEapExport = customWrapRoute({
+    parent: rootLayout,
+    path: 'eap/:eapId/export',
+    component: {
+        render: () => import('#views/SimplifiedEapExport'),
+        props: {},
+    },
+    wrapperComponent: Auth,
+    context: {
+        title: 'Simplified EAP Export',
+        visibility: 'is-authenticated',
+    },
+});
+
 type DefaultPerProcessChild = 'new';
 const perProcessLayout = customWrapRoute({
     parent: rootLayout,
@@ -1317,6 +1463,7 @@ const wrappedRoutes = {
     accountMyFormsPer,
     accountMyFormsDref,
     accountMyFormsThreeW,
+    accountMyFormsEap,
     resources,
     search,
     allThreeWProject,
@@ -1353,6 +1500,9 @@ const wrappedRoutes = {
     termsAndConditions,
     operationalLearning,
     montandonLandingPage,
+    newEapDevelopmentRegistration,
+    fullEapForm,
+    simplifiedEapForm,
     ...regionRoutes,
     ...countryRoutes,
     ...surgeRoutes,
@@ -1363,6 +1513,12 @@ const wrappedRoutes = {
     // Redirects
     preparednessOperationalLearning,
     obsoleteFieldReportDetails,
+    drefDetail,
+    eapDetail,
+    drefProcessLayout,
+    eapRegistrationLayout,
+    eapDevelopmentRegistrationForm,
+    simplifiedEapExport,
 };
 
 export const unwrappedRoutes = unwrapRoute(Object.values(wrappedRoutes));

app/src/components/Navbar/i18n.json

@@ -40,6 +40,7 @@
         "userMenuDrefProcessDescription":"Disaster Response Emergency Fund (DREF) is the quickest way of getting funding directly to local humanitarian actors. Use one of the links below to submit a DREF Application or an update.",
         "userMenuCreateDrefApplication":"Create DREF Application",
         "myDrefApplications": "My DREF Applications",
+        "earlyActionProtocols": "Early Action Protocols (EAP)",
         "userMenuSurge":"The section displays the summary of deployments within current and ongoing emergencies. Login to see available details",
         "userMenuSurgeGlobalOverview":"Surge Global Overview",
         "userMenuOperationalToolbox":"Operational Toolbox",

app/src/components/Navbar/index.tsx

@@ -370,12 +370,20 @@ function Navbar(props: Props) {
                                         </Description>
                                         <DropdownMenuItem
                                             type="link"
-                                            to="accountMyFormsDref"
+                                            to="drefDetail"
                                             styleVariant="action"
                                             withoutFullWidth
                                         >
                                             {strings.myDrefApplications}
                                         </DropdownMenuItem>
+                                        <DropdownMenuItem
+                                            type="link"
+                                            to="eapDetail"
+                                            styleVariant="action"
+                                            withoutFullWidth
+                                        >
+                                            {strings.earlyActionProtocols}
+                                        </DropdownMenuItem>
                                         <DropdownMenuItem
                                             type="link"
                                             to="newDrefApplicationForm"

app/src/components/PerExportModal/index.tsx

@@ -14,11 +14,15 @@ import {
 
 import Link from '#components/Link';
 import { type components } from '#generated/types';
-import { useRequest } from '#utils/restRequest';
+import {
+    type GoApiBody,
+    useRequest,
+} from '#utils/restRequest';
 
 import i18n from './i18n.json';
 
 type ExportStatusEnum = components<'read'>['schemas']['ExportStatusEnum'];
+type ExportBody = GoApiBody<'/api/v2/pdf-export/', 'POST'>;
 
 const EXPORT_STATUS_PENDING = 0 satisfies ExportStatusEnum;
 const EXPORT_STATUS_COMPLETED = 1 satisfies ExportStatusEnum;
@@ -45,8 +49,10 @@ function PerExportModal(props: Props) {
             export_id: Number(perId),
             export_type: 'per' as const,
             per_country: Number(countryId),
-            is_pga: false,
-        }),
+            is_pga: undefined,
+            version: undefined,
+            diff: undefined,
+        } satisfies ExportBody),
         [perId, countryId],
     );