@opensumi/playwright 2.21.13-rc-1673328992.0 → 2.21.13

package/src/app.ts

@@ -1,148 +0,0 @@
-import { ElementHandle, Page } from '@playwright/test';
-
-import { Disposable } from '@opensumi/ide-utils';
-
-import { IComponentEditorInfo } from './component-editor';
-import { OpenSumiEditor } from './editor';
-import { OpenSumiExplorerView } from './explorer-view';
-import { OpenSumiMenubar } from './menubar';
-import { OpenSumiPanel } from './panel';
-import { OpenSumiCommandPalette } from './quick-command-palette';
-import { OpenSumiQuickOpenPalette } from './quick-open-palette';
-import { OpenSumiTreeNode } from './tree-node';
-import { OpenSumiWorkspace } from './workspace';
-
-export interface AppData {
-  loadingSelector: string;
-  mainSelector: string;
-}
-
-export const DefaultAppData: AppData = {
-  loadingSelector: '.loading_indicator',
-  mainSelector: '#main',
-};
-
-export class OpenSumiApp extends Disposable {
-  private _loaded = false;
-  private _quickCommandPalette: OpenSumiCommandPalette;
-  private _quickOpenPalette: OpenSumiQuickOpenPalette;
-  private _menubar: OpenSumiMenubar;
-
-  static async load(page: Page, workspace: OpenSumiWorkspace): Promise<OpenSumiApp> {
-    return this.loadApp(page, workspace, OpenSumiApp);
-  }
-
-  static async loadApp<T extends OpenSumiApp>(
-    page: Page,
-    workspace: OpenSumiWorkspace,
-    appFactory: new (page: Page) => T,
-  ): Promise<T> {
-    await workspace.initWorksapce();
-    const app = new appFactory(page);
-    await app.load(workspace);
-    return app;
-  }
-
-  public constructor(public page: Page, protected appData = DefaultAppData) {
-    super();
-    this._quickCommandPalette = new OpenSumiCommandPalette(this);
-    this._quickOpenPalette = new OpenSumiQuickOpenPalette(this);
-    this._menubar = new OpenSumiMenubar(this);
-  }
-
-  get quickCommandPalette() {
-    return this._quickCommandPalette;
-  }
-
-  get quickOpenPalette() {
-    return this._quickOpenPalette;
-  }
-
-  get menubar() {
-    return this._menubar;
-  }
-
-  protected async load(workspace: OpenSumiWorkspace): Promise<void> {
-    this.disposables.push(workspace);
-    const now = Date.now();
-    await this.loadOrReload(this.page, `/#${workspace.workspace.codeUri.fsPath}`);
-    await this.page.waitForSelector(this.appData.loadingSelector, { state: 'detached' });
-    const time = Date.now() - now;
-    // eslint-disable-next-line no-console
-    console.log(`Loading page cost ${time} ms`);
-    await this.page.waitForSelector(this.appData.mainSelector);
-    await this.waitForInitialized();
-  }
-
-  protected async loadOrReload(page: Page, url = '/') {
-    if (!this._loaded) {
-      const wasLoadedAlready = await page.isVisible(this.appData.mainSelector);
-      await page.goto(url);
-      if (wasLoadedAlready) {
-        await page.reload();
-      }
-      this._loaded = true;
-    } else {
-      await page.reload();
-    }
-  }
-
-  async isMainLayoutVisible(): Promise<boolean> {
-    const contentPanel = await this.page.$('#main');
-    return !!contentPanel && contentPanel.isVisible();
-  }
-
-  async open<T extends OpenSumiPanel>(PanelConstruction: new (app: OpenSumiApp) => T) {
-    const panel = new PanelConstruction(this);
-    if (await panel.isVisible()) {
-      return panel;
-    }
-    await panel.open();
-    return panel;
-  }
-
-  async openEditor<T extends OpenSumiEditor>(
-    EditorConstruction: new (app: OpenSumiApp, element?: OpenSumiTreeNode) => T,
-    explorer: OpenSumiExplorerView,
-    filePath: string,
-    preview = true,
-  ) {
-    const node = await explorer.getFileStatTreeNodeByPath(filePath);
-    if (!node || (await node?.isFolder())) {
-      throw Error(`File ${filePath} could not be opened on the editor`);
-    }
-    const editor = new EditorConstruction(this, node);
-    await editor.open(preview);
-    return editor;
-  }
-
-  // use for component editors
-  async openComponentEditor<T extends OpenSumiEditor>(
-    EditorConstruction: new (app: OpenSumiApp, info: IComponentEditorInfo) => T,
-    path: string,
-    name: string,
-    containerSelector: string,
-  ) {
-    const editor = new EditorConstruction(this, { path, name, containerSelector });
-    await editor.open();
-    return editor;
-  }
-
-  async getDialogButton(value: string): Promise<ElementHandle<SVGElement | HTMLElement> | void> {
-    const buttonWrapper = await this.page.$('.kt-dialog-buttonWrap');
-    const buttons = await buttonWrapper?.$$('.kt-button');
-    if (buttons) {
-      for (const button of buttons) {
-        const text = await button.textContent();
-        if (text === value) {
-          return button;
-        }
-      }
-    }
-  }
-
-  async waitForInitialized(): Promise<void> {
-    // custom app initialize process.
-    // empty by default
-  }
-}

