portalicious: test iframe on monitoring page (#5884)

AB#30569

e2e/portalicious/pages/ProjectMonitoringPage.ts

@@ -11,6 +11,7 @@ class ProjectMonitoring extends BasePage {
   readonly cashDisbursedTile: Locator;
   readonly projectDescriptionTile: Locator;
   readonly metricTileComponent: Locator;
+  readonly monitoringIframe: Locator;
 
   constructor(page: Page) {
     super(page);
@@ -25,9 +26,14 @@ class ProjectMonitoring extends BasePage {
       'metric-project-description',
     );
     this.metricTileComponent = this.page.getByTestId('metric-tile-component');
+    this.monitoringIframe = this.page.getByTestId('monitoring-iframe');
   }
 
-  async assertMonitoringTabElements() {
+  async assertMonitoringTabElements({
+    shouldHaveIframe,
+  }: {
+    shouldHaveIframe: boolean;
+  }) {
     await expect(this.peopleRegisteredTile).toContainText('People registered');
     await expect(this.peopleIncludedTile).toContainText('People included');
     await expect(this.remainingBudgetTile).toContainText('Remaining budget');
@@ -36,7 +42,15 @@ class ProjectMonitoring extends BasePage {
       'Project description',
     );
 
-    // For the moment we are not checking the iframe area because there are no visible elemnts in it
+    const iframe = await this.monitoringIframe.locator('iframe').all();
+    if (shouldHaveIframe) {
+      await expect(iframe.length).toBe(1);
+    } else {
+      await expect(iframe.length).toBe(0);
+      await expect(this.monitoringIframe).toContainText(
+        'No PowerBI dashboard has been configured for this project, please contact [email protected] to set this up',
+      );
+    }
   }
 
   async assertValuesInMonitoringTab({

e2e/portalicious/tests/ProjectMonitoring/AllElementsOfProjectMonitoringPageDisplayCorrectData.spec.ts

@@ -25,7 +25,7 @@ test.beforeEach(async ({ page }) => {
   );
 });
 
-test('[30326] All elements of Monitoring page display correct data', async ({
+test('[30579] All elements of Monitoring page display correct data for OCW', async ({
   page,
 }) => {
   const basePage = new BasePage(page);
@@ -39,10 +39,36 @@ test('[30326] All elements of Monitoring page display correct data', async ({
   });
 
   await test.step('Check if all elements are displayed', async () => {
-    await projectMonitoring.assertMonitoringTabElements();
+    await projectMonitoring.assertMonitoringTabElements({
+      shouldHaveIframe: true,
+    });
     await projectMonitoring.assertValuesInMonitoringTab({
       peopleIncluded: 4,
       peopleRegistered: 4,
     });
   });
 });
+
+test('[30326] All elements of Monitoring page display correct data for NLRC', async ({
+  page,
+}) => {
+  const basePage = new BasePage(page);
+  const projectMonitoring = new ProjectMonitoring(page);
+
+  const projectTitle = 'NLRC Direct Digital Aid Program (PV)';
+
+  await test.step('Navigate to project`s monitoring page', async () => {
+    await basePage.selectProgram(projectTitle);
+    await projectMonitoring.navigateToProgramPage('Monitoring');
+  });
+
+  await test.step('Check if all elements are displayed', async () => {
+    await projectMonitoring.assertMonitoringTabElements({
+      shouldHaveIframe: false,
+    });
+    await projectMonitoring.assertValuesInMonitoringTab({
+      peopleIncluded: 0,
+      peopleRegistered: 0,
+    });
+  });
+});

interfaces/Portalicious/src/app/pages/project/project-monitoring/project-monitoring.page.html

@@ -94,7 +94,10 @@
         height="8rem"
       ></p-skeleton>
     } @else {
-      <p-card class="grid-in-iframe">
+      <p-card
+        class="grid-in-iframe"
+        data-testid="monitoring-iframe"
+      >
         @if (project.data()?.monitoringDashboardUrl) {
           <app-monitoring-iframe
             [url]="project.data()!.monitoringDashboardUrl!"