mgr/dashboard: add basic e2e to verify wizard

and topology viewer

Fixes: https://tracker.ceph.com/issues/69925
Signed-off-by: Nizamudeen A <[email protected]>

Author: nizamial09

src/pybind/mgr/dashboard/frontend/cypress/e2e/rgw/multisite.e2e-spec.ts

@@ -102,4 +102,31 @@ describe('Multisite page', () => {
       multisite.deletePipe('new-pipe');
     });
   });
+
+  describe('Multi-site topology viewer', () => {
+    it('should show topology viewer', () => {
+      multisite.navigateTo('topology');
+      multisite.topologyViewerExist();
+    });
+
+    describe('Multisite replication wizard', () => {
+      beforeEach(() => {
+        multisite.navigateTo('wizard');
+      });
+
+      it('should show replication wizard', () => {
+        multisite.replicationWizardExist();
+      });
+
+      it('should verify the wizard is properly loaded', () => {
+        multisite.replicationWizardExist();
+        // // Verify first step
+        multisite.verifyWizardContents('CreateRealmZonegroup');
+        // Verify second step
+        multisite.verifyWizardContents('CreateZone');
+        // Verify the review
+        multisite.verifyWizardContents('Review');
+      });
+    });
+  });
 });

src/pybind/mgr/dashboard/frontend/cypress/e2e/rgw/multisite.po.ts

@@ -7,8 +7,22 @@ const pages = {
     url: '#/rgw/multisite/sync-policy/(modal:create)',
     id: 'cd-rgw-multisite-sync-policy-form'
   },
-  edit: { url: '#/rgw/multisite/sync-policy/(modal:edit', id: 'cd-rgw-multisite-sync-policy-form' }
+  edit: { url: '#/rgw/multisite/sync-policy/(modal:edit', id: 'cd-rgw-multisite-sync-policy-form' },
+  topology: { url: '#/rgw/multisite/configuration', id: 'cd-rgw-multisite-details' },
+  wizard: {
+    url: '#/rgw/multisite/configuration/(modal:setup-multisite-replication)',
+    id: 'cd-rgw-multisite-wizard'
+  }
 };
+
+enum WizardSteps {
+  CreateRealmZonegroup = 'Create Realm & Zonegroup',
+  CreateZone = 'Create Zone',
+  Review = 'Review'
+}
+
+type Step = keyof typeof WizardSteps;
+
 export class MultisitePageHelper extends PageHelper {
   pages = pages;
 
@@ -289,4 +303,51 @@ export class MultisitePageHelper extends PageHelper {
     // Waits for item to be removed from table
     getRow(pipe_id).should('not.exist');
   }
+
+  @PageHelper.restrictTo(pages.topology.url)
+  topologyViewerExist() {
+    cy.get(pages.topology.id).should('be.visible');
+    cy.get('[data-testid=rgw-multisite-details-header]').should('have.text', 'Topology Viewer');
+  }
+
+  @PageHelper.restrictTo(pages.wizard.url)
+  replicationWizardExist() {
+    cy.get('cds-modal').then(() => {
+      cy.get('[data-testid=rgw-multisite-wizard-header]').should(
+        'have.text',
+        'Set up Multi-site Replication'
+      );
+    });
+  }
+
+  @PageHelper.restrictTo(pages.index.url)
+  verifyWizardContents(step: Step) {
+    cy.get('cds-modal').then(() => {
+      this.gotoStep(step);
+      if (step === 'CreateRealmZonegroup') {
+        this.typeValueToField('realmName', 'test-realm');
+        this.typeValueToField('zonegroupName', 'test-zg');
+      } else if (step === 'CreateZone') {
+        this.typeValueToField('zoneName', 'test-zone');
+      } else {
+        this.gotoStep('Review');
+        cy.get('.form-group.row').then(() => {
+          cy.get('#realmName').invoke('text').should('eq', 'test-realm');
+          cy.get('#zonegroupName').invoke('text').should('eq', 'test-zg');
+          cy.get('#zoneName').invoke('text').should('eq', 'test-zone');
+        });
+      }
+    });
+  }
+
+  typeValueToField(fieldID: string, value: string) {
+    cy.get(`#${fieldID}`).clear().type(value).should('have.value', value);
+  }
+
+  gotoStep(step: Step) {
+    cy.get('cd-wizard').then(() => {
+      cy.get('form').should('be.visible');
+      cy.get('button').contains(WizardSteps[step]).click();
+    });
+  }
 }

src/pybind/mgr/dashboard/frontend/cypress/support/e2e.ts

@@ -17,3 +17,10 @@ Cypress.on('uncaught:exception', (err: Error) => {
   }
   return true;
 });
+
+Cypress.on('fail', (err: Error) => {
+  if (err.message.includes('xhr') && err.message.includes('canceled')) {
+    return false; // Ignore canceled XHR requests
+  }
+  return true;
+});

src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-details/rgw-multisite-details.component.html

@@ -51,8 +51,8 @@
 </div>
 <div class="card">
   <div class="card-header"
-       i18n>Topology Viewer
-  </div>
+       data-testid="rgw-multisite-details-header"
+       i18n>Topology Viewer</div>
   <div class="row">
     <div class="col-sm-6 col-lg-6 tree-container">
       <i *ngIf="loadingIndicator"

src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-wizard/rgw-multisite-wizard.component.html

@@ -5,6 +5,7 @@
            (overlaySelected)="closeModal()">
   <cds-modal-header (closeSelect)="closeModal()">
     <h3 cdsModalHeaderHeading
+        data-testid="rgw-multisite-wizard-header"
         i18n>Set up Multi-site Replication</h3>
   </cds-modal-header>
 
@@ -323,14 +324,16 @@
   <div class="form-group row">
     <label class="cd-col-form-label"
            i18n>Realm Name:</label>
-    <div class="cd-col-form-input mt-2 text-muted">
+    <div class="cd-col-form-input mt-2 text-muted"
+         id="realmName">
       <b>{{ multisiteSetupForm.get('realmName').value }}</b>
     </div>
   </div>
   <div class="form-group row">
     <label class="cd-col-form-label"
            i18n>Zonegroup Name:</label>
-    <div class="cd-col-form-input mt-2 text-muted">
+    <div class="cd-col-form-input mt-2 text-muted"
+         id="zonegroupName">
       <b>{{ multisiteSetupForm.get('zonegroupName').value }}</b>
     </div>
   </div>
@@ -344,7 +347,8 @@
   <div class="form-group row">
     <label class="cd-col-form-label"
            i18n>Zone Name:</label>
-    <div class="cd-col-form-input mt-2 text-muted">
+    <div class="cd-col-form-input mt-2 text-muted"
+         id="zoneName">
       <b>{{ multisiteSetupForm.get('zoneName').value }}</b>
     </div>
   </div>