test: unit tests for the Workbench (#387)

* test: add getElementClientCenter function

* refactor: extract the dragToTargetNode function

* refactor: make the props to be optional

* refactor: unify the naming of sideBar to sidebar

* feat: add the mock function drag

* test: add unit tests for the Workbench

* fix: add key for the array components

* test: the Editor whether in the document after the panelMaximized changed to false

* test: set the panel hidden and maximized

* refactor: use replace the container.querySelector with dom/select

* refactor: remove the useless code

* refactor: import the dragToTargetNode from @test/utils

* test: update the snapshot

src/common/dom.ts

@@ -143,3 +143,16 @@ export function getPositionByPlacement(
 export function getAttr(domElement: HTMLElement, attr) {
     return domElement.getAttribute(attr) || '';
 }
+
+/**
+ * Get an element the center coords
+ * @param element HTMLElement
+ * @returns
+ */
+export function getElementClientCenter(element: HTMLElement) {
+    const { left, top, width, height } = element.getBoundingClientRect();
+    return {
+        x: left + width / 2,
+        y: top + height / 2,
+    };
+}

src/components/tabs/__tests__/tab.test.tsx

@@ -8,6 +8,7 @@ import {
     tabItemClassName,
 } from '../tab';
 import DragAndDrop from '../dragAndDrop';
+import { dragToTargetNode } from '@test/utils';
 
 const tabData = {
     id: '1',
@@ -24,13 +25,6 @@ function DTab(args: ITabProps & ITabEvent) {
     );
 }
 
-export function dragToTargetNode(source: HTMLElement, target: HTMLElement) {
-    fireEvent.dragStart(source);
-    fireEvent.dragEnter(target);
-    fireEvent.dragOver(target);
-    fireEvent.drop(target);
-}
-
 function mockClientOffset(boundingRectSize: number, size: number) {
     // @ts-ignore
     HTMLDivElement.prototype.getBoundingClientRect = jest.fn(() => ({

src/components/tabs/__tests__/tabs.test.tsx

@@ -4,7 +4,7 @@ import renderer from 'react-test-renderer';
 import '@testing-library/jest-dom';
 import { Tabs, tabsClassName, tabsContentActiveClassName } from '..';
 import { ITabProps, tabItemActiveClassName } from '../tab';
-import { dragToTargetNode } from './tab.test';
+import { dragToTargetNode } from '@test/utils';
 
 const mockData: ITabProps[] = [
     {

src/components/tree/__tests__/tree.test.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { cleanup, fireEvent, render, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom';
-
 import TreeView, { ITreeNodeItemProps } from '../index';
+import { dragToTargetNode } from '@test/utils';
 
 const mockData: ITreeNodeItemProps[] = [
     {
@@ -23,13 +23,6 @@ const mockData: ITreeNodeItemProps[] = [
     },
 ];
 
-function dragToTargetNode(source: HTMLElement, target: HTMLElement) {
-    fireEvent.dragStart(source);
-    fireEvent.dragOver(target);
-    fireEvent.drop(target);
-    fireEvent.dragEnd(source);
-}
-
 async function dragExpect(fn: jest.Mock, result: any) {
     await waitFor(() => {
         expect(fn).toBeCalled();

src/controller/layout.ts

@@ -4,8 +4,8 @@ import { Controller } from 'mo/react/controller';
 import { ILayoutService, LayoutService } from 'mo/services';
 
 export interface ILayoutController {
-    onPaneSizeChange: (splitPanePos: string[]) => void;
-    onHorizontalPaneSizeChange: (horizontalSplitPanePos: string[]) => void;
+    onPaneSizeChange?: (splitPanePos: string[]) => void;
+    onHorizontalPaneSizeChange?: (horizontalSplitPanePos: string[]) => void;
 }
 
 @singleton()

src/extensions/activityBar/index.ts

@@ -15,8 +15,8 @@ export const ExtendsActivityBar: IExtension = {
                 molecule.activityBar.setActive(cur);
                 molecule.sidebar.setActive(cur);
 
-                const { sideBar } = molecule.layout.getState();
-                if (sideBar.hidden) {
+                const { sidebar } = molecule.layout.getState();
+                if (sidebar.hidden) {
                     extensionCtx.executeCommand(
                         CommandQuickSideBarViewAction.ID,
                         cur

src/model/workbench/index.ts

@@ -15,5 +15,5 @@ export interface IWorkbench {
     activityBar: IActivityBar;
     menuBar: IMenuBar;
     statusBar: IStatusBar;
-    sideBar: ISidebar;
+    sidebar: ISidebar;
 }

src/model/workbench/layout.ts

@@ -9,7 +9,7 @@ export interface IPanelViewState extends ViewVisibility {
     panelMaximized: boolean;
 }
 
-export interface ISideBarViewState extends ViewVisibility {
+export interface ISidebarViewState extends ViewVisibility {
     position: keyof typeof Position;
 }
 export interface ILayout {
@@ -18,7 +18,7 @@ export interface ILayout {
     activityBar: ViewVisibility;
     panel: IPanelViewState;
     statusBar: ViewVisibility;
-    sideBar: ISideBarViewState;
+    sidebar: ISidebarViewState;
     menuBar: ViewVisibility;
 }
 
@@ -28,23 +28,23 @@ export class LayoutModel implements ILayout {
     public activityBar: ViewVisibility;
     public panel: IPanelViewState;
     public statusBar: ViewVisibility;
-    public sideBar: ISideBarViewState;
+    public sidebar: ISidebarViewState;
     public menuBar: ViewVisibility;
     constructor(
         splitPanePos: string[] = ['300px', 'auto'],
         horizontalSplitPanePos = ['70%', 'auto'],
         activityBar = { hidden: false },
         panel = { hidden: false, panelMaximized: false },
         statusBar = { hidden: false },
-        sideBar = { hidden: false, position: Position.left },
+        sidebar = { hidden: false, position: Position.left },
         menuBar = { hidden: false }
     ) {
         this.splitPanePos = splitPanePos;
         this.horizontalSplitPanePos = horizontalSplitPanePos;
         this.activityBar = activityBar;
         this.panel = panel;
         this.statusBar = statusBar;
-        this.sideBar = sideBar;
+        this.sidebar = sidebar;
         this.menuBar = menuBar;
     }
 }

src/monaco/quickToggleSideBarAction.ts

@@ -53,7 +53,7 @@ export class CommandQuickSideBarViewAction extends Action2 {
         const sidebarId = args[0];
         const { selected } = this.activityBarService.getState();
 
-        const hidden = this.layoutService.toggleSideBarVisibility();
+        const hidden = this.layoutService.toggleSidebarVisibility();
 
         const activityId = sidebarId || this._preActivityBar;
         this.activityBarService.setActive(hidden ? undefined : activityId);

src/services/__tests__/layoutService.test.ts

@@ -50,10 +50,10 @@ describe('The layout service', () => {
 
         test('Should support to toggle side bar visibility', () => {
             const state = layoutService.getState();
-            expect(state.sideBar.hidden).toBeFalsy();
+            expect(state.sidebar.hidden).toBeFalsy();
 
-            layoutService.toggleSideBarVisibility();
-            expect(state.sideBar.hidden).toBeTruthy();
+            layoutService.toggleSidebarVisibility();
+            expect(state.sidebar.hidden).toBeTruthy();
         });
 
         test('Should support to toggle activity bar visibility', () => {
@@ -75,17 +75,17 @@ describe('The layout service', () => {
         test('Should support to set the position of side bar', () => {
             const state = layoutService.getState();
 
-            expect(state.sideBar.position).toBe(Position.left);
+            expect(state.sidebar.position).toBe(Position.left);
             layoutService.setSideBarPosition(Position.right);
-            expect(state.sideBar.position).toBe(Position.right);
+            expect(state.sidebar.position).toBe(Position.right);
         });
 
         test("Should not set the postion while postion did't change", () => {
             const state = layoutService.getState();
             const originalRender = layoutService.render;
             layoutService.render = jest.fn();
 
-            expect(state.sideBar.position).toBe(Position.left);
+            expect(state.sidebar.position).toBe(Position.left);
             layoutService.setSideBarPosition(Position.left);
             expect(layoutService.render).not.toBeCalled();
 

src/services/workbench/layoutService.ts

@@ -15,7 +15,7 @@ export interface ILayoutService extends Component<ILayout> {
     /**
      * Toggle the visibility of side bar, returns the status of side bar's `hidden`
      */
-    toggleSideBarVisibility(): boolean;
+    toggleSidebarVisibility(): boolean;
     /**
      * Toggle the visibility of the panel, returns the status of panel's `hidden`
      */
@@ -86,10 +86,10 @@ export class LayoutService
         return !wasHidden;
     }
 
-    public toggleSideBarVisibility(): boolean {
-        const { sideBar } = this.state;
-        const wasHidden = sideBar.hidden;
-        this.setState({ sideBar: { ...sideBar, hidden: !wasHidden } });
+    public toggleSidebarVisibility(): boolean {
+        const { sidebar } = this.state;
+        const wasHidden = sidebar.hidden;
+        this.setState({ sidebar: { ...sidebar, hidden: !wasHidden } });
         return !wasHidden;
     }
 
@@ -108,11 +108,11 @@ export class LayoutService
     }
 
     public setSideBarPosition(position: keyof typeof Position): void {
-        const { sideBar } = this.state;
-        const { position: prePos } = sideBar;
+        const { sidebar } = this.state;
+        const { position: prePos } = sidebar;
         if (prePos !== position) {
             this.setState({
-                sideBar: { position: position, hidden: false },
+                sidebar: { position: position, hidden: false },
             });
         }
     }
@@ -142,7 +142,7 @@ export class LayoutService
             activityBar: { hidden: false },
             panel: { hidden: false, panelMaximized: false },
             statusBar: { hidden: false },
-            sideBar: { hidden: false, position: Position.left },
+            sidebar: { hidden: false, position: Position.left },
             menuBar: { hidden: false },
         });
     }