@opensumi/playwright 2.21.4 → 2.21.5-next-1668665440.0

package/src/tests/scm.test.ts

@@ -0,0 +1,84 @@
+import path from 'path';
+
+import { expect } from '@playwright/test';
+
+import { OpenSumiApp } from '../app';
+import { OpenSumiDiffEditor } from '../diff-editor';
+import { OpenSumiExplorerView } from '../explorer-view';
+import { OpenSumiFileTreeView } from '../filetree-view';
+import { OpenSumiSCMView } from '../scm-view';
+import { OpenSumiTerminal } from '../terminal';
+import { OpenSumiWorkspace } from '../workspace';
+
+import test, { page } from './hooks';
+
+let app: OpenSumiApp;
+let explorer: OpenSumiExplorerView;
+let scm: OpenSumiSCMView;
+let fileTreeView: OpenSumiFileTreeView;
+let workspace: OpenSumiWorkspace;
+
+test.describe('OpenSumi SCM Panel', () => {
+  test.beforeAll(async () => {
+    workspace = new OpenSumiWorkspace([path.resolve('./src/tests/workspaces/git-workspace')]);
+    app = await OpenSumiApp.load(page, workspace);
+    explorer = await app.open(OpenSumiExplorerView);
+    explorer.initFileTreeView(workspace.workspace.displayName);
+    fileTreeView = explorer.fileTreeView;
+    const terminal = await app.open(OpenSumiTerminal);
+    // There should have GIT on the PATH
+    await terminal.sendText('git init');
+  });
+
+  test.afterAll(() => {
+    app.dispose();
+  });
+
+  test('The "U" charset should on the files tail after git initialized', async () => {
+    await explorer.fileTreeView.open();
+    const action = await fileTreeView.getTitleActionByName('Refresh');
+    await action?.click();
+    await app.page.waitForTimeout(2000);
+    const node = await explorer.getFileStatTreeNodeByPath('a.js');
+    const badge = await node?.badge();
+    expect(badge).toBe('U');
+  });
+
+  test('The "U" charset should on the files tail on SCM view', async () => {
+    scm = await app.open(OpenSumiSCMView);
+    await scm.open();
+    await app.page.waitForTimeout(2000);
+    const node = await scm.getFileStatTreeNodeByPath('a.js');
+    const badge = await node?.getBadge();
+    expect(badge).toBe('U');
+  });
+
+  test('Open file from context menu', async () => {
+    scm = await app.open(OpenSumiSCMView);
+    await scm.open();
+    const node = await scm.getFileStatTreeNodeByPath('a.js');
+    const item = await node?.getMenuItemByName('Open File');
+    await item?.click();
+    await app.page.waitForTimeout(1000);
+    if (node) {
+      const editor = new OpenSumiDiffEditor(app, node);
+      const currentTab = await editor.getCurrentTab();
+      const dataUri = await currentTab?.getAttribute('data-uri');
+      expect(dataUri?.startsWith('file')).toBeTruthy();
+    }
+  });
+
+  test('Open file with diff editor', async () => {
+    scm = await app.open(OpenSumiSCMView);
+    await scm.open();
+    const node = await scm.getFileStatTreeNodeByPath('a.js');
+    await node?.open();
+    await app.page.waitForTimeout(1000);
+    if (node) {
+      const editor = new OpenSumiDiffEditor(app, node);
+      const currentTab = await editor.getCurrentTab();
+      const dataUri = await currentTab?.getAttribute('data-uri');
+      expect(dataUri?.startsWith('diff')).toBeTruthy();
+    }
+  });
+});

package/src/tests/search-view.test.ts

