The github workflow now runs the playwright ui tests.

Also fixes a broken test that wasn't caught by the pipeline because it does not run it.
Fix: #681

.github/workflows/evolution.yml

@@ -12,11 +12,29 @@ on:
 jobs:
   build-and-test:
     runs-on: ubuntu-latest
+    services:
+      postgres:
+        image: postgis/postgis
+        ports:
+          - 5432:5432
+        options: >-
+          --health-cmd pg_isready
+          --health-interval 10s
+          --health-timeout 5s
+          --health-retries 5
+        env:
+          POSTGRES_USER: testuser
+          POSTGRES_PASSWORD: testpassword
+          POSTGRES_DB: testdb
     strategy:
       matrix:
         node-version: [18.x, 20.x]
     env:
       PROJECT_CONFIG: ${{ github.workspace }}/example/demo_survey/config.js
+      PG_CONNECTION_STRING_PREFIX: postgres://testuser:testpassword@localhost:5432/
+      PG_DATABASE_PRODUCTION: testdb
+      GOOGLE_API_KEY: ${{ secrets.GOOGLE_API_KEY_GITHUB_PUBLIC }}
+      CI: true ## This is to make sure that the tests run in CI mode
     steps:
     - uses: actions/checkout@v4
       with:
@@ -35,6 +53,27 @@ jobs:
       run: yarn build:prod
     - name: Unit Test
       run: yarn test
+    # Following configure the automated UI tests
+    - name: Create DB
+      run: yarn setup && yarn migrate
+      env:
+        NODE_ENV: production
+    - name: Get Playwright config
+      run: cp packages/evolution-frontend/playwright-example.config.ts example/demo_survey/playwright.config.ts
+    - name: Start application
+      run: yarn start &
+      env:
+        NODE_ENV: production
+    - name: Run tests
+      run: yarn test:survey
+    - name: Archive UI Test results
+      if: always()
+      uses: actions/upload-artifact@v4
+      with:
+        name: playwright-results-${{matrix.node-version}} # This is to make sure that the results are stored in a unique name
+        path: example/demo_survey/test-results
+        retention-days: 2
+    # End of automated UI tests
 
   code-lint:
     runs-on: ubuntu-latest

example/demo_survey/tests/test-input-validation.UI.spec.ts

@@ -25,15 +25,15 @@ surveyTestHelpers.startAndLoginAnonymously({ context, title: 'Démo', hasUser: t
 
 // Test the home page
 testHelpers.tryToContinueWithInvalidInputs({ context, text: 'Save and continue', currentPageUrl: '/survey/home' , nextPageUrl: '/survey/householdMembers' });
-testHelpers.inputInvalidStringValueTest({ context, path: 'household.carNumber', value: '14' });
-testHelpers.inputInvalidStringValueTest({ context, path: 'home.postalCode', value: 'H1S1V77' });
-testHelpers.inputInvalidStringValueTest({ context, path: 'home.postalCode', value: 'H1S1V' });
-testHelpers.inputInvalidStringValueTest({ context, path: 'home.postalCode', value: '1H1S7V' });
+testHelpers.inputStringInvalidValueTest({ context, path: 'household.carNumber', value: '14' });
+testHelpers.inputStringInvalidValueTest({ context, path: 'home.postalCode', value: 'H1S1V77' });
+testHelpers.inputStringInvalidValueTest({ context, path: 'home.postalCode', value: 'H1S1V' });
+testHelpers.inputStringInvalidValueTest({ context, path: 'home.postalCode', value: '1H1S7V' });
 
 onePersonTestHelpers.completeHomePage(context);
 
 // Test the household page
-testHelpers.inputInvalidStringTypeTest({ context, path: 'household.persons.${personId[0]}.age', value: testHelpers.nonNumericString });
+testHelpers.inputStringInvalidTypeTest({ context, path: 'household.persons.${personId[0]}.age', value: testHelpers.nonNumericString });
 testHelpers.inputStringTest({ context, path: 'household.persons.${personId[0]}.age', value: '15' });
 testHelpers.tryToContinueWithPopup({ context, text: 'Save and continue', currentPageUrl: '/survey/householdMembers' , nextPageUrl: '/survey/profile' });
 testHelpers.inputStringTest({ context, path: 'household.persons.${personId[0]}.age', value: '30' });

example/demo_survey/tests/test-one-person-helpers.ts

@@ -13,6 +13,7 @@ export function completeHomePage(context) {
     testHelpers.inputStringTest({ context, path: 'home.postalCode', value: 'H1S1V7' });
     //testHelpers.inputMapFindPlaceTest({ context, path: 'home.geography' });
     testHelpers.inputSelectTest({ context, path: 'home.dwellingType', value: 'tenantSingleDetachedHouse' });
+    testHelpers.waitForMapToBeLoaded({ context });
     testHelpers.inputNextButtonTest({ context, text: 'Save and continue', nextPageUrl: '/survey/householdMembers' });
 };
 

example/demo_survey/tests/test-two-adults-no-trips.UI.spec.ts

@@ -31,6 +31,7 @@ testHelpers.inputStringTest({ context, path: 'home.country', value: 'Canada' });
 testHelpers.inputStringTest({ context, path: 'home.postalCode', value: 'H1S1V7' });
 //testHelpers.inputMapFindPlaceTest({ context, path: 'home.geography' });
 testHelpers.inputSelectTest({ context, path: 'home.dwellingType', value: 'tenantSingleDetachedHouse' });
+testHelpers.waitForMapToBeLoaded({ context });
 testHelpers.inputNextButtonTest({ context, text: 'Save and continue', nextPageUrl: '/survey/householdMembers' });
 
 // Test the household page

packages/evolution-frontend/tests/ui-testing/testHelpers.ts

@@ -65,6 +65,7 @@ type InputStringTest = (params: PathAndValue & CommonTestParameters) => void | P
 type InputRangeTest = (params: { path: Path; value: number; sliderColor?: string } & CommonTestParameters) => void;
 type InputCheckboxTest = (params: { path: Path; values: Value[] } & CommonTestParameters) => void;
 type InputMapFindPlaceTest = (params: { path: Path } & CommonTestParameters) => void;
+type WaitForMapLoadedTest = (params: CommonTestParameters) => void;
 type InputNextButtonTest = (params: { text: Text; nextPageUrl: Url } & CommonTestParameters) => void;
 type InputPopupButtonTest = (params: { text: Text; popupText: Text } & CommonTestParameters) => void;
 type RedirectionTest = (
@@ -684,6 +685,16 @@ export const inputMapFindPlaceTest: InputMapFindPlaceTest = ({ context, path })
     });
 };
 
+// Wait for the map to be fully loaded and be validated.
+export const waitForMapToBeLoaded: WaitForMapLoadedTest = ({ context }) => {
+    test(`Wait for map to be loaded`, async () => {
+        const mapContainer = context.page.locator("//div[contains(@class, 'question-type-mapPoint')]");
+        await expect(mapContainer).toBeVisible();
+        await mapContainer.scrollIntoViewIfNeeded();
+        await expect(mapContainer).toHaveClass(/question-filled question-valid/);
+    });
+};
+
 // Test input button widget that go to the next page
 export const inputNextButtonTest: InputNextButtonTest = ({ context, text, nextPageUrl }) => {
     test(`Click ${text} and go to ${nextPageUrl} ${getTestCounter(context, `${text} - ${nextPageUrl}`)}`, async () => {