package/src/component-editor.ts

@@ -1,64 +0,0 @@
-import { OpenSumiApp } from './app';
-import { OpenSumiContextMenu } from './context-menu';
-import { OpenSumiEditor } from './editor';
-import { isElementVisible } from './utils';
-
-export interface IComponentEditorInfo {
-  path: string;
-  name: string;
-  containerSelector: string;
-}
-
-export class OpenSumiComponentEditor extends OpenSumiEditor {
-  constructor(app: OpenSumiApp, private readonly info: IComponentEditorInfo) {
-    super(app);
-  }
-
-  async openTabContextMenu() {
-    const view = await this.getTab();
-    if (!view) {
-      return;
-    }
-    return OpenSumiContextMenu.open(this.app, async () => view);
-  }
-
-  async close() {
-    const contextMenu = await this.openTabContextMenu();
-    await contextMenu?.isOpen();
-    const close = await contextMenu?.menuItemByName('Close');
-    await close?.click();
-  }
-
-  async getTab() {
-    const tabsItems = await (await this.getTabElement())?.$$("[class*='kt_editor_tab___']");
-
-    if (!tabsItems) {
-      return;
-    }
-
-    for (const item of tabsItems) {
-      const uri = await item.getAttribute('data-uri');
-      if (uri?.includes(this.info.path)) {
-        return item;
-      }
-    }
-  }
-
-  async getContainer() {
-    return await super.getContainer(this.info.containerSelector);
-  }
-
-  async isVisible() {
-    const container = await this.getContainer();
-    if (!container) {
-      return false;
-    }
-    return await isElementVisible(Promise.resolve(container));
-  }
-
-  async open() {
-    const tab = await this.getTab();
-    await tab?.click();
-    return this;
-  }
-}

package/src/constans/index.ts

@@ -1,18 +0,0 @@
-const VIEW_CONTAINERS_PREFIX = 'opensumi';
-
-export namespace OPENSUMI_VIEW_CONTAINERS {
-  export const LEFT_TABBAR_PANEL = `${VIEW_CONTAINERS_PREFIX}-left-tabbar-panel`;
-  export const LEFT_TABBAR = `${VIEW_CONTAINERS_PREFIX}-left-tabbar`;
-  export const RIGHT_TABBAR_PANEL = `${VIEW_CONTAINERS_PREFIX}-right-tabbar-panel`;
-  export const RIGHT_TABBAR = `${VIEW_CONTAINERS_PREFIX}-right-tabbar`;
-  export const BOTTOM_TABBAR = `${VIEW_CONTAINERS_PREFIX}-bottom-tabbar`;
-  export const BOTTOM_TABBAR_PANEL = `${VIEW_CONTAINERS_PREFIX}-bottom-tabbar-panel`;
-  export const STATUSBAR = `${VIEW_CONTAINERS_PREFIX}-statusbar`;
-  export const MENUBAR = `${VIEW_CONTAINERS_PREFIX}-menubar`;
-  export const EDITOR = `${VIEW_CONTAINERS_PREFIX}-editor`;
-  export const EDITOR_TABS = `${VIEW_CONTAINERS_PREFIX}-editor-tabs`;
-  export const QUICKPICK = `${VIEW_CONTAINERS_PREFIX}-quickpick`;
-  export const QUICKPICK_INPUT = `${VIEW_CONTAINERS_PREFIX}-quickpick-input`;
-  export const QUICKPICK_TABS = `${VIEW_CONTAINERS_PREFIX}-quickpick-tabs`;
-  export const QUICKPICK_ITEM = `${VIEW_CONTAINERS_PREFIX}-quickpick-item`;
-}

package/src/context-menu.ts

