From 4de20fcfc33889c994fdfcd7c8b11e53135b533f Mon Sep 17 00:00:00 2001
From: tygao <tygao@amazon.com>
Date: Fri, 19 Apr 2024 10:50:26 +0800
Subject: [PATCH] test: add tests

Signed-off-by: tygao <tygao@amazon.com>
---
 .../nav_controls/nav_controls_service.test.ts | 45 +++++++++++++++++++
 .../nav_controls/nav_controls_service.ts      |  2 +-
 .../right_navigation_button.test.tsx.snap     | 23 ++++++++++
 .../header/right_navigation_button.test.tsx   | 45 +++++++++++++++++++
 .../ui/header/right_navigation_button.tsx     |  1 +
 5 files changed, 115 insertions(+), 1 deletion(-)
 create mode 100644 src/core/public/chrome/ui/header/__snapshots__/right_navigation_button.test.tsx.snap
 create mode 100644 src/core/public/chrome/ui/header/right_navigation_button.test.tsx

diff --git a/src/core/public/chrome/nav_controls/nav_controls_service.test.ts b/src/core/public/chrome/nav_controls/nav_controls_service.test.ts
index 6e2a71537e17..aa4d9dff2b15 100644
--- a/src/core/public/chrome/nav_controls/nav_controls_service.test.ts
+++ b/src/core/public/chrome/nav_controls/nav_controls_service.test.ts
@@ -30,6 +30,12 @@
 
 import { NavControlsService } from './nav_controls_service';
 import { take } from 'rxjs/operators';
+import { applicationServiceMock, httpServiceMock } from '../../../../core/public/mocks';
+
+const mockMountReactNode = jest.fn().mockReturnValue('mock mount point');
+jest.mock('../../utils', () => ({
+  mountReactNode: () => mockMountReactNode(),
+}));
 
 describe('RecentlyAccessed#start()', () => {
   const getStart = () => {
@@ -76,6 +82,45 @@ describe('RecentlyAccessed#start()', () => {
     });
   });
 
+  describe('top right navigation', () => {
+    const mockProps = {
+      application: applicationServiceMock.createStartContract(),
+      http: httpServiceMock.createStartContract(),
+      appId: 'app_id',
+      iconType: 'icon',
+      title: 'title',
+      order: 1,
+    };
+    it('allows registration', async () => {
+      const navControls = getStart();
+      navControls.registerRightNavigation(mockProps);
+      expect(await navControls.getRight$().pipe(take(1)).toPromise()).toEqual([
+        {
+          mount: 'mock mount point',
+          order: 1,
+        },
+      ]);
+    });
+
+    it('sorts controls by order property', async () => {
+      const navControls = getStart();
+      const props1 = { ...mockProps, order: 10 };
+      const props2 = { ...mockProps, order: 0 };
+      navControls.registerRightNavigation(props1);
+      navControls.registerRightNavigation(props2);
+      expect(await navControls.getRight$().pipe(take(1)).toPromise()).toEqual([
+        {
+          mount: 'mock mount point',
+          order: 0,
+        },
+        {
+          mount: 'mock mount point',
+          order: 10,
+        },
+      ]);
+    });
+  });
+
   describe('center controls', () => {
     it('allows registration', async () => {
       const navControls = getStart();
diff --git a/src/core/public/chrome/nav_controls/nav_controls_service.ts b/src/core/public/chrome/nav_controls/nav_controls_service.ts
index 68fad1429373..6e2d8b05b452 100644
--- a/src/core/public/chrome/nav_controls/nav_controls_service.ts
+++ b/src/core/public/chrome/nav_controls/nav_controls_service.ts
@@ -72,7 +72,7 @@ export interface ChromeNavControls {
   registerRight(navControl: ChromeNavControl): void;
   /** Register a nav control to be presented on the top-center side of the chrome header. */
   registerCenter(navControl: ChromeNavControl): void;
-  /** Register a nav control to be presented on the top-right side of the chrome header. The component and style will be maintained in chrome */
+  /** Register a nav control to be presented on the top-right side of the chrome header. The component and style will be uniformly maintained in chrome */
   registerRightNavigation(props: RightNavigationProps): void;
   /** @internal */
   getLeft$(): Observable<ChromeNavControl[]>;
diff --git a/src/core/public/chrome/ui/header/__snapshots__/right_navigation_button.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/right_navigation_button.test.tsx.snap
new file mode 100644
index 000000000000..1df64b25ca22
--- /dev/null
+++ b/src/core/public/chrome/ui/header/__snapshots__/right_navigation_button.test.tsx.snap
@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Right navigation button should render base element normally 1`] = `
+<body>
+  <div>
+    <button
+      aria-label="title"
+      class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+      data-test-subj="rightNavigationButton"
+      style="height: 48px; min-width: 48px;"
+      title="title"
+      type="button"
+    >
+      <span
+        aria-hidden="true"
+        class="euiButtonIcon__icon"
+        color="inherit"
+        data-euiicon-type="mock_icon"
+      />
+    </button>
+  </div>
+</body>
+`;
diff --git a/src/core/public/chrome/ui/header/right_navigation_button.test.tsx b/src/core/public/chrome/ui/header/right_navigation_button.test.tsx
new file mode 100644
index 000000000000..bbc77af24111
--- /dev/null
+++ b/src/core/public/chrome/ui/header/right_navigation_button.test.tsx
@@ -0,0 +1,45 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { fireEvent, render } from '@testing-library/react';
+import { RightNavigationButton } from './right_navigation_button';
+import { applicationServiceMock, httpServiceMock } from '../../../../../core/public/mocks';
+
+const mockProps = {
+  application: applicationServiceMock.createStartContract(),
+  http: httpServiceMock.createStartContract(),
+  appId: 'app_id',
+  iconType: 'mock_icon',
+  title: 'title',
+};
+
+describe('Right navigation button', () => {
+  it('should render base element normally', () => {
+    const { baseElement } = render(<RightNavigationButton {...mockProps} />);
+    expect(baseElement).toMatchSnapshot();
+  });
+
+  it('should call application getUrlForApp and navigateToUrl after clicked', () => {
+    const navigateToUrl = jest.fn();
+    const getUrlForApp = jest.fn();
+    const props = {
+      ...mockProps,
+      application: {
+        ...applicationServiceMock.createStartContract(),
+        getUrlForApp,
+        navigateToUrl,
+      },
+    };
+    const { getByTestId } = render(<RightNavigationButton {...props} />);
+    const icon = getByTestId('rightNavigationButton');
+    fireEvent.click(icon);
+    expect(getUrlForApp).toHaveBeenCalledWith('app_id', {
+      path: '/',
+      absolute: false,
+    });
+    expect(navigateToUrl).toHaveBeenCalled();
+  });
+});
diff --git a/src/core/public/chrome/ui/header/right_navigation_button.tsx b/src/core/public/chrome/ui/header/right_navigation_button.tsx
index 5efd9d90269c..132abc0c4ec1 100644
--- a/src/core/public/chrome/ui/header/right_navigation_button.tsx
+++ b/src/core/public/chrome/ui/header/right_navigation_button.tsx
@@ -37,6 +37,7 @@ export const RightNavigationButton = ({
   return (
     <EuiButtonIcon
       iconType={iconType}
+      data-test-subj="rightNavigationButton"
       aria-label={title}
       title={title}
       onClick={navigateToApp}