test: add unit test for explorer and searchPanel (#393)

* test: add unit test for explorer and searchPanel * refactor: improve search controller types for testing
DTStack · Sep 3, 2021 · 89f1cbc · 89f1cbc
1 parent 73cca0d
commit 89f1cbc
Show file tree

Hide file tree

Showing 6 changed files with 517 additions and 20 deletions.
diff --git a/src/controller/search/search.tsx b/src/controller/search/search.tsx
@@ -28,23 +28,23 @@ import {
 import { ISearchProps, ITreeNodeItemProps } from 'mo/components';
 
 export interface ISearchController {
-    getSearchIndex: (text: string, queryVal?: string) => number;
-    setSearchValue: (value?: string) => void;
-    setReplaceValue: (value?: string) => void;
-    setValidateInfo: (info: string | ISearchProps['validationInfo']) => void;
-    toggleMode: (status: boolean) => void;
+    getSearchIndex?: (text: string, queryVal?: string) => number;
+    setSearchValue?: (value?: string) => void;
+    setReplaceValue?: (value?: string) => void;
+    setValidateInfo?: (info: string | ISearchProps['validationInfo']) => void;
+    toggleMode?: (status: boolean) => void;
     toggleAddon?: (addon?: IActionBarItemProps) => void;
-    validateValue: (
+    validateValue?: (
         value: string,
         callback: (err: void | Error) => void
     ) => void;
 
-    onResultClick: (
+    onResultClick?: (
         item: ITreeNodeItemProps,
         resultData: ITreeNodeItemProps[]
     ) => void;
-    onChange: (value: string, replaceValue: string) => void;
-    onSearch: (value: string, replaceValue: string) => void;
+    onChange?: (value: string, replaceValue: string) => void;
+    onSearch?: (value: string, replaceValue: string) => void;
 }
 
 @singleton()

diff --git a/src/workbench/sidebar/__tests__/__snapshots__/explore.test.tsx.snap b/src/workbench/sidebar/__tests__/__snapshots__/explore.test.tsx.snap
@@ -0,0 +1,101 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`The Explorer Component Match Snapshot 1`] = `
+<div
+  className="mo-sidebar-explorer"
+>
+  <header
+    className="mo-sidebar__header"
+  >
+    <div
+      className="mo-sidebar__title"
+    >
+      <h2>
+        浏览
+      </h2>
+    </div>
+    <div
+      className="mo-sidebar__toolbar"
+    >
+      <div
+        className="mo-tool-bar"
+      >
+        <div
+          className="mo-action-bar"
+        >
+          <ul
+            className="mo-action-bar__container"
+          >
+            <li
+              className="mo-action-bar__item"
+              id="test"
+              onClick={[Function]}
+            >
+              <span
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+              >
+                test
+              </span>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </header>
+  <div
+    className="mo-sidebar__content"
+  >
+    <div
+      className="mo-collapse"
+    >
+      <div
+        className="mo-collapse__item"
+        data-content="open"
+      >
+        <div
+          className="mo-collapse__header"
+          onClick={[Function]}
+          tabIndex={0}
+        >
+          <span
+            className="codicon codicon-chevron-right"
+          />
+          Open
+          <div
+            className="mo-collapse__extra"
+          />
+        </div>
+        <div
+          className="mo-collapse__content"
+          data-content="open"
+          tabIndex={0}
+        />
+      </div>
+      <div
+        className="mo-collapse__item"
+        data-content="test"
+      >
+        <div
+          className="mo-collapse__header"
+          onClick={[Function]}
+          tabIndex={0}
+        >
+          <span
+            className="codicon codicon-chevron-right"
+          />
+          test
+          <div
+            className="mo-collapse__extra"
+          />
+        </div>
+        <div
+          className="mo-collapse__content"
+          data-content="test"
+          tabIndex={0}
+        />
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/workbench/sidebar/__tests__/explore.test.tsx b/src/workbench/sidebar/__tests__/explore.test.tsx
@@ -0,0 +1,170 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { cleanup, fireEvent, render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { expectFnCalled } from '@test/utils';
+import { Explorer } from '../explore';
+import { toolbarClassName } from 'mo/components/toolbar';
+
+const mockContextMenu = {
+    id: 'contextMenu',
+    name: 'contextMenu',
+    'data-testid': 'test-toolbar',
+};
+const mockToolbar = {
+    id: 'test',
+    name: 'test',
+    contextMenu: [mockContextMenu],
+};
+const mockData = [
+    {
+        id: 'open',
+        name: 'Open',
+    },
+    {
+        id: 'test',
+        name: 'test',
+        panel: [mockToolbar],
+    },
+];
+
+// mock collapse
+jest.mock('mo/components/collapse', () => {
+    const originalModule = jest.requireActual('mo/components/collapse');
+    return {
+        ...originalModule,
+        Collapse: jest
+            .fn()
+            // to mock originalModule once for ensure snapshot is the actual component
+            .mockImplementationOnce(originalModule.Collapse)
+            .mockImplementation(
+                ({ data, onCollapseChange, onToolbarClick }) => (
+                    <div data-testid="collapse">
+                        {data.map((item, index) => {
+                            const { panel = [] } = item;
+                            return (
+                                <span key={index}>
+                                    <span
+                                        data-testid={item.id}
+                                        onClick={(e) =>
+                                            onCollapseChange(item.id)
+                                        }
+                                    >
+                                        collapse-{index}
+                                    </span>
+                                    {panel.map((p, index) => (
+                                        <span
+                                            data-testid={`${item.id}-${p.id}`}
+                                            key={index}
+                                            onClick={() =>
+                                                onToolbarClick(p, item)
+                                            }
+                                        >
+                                            panel-{index}
+                                        </span>
+                                    ))}
+                                </span>
+                            );
+                        })}
+                    </div>
+                )
+            ),
+    };
+});
+
+describe('The Explorer Component', () => {
+    afterEach(cleanup);
+
+    test('Match Snapshot', () => {
+        const component = renderer.create(
+            <Explorer data={mockData} headerToolBar={mockToolbar} />
+        );
+        expect(component.toJSON()).toMatchSnapshot();
+    });
+
+    test('Should trigger onToolbarClick event', () => {
+        expectFnCalled((mockFn) => {
+            const { getByTestId } = render(
+                <Explorer
+                    data={mockData}
+                    headerToolBar={mockToolbar}
+                    onToolbarClick={mockFn}
+                />
+            );
+
+            const toolbar = getByTestId(`${mockData[1].id}-${mockToolbar.id}`);
+            fireEvent.click(toolbar);
+
+            expect(mockFn.mock.calls[0][0]).toEqual(mockToolbar);
+            expect(mockFn.mock.calls[0][1]).toEqual(mockData[1]);
+        });
+    });
+
+    test('Should trigger onCollapseChange event', () => {
+        expectFnCalled((mockFn) => {
+            const { getByTestId } = render(
+                <Explorer
+                    data={mockData}
+                    headerToolBar={mockToolbar}
+                    onCollapseChange={mockFn}
+                />
+            );
+
+            const target = mockData[1];
+            const header = getByTestId(target.id);
+            fireEvent.click(header);
+
+            expect(mockFn.mock.calls[0][0]).toEqual(target.id);
+        });
+    });
+
+    test('Should trigger onActionsContextMenuClick event', () => {
+        expectFnCalled((mockFn) => {
+            const { container, getByTestId } = render(
+                <Explorer
+                    data={mockData}
+                    headerToolBar={mockToolbar}
+                    onActionsContextMenuClick={mockFn}
+                />
+            );
+
+            const toolbar = container.querySelector(`.${toolbarClassName}`);
+            const target = toolbar?.querySelector(`#${mockToolbar.id}`);
+
+            expect(target).toBeInTheDocument();
+            fireEvent.contextMenu(target!);
+
+            const toolbarItem = getByTestId(mockContextMenu['data-testid']);
+            fireEvent.click(toolbarItem);
+
+            expect(mockFn.mock.calls[0][1]).toEqual(
+                expect.objectContaining(mockContextMenu)
+            );
+        });
+    });
+
+    test('Should trigger onClick event in header toolbar', () => {
+        expectFnCalled((mockFn) => {
+            const { container, getByTestId } = render(
+                <Explorer
+                    data={mockData}
+                    headerToolBar={mockToolbar}
+                    onClick={mockFn}
+                />
+            );
+
+            const toolbar = container.querySelector(`.${toolbarClassName}`);
+            const target = toolbar?.querySelector(`#${mockToolbar.id}`);
+
+            expect(target).toBeInTheDocument();
+            fireEvent.click(target!);
+
+            const toolbarItem = getByTestId(mockContextMenu['data-testid']);
+            fireEvent.click(toolbarItem);
+
+            expect(mockFn.mock.calls[0][1]).toEqual(
+                expect.objectContaining(mockToolbar)
+            );
+        });
+    });
+});