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

Signed-off-by: Yibo Wang <yibow@amazon.com>
---
 CHANGELOG.md                                  |   2 +-
 .../experimental_callout.test.tsx.snap        | 138 +++++++++++++++---
 .../experimental_callout.test.tsx             |  17 ++-
 3 files changed, 135 insertions(+), 22 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index aaf53e115be4..3769b0c96d87 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -56,7 +56,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 * [Viz Builder] Create a new wizard directly on a dashboard ([#2384](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2384))
 * [Multi DataSource] UX enhacement on index pattern management stack ([#2505](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2505))
 * [Multi DataSource] UX enhancement on Data source management stack ([#2521](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2521))
-* [Multi DataSource] UX enhancement for Data source management creation page ([#2051](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2501))
+
 
 ### 🐛 Bug Fixes
 
diff --git a/src/plugins/data_source_management/public/management_app/compoenent/experimental_callout/__snapshots__/experimental_callout.test.tsx.snap b/src/plugins/data_source_management/public/management_app/compoenent/experimental_callout/__snapshots__/experimental_callout.test.tsx.snap
index e1b90e038970..f3c2e06db210 100644
--- a/src/plugins/data_source_management/public/management_app/compoenent/experimental_callout/__snapshots__/experimental_callout.test.tsx.snap
+++ b/src/plugins/data_source_management/public/management_app/compoenent/experimental_callout/__snapshots__/experimental_callout.test.tsx.snap
@@ -1,31 +1,133 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Dataasource experimental callout component should render normally 1`] = `
-<Fragment>
+exports[`Datasource experimental callout component should render normally 1`] = `
+<ExperimentalCallout
+  docLinks={
+    Object {
+      "links": Object {
+        "noDocumentation": Object {
+          "indexPatterns": Object {
+            "introduction": "",
+          },
+          "scriptedFields": Object {},
+        },
+      },
+    }
+  }
+>
   <EuiCallOut
     data-test-subj="data-source-experimental-call"
     iconType="iInCircle"
     title="Experimental Feature"
   >
-    <p>
-      The feature is experimental and should not be used in a production environment. Any index patterns, visualization, and observability panels will be impacted if the feature is deactivated. For more information see 
-      <EuiLink
-        href=""
-        target="_blank"
+    <div
+      className="euiCallOut euiCallOut--primary"
+      data-test-subj="data-source-experimental-call"
+    >
+      <div
+        className="euiCallOutHeader"
       >
-        Data Source Documentation
-      </EuiLink>
-       
-      To leave feedback, visit 
-      <EuiLink
-        target="_blank"
+        <EuiIcon
+          aria-hidden="true"
+          className="euiCallOutHeader__icon"
+          color="inherit"
+          size="m"
+          type="iInCircle"
+        >
+          <span
+            aria-hidden="true"
+            className="euiCallOutHeader__icon"
+            color="inherit"
+            data-euiicon-type="iInCircle"
+            size="m"
+          />
+        </EuiIcon>
+        <span
+          className="euiCallOutHeader__title"
+        >
+          Experimental Feature
+        </span>
+      </div>
+      <EuiText
+        color="default"
+        size="s"
       >
-        OpenSearch Forum
-      </EuiLink>
-    </p>
+        <div
+          className="euiText euiText--small"
+        >
+          <EuiTextColor
+            color="default"
+            component="div"
+          >
+            <div
+              className="euiTextColor euiTextColor--default"
+            >
+              <p>
+                The feature is experimental and should not be used in a production environment. Any index patterns, visualization, and observability panels will be impacted if the feature is deactivated. For more information see 
+                <EuiLink
+                  href=""
+                  target="_blank"
+                >
+                  <a
+                    className="euiLink euiLink--primary"
+                    href=""
+                    rel="noopener noreferrer"
+                    target="_blank"
+                  >
+                    Data Source Documentation
+                    <EuiIcon
+                      aria-label="External link"
+                      className="euiLink__externalIcon"
+                      size="s"
+                      type="popout"
+                    >
+                      <span
+                        aria-label="External link"
+                        className="euiLink__externalIcon"
+                        data-euiicon-type="popout"
+                        size="s"
+                      />
+                    </EuiIcon>
+                    <EuiScreenReaderOnly>
+                      <span
+                        className="euiScreenReaderOnly"
+                      >
+                        <EuiI18n
+                          default="(opens in a new tab or window)"
+                          token="euiLink.newTarget.screenReaderOnlyText"
+                        >
+                          (opens in a new tab or window)
+                        </EuiI18n>
+                      </span>
+                    </EuiScreenReaderOnly>
+                  </a>
+                </EuiLink>
+                 
+                To leave feedback, visit 
+                <EuiLink
+                  target="_blank"
+                >
+                  <button
+                    className="euiLink euiLink--primary"
+                    disabled={false}
+                    type="button"
+                  >
+                    OpenSearch Forum
+                  </button>
+                </EuiLink>
+              </p>
+            </div>
+          </EuiTextColor>
+        </div>
+      </EuiText>
+    </div>
   </EuiCallOut>
   <EuiSpacer
     size="m"
-  />
-</Fragment>
+  >
+    <div
+      className="euiSpacer euiSpacer--m"
+    />
+  </EuiSpacer>
+</ExperimentalCallout>
 `;
diff --git a/src/plugins/data_source_management/public/management_app/compoenent/experimental_callout/experimental_callout.test.tsx b/src/plugins/data_source_management/public/management_app/compoenent/experimental_callout/experimental_callout.test.tsx
index 42f7453d8a41..cd61e0ea2056 100644
--- a/src/plugins/data_source_management/public/management_app/compoenent/experimental_callout/experimental_callout.test.tsx
+++ b/src/plugins/data_source_management/public/management_app/compoenent/experimental_callout/experimental_callout.test.tsx
@@ -4,15 +4,26 @@
  */
 
 import React from 'react';
-import { shallow } from 'enzyme';
+import { mount } from 'enzyme';
 import { ExperimentalCallout } from './experimental_callout';
 import { DocLinksStart } from 'opensearch-dashboards/public';
 import { docLinks } from '../../../mocks';
 
-describe('Dataasource experimental callout component', () => {
+const titleIdentifier = '.euiCallOutHeader__title';
+const descriptionIdentifier = '[data-test-subj="data-source-experimental-call"]';
+const expectedTitleText = 'Experimental Feature';
+const expectedDescriptionText =
+  'Experimental FeatureThe feature is experimental and should not be used in a production environment. Any index patterns, visualization, and observability panels will be impacted if the feature is deactivated. For more information see Data Source Documentation(opens in a new tab or window) To leave feedback, visit OpenSearch Forum';
+
+describe('Datasource experimental callout component', () => {
   test('should render normally', () => {
     const mockedDocLinks = docLinks as DocLinksStart;
-    const component = shallow(<ExperimentalCallout docLinks={mockedDocLinks} />);
+    const component = mount(<ExperimentalCallout docLinks={mockedDocLinks} />);
+    const titleText = component.find(titleIdentifier).text();
+    const descriptionText = component.find(descriptionIdentifier).last().text();
+
+    expect(titleText).toBe(expectedTitleText);
+    expect(descriptionText).toBe(expectedDescriptionText);
     expect(component).toMatchSnapshot();
   });
 });