Merge pull request #1855 from rodekruis/feat.add-e2e-test-for-predict…

…ion-buttons

Add e2e test for prediction buttons and map validations in trigger mode

tests/e2e/Pages/ChatComponent.ts

@@ -80,13 +80,42 @@ class ChatComponent extends DashboardPage {
     const noTriggerChatDialogue = this.chatDialogue.filter({
       hasText: chatDialogueContentNoAlerts,
     });
-
     // Assertions
     await expect(welcomeChatDialogue).toBeVisible();
     await expect(noTriggerChatDialogue).toBeVisible();
   }
 
-  async allChatButtonsArePresent() {
+  async chatColumnIsVisibleForTriggerState({
+    firstName,
+    lastName,
+  }: {
+    firstName: string;
+    lastName: string;
+  }) {
+    // String cleaning to remove <strong> tags and replace placeholders with actual values
+    const cleanedString = chatDialogueWarnLabel.replace(/<\/?strong>/g, '');
+
+    const date = new Date();
+    const formattedDate = format(date, 'EEEE, dd MMMM');
+    const formattedTime = format(date, 'HH:mm');
+
+    const lastModelRunDate = `${formattedDate} ${formattedTime}`;
+
+    // Formatted Strings
+    const chatDialogueContent = cleanedString
+      .replace('{{ name }}', `${firstName} ${lastName}`)
+      .replace('{{lastModelRunDate}}', lastModelRunDate);
+
+    // Locators based on data-testid and filtered by formatted strings
+    const welcomeChatDialogue = this.chatDialogue.filter({
+      hasText: chatDialogueContent,
+    });
+
+    // Assertions
+    await expect(welcomeChatDialogue).toBeVisible();
+  }
+
+  async allDefaultButtonsArePresent() {
     await expect(this.chatAboutButton).toBeVisible();
     await expect(this.chatGuideButton).toBeVisible();
     await expect(this.exportViewButton).toBeVisible();
@@ -153,6 +182,17 @@ class ChatComponent extends DashboardPage {
     await expect(newPage).toHaveURL(url);
     await newPage.close();
   }
+
+  async predictionButtonsAreActive() {
+    const showPredictionButton = this.page.getByRole('button', {
+      name: 'Show prediction',
+    });
+    const countPredictionButtons = await showPredictionButton.count();
+    for (let i = 0; i < countPredictionButtons; i++) {
+      const predictionButton = showPredictionButton.nth(i);
+      await expect(predictionButton).toBeEnabled();
+    }
+  }
 }
 
 export default ChatComponent;

tests/e2e/Pages/MapComponent.ts

@@ -392,5 +392,16 @@ class MapComponent extends DashboardPage {
     const aggregatePaneContentCount = await aggregatePaneContent.count();
     expect(aggregatePaneContentCount).toBeGreaterThan(0);
   }
+
+  async validateLayerIsVisibleInMapBySrcElement({
+    layerName,
+  }: {
+    layerName: string;
+  }) {
+    // Select from: "flood_extent"
+    const layer = this.page.locator(`img[src*="${layerName}"]`);
+    const layerCount = await layer.count();
+    expect(layerCount).toBeGreaterThan(0);
+  }
 }
 export default MapComponent;

tests/e2e/tests/ChatSection/AllChatActionButtonsActiveInNoTrigger.spec.ts

@@ -50,7 +50,7 @@ test(
     await userState.headerComponentIsVisible({
       countryName: NoTriggerDataSet.CountryName,
     });
-    await chat.allChatButtonsArePresent();
+    await chat.allDefaultButtonsArePresent();
     await chat.clickAndAssertAboutButton();
     await chat.clickAndAssertGuideButton();
     await chat.clickAndAssertExportViewButton();

tests/e2e/tests/ChatSection/AllChatComponentsPresentNotrigger.spec.ts

@@ -35,7 +35,7 @@ test.beforeEach(async ({ page }) => {
 });
 
 test(
-  qase(5, ' All Chat section elements are present in no-trigger mode'),
+  qase(5, 'All Chat section elements are present in no-trigger mode'),
   async ({ page }) => {
     const dashboard = new DashboardPage(page);
     const userState = new UserStateComponent(page);
@@ -51,6 +51,6 @@ test(
       firstName: NoTriggerDataSet.firstName,
       lastName: NoTriggerDataSet.lastName,
     });
-    await chat.allChatButtonsArePresent();
+    await chat.allDefaultButtonsArePresent();
   },
 );

