refactor: use describe to group e2e tests

tests/e2e/Pages/MapComponent.ts

@@ -372,7 +372,7 @@ class MapComponent extends DashboardPage {
 
     if (isVisible) {
       const markersCount = await glofasMarker.count();
-      const nthSelector = this.getRandomInt(0, markersCount - 1);
+      const nthSelector = this.getRandomInt(1, markersCount);
 
       expect(markersCount).toBeGreaterThan(0);
       await expect(glofasMarker.nth(nthSelector)).toBeVisible();

tests/e2e/helpers/interfaces.ts

@@ -0,0 +1,22 @@
+import AggregatesComponent from 'Pages/AggregatesComponent';
+import ChatComponent from 'Pages/ChatComponent';
+import DashboardPage from 'Pages/DashboardPage';
+import DisasterTypeComponent from 'Pages/DisasterTypeComponent';
+import LoginPage from 'Pages/LoginPage';
+import MapComponent from 'Pages/MapComponent';
+import TimelineComponent from 'Pages/TimelineComponent';
+import UserStateComponent from 'Pages/UserStateComponent';
+
+export interface Pages {
+  login: LoginPage;
+  dashboard: DashboardPage;
+}
+
+export interface Components {
+  map: MapComponent;
+  userState: UserStateComponent;
+  aggregates: AggregatesComponent;
+  chat: ChatComponent;
+  disasterType: DisasterTypeComponent;
+  timeline: TimelineComponent;
+}

tests/e2e/playwright.config.ts

@@ -11,9 +11,8 @@ export default defineConfig({
   /* Run tests in files in parallel */
   fullyParallel: false,
   /* Fail the build on CI if you accidentally left test.only in the source code. */
-  forbidOnly: !!process.env.CI,
-  /* Retry on CI only */
-  retries: 1,
+  forbidOnly: process.env.NODE_ENV !== 'development',
+  retries: 0,
   /* Opt out of parallel tests on CI. */
   // reporter: [
   //   ['list'],

tests/e2e/tests/AggregatesComponent/AggregateComponentButtonClick.ts

@@ -0,0 +1,31 @@
+import test from '@playwright/test';
+import { qase } from 'playwright-qase-reporter';
+
+import { Components, Pages } from '../../helpers/interfaces';
+
+export default (pages: Partial<Pages>, components: Partial<Components>) => {
+  test(
+    qase(13, 'Info button(s) should be clickable'),
+    {
+      annotation: {
+        type: 'url',
+        description: 'https://app.qase.io/project/IBF?case=13',
+      },
+    },
+    async () => {
+      const { dashboard } = pages;
+      const { aggregates } = components;
+
+      if (!dashboard || !aggregates) {
+        throw new Error('pages and components not found');
+      }
+
+      // Navigate to disaster type the data was mocked for
+      await dashboard.navigateToFloodDisasterType();
+      // Assertions
+      await aggregates.aggregateComponentIsVisible();
+      await aggregates.validatesAggregatesInfoButtons();
+      await aggregates.validateLayerPopoverExternalLink();
+    },
+  );
+};

tests/e2e/tests/AggregatesComponent/AggregateComponentEventCount.ts

@@ -0,0 +1,39 @@
+import test, { expect } from '@playwright/test';
+import { qase } from 'playwright-qase-reporter';
+import { TriggerDataSet } from 'testData/testData.enum';
+
+import { Components, Pages } from '../../helpers/interfaces';
+
+export default (pages: Partial<Pages>, components: Partial<Components>) => {
+  test(
+    qase(39, 'Number of events should be non-zero'),
+    {
+      annotation: {
+        type: 'url',
+        description: 'https://app.qase.io/project/IBF?case=39',
+      },
+    },
+    async () => {
+      const { dashboard } = pages;
+      const { aggregates, userState } = components;
+
+      if (!dashboard || !aggregates || !userState) {
+        throw new Error('pages and components not found');
+      }
+
+      // Navigate to disaster type the data was mocked for
+      await dashboard.navigateToFloodDisasterType();
+      // Assertions
+      await userState.headerComponentIsVisible({
+        countryName: TriggerDataSet.CountryName,
+      });
+
+      // get the number of warning events and aggregated events
+      const aggregatesEventCount =
+        await aggregates.getNumberOfPredictedEvents();
+
+      // check if the number of warning events is equal to the number of aggregated events
+      expect(aggregatesEventCount).toBeGreaterThan(0);
+    },
+  );
+};

tests/e2e/tests/AggregatesComponent/AggregateComponentHeaderColour.ts

@@ -0,0 +1,37 @@
+import test from '@playwright/test';
+import { qase } from 'playwright-qase-reporter';
+import { TriggerDataSet } from 'testData/testData.enum';
+
+import { Components, Pages } from '../../helpers/interfaces';
+
+export default (pages: Partial<Pages>, components: Partial<Components>) => {
+  test(
+    qase(40, 'Header colour should be purple'),
+    {
+      annotation: {
+        type: 'url',
+        description: 'https://app.qase.io/project/IBF?case=40',
+      },
+    },
+    async () => {
+      const { dashboard } = pages;
+      const { aggregates, userState } = components;
+
+      if (!dashboard || !aggregates || !userState) {
+        throw new Error('pages and components not found');
+      }
+
+      // Navigate to disaster type the data was mocked for
+      await dashboard.navigateToFloodDisasterType();
+      // Assertions
+      await userState.headerComponentIsVisible({
+        countryName: TriggerDataSet.CountryName,
+      });
+
+      // Validate that the aggregates header is purple by class
+      await aggregates.validateColorOfAggregatesHeaderByClass({
+        isTrigger: true,
+      });
+    },
+  );
+};

tests/e2e/tests/AggregatesComponent/AggregateComponentTitleHover.ts

@@ -0,0 +1,31 @@
+import test from '@playwright/test';
+import { qase } from 'playwright-qase-reporter';
+
+import { Components, Pages } from '../../helpers/interfaces';
+
+export default (pages: Partial<Pages>, components: Partial<Components>) => {
+  test(
+    qase(12, 'Title should change based on hovered map district'),
+    {
+      annotation: {
+        type: 'url',
+        description: 'https://app.qase.io/project/IBF?case=12',
+      },
+    },
+    async () => {
+      const { dashboard } = pages;
+      const { aggregates, map } = components;
+
+      if (!dashboard || !aggregates || !map) {
+        throw new Error('pages and components not found');
+      }
+
+      // Navigate to disaster type the data was mocked for
+      await dashboard.navigateToFloodDisasterType();
+      // Assertions
+      await aggregates.aggregateComponentIsVisible();
+      await map.clickLayerCheckbox({ layerName: 'Glofas stations' });
+      await map.assertAggregateTitleOnHoverOverMap();
+    },
+  );
+};

tests/e2e/tests/AggregatesComponent/AggregatesComponentVisible.ts

@@ -0,0 +1,30 @@
+import test from '@playwright/test';
+import { qase } from 'playwright-qase-reporter';
+
+import { Components, Pages } from '../../helpers/interfaces';
+
+export default (pages: Partial<Pages>, components: Partial<Components>) => {
+  test(
+    qase(6, 'Aggregates component elements should be visible'),
+    {
+      annotation: {
+        type: 'url',
+        description: 'https://app.qase.io/project/IBF?case=6',
+      },
+    },
+    async () => {
+      const { dashboard } = pages;
+      const { aggregates } = components;
+
+      if (!dashboard || !aggregates) {
+        throw new Error('pages and components not found');
+      }
+
+      // Navigate to disaster type the data was mocked for
+      await dashboard.navigateToFloodDisasterType();
+      // Assertions
+      await aggregates.aggregateComponentIsVisible();
+      await aggregates.aggregatesAlementsDisplayedInNoTrigger();
+    },
+  );
+};

tests/e2e/tests/ChatComponent/ChatComponentButtonClick.ts

@@ -0,0 +1,39 @@
+import test from '@playwright/test';
+import { qase } from 'playwright-qase-reporter';
+import { NoTriggerDataSet } from 'testData/testData.enum';
+
+import { Components, Pages } from '../../helpers/interfaces';
+
+export default (pages: Partial<Pages>, components: Partial<Components>) => {
+  test(
+    qase(11, 'Action buttons should be clickable'),
+    {
+      annotation: {
+        type: 'url',
+        description: 'https://app.qase.io/project/IBF?case=11',
+      },
+    },
+    async () => {
+      const { dashboard } = pages;
+      const { chat, userState } = components;
+
+      if (!dashboard || !chat || !userState) {
+        throw new Error('pages and components not found');
+      }
+
+      // Navigate to disaster type the data was mocked for
+      await dashboard.navigateToFloodDisasterType();
+      // Assertions
+      await userState.headerComponentIsVisible({
+        countryName: NoTriggerDataSet.CountryName,
+      });
+      await chat.allDefaultButtonsArePresent();
+      await chat.clickAndAssertAboutButton();
+      await chat.clickAndAssertGuideButton();
+      await chat.clickAndAssertExportViewButton();
+      await chat.clickAndAssertTriggerLogButton({
+        url: `/log?countryCodeISO3=${NoTriggerDataSet.CountryCode}&disasterType=floods`,
+      });
+    },
+  );
+};

tests/e2e/tests/ChatComponent/ChatComponentEventClick.ts

@@ -0,0 +1,38 @@
+import test from '@playwright/test';
+import { qase } from 'playwright-qase-reporter';
+import { TriggerDataSet } from 'testData/testData.enum';
+
+import { Components, Pages } from '../../helpers/interfaces';
+
+export default (pages: Partial<Pages>, components: Partial<Components>) => {
+  test(
+    qase(44, 'Show prediction button should be clickable'),
+    {
+      annotation: {
+        type: 'url',
+        description: 'https://app.qase.io/project/IBF?case=44',
+      },
+    },
+    async () => {
+      const { dashboard } = pages;
+      const { chat, userState } = components;
+
+      if (!dashboard || !chat || !userState) {
+        throw new Error('pages and components not found');
+      }
+
+      // 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.allDefaultButtonsArePresent();
+      await chat.predictionButtonsAreActive();
+    },
+  );
+};

tests/e2e/tests/ChatComponent/ChatComponentEventCount.ts

@@ -0,0 +1,48 @@
+import test, { expect } from '@playwright/test';
+import { qase } from 'playwright-qase-reporter';
+import { TriggerDataSet } from 'testData/testData.enum';
+
+import { Components, Pages } from '../../helpers/interfaces';
+
+export default (pages: Partial<Pages>, components: Partial<Components>) => {
+  test(
+    qase(
+      43,
+      'Number of events should match the number of events in aggregates component',
+    ),
+    {
+      annotation: {
+        type: 'url',
+        description: 'https://app.qase.io/project/IBF?case=43',
+      },
+    },
+    async () => {
+      const { dashboard } = pages;
+      const { chat, userState, aggregates } = components;
+
+      if (!dashboard || !chat || !userState || !aggregates) {
+        throw new Error('pages and components not found');
+      }
+
+      // 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.allDefaultButtonsArePresent();
+
+      // get the number of warning events and aggregated events
+      const chatEventCount = await chat.predictionButtonsAreActive();
+      const aggregatesEventCount =
+        await aggregates.getNumberOfPredictedEvents();
+
+      // check if the number of warning events is equal to the number of aggregated events
+      expect(chatEventCount).toEqual(aggregatesEventCount);
+    },
+  );
+};

tests/e2e/tests/ChatComponent/ChatComponentInfoPopover.ts

@@ -0,0 +1,37 @@
+import test from '@playwright/test';
+import { qase } from 'playwright-qase-reporter';
+import { TriggerDataSet } from 'testData/testData.enum';
+
+import { Components, Pages } from '../../helpers/interfaces';
+
+export default (pages: Partial<Pages>, components: Partial<Components>) => {
+  test(
+    qase(45, 'Info icon should open popover on click'),
+    {
+      annotation: {
+        type: 'url',
+        description: 'https://app.qase.io/project/IBF?case=45',
+      },
+    },
+    async () => {
+      const { dashboard } = pages;
+      const { chat, userState } = components;
+
+      if (!dashboard || !chat || !userState) {
+        throw new Error('pages and components not found');
+      }
+
+      // 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();
+    },
+  );
+};