test: add menubar component unit test (#385)

* feat: complete ts type definition

* test: add menubar component unit test

src/components/menu/menuItem.tsx

@@ -31,7 +31,7 @@ export interface IMenuItemProps extends Omit<HTMLElementProps, 'title'> {
      * Custom render
      */
     render?: (data: IMenuItemProps) => React.ReactNode;
-    onClick?: (e: React.MouseEvent, item?: IMenuItemProps) => void;
+    onClick?: (e: React.MouseEvent, item: IMenuItemProps) => void;
     sortIndex?: number;
 
     [key: string]: any;

src/workbench/menuBar/__tests__/__snapshots__/menubar.test.tsx.snap

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Test MenuBar Component Match the MenuBar snapshot 1`] = `
+<div
+  className="mo-menuBar"
+>
+  <div
+    className="mo-drop-down mo-drop-down--right mo-menuBar__action"
+    onClick={[Function]}
+  >
+    <span
+      className="codicon codicon-menu"
+    />
+  </div>
+</div>
+`;

src/workbench/menuBar/__tests__/menubar.test.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { fireEvent, render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import MenuBar, { actionClassName } from '../menuBar';
+
+const TEST_ID = 'test-id';
+const menuData = [
+    {
+        id: TEST_ID,
+        name: TEST_ID,
+        data: [
+            {
+                id: 'New File',
+                name: 'New File',
+            },
+            {
+                id: 'OpenFile',
+                name: 'Open',
+            },
+        ],
+    },
+];
+const TEST_FN: jest.Mock<any, any> = jest.fn();
+
+describe('Test MenuBar Component', () => {
+    test('Match the MenuBar snapshot', () => {
+        const component = renderer.create(
+            <MenuBar data={menuData} onClick={TEST_FN} />
+        );
+
+        expect(component.toJSON()).toMatchSnapshot();
+    });
+
+    test('Should support to set status for item', () => {
+        const { container, queryByText, getByRole } = render(
+            <MenuBar data={menuData} onClick={TEST_FN} />
+        );
+        const component = container.firstElementChild!
+            .firstElementChild as HTMLDivElement;
+        expect(component!.className).toContain(actionClassName);
+
+        fireEvent.click(component);
+        const span = queryByText(TEST_ID) as HTMLSpanElement;
+        expect(span).not.toBeNull();
+
+        const menuBar = getByRole('menu').firstElementChild as HTMLLIElement;
+        expect(menuBar).toBeInTheDocument();
+    });
+});

src/workbench/menuBar/menuBar.tsx

@@ -7,8 +7,8 @@ import { IMenuProps, Menu } from 'mo/components/menu';
 import { Icon } from 'mo/components/icon';
 import { KeybindingHelper } from 'mo/services/keybinding';
 
-const defaultClassName = prefixClaName('menuBar');
-const actionClassName = getBEMElement(defaultClassName, 'action');
+export const defaultClassName = prefixClaName('menuBar');
+export const actionClassName = getBEMElement(defaultClassName, 'action');
 
 export function MenuBar(props: IMenuBar & IMenuBarController) {
     const { data, onClick } = props;
@@ -38,12 +38,13 @@ export function MenuBar(props: IMenuBar & IMenuBarController) {
         return resData;
     };
 
-    const handleClick = (e: React.MouseEvent, item) => {
+    const handleClick = (e: React.MouseEvent, item: IMenuBarItem) => {
         onClick?.(e, item);
-        (childRef.current as any)!.dispose();
+        childRef.current!.dispose();
     };
     const overlay = (
         <Menu
+            role="menu"
             onClick={handleClick}
             style={{ width: 200 }}
             data={addKeybindingForData(data)}