rebase & encapsulate steps

Author: Tai-RedHat

web/cypress/e2e/coo/02.acm_alerting_ui.cy.ts

@@ -1,5 +1,9 @@
 // 02.acm_alerting_ui.cy.ts
 // E2E test for validating ACM Alerting UI integration with Cluster Observability Operator (COO)
+import '../../support/commands/auth-commands';
+import { nav } from '../../views/nav';
+import { acmAlertingPage } from '../../views/acm-alerting-page';
+
 const MCP = {
   namespace: 'openshift-cluster-observability-operator',
   packageName: 'cluster-observability-operator',
@@ -15,38 +19,17 @@ const MP = {
 };
 const expectedAlerts = ['Watchdog', 'Watchdog-spoke', 'ClusterCPUHealth-jb'];
 
-// ignore error message
-Cypress.on('uncaught:exception', (err) => {
-  const ignoreList = [
-    'Unauthorized',
-    "Cannot read properties of null (reading 'default')",
-    'ResizeObserver loop limit exceeded',
-    'Bad Gateway',
-    '(intermediate value) is not a function',
-  ];
-  if (ignoreList.some((txt) => err.message.includes(txt))) {
-    console.warn('Ignored frontend exception:', err.message);
-    return false;
-  }
-});
-
 describe('ACM Alerting UI', () => {
   before(() => {
     cy.beforeBlockACM(MCP, MP);
   });
 
   it('Navigate to Fleet Management > local-cluster > Observe > Alerting', () => {
     // wait for console page loading completed
+    cy.visit('/');
     cy.get('body', { timeout: 60000 }).should('contain.text', 'Administrator');
-    // click Fleet Management
-    cy.get('[data-test-id="perspective-switcher-toggle"]', { timeout: 20000 })
-      .should('be.visible')
-      .click();
-    // select “Fleet Management”
-    cy.get('[data-test-id="perspective-switcher-menu-option"]')
-      .contains('Fleet Management')
-      .should('be.visible')
-      .click();
+    // switch to Fleet Management page
+    cy.switchPerspective('Fleet Management');
     // close pop-up window
     cy.closeOnboardingModalIfPresent();
     // click “local-cluster” when visible
@@ -58,13 +41,13 @@ describe('ACM Alerting UI', () => {
         cy.wrap($el).click({ force: true });
       });
     // click side menu -> Observe -> Alerting
-    cy.contains('Observe', { timeout: 20000 }).should('be.visible').click();
-    cy.contains('Alerting', { timeout: 20000 }).should('be.visible').click();
+    nav.sidenav.clickNavLink(['Observe', 'Alerting']);
     // Wait for alert tab content to become visible
     cy.get('section#alerts-tab-content', { timeout: 60000 })
       .should('be.visible');
-    // confirm Alerting page loading completed then check three alert exist
-    cy.get('body', { timeout: 60000 }).should('contain.text', 'Alerting');
+    // confirm Alerting page loading completed
+    acmAlertingPage.shouldBeLoaded();
+    // check three test alerts exist
     expectedAlerts.forEach((alert) => {
       cy.contains('a[data-test-id="alert-resource-link"]', alert, { timeout: 60000 })
         .should('be.visible');

web/cypress/support/commands/operator-commands.ts

@@ -580,6 +580,7 @@ Cypress.Commands.add('beforeBlockACM', (MCP, MP) => {
     timeout: 1200000, // long time script
   });
   cy.exec(`oc apply -f ./cypress/fixtures/coo/acm-uiplugin.yaml --kubeconfig ${Cypress.env('KUBECONFIG_PATH')}`);
+  // add example alerts for test
   cy.exec(`oc apply -f ./cypress/fixtures/coo/acm-alerrule-test.yaml --kubeconfig ${Cypress.env('KUBECONFIG_PATH')}`);
   cy.log('ACM environment setup completed');
 });

web/cypress/support/index.ts

@@ -20,8 +20,13 @@ Cypress.on('uncaught:exception', (err) => {
     message.includes('ResizeObserver loop limit exceeded') ||
     message.includes('ResizeObserver loop completed with undelivered notifications') ||
     message.includes('ResizeObserver') ||
-    message.includes('Cannot read properties of undefined')
+    message.includes('Cannot read properties of undefined') ||
+    message.includes('Unauthorized') ||
+    message.includes('Bad Gateway') ||
+    message.includes(`Cannot read properties of null (reading 'default')`) ||
+    message.includes(`(intermediate value) is not a function`)
   ) {
+    console.warn('Ignored frontend exception:', err.message);
     return false;
   }
   // allow other errors to fail the test

web/cypress/views/acm-alerting-page.ts

@@ -0,0 +1,11 @@
+import { DataTestIDs, Classes } from "../../src/components/data-test";
+
+export const acmAlertingPage = {
+  shouldBeLoaded: () => {
+    cy.log('acmAlertingPage.shouldBeLoaded');
+    cy.get('body', { timeout: 60000 }).should('contain.text', 'Alerting');
+    cy.get('section.pf-v6-c-page__main-section h1').should('have.text', 'Alerting')
+    // To Do:
+    // other page check could be list here
+  },
+};