Migrate TextEditor to be an e2e test

This interaction test is more like an e2e test verifying that
TextEditor component works e2e. This CL migrates the test
to be an e2e test using an editor instance in Snippets.

Drive-by: made --bail to be a boolean arg to make it not swallow
the first test file.
Bug: 402372244
Change-Id: I4efcf29c549633bc8478419ab5b94e0804dee1ef
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6434109
Commit-Queue: Alex Rudenko <alexrudenko@chromium.org>
Auto-Submit: Alex Rudenko <alexrudenko@chromium.org>
Reviewed-by: Simon Zünd <szuend@chromium.org>

Author: OrKoN

front_end/ui/components/docs/BUILD.gn

@@ -54,7 +54,6 @@ group("docs") {
     "./style_property_editor",
     "./survey_link",
     "./switch",
-    "./text_editor",
     "./text_prompt",
     "./theme_colors",
     "./tooltip",

front_end/ui/components/docs/text_editor/BUILD.gn

@@ -45,7 +45,7 @@ devtools_entrypoint("bundle") {
   ]
 
   visibility = [
-    "../../../../test/interactions/text_editor/*",
+    "../../../../test/e2e_non_hosted/*",
     "../../legacy/components/*",
   ]
   visibility += default_components_visibility

front_end/ui/components/docs/text_editor/basic.html

@@ -18,6 +18,7 @@ node_ts_library("tests") {
     "assertion",
     "elements",
     "performance",
+    "sources",
     "targets",
     "webaudio",
   ]

front_end/ui/components/docs/text_editor/basic.ts

@@ -6,6 +6,7 @@ import type * as puppeteer from 'puppeteer-core';
 
 import {AsyncScope} from '../../conductor/async-scope.js';
 import {installPageErrorHandlers} from '../../conductor/events.js';
+import {platform} from '../../conductor/platform.js';
 import {TestConfig} from '../../conductor/test_config.js';
 
 import {PageWrapper} from './page-wrapper.js';
@@ -202,6 +203,47 @@ export class DevToolsPage extends PageWrapper {
     return new Promise<void>(resolve => setTimeout(resolve, duration));
   }
 
+  async typeText(text: string) {
+    await this.page.keyboard.type(text);
+    await this.drainFrontendTaskQueue();
+  }
+
+  async pressKey(key: puppeteer.KeyInput, modifiers?: {control?: boolean, alt?: boolean, shift?: boolean}) {
+    if (modifiers) {
+      if (modifiers.control) {
+        if (platform === 'mac') {
+          // Use command key on mac
+          await this.page.keyboard.down('Meta');
+        } else {
+          await this.page.keyboard.down('Control');
+        }
+      }
+      if (modifiers.alt) {
+        await this.page.keyboard.down('Alt');
+      }
+      if (modifiers.shift) {
+        await this.page.keyboard.down('Shift');
+      }
+    }
+    await this.page.keyboard.press(key);
+    if (modifiers) {
+      if (modifiers.shift) {
+        await this.page.keyboard.up('Shift');
+      }
+      if (modifiers.alt) {
+        await this.page.keyboard.up('Alt');
+      }
+      if (modifiers.control) {
+        if (platform === 'mac') {
+          // Use command key on mac
+          await this.page.keyboard.up('Meta');
+        } else {
+          await this.page.keyboard.up('Control');
+        }
+      }
+    }
+  }
+
   async click(selector: string, options?: ClickOptions) {
     return await this.performActionOnSelector(
         selector,

front_end/ui/components/text_editor/BUILD.gn

@@ -1,16 +1,15 @@
-# Copyright 2020 The Chromium Authors. All rights reserved.
+# Copyright 2024 The Chromium Authors. All rights reserved.
 # Use of this source code is governed by a BSD-style license that can be
 # found in the LICENSE file.
 
 import("../../../scripts/build/typescript/typescript.gni")
 
-node_ts_library("text_editor") {
-  sources = [ "text_editor_test.ts" ]
+ts_e2e_library("sources") {
+  sources = [ "text-editor_test.ts" ]
 
   deps = [
     "../../../front_end/ui/components/text_editor:bundle",
     "../../e2e/helpers",
-    "../../shared",
-    "../helpers",
+    "../shared",
   ]
 }

test/e2e_non_hosted/BUILD.gn

@@ -0,0 +1,86 @@
+// Copyright 2020 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import {assert} from 'chai';
+import type {ElementHandle} from 'puppeteer-core';
+
+import type * as TextEditor from '../../../front_end/ui/components/text_editor/text_editor.js';
+import type {DevToolsPage} from '../shared/frontend-helper.js';
+
+describe('text editor', () => {
+  async function getEditorContent(textEditor: ElementHandle<TextEditor.TextEditor.TextEditor>): Promise<string> {
+    return await textEditor.evaluate(node => node.state.doc.toString());
+  }
+
+  async function getEditorSelection(textEditor: ElementHandle<TextEditor.TextEditor.TextEditor>):
+      Promise<{anchor: number, head: number}> {
+    return JSON.parse(await textEditor.evaluate(node => {
+      const {anchor, head} = node.state.selection.main;
+      return JSON.stringify({anchor, head});
+    }));
+  }
+
+  async function openSnippet(devToolsPage: DevToolsPage) {
+    await devToolsPage.click('aria/Sources');
+    const sources = await devToolsPage.waitForAria('Sources panel');
+    await devToolsPage.click('aria/More tabs', {root: sources});
+    await devToolsPage.click('aria/Snippets');
+    await devToolsPage.click('aria/New snippet');
+  }
+
+  it('can insert and delete some text', async ({devToolsPage}) => {
+    await openSnippet(devToolsPage);
+
+    const textEditor = await devToolsPage.waitFor('devtools-text-editor');
+
+    await devToolsPage.click('.cm-content', {root: textEditor});
+    await devToolsPage.typeText('Some text here');
+
+    assert.strictEqual(await getEditorContent(textEditor), 'Some text here');
+
+    await devToolsPage.pressKey('Backspace');
+    await devToolsPage.pressKey('Backspace');
+
+    assert.strictEqual(await getEditorContent(textEditor), 'Some text he');
+
+    await devToolsPage.pressKey('S', {
+      control: true,
+    });
+  });
+
+  it('binds the expected keys', async ({devToolsPage}) => {
+    await openSnippet(devToolsPage);
+
+    const textEditor = await devToolsPage.waitFor('devtools-text-editor');
+
+    await devToolsPage.click('.cm-content', {root: textEditor});
+    await devToolsPage.typeText('one two');
+    const ctrlOrAlt = process.platform === 'darwin' ? {alt: true} : {control: true};
+
+    await devToolsPage.pressKey('ArrowLeft');
+    assert.strictEqual((await getEditorSelection(textEditor)).head, 6);
+    await devToolsPage.pressKey('ArrowLeft', ctrlOrAlt);
+    assert.strictEqual((await getEditorSelection(textEditor)).head, 4);
+    await devToolsPage.pressKey('Home');
+    assert.strictEqual((await getEditorSelection(textEditor)).head, 0);
+
+    await devToolsPage.pressKey('ArrowRight');
+    assert.strictEqual((await getEditorSelection(textEditor)).head, 1);
+    await devToolsPage.pressKey('ArrowRight', ctrlOrAlt);
+    assert.strictEqual((await getEditorSelection(textEditor)).head, 3);
+    await devToolsPage.pressKey('End', {control: true});
+    assert.strictEqual((await getEditorSelection(textEditor)).head, 7);
+
+    await devToolsPage.typeText(' three');
+    assert.strictEqual(await getEditorContent(textEditor), 'one two three');
+    await devToolsPage.pressKey('Z', {control: true});
+    assert.strictEqual(await getEditorContent(textEditor), 'one two');
+    await devToolsPage.pressKey('Z', {control: true});
+    assert.strictEqual(await getEditorContent(textEditor), '');
+
+    await devToolsPage.pressKey('S', {
+      control: true,
+    });
+  });
+});

test/e2e_non_hosted/shared/frontend-helper.ts

@@ -17,7 +17,6 @@ node_ts_library("tests") {
     "helpers",
     "panels/explain",
     "panels/performance/timeline",
-    "text_editor",
     "tree_outline",
     "ui/components",
   ]

test/interactions/text_editor/BUILD.gn renamed to test/e2e_non_hosted/sources/BUILD.gn

@@ -24,7 +24,7 @@ const options = commandLineArgs(yargs(process.argv.slice(2)))
                     .options('skip-ninja', {type: 'boolean', desc: 'Skip rebuilding'})
                     .options('debug-driver', {type: 'boolean', hidden: true, desc: 'Debug the driver part of tests'})
                     .options('verbose', {alias: 'v', type: 'count', desc: 'Increases the log level'})
-                    .options('bail', {alias: 'b', desc: ' bail after first test failure'})
+                    .options('bail', {type: 'boolean', alias: 'b', desc: ' bail after first test failure'})
                     .options('auto-watch', {
                       desc: 'watch changes to files and run tests automatically on file change (only for unit tests)'
                     })

test/e2e_non_hosted/sources/text-editor_test.ts

@@ -111,47 +111,14 @@ export const doubleClick =
 };
 
 export const typeText = async (text: string) => {
-  const {frontend} = getBrowserAndPages();
-  await frontend.keyboard.type(text);
-  await drainFrontendTaskQueue();
+  const {devToolsPage} = getBrowserAndPagesWrappers();
+  await devToolsPage.typeText(text);
 };
 
 export const pressKey =
     async (key: puppeteer.KeyInput, modifiers?: {control?: boolean, alt?: boolean, shift?: boolean}) => {
-  const {frontend} = getBrowserAndPages();
-  if (modifiers) {
-    if (modifiers.control) {
-      if (platform === 'mac') {
-        // Use command key on mac
-        await frontend.keyboard.down('Meta');
-      } else {
-        await frontend.keyboard.down('Control');
-      }
-    }
-    if (modifiers.alt) {
-      await frontend.keyboard.down('Alt');
-    }
-    if (modifiers.shift) {
-      await frontend.keyboard.down('Shift');
-    }
-  }
-  await frontend.keyboard.press(key);
-  if (modifiers) {
-    if (modifiers.shift) {
-      await frontend.keyboard.up('Shift');
-    }
-    if (modifiers.alt) {
-      await frontend.keyboard.up('Alt');
-    }
-    if (modifiers.control) {
-      if (platform === 'mac') {
-        // Use command key on mac
-        await frontend.keyboard.up('Meta');
-      } else {
-        await frontend.keyboard.up('Control');
-      }
-    }
-  }
+  const {devToolsPage} = getBrowserAndPagesWrappers();
+  await devToolsPage.pressKey(key, modifiers);
 };
 
 export const pasteText = async (text: string) => {