@@ -0,0 +1,32 @@
+import path from 'path';
+
+import { expect } from '@playwright/test';
+
+import { OpenSumiApp } from '..';
+import { OpenSumiSearchView } from '../search-view';
+import { OpenSumiWorkspace } from '../workspace';
+
+import test, { page } from './hooks';
+
+let app: OpenSumiApp;
+let search: OpenSumiSearchView;
+
+test.describe('OpenSumi Search Panel', () => {
+  test.beforeAll(async () => {
+    const workspace = new OpenSumiWorkspace([path.resolve('./src/tests/workspaces/default')]);
+    app = await OpenSumiApp.load(page, workspace);
+    search = await app.open(OpenSumiSearchView);
+  });
+
+  test('Can search files by simple text', async () => {
+    const searchText = 'hello';
+    expect(await search.isVisible()).toBeTruthy();
+    await search.focusOnSearch();
+    await page.keyboard.type(searchText);
+    // search panel should searched after typing
+    await app.page.keyboard.press('Enter');
+    const { results, files } = await search.getSearchResult();
+    expect(results).toBe(1);
+    expect(files).toBe(1);
+  });
+});

package/src/tests/settings.test.ts

@@ -0,0 +1,103 @@
+import path from 'path';
+
+import { expect } from '@playwright/test';
+
+import { OpenSumiApp } from '../app';
+import { OpenSumiComponentEditor } from '../component-editor';
+import { OPENSUMI_VIEW_CONTAINERS } from '../constans';
+import { OpenSumiContextMenu } from '../context-menu';
+import { OpenSumiExplorerView } from '../explorer-view';
+import { keypressWithCmdCtrl } from '../utils';
+import { OpenSumiWorkspace } from '../workspace';
+
+import test, { page } from './hooks';
+
+let app: OpenSumiApp;
+let explorer: OpenSumiExplorerView;
+let workspace: OpenSumiWorkspace;
+
+test.describe('OpenSumi Shortcuts', () => {
+  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);
+  });
+
+  test.afterAll(() => {
+    app.dispose();
+  });
+
+  const openSettingsView = async () => {
+    const leftTabbar = await app.page.waitForSelector(`#${OPENSUMI_VIEW_CONTAINERS.LEFT_TABBAR}`);
+    const settingsButton = await leftTabbar.$('[class*="titleActions___"] span');
+    await settingsButton?.click();
+    const menu = new OpenSumiContextMenu(app);
+    await menu.clickMenuItem('Settings');
+  };
+
+  test('open Settings by keybinding', async () => {
+    await explorer.fileTreeView.focus();
+    await app.page.keyboard.press(keypressWithCmdCtrl(','), { delay: 200 });
+    const editor = await app.openComponentEditor(
+      OpenSumiComponentEditor,
+      'pref:/',
+      'Settings',
+      "[class*='preferences___']",
+    );
+    expect(await editor.isVisible()).toBeTruthy();
+    await editor.close();
+    await app.page.waitForTimeout(1000);
+    expect(await editor.isVisible()).toBeFalsy();
+  });
+
+  test('open Settings by settings button', async () => {
+    await openSettingsView();
+    const editor = await app.openComponentEditor(
+      OpenSumiComponentEditor,
+      'pref:/',
+      'Settings',
+      "[class*='preferences___']",
+    );
+    expect(await editor.isVisible()).toBeTruthy();
+    await editor.close();
+  });
+
+  test('edit settings in settings.json', async () => {
+    await openSettingsView();
+    const editor = await app.openComponentEditor(
+      OpenSumiComponentEditor,
+      'pref:/',
+      'Settings',
+      "[class*='preferences___']",
+    );
+    expect(await editor.isVisible()).toBeTruthy();
+    // Settings => Feature => Search > Include
+    const tabs = (await (await editor.getContainer())?.$$('[class*="index_item_wrapper__"]')) || [];
+    let featrueTab;
+    for (const tab of tabs) {
+      const title = await tab.textContent();
+      if (title === 'Feature') {
+        featrueTab = tab;
+        break;
+      }
+    }
+    await featrueTab.click();
+    await app.page.waitForTimeout(1000);
+    const items = (await (await editor.getContainer())?.$$('[class*="preference_item___"]')) || [];
+    let searchIncludeItem;
+    for (const item of items) {
+      const key = await (await item.$('[class*="key___"]'))?.textContent();
+      if (key === 'Search > Include ') {
+        searchIncludeItem = item;
+        break;
+      }
+    }
+    const editButton = await searchIncludeItem.$('[class*="control_wrap___"] a');
+    expect(editButton).toBeDefined();
+    await editButton.click();
+    await app.page.waitForTimeout(2000);
+    const currentTab = await editor.getCurrentTab();
+    expect(await currentTab?.textContent()).toBe(' settings.json');
+  });
+});

