@opensumi/playwright 2.21.13 → 2.22.0

package/src/scm-view.ts

@@ -0,0 +1,72 @@
+import { OpenSumiApp } from './app';
+import { OpenSumiOpenedEditorView } from './opened-editor-view';
+import { OpenSumiPanel } from './panel';
+import { OpenSumiSourceControlView } from './source-control-view';
+import { OpenSumiTreeNode } from './tree-node';
+
+export class OpenSumiSCMFileStatNode 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() {
+    await this.elementHandle.click();
+  }
+
+  async getBadge() {
+    const status = await this.elementHandle.$('[class*="scm_tree_node_status___"]');
+    return await status?.textContent();
+  }
+}
+
+export class OpenSumiSCMView extends OpenSumiPanel {
+  private _scmView: OpenSumiSourceControlView;
+  private _openedEditorView: OpenSumiOpenedEditorView;
+
+  constructor(app: OpenSumiApp) {
+    super(app, 'SCM');
+    this._scmView = new OpenSumiSourceControlView(app, 'SOURCE CONTROL');
+  }
+
+  get scmView() {
+    return this._scmView;
+  }
+
+  get openedEditorView() {
+    return this._openedEditorView;
+  }
+
+  async getFileStatTreeNodeByPath(path: string) {
+    const treeItems = await (await this.scmView.getViewElement())?.$$('[class*="scm_tree_node___"]');
+    if (!treeItems) {
+      return;
+    }
+    let node;
+    for (const item of treeItems) {
+      const title = await item.getAttribute('title');
+      // title maybe `a.js • Untracked`
+      if (title?.split(' ')[0]?.endsWith(path)) {
+        node = item;
+        break;
+      }
+    }
+    if (node) {
+      return new OpenSumiSCMFileStatNode(node, this.app);
+    }
+  }
+}

package/src/search-view.ts

