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; 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`] = ` + +
+ +
+ +`; 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(); + 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(); + 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 (