@@ -1,27 +0,0 @@
-import { ElementHandle } from '@playwright/test';
-
-import { OpenSumiApp } from './app';
-import { OpenSumiMenu } from './menu';
-
-export class OpenSumiContextMenu extends OpenSumiMenu {
-  public static async openAt(app: OpenSumiApp, x: number, y: number): Promise<OpenSumiContextMenu> {
-    await app.page.mouse.move(x, y);
-    await app.page.mouse.click(x, y, { button: 'right' });
-    return OpenSumiContextMenu.returnWhenVisible(app);
-  }
-
-  public static async open(
-    app: OpenSumiApp,
-    element: () => Promise<ElementHandle<SVGElement | HTMLElement>>,
-  ): Promise<OpenSumiContextMenu> {
-    const elementHandle = await element();
-    await elementHandle.click({ button: 'right' });
-    return OpenSumiContextMenu.returnWhenVisible(app);
-  }
-
-  private static async returnWhenVisible(app: OpenSumiApp): Promise<OpenSumiContextMenu> {
-    const menu = new OpenSumiContextMenu(app);
-    await menu.waitForVisible();
-    return menu;
-  }
-}

package/src/debug-view.ts

@@ -1,73 +0,0 @@
-import { OpenSumiApp } from './app';
-import { OpenSumiPanel } from './panel';
-
-type DebugToolbarActionType = 'Continue' | 'Step Over' | 'Step Into' | 'Step Out' | 'Restart' | 'Stop';
-export class OpenSumiDebugView extends OpenSumiPanel {
-  private selector = {
-    toolbarClass: "[class*='debug_configuration_toolbar___']",
-    actionStartID: "[id='debug.action.start']",
-  };
-
-  constructor(app: OpenSumiApp) {
-    super(app, 'DEBUG');
-  }
-
-  async getDebugToolbar() {
-    return this.page.$('[class*="debug_toolbar_wrapper__"]');
-  }
-
-  async start(): Promise<void> {
-    const toolbarLocator = this.app.page.locator(this.selector.toolbarClass);
-    if (!toolbarLocator) {
-      return;
-    }
-
-    const element = await toolbarLocator.elementHandle();
-    const startIcon = await element?.$(this.selector.actionStartID);
-    await startIcon?.click();
-  }
-
-  async getToobarAction(action: DebugToolbarActionType) {
-    const toolbar = await this.getDebugToolbar();
-    const buttons = await toolbar?.$$('[class*="debug_action__"]');
-    if (!buttons) {
-      return;
-    }
-    for (const button of buttons) {
-      const title = await button.getAttribute('title');
-      if (title === action) {
-        return button;
-      }
-    }
-  }
-
-  async stop() {
-    const action = await this.getToobarAction('Stop');
-    await action?.click();
-  }
-
-  async continue() {
-    const action = await this.getToobarAction('Continue');
-    await action?.click();
-  }
-
-  async restart() {
-    const action = await this.getToobarAction('Restart');
-    await action?.click();
-  }
-
-  async stepInto() {
-    const action = await this.getToobarAction('Step Into');
-    await action?.click();
-  }
-
-  async stepOver() {
-    const action = await this.getToobarAction('Step Over');
-    await action?.click();
-  }
-
-  async stepOut() {
-    const action = await this.getToobarAction('Step Out');
-    await action?.click();
-  }
-}

package/src/diff-editor.ts

@@ -1,3 +0,0 @@
-import { OpenSumiTextEditor } from './text-editor';
-
-export class OpenSumiDiffEditor extends OpenSumiTextEditor {}

package/src/editor.ts

