Merge pull request #1597 from rodekruis/feat.add-e2e-test-for-maps-no…

…-trigger

Feat.add e2e test for maps no trigger

e2e/Pages/AggregateComponenet.ts

@@ -0,0 +1,24 @@
+import { expect } from '@playwright/test';
+import { Locator, Page } from 'playwright';
+
+import DashboardPage from './DashboardPage';
+
+class AggregatesComponent extends DashboardPage {
+  readonly page: Page;
+  readonly aggregateSectionColumn: Locator;
+
+  constructor(page: Page) {
+    super(page);
+    this.page = page;
+    this.aggregateSectionColumn = this.page.getByTestId(
+      'dashboard-aggregate-section',
+    );
+  }
+
+  async aggregateComponentIsVisible() {
+    await expect(this.aggregateSectionColumn).toBeVisible();
+    await expect(this.aggregateSectionColumn).toContainText('National View');
+  }
+}
+
+export default AggregatesComponent;

e2e/Pages/ChatComponent.ts

@@ -0,0 +1,60 @@
+import { expect } from '@playwright/test';
+import { format } from 'date-fns';
+import { Locator, Page } from 'playwright';
+
+import EnglishTranslations from '../../interfaces/IBF-dashboard/src/assets/i18n/en.json';
+import DashboardPage from './DashboardPage';
+
+const chatDialogueContentWelcomeNoTrigger =
+  EnglishTranslations['chat-component'].floods['no-event-no-trigger'].welcome;
+const chatDialogueWarnLabel =
+  EnglishTranslations['chat-component'].common['warn-label'].message;
+
+class ChatComponent extends DashboardPage {
+  readonly page: Page;
+  readonly chatDialogue: Locator;
+
+  constructor(page: Page) {
+    super(page);
+    this.page = page;
+    this.chatDialogue = this.page.getByTestId('dialogue-turn-content');
+  }
+
+  async chatColumnIsVisibleForNoTriggerState({
+    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);
+    const chatDialogueContentNoAlerts =
+      chatDialogueContentWelcomeNoTrigger.replace(/<\/?strong>/g, '');
+
+    // Locators based on data-testid and filtered by formatted strings
+    const welcomeChatDialogue = this.chatDialogue.filter({
+      hasText: chatDialogueContent,
+    });
+    const noTriggerChatDialogue = this.chatDialogue.filter({
+      hasText: chatDialogueContentNoAlerts,
+    });
+
+    // Assertions
+    await expect(welcomeChatDialogue).toBeVisible();
+    await expect(noTriggerChatDialogue).toBeVisible();
+  }
+}
+
+export default ChatComponent;

e2e/Pages/DashboardPage.ts

@@ -0,0 +1,47 @@
+import { Locator, Page } from 'playwright';
+
+class DashboardPage {
+  readonly page: Page;
+  readonly floodIcon: Locator;
+  readonly heavyRainIcon: Locator;
+  readonly droughtIcon: Locator;
+  readonly dashboardDevControlButton: Locator;
+  readonly countrySwitcherDropdown: Locator;
+  readonly countrySwitcherDropdownOption: Locator;
+  readonly dashboardDevControlCloseButton: Locator;
+  readonly loader: Locator;
+
+  constructor(page: Page) {
+    this.page = page;
+    this.floodIcon = this.page.getByTestId('disaster-type-button-floods');
+    this.heavyRainIcon = this.page.getByTestId(
+      'disaster-type-button-heavy-rain',
+    );
+    this.droughtIcon = this.page.getByTestId('disaster-type-button-drought');
+    this.dashboardDevControlButton = this.page.getByTestId(
+      'dashboard-dev-control-button',
+    );
+    this.countrySwitcherDropdown = this.page.getByTestId(
+      'country-switcher-dropdown',
+    );
+    this.countrySwitcherDropdownOption = this.page.locator('ion-radio');
+    this.dashboardDevControlCloseButton = this.page.getByTestId(
+      'dashboard-dev-control-close-button',
+    );
+    this.loader = this.page.getByTestId('loader');
+  }
+
+  async navigateToFloodDisasterType() {
+    await this.floodIcon.click();
+  }
+
+  async navigateToHeavyRainDisasterType() {
+    await this.heavyRainIcon.click();
+  }
+
+  async navigateToDroughtDisasterType() {
+    await this.droughtIcon.click();
+  }
+}
+
+export default DashboardPage;

e2e/Pages/DisasterTypeComponent.ts

@@ -0,0 +1,22 @@
+import { expect } from '@playwright/test';
+import { Locator, Page } from 'playwright';
+
+import DashboardPage from './DashboardPage';
+
+class DisasterTypeComponent extends DashboardPage {
+  readonly page: Page;
+  readonly topBar: Locator;
+
+  constructor(page: Page) {
+    super(page);
+    this.page = page;
+    this.topBar = this.page.getByTestId('dashboard-top-bar');
+  }
+
+  async topBarComponentIsVisible() {
+    const topBar = this.topBar;
+    await expect(topBar).toBeVisible();
+  }
+}
+
+export default DisasterTypeComponent;

e2e/Pages/LoginPage.ts

@@ -1,8 +1,8 @@
 import { Locator, Page } from 'playwright';
 
-import BasePage from './BasePage';
+import DashboardPage from './DashboardPage';
 