package/src/tests/workspaces/debug/.sumi/launch.json

@@ -0,0 +1,15 @@
+{
+  // 使用 IntelliSense 了解相关属性。
+  // 悬停以查看现有属性的描述。
+  // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Launch Program",
+      "program": "${workspaceFolder}/index.js",
+      "skipFiles": ["<node_internals>/**"]
+    }
+  ]
+}

package/src/tests/workspaces/debug/index.js

@@ -0,0 +1,18 @@
+const str = 'hello';
+const str2 = 'opensumi';
+const buffStr = Buffer.from(str + str2);
+
+const fn = () => {
+  let a = 0;
+  setTimeout(() => {
+    a += 1;
+    console.log(a);
+  }, 10);
+  console.log(a);
+};
+
+fn();
+
+console.log(str);
+console.log(str2);
+console.log(buffStr);

package/src/tests/workspaces/default/editor2.js

@@ -0,0 +1,87 @@
+// ------------------------------
+// ------------------------------
+function Person(age) {
+  if (age) {
+    this.age = age;
+  }
+}
+Person.prototype.getAge = function () {
+  return this.age;
+};
+
+// ------------------------------
+// ------------------------------
+function Person(age) {
+  if (age) {
+    this.age = age;
+  }
+}
+Person.prototype.getAge = function () {
+  return this.age;
+};
+
+// ------------------------------
+// ------------------------------
+function Person(age) {
+  if (age) {
+    this.age = age;
+  }
+}
+Person.prototype.getAge = function () {
+  return this.age;
+};
+
+// ------------------------------
+// ------------------------------
+function Person(age) {
+  if (age) {
+    this.age = age;
+  }
+}
+Person.prototype.getAge = function () {
+  return this.age;
+};
+
+// ------------------------------
+// ------------------------------And this is some long line. And this is some long line. And this is some long line. And this is some long line. And this is some long line.
+function Person(age) {
+  if (age) {
+    this.age = age;
+  }
+}
+Person.prototype.getAge = function () {
+  return this.age;
+};
+
+// ------------------------------
+// ------------------------------
+function Person(age) {
+  if (age) {
+    this.age = age;
+  }
+}
+Person.prototype.getAge = function () {
+  return this.age;
+};
+
+// ------------------------------
+// ------------------------------
+function Person(age) {
+  if (age) {
+    this.age = age;
+  }
+}
+Person.prototype.getAge = function () {
+  return this.age;
+};
+
+// ------------------------------
+// ------------------------------
+function Person(age) {
+  if (age) {
+    this.age = age;
+  }
+}
+Person.prototype.getAge = function () {
+  return this.age;
+};

package/src/tests/workspaces/default/test/test.js

@@ -0,0 +1 @@
+console.log('hello ./test/test.js');

package/src/tests/workspaces/language/definition.ts

@@ -0,0 +1,12 @@
+export class Definition {
+  private variable1: string = '';
+  constructor() {}
+
+  public setVariable1(s: string): void {
+    this.variable1 = s;
+  }
+
+  public getVariable1(): string {
+    return this.variable1;
+  }
+}

package/src/tests/workspaces/language/reference.ts

@@ -0,0 +1,9 @@
+import { Definition } from './definition';
+
+export class Reference {
+  private def: Definition = new Definition();
+
+  constructor() {
+    this.def.setVariable1('6');
+  }
+}

package/src/text-editor.ts

