test: Initial Incident Detection e2e Tests

- incidents-page.ts includes cypher selectors for operation on the
  incident tab
- 01.incidents.cy.ts tests that incidents are loaded, the individual
  tests interact with the elements on the page
- index.ts includes catching 'ResizeObserver loop limit' exception,
  which is otherwise triggered by the incident page

Author: DavidRajnoha

web/cypress/e2e/incidents/01.incidents.cy.ts

@@ -0,0 +1,83 @@
+
+import { commonPages } from '../../views/common';
+import { incidentsPage } from '../../views/incidents-page';
+
+// Set constants for the operators that need to be installed for tests.
+const MCP = {
+  namespace: 'openshift-cluster-observability-operator',
+  packageName: 'cluster-observability-operator',
+  operatorName: 'Cluster Observability Operator',
+  config: {
+    kind: 'UIPlugin',
+    name: 'monitoring',
+  },
+};
+
+const MP = {
+  namespace: 'openshift-monitoring',
+  operatorName: 'Cluster Monitoring Operator',
+};
+
+const ALERTNAME = 'Watchdog';
+const NAMESPACE = 'openshift-monitoring';
+const SEVERITY = 'Critical';
+const ALERT_DESC = 'This is an alert meant to ensure that the entire alerting pipeline is functional. This alert is always firing, therefore it should always be firing in Alertmanager and always fire against a receiver. There are integrations with various notification mechanisms that send a notification when this alert is not firing. For example the "DeadMansSnitch" integration in PagerDuty.'
+const ALERT_SUMMARY = 'An alert that should always be firing to certify that Alertmanager is working properly.'
+describe('Incidents', () => {
+  before(() => {
+    cy.beforeBlockCOO(MCP, MP);
+    // TODO: Inject alerts into the database so the behavior is deterministic
+  });
+
+  after(() => {
+    cy.afterBlockCOO(MCP, MP);
+  });
+
+  beforeEach(() => {
+
+    cy.log('Navigate to Observe → Incidents');
+    incidentsPage.goTo();
+    commonPages.titleShouldHaveText('Incidents');
+  });
+
+  it('renders toolbar and toggle charts button', () => {
+    incidentsPage.elements.toolbar().should('be.visible');
+    incidentsPage.elements.toggleChartsButton().should('be.visible');
+  });
+
+  it('sets days filter to 3 days and updates the URL', () => {
+    incidentsPage.setDays('3 days');
+    incidentsPage.elements.daysSelect().should('contain.text', '3 days');
+    cy.url().should('match', /[?&]days=3\+days/);
+  });
+
+  it('toggles Critical filter and updates the URL', () => {
+    incidentsPage.clearAllFilters();
+    incidentsPage.toggleFilter('Critical');
+    cy.url().should('match', /incidentFilters=.*Critical/);
+  });
+
+  it('shows charts and alerts empty state initially', () => {
+    incidentsPage.elements.incidentsChartTitle().should('be.visible');
+    incidentsPage.elements.alertsChartTitle().should('be.visible');
+    incidentsPage.elements.alertsChartEmptyState().should('exist');
+  });
+
+  it('selecting an incident via chart shows alerts and adds groupId to URL', () => {
+    incidentsPage.clearAllFilters();
+    cy.pause();
+    incidentsPage.selectIncidentByBarIndex(0);
+    cy.pause();
+    cy.url().should('match', /[?&]groupId=/);
+    cy.pause();
+    incidentsPage.elements.alertsChartSvg().find('path').should('exist');
+    cy.pause();
+  });
+
+  it('shows alerts table and allows expanding a row', () => {
+    cy.pause();
+    incidentsPage.elements.alertsTable().should('exist');
+    incidentsPage.expandRow(0);
+    cy.pause();
+  });
+});

web/cypress/support/index.ts

@@ -7,10 +7,17 @@ export const checkErrors = () =>
     assert.isTrue(!win.windowError, win.windowError);
   });
 
