Add e2e test for chat buttons

interfaces/IBF-dashboard/src/app/components/export-view-popover/export-view-popover.component.html

@@ -1,19 +1,23 @@
 <ion-card data-test="export-view-popover" class="popover-window-card">
   <ion-card-header color="ibf-primary">
     <ion-icon
+      data-testid="export-view-close-button"
       name="close-circle"
       size="large"
       (click)="closePopover()"
       class="popover-close-button"
     ></ion-icon>
-    <ion-card-title>Export View</ion-card-title>
+    <ion-card-title data-testid="export-view-title">Export View</ion-card-title>
   </ion-card-header>
   <ion-card-content class="ion-padding-top">
     <div class="ion-margin-bottom">
       In order to export the current view of the IBF-dashboard, you will need to
       take a screenshot.
     </div>
-    <ion-text [class.ion-hide]="getOperatingSystem() !== 'Windows'">
+    <ion-text
+      data-testid="export-view-windows-os"
+      [class.ion-hide]="getOperatingSystem() !== 'Windows'"
+    >
       <a
         href="https://support.microsoft.com/en-us/windows/open-snipping-tool-and-take-a-screenshot-a35ac9ff-4a58-24c9-3253-f12bac9f9d44"
         title="Instructions to take a screenshot on the Windows Operation System"
@@ -23,7 +27,10 @@
         Instructions to take a screenshot on the Windows Operation System
       </a>
     </ion-text>
-    <ion-text [class.ion-hide]="getOperatingSystem() !== 'MacOS'">
+    <ion-text
+      data-testid="export-view-mac-os"
+      [class.ion-hide]="getOperatingSystem() !== 'MacOS'"
+    >
       <a
         href="https://support.apple.com/en-us/HT201361"
         title="Instructions to take a screenshot on the Mac Operation System"
@@ -33,7 +40,10 @@
         Instructions to take a screenshot on the Mac Operation System
       </a>
     </ion-text>
-    <ion-text [class.ion-hide]="getOperatingSystem() !== 'Linux'">
+    <ion-text
+      data-testid="export-view-linux-os"
+      [class.ion-hide]="getOperatingSystem() !== 'Linux'"
+    >
       <a
         href="https://help.ubuntu.com/stable/ubuntu-help/screen-shot-record.html"
         title="Instructions to take a screenshot on the Linux Operation System"

interfaces/IBF-dashboard/src/app/components/ibf-guide-popover/ibf-guide-popover.component.html

@@ -1,16 +1,17 @@
 <ion-card data-test="ibf-guide-popover" class="popover-window-card">
   <ion-card-header color="ibf-primary">
     <ion-icon
+      data-testid="ibf-guide-close-button"
       name="close-circle"
       size="large"
       (click)="closePopover()"
       class="popover-close-button"
     ></ion-icon>
