test: add Javascript Debug Terminal test case

opensumi · erha19 · Jan 3, 2023 · Dec 30, 2022 · Dec 30, 2022 · 1dc897688d01d460a7b5b338eda3dccb50a8a53a
commit 1dc897688d01d460a7b5b338eda3dccb50a8a53a
diff --git a/tools/playwright/src/debug-view.ts b/tools/playwright/src/debug-view.ts
@@ -1,6 +1,7 @@
 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___']",
@@ -11,6 +12,10 @@ export class OpenSumiDebugView extends OpenSumiPanel {
     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) {
@@ -21,4 +26,48 @@ export class OpenSumiDebugView extends OpenSumiPanel {
     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();
+  }
 }
diff --git a/tools/playwright/src/terminal.ts b/tools/playwright/src/terminal.ts
@@ -1,6 +1,9 @@
 import { OpenSumiApp } from './app';
+import { OpenSumiContextMenu } from './context-menu';
 import { OpenSumiPanel } from './panel';
 
+type TerminalType = 'bash' | 'zsh' | 'Javascript Debug Terminal';
+
 export class OpenSumiTerminal extends OpenSumiPanel {
   constructor(app: OpenSumiApp) {
     super(app, 'terminal');
@@ -19,4 +22,29 @@ export class OpenSumiTerminal extends OpenSumiPanel {
     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);
+  }
 }
diff --git a/tools/playwright/src/tests/debug.test.ts b/tools/playwright/src/tests/debug.test.ts
@@ -5,6 +5,7 @@ import { expect } from '@playwright/test';
 import { OpenSumiApp } from '../app';
 import { OpenSumiDebugView } from '../debug-view';
 import { OpenSumiExplorerView } from '../explorer-view';
+import { OpenSumiTerminal } from '../terminal';
 import { OpenSumiTextEditor } from '../text-editor';
 import { OpenSumiWorkspace } from '../workspace';
 
@@ -47,7 +48,11 @@ test.describe('OpenSumi Debug', () => {
     debugView = await app.open(OpenSumiDebugView);
     const glyphMarginModel = await editor.getGlyphMarginModel();
     let glyphOverlay = await glyphMarginModel.getOverlay(6);
-    const isClicked = await glyphMarginModel.hasBreakpoint(glyphOverlay!);
+    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);
@@ -57,12 +62,57 @@ test.describe('OpenSumi Debug', () => {
     await app.page.waitForTimeout(2000);
 
     glyphOverlay = await glyphMarginModel.getOverlay(6);
-
-    expect(await glyphMarginModel.hasTopStackFrame(glyphOverlay!)).toBeTruthy();
+    expect(glyphOverlay).toBeDefined();
+    if (!glyphOverlay) {
+      return;
+    }
+    expect(await glyphMarginModel.hasTopStackFrame(glyphOverlay)).toBeTruthy();
 
     const overlaysModel = await editor.getOverlaysModel();
     const viewOverlay = await overlaysModel.getOverlay(6);
-    expect(await glyphMarginModel.hasTopStackFrameLine(viewOverlay!)).toBeTruthy();
+    expect(viewOverlay).toBeDefined();
+    if (!viewOverlay) {
+      return;
+    }
+    expect(await glyphMarginModel.hasTopStackFrameLine(viewOverlay)).toBeTruthy();
     await editor.close();
+    await debugView.stop();
+  });
+
+  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(OpenSumiTerminal);
+    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();
   });
 });