-class LoginPage extends BasePage {
+class LoginPage extends DashboardPage {
   readonly page: Page;
   readonly usernameInput: Locator;
   readonly passwordInput: Locator;

e2e/Pages/MapComponent.ts

@@ -0,0 +1,120 @@
+import { expect } from '@playwright/test';
+import { Locator, Page } from 'playwright';
+
+import DashboardPage from './DashboardPage';
+
+class MapComponent extends DashboardPage {
+  readonly page: Page;
+  readonly mapComponent: Locator;
+  readonly breadCrumbNationalView: Locator;
+  readonly breadCrumbEventView: Locator;
+  readonly breadCrumbAdminAreaView: Locator;
+  readonly breadCrumbAdminArea2View: Locator;
+  readonly breadCrumbAdminArea3View: Locator;
+  readonly legend: Locator;
+  readonly layerMenu: Locator;
+  readonly adminBoundry: Locator;
+
+  constructor(page: Page) {
+    super(page);
+    this.page = page;
+    this.mapComponent = this.page.getByTestId('dashboard-map-componenet');
+    this.breadCrumbNationalView = this.page.getByTestId(
+      'breadcrumb-national-view',
+    );
+    this.breadCrumbEventView = this.page.getByTestId('breadcrumb-event-view');
+    this.breadCrumbAdminAreaView = this.page.getByTestId(
+      'breadcrumb-admin-area-view',
+    );
+    this.breadCrumbAdminArea2View = this.page.getByTestId(
+      'breadcrumb-admin-area-2-view',
+    );
+    this.breadCrumbAdminArea3View = this.page.getByTestId(
+      'breadcrumb-admin-area-3-view',
+    );
+    this.legend = this.page.getByTestId('map-legend');
+    this.layerMenu = this.page.getByTestId('layer-menu');
+    this.adminBoundry = this.page.locator('.leaflet-interactive');
+  }
+
+  async mapComponentIsVisible() {
+    await expect(this.mapComponent).toBeVisible();
+  }
+
+  async breadCrumbViewIsVisible({
+    nationalView = false,
+    eventView = false,
+    adminAreaView = false,
+    adminAreaView2 = false,
+    adminAreaView3 = false,
+  }: {
+    nationalView?: boolean;
+    eventView?: boolean;
+    adminAreaView?: boolean;
+    adminAreaView2?: boolean;
+    adminAreaView3?: boolean;
+  }) {
+    if (nationalView) {
+      await expect(this.breadCrumbNationalView).toBeVisible();
+    } else {
+      await expect(this.breadCrumbNationalView).toBeHidden();
+    }
+    if (eventView) {
+      await expect(this.breadCrumbEventView).toBeVisible();
+    } else {
+      await expect(this.breadCrumbEventView).toBeHidden();
+    }
+    if (adminAreaView) {
+      await expect(this.breadCrumbAdminAreaView).toBeVisible();
+    } else {
+      await expect(this.breadCrumbAdminAreaView).toBeHidden();
+    }
+    if (adminAreaView2) {
+      await expect(this.breadCrumbAdminArea2View).toBeVisible();
+    } else {
+      await expect(this.breadCrumbAdminArea2View).toBeHidden();
+    }
+    if (adminAreaView3) {
+      await expect(this.breadCrumbAdminArea3View).toBeVisible();
+    } else {
+      await expect(this.breadCrumbAdminArea3View).toBeHidden();
+    }
+  }
+
+  async isLegendOpen({ legendOpen = false }: { legendOpen?: boolean }) {
+    if (legendOpen) {
+      await expect(this.legend).toHaveAttribute('open');
+    } else {
+      await expect(this.legend).not.toHaveAttribute('open');
+    }
+  }
+
+  async isLayerMenuOpen({
+    layerMenuOpen = false,
+  }: {
+    layerMenuOpen?: boolean;
+  }) {
+    if (layerMenuOpen) {
+      await expect(this.layerMenu).toBeVisible();
+    } else {
+      await expect(this.layerMenu).toBeHidden();
+    }
+  }
+
+  async assertAdminBoundariesVisible() {
+    await this.page.waitForLoadState('networkidle');
+    await this.page.waitForLoadState('domcontentloaded');
+    // await this.page.waitForTimeout(500); // This is a workaround for the issue with the map not loading in the same moment as the dom
+    await this.page.waitForSelector('.leaflet-interactive');
+
+    const adminBoundaries = this.adminBoundry;
+    const count = await adminBoundaries.count();
+
+    expect(count).toBeGreaterThan(0);
+    for (let i = 0; i < count; i++) {
+      await expect(adminBoundaries.nth(i)).toBeVisible();
+    }
+  }
+}
+
+export default MapComponent;

e2e/Pages/UserStateComponent.ts

@@ -0,0 +1,24 @@
+import { expect } from '@playwright/test';
+import { Locator, Page } from 'playwright';
+
+import DashboardPage from './DashboardPage';
+
+class UserStateComponent extends DashboardPage {
+  readonly page: Page;
+  readonly header: Locator;
+
+  constructor(page: Page) {
+    super(page);
+    this.page = page;
+    this.header = this.page.getByTestId('heading-display-name-span');
+  }
+
+  async headerComponentIsVisible({ countryName }: { countryName: string }) {
+    const header = this.header.filter({
+      hasText: `IBF PORTAL ${countryName}`,
+    });
+    await expect(header).toBeVisible();
+  }
+}
+
+export default UserStateComponent;

e2e/package.json

@@ -30,6 +30,7 @@
   },
   "dependencies": {
     "@alex_neo/playwright-azure-reporter": "^1.10.1",
+    "date-fns": "^4.1.0",
     "dotenv": "16.4.5",
     "playwright": "^1.47.0",
     "structured-clone": "^0.2.2",

e2e/testData/testData.enum.ts

@@ -0,0 +1,10 @@
+/* eslint-disable @typescript-eslint/no-duplicate-enum-values */
+export enum NoTriggerDataSet {
+  NoTriggerScenario = 'no-trigger',
+  CountryCode = 'UGA',
+  CountryName = 'Uganda',
+  UserMail = '[email protected]',
+  UserPassword = 'password',
+  firstName = 'Uganda',
+  lastName = 'Manager',
+}