test: add unit test for editorTree in workbench (#386)

* test: add unit test for editorTree in workbench * feat: editorTree support to toolbarClick event * refactor: improve editorTree for testing * test: add test for editorTree * test: improve test * test: replace the scrollable mock
DTStack · Sep 3, 2021 · d43dee4 · d43dee4
1 parent 89f1cbc
commit d43dee4
Show file tree

Hide file tree

Showing 9 changed files with 697 additions and 10 deletions.
diff --git a/src/controller/explorer/editorTree.tsx b/src/controller/explorer/editorTree.tsx
@@ -20,18 +20,22 @@ import {
     IOpenEditProps,
 } from 'mo/workbench/sidebar/explore/editorTree';
 import { connect } from 'mo/react';
-import { IMenuItemProps, ITabProps } from 'mo/components';
+import { IActionBarItemProps, IMenuItemProps, ITabProps } from 'mo/components';
 
 export interface IEditorTreeController {
-    readonly onClose: (tabId: string, groupId: number) => void;
-    readonly onSelect: (tabId: string, groupId: number) => void;
-    readonly onCloseGroup: (groupId: number) => void;
-    readonly onSaveGroup: (groupId: number) => void;
+    readonly onClose?: (tabId: string, groupId: number) => void;
+    readonly onSelect?: (tabId: string, groupId: number) => void;
+    readonly onCloseGroup?: (groupId: number) => void;
+    readonly onSaveGroup?: (groupId: number) => void;
+    readonly onToolbarClick?: (
+        toolbar: IActionBarItemProps,
+        groupId: number
+    ) => void;
     /**
      * Trigger by context menu click event
      * When click the context menu from group header, it doesn't have file info
      */
-    readonly onContextMenu: (
+    readonly onContextMenu?: (
         menu: IMenuItemProps,
         groupId: number,
         file?: ITabProps
@@ -74,6 +78,7 @@ export class EditorTreeController
                     onCloseGroup={this.onCloseGroup}
                     onSaveGroup={this.onSaveGroup}
                     onContextMenu={this.onContextMenu}
+                    onToolbarClick={this.onToolbarClick}
                 />
             ),
         });
@@ -122,6 +127,10 @@ export class EditorTreeController
     public onSaveGroup = (groupId: number) => {
         this.emit(EditorTreeEvent.onSaveAll, groupId);
     };
+
+    public onToolbarClick = (toolbar: IActionBarItemProps, groupId: number) => {
+        this.emit(EditorTreeEvent.onToolbarClick, toolbar, groupId);
+    };
 }
 
 // Register singleton

diff --git a/src/model/workbench/explorer/editorTree.ts b/src/model/workbench/explorer/editorTree.ts
@@ -14,6 +14,7 @@ export enum EditorTreeEvent {
     onCloseAll = 'editorTree.closeAll',
     onSaveAll = 'editorTree.saveAll',
     onSplitEditorLayout = 'editorTree.splitEditorLayout',
+    onToolbarClick = 'editorTree.toolbarClick',
     onContextMenu = 'editorTree.contextMenuClick',
 }
 

diff --git a/src/services/workbench/__tests__/editorTreeService.test.ts b/src/services/workbench/__tests__/editorTreeService.test.ts
@@ -71,4 +71,11 @@ describe('Test StatusBarService', () => {
             editorTreeService.emit(EditorTreeEvent.onContextMenu);
         });
     });
+
+    test('Should support to trigger toolbar click', () => {
+        expectFnCalled((testFn) => {
+            editorTreeService.onToolbarClick(testFn);
+            editorTreeService.emit(EditorTreeEvent.onToolbarClick);
+        });
+    });
 });
diff --git a/src/services/workbench/explorer/editorTreeService.ts b/src/services/workbench/explorer/editorTreeService.ts
@@ -1,4 +1,4 @@
-import { IMenuItemProps, ITabProps } from 'mo/components';
+import { IActionBarItemProps, IMenuItemProps, ITabProps } from 'mo/components';
 import { IEditor, IEditorTab } from 'mo/model';
 import { EditorTreeEvent } from 'mo/model/workbench/explorer/editorTree';
 import { Component } from 'mo/react';
