mgr/dashboard: update landing page e2e tests

ignore the region that can vary on different clusters like charts

fixes: https://tracker.ceph.com/issues/59142
Signed-off-by: Pedro Gonzalez Gomez <pegonzal@redhat.com>

diff --git a/src/pybind/mgr/dashboard/frontend/cypress/integration/ui/dashboard-v3.e2e-spec.ts b/src/pybind/mgr/dashboard/frontend/cypress/integration/ui/dashboard-v3.e2e-spec.ts
new file mode 100644 (file)
index 0000000..cb72824
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/cypress/integration/ui/dashboard-v3.e2e-spec.ts
@@ -0,0 +1,50 @@
+import { ManagerModulesPageHelper } from '../cluster/mgr-modules.po';
+import { DashboardV3PageHelper } from './dashboard-v3.po';
+
+describe('Dashboard-v3 Main Page', () => {
+  const dashboard = new DashboardV3PageHelper();
+  const mgrmodules = new ManagerModulesPageHelper();
+
+  before(() => {
+    cy.login();
+    mgrmodules.navigateTo();
+    mgrmodules.navigateEdit('dashboard');
+    cy.get('#FEATURE_TOGGLE_DASHBOARD').check();
+    cy.contains('button', 'Update').click();
+  });
+
+  beforeEach(() => {
+    cy.login();
+    Cypress.Cookies.preserveOnce('token');
+    dashboard.navigateTo();
+  });
+
+  describe('Check that all hyperlinks on inventory card lead to the correct page and fields exist', () => {
+    it('should ensure that all linked pages in the inventory card lead to correct page', () => {
+      const expectationMap = {
+        Host: 'Hosts',
+        Monitor: 'Monitors',
+        OSDs: 'OSDs',
+        Pool: 'Pools',
+        'Object Gateway': 'Daemons'
+      };
+
+      for (const [linkText, breadcrumbText] of Object.entries(expectationMap)) {
+        cy.location('hash').should('eq', '#/dashboard');
+        dashboard.clickInventoryCardLink(linkText);
+        dashboard.expectBreadcrumbText(breadcrumbText);
+        dashboard.navigateBack();
+      }
+    });
+
+    it('should verify that cards exist on dashboard in proper order', () => {
+      // Ensures that cards are all displayed on the dashboard tab while being in the proper
+      // order, checks for card title and position via indexing into a list of all cards.
+      const order = ['Details', 'Status', 'Capacity', 'Inventory', 'Cluster utilization'];
+
+      for (let i = 0; i < order.length; i++) {
+        dashboard.card(i).should('contain.text', order[i]);
+      }
+    });
+  });
+});

diff --git a/src/pybind/mgr/dashboard/frontend/cypress/integration/ui/dashboard-v3.po.ts b/src/pybind/mgr/dashboard/frontend/cypress/integration/ui/dashboard-v3.po.ts
new file mode 100644 (file)
index 0000000..e720724
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/cypress/integration/ui/dashboard-v3.po.ts
@@ -0,0 +1,20 @@
+import { PageHelper } from '../page-helper.po';
+
+export class DashboardV3PageHelper extends PageHelper {
+  pages = { index: { url: '#/dashboard', id: 'cd-dashboard-v3' } };
+
+  cardTitle(index: number) {
+    return cy.get('.card-title').its(index).text();
+  }
+
+  clickInventoryCardLink(link: string) {
+    console.log(link);
+    cy.get(`cd-card[title="Inventory"]`).contains('a', link).click();
+  }
+
+  card(indexOrTitle: number) {
+    cy.get('cd-card').as('cards');
+
+    return cy.get('@cards').its(indexOrTitle);
+  }
+}

diff --git a/src/pybind/mgr/dashboard/frontend/cypress/integration/ui/dashboard.e2e-spec.ts b/src/pybind/mgr/dashboard/frontend/cypress/integration/ui/dashboard.e2e-spec.ts
index 9cb84480b6432cdda5f48dedf6020d18b0d662e3..110b496037f8d1540400668510afddfd173d487e 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/cypress/integration/ui/dashboard.e2e-spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/cypress/integration/ui/dashboard.e2e-spec.ts
@@ -1,5 +1,6 @@
 import { IscsiPageHelper } from '../block/iscsi.po';
 import { HostsPageHelper } from '../cluster/hosts.po';
+import { ManagerModulesPageHelper } from '../cluster/mgr-modules.po';
 import { MonitorsPageHelper } from '../cluster/monitors.po';
 import { OSDsPageHelper } from '../cluster/osds.po';
 import { PageHelper } from '../page-helper.po';