@@ -1,130 +0,0 @@
-import { OpenSumiApp } from './app';
-import { OPENSUMI_VIEW_CONTAINERS } from './constans';
-import { OpenSumiTreeNode } from './tree-node';
-import { OpenSumiView } from './view';
-
-export class OpenSumiEditor extends OpenSumiView {
-  constructor(app: OpenSumiApp, private readonly filestatElement?: OpenSumiTreeNode) {
-    super(app, {
-      tabSelector: `#${OPENSUMI_VIEW_CONTAINERS.EDITOR_TABS}`,
-      viewSelector: `#${OPENSUMI_VIEW_CONTAINERS.EDITOR}`,
-      name: 'Editor',
-    });
-  }
-
-  async getTab() {
-    const path = (await this.filestatElement?.getFsPath()) || '';
-    const tabsItems = await (await this.getTabElement())?.$$("[class*='kt_editor_tab___']");
-
-    if (!tabsItems) {
-      return;
-    }
-
-    for (const item of tabsItems) {
-      const uri = await item.getAttribute('data-uri');
-      if (uri?.includes(path)) {
-        return item;
-      }
-    }
-  }
-
-  async getContainer(selector?: string) {
-    if (!selector) {
-      return;
-    }
-    const container = await (await this.getViewElement())?.$(selector);
-    return container;
-  }
-
-  async getCurrentTab() {
-    return await (await this.getTabElement())?.waitForSelector("[class*='kt_editor_tab_current___']");
-  }
-
-  async open(preview?: boolean) {
-    await this.filestatElement?.open(preview);
-    // waiting editor render, it maybe fail while opening a large file.
-    await this.app.page.waitForTimeout(1000);
-    return this;
-  }
-
-  async isPreview() {
-    const currentTab = await this.getTab();
-    const isPreview = (await currentTab?.getAttribute('class'))?.includes('kt_editor_tab_preview___');
-    return !!isPreview;
-  }
-
-  async isDirty() {
-    const dirtyIcon = await (await this.getTab())?.$("[class*='dirty___']");
-    const className = await dirtyIcon?.getAttribute('class');
-    const hidden = className?.includes('hidden__');
-    return !hidden;
-  }
-
-  async save() {
-    await this.activate();
-    if (!(await this.isDirty())) {
-      return;
-    }
-    const dirtyIcon = await (await this.getTab())?.$("[class*='dirty___']");
-    await this.app.menubar.trigger('File', 'Save File');
-    // waiting for saved
-    await dirtyIcon?.waitForElementState('hidden');
-  }
-
-  async close() {
-    const currentTab = await this.getTabElement();
-    await currentTab?.hover({
-      position: {
-        x: 10,
-        y: 10,
-      },
-    });
-    const closeIcon = await currentTab?.$("[class*='close_tab___']");
-    await closeIcon?.click();
-  }
-
-  async saveAndClose() {
-    await this.save();
-    await this.close();
-  }
-
-  async undo(times = 1) {
-    await this.activate();
-    for (let i = 0; i < times; i++) {
-      await this.app.menubar.trigger('Edit', 'Undo');
-      await this.app.page.waitForTimeout(200);
-    }
-  }
-
-  async redo(times = 1) {
-    await this.activate();
-    for (let i = 0; i < times; i++) {
-      await this.app.menubar.trigger('Edit', 'Redo');
-      await this.app.page.waitForTimeout(200);
-    }
-  }
-
-  async triggerTitleMenu(name: string) {
-    const tab = await this.getTabElement();
-    const actions = (await tab?.$$('[class*="iconAction___"]')) || [];
-    for (const action of actions) {
-      const title = await action.getAttribute('title');
-      if (title === name) {
-        await action.click();
-        break;
-      }
-    }
-  }
-
-  async triggerTitleMenuById(id: string) {
-    const tab = await this.getTabElement();
-    const actions = (await tab?.$$('[class*="iconAction___"]')) || [];
-    for (const action of actions) {
-      const title = await action.getAttribute('id');
-      if (title === id) {
-        await action.click();
-        break;
-      }
-    }
-  }
-}

package/src/explorer-view.ts