@@ -40,6 +40,14 @@ export interface IEditorTreeService extends Component<IEditor> {
      * @param callback
      */
     onSaveAll(callback: (groupId?: number) => void): void;
+    /**
+     * Callback for the click event from toolbar buttons, except for saving button and closing button,
+     * if you want to subscribe to the click events for these two buttons, please use the methods of `onSaveAll` and `onCloseAll`
+     * @param callback
+     */
+    onToolbarClick(
+        callback: (toolbar: IActionBarItemProps, groupId?: number) => void
+    ): void;
     /**
      * Callback for adjust editor layout
      * @param callback
@@ -97,6 +105,12 @@ export class EditorTreeService
         this.subscribe(EditorTreeEvent.onSaveAll, callback);
     }
 
+    public onToolbarClick(
+        callback: (toolbar: IActionBarItemProps, groupId?: number) => void
+    ) {
+        this.subscribe(EditorTreeEvent.onToolbarClick, callback);
+    }
+
     public onLayout(callback: () => void) {
         this.subscribe(EditorTreeEvent.onSplitEditorLayout, callback);
     }

diff --git a/src/workbench/sidebar/__tests__/__snapshots__/editorTree.test.tsx.snap b/src/workbench/sidebar/__tests__/__snapshots__/editorTree.test.tsx.snap
@@ -0,0 +1,163 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`The EditorTree Component Match Snapshot 1`] = `
+<div
+  className="mo-editorTree"
+  data-content="test"
+>
+  <div
+    className="mo-editorTree__item"
+    onClick={[Function]}
+    onContextMenu={[Function]}
+    tabIndex={0}
+    title="tab/tab1"
+  >
+    <span
+      className="mo-editorTree__close codicon codicon-close"
+      onClick={[Function]}
+    />
+    <span
+      className="mo-editorTree__item__fileName"
+    >
+      tab1
+    </span>
+    <span
+      className="mo-editorTree__item__filePath"
+    >
+      tab
+    </span>
+  </div>
+  <div
+    className="mo-editorTree__item"
+    onClick={[Function]}
+    onContextMenu={[Function]}
+    tabIndex={0}
+    title="tab/tab2"
+  >
+    <span
+      className="mo-editorTree__close codicon codicon-close"
+      onClick={[Function]}
+    />
+    <span
+      className="mo-editorTree__item__fileName"
+    >
+      tab2
+    </span>
+    <span
+      className="mo-editorTree__item__filePath"
+    >
+      tab
+    </span>
+  </div>
+</div>
+`;
+
+exports[`The EditorTree Component With multiple groups Match Snapshot 1`] = `
+<div
+  className="mo-editorTree"
+  data-content="test"
+>
+  <div
+    className="mo-editorTree__group"
+    onClick={[Function]}
+    onContextMenu={[Function]}
+  >
+    第 1 组
+  </div>
+  <div
+    className="mo-editorTree__item"
+    onClick={[Function]}
+    onContextMenu={[Function]}
+    tabIndex={0}
+    title="tab/tab1"
+  >
+    <span
+      className="mo-editorTree__close codicon codicon-close"
+      onClick={[Function]}
+    />
+    <span
+      className="mo-editorTree__item__fileName"
+    >
+      tab1
+    </span>
+    <span
+      className="mo-editorTree__item__filePath"
+    >
+      tab
+    </span>
+  </div>
+  <div
+    className="mo-editorTree__item"
+    onClick={[Function]}
+    onContextMenu={[Function]}
+    tabIndex={0}
+    title="tab/tab2"
+  >
+    <span
+      className="mo-editorTree__close codicon codicon-close"
+      onClick={[Function]}
+    />
+    <span
+      className="mo-editorTree__item__fileName"
+    >
+      tab2
+    </span>
+    <span
+      className="mo-editorTree__item__filePath"
+    >
+      tab
+    </span>
+  </div>
+  <div
+    className="mo-editorTree__group"
+    onClick={[Function]}
+    onContextMenu={[Function]}
+  >
+    第 2 组
+  </div>
+  <div
+    className="mo-editorTree__item"
+    onClick={[Function]}
+    onContextMenu={[Function]}
+    tabIndex={0}
+    title="tab/tab1"
+  >
+    <span
+      className="mo-editorTree__close codicon codicon-close"
+      onClick={[Function]}
+    />
+    <span
+      className="mo-editorTree__item__fileName"
+    >
+      tab1
+    </span>
+    <span
+      className="mo-editorTree__item__filePath"
+    >
+      tab
+    </span>
+  </div>
+  <div
+    className="mo-editorTree__item"
+    onClick={[Function]}
+    onContextMenu={[Function]}
+    tabIndex={0}
+    title="tab/tab2"
+  >
+    <span
+      className="mo-editorTree__close codicon codicon-close"
+      onClick={[Function]}
+    />
+    <span
+      className="mo-editorTree__item__fileName"
+    >
+      tab2
+    </span>
+    <span
+      className="mo-editorTree__item__filePath"
+    >
+      tab
+    </span>
+  </div>
+</div>
+`;
diff --git a/src/workbench/sidebar/__tests__/__snapshots__/siderbar.test.tsx.snap b/src/workbench/sidebar/__tests__/__snapshots__/siderbar.test.tsx.snap
@@ -0,0 +1,63 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`The Content Component Match Snapshot 1`] = `
+<div
+  className="mo-sidebar__content"
+>
+  test
+</div>
+`;
+
+exports[`The Header Component Match Snapshot 1`] = `
+<header
+  className="mo-sidebar__header"
+>
+  <div
+    className="mo-sidebar__title"
+  >
+    <h2>
+      test
+    </h2>
+  </div>
+  <div
+    className="mo-sidebar__toolbar"
+  />
+</header>
+`;
+
+exports[`The SideBar Component Match Snapshot 1`] = `
+<div
+  className="mo-sidebar"
+>
+  <div
+    className="mo-sidebar__pane"
+    data-id="test"
+    style={
+      Object {
+        "display": "block",
+      }
+    }
+  >
+    <div
+      data-testid="test"
+    >
+      here is content
+    </div>
+  </div>
+  <div
+    className="mo-sidebar__pane"
+    data-id="another"
+    style={
+      Object {
+        "display": "none",
+      }
+    }
+  >
+    <div
+      data-testid="another"
+    >
+      here is another content
+    </div>
+  </div>
+</div>
+`;