-    <ion-card-title>{{
+    <ion-card-title data-testid="ibf-guide-title">{{
       'ibf-guide-component.title' | translate
     }}</ion-card-title>
   </ion-card-header>
-  <ion-card-content class="ion-padding-top">
+  <ion-card-content data-testid="ibf-guide-content" class="ion-padding-top">
     <p
       [innerHTML]="
         'ibf-guide-component.video-pdf-description'

tests/e2e/Pages/ChatComponent.ts

@@ -1,5 +1,6 @@
 import { expect } from '@playwright/test';
 import { format } from 'date-fns';
+import * as os from 'os';
 import { Locator, Page } from 'playwright';
 
 import EnglishTranslations from '../../../interfaces/IBF-dashboard/src/assets/i18n/en.json';
@@ -17,6 +18,14 @@ class ChatComponent extends DashboardPage {
   readonly chatGuideButton: Locator;
   readonly exportViewButton: Locator;
   readonly triggerLogButton: Locator;
+  readonly chatIbfGuidePopOverTitle: Locator;
+  readonly chatIbfGuidePopOverContent: Locator;
+  readonly chatIbfGuideCloseButton: Locator;
+  readonly exportViewPopOverTitle: Locator;
+  readonly exportViewCloseButton: Locator;
+  readonly windowsOsLink: Locator;
+  readonly macOsLink: Locator;
+  readonly linuxOsLink: Locator;
 
   constructor(page: Page) {
     super(page);
@@ -26,6 +35,19 @@ class ChatComponent extends DashboardPage {
     this.chatGuideButton = this.page.getByTestId('ibf-guide-button');
     this.exportViewButton = this.page.getByTestId('export-view-button');
     this.triggerLogButton = this.page.getByTestId('trigger-log-button');
+    this.chatIbfGuidePopOverTitle = this.page.getByTestId('ibf-guide-title');
+    this.chatIbfGuidePopOverContent =
+      this.page.getByTestId('ibf-guide-content');
+    this.chatIbfGuideCloseButton = this.page.getByTestId(
+      'ibf-guide-close-button',
+    );
+    this.exportViewPopOverTitle = this.page.getByTestId('export-view-title');
+    this.exportViewCloseButton = this.page.getByTestId(
+      'export-view-close-button',
+    );
+    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');
   }
 
   async chatColumnIsVisibleForNoTriggerState({
@@ -70,6 +92,67 @@ class ChatComponent extends DashboardPage {
     await expect(this.exportViewButton).toBeVisible();
     await expect(this.triggerLogButton).toBeVisible();
   }
+
+  async clickAndAssertAboutButton() {
+    // Listen for new page event
+    const [newPage] = await Promise.all([
+      this.page.context().waitForEvent('page'),
+      await this.chatAboutButton.click(),
+    ]);
+
+    // Assert new page is opened
+    expect(newPage).not.toBeNull();
+    await newPage.close();
+  }
+
+  async clickAndAssertGuideButton() {
+    // Open IBF Guide Popover
+    await this.chatGuideButton.click();
+
+    // Assert Popover Title and Iframe are visible
+    const ibfGuidePopOverTitle =
+      await this.chatIbfGuidePopOverTitle.innerText();
+    const ibfGuidePopOverIframe =
+      this.chatIbfGuidePopOverContent.locator('iframe');
+    expect(ibfGuidePopOverTitle).toContain('IBF Guide');
+    await expect(this.chatIbfGuidePopOverContent).toBeVisible();
+    await expect(ibfGuidePopOverIframe).toBeVisible();
+
+    // Close IBF Guide Popover
+    await this.chatIbfGuideCloseButton.click();
+  }
+
+  async clickAndAssertExportViewButton() {
+    // Open Export View Popover
+    await this.exportViewButton.click();
+
+    // Define OS
+    const platform = os.platform();
+
+    // Assert Popover Title and link are visible
+    if (platform === 'win32') {
+      await expect(this.windowsOsLink).toBeVisible();
+    } else if (platform === 'darwin') {
+      await expect(this.macOsLink).toBeVisible();
+    } else if (platform === 'linux') {
+      await expect(this.linuxOsLink).toBeVisible();
+    }
+
+    // Close Export View Popover
+    await this.exportViewCloseButton.click();
+  }
+
+  async clickAndAssertTriggerLogButton({ url }: { url: string }) {
+    // Open Trigger Log
+    const [newPage] = await Promise.all([
+      this.page.context().waitForEvent('page'),
+      await this.triggerLogButton.click(),
+    ]);
+
+    // Assert new page is opened
+    await expect(newPage).toHaveURL(url);
+    await newPage.close();
+  }
 }
 
 export default ChatComponent;

tests/e2e/tests/ChatSection/AllChatActionButtonsActiveInNoTrigger.spec.ts

@@ -0,0 +1,61 @@
+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 { 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(
+  qase(
+    11,
+    'All Chat section action buttons can be selected in no-trigger mode',
+  ),
+  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: NoTriggerDataSet.CountryName,
+    });
+    await chat.allChatButtonsArePresent();
+    await chat.clickAndAssertAboutButton();
+    await chat.clickAndAssertGuideButton();
+    await chat.clickAndAssertExportViewButton();
+    await chat.clickAndAssertTriggerLogButton({
+      url: `/log?countryCodeISO3=${NoTriggerDataSet.CountryCode}&disasterType=floods`,
+    });
+  },
+);