[Security Solutions][Alert Details] Add cypress coverage for kpi charts (#189758)

## Summary

Added cypress tests for navigation and some cypress clean up.
This commit is contained in:
christineweng 2024-08-08 15:35:22 -05:00 committed by GitHub
parent cdb5333987
commit 92b89703fb
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 151 additions and 45 deletions

View file

@ -6,13 +6,30 @@
*/
import { getNewRule } from '../../../objects/rule';
import { ALERTS_COUNT } from '../../../screens/alerts';
import {
ALERT_SUMMARY_CHARTS,
SELECT_OVERVIEW_CHARTS,
SELECT_HISTOGRAM,
SELECT_COUNTS_TABLE,
SELECT_TREEMAP,
ALERT_SUMMARY_SEVERITY_DONUT_CHART,
ALERT_SUMMARY_RULES_TABLE,
ALERT_SUMMARY_PROGRESS_BAR_CHARTS,
ALERTS_HISTOGRAM,
ALERT_COUNT_TABLE,
ALERT_TREEMAP,
ALERTS_COUNT,
ALERT_SUMMARY_CHARTS_COLLAPSED,
} from '../../../screens/alerts';
import {
clickAlertsHistogramLegend,
clickAlertsHistogramLegendAddToTimeline,
clickAlertsHistogramLegendFilterFor,
clickAlertsHistogramLegendFilterOut,
selectAlertsHistogram,
selectAlertsCountTable,
selectAlertsTreemap,
toggleKPICharts,
} from '../../../tasks/alerts';
import { createRule } from '../../../tasks/api_calls/rules';
import { deleteAlertsAndRules } from '../../../tasks/api_calls/common';
@ -25,45 +42,100 @@ import {
} from '../../../screens/search_bar';
import { TOASTER } from '../../../screens/alerts_detection_rules';
describe('Histogram legend hover actions', { tags: ['@ess', '@serverless'] }, () => {
describe('KPI visualizations in Alerts Page', { tags: ['@ess', '@serverless'] }, () => {
const ruleConfigs = getNewRule();
beforeEach(() => {
deleteAlertsAndRules();
login();
createRule(getNewRule({ rule_id: 'new custom rule' }));
visitWithTimeRange(ALERTS_URL);
selectAlertsHistogram();
});
it('should should add a filter in to KQL bar', () => {
const expectedNumberOfAlerts = 1;
clickAlertsHistogramLegend();
clickAlertsHistogramLegendFilterFor(ruleConfigs.name);
cy.get(GLOBAL_SEARCH_BAR_FILTER_ITEM).should(
'have.text',
`kibana.alert.rule.name: ${ruleConfigs.name}`
);
cy.get(ALERTS_COUNT).should('have.text', `${expectedNumberOfAlerts} alert`);
context('KPI viz navigation', () => {
it('should navigate through clicking chart names', () => {
cy.log('should display summary charts by default');
cy.get(ALERT_SUMMARY_CHARTS).should('exist');
cy.get(ALERT_SUMMARY_CHARTS_COLLAPSED).should('not.exist');
cy.get(SELECT_OVERVIEW_CHARTS).should('have.class', 'euiButtonGroupButton-isSelected');
cy.get(ALERT_SUMMARY_SEVERITY_DONUT_CHART).should('exist');
cy.get(ALERT_SUMMARY_RULES_TABLE).should('exist');
cy.get(ALERT_SUMMARY_PROGRESS_BAR_CHARTS).should('exist');
cy.log('should display histogram charts when clicking trend button');
selectAlertsHistogram();
cy.get(SELECT_HISTOGRAM).should('have.class', 'euiButtonGroupButton-isSelected');
cy.get(ALERT_SUMMARY_CHARTS).should('not.exist');
cy.get(ALERTS_HISTOGRAM).should('exist');
cy.log('should display table charts when clicking table button');
selectAlertsCountTable();
cy.get(ALERT_COUNT_TABLE).should('exist');
cy.get(SELECT_COUNTS_TABLE).should('have.class', 'euiButtonGroupButton-isSelected');
cy.log('should display treemap charts when clicking treemap button');
selectAlertsTreemap();
cy.get(ALERT_TREEMAP).should('exist');
cy.get(SELECT_TREEMAP).should('have.class', 'euiButtonGroupButton-isSelected');
});
it('should display/hide collapsed chart when clicking on the toggle', () => {
cy.log('should display summary charts by default');
cy.get(ALERT_SUMMARY_CHARTS_COLLAPSED).should('not.exist');
cy.get(ALERT_SUMMARY_SEVERITY_DONUT_CHART).should('exist');
cy.log('should display collapsed summary when clicking toggle button');
toggleKPICharts();
cy.get(ALERT_SUMMARY_CHARTS_COLLAPSED).should('exist');
cy.get(ALERT_SUMMARY_SEVERITY_DONUT_CHART).should('not.exist');
cy.log('should display summary when clicking toggle button again');
toggleKPICharts();
cy.get(ALERT_SUMMARY_CHARTS_COLLAPSED).should('not.exist');
cy.get(ALERT_SUMMARY_SEVERITY_DONUT_CHART).should('exist');
});
});
it('should add a filter out to KQL bar', () => {
clickAlertsHistogramLegend();
clickAlertsHistogramLegendFilterOut(ruleConfigs.name);
cy.get(GLOBAL_SEARCH_BAR_FILTER_ITEM).should(
'have.text',
`NOT kibana.alert.rule.name: ${ruleConfigs.name}`
);
cy.get(ALERTS_COUNT).should('not.exist');
context('Histogram legend hover actions', () => {
it('should should add a filter in to KQL bar', () => {
selectAlertsHistogram();
const expectedNumberOfAlerts = 1;
clickAlertsHistogramLegend();
clickAlertsHistogramLegendFilterFor(ruleConfigs.name);
cy.get(GLOBAL_SEARCH_BAR_FILTER_ITEM).should(
'have.text',
`kibana.alert.rule.name: ${ruleConfigs.name}`
);
cy.get(ALERTS_COUNT).should('have.text', `${expectedNumberOfAlerts} alert`);
});
cy.get(GLOBAL_SEARCH_BAR_FILTER_ITEM_DELETE).click();
cy.get(GLOBAL_SEARCH_BAR_FILTER_ITEM).should('not.exist');
});
it('should add a filter out to KQL bar', () => {
selectAlertsHistogram();
clickAlertsHistogramLegend();
clickAlertsHistogramLegendFilterOut(ruleConfigs.name);
cy.get(GLOBAL_SEARCH_BAR_FILTER_ITEM).should(
'have.text',
`NOT kibana.alert.rule.name: ${ruleConfigs.name}`
);
cy.get(ALERTS_COUNT).should('not.exist');
it('should add To Timeline', () => {
clickAlertsHistogramLegend();
clickAlertsHistogramLegendAddToTimeline(ruleConfigs.name);
cy.get(GLOBAL_SEARCH_BAR_FILTER_ITEM_DELETE).click();
cy.get(GLOBAL_SEARCH_BAR_FILTER_ITEM).should('not.exist');
});
cy.get(TOASTER).should('have.text', `Added ${ruleConfigs.name} to timeline`);
it('should add To Timeline', () => {
selectAlertsHistogram();
clickAlertsHistogramLegend();
clickAlertsHistogramLegendAddToTimeline(ruleConfigs.name);
cy.get(TOASTER).should('have.text', `Added ${ruleConfigs.name} to timeline`);
});
});
});

View file

@ -26,7 +26,7 @@ import {
goToOpenedAlerts,
openAlerts,
openFirstAlert,
selectCountTable,
selectAlertsCountTable,
waitForPageFilters,
sumAlertCountFromAlertCountTable,
parseAlertsCountToInt,
@ -61,7 +61,7 @@ describe.skip('Changing alert status', { tags: ['@ess', '@skipInServerless'] },
closeAlerts();
waitForAlerts();
waitForPageFilters();
selectCountTable();
selectAlertsCountTable();
});
it.skip('Open one alert when more than one closed alerts are selected', () => {
@ -103,7 +103,7 @@ describe.skip('Changing alert status', { tags: ['@ess', '@skipInServerless'] },
goToOpenedAlerts();
waitForAlerts();
selectCountTable();
selectAlertsCountTable();
cy.get(ALERTS_COUNT).should(
'have.text',
@ -126,7 +126,7 @@ describe.skip('Changing alert status', { tags: ['@ess', '@skipInServerless'] },
createRule(getNewRule());
visit(ALERTS_URL);
waitForAlertsToPopulate();
selectCountTable();
selectAlertsCountTable();
});
it('Mark one alert as acknowledged when more than one open alerts are selected', () => {
cy.get(ALERTS_COUNT)
@ -167,7 +167,7 @@ describe.skip('Changing alert status', { tags: ['@ess', '@skipInServerless'] },
createRule(getNewRule({ rule_id: '1', max_signals: 100 }));
visit(ALERTS_URL);
waitForAlertsToPopulate();
selectCountTable();
selectAlertsCountTable();
});
it.skip('Closes and opens alerts', () => {
const numberOfAlertsToBeClosed = 3;
@ -319,7 +319,7 @@ describe.skip('Changing alert status', { tags: ['@ess', '@skipInServerless'] },
createRule(getNewRule());
visit(ALERTS_URL);
waitForAlertsToPopulate();
selectCountTable();
selectAlertsCountTable();
});
it('Mark one alert as acknowledged when more than one open alerts are selected', () => {

View file

@ -29,7 +29,6 @@ import {
markAcknowledgedFirstAlert,
openPageFilterPopover,
resetFilters,
selectCountTable,
selectPageFilterValue,
togglePageFilterPopover,
visitAlertsPageWithCustomFilters,
@ -236,7 +235,6 @@ describe.skip(`Detections : Page Filters`, { tags: ['@ess', '@serverless'] }, ()
},
() => {
// mark status of one alert to be acknowledged
selectCountTable();
cy.get(ALERTS_COUNT)
.invoke('text')
.then((noOfAlerts) => {

View file

@ -72,8 +72,6 @@ export const MESSAGE = '[data-test-subj="formatted-field-message"]';
export const SELECTED_ALERTS = '[data-test-subj="selectedShowBulkActionsButton"]';
export const SELECT_AGGREGATION_CHART = '[data-test-subj="chart-select-table"]';
export const SEND_ALERT_TO_TIMELINE_BTN = '[data-test-subj="send-alert-to-timeline-button"]';
export const OPEN_ANALYZER_BTN = '[data-test-subj="view-in-analyzer"]';
@ -131,6 +129,33 @@ export const ACTIONS_EXPAND_BUTTON = '[data-test-subj="euiDataGridCellExpandButt
export const SHOW_TOP_N_HEADER =
'[data-test-subj="topN-container"] [data-test-subj="header-section-title"]';
export const SESSION_VIEWER_BUTTON = '[data-test-subj="session-view-button"]';
export const OVERLAY_CONTAINER = '[data-test-subj="overlayContainer"]';
/**
* Alerts KPIs
*/
export const ALERT_CHARTS_TOGGLE_BUTTON = getDataTestSubjectSelector('query-toggle-header');
export const SELECT_OVERVIEW_CHARTS = getDataTestSubjectSelector('chart-select-charts');
export const ALERT_SUMMARY_CHARTS = getDataTestSubjectSelector('alerts-charts-panel');
export const ALERT_SUMMARY_SEVERITY_DONUT_CHART =
getDataTestSubjectSelector('severity-level-donut');
export const ALERT_SUMMARY_RULES_TABLE = getDataTestSubjectSelector('alerts-by-rule-panel');
export const ALERT_SUMMARY_PROGRESS_BAR_CHARTS = getDataTestSubjectSelector(
'alerts-progress-bar-panel'
);
export const ALERT_SUMMARY_CHARTS_COLLAPSED = getDataTestSubjectSelector('chart-collapse');
export const ALERTS_HISTOGRAM = getDataTestSubjectSelector('alerts-histogram-panel');
export const ALERTS_HISTOGRAM_LEGEND =
'[data-test-subj="alerts-histogram-panel"] .echLegendItem__action';
@ -146,12 +171,13 @@ export const LEGEND_ACTIONS = {
COPY: (ruleName: string) => `[data-test-subj="legend-${ruleName}-embeddable_copyToClipboard"]`,
};
export const SESSION_VIEWER_BUTTON = '[data-test-subj="session-view-button"]';
export const ALERT_COUNT_TABLE = getDataTestSubjectSelector('alertsCountPanel');
export const OVERLAY_CONTAINER = '[data-test-subj="overlayContainer"]';
export const SELECT_COUNTS_TABLE = '[data-test-subj="chart-select-table"]';
export const ALERT_SUMMARY_SEVERITY_DONUT_CHART =
getDataTestSubjectSelector('severity-level-donut');
export const SELECT_TREEMAP = getDataTestSubjectSelector('chart-select-treemap');
export const ALERT_TREEMAP = getDataTestSubjectSelector('treemapPanel');
export const ALERT_TAGGING_CONTEXT_MENU_ITEM = '[data-test-subj="alert-tags-context-menu-item"]';

View file

@ -18,7 +18,9 @@ import {
MARK_ALERT_ACKNOWLEDGED_BTN,
OPEN_ALERT_BTN,
SEND_ALERT_TO_TIMELINE_BTN,
SELECT_AGGREGATION_CHART,
ALERT_CHARTS_TOGGLE_BUTTON,
SELECT_COUNTS_TABLE,
SELECT_TREEMAP,
TAKE_ACTION_POPOVER_BTN,
TIMELINE_CONTEXT_MENU_BTN,
CLOSE_FLYOUT,
@ -264,14 +266,22 @@ export const openAlerts = () => {
cy.get(OPEN_ALERT_BTN).click();
};
export const selectCountTable = () => {
cy.get(SELECT_AGGREGATION_CHART).click({ force: true });
export const toggleKPICharts = () => {
cy.get(ALERT_CHARTS_TOGGLE_BUTTON).click();
};
export const selectAlertsCountTable = () => {
cy.get(SELECT_COUNTS_TABLE).click();
};
export const selectAlertsHistogram = () => {
cy.get(SELECT_HISTOGRAM).click();
};
export const selectAlertsTreemap = () => {
cy.get(SELECT_TREEMAP).click();
};
export const goToAcknowledgedAlerts = () => {
/*
* below line commented because alertPageFiltersEnabled feature flag