Add test for validating dynamic aggregates title.

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

@@ -1,12 +1,12 @@
 <div
  id="layer-menu-container"
- data-testid="layer-menu-container"
  [ngStyle]="{ height: getLayerMenuContainerHeightInRem() + 'rem' }"
 >
  <ion-button
  class="ion-no-margin ion-justify-content-between"
  color="ibf-no-alert-primary "
  id="layer-menu-toggle-button"
+ data-testid="layer-menu-toggle-button"
  (click)="toggleLayerMenu()"
  >
  <div>
@@ -21,12 +21,13 @@
  <ion-list class="ion-no-padding">
  @for (layer of getLayersInOrder(); track layer.name) {
  <ion-row class="ion-justify-content-between ion-nowrap">
- <ion-item lines="none">
+ <ion-item data-testid="matrix-layer-name" lines="none">
  @if (layer.isLoading) {
  <ion-spinner></ion-spinner>
  } @else {
  @if (isCheckBox(layer.group)) {
  <ion-icon
+ data-testid="matrix-checkbox"
  [name]="layer.active ? 'checkbox' : 'square-outline'"
  (click)="toggleLayer(layer)"
  class="single-layer-toggler"

tests/e2e/Pages/MapComponent.ts

@@ -1,6 +1,7 @@
 import { expect } from '@playwright/test';
 import { Locator, Page } from 'playwright';
 
+import AggregatesComponent from './AggregatesComponet';
 import DashboardPage from './DashboardPage';
 
 class MapComponent extends DashboardPage {
@@ -14,6 +15,8 @@ class MapComponent extends DashboardPage {
  readonly legend: Locator;
  readonly layerMenu: Locator;
  readonly adminBoundry: Locator;
+ readonly layerCheckbox: Locator;
+ readonly layerMenuToggle: Locator;
 
  constructor(page: Page) {
  super(page);
@@ -35,6 +38,8 @@ class MapComponent extends DashboardPage {
  this.legend = this.page.getByTestId('map-legend');
  this.layerMenu = this.page.getByTestId('layer-menu');
  this.adminBoundry = this.page.locator('.leaflet-interactive');
+ this.layerCheckbox = this.page.getByTestId('matrix-checkbox');
+ this.layerMenuToggle = this.page.getByTestId('layer-menu-toggle-button');
  }
 
  async mapComponentIsVisible() {
@@ -115,6 +120,36 @@ class MapComponent extends DashboardPage {
  await expect(adminBoundaries.nth(i)).toBeVisible();
  }
  }
+
+ async turnOffLayer({ layerName }: { layerName: string }) {
+ // Remove Glofas station from the map (in case the mock is for floods)
+ await this.layerMenuToggle.click();
+ const getLayerRow = this.page
+ .getByTestId('matrix-layer-name')
+ .filter({ hasText: layerName });
+ const layerCheckbox = getLayerRow.locator(this.layerCheckbox);
+ await layerCheckbox.click();
+ }
+
+ async assertAggregateTitleOnHoverOverMap() {
+ // Declare component
+ const aggregates = new AggregatesComponent(this.page);
+
+ // Wait for the page to load
+ await this.page.waitForLoadState('networkidle');
+ await this.page.waitForLoadState('domcontentloaded');
+ await this.page.waitForSelector('.leaflet-interactive');
+
+ // Assert the that Aggregates title is visible and does not contain the text 'National View'
+ // 20 is the more or less number of admin boundaries that can be hovered over with Playwright to succesfully assert the title
+ for (let i = 0; i < 20; i++) {
+ await this.page.waitForTimeout(200);
+ await this.adminBoundry.nth(i).hover();
+ await expect(aggregates.aggregatesTitleHeader).not.toContainText(
+ 'National View',
+ );
+ }
+ }
 }
 
 export default MapComponent;

tests/e2e/helpers/utility.helper.ts

@@ -1,7 +1,6 @@
 import * as request from 'supertest';
 import TestAgent from 'supertest/lib/agent';
 
-import { FloodsScenario } from '../../../services/API-service/src/scripts/enum/mock-scenario.enum';
 import users from '../../../services/API-service/src/scripts/json/users.json';
 
 export async function getAccessToken(): Promise<string> {
@@ -45,7 +44,7 @@ export function resetDB(accessToken: string): Promise<request.Response> {
 }
 
 export function mockFloods(
- scenario: FloodsScenario,
+ scenario: string,
  countryCodeISO3: string,
  accessToken: string,
 ): Promise<request.Response> {

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

@@ -0,0 +1,51 @@
+import { test } from '@playwright/test';
+import AggregatesComponent from 'Pages/AggregatesComponet';
+import DashboardPage from 'Pages/DashboardPage';
+import MapComponent from 'Pages/MapComponent';
+import { qase } from 'playwright-qase-reporter';
+import { NoTriggerDataSet } from 'testData/testData.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(
+ NoTriggerDataSet.NoTriggerScenario,
+ NoTriggerDataSet.CountryCode,
+ accessToken,
+ );
+
+ await page.goto('/');
+ await loginPage.login(
+ NoTriggerDataSet.UserMail,
+ NoTriggerDataSet.UserPassword,
+ );
+});
+
+test.skip(
+ qase(12, 'Aggregates title should be dynamic no-trigger'),
+ async ({ page }) => {
+ const dashboard = new DashboardPage(page);
+ const aggregates = new AggregatesComponent(page);
+ const map = new MapComponent(page);
+
+ // Navigate to disaster type the data was mocked for
+ await dashboard.navigateToFloodDisasterType();
+ // Assertions
+ await aggregates.aggregateComponentIsVisible();
+ await map.turnOffLayer({ layerName: 'Glofas stations' });
+ await map.assertAggregateTitleOnHoverOverMap();
+ },
+);

tests/e2e/tests/AggregatesSection/AllAggregatesComponentsPresentNotrigger.spec.ts

@@ -1,10 +1,9 @@
 import { test } from '@playwright/test';
-import AggregatesComponent from 'Pages/AggregateComponenet';
+import AggregatesComponent from 'Pages/AggregatesComponet';
 import DashboardPage from 'Pages/DashboardPage';
 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,
@@ -22,7 +21,7 @@ test.beforeEach(async ({ page }) => {
  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.NoTriggerScenario,
  NoTriggerDataSet.CountryCode,
  accessToken,
  );

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

@@ -5,7 +5,6 @@ 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,
@@ -23,7 +22,7 @@ test.beforeEach(async ({ page }) => {
  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.NoTriggerScenario,
  NoTriggerDataSet.CountryCode,
  accessToken,
  );

tests/e2e/tests/Dashboard/AllElementsPresentNoTrigger.spec.ts

@@ -1,5 +1,5 @@
 import { test } from '@playwright/test';
-import AggregatesComponent from 'Pages/AggregateComponenet';
+import AggregatesComponent from 'Pages/AggregatesComponet';
 import ChatComponent from 'Pages/ChatComponent';
 import DashboardPage from 'Pages/DashboardPage';
 import DisasterTypeComponent from 'Pages/DisasterTypeComponent';
@@ -8,7 +8,6 @@ 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,
@@ -26,7 +25,7 @@ test.beforeEach(async ({ page }) => {
  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.NoTriggerScenario,
  NoTriggerDataSet.CountryCode,
  accessToken,
  );

tests/e2e/tests/DisasterType/AllDisasterTypeComponentsPresentNotrigger.spec.ts

@@ -5,7 +5,6 @@ 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,
@@ -23,7 +22,7 @@ test.beforeEach(async ({ page }) => {
  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.NoTriggerScenario,
  NoTriggerDataSet.CountryCode,
  accessToken,
  );

tests/e2e/tests/DisasterType/SwitchBetweemDisasterType.spec.ts

@@ -4,7 +4,6 @@ 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,
@@ -22,7 +21,7 @@ test.beforeEach(async ({ page }) => {
  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.NoTriggerScenario,
  NoTriggerDataSet.CountryCode,
  accessToken,
  );

tests/e2e/tests/Map/AllMapComponentsPresentNotrigger.spec.ts

@@ -5,7 +5,6 @@ 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,
@@ -23,7 +22,7 @@ test.beforeEach(async ({ page }) => {
 
  // We should maybe create one mock for all different disaster types for now we can just use floods
  await mockFloods(
- FloodsScenario.NoTrigger,
+ NoTriggerDataSet.NoTriggerScenario,
  NoTriggerDataSet.CountryCode,
  accessToken,
  );

tests/e2e/tests/Timeline/TimelineComponentPresentNotrigger.spec.ts

@@ -5,7 +5,6 @@ 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,
@@ -23,7 +22,7 @@ test.beforeEach(async ({ page }) => {
  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.NoTriggerScenario,
  NoTriggerDataSet.CountryCode,
  accessToken,
  );

tests/e2e/tests/Timeline/TimelineInactiveInNotrigger.spec.ts

@@ -5,7 +5,6 @@ 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,
@@ -23,7 +22,7 @@ test.beforeEach(async ({ page }) => {
  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.NoTriggerScenario,
  NoTriggerDataSet.CountryCode,
  accessToken,
  );

tests/e2e/tests/UserState/AllUserStateComponentsPresentNotrigger.spec.ts

@@ -4,7 +4,6 @@ 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,
@@ -22,7 +21,7 @@ test.beforeEach(async ({ page }) => {
  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.NoTriggerScenario,
  NoTriggerDataSet.CountryCode,
  accessToken,
  );

tests/e2e/tests/UserState/SuccessfullyLogOut.spec.ts

@@ -4,7 +4,6 @@ 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,
@@ -22,7 +21,7 @@ test.beforeEach(async ({ page }) => {
  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.NoTriggerScenario,
  NoTriggerDataSet.CountryCode,
  accessToken,
  );