Merge pull request #1878 from rodekruis/feat.add-e2e-test-info-icon-o…

…pens-popover

Add E2E test for: [Trigger] Info icon is clickable and opens popover

interfaces/IBF-dashboard/src/app/components/event-speech-bubble/event-speech-bubble.component.html

@@ -19,6 +19,7 @@
           </span>
         </span>
         <app-tooltip
+          data-testid="tooltip-button"
           class="event-header--tooltip"
           [value]="'chat-component.common.event-tooltip' | translate"
           color="ibf-no-alert-primary"
@@ -84,6 +85,7 @@
           </span>
         </span>
         <app-tooltip
+          data-testid="tooltip-button"
           class="event-header--tooltip"
           [value]="'chat-component.common.event-tooltip' | translate"
           color="ibf-no-alert-primary"

tests/e2e/Pages/ChatComponent.ts

@@ -10,6 +10,8 @@ const chatDialogueContentWelcomeNoTrigger =
   EnglishTranslations['chat-component'].floods['no-event-no-trigger'].welcome;
 const chatDialogueWarnLabel =
   EnglishTranslations['chat-component'].common['warn-label'].message;
+const eventTooltipContent =
+  EnglishTranslations['chat-component'].common['event-tooltip'];
 
 class ChatComponent extends DashboardPage {
   readonly page: Page;
@@ -26,6 +28,8 @@ class ChatComponent extends DashboardPage {
   readonly windowsOsLink: Locator;
   readonly macOsLink: Locator;
   readonly linuxOsLink: Locator;
+  readonly tooltipButton: Locator;
+  readonly backDrop: Locator;
 
   constructor(page: Page) {
     super(page);
@@ -48,6 +52,8 @@ class ChatComponent extends DashboardPage {
     this.windowsOsLink = this.page.getByTestId('export-view-windows-os');
     this.macOsLink = this.page.getByTestId('export-view-mac-os');
     this.linuxOsLink = this.page.getByTestId('export-view-linux-os');
+    this.tooltipButton = this.page.getByTestId('tooltip-button');
+    this.backDrop = page.locator('ion-backdrop').nth(2);
   }
 
   async chatColumnIsVisibleForNoTriggerState({
@@ -194,6 +200,17 @@ class ChatComponent extends DashboardPage {
     }
     return countPredictionButtons;
   }
+
+  async validateEventsInfoButtonsAreClickable() {
+    const counttoolTipInfoButton = await this.tooltipButton.count();
+
+    for (let i = 0; i < counttoolTipInfoButton; i++) {
+      const toolTipInfoButton = this.tooltipButton.nth(i);
+      await toolTipInfoButton.click();
+      await this.validatePopOverText({ text: eventTooltipContent });
+      await this.backDrop.click();
+    }
+  }
 }
 
 export default ChatComponent;

tests/e2e/Pages/DashboardPage.ts

@@ -1,3 +1,4 @@
+import { expect } from '@playwright/test';
 import { Locator, Page } from 'playwright';
 
 class DashboardPage {
@@ -65,6 +66,14 @@ class DashboardPage {
       state: 'hidden',
     });
   }
+
+  async validatePopOverText({ text }: { text: string }) {
+    const popOverText = await this.page
+      .locator('app-tooltip-popover')
+      .textContent();
+    const popOverTextTrimmed = popOverText?.trim();
+    expect(popOverTextTrimmed).toContain(text);
+  }
 }
 
 export default DashboardPage;

tests/e2e/tests/ChatSection/ChatInfoButtonOpenPopOver.spec.ts

@@ -0,0 +1,53 @@
+import { test } from '@playwright/test';
+import ChatComponent from 'Pages/ChatComponent';
+import DashboardPage from 'Pages/DashboardPage';
+import UserStateComponent from 'Pages/UserStateComponent';
+import { qase } from 'playwright-qase-reporter';
+import { TriggerDataSet } 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(
+    TriggerDataSet.TriggerScenario,
+    TriggerDataSet.CountryCode,
+    accessToken,
+  );
+
+  await page.goto('/');
+  await loginPage.login(TriggerDataSet.UserMail, TriggerDataSet.UserPassword);
+});
+// https://app.qase.io/project/IBF?case=45&previewMode=side&suite=6
+test(
+  qase(45, '[Trigger] Info icon is clickable and opens popover'),
+  async ({ page }) => {
+    const dashboard = new DashboardPage(page);
+    const userState = new UserStateComponent(page);
+    const chat = new ChatComponent(page);
+
+    // Navigate to disaster type the data was mocked for
+    await dashboard.navigateToFloodDisasterType();
+    // Assertions
+    await userState.headerComponentIsVisible({
+      countryName: TriggerDataSet.CountryName,
+    });
+    await chat.chatColumnIsVisibleForTriggerState({
+      firstName: TriggerDataSet.firstName,
+      lastName: TriggerDataSet.lastName,
+    });
+    await chat.validateEventsInfoButtonsAreClickable();
+  },
+);