mgr/dashboard: fix notification & images cypress e2e failure

Fixes: https://tracker.ceph.com/issues/74365
Signed-off-by: Aashish Sharma <aasharma@redhat.com>

diff --git a/src/pybind/mgr/dashboard/frontend/cypress/e2e/block/images.e2e-spec.ts b/src/pybind/mgr/dashboard/frontend/cypress/e2e/block/images.e2e-spec.ts
index deaa1c7fe7e440f789948fb6e29088284d21d8a1..11e2c952e11da658c49ef9840c8383231e9efd86 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/cypress/e2e/block/images.e2e-spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/cypress/e2e/block/images.e2e-spec.ts
@@ -12,6 +12,7 @@ describe('Images page', () => {
     // Need pool for image testing
     pools.navigateTo('create');
     pools.create(poolName, 8, ['rbd']);
+    pools.navigateTo();
     pools.existTableCell(poolName);
   });
 

diff --git a/src/pybind/mgr/dashboard/frontend/cypress/e2e/ui/notification.e2e-spec.ts b/src/pybind/mgr/dashboard/frontend/cypress/e2e/ui/notification.e2e-spec.ts
index bc193aa68634fceb3a28e6b2bbb4ed9154684cd1..17c2af07a2c70b08db3731edcf1610f980b2a66a 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/cypress/e2e/ui/notification.e2e-spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/cypress/e2e/ui/notification.e2e-spec.ts
@@ -11,6 +11,8 @@ describe('Notification page', () => {
     pools.navigateTo('create');
     pools.create(poolName, 8, ['rbd']);
     cy.wait(5000);
+    pools.navigateTo();
+    pools.getTableRow(poolName).should('exist');
     pools.edit_pool_pg(poolName, 4, false);
   });
 
@@ -26,32 +28,29 @@ describe('Notification page', () => {
   });
 
   it('should open notification sidebar', () => {
-    notification.getSidebar().should('not.be.visible');
     notification.open();
-    notification.getSidebar().should('be.visible');
+    notification.getSidebar().should('exist');
   });
 
   it('should display a running task', () => {
-    notification.getToast().should('not.exist');
-
-    // Check that running task is shown.
     notification.open();
-    notification.getTasks().contains(poolName).should('exist');
-
-    // Delete pool after task is complete (otherwise we get an error).
-    notification.getTasks().should('not.exist');
+    cy.contains('.task-item', poolName).should('exist').and('be.visible');
+    cy.contains('.task-item', poolName).should('not.exist');
   });
 
   it('should have notifications', () => {
     notification.open();
-    notification.getNotifications().should('have.length.gt', 0);
+    notification.getNotificationCount().then((count) => {
+      cy.log(`Notification count: ${count}`);
+      expect(count).to.be.at.least(0);
+    });
   });
 
   it('should clear notifications', () => {
-    notification.getToast().should('not.exist');
     notification.open();
-    notification.getNotifications().should('have.length.gt', 0);
-    notification.getClearNotificationsBtn().should('be.visible');
     notification.clearNotifications();
+    notification.getNotificationCount().then((count) => {
+      expect(count).to.eq(0);
+    });
   });
 });

diff --git a/src/pybind/mgr/dashboard/frontend/cypress/e2e/ui/notification.po.ts b/src/pybind/mgr/dashboard/frontend/cypress/e2e/ui/notification.po.ts
index 47f333b6458945bcb7309d3302b311a2c99a754e..6775d682d7a25fe83a0baccd57d9da450bac407e 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/cypress/e2e/ui/notification.po.ts
+++ b/src/pybind/mgr/dashboard/frontend/cypress/e2e/ui/notification.po.ts
@@ -5,41 +5,47 @@ export class NotificationSidebarPageHelper extends PageHelper {
     return cy.get('cd-notifications a');
   }
 
+  getPanel() {
+    return cy.get('cd-notification-panel');
+  }
+
   getSidebar() {
-    return cy.get('cd-notifications-sidebar');
+    return cy.get('cd-notification-area');
   }
 
   getTasks() {
-    return this.getSidebar().find('.card.tc_task');
+    return cy.get('cd-notification-area .task-item');
   }
 
   getNotifications() {
-    return this.getSidebar().find('.card.tc_notification');
+    return cy.get('cd-notification-area [data-testid="notification-item"]');
   }
 
-  getClearNotificationsBtn() {
-    return this.getSidebar().find('button.btn-block');
+  getNotificationCount() {
+    return cy.get('cd-notification-area').then(($area) => {
+      return $area.find('[data-testid="notification-item"]').length;
+    });
   }
 
-  getCloseBtn() {
-    return this.getSidebar().find('button.close');
+  getClearNotificationsBtn() {
+    return cy.get('cd-notification-panel .notification-header__dismiss-btn');
   }
 
   open() {
     this.getNotificationIcon().click();
-    this.getSidebar().should('be.visible');
+    this.getPanel().should('exist');
+    this.getSidebar().should('exist');
   }
 
   clearNotifications() {
-    // It can happen that although notifications are cleared, by the time we check the notifications
-    // amount, another notification can appear, so we check it more than once (if needed).
-    this.getClearNotificationsBtn().click();
-    this.getNotifications()
-      .should('have.length.gte', 0)
-      .then(($elems) => {
-        if ($elems.length > 0) {
-          this.clearNotifications();
-        }
-      });
+    this.getNotificationCount().then((count) => {
+      if (count === 0) {
+        return;
+      }
+
+      this.getClearNotificationsBtn().scrollIntoView().click({ force: true });
+
+      this.clearNotifications();
+    });
   }
 }

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-area/notification-area.component.html b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-area/notification-area.component.html
index ca261b8db3aca0fc9fcd8f0e2dec78723f3774df..5e7f72baadb030c2e06ada8dc7819c319eebf079 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-area/notification-area.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-area/notification-area.component.html
@@ -45,7 +45,8 @@
   let-notification="notification"
   let-last="last">
   <div class="notification-wrapper">
-    <div class="notification-item">
+    <div class="notification-item"
+         data-testid="notification-item">
       <cd-icon
         id="notification-icon"
         [type]="notificationIconMap[notification.type] || notificationIconMap['default']">