From e0b4efa8f41ae61f86a0681f63f86e155875f3b8 Mon Sep 17 00:00:00 2001
From: piotrk39 <piotrk39@gmail.com>
Date: Wed, 27 Nov 2024 14:03:06 +0100
Subject: [PATCH] Add test without final assertion

---
 .../components/matrix/matrix.component.html   |  1 +
 tests/e2e/Pages/MapComponent.ts               | 21 ++++++
 .../ExposedPopulationVisibleInTrigger.spec.ts | 68 +++++++++++++++++++
 3 files changed, 90 insertions(+)
 create mode 100644 tests/e2e/tests/Map/ExposedPopulationVisibleInTrigger.spec.ts

diff --git a/interfaces/IBF-dashboard/src/app/components/matrix/matrix.component.html b/interfaces/IBF-dashboard/src/app/components/matrix/matrix.component.html
index b0c08570e..5b20af8ca 100644
--- a/interfaces/IBF-dashboard/src/app/components/matrix/matrix.component.html
+++ b/interfaces/IBF-dashboard/src/app/components/matrix/matrix.component.html
@@ -36,6 +36,7 @@
                 }
                 @if (isRadioButton(layer.group)) {
                   <ion-icon
+                    data-testid="matrix-radio-button"
                     [name]="
                       layer.active
                         ? 'radio-button-on-outline'
diff --git a/tests/e2e/Pages/MapComponent.ts b/tests/e2e/Pages/MapComponent.ts
index d41dca7c8..bfaf33330 100644
--- a/tests/e2e/Pages/MapComponent.ts
+++ b/tests/e2e/Pages/MapComponent.ts
@@ -16,6 +16,7 @@ class MapComponent extends DashboardPage {
   readonly layerMenu: Locator;
   readonly adminBoundry: Locator;
   readonly layerCheckbox: Locator;
+  readonly layerRadioButton: Locator;
   readonly legendHeader: Locator;
   readonly layerMenuToggle: Locator;
   readonly redCrossMarker: Locator;
@@ -45,6 +46,7 @@ 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.layerRadioButton = this.page.getByTestId('matrix-radio-button');
     this.legendHeader = this.page.getByTestId('map-legend-header');
     this.layerMenuToggle = this.page.getByTestId('layer-menu-toggle-button');
     this.redCrossMarker = this.page.getByAltText('Red Cross branches');
@@ -160,6 +162,25 @@ class MapComponent extends DashboardPage {
     }
   }
 
+  async verifyLayerRadioButtonCheckedByName({
+    layerName,
+  }: {
+    layerName: string;
+  }) {
+    const getLayerRow = this.page
+      .getByTestId('matrix-layer-name')
+      .filter({ hasText: layerName });
+    const layerCheckbox = getLayerRow.locator(this.layerRadioButton);
+
+    // In case of checbox being checked the name attribute should be "checkbox"
+    const nameAttribute = await layerCheckbox.getAttribute('name');
+    const isChecked = nameAttribute === 'radio-button-on-outline';
+
+    if (!isChecked) {
+      throw new Error(`Radio button for layer ${layerName} is not checked`);
+    }
+  }
+
   async clickInfoButtonByName({ layerName }: { layerName: string }) {
     await this.page
       .locator(`ion-item`)
diff --git a/tests/e2e/tests/Map/ExposedPopulationVisibleInTrigger.spec.ts b/tests/e2e/tests/Map/ExposedPopulationVisibleInTrigger.spec.ts
new file mode 100644
index 000000000..53f8b8091
--- /dev/null
+++ b/tests/e2e/tests/Map/ExposedPopulationVisibleInTrigger.spec.ts
@@ -0,0 +1,68 @@
+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 { TriggerDataSet } 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.Trigger,
+    TriggerDataSet.CountryCode,
+    accessToken,
+  );
+
+  await page.goto('/');
+  await loginPage.login(TriggerDataSet.UserMail, TriggerDataSet.UserPassword);
+});
+
+test(
+  qase(
+    36,
+    '[Trigger] Exposed population legend is visible when exposed population layer is active',
+  ),
+  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: 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.verifyLayerRadioButtonCheckedByName({
+      layerName: 'Exposed population',
+    });
+    await map.assertLegendElementIsVisible({
+      legendComponentName: 'Exposed population',
+    });
+
+    // Exposed population layer should be visible by default in trigger mode
+    console.log('Exposed population layer is visible');
+  },
+);