Merge pull request #1662 from rodekruis/feat.add-e2e-test-for-map-fun…

…ctionalities-no-trigger

interfaces/IBF-dashboard/src/app/components/map/map.component.ts

@@ -332,7 +332,7 @@ export class MapComponent implements AfterViewInit, OnDestroy {
           index === self.findIndex((t) => t.name === value.name),
       ); // deduplicate based on name (for e.g. waterpoints_internal)
 
-    let detailsString = `<details data-testid="map-legend" open><summary><div class="legend-header">${this.mapLegendService.getLegendTitle()}
+    let detailsString = `<details data-testid="map-legend" open><summary><div data-testid="map-legend-header" class="legend-header">${this.mapLegendService.getLegendTitle()}
     <ion-icon class="icon-down" name="chevron-down-outline"></ion-icon>
     <ion-icon class="icon-up" name="chevron-up-outline"></ion-icon></div>
     </summary>`;

interfaces/IBF-dashboard/src/app/components/matrix/matrix.component.html

@@ -5,6 +5,7 @@
   <ion-button
     class="ion-no-margin ion-justify-content-between"
     color="ibf-no-alert-primary "
+    data-testid="layer-menu-toggle-button"
     id="layer-menu-toggle-button"
     data-testid="layer-menu-toggle-button"
     (click)="toggleLayerMenu()"

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

@@ -246,6 +246,7 @@ export class PointMarkerService {
     const markerInstance = marker(markerLatLng, {
       title: markerTitle,
       icon: icon(LEAFLET_MARKER_ICON_OPTIONS_RED_CROSS_BRANCH),
+      alt: 'red-cross-branch-marker',
     });
     markerInstance.bindPopup(this.createMarkerRedCrossPopup(markerProperties));
     markerInstance.on(

tests/e2e/Pages/DashboardPage.ts

@@ -33,6 +33,12 @@ class DashboardPage {
     this.loader = this.page.getByTestId('loader');
   }
 
+  getRandomInt(min: number, max: number): number {
+    min = Math.ceil(min);
+    max = Math.floor(max);
+    return Math.floor(Math.random() * (max - min + 1)) + min;
+  }
+
   async navigateToFloodDisasterType() {
     await this.page.waitForSelector(
       '[data-testid=disaster-type-button-floods]',
@@ -53,6 +59,12 @@ class DashboardPage {
     );
     await this.droughtIcon.click();
   }
+
+  async waitForLoaderToDisappear() {
+    await this.page.waitForSelector('[data-testid=loader]', {
+      state: 'hidden',
+    });
+  }
 }
 
 export default DashboardPage;

tests/e2e/Pages/MapComponent.ts

@@ -16,7 +16,9 @@ class MapComponent extends DashboardPage {
   readonly layerMenu: Locator;
   readonly adminBoundry: Locator;
   readonly layerCheckbox: Locator;
+  readonly legendHeader: Locator;
   readonly layerMenuToggle: Locator;
+  readonly redCrossMarker: Locator;
 
   constructor(page: Page) {
     super(page);
@@ -39,7 +41,9 @@ class MapComponent extends DashboardPage {
     this.layerMenu = this.page.getByTestId('layer-menu');
     this.adminBoundry = this.page.locator('.leaflet-interactive');
     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');
   }
 
   async mapComponentIsVisible() {
@@ -121,7 +125,7 @@ class MapComponent extends DashboardPage {
     }
   }
 
-  async turnOffLayer({ layerName }: { layerName: string }) {
+  async clickLayerCheckbox({ layerName }: { layerName: string }) {
     // Remove Glofas station from the map (in case the mock is for floods)
     await this.layerMenuToggle.click();
     const getLayerRow = this.page
@@ -147,6 +151,26 @@ class MapComponent extends DashboardPage {
       'National View',
     );
   }
-}
 
+  async clickLegendHeader() {
+    await this.legendHeader.click();
+  }
+
+  async clickLayerMenu() {
+    await this.layerMenuToggle.click();
+  }
+
+  async redCrossMarkersAreVisible() {
+    // Wait for the page to load
+    await this.page.waitForSelector('[alt="red-cross-branch-marker"]');
+
+    // Count the number of red cross markers
+    const redCrossMarkersCount = await this.redCrossMarker.count();
+    const nthSelector = this.getRandomInt(1, redCrossMarkersCount);
+
+    // Assert that the number of red cross markers is greater than 0 and randomly select one to be visible
+    expect(redCrossMarkersCount).toBeGreaterThan(0);
+    await expect(this.redCrossMarker.nth(nthSelector)).toBeVisible();
+  }
+}
 export default MapComponent;

tests/e2e/tests/AggregatesSection/AggregatesHasDynamicTitle.spec.ts

@@ -33,9 +33,15 @@ test.beforeEach(async ({ page }) => {
     NoTriggerDataSet.UserPassword,
   );
 });
-
-test(
-  qase(12, 'Aggregates title should be dynamic no-trigger'),
+// The test is skipped because of the bug that was identified during writing of this test
+// The bug is that the marker of glofas stations cannot be disabled with the first chebox click (needs several) and it is failing on flood disaster type
+// https://github.com/rodekruis/IBF-system/issues/1657
+// When the bug is fixed, the test should be unskipped
+test.skip(
+  qase(
+    12,
+    'Aggregates title should be dynamic upon hovering over map district',
+  ),
   async ({ page }) => {
     const dashboard = new DashboardPage(page);
     const aggregates = new AggregatesComponent(page);
@@ -45,7 +51,7 @@ test(
     await dashboard.navigateToFloodDisasterType();
     // Assertions
     await aggregates.aggregateComponentIsVisible();
-    await map.turnOffLayer({ layerName: 'Glofas stations' });
+    await map.clickLayerCheckbox({ layerName: 'Glofas stations' });
     await map.assertAggregateTitleOnHoverOverMap();
   },
 );

tests/e2e/tests/Map/AssertMapFunctionalitiesNotrigger.spec.ts

@@ -0,0 +1,73 @@
+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;
+
+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(7, 'Verify Map functionality for no-triggered mode'),
+  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();
+
+    // Close the legend
+    await map.isLegendOpen({ legendOpen: true });
+    await map.clickLegendHeader();
+    await map.isLegendOpen({ legendOpen: false });
+
+    // Open the layer menu
+    await map.isLayerMenuOpen({ layerMenuOpen: false });
+    await map.clickLayerMenu();
+    await map.isLayerMenuOpen({ layerMenuOpen: true });
+
+    // Select and deselect the layer
+    await map.clickLayerMenu();
+    await map.clickLayerCheckbox({ layerName: 'Red Cross branches' });
+    await map.isLayerMenuOpen({ layerMenuOpen: true });
+
+    // Red Cross branches layer should be visible
+    await map.redCrossMarkersAreVisible();
+  },
+);