@@ -0,0 +1,260 @@
+import { isDefined } from '@opensumi/ide-utils';
+
+import { OpenSumiApp } from './app';
+import { OpenSumiPanel } from './panel';
+import { OpenSumiTreeNode } from './tree-node';
+
+export interface ISearchOptions {
+  search: string;
+  include?: string;
+  exclude?: string;
+  useDefaultExclude?: boolean;
+  useRegexp?: boolean;
+  isMatchWhileWord?: boolean;
+  isMatchCase?: boolean;
+}
+
+const SEARCH_OPTIONS = {
+  MATCH_CASE: 'Match Case',
+  MATCH_WHOLE_WORD: 'Match Whole Word',
+  USE_REGEXP: 'Use Regular Expression',
+};
+
+export class OpenSumiSearchFileStatNode extends OpenSumiTreeNode {
+  async getFsPath() {
+    return await this.elementHandle.getAttribute('title');
+  }
+
+  async isFile() {
+    const icon = await this.elementHandle.$("[class*='icon__']");
+    if (!icon) {
+      return false;
+    }
+    const className = await icon.getAttribute('class');
+    return className?.includes('file-icon');
+  }
+
+  async getMenuItemByName(name: string) {
+    const contextMenu = await this.openContextMenu();
+    const menuItem = await contextMenu.menuItemByName(name);
+    return menuItem;
+  }
+
+  async open() {
+    await this.elementHandle.click();
+  }
+
+  async getBadge() {
+    const status = await this.elementHandle.$('[class*="status___"]');
+    return await status?.textContent();
+  }
+}
+
+export class OpenSumiSearchView extends OpenSumiPanel {
+  constructor(app: OpenSumiApp) {
+    super(app, 'SEARCH');
+  }
+
+  get searchInputSelector() {
+    return '#search-input-field';
+  }
+
+  get replaceInputSelector() {
+    return '#replace-input-field';
+  }
+
+  get includeInputSelector() {
+    return '#include-input-field';
+  }
+
+  get excludeInputSelector() {
+    return '#exclude-input-field';
+  }
+
+  async getSearchResult() {
+    let results;
+    let files;
+    const resultElement = await this.app.page.waitForSelector('[class*="result_describe__"]');
+    const text = await resultElement.textContent();
+    const regx = /^(\d+) results found in (\d+) files/gi;
+    if (text) {
+      const match = regx.exec(text);
+      if (match) {
+        results = Number(match[1]);
+        files = Number(match[2]);
+      }
+    }
+    return {
+      results,
+      files,
+    };
+  }
+
+  async getReplaceAllButton() {
+    const button = this.view?.$('[class*="replace_all_button__"]');
+    return button;
+  }
+
+  async focusOnSearch() {
+    const visible = await this.isVisible();
+    if (!visible) {
+      await this.open();
+    }
+    const input = await this.app.page.$(this.searchInputSelector);
+    await input?.fill('');
+    await input?.focus();
+  }
+
+  async focusOnReplace() {
+    const visible = await this.isVisible();
+    if (!visible) {
+      await this.open();
+    }
+    const input = await this.app.page.$(this.replaceInputSelector);
+    await input?.focus();
+    return input;
+  }
+
+  async focusOnExclude() {
+    const visible = await this.isVisible();
+    if (!visible) {
+      await this.open();
+    }
+    const input = await this.getExcludeInput();
+    await input?.focus();
+  }
+
+  async focusOnInclude() {
+    const visible = await this.isVisible();
+    if (!visible) {
+      await this.open();
+    }
+    const input = await this.getIncludeInput();
+    await input?.focus();
+  }
+
+  async getSearchInput() {
+    return await this.view?.$(this.searchInputSelector);
+  }
+
+  async getReplaceInput() {
+    return await this.view?.$(this.replaceInputSelector);
+  }
+
+  async getExcludeInput() {
+    return await this.view?.$(this.excludeInputSelector);
+  }
+
+  async getIncludeInput() {
+    return await this.view?.$(this.includeInputSelector);
+  }
+
+  async getSearchAction(value: string) {
+    const searchField = await this.view?.$('[class*="search_field__"]');
+    if (searchField) {
+      const options = await searchField.$$('[class*="search_option__"]');
+      for (const option of options) {
+        const title = await option.getAttribute('title');
+        if (title === value) {
+          return option;
+        }
+      }
+    }
+  }
+
+  async activeSearchAction(value: string) {
+    const action = await this.getSearchAction(value);
+    const classname = await action?.getAttribute('class');
+    if (classname?.includes('select___')) {
+      return;
+    }
+    await action?.click();
+  }
+
+  async deactiveSearchAction(value: string) {
+    const action = await this.getSearchAction(value);
+    const classname = await action?.getAttribute('class');
+    if (classname?.includes('select___')) {
+      await action?.click();
+    }
+  }
+
+  async toggleDisplaySearchRules(expected?: boolean) {
+    const visible = await this.isVisible();
+    if (!visible) {
+      await this.open();
+    }
+    const titleBar = await this.view?.$('[class*="search_input_title_"]');
+    const checkbox = await titleBar?.$('.kt-checkbox');
+    const checked = await checkbox?.isChecked();
+    if (isDefined(expected) && expected === checked) {
+      return;
+    }
+    await checkbox?.click();
+  }
+
+  async toggleUseDefaultExclude(expected?: boolean) {
+    const visible = await this.isVisible();
+    if (!visible) {
+      await this.open();
+    }
+    const wrapper = await this.view?.$('[class*="use_default_excludes_wrapper_"]');
+    const checkbox = await wrapper?.$('.kt-checkbox');
+    const checked = await checkbox?.isChecked();
+    if (isDefined(expected) && expected === checked) {
+      return;
+    }
+    await checkbox?.click();
+  }
+
+  async search(options: ISearchOptions) {
+    if (!(await this.isVisible())) {
+      await this.open();
+    }
+    if (!options.search) {
+      return;
+    }
+    if (isDefined(options.isMatchCase)) {
+      (await options.isMatchCase)
+        ? this.activeSearchAction(SEARCH_OPTIONS.MATCH_CASE)
+        : this.deactiveSearchAction(SEARCH_OPTIONS.MATCH_CASE);
+    }
+    if (isDefined(options.isMatchWhileWord)) {
+      (await options.isMatchWhileWord)
+        ? this.activeSearchAction(SEARCH_OPTIONS.MATCH_WHOLE_WORD)
+        : this.deactiveSearchAction(SEARCH_OPTIONS.MATCH_WHOLE_WORD);
+    }
+    if (isDefined(options.useRegexp)) {
+      (await options.useRegexp)
+        ? this.activeSearchAction(SEARCH_OPTIONS.USE_REGEXP)
+        : this.deactiveSearchAction(SEARCH_OPTIONS.USE_REGEXP);
+    }
+    if (options.exclude || options.include || isDefined(options.useDefaultExclude)) {
+      await this.toggleDisplaySearchRules(true);
+      if (options.exclude) {
+        await this.focusOnExclude();
+        await this.page.keyboard.type(options.exclude);
+      }
+      if (options.include) {
+        await this.focusOnInclude();
+        await this.page.keyboard.type(options.include);
+      }
+      const useDefaultExlude = isDefined(options.useDefaultExclude) ? options.useDefaultExclude : true;
+      await this.toggleUseDefaultExclude(useDefaultExlude);
+    }
+    // Search on the end.
+    await this.focusOnSearch();
+    await this.page.keyboard.type(options.search);
+  }
+
+  async getTreeNodeByIndex(index: number) {
+    const treeItems = await this.view?.$$('[class*="search_node___"]');
+    if (!treeItems) {
+      return;
+    }
+    const node = treeItems[index];
+    if (node) {
+      return new OpenSumiSearchFileStatNode(node, this.app);
+    }
+  }
+}

