feat(ui): add a new UI component DropdownMenu (ENG-56423)

.storybook/preview.js

@@ -23,7 +23,8 @@ import './preview.less';
 import { initialize, mswDecorator } from 'msw-storybook-addon';
 
 // Initialize MSW
-initialize();
+// Suppress warnings about unhandled requests from 3rd party libraries on mock API
+initialize({ onUnhandledRequest: 'bypass' });
 
 const setTheme = (theme) => (
     sessionStorage.setItem('theme', theme),

__tests__/components/DropdownMenu.test.js

@@ -0,0 +1,142 @@
+/*
+Copyright 2024 BlueCat Networks Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+*/
+
+import { shallow } from 'enzyme';
+import React from 'react';
+import DropdownMenu from '../../src/components/DropdownMenu';
+import setLanguage from '../../src/functions/setLanguage';
+
+global.document = { body: 'body' };
+
+jest.unmock('../../src/components/DropdownMenu');
+
+const mockUsePageModalSpinner = {
+    setBusy: jest.fn(),
+};
+jest.mock('../../src/components/usePageModalSpinner', () =>
+    jest.fn(() => {
+        return mockUsePageModalSpinner;
+    }),
+);
+
+const mockAddErrorMessage = {
+    addErrorMessage: jest.fn(),
+};
+jest.mock('../../src/components/usePageMessages', () =>
+    jest.fn(() => {
+        return mockAddErrorMessage;
+    }),
+);
+
+const mockUseMenuHandler = {
+    expanded: true,
+    buttonProps: {
+        onKeyDown: jest.fn(),
+        onClick: jest.fn(),
+    },
+    menuProps: {
+        onKeyDown: jest.fn(),
+        onClick: jest.fn(),
+    },
+    guardProps: {},
+};
+jest.mock(
+    '../../node_modules/@bluecateng/pelagos/dist/hooks/useMenuHandler',
+    () =>
+        jest.fn(() => {
+            return mockUseMenuHandler;
+        }),
+);
+const dropdownMenuMockDefaultValue = {
+    /* eslint-disable camelcase */
+    dropdown_menu: [
+        {
+            text: 'Go to API document',
+            url: '/example_go_api_documents_by_help_links',
+        },
+    ],
+};
+
+const mockDoGet = {
+    doGet: jest.fn(() =>
+        Promise.resolve({ data: dropdownMenuMockDefaultValue }),
+    ),
+};
+jest.mock('../../src/functions/fetchFunctions', () =>
+    jest.fn(() => {
+        return mockDoGet;
+    }),
+);
+
+const dropdownMenuMockValue = [
+    {
+        text: 'Go to custom page',
+        onClick: jest.fn(),
+    },
+];
+
+describe('DropdownMenu', () => {
+    describe('Rendering', () => {
+        it('Render the DropdownMenu component default props', () => {
+            const wrapper = shallow(<DropdownMenu />);
+            expect(wrapper.getElement()).toMatchSnapshot();
+        });
+
+        it('Render the DropdownMenu component with all props', () => {
+            const wrapper = shallow(
+                <DropdownMenu
+                    id='test-id'
+                    className='test_cn'
+                    tooltipText='test-tooltip'
+                    tooltipPlacement='left'
+                    size='large'
+                    type='tertiary'
+                    disabled={false}
+                    flipped={false}
+                    customValues={dropdownMenuMockValue}
+                    requestUrl={'/-/custom_url'}
+                />,
+            );
+            expect(wrapper.getElement()).toMatchSnapshot();
+        });
+
+        it('Render the DropdownMenu component with pseudo translated text', () => {
+            //Required for usePageMessages()
+            setLanguage('zz').finally(() => {
+                const wrapper = shallow(
+                    <DropdownMenu
+                        id='test-id'
+                        className='test_cn'
+                        tooltipText='test-tooltip'
+                        tooltipPlacement='left'
+                        size='large'
+                        type='tertiary'
+                        disabled={false}
+                        flipped={false}
+                        requestUrl={'/-/custom_url'}
+                    />,
+                );
+                expect(wrapper.getElement()).toMatchSnapshot();
+            });
+        });
+    });
+});

__tests__/components/__snapshots__/DropdownMenu.test.js.snap

@@ -0,0 +1,114 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DropdownMenu Rendering Render the DropdownMenu component default props 1`] = `
+<React.Fragment>
+  <IconButton
+    aria-controls="undefined-menu"
+    aria-expanded={true}
+    aria-haspopup="true"
+    className="DropdownMenu"
+    data-layer={NaN}
+    disabled={true}
+    icon={[Function]}
+    onClick={[MockFunction]}
+    onKeyDown={[MockFunction]}
+    size="medium"
+    tooltipPlacement="right"
+    type="ghost"
+  />
+  <React.Portal
+    container="body"
+  >
+    <Layer
+      className="DropdownMenu__popUp"
+      level={NaN}
+    >
+      <Menu
+        id="undefined-menu"
+        onClick={[MockFunction]}
+        onKeyDown={[MockFunction]}
+      />
+    </Layer>
+  </React.Portal>
+</React.Fragment>
+`;
+
+exports[`DropdownMenu Rendering Render the DropdownMenu component with all props 1`] = `
+<React.Fragment>
+  <IconButton
+    aria-controls="test-id-menu"
+    aria-expanded={true}
+    aria-haspopup="true"
+    className="DropdownMenu test_cn"
+    data-layer={NaN}
+    disabled={false}
+    icon={[Function]}
+    id="test-id"
+    onClick={[MockFunction]}
+    onKeyDown={[MockFunction]}
+    size="large"
+    tooltipPlacement="left"
+    tooltipText="test-tooltip"
+    type="tertiary"
+  />
+  <React.Portal
+    container="body"
+  >
+    <Layer
+      className="DropdownMenu__popUp"
+      level={NaN}
+    >
+      <Menu
+        aria-labelledby="test-id"
+        id="test-id-menu"
+        onClick={[MockFunction]}
+        onKeyDown={[MockFunction]}
+      >
+        <React.Fragment>
+          <MenuItem
+            onClick={[MockFunction]}
+            text="Go to custom page"
+            type="default"
+          />
+        </React.Fragment>
+      </Menu>
+    </Layer>
+  </React.Portal>
+</React.Fragment>
+`;
+
+exports[`DropdownMenu Rendering Render the DropdownMenu component with pseudo translated text 1`] = `
+<React.Fragment>
+  <IconButton
+    aria-controls="test-id-menu"
+    aria-expanded={true}
+    aria-haspopup="true"
+    className="DropdownMenu test_cn"
+    data-layer={NaN}
+    disabled={true}
+    icon={[Function]}
+    id="test-id"
+    onClick={[MockFunction]}
+    onKeyDown={[MockFunction]}
+    size="large"
+    tooltipPlacement="left"
+    tooltipText="test-tooltip"
+    type="tertiary"
+  />
+  <React.Portal
+    container="body"
+  >
+    <Layer
+      className="DropdownMenu__popUp"
+      level={NaN}
+    >
+      <Menu
+        aria-labelledby="test-id"
+        id="test-id-menu"
+        onClick={[MockFunction]}
+        onKeyDown={[MockFunction]}
+      />
+    </Layer>
+  </React.Portal>
+</React.Fragment>
+`;