Fix anomaly alert selection text (elastic#80746)

Was using the incorrect value. Add a case to leave out "and above" when on "critical." Add a test and rename files to snake case. Fixes elastic#80441.
smith · Oct 15, 2020 · 4fe8a73 · 4fe8a73
1 parent 3bed579
commit 4fe8a73
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 4 deletions.
diff --git a/...k/plugins/apm/public/components/alerting/TransactionDurationAnomalyAlertTrigger/index.tsx b/...k/plugins/apm/public/components/alerting/TransactionDurationAnomalyAlertTrigger/index.tsx
@@ -17,7 +17,7 @@ import { PopoverExpression } from '../ServiceAlertTrigger/PopoverExpression';
 import {
   AnomalySeverity,
   SelectAnomalySeverity,
-} from './SelectAnomalySeverity';
+} from './select_anomaly_severity';
 import { ENVIRONMENT_ALL } from '../../../../common/environment_filter_values';
 import {
   EnvironmentField,

diff --git a/...mponents/alerting/TransactionDurationAnomalyAlertTrigger/select_anomaly_severity.test.tsx b/...mponents/alerting/TransactionDurationAnomalyAlertTrigger/select_anomaly_severity.test.tsx
@@ -0,0 +1,43 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { render } from '@testing-library/react';
+import React, { ReactNode } from 'react';
+import { IntlProvider } from 'react-intl';
+import { ANOMALY_SEVERITY } from '../../../../../ml/common';
+import { SelectAnomalySeverity } from './select_anomaly_severity';
+
+function Wrapper({ children }: { children?: ReactNode }) {
+  return <IntlProvider locale="en">{children}</IntlProvider>;
+}
+
+describe('SelectAnomalySeverity', () => {
+  it('shows the correct text for each item', async () => {
+    const result = render(
+      <SelectAnomalySeverity
+        onChange={() => {}}
+        value={ANOMALY_SEVERITY.CRITICAL}
+      />,
+      { wrapper: Wrapper }
+    );
+    const button = (await result.findAllByText('critical'))[1];
+
+    button.click();
+
+    const options = await result.findAllByTestId(
+      'SelectAnomalySeverity option text'
+    );
+
+    expect(
+      options.map((option) => (option.firstChild as HTMLElement)?.innerHTML)
+    ).toEqual([
+      'score critical ', // Trailing space is intentional here, to keep the i18n simple
+      'score major and above',
+      'score minor and above',
+      'score warning and above',
+    ]);
+  });
+});
diff --git a/...alyAlertTrigger/SelectAnomalySeverity.tsx → ...yAlertTrigger/select_anomaly_severity.tsx b/...alyAlertTrigger/SelectAnomalySeverity.tsx → ...yAlertTrigger/select_anomaly_severity.tsx
@@ -45,11 +45,14 @@ export function SelectAnomalySeverity({ onChange, value }: Props) {
             <AnomalySeverity type={option.type} />
             <EuiSpacer size="xs" />
             <EuiText size="xs" color="subdued">
-              <p className="euiTextColor--subdued">
+              <p
+                className="euiTextColor--subdued"
+                data-test-subj="SelectAnomalySeverity option text"
+              >
                 <FormattedMessage
                   id="xpack.apm.alerts.anomalySeverity.scoreDetailsDescription"
-                  defaultMessage="score {value} and above"
-                  values={{ value }}
+                  defaultMessage="score {value} {value, select, critical {} other {and above}}"
+                  values={{ value: option.type }}
                 />
               </p>
             </EuiText>