tests/e2e/tests/Map/ExposedPopulationVisibleInTrigger.spec.ts → tests/e2e/tests/ChatSection/ChatPredictionButtonActive.spec.ts

@@ -1,11 +1,10 @@
 import { test } from '@playwright/test';
+import ChatComponent from 'Pages/ChatComponent';
 import DashboardPage from 'Pages/DashboardPage';
-import MapComponent from 'Pages/MapComponent';
 import UserStateComponent from 'Pages/UserStateComponent';
 import { qase } from 'playwright-qase-reporter';
 import { TriggerDataSet } from 'testData/testData.enum';
 
-import { FloodsScenario } from '../../../../services/API-service/src/scripts/enum/mock-scenario.enum';
 import {
   getAccessToken,
   mockFloods,
@@ -18,12 +17,12 @@ let accessToken: string;
 test.beforeEach(async ({ page }) => {
   // Login
   const loginPage = new LoginPage(page);
+
   accessToken = await getAccessToken();
   await resetDB(accessToken);
-
   // We should maybe create one mock for all different disaster types for now we can just use floods
   await mockFloods(
-    FloodsScenario.Trigger,
+    TriggerDataSet.TriggerScenario,
     TriggerDataSet.CountryCode,
     accessToken,
   );
@@ -33,37 +32,23 @@ test.beforeEach(async ({ page }) => {
 });
 
 test(
-  qase(
-    36,
-    '[Trigger] Exposed population legend is visible when exposed population layer is active',
-  ),
+  qase(44, '[Trigger] Show prediction button is clickable'),
   async ({ page }) => {
     const dashboard = new DashboardPage(page);
     const userState = new UserStateComponent(page);
-    const map = new MapComponent(page);
+    const chat = new ChatComponent(page);
 
     // Navigate to disaster type the data was mocked for
     await dashboard.navigateToFloodDisasterType();
     // Assertions
     await userState.headerComponentIsVisible({
       countryName: TriggerDataSet.CountryName,
     });
-    // Wait for the page to load
-    await dashboard.waitForLoaderToDisappear();
-
-    await map.mapComponentIsVisible();
-    await map.isLegendOpen({ legendOpen: true });
-    await map.isLayerMenuOpen({ layerMenuOpen: false });
-    await map.clickLayerMenu();
-    await map.isLayerMenuOpen({ layerMenuOpen: true });
-    await map.verifyLayerRadioButtonCheckedByName({
-      layerName: 'Exposed population',
-    });
-    await map.assertLegendElementIsVisible({
-      legendComponentName: 'Exposed population',
+    await chat.chatColumnIsVisibleForTriggerState({
+      firstName: TriggerDataSet.firstName,
+      lastName: TriggerDataSet.lastName,
     });
-    // Exposed population layer should be visible by default in trigger mode
-    // Validate that the aggregate pane is not empty after the layer is checked and loaded
-    await map.validateAggregatePaneIsNotEmpty();
+    await chat.allDefaultButtonsArePresent();
+    await chat.predictionButtonsAreActive();
   },
 );

tests/e2e/tests/Map/DefaultLegendLayersInTriggeredFlood.spec.ts

@@ -52,12 +52,28 @@ test(
     await dashboard.waitForLoaderToDisappear();
 
     await map.mapComponentIsVisible();
+
+    await map.clickLayerMenu();
+    await map.isLayerMenuOpen({ layerMenuOpen: true });
+    await map.verifyLayerCheckboxCheckedByName({
+      layerName: 'Flood extent',
+    });
+    await map.verifyLayerRadioButtonCheckedByName({
+      layerName: 'Exposed population',
+    });
+    // Validate legend
     await map.isLegendOpen({ legendOpen: true });
     await map.assertLegendElementIsVisible({
       legendComponentName: 'Flood extent',
     });
     await map.assertLegendElementIsVisible({
       legendComponentName: 'Exposed population',
     });
+    // Validatge that the layer checked with radio button is visible on the map in this case 'Exposed population' only one such layer can be checked at a time
+    await map.validateAggregatePaneIsNotEmpty();
+    // Validate rest of the map
+    await map.validateLayerIsVisibleInMapBySrcElement({
+      layerName: 'flood_extent',
+    });
   },
 );