@@ -1,149 +0,0 @@
-import { OpenSumiApp } from './app';
-import { OpenSumiFileTreeView } from './filetree-view';
-import { OpenSumiOpenedEditorView } from './opened-editor-view';
-import { OpenSumiOutlineView } from './outline-view';
-import { OpenSumiPanel } from './panel';
-import { OpenSumiTreeNode } from './tree-node';
-
-export class OpenSumiExplorerFileStatNode extends OpenSumiTreeNode {
-  async getFsPath() {
-    return await this.elementHandle.getAttribute('title');
-  }
-
-  async isFolder() {
-    const icon = await this.elementHandle.$("[class*='file_icon___']");
-    if (!icon) {
-      return false;
-    }
-    const className = await icon.getAttribute('class');
-    return className?.includes('folder-icon');
-  }
-
-  async getMenuItemByName(name: string) {
-    const contextMenu = await this.openContextMenu();
-    const menuItem = await contextMenu.menuItemByName(name);
-    return menuItem;
-  }
-
-  async open(preview = true) {
-    if (!preview) {
-      await this.elementHandle.dblclick();
-    } else {
-      await this.elementHandle.click();
-    }
-  }
-
-  async isDirty() {
-    const classname = await this.elementHandle.getAttribute('class');
-    if (classname?.includes('mod_dirty__')) {
-      return true;
-    }
-    return false;
-  }
-}
-
-export class OpenSumiExplorerOpenedEditorNode extends OpenSumiTreeNode {
-  async getRelativePath() {
-    return await (await this.elementHandle.$('[class*="opened_editor_node_description__"]'))?.textContent();
-  }
-
-  async getFsPath() {
-    return await this.elementHandle.getAttribute('title');
-  }
-
-  async isGroup() {
-    const icon = await this.elementHandle.waitForSelector("[class*='file_icon___']");
-    const className = await icon.getAttribute('class');
-    return className?.includes('folder-icon');
-  }
-
-  async getMenuItemByName(name: string) {
-    const contextMenu = await this.openContextMenu();
-    const menuItem = await contextMenu.menuItemByName(name);
-    return menuItem;
-  }
-
-  async open() {
-    await this.elementHandle.click();
-  }
-}
-
-export class OpenSumiExplorerView extends OpenSumiPanel {
-  private _fileTreeView: OpenSumiFileTreeView;
-  private _openedEditorView: OpenSumiOpenedEditorView;
-  private _outlineView: OpenSumiOutlineView;
-
-  constructor(app: OpenSumiApp) {
-    super(app, 'EXPLORER');
-    this._openedEditorView = new OpenSumiOpenedEditorView(this.app);
-    this._outlineView = new OpenSumiOutlineView(this.app);
-  }
-
-  initFileTreeView(name: string) {
-    this._fileTreeView = new OpenSumiFileTreeView(this.app, name);
-  }
-
-  get fileTreeView() {
-    return this._fileTreeView;
-  }
-
-  get openedEditorView() {
-    return this._openedEditorView;
-  }
-
-  get outlineView() {
-    return this._outlineView;
-  }
-
-  async getFileStatTreeNodeByPath(path: string) {
-    const treeItems = await (await this.fileTreeView.getViewElement())?.$$('[class*="file_tree_node__"]');
-    if (!treeItems) {
-      return;
-    }
-    let node;
-    for (const item of treeItems) {
-      const title = await item.getAttribute('title');
-      if (title?.startsWith('Group')) {
-        if (title === path) {
-          node = item;
-          break;
-        }
-      } else {
-        // The title maybe `~/a.js • Untracked`
-        if (title?.split(' ')[0]?.endsWith(path)) {
-          node = item;
-          break;
-        }
-      }
-    }
-    if (node) {
-      return new OpenSumiExplorerFileStatNode(node, this.app);
-    }
-  }
-
-  async getOpenedEditorTreeNodeByPath(path: string) {
-    const treeItems = await (await this.openedEditorView.getViewElement())?.$$('[class*="opened_editor_node__"]');
-    if (!treeItems) {
-      return;
-    }
-    let node;
-    for (const item of treeItems) {
-      const title = await item.getAttribute('title');
-      if (title?.startsWith('GROUP')) {
-        if (title === path) {
-          node = item;
-          break;
-        }
-      } else {
-        // The title maybe `~/a.js • Untracked`
-        if (title?.split(' ')[0]?.endsWith(path)) {
-          node = item;
-          break;
-        }
-      }
-    }
-    if (node) {
-      return new OpenSumiExplorerFileStatNode(node, this.app);
-    }
-  }
-}

package/src/filetree-view.ts

@@ -1,28 +0,0 @@
-import { OpenSumiApp } from './app';
-import { OpenSumiView } from './view';
-
-export class OpenSumiFileTreeView extends OpenSumiView {
-  constructor(app: OpenSumiApp, workspaceName: string) {
-    super(app, {
-      viewSelector: '[data-view-id="file-explorer"]',
-      tabSelector: '[data-view-id="file-explorer"] [tabindex="0"]',
-      name: workspaceName,
-    });
-  }
-
-  async getTitleActionByName(name: string) {
-    const header = await this.getTabElement();
-    if (!header) {
-      return;
-    }
-    await header.hover();
-    const titleAction = await header.waitForSelector('[class*="titleActions___"]');
-    const actions = await titleAction.$$('[class*="iconAction__"]');
-    for (const action of actions) {
-      const title = await action.getAttribute('title');
-      if (name === title) {
-        return action;
-      }
-    }
-  }
-}

package/src/index.ts

@@ -1,20 +0,0 @@
-export * from './app';
-export * from './component-editor';
-export * from './context-menu';
-export * from './editor';
-export * from './explorer-view';
-export * from './filetree-view';
-export * from './menu-item';
-export * from './menu';
-export * from './menubar';
-export * from './opened-editor-view';
-export * from './panel';
-export * from './quick-command-palette';
-export * from './search-view';
-export * from './terminal-view';
-export * from './output-view';
-export * from './text-editor';
-export * from './tree-node';
-export * from './view-base';
-export * from './view';
-export * from './workspace';