[i18n] [8.7] Integrate 8.7.0 Translations (#153316)

x-pack/plugins/observability/public/components/app/section/ux/index.test.tsx

@@ -12,6 +12,11 @@ import * as hasDataHook from '../../../../hooks/use_has_data';
 import { render, data as dataMock } from '../../../../utils/test_helper';
 import { UXSection } from '.';
 import { response } from './mock_data/ux.mock';
+import {
+  LEGEND_GOOD_LABEL,
+  LEGEND_NEEDS_IMPROVEMENT_LABEL,
+  LEGEND_POOR_LABEL,
+} from '../../../shared/core_web_vitals/translations';
 
 jest.mock('react-router-dom', () => ({
   useLocation: () => ({
@@ -46,7 +51,9 @@ describe('UXSection', () => {
       status: fetcherHook.FETCH_STATUS.SUCCESS,
       refetch: jest.fn(),
     });
-    const { getByText, getAllByText } = render(<UXSection bucketSize={bucketSize} />);
+    const { getByText, getByTestId, getAllByTestId } = render(
+      <UXSection bucketSize={bucketSize} />
+    );
 
     expect(getByText('User Experience')).toBeInTheDocument();
     expect(getByText('Show dashboard')).toBeInTheDocument();
@@ -57,20 +64,20 @@ describe('UXSection', () => {
     expect(getByText('0.010')).toBeInTheDocument();
 
     // LCP Rank Values
-    expect(getByText('Good (65%)')).toBeInTheDocument();
-    expect(getByText('Needs improvement (19%)')).toBeInTheDocument();
+    expect(getByTestId(`${LEGEND_GOOD_LABEL}-65`)).toBeInTheDocument();
+    expect(getByTestId(`${LEGEND_NEEDS_IMPROVEMENT_LABEL}-19`)).toBeInTheDocument();
 
     // LCP and FID both have same poor value
-    expect(getAllByText('Poor (16%)')).toHaveLength(2);
+    expect(getAllByTestId(`${LEGEND_POOR_LABEL}-16`)).toHaveLength(2);
 
     // FID Rank Values
-    expect(getByText('Good (73%)')).toBeInTheDocument();
-    expect(getByText('Needs improvement (11%)')).toBeInTheDocument();
+    expect(getByTestId(`${LEGEND_GOOD_LABEL}-73`)).toBeInTheDocument();
+    expect(getByTestId(`${LEGEND_NEEDS_IMPROVEMENT_LABEL}-11`)).toBeInTheDocument();
 
     // CLS Rank Values
-    expect(getByText('Good (86%)')).toBeInTheDocument();
-    expect(getByText('Needs improvement (8%)')).toBeInTheDocument();
-    expect(getByText('Poor (6%)')).toBeInTheDocument();
+    expect(getByTestId(`${LEGEND_GOOD_LABEL}-86`)).toBeInTheDocument();
+    expect(getByTestId(`${LEGEND_NEEDS_IMPROVEMENT_LABEL}-8`)).toBeInTheDocument();
+    expect(getByTestId(`${LEGEND_POOR_LABEL}-6`)).toBeInTheDocument();
   });
   it('shows loading state', () => {
     jest.spyOn(fetcherHook, 'useFetcher').mockReturnValue({

x-pack/plugins/observability/public/components/shared/core_web_vitals/core_vital_item.test.tsx

@@ -8,7 +8,12 @@
 import React from 'react';
 import { render } from '../../../utils/test_helper';
 import { CoreVitalItem } from './core_vital_item';
-import { NO_DATA } from './translations';
+import {
+  NO_DATA,
+  LEGEND_GOOD_LABEL,
+  LEGEND_NEEDS_IMPROVEMENT_LABEL,
+  LEGEND_POOR_LABEL,
+} from './translations';
 
 describe('CoreVitalItem', () => {
   const value = '0.005';
@@ -18,7 +23,7 @@ describe('CoreVitalItem', () => {
   const helpLabel = 'sample help label';
 
   it('renders if value is truthy', () => {
-    const { getByText } = render(
+    const { getByText, getByTestId } = render(
       <CoreVitalItem
         title={title}
         value={value}
@@ -31,9 +36,10 @@ describe('CoreVitalItem', () => {
 
     expect(getByText(title)).toBeInTheDocument();
     expect(getByText(value)).toBeInTheDocument();
-    expect(getByText('Good (85%)')).toBeInTheDocument();
-    expect(getByText('Needs improvement (10%)')).toBeInTheDocument();
-    expect(getByText('Poor (5%)')).toBeInTheDocument();
+
+    expect(getByTestId(`${LEGEND_GOOD_LABEL}-85`)).toBeInTheDocument();
+    expect(getByTestId(`${LEGEND_NEEDS_IMPROVEMENT_LABEL}-10`)).toBeInTheDocument();
+    expect(getByTestId(`${LEGEND_POOR_LABEL}-5`)).toBeInTheDocument();
   });
 
   it('renders loading state when loading is truthy', () => {

x-pack/plugins/observability/public/components/shared/core_web_vitals/palette_legends.tsx

@@ -74,7 +74,7 @@ export function PaletteLegends({ ranks, title, onItemHover, thresholds, isCls }:
           >
             <StyledSpan darkMode={darkMode}>
               <PaletteLegend color={color}>
-                <EuiText size="xs">
+                <EuiText size="xs" data-test-subj={`${labels[ind]}-${ranks?.[ind]}`}>
                   <FormattedMessage
                     id="xpack.observability.ux.coreVitals.paletteLegend.rankPercentage"
                     defaultMessage="{labelsInd} ({ranksInd}%)"