@@ -15,6 +16,15 @@ describe('Dashboard Main Page', () => {
   const pools = new PoolPageHelper();
   const monitors = new MonitorsPageHelper();
   const iscsi = new IscsiPageHelper();
+  const mgrmodules = new ManagerModulesPageHelper();
+
+  before(() => {
+    cy.login();
+    mgrmodules.navigateTo();
+    mgrmodules.navigateEdit('dashboard');
+    cy.get('#FEATURE_TOGGLE_DASHBOARD').uncheck();
+    cy.contains('button', 'Update').click();
+  });
 
   beforeEach(() => {
     cy.login();
@@ -121,4 +131,12 @@ describe('Dashboard Main Page', () => {
       });
     }
   });
+
+  after(() => {
+    cy.login();
+    mgrmodules.navigateTo();
+    mgrmodules.navigateEdit('dashboard');
+    cy.get('#FEATURE_TOGGLE_DASHBOARD').click();
+    cy.contains('button', 'Update').click();
+  });
 });

diff --git a/src/pybind/mgr/dashboard/frontend/cypress/integration/visualTests/dashboard.vrt-spec.ts b/src/pybind/mgr/dashboard/frontend/cypress/integration/visualTests/dashboard.vrt-spec.ts
index b83d16d3d86ce69c04b7b6a3e10c1b4c9e1940ff..9613dbc85802a5c7c213d9397f7b915f3073f973 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/cypress/integration/visualTests/dashboard.vrt-spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/cypress/integration/visualTests/dashboard.vrt-spec.ts
@@ -16,7 +16,10 @@ describe('Dashboard Landing Page', () => {
   it('should take screenshot of dashboard landing page', () => {
     login.navigateTo();
     login.doLogin();
-    cy.get('.card-text').should('be.visible');
-    cy.eyesCheckWindow({ tag: 'Dashboard landing page', ignore: { selector: '.card-text' } });
+    cy.get('[aria-label="Details card"]').should('be.visible');
+    cy.get('[aria-label="Status card"]').should('be.visible');
+    cy.get('[aria-label="Inventory card"]').should('be.visible');
+    cy.get('[aria-label="Cluster utilization card"]').should('be.visible');
+    cy.eyesCheckWindow({ tag: 'Dashboard landing page' });
   });
 });

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard-v3/dashboard/dashboard-v3.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard-v3/dashboard/dashboard-v3.component.html
index bab03a1704c2c31ad1cc9a406141561f89560e5b..052470a71211265313aea7578328b60671de1a31 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard-v3/dashboard/dashboard-v3.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard-v3/dashboard/dashboard-v3.component.html
@@ -4,7 +4,8 @@
     <cd-card title="Details"
              i18n-title
              class="col-sm-3 px-3"
-             [ngClass]="{'d-flex': flexHeight}">
+             [ngClass]="{'d-flex': flexHeight}"
+             aria-label="Details card">
       <dl class="ms-4 me-4">
         <dt>FSID</dt>
         <dd>{{ detailsCardData.fsid }}</dd>
@@ -17,7 +18,8 @@
 
     <cd-card title="Status"
              i18n-title
-             class="col-sm-6 px-3 d-flex">
+             class="col-sm-6 px-3 d-flex"
+             aria-label="Status card">
       <div class="d-flex ms-4 me-4 mb-5 center-content">
         <i *ngIf="healthData.health?.status"
            [ngClass]="[healthData.health.status | healthIcon, icons.large2x]"
@@ -78,7 +80,8 @@
     <cd-card title="Capacity"
              i18n-title
              class="col-sm-3 px-3"
-             [ngClass]="{'d-flex': flexHeight}">
+             [ngClass]="{'d-flex': flexHeight}"
+             aria-label="Capacity card">
       <ng-container class="ms-4 me-4"
                     *ngIf="capacity && osdSettings">
         <cd-dashboard-pie [data]="{max: capacity.total_bytes, current: capacity.total_used_raw_bytes}"
@@ -93,7 +96,8 @@
     <!-- Inventory Card -->
     <cd-card title="Inventory"
              i18n-title
-             class="col-sm-3 px-3 d-flex">
+             class="col-sm-3 px-3 d-flex"
+             aria-label="Inventory card">
       <hr>
       <!-- Hosts -->
       <li class="list-group-item">
@@ -182,7 +186,8 @@
 
     <cd-card title="Cluster utilization"
              i18n-title
-             class="col-sm-9 px-3 d-flex">
+             class="col-sm-9 px-3 d-flex"
+             aria-label="Cluster utilization card">
       <div class="ms-4 me-4 mt-0">
         <cd-dashboard-time-selector (selectedTime)="getPrometheusData($event)">
         </cd-dashboard-time-selector>