From 013cc5ffb83f340c000976556f9575bf114531a4 Mon Sep 17 00:00:00 2001
From: Yibo Wang <yibow@amazon.com>
Date: Mon, 10 Oct 2022 11:20:49 -0700
Subject: [PATCH] Update UT

Signed-off-by: Yibo Wang <yibow@amazon.com>
---
 .../experimental_callout.test.tsx.snap        | 86 +++++++++++++++----
 .../experimental_callout.test.tsx             | 15 +++-
 .../experimental_callout.tsx                  |  8 +-
 3 files changed, 88 insertions(+), 21 deletions(-)

diff --git a/src/plugins/index_pattern_management/public/components/experimental_callout/__snapshots__/experimental_callout.test.tsx.snap b/src/plugins/index_pattern_management/public/components/experimental_callout/__snapshots__/experimental_callout.test.tsx.snap
index 1e62f59f3c0f..16d951e8ebc7 100644
--- a/src/plugins/index_pattern_management/public/components/experimental_callout/__snapshots__/experimental_callout.test.tsx.snap
+++ b/src/plugins/index_pattern_management/public/components/experimental_callout/__snapshots__/experimental_callout.test.tsx.snap
@@ -1,31 +1,87 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Index pattern experimental callout component should render normally 1`] = `
-<Fragment>
+<ExperimentalCallout>
   <EuiCallOut
     color="warning"
     data-test-subj="index-pattern-experimental-callout"
     iconType="alert"
     title="Experimental feature active"
   >
-    <p>
+    <div
+      className="euiCallOut euiCallOut--warning"
+      data-test-subj="index-pattern-experimental-callout"
+    >
+      <div
+        className="euiCallOutHeader"
+      >
+        <EuiIcon
+          aria-hidden="true"
+          className="euiCallOutHeader__icon"
+          color="inherit"
+          size="m"
+          type="alert"
+        >
+          <span
+            aria-hidden="true"
+            className="euiCallOutHeader__icon"
+            color="inherit"
+            data-euiicon-type="alert"
+            size="m"
+          />
+        </EuiIcon>
+        <span
+          className="euiCallOutHeader__title"
+        >
+          Experimental feature active
+        </span>
+      </div>
       <EuiText
-        data-test-subj="index-pattern-experimental-callout-text"
+        color="default"
+        size="s"
       >
-        The experimental feature 
-        <b>
-          Data Source Connection 
-        </b>
-        is active. To create an index pattern without using data from an external source, use 
-        <b>
-          default
-        </b>
-        . Any index pattern created using an external data source will result in an error if the experimental feature is deactivated.
+        <div
+          className="euiText euiText--small"
+        >
+          <EuiTextColor
+            color="default"
+            component="div"
+          >
+            <div
+              className="euiTextColor euiTextColor--default"
+            >
+              <EuiText
+                data-test-subj="index-pattern-experimental-callout-text"
+              >
+                <div
+                  className="euiText euiText--medium"
+                  data-test-subj="index-pattern-experimental-callout-text"
+                >
+                  <p>
+                    The experimental feature 
+                    <b>
+                      Data Source Connection 
+                    </b>
+                    is active. To create an index pattern without using data from an external source, use 
+                    <b>
+                      default
+                    </b>
+                    . Any index pattern created using an external data source will result in an error if the experimental feature is deactivated.
+                  </p>
+                </div>
+              </EuiText>
+            </div>
+          </EuiTextColor>
+        </div>
       </EuiText>
-    </p>
+    </div>
   </EuiCallOut>
   <EuiSpacer
     size="m"
-  />
-</Fragment>
+  >
+    <div
+      className="euiSpacer euiSpacer--m"
+    />
+  </EuiSpacer>
+</ExperimentalCallout>
 `;
diff --git a/src/plugins/index_pattern_management/public/components/experimental_callout/experimental_callout.test.tsx b/src/plugins/index_pattern_management/public/components/experimental_callout/experimental_callout.test.tsx
index 971b041af8da..a00fb635bd02 100644
--- a/src/plugins/index_pattern_management/public/components/experimental_callout/experimental_callout.test.tsx
+++ b/src/plugins/index_pattern_management/public/components/experimental_callout/experimental_callout.test.tsx
@@ -4,12 +4,23 @@
  */
 
 import React from 'react';
-import { shallow } from 'enzyme';
+import { mount } from 'enzyme';
 import { ExperimentalCallout } from './experimental_callout';
 
+const titleIdentifier = '.euiCallOutHeader__title';
+const descriptionIdentifier = '[data-test-subj="index-pattern-experimental-callout-text"]';
+const expectedTitleText = 'Experimental feature active';
+const expectedDescriptionText =
+  'The experimental feature Data Source Connection is active. To create an index pattern without using data from an external source, use default. Any index pattern created using an external data source will result in an error if the experimental feature is deactivated.';
+
 describe('Index pattern experimental callout component', () => {
   test('should render normally', () => {
-    const component = shallow(<ExperimentalCallout />);
+    const component = mount(<ExperimentalCallout />);
+    const titleText = component.find(titleIdentifier).text();
+    const descriptionText = component.find(descriptionIdentifier).last().text();
+
+    expect(titleText).toBe(expectedTitleText);
+    expect(descriptionText).toBe(expectedDescriptionText);
     expect(component).toMatchSnapshot();
   });
 });
diff --git a/src/plugins/index_pattern_management/public/components/experimental_callout/experimental_callout.tsx b/src/plugins/index_pattern_management/public/components/experimental_callout/experimental_callout.tsx
index 3d8f6517c4b1..96859204d637 100644
--- a/src/plugins/index_pattern_management/public/components/experimental_callout/experimental_callout.tsx
+++ b/src/plugins/index_pattern_management/public/components/experimental_callout/experimental_callout.tsx
@@ -16,15 +16,15 @@ export const ExperimentalCallout = () => {
         color="warning"
         data-test-subj="index-pattern-experimental-callout"
       >
-        <p>
-          <EuiText data-test-subj="index-pattern-experimental-callout-text">
+        <EuiText data-test-subj="index-pattern-experimental-callout-text">
+          <p>
             {DESCRIPTION_FIRST_PART}
             <b>{DATASOURCE_CONNECTION}</b>
             {DESCRIPTION_SECOND_PART}
             <b>{DEFAULT}</b>
             {DESCRIPTION_THIRD_PART}
-          </EuiText>
-        </p>
+          </p>
+        </EuiText>
       </EuiCallOut>
       <EuiSpacer size="m" />
     </>