Merge pull request #1785 from rodekruis/feat.add-e2e-test-for-default…

…-map-checkboxes-in-floods

Add e2e test for default map checkboxes

interfaces/IBF-dashboard/src/app/services/point-marker.service.ts

@@ -145,7 +145,7 @@ export class PointMarkerService {
     const markerInstance = marker(markerLatLng, {
       title: markerTitle,
       icon: markerIcon ? icon(markerIcon) : divIcon(),
-      alt: 'glofas-station-marker',
+      alt: 'Glofas stations',
       zIndexOffset: 700,
     });
     markerInstance.bindPopup(
@@ -247,7 +247,7 @@ export class PointMarkerService {
     const markerInstance = marker(markerLatLng, {
       title: markerTitle,
       icon: icon(LEAFLET_MARKER_ICON_OPTIONS_RED_CROSS_BRANCH),
-      alt: 'red-cross-branch-marker',
+      alt: 'Red Cross branches',
     });
     markerInstance.bindPopup(this.createMarkerRedCrossPopup(markerProperties));
     markerInstance.on(

tests/e2e/Pages/MapComponent.ts

@@ -45,8 +45,8 @@ class MapComponent extends DashboardPage {
     this.layerCheckbox = this.page.getByTestId('matrix-checkbox');
     this.legendHeader = this.page.getByTestId('map-legend-header');
     this.layerMenuToggle = this.page.getByTestId('layer-menu-toggle-button');
-    this.redCrossMarker = this.page.getByAltText('red-cross-branch-marker');
-    this.gloFASMarker = this.page.getByAltText('glofas-station-marker');
+    this.redCrossMarker = this.page.getByAltText('Red Cross branches');
+    this.gloFASMarker = this.page.getByAltText('Glofas stations');
     this.alerThresholdLines = this.page.locator(
       '[stroke="var(--ion-color-ibf-outline-red)"]',
     );
@@ -141,7 +141,7 @@ class MapComponent extends DashboardPage {
     await layerCheckbox.click();
   }
 
-  async validateCheckboxIsChekced({ layerName }: { layerName: string }) {
+  async verifyLayerCheckboxCheckedByName({ layerName }: { layerName: string }) {
     const getLayerRow = this.page
       .getByTestId('matrix-layer-name')
       .filter({ hasText: layerName });
@@ -156,6 +156,44 @@ class MapComponent extends DashboardPage {
     }
   }
 
+  async retryGetAttribute(locator: Locator, attribute: string, retries = 3) {
+    for (let attempt = 0; attempt < retries; attempt++) {
+      try {
+        return await locator.getAttribute(attribute);
+      } catch (error) {
+        console.log(`Retry ${attempt + 1} for attribute ${attribute} failed`);
+        if (attempt === retries - 1) throw error;
+      }
+    }
+  }
+
+  async returnLayerCheckedCheckboxes() {
+    const getLayerRow = this.page.getByTestId('matrix-layer-name');
+    const layerCount = await getLayerRow.count();
+
+    const availableLayers = [];
+    for (let i = 0; i < layerCount; i++) {
+      try {
+        const layerCheckbox = getLayerRow.nth(i).locator(this.layerCheckbox);
+        if (await layerCheckbox.isVisible()) {
+          const nameAttribute = await this.retryGetAttribute(
+            layerCheckbox,
+            'name',
+          );
+          if (nameAttribute === 'checkbox') {
+            const layerName = await getLayerRow.nth(i).textContent();
+            if (layerName) {
+              availableLayers.push(layerName.trim());
+            }
+          }
+        }
+      } catch (error) {
+        // Handle errors without stopping the loop
+      }
+    }
+    return availableLayers;
+  }
+
   async assertAggregateTitleOnHoverOverMap() {
     // Declare component
     const aggregates = new AggregatesComponent(this.page);
@@ -206,7 +244,7 @@ class MapComponent extends DashboardPage {
 
   async redCrossMarkersAreVisible() {
     // Wait for the page to load
-    await this.page.waitForSelector('[alt="red-cross-branch-marker"]');
+    await this.page.waitForSelector('[alt="Red Cross branches"]');
 
     // Count the number of red cross markers
     const redCrossMarkersCount = await this.redCrossMarker.count();
@@ -219,7 +257,7 @@ class MapComponent extends DashboardPage {
 
   async gloFASMarkersAreVisible() {
     // Wait for the page to load
-    await this.page.waitForSelector('[alt="glofas-station-marker"]');
+    await this.page.waitForSelector('[alt="Glofas stations"]');
 
     // Count the number of gloFAS markers
     const gloFASMarkersCount = await this.gloFASMarker.count();
@@ -229,5 +267,23 @@ class MapComponent extends DashboardPage {
     expect(gloFASMarkersCount).toBeGreaterThan(0);
     await expect(this.gloFASMarker.nth(nthSelector)).toBeVisible();
   }
+
+  async validateLayersAreVisibleByName({
+    layerNames = [],
+  }: {
+    layerNames: string[];
+  }) {
+    for (const layerName of layerNames) {
+      await this.page.waitForSelector(`[alt="${layerName}"]`);
+      const layer = this.page.getByAltText(layerName);
+      // Count the number of markers
+      const markersCount = await layer.count();
+      const nthSelector = this.getRandomInt(1, markersCount);
+
+      // Assert that the number of gloFAS markers is greater than 0 and randomly select one to be visible
+      expect(markersCount).toBeGreaterThan(0);
+      await expect(layer.nth(nthSelector)).toBeVisible();
+    }
+  }
 }
 export default MapComponent;

tests/e2e/tests/Map/AssertAllSelectedCheckboxesLayersArePresent.spec.ts

@@ -0,0 +1,69 @@
+import { test } from '@playwright/test';
+import DashboardPage from 'Pages/DashboardPage';
+import MapComponent from 'Pages/MapComponent';
+import UserStateComponent from 'Pages/UserStateComponent';
+import { qase } from 'playwright-qase-reporter';
+import { NoTriggerDataSet } from 'testData/testData.enum';
+
+import { FloodsScenario } from '../../../../services/API-service/src/scripts/enum/mock-scenario.enum';
+import {
+  getAccessToken,
+  mockFloods,
+  resetDB,
+} from '../../helpers/utility.helper';
+import LoginPage from '../../Pages/LoginPage';
+
+let accessToken: string;
+let checkedLayers;
+
+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.NoTrigger,
+    NoTriggerDataSet.CountryCode,
+    accessToken,
+  );
+
+  await page.goto('/');
+  await loginPage.login(
+    NoTriggerDataSet.UserMail,
+    NoTriggerDataSet.UserPassword,
+  );
+});
+
+test(
+  qase(32, 'Check if (default) checked checkbox-layers show in map'),
+  async ({ page }) => {
+    const dashboard = new DashboardPage(page);
+    const userState = new UserStateComponent(page);
+    const map = new MapComponent(page);
+
+    // Navigate to disaster type the data was mocked for
+    await dashboard.navigateToFloodDisasterType();
+    // Assertions
+    await userState.headerComponentIsVisible({
+      countryName: NoTriggerDataSet.CountryName,
+    });
+    // Wait for the page to load
+    await dashboard.waitForLoaderToDisappear();
+    await map.mapComponentIsVisible();
+
+    // Open the layer menu
+    await map.isLayerMenuOpen({ layerMenuOpen: false });
+    await map.clickLayerMenu();
+    await map.isLayerMenuOpen({ layerMenuOpen: true });
+
+    // Check if the default layers are visible
+    checkedLayers = await map.returnLayerCheckedCheckboxes();
+    if (checkedLayers) {
+      await map.validateLayersAreVisibleByName({ layerNames: checkedLayers });
+    } else {
+      throw new Error('No layers are visible');
+    }
+  },
+);

tests/e2e/tests/Map/GlofasStationsVisibleNoTrigger.spec.ts

@@ -58,7 +58,9 @@ test(
     await map.isLegendOpen({ legendOpen: true });
     await map.isLayerMenuOpen({ layerMenuOpen: false });
     await map.clickLayerMenu();
-    await map.validateCheckboxIsChekced({ layerName: 'Glofas stations' });
+    await map.verifyLayerCheckboxCheckedByName({
+      layerName: 'Glofas stations',
+    });
     await map.assertLegendElementIsVisible({
       legendComponentName: 'GloFAS No action',
     });