@@ -0,0 +1,318 @@
+import { ElementHandle, Page } from '@playwright/test';
+
+import { OpenSumiApp } from './app';
+import { OpenSumiContextMenu } from './context-menu';
+import { OpenSumiEditor } from './editor';
+import { OpenSumiTreeNode } from './tree-node';
+import { keypressWithCmdCtrl } from './utils';
+
+abstract class ViewsModel {
+  constructor(readonly page: Page) {}
+  protected viewElement: ElementHandle<SVGElement | HTMLElement> | null;
+  async mount(v: ElementHandle<SVGElement | HTMLElement> | null): Promise<void> {
+    this.viewElement = v;
+  }
+}
+
+class GlyphMarginModel extends ViewsModel {
+  async getElement() {
+    const glyphMargin = await this.viewElement?.$('.glyph-margin');
+    const parent = await glyphMargin?.getProperty('parentNode');
+    return parent?.asElement();
+  }
+
+  async getOverlay(lineNumber: number) {
+    const margin = await this.getElement();
+    const overlays = await margin?.$$('.margin-view-overlays > div');
+    if (!overlays) {
+      return;
+    }
+
+    for (const node of overlays) {
+      const lineNode = await node.$('.line-numbers');
+      const content = await lineNode?.textContent();
+      if (content === lineNumber.toString()) {
+        return node;
+      }
+    }
+  }
+
+  async hasBreakpoint(node: ElementHandle<SVGElement | HTMLElement>): Promise<boolean> {
+    return !!(await node.$('.sumi-debug-breakpoint'));
+  }
+
+  async hasTopStackFrame(node: ElementHandle<SVGElement | HTMLElement>): Promise<boolean> {
+    return !!(await node.$('.sumi-debug-top-stack-frame'));
+  }
+
+  async hasTopStackFrameLine(node: ElementHandle<SVGElement | HTMLElement>): Promise<boolean> {
+    return !!(await node.$('.sumi-debug-top-stack-frame-line'));
+  }
+}
+
+class OverlaysModel extends ViewsModel {
+  async getElement() {
+    return await this.viewElement?.$('.view-overlays');
+  }
+
+  async getOverlay(lineNumber: number) {
+    const element = await this.getElement();
+    const overlay = await element?.$(`div:nth-child(${lineNumber})`);
+    return overlay;
+  }
+}
+
+export class OpenSumiTextEditor extends OpenSumiEditor {
+  private glyphMarginModel: GlyphMarginModel;
+  private overlaysModel: OverlaysModel;
+
+  constructor(app: OpenSumiApp, filestatElement: OpenSumiTreeNode) {
+    super(app, filestatElement);
+    this.glyphMarginModel = new GlyphMarginModel(this.page);
+    this.overlaysModel = new OverlaysModel(this.page);
+  }
+
+  async getGlyphMarginModel() {
+    const viewElement = await this.getViewElement();
+    this.glyphMarginModel.mount(viewElement);
+    return this.glyphMarginModel;
+  }
+
+  async getOverlaysModel() {
+    const viewElement = await this.getViewElement();
+    this.overlaysModel.mount(viewElement);
+    return this.overlaysModel;
+  }
+
+  async openLineContextMenuByLineNumber(lineNumber: number) {
+    const existingLine = await this.lineByLineNumber(lineNumber);
+    if (!existingLine) {
+      return;
+    }
+    return OpenSumiContextMenu.open(this.app, async () => existingLine);
+  }
+
+  async openGlyphMarginContextMenu() {
+    const glyphMargin = await this.getGlyphMarginModel();
+    const view = await glyphMargin.getElement();
+    if (!view) {
+      return;
+    }
+    return OpenSumiContextMenu.open(this.app, async () => view);
+  }
+
+  async openTabContextMenu() {
+    const view = await this.getTab();
+    if (!view) {
+      return;
+    }
+    return OpenSumiContextMenu.open(this.app, async () => view);
+  }
+
+  async numberOfLines(): Promise<number | undefined> {
+    await this.activate();
+    const viewElement = await this.getViewElement();
+    const lineElements = await viewElement?.$$('.view-lines .view-line');
+    return lineElements?.length;
+  }
+
+  async textContentOfLineByLineNumber(lineNumber: number): Promise<string | undefined> {
+    const lineElement = await this.lineByLineNumber(lineNumber);
+    const content = await lineElement?.textContent();
+    return content ? this.replaceEditorSymbolsWithSpace(content) : undefined;
+  }
+
+  async replaceLineWithLineNumber(text: string, lineNumber: number): Promise<void> {
+    await this.selectLineWithLineNumber(lineNumber);
+    await this.typeTextAndHitEnter(text);
+  }
+
+  protected async typeTextAndHitEnter(text: string): Promise<void> {
+    await this.page.keyboard.type(text);
+    await this.page.keyboard.press('Enter');
+  }
+
+  async selectLineWithLineNumber(lineNumber: number): Promise<ElementHandle<SVGElement | HTMLElement> | undefined> {
+    await this.activate();
+    const lineElement = await this.lineByLineNumber(lineNumber);
+    await this.selectLine(lineElement);
+    return lineElement;
+  }
+
+  async placeCursorInLineWithLineNumber(
+    lineNumber: number,
+  ): Promise<ElementHandle<SVGElement | HTMLElement> | undefined> {
+    await this.activate();
+    const lineElement = await this.lineByLineNumber(lineNumber);
+    await this.placeCursorInLine(lineElement);
+    return lineElement;
+  }
+
+  async placeCursorInLineWithPosition(
+    lineNumber: number,
+    columnNumber: number,
+  ): Promise<ElementHandle<SVGElement | HTMLElement> | undefined> {
+    await this.activate();
+    const lineElement = await this.lineByLineNumber(lineNumber);
+    await this.placeCursorInLine(lineElement, 'start');
+    for (let i = 0; i < columnNumber; i++) {
+      await this.page.keyboard.press('ArrowRight', { delay: 200 });
+    }
+    return lineElement;
+  }
+
+  async deleteLineByLineNumber(lineNumber: number): Promise<void> {
+    await this.selectLineWithLineNumber(lineNumber);
+    await this.page.keyboard.press('Backspace');
+  }
+
+  async getGlyphMarginElement() {
+    await this.activate();
+    const viewElement = await this.getViewElement();
+    return await viewElement?.$('.glyph-margin');
+  }
+
+  async getCursorElement(): Promise<ElementHandle<SVGElement | HTMLElement> | undefined> {
+    const viewElement = await this.getViewElement();
+
+    const cursorNode = await viewElement?.$('.cursor.monaco-mouse-cursor-text');
+    if (cursorNode) {
+      return cursorNode;
+    }
+  }
+
+  async getCursorLineNumber(node: ElementHandle<SVGElement | HTMLElement> | undefined) {
+    const style = await node!.getAttribute('style');
+    const tops = style?.match(/top: [0-9]*px;/g) || ['0'];
+    const topNums = tops[0].match(/\d+/g);
+    if (topNums && topNums.length > 0) {
+      let topNum: number | string = topNums[0];
+      topNum = Number(topNum);
+
+      // 每个 view-lines 默认高度都是 18
+      const line = topNum / 18 + 1;
+      return line;
+    }
+    return undefined;
+  }
+  async lineByLineNumber(lineNumber: number): Promise<ElementHandle<SVGElement | HTMLElement> | undefined> {
+    await this.activate();
+    const viewElement = await this.getViewElement();
+
+    const lineNode = await viewElement!.$(`.view-lines > div:nth-child(${lineNumber})`);
+
+    if (!lineNode) {
+      throw new Error(`Couldn't retrieve lines of text editor ${this.tabSelector}`);
+    }
+
+    return lineNode.asElement();
+  }
+
+  async textContentOfLineContainingText(text: string): Promise<string | undefined> {
+    await this.activate();
+    const lineElement = await this.lineContainingText(text);
+    const content = await lineElement?.textContent();
+    return content ? this.replaceEditorSymbolsWithSpace(content) : undefined;
+  }
+
+  async replaceLineContainingText(newText: string, oldText: string): Promise<void> {
+    await this.selectLineContainingText(oldText);
+    await this.typeTextAndHitEnter(newText);
+  }
+
+  async selectLineContainingText(text: string): Promise<ElementHandle<SVGElement | HTMLElement> | undefined> {
+    await this.activate();
+    const lineElement = await this.lineContainingText(text);
+    await this.selectLine(lineElement);
+    return lineElement;
+  }
+
+  async placeCursorInLineContainingText(text: string): Promise<ElementHandle<SVGElement | HTMLElement> | undefined> {
+    await this.activate();
+    const lineElement = await this.lineContainingText(text);
+    await this.placeCursorInLine(lineElement);
+    return lineElement;
+  }
+
+  async deleteLineContainingText(text: string): Promise<void> {
+    await this.selectLineContainingText(text);
+    await this.page.keyboard.press('Backspace');
+  }
+
+  async addTextToNewLineAfterLineContainingText(textContainedByExistingLine: string, newText: string): Promise<void> {
+    const existingLine = await this.lineContainingText(textContainedByExistingLine);
+    await this.placeCursorInLine(existingLine);
+    await this.page.keyboard.press('End');
+    await this.page.keyboard.press('Enter');
+    await this.page.keyboard.type(newText);
+  }
+
+  async addTextToNewLineAfterLineByLineNumber(lineNumber: number, newText: string): Promise<void> {
+    const existingLine = await this.lineByLineNumber(lineNumber);
+    await this.placeCursorInLine(existingLine);
+    await this.page.keyboard.press('End');
+    await this.page.keyboard.press('Enter');
+    await this.page.keyboard.type(newText);
+  }
+
+  async pasteContentAfterLineByLineNumber(lineNumber: number): Promise<void> {
+    const existingLine = await this.lineByLineNumber(lineNumber);
+    await this.placeCursorInLine(existingLine);
+    await this.page.keyboard.press('End');
+    await this.page.keyboard.press(keypressWithCmdCtrl('KeyV'));
+  }
+
+  protected async lineContainingText(text: string): Promise<ElementHandle<SVGElement | HTMLElement> | undefined> {
+    const viewElement = await this.getViewElement();
+    return viewElement?.waitForSelector(`.view-lines .view-line:has-text("${text}")`);
+  }
+
+  protected async selectLine(lineElement: ElementHandle<SVGElement | HTMLElement> | undefined): Promise<void> {
+    await lineElement?.click({ clickCount: 3 });
+  }
+
+  protected async placeCursorInLine(
+    lineElement: ElementHandle<SVGElement | HTMLElement> | undefined,
+    point: 'start' | 'end' = 'end',
+  ): Promise<void> {
+    if (!lineElement) {
+      return;
+    }
+
+    if (point === 'start') {
+      await lineElement.click({
+        position: { x: 0, y: 0 },
+      });
+      return;
+    }
+
+    await lineElement.click();
+  }
+
+  protected replaceEditorSymbolsWithSpace(content: string): string | Promise<string | undefined> {
+    // [ ] &nbsp; => \u00a0
+    // [·] &middot; => \u00b7
+    return content.replace(/[\u00a0\u00b7]/g, ' ');
+  }
+
+  protected async selectedSuggestion(): Promise<ElementHandle<SVGElement | HTMLElement>> {
+    return this.page.waitForSelector(this.viewSelector + ' .monaco-list-row.show-file-icons.focused');
+  }
+
+  async getSelectedSuggestionText(): Promise<string> {
+    const suggestion = await this.selectedSuggestion();
+    const text = await suggestion.textContent();
+    if (text === null) {
+      throw new Error('Text content could not be found');
+    }
+    return text;
+  }
+
+  async clearContent() {
+    const line = await this.lineByLineNumber(1);
+    await line?.click();
+    await this.placeCursorInLine(line);
+    await this.page.keyboard.press(keypressWithCmdCtrl('KeyA'));
+    await this.page.keyboard.press('Delete');
+  }
+}