-  Cypress.on('uncaught:exception', (err, runnable) => {
-    // returning false here prevents Cypress from failing the test
-    // on a JavaScript exception
-    if (err.message.includes('ResizeObserver loop completed with undelivered notifications')) {
-      return false
-    }
-  });
+
+  // Ignore benign ResizeObserver errors globally so they don't fail tests
+// See: https://docs.cypress.io/api/cypress-api/catalog-of-events#Uncaught-Exceptions
+Cypress.on('uncaught:exception', (err) => {
+  const message = err?.message || String(err || '');
+  if (
+    message.includes('ResizeObserver loop limit exceeded') ||
+    message.includes('ResizeObserver loop completed with undelivered notifications') ||
+    message.includes('ResizeObserver')
+  ) {
+    return false;
+  }
+  // allow other errors to fail the test
+});

web/cypress/views/incidents-page.ts

@@ -0,0 +1,78 @@
+import { nav } from './nav';
+
+export const incidentsPage = {
+  goTo: () => {
+    cy.log('incidentsPage.goTo');
+    nav.sidenav.clickNavLink(['Observe', 'Incidents']);
+  },
+
+  setDays: (value: '1 day' | '3 days' | '7 days' | '15 days') => {
+    cy.log('incidentsPage.setDays');
+    incidentsPage.elements.daysSelect().click();
+    cy.contains(value).should('be.visible').click();
+  },
+
+  toggleFilter: (name: 'Critical' | 'Warning' | 'Informative' | 'Firing' | 'Resolved') => {
+    cy.log('incidentsPage.toggleFilter');
+    incidentsPage.elements.filtersSelect().click();
+    cy.contains('label', name)
+      .find('input[type="checkbox"]')
+      .click({ force: true });  
+    incidentsPage.elements.filtersSelect().click();
+  },
+
+  clearAllFilters: () => {
+    cy.log('incidentsPage.clearAllFilters');
+    incidentsPage.elements.clearAllFiltersButton().click({ force: true });
+  },
+
+  toggleCharts: () => {
+    cy.log('incidentsPage.toggleCharts');
+    incidentsPage.elements.toggleChartsButton().click();
+  },
+
+  selectIncidentByBarIndex: (index = 0) => {
+    cy.log('incidentsPage.selectIncidentByBarIndex');
+    incidentsPage.elements.incidentsChartCard()
+      .find('path[role="presentation"]')
+      .eq(index)
+      .click({ force: true });
+  },
+
+  expandRow: (rowIndex = 0) => {
+    cy.log('incidentsPage.expandRow');
+    incidentsPage.elements.alertsTable()
+      .find('tbody')
+      .eq(rowIndex)
+      .within(() => {
+        cy.get('[aria-label="Details"], button[aria-expanded], button.pf-m-plain')
+          .first()
+          .click({ force: true });
+      });
+  },
+
+  // Centralized element selectors - all selectors defined in one place
+  elements: {
+    // Page structure
+    toolbar: () => cy.get('#toolbar-with-filter'),
+
+    // Controls and filters
+    daysSelect: () => cy.get('button[data-ouia-component-id="OUIA-Generated-MenuToggle-4"]'),
+    filtersSelect: () => cy.get('button[data-ouia-component-id="OUIA-Generated-MenuToggle-5"]'),
+    clearAllFiltersButton: () => cy.contains('button', 'Clear all filters'),
+    toggleChartsButton: () => cy.contains('button', /Hide graph|Show graph/),
+
+    // Charts and visualizations  
+    incidentsChartTitle: () => cy.contains('Incidents Timeline'),
+    incidentsChartCard: () => cy.contains('Incidents Timeline').closest('.pf-v6-c-card'),
+    incidentsChartSvg: () => incidentsPage.elements.incidentsChartCard().find('svg'),
+    
+    alertsChartTitle: () => cy.contains('Alerts Timeline'),
+    alertsChartCard: () => cy.contains('Alerts Timeline').closest('.pf-v6-c-card'),
+    alertsChartSvg: () => incidentsPage.elements.alertsChartCard().find('svg'),
+    alertsChartEmptyState: () => cy.contains('Select an incident in the chart above to see alerts.').closest('.pf-v6-c-card'),
+
+    // Tables and data
+    alertsTable: () => cy.get('[aria-label="alerts-table"]'),
+  },
+};