package/src/source-control-view.ts

@@ -0,0 +1,44 @@
+import { OpenSumiApp } from './app';
+import { OpenSumiView } from './view';
+
+export class OpenSumiSourceControlView extends OpenSumiView {
+  constructor(app: OpenSumiApp, name: string) {
+    super(app, {
+      viewSelector: '[data-view-id="scm_view"]',
+      tabSelector: '[data-view-id="scm_view"] [tabindex="0"]',
+      name,
+    });
+  }
+
+  async getTitleActionByName(name: string) {
+    const header = await this.page.$('.scm [class*="titlebar___"]');
+    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;
+      }
+    }
+  }
+
+  async getTitleActionById(id: string) {
+    const header = await this.page.$('.scm [class*="titlebar___"]');
+    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 itemId = await action.getAttribute('id');
+      if (id === itemId) {
+        return action;
+      }
+    }
+  }
+}

package/src/terminal-view.ts

@@ -0,0 +1,50 @@
+import { OpenSumiApp } from './app';
+import { OpenSumiContextMenu } from './context-menu';
+import { OpenSumiPanel } from './panel';
+
+type TerminalType = 'bash' | 'zsh' | 'Javascript Debug Terminal';
+
+export class OpenSumiTerminalView extends OpenSumiPanel {
+  constructor(app: OpenSumiApp) {
+    super(app, 'TERMINAL');
+  }
+
+  async sendText(text: string) {
+    const visible = await this.isVisible();
+    if (!visible) {
+      await this.open();
+    }
+    await this.focus();
+    const box = await this.view?.boundingBox();
+    if (box) {
+      await this.app.page.mouse.click(box.x + box?.width / 2, box.y + box?.height / 2);
+    }
+    await this.page.keyboard.type(text);
+    await this.app.page.keyboard.press('Enter');
+  }
+
+  async createTerminalByType(type: TerminalType) {
+    const buttonWrapper = await this.view?.$('[class*="item_wrapper__"]');
+    const buttons = await buttonWrapper?.$$('.kaitian-icon');
+    if (!buttons) {
+      return;
+    }
+    let button;
+    for (const item of buttons) {
+      const title = await item.getAttribute('title');
+      if (title === 'Create terminal by type') {
+        button = item;
+        break;
+      }
+    }
+    if (!button) {
+      return;
+    }
+    await button.click();
+    const menu = new OpenSumiContextMenu(this.app);
+    await menu.waitForVisible();
+    await menu.clickMenuItem(type);
+
+    await this.app.page.waitForTimeout(1000);
+  }
+}

