github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-23 01:13:23 -04:00
Code Issues Projects Releases Packages Wiki Activity

[AO] Add functional test for alert summary widget on alerts page. (#154219)

Browse source 
Resolves #148645

## Summary

This PR adds a functional test for the alert summary widget on the
alerts page.

Flaky test runner:
https://buildkite.com/elastic/kibana-flaky-test-suite-runner/builds/2069
This commit is contained in:
Maryam Saeidi 2023-04-04 18:18:40 +02:00 • committed by GitHub
parent 6350e146fa
commit ce277ceb7d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 122 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

12
x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/alert_summary_widget.test.tsx
View file

@ -12,6 +12,10 @@ import { AlertSummaryWidget } from './alert_summary_widget';
import { AlertSummaryWidgetProps } from './types';
import { mockedAlertSummaryTimeRange, mockedChartProps } from '../../mock/alert_summary_widget';
import { useLoadAlertSummary } from '../../hooks/use_load_alert_summary';
import {
ACTIVE_ALERT_COUNT_DATA_TEST_SUBJ,
TOTAL_ALERT_COUNT_DATA_TEST_SUBJ,
} from './components/constants';
jest.mock('@kbn/kibana-react-plugin/public/ui_settings/use_ui_setting', () => ({
useUiSetting: jest.fn().mockImplementation(() => true),
@ -66,8 +70,12 @@ describe('AlertSummaryWidget', () => {
it('should render counts and title correctly', async () => {
const alertSummaryWidget = renderComponent();
expect(alertSummaryWidget.queryByTestId('activeAlertsCount')).toHaveTextContent('1');
expect(alertSummaryWidget.queryByTestId('totalAlertsCount')).toHaveTextContent('8');
expect(alertSummaryWidget.queryByTestId(ACTIVE_ALERT_COUNT_DATA_TEST_SUBJ)).toHaveTextContent(
'1'
);
expect(alertSummaryWidget.queryByTestId(TOTAL_ALERT_COUNT_DATA_TEST_SUBJ)).toHaveTextContent(
'8'
);
expect(alertSummaryWidget.queryByTestId(TITLE_DATA_TEST_SUBJ)).toBeTruthy();
});

8
x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/components/active_alert_counts.tsx
View file

@ -8,7 +8,11 @@
import React from 'react';
import numeral from '@elastic/numeral';
import { EuiIcon, EuiText, useEuiTheme } from '@elastic/eui';
import { ACTIVE_NOW_LABEL, ALERT_COUNT_FORMAT } from './constants';
import {
ACTIVE_ALERT_COUNT_DATA_TEST_SUBJ,
ACTIVE_NOW_LABEL,
ALERT_COUNT_FORMAT,
} from './constants';
interface Props {
activeAlertCount: number;
@ -22,7 +26,7 @@ export const ActiveAlertCounts = ({ activeAlertCount }: Props) => {
<EuiText
color={!!activeAlertCount ? euiTheme.colors.dangerText : euiTheme.colors.successText}
>
<h3 data-test-subj="activeAlertsCount">
<h3 data-test-subj={ACTIVE_ALERT_COUNT_DATA_TEST_SUBJ}>
{numeral(activeAlertCount).format(ALERT_COUNT_FORMAT)}
{!!activeAlertCount && (
<>

17
x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/components/alert_summary_widget_compact.test.tsx
View file

@ -13,6 +13,7 @@ import {
} from './alert_summary_widget_compact';
import { render } from '@testing-library/react';
import { mockedAlertSummaryResponse, mockedChartProps } from '../../../mock/alert_summary_widget';
import { ACTIVE_ALERT_COUNT_DATA_TEST_SUBJ, TOTAL_ALERT_COUNT_DATA_TEST_SUBJ } from './constants';
describe('AlertSummaryWidgetCompact', () => {
const renderComponent = (props: Partial<AlertSummaryWidgetCompactProps> = {}) =>
@ -36,8 +37,12 @@ describe('AlertSummaryWidgetCompact', () => {
it('should render counts correctly', async () => {
const alertSummaryWidget = renderComponent();
expect(alertSummaryWidget.queryByTestId('activeAlertsCount')).toHaveTextContent('2');
expect(alertSummaryWidget.queryByTestId('totalAlertsCount')).toHaveTextContent('22');
expect(alertSummaryWidget.queryByTestId(ACTIVE_ALERT_COUNT_DATA_TEST_SUBJ)).toHaveTextContent(
'2'
);
expect(alertSummaryWidget.queryByTestId(TOTAL_ALERT_COUNT_DATA_TEST_SUBJ)).toHaveTextContent(
'22'
);
});
it('should render higher counts correctly', async () => {
@ -45,7 +50,11 @@ describe('AlertSummaryWidgetCompact', () => {
activeAlertCount: 2000,
});
expect(alertSummaryWidget.queryByTestId('activeAlertsCount')).toHaveTextContent('2k');
expect(alertSummaryWidget.queryByTestId('totalAlertsCount')).toHaveTextContent('2.02k');
expect(alertSummaryWidget.queryByTestId(ACTIVE_ALERT_COUNT_DATA_TEST_SUBJ)).toHaveTextContent(
'2k'
);
expect(alertSummaryWidget.queryByTestId(TOTAL_ALERT_COUNT_DATA_TEST_SUBJ)).toHaveTextContent(
'2.02k'
);
});
});

21
x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/components/alert_summary_widget_full_size.test.tsx
View file

@ -6,13 +6,14 @@
*/
import React from 'react';
import { render } from '@testing-library/react';
import { __IntlProvider as IntlProvider } from '@kbn/i18n-react';
import { mockedAlertSummaryResponse, mockedChartProps } from '../../../mock/alert_summary_widget';
import {
AlertSummaryWidgetFullSize,
AlertSummaryWidgetFullSizeProps,
} from './alert_summary_widget_full_size';
import { render } from '@testing-library/react';
import { mockedAlertSummaryResponse, mockedChartProps } from '../../../mock/alert_summary_widget';
import { ACTIVE_ALERT_COUNT_DATA_TEST_SUBJ, TOTAL_ALERT_COUNT_DATA_TEST_SUBJ } from './constants';
describe('AlertSummaryWidgetFullSize', () => {
const renderComponent = (props: Partial<AlertSummaryWidgetFullSizeProps> = {}) =>
@ -35,8 +36,12 @@ describe('AlertSummaryWidgetFullSize', () => {
it('should render counts correctly', async () => {
const alertSummaryWidget = renderComponent();
expect(alertSummaryWidget.queryByTestId('activeAlertsCount')).toHaveTextContent('2');
expect(alertSummaryWidget.queryByTestId('totalAlertsCount')).toHaveTextContent('22');
expect(alertSummaryWidget.queryByTestId(ACTIVE_ALERT_COUNT_DATA_TEST_SUBJ)).toHaveTextContent(
'2'
);
expect(alertSummaryWidget.queryByTestId(TOTAL_ALERT_COUNT_DATA_TEST_SUBJ)).toHaveTextContent(
'22'
);
});
it('should render higher counts correctly', async () => {
@ -44,7 +49,11 @@ describe('AlertSummaryWidgetFullSize', () => {
activeAlertCount: 2000,
});
expect(alertSummaryWidget.queryByTestId('activeAlertsCount')).toHaveTextContent('2k');
expect(alertSummaryWidget.queryByTestId('totalAlertsCount')).toHaveTextContent('2.02k');
expect(alertSummaryWidget.queryByTestId(ACTIVE_ALERT_COUNT_DATA_TEST_SUBJ)).toHaveTextContent(
'2k'
);
expect(alertSummaryWidget.queryByTestId(TOTAL_ALERT_COUNT_DATA_TEST_SUBJ)).toHaveTextContent(
'2.02k'
);
});
});

11
x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/components/all_alert_counts.tsx
View file

@ -8,7 +8,12 @@
import React from 'react';
import numeral from '@elastic/numeral';
import { EuiText } from '@elastic/eui';
import { ALERT_COUNT_FORMAT, ALERTS_LABEL, ALL_ALERT_COLOR } from './constants';
import {
ALERT_COUNT_FORMAT,
ALERTS_LABEL,
ALL_ALERT_COLOR,
TOTAL_ALERT_COUNT_DATA_TEST_SUBJ,
} from './constants';
interface Props {
count: number;
@ -18,7 +23,9 @@ export const AllAlertCounts = ({ count }: Props) => {
return (
<>
<EuiText color={ALL_ALERT_COLOR}>
<h3 data-test-subj="totalAlertsCount">{numeral(count).format(ALERT_COUNT_FORMAT)}</h3>
<h3 data-test-subj={TOTAL_ALERT_COUNT_DATA_TEST_SUBJ}>
{numeral(count).format(ALERT_COUNT_FORMAT)}
</h3>
</EuiText>
<EuiText size="s" color="subdued">
{ALERTS_LABEL}

3
x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/components/constants.tsx
View file

@ -12,6 +12,9 @@ import React from 'react';
export const TOOLTIP_DATE_FORMAT = 'YYYY-MM-DD HH:mm';
export const ALERT_COUNT_FORMAT = '0.[00]a';
export const ACTIVE_ALERT_COUNT_DATA_TEST_SUBJ = 'activeAlertCount';
export const TOTAL_ALERT_COUNT_DATA_TEST_SUBJ = 'totalAlertCount';
const visColors = euiPaletteColorBlind();
export const ALL_ALERT_COLOR = visColors[1];

20
x-pack/test/functional/services/observability/components/alert_summary_widget.ts
View file

@ -11,6 +11,11 @@ const COMPACT_COMPONENT_SELECTOR = 'alertSummaryWidgetCompact';
const COMPACT_TIME_RANGE_TITLE_SELECTOR = 'timeRangeTitle';
const COMPACT_ACTIVE_ALERTS_SELECTOR = 'activeAlerts';
const FULL_SIZE_COMPONENT_SELECTOR = 'alertSummaryWidgetFullSize';
const ACTIVE_ALERT_SELECTOR = 'activeAlertCount';
const TOTAL_ALERT_SELECTOR = 'totalAlertCount';
export function ObservabilityAlertSummaryWidgetProvider({ getService }: FtrProviderContext) {
const testSubjects = getService('testSubjects');
@ -30,10 +35,25 @@ export function ObservabilityAlertSummaryWidgetProvider({ getService }: FtrProvi
return await testSubjects.find(COMPACT_COMPONENT_SELECTOR);
};
const getFullSizeComponentSelectorOrFail = async () => {
return await testSubjects.existOrFail(FULL_SIZE_COMPONENT_SELECTOR);
};
const getActiveAlertCount = async () => {
return (await testSubjects.find(ACTIVE_ALERT_SELECTOR)).getVisibleText();
};
const getTotalAlertCount = async () => {
return (await testSubjects.find(TOTAL_ALERT_SELECTOR)).getVisibleText();
};
return {
getCompactActiveAlertSelector,
getCompactComponentSelectorOrFail,
getCompactTimeRangeTitle,
getCompactWidgetSelector,
getFullSizeComponentSelectorOrFail,
getActiveAlertCount,
getTotalAlertCount,
};
}

1
x-pack/test/observability_functional/apps/observability/index.ts
View file

@ -12,6 +12,7 @@ export default function ({ loadTestFile }: FtrProviderContext) {
loadTestFile(require.resolve('./pages/alerts'));
loadTestFile(require.resolve('./pages/alerts/add_to_case'));
loadTestFile(require.resolve('./pages/alerts/alert_status'));
loadTestFile(require.resolve('./pages/alerts/alert_summary_widget'));
loadTestFile(require.resolve('./pages/alerts/pagination'));
loadTestFile(require.resolve('./pages/alerts/rule_stats'));
loadTestFile(require.resolve('./pages/alerts/state_synchronization'));

45
x-pack/test/observability_functional/apps/observability/pages/alerts/alert_summary_widget.ts Normal file
View file

@ -0,0 +1,45 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/
import expect from '@kbn/expect';
import { FtrProviderContext } from '../../../../ftr_provider_context';
const ALL_ALERTS = 40;
const ACTIVE_ALERTS = 10;
export default ({ getService }: FtrProviderContext) => {
const esArchiver = getService('esArchiver');
describe('Alert summary widget >', function () {
this.tags('includeFirefox');
const observability = getService('observability');
before(async () => {
await esArchiver.load('x-pack/test/functional/es_archives/observability/alerts');
await esArchiver.load('x-pack/test/functional/es_archives/infra/metrics_and_logs');
await observability.alerts.common.navigateToTimeWithData();
});
after(async () => {
await esArchiver.unload('x-pack/test/functional/es_archives/observability/alerts');
await esArchiver.unload('x-pack/test/functional/es_archives/infra/metrics_and_logs');
});
it('shows number of total and active alerts', async () => {
await observability.components.alertSummaryWidget.getFullSizeComponentSelectorOrFail();
const activeAlertCount =
await observability.components.alertSummaryWidget.getActiveAlertCount();
const totalAlertCount =
await observability.components.alertSummaryWidget.getTotalAlertCount();
expect(activeAlertCount).to.be(`${ACTIVE_ALERTS} `);
expect(totalAlertCount).to.be(`${ALL_ALERTS}`);
});
});
};