test: add unit test for statusBar (#383)

* test: add unit test for statusBar

* chore: add role for Menu

src/workbench/statusBar/__tests__/__snapshots__/status.test.tsx.snap

@@ -0,0 +1,43 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`The StatusBar Component Match Snapshot 1`] = `
+<div
+  className="mo-statusBar"
+  id="statusBar"
+>
+  <div
+    className="mo-statusBar__left-items"
+  >
+    <div
+      className="mo-statusBar__item"
+      id="MoEditorInfo"
+      sortIndex={2}
+    >
+      <a
+        onClick={[Function]}
+        tabIndex={-1}
+        title="Go to Line/Column"
+      >
+        Go to Line/Column
+      </a>
+    </div>
+  </div>
+  <div
+    className="mo-statusBar__right-items"
+  >
+    <div
+      className="mo-statusBar__item"
+      id="MoEditorInfo"
+      sortIndex={2}
+    >
+      <a
+        onClick={[Function]}
+        tabIndex={-1}
+        title="Go to Line/Column"
+      >
+        Go to Line/Column
+      </a>
+    </div>
+  </div>
+</div>
+`;

src/workbench/statusBar/__tests__/__snapshots__/statusItem.test.tsx.snap

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`The StatusBar Item Component Match Snapshot 1`] = `
+<div
+  className="mo-statusBar__item"
+  id="test"
+>
+  <a
+    onClick={[Function]}
+    tabIndex={-1}
+    title="test"
+  >
+    test
+  </a>
+</div>
+`;

src/workbench/statusBar/__tests__/status.test.tsx

@@ -0,0 +1,91 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { fireEvent, render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { StatusBar } from '../statusBar';
+import { ID_STATUS_BAR } from 'mo/common/id';
+
+const mockItems = [
+    {
+        id: 'MoEditorInfo',
+        sortIndex: 2,
+        data: {
+            ln: 0,
+            col: 0,
+        },
+        name: 'Go to Line/Column',
+    },
+];
+
+describe('The StatusBar Component', () => {
+    test('Match Snapshot', () => {
+        const component = renderer.create(
+            <StatusBar rightItems={mockItems} leftItems={mockItems} />
+        );
+        expect(component.toJSON()).toMatchSnapshot();
+    });
+
+    test('Should render items with correct order', () => {
+        const items = [
+            { id: 'test', sortIndex: 1, 'data-testid': 'test' },
+            { id: 'test1', sortIndex: 0, 'data-testid': 'test1' },
+        ];
+        const { getByTestId } = render(
+            <StatusBar rightItems={items} leftItems={[]} />
+        );
+
+        expect(getByTestId('test1').nextSibling).toBe(getByTestId('test'));
+    });
+
+    test('Should trigger the onClick event', () => {
+        const mockFn = jest.fn();
+        const itemMockFn = jest.fn();
+        const { getByTitle } = render(
+            <StatusBar
+                rightItems={[
+                    {
+                        id: 'test',
+                        onClick: itemMockFn,
+                        name: 'test',
+                    },
+                ]}
+                leftItems={[]}
+                onClick={mockFn}
+            />
+        );
+
+        fireEvent.click(getByTitle('test'));
+
+        expect(mockFn).toBeCalled();
+        expect(itemMockFn).toBeCalled();
+    });
+
+    test('Should support to trigger the contextMenu event', () => {
+        const mockFn = jest.fn();
+        const contextMenu = {
+            id: 'add',
+            name: 'add',
+            sortIndex: 0,
+        };
+        const { container, getByRole } = render(
+            <StatusBar
+                rightItems={mockItems}
+                leftItems={[]}
+                contextMenu={[contextMenu]}
+                onContextMenuClick={mockFn}
+            />
+        );
+
+        fireEvent.contextMenu(container.querySelector(`#${ID_STATUS_BAR}`)!);
+
+        const menu = getByRole('menu');
+        expect(menu).toBeInTheDocument();
+
+        fireEvent.click(menu.firstElementChild!);
+
+        expect(mockFn).toBeCalled();
+        expect(mockFn.mock.calls[0][1]).toEqual(
+            expect.objectContaining(contextMenu)
+        );
+    });
+});

src/workbench/statusBar/__tests__/statusItem.test.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { fireEvent, render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { StatusItem } from '../item';
+
+describe('The StatusBar Item Component', () => {
+    test('Match Snapshot', () => {
+        const component = renderer.create(<StatusItem id="test" name="test" />);
+        expect(component.toJSON()).toMatchSnapshot();
+    });
+
+    test('Should support to pass through className', () => {
+        const { getByTestId } = render(
+            <StatusItem
+                id="test"
+                name="test"
+                className="test-className"
+                data-testid="test"
+            />
+        );
+
+        const dom = getByTestId('test');
+        expect(dom.classList).toContain('test-className');
+    });
+
+    test('Should support to custom render', () => {
+        const { getByTestId } = render(
+            <StatusItem
+                id="test"
+                className="test-className"
+                data-testid="test"
+                render={() => <div data-testid="test-render">123</div>}
+            />
+        );
+        expect(getByTestId('test-render')).toBeInTheDocument();
+    });
+
+    test('Should trigger the click event', () => {
+        const mockFn = jest.fn();
+        const props = {
+            id: 'test',
+            name: 'test-name',
+            'data-testid': 'test',
+            onClick: mockFn,
+        };
+        const { getByTestId } = render(<StatusItem {...props} />);
+        const dom = getByTestId('test').firstElementChild!;
+
+        fireEvent.click(dom);
+
+        expect(mockFn).toBeCalled();
+        expect(mockFn.mock.calls[0][1]).toEqual(props);
+    });
+});

src/workbench/statusBar/statusBar.tsx

@@ -33,7 +33,7 @@ export function StatusBar(props: IStatusBar & IStatusBarController) {
         [contextMenu]
     );
     const renderContextMenu = () => (
-        <Menu onClick={onClickMenuItem} data={contextMenu} />
+        <Menu role="menu" onClick={onClickMenuItem} data={contextMenu} />
     );
     useEffect(() => {
         if (contextMenu.length > 0) {