package/src/tests/app.test.ts

@@ -0,0 +1,16 @@
+import path from 'path';
+
+import { expect } from '@playwright/test';
+
+import { OpenSumiApp } from '../app';
+import { OpenSumiWorkspace } from '../workspace';
+
+import test, { page } from './hooks';
+
+test.describe('Application', () => {
+  test('should show main layout', async () => {
+    const workspace = new OpenSumiWorkspace([path.resolve('./src/tests/workspaces/default')]);
+    const app = await OpenSumiApp.load(page, workspace);
+    expect(await app.isMainLayoutVisible()).toBe(true);
+  });
+});

package/src/tests/debug.test.ts

@@ -0,0 +1,121 @@
+import path from 'path';
+
+import { expect } from '@playwright/test';
+
+import { OpenSumiApp } from '../app';
+import { OpenSumiDebugView } from '../debug-view';
+import { OpenSumiExplorerView } from '../explorer-view';
+import { OpenSumiTerminalView } from '../terminal-view';
+import { OpenSumiTextEditor } from '../text-editor';
+import { OpenSumiWorkspace } from '../workspace';
+
+import test, { page } from './hooks';
+
+let app: OpenSumiApp;
+let explorer: OpenSumiExplorerView;
+let debugView: OpenSumiDebugView;
+let editor: OpenSumiTextEditor;
+let workspace: OpenSumiWorkspace;
+
+test.describe('OpenSumi Debug', () => {
+  test.beforeAll(async () => {
+    workspace = new OpenSumiWorkspace([path.resolve('./src/tests/workspaces/debug')]);
+    app = await OpenSumiApp.load(page, workspace);
+    explorer = await app.open(OpenSumiExplorerView);
+    explorer.initFileTreeView(workspace.workspace.displayName);
+    await explorer.fileTreeView.open();
+  });
+
+  test.afterAll(() => {
+    app.dispose();
+  });
+
+  test('Debug breakpoint editor glyph margin should be worked', async () => {
+    editor = await app.openEditor(OpenSumiTextEditor, explorer, 'index.js', false);
+    const glyphMarginModel = await editor.getGlyphMarginModel();
+    let overlay = await glyphMarginModel.getOverlay(6);
+    await overlay?.click({ position: { x: 9, y: 9 }, force: true });
+    // 此时元素 dom 结构已经改变，需要重新获取
+    overlay = await glyphMarginModel.getOverlay(6);
+    expect(await glyphMarginModel.hasBreakpoint(overlay!)).toBeTruthy();
+    await editor.close();
+  });
+
+  test('Run Debug should be worked', async () => {
+    editor = await app.openEditor(OpenSumiTextEditor, explorer, 'index.js', false);
+    await app.page.waitForTimeout(1000);
+
+    debugView = await app.open(OpenSumiDebugView);
+    const glyphMarginModel = await editor.getGlyphMarginModel();
+    let glyphOverlay = await glyphMarginModel.getOverlay(6);
+    expect(glyphOverlay).toBeDefined();
+    if (!glyphOverlay) {
+      return;
+    }
+    const isClicked = await glyphMarginModel.hasBreakpoint(glyphOverlay);
+    if (!isClicked) {
+      await glyphOverlay?.click({ position: { x: 9, y: 9 }, force: true });
+      await app.page.waitForTimeout(1000);
+    }
+
+    await debugView.start();
+    await app.page.waitForTimeout(2000);
+
+    glyphOverlay = await glyphMarginModel.getOverlay(6);
+    expect(glyphOverlay).toBeDefined();
+    if (!glyphOverlay) {
+      return;
+    }
+    expect(await glyphMarginModel.hasTopStackFrame(glyphOverlay)).toBeTruthy();
+
+    const overlaysModel = await editor.getOverlaysModel();
+    const viewOverlay = await overlaysModel.getOverlay(6);
+    expect(viewOverlay).toBeDefined();
+    if (!viewOverlay) {
+      return;
+    }
+    expect(await glyphMarginModel.hasTopStackFrameLine(viewOverlay)).toBeTruthy();
+    await editor.close();
+    await debugView.stop();
+    await page.waitForTimeout(1000);
+  });
+
+  test('Run Debug by Javascript Debug Terminal', async () => {
+    await explorer.open();
+    editor = await app.openEditor(OpenSumiTextEditor, explorer, 'index.js', false);
+
+    const terminal = await app.open(OpenSumiTerminalView);
+    await terminal.createTerminalByType('Javascript Debug Terminal');
+    await terminal.sendText('node index.js');
+    await app.page.waitForTimeout(1000);
+
+    const glyphMarginModel = await editor.getGlyphMarginModel();
+    let glyphOverlay = await glyphMarginModel.getOverlay(6);
+    expect(glyphOverlay).toBeDefined();
+    if (!glyphOverlay) {
+      return;
+    }
+    const isClicked = await glyphMarginModel.hasBreakpoint(glyphOverlay);
+    if (!isClicked) {
+      await glyphOverlay?.click({ position: { x: 9, y: 9 }, force: true });
+      await app.page.waitForTimeout(1000);
+    }
+
+    glyphOverlay = await glyphMarginModel.getOverlay(6);
+    expect(glyphOverlay).toBeDefined();
+    if (!glyphOverlay) {
+      return;
+    }
+    expect(await glyphMarginModel.hasTopStackFrame(glyphOverlay)).toBeTruthy();
+
+    const overlaysModel = await editor.getOverlaysModel();
+    const viewOverlay = await overlaysModel.getOverlay(6);
+    expect(viewOverlay).toBeDefined();
+    if (!viewOverlay) {
+      return;
+    }
+    expect(await glyphMarginModel.hasTopStackFrameLine(viewOverlay)).toBeTruthy();
+    await debugView.stop();
+    await page.waitForTimeout(1000);
+  });
+});

package/src/tests/editor/undoRedo.test.ts

@@ -0,0 +1,55 @@
+import path from 'path';
+
+import { expect } from '@playwright/test';
+
+import { OpenSumiApp } from '../../app';
+import { OpenSumiExplorerView } from '../../explorer-view';
+import { OpenSumiTextEditor } from '../../text-editor';
+import { OpenSumiWorkspace } from '../../workspace';
+import test, { page } from '../hooks';
+
+let app: OpenSumiApp;
+let explorer: OpenSumiExplorerView;
+let editor: OpenSumiTextEditor;
+let workspace: OpenSumiWorkspace;
+
+test.describe('OpenSumi Editor Undo Redo', () => {
+  test.beforeAll(async () => {
+    workspace = new OpenSumiWorkspace([path.resolve('./src/tests/workspaces/default')]);
+    app = await OpenSumiApp.load(page, workspace);
+    explorer = await app.open(OpenSumiExplorerView);
+    explorer.initFileTreeView(workspace.workspace.displayName);
+    await explorer.fileTreeView.open();
+  });
+
+  test.afterAll(() => {
+    app.dispose();
+  });
+
+  test('simple editor undo/redo should work', async () => {
+    editor = await app.openEditor(OpenSumiTextEditor, explorer, 'editor-undo-redo.text');
+    const existingLine = await editor.lineByLineNumber(1);
+    await editor.placeCursorInLine(existingLine);
+    await editor.typeText('a');
+    await editor.saveByKeyboard();
+    await editor.typeText('b');
+    await editor.saveByKeyboard();
+    await editor.typeText('c');
+    await editor.saveByKeyboard();
+    await expectLineHasText('abc');
+    await editor.undoByKeyboard();
+    await expectLineHasText('ab');
+    await editor.undoByKeyboard();
+    await expectLineHasText('a');
+    await editor.redoByKeyboard();
+    await expectLineHasText('ab');
+    await editor.redoByKeyboard();
+    await expectLineHasText('abc');
+
+    async function expectLineHasText(text: string) {
+      const line = await editor.lineByLineNumber(1);
+      expect(await line?.innerText()).toEqual(text);
+      await editor.placeCursorInLine(line);
+    }
+  });
+});