diff --git a/src/common/dom.ts b/src/common/dom.ts index 6465a7570..6b7f0e363 100644 --- a/src/common/dom.ts +++ b/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, + }; +} diff --git a/src/components/tabs/__tests__/tab.test.tsx b/src/components/tabs/__tests__/tab.test.tsx index 6b7ac7fe8..9707198f4 100644 --- a/src/components/tabs/__tests__/tab.test.tsx +++ b/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(() => ({ diff --git a/src/components/tabs/__tests__/tabs.test.tsx b/src/components/tabs/__tests__/tabs.test.tsx index 66a5c1959..8d288ebb5 100644 --- a/src/components/tabs/__tests__/tabs.test.tsx +++ b/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[] = [ { diff --git a/src/components/tree/__tests__/tree.test.tsx b/src/components/tree/__tests__/tree.test.tsx index efebd85bf..ba0dcd25e 100644 --- a/src/components/tree/__tests__/tree.test.tsx +++ b/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(); diff --git a/src/controller/layout.ts b/src/controller/layout.ts index 2e3a32ea0..0bc90b96a 100644 --- a/src/controller/layout.ts +++ b/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() diff --git a/src/extensions/activityBar/index.ts b/src/extensions/activityBar/index.ts index c22800f66..a632d62b7 100644 --- a/src/extensions/activityBar/index.ts +++ b/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 diff --git a/src/model/workbench/index.ts b/src/model/workbench/index.ts index 016394b5a..bee7fe1e8 100644 --- a/src/model/workbench/index.ts +++ b/src/model/workbench/index.ts @@ -15,5 +15,5 @@ export interface IWorkbench { activityBar: IActivityBar; menuBar: IMenuBar; statusBar: IStatusBar; - sideBar: ISidebar; + sidebar: ISidebar; } diff --git a/src/model/workbench/layout.ts b/src/model/workbench/layout.ts index 1dcb005d5..c15574e04 100644 --- a/src/model/workbench/layout.ts +++ b/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,7 +28,7 @@ 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'], @@ -36,7 +36,7 @@ export class LayoutModel implements ILayout { 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; @@ -44,7 +44,7 @@ export class LayoutModel implements ILayout { this.activityBar = activityBar; this.panel = panel; this.statusBar = statusBar; - this.sideBar = sideBar; + this.sidebar = sidebar; this.menuBar = menuBar; } } diff --git a/src/monaco/quickToggleSideBarAction.ts b/src/monaco/quickToggleSideBarAction.ts index e14d7aef0..90b86fe38 100644 --- a/src/monaco/quickToggleSideBarAction.ts +++ b/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); diff --git a/src/services/__tests__/layoutService.test.ts b/src/services/__tests__/layoutService.test.ts index cc38dc332..313ee8213 100644 --- a/src/services/__tests__/layoutService.test.ts +++ b/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,9 +75,9 @@ 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", () => { @@ -85,7 +85,7 @@ describe('The layout service', () => { 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(); diff --git a/src/services/workbench/layoutService.ts b/src/services/workbench/layoutService.ts index 0a2cbd328..796382163 100644 --- a/src/services/workbench/layoutService.ts +++ b/src/services/workbench/layoutService.ts @@ -15,7 +15,7 @@ export interface ILayoutService extends Component { /** * 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 }, }); } diff --git a/src/workbench/__tests__/__snapshots__/workbench.test.tsx.snap b/src/workbench/__tests__/__snapshots__/workbench.test.tsx.snap new file mode 100644 index 000000000..6d4a4d6a0 --- /dev/null +++ b/src/workbench/__tests__/__snapshots__/workbench.test.tsx.snap @@ -0,0 +1,524 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Test Workbench Component Match The WorkbenchView snapshot 1`] = ` + +
+
+
+
+
+
+ +
+
+
+
+
    +
  • + +
    +
    • +
  • + +
    • +
+
    +
+
+
+
+
+
+
+
+
+
+

+ 浏览 +

+
+
+
+
+
    +
  • + +
    • +
+
+
+
+
+
+
+
+
+ + 打开的编辑器 +
+
+
+
+
+
+ + 无打开文件夹 +
+
+
+
+
+ you have not yet opened a folder + + Add Folder + +
+
+
+
+
+
+ + 轮廓 +
+
+
+
+
+
+
+
+