[e2e] Dedupe types

Also improves some names, comments and IDE error fixes.

Bug: none
Change-Id: I7bad9d6f85555a9e17d140c2987e8ee06090ec95
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6366899
Reviewed-by: Simon Zünd <[email protected]>
Commit-Queue: Nikolay Vitkov <[email protected]>
Auto-Submit: Nikolay Vitkov <[email protected]>

Author: Lightning00Blade

test/e2e/helpers/console-helpers.ts

@@ -5,7 +5,7 @@
 import {assert} from 'chai';
 
 import {AsyncScope} from '../../conductor/async-scope.js';
-import type {DevToolsFronendPage} from '../../e2e_non_hosted/shared/frontend-helper.js';
+import type {DevToolsPage} from '../../e2e_non_hosted/shared/frontend-helper.js';
 import {
   $,
   $$,
@@ -189,7 +189,7 @@ export async function maybeGetCurrentConsoleMessages(withAnchor = false, callbac
   return result;
 }
 
-export async function getStructuredConsoleMessages(devToolsPage?: DevToolsFronendPage) {
+export async function getStructuredConsoleMessages(devToolsPage?: DevToolsPage) {
   devToolsPage = devToolsPage || getBrowserAndPagesWrappers().devToolsPage;
   const asyncScope = new AsyncScope();
 
@@ -307,7 +307,7 @@ export async function unifyLogVM(actualLog: string, expectedLog: string) {
   return expectedLogArray.join('\n');
 }
 
-export async function navigateToConsoleTab(devToolsPage?: DevToolsFronendPage) {
+export async function navigateToConsoleTab(devToolsPage?: DevToolsPage) {
   devToolsPage = devToolsPage || getBrowserAndPagesWrappers().devToolsPage;
   // Locate the button for switching to the console tab.
   if ((await devToolsPage.$$(CONSOLE_VIEW_SELECTOR)).length) {
@@ -462,7 +462,7 @@ function veImpressionForConsoleMessageContextMenu(expectedItem: string) {
   return veImpression('Menu', undefined, [...menuItems].map(i => veImpression('Action', i)));
 }
 
-async function veRoot(devToolsPage?: DevToolsFronendPage): Promise<string> {
+async function veRoot(devToolsPage?: DevToolsPage): Promise<string> {
   devToolsPage = devToolsPage || getBrowserAndPagesWrappers().devToolsPage;
   return (await devToolsPage.$$(CONSOLE_VIEW_IN_DRAWER_SELECTOR)).length ? 'Drawer > Panel: console' : 'Panel: console';
 }

test/e2e/helpers/settings-helpers.ts

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import type {DevToolsFronendPage} from '../../e2e_non_hosted/shared/frontend-helper.js';
+import type {DevToolsPage} from '../../e2e_non_hosted/shared/frontend-helper.js';
 import {
   click,
   clickElement,
@@ -12,7 +12,7 @@ import {
 } from '../../shared/helper.js';
 import {getBrowserAndPagesWrappers} from '../../shared/non_hosted_wrappers.js';
 
-export async function openPanelViaMoreTools(panelTitle: string, frontend?: DevToolsFronendPage) {
+export async function openPanelViaMoreTools(panelTitle: string, frontend?: DevToolsPage) {
   frontend = frontend || getBrowserAndPagesWrappers().devToolsPage;
   await frontend.bringToFront();
 

test/e2e/helpers/visual-logging-helpers.ts

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 
 import {getBrowserAndPages} from '../../conductor/puppeteer-state.js';
-import type {DevToolsFronendPage} from '../../e2e_non_hosted/shared/frontend-helper.js';
+import type {DevToolsPage} from '../../e2e_non_hosted/shared/frontend-helper.js';
 import {getBrowserAndPagesWrappers} from '../../shared/non_hosted_wrappers.js';
 
 // Corresponds to the type in front_end/ui/visual_logging/Debugging.ts
@@ -156,8 +156,7 @@ export async function dumpVeEvents(label: string) {
 
 // Verifies that VE events contains all the expected events in given order.
 // Unexpected VE events are ignored.
-export async function expectVeEvents(
-    expectedEvents: TestLogEntry[], root?: string, devToolsPage?: DevToolsFronendPage) {
+export async function expectVeEvents(expectedEvents: TestLogEntry[], root?: string, devToolsPage?: DevToolsPage) {
   collapseConsecutiveImpressions(expectedEvents);
   prependRoot(expectedEvents, root);
   devToolsPage = devToolsPage || getBrowserAndPagesWrappers().devToolsPage;

test/e2e_non_hosted/conductor/mocha-interface-helpers.ts

@@ -7,20 +7,8 @@ import type * as Mocha from 'mocha';
 import {AsyncScope} from '../../conductor/async-scope.js';
 import {ScreenshotError} from '../../conductor/screenshot-error.js';
 import {TestConfig} from '../../conductor/test_config.js';
-import type {BrowserWrapper} from '../shared/browser-helper.js';
-import type {DevToolsFronendPage} from '../shared/frontend-helper.js';
-import type {InspectedPage} from '../shared/target-helper.js';
 
-export interface State {
-  devToolsPage: DevToolsFronendPage;
-  inspectedPage: InspectedPage;
-  browser: BrowserWrapper;
-}
-
-/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-export type TestCallbackWithState = (this: Mocha.Context, state: State) => PromiseLike<any>;
-
-async function takeScreenshots(state: State): Promise<{target?: string, frontend?: string}> {
+async function takeScreenshots(state: E2E.State): Promise<{target?: string, frontend?: string}> {
   try {
     const {devToolsPage, inspectedPage} = state;
     const targetScreenshot = await inspectedPage.screenshot();
@@ -42,7 +30,7 @@ async function createScreenshotError(test: Mocha.Runnable|undefined, error: Erro
   if (!TestConfig.debug) {
     try {
       const screenshotTimeout = 5_000;
-      let timer: NodeJS.Timeout;
+      let timer: ReturnType<typeof setTimeout>;
       const {target, frontend} = await Promise.race([
         takeScreenshots(sate).then(result => {
           clearTimeout(timer);

test/e2e_non_hosted/conductor/mocha-interface.ts

@@ -11,7 +11,7 @@ import * as Path from 'path';
 import {platform, type Platform} from '../../conductor/platform.js';
 import {TestConfig} from '../../conductor/test_config.js';
 
-import {makeInstrumentedTestFunction, type TestCallbackWithState} from './mocha-interface-helpers.js';
+import {makeInstrumentedTestFunction} from './mocha-interface-helpers.js';
 import {StateProvider} from './state-provider.js';
 
 type SuiteFunction = ((this: Mocha.Suite) => void)|undefined;
@@ -106,7 +106,7 @@ function iterationSuffix(iteration: number): string {
   return ` (#${iteration})`;
 }
 function customIt(testImplementation: TestFunctions, suite: Mocha.Suite, file: string) {
-  function instrumentWithState(fn: TestCallbackWithState) {
+  function instrumentWithState(fn: E2E.TestAsyncCallbackWithState) {
     const fnWithState = async function(this: Mocha.Context) {
       return await StateProvider.instance.callWithState(this, suite, fn);
     };

test/e2e_non_hosted/conductor/state-provider.ts

@@ -13,8 +13,6 @@ import {type BrowserWrapper, DEFAULT_BROWSER_SETTINGS, Launcher} from '../shared
 import {DEFAULT_DEVTOOLS_SETTINGS, setupDevToolsPage} from '../shared/frontend-helper.js';
 import {setupInspectedPage} from '../shared/target-helper.js';
 
-import type {TestCallbackWithState} from './mocha-interface-helpers.js';
-
 const DEFAULT_SETTINGS = {
   ...DEFAULT_BROWSER_SETTINGS,
   ...DEFAULT_DEVTOOLS_SETTINGS
@@ -23,23 +21,21 @@ const DEFAULT_SETTINGS = {
 export class StateProvider {
   static instance = new StateProvider();
 
-  settingsCallbackMap: Map<Mocha.Suite, E2E.SuiteSettings>;
-  browserMap: Map<string, BrowserWrapper>;
+  #settingsCallbackMap = new Map<Mocha.Suite, E2E.SuiteSettings>();
+  #browserMap = new Map<string, BrowserWrapper>();
   static serverPort: number;
 
   private constructor() {
-    this.settingsCallbackMap = new Map();
-    this.browserMap = new Map();
   }
 
   registerSettingsCallback(suite: Mocha.Suite, suiteSettings: E2E.SuiteSettings) {
-    this.settingsCallbackMap.set(suite, suiteSettings);
+    this.#settingsCallbackMap.set(suite, suiteSettings);
   }
 
-  async callWithState(context: Mocha.Context, suite: Mocha.Suite, testFn: TestCallbackWithState) {
-    const {state, browsingContext} = await this.getState(suite);
+  async callWithState(context: Mocha.Context, suite: Mocha.Suite, testFn: E2E.TestAsyncCallbackWithState) {
+    const {state, browsingContext} = await this.#getState(suite);
     try {
-      /* eslint-disable-next-line no-debugger */
+      // eslint-disable-next-line no-debugger
       debugger;  // If you're paused here while debugging, stepping into the next line will step into your test.
       return await testFn.call(context, state);
     } finally {
@@ -50,26 +46,26 @@ export class StateProvider {
 
   async resolveBrowser(suite: Mocha.Suite) {
     if (!StateProvider.serverPort) {
-      StateProvider.serverPort = await StateProvider.globalSetup();
+      StateProvider.serverPort = await StateProvider.#globalSetup();
     }
-    const settings = await this.getSettings(suite);
+    const settings = await this.#getSettings(suite);
     const browserSettings = {
       enabledBlinkFeatures: (settings.enabledBlinkFeatures ?? []).toSorted(),
       disabledFeatures: (settings.disabledFeatures ?? []).toSorted(),
     };
     const browserKey = JSON.stringify(browserSettings);
-    let browser = this.browserMap.get(browserKey);
+    let browser = this.#browserMap.get(browserKey);
     if (!browser) {
       browser = await Launcher.browserSetup(browserSettings);
-      this.browserMap.set(browserKey, browser);
+      this.#browserMap.set(browserKey, browser);
     }
     // Suite needs to be aware of the browser instance to be able to create the
     // full state for the tests
     suite.browser = browser;
   }
 
-  private async getState(suite: Mocha.Suite) {
-    const settings = await this.getSettings(suite);
+  async #getState(suite: Mocha.Suite) {
+    const settings = await this.#getSettings(suite);
     const browser = suite.browser;
     const browsingContext = await browser.createBrowserContext();
     const inspectedPage = await setupInspectedPage(browsingContext, StateProvider.serverPort);
@@ -85,17 +81,17 @@ export class StateProvider {
     return {state, browsingContext};
   }
 
-  private async getSettings(suite: Mocha.Suite): Promise<E2E.HarnessSettings> {
-    const settings = this.settingsCallbackMap.get(suite);
+  async #getSettings(suite: Mocha.Suite): Promise<E2E.HarnessSettings> {
+    const settings = this.#settingsCallbackMap.get(suite);
     if (settings) {
       return mergeSettings(settings, DEFAULT_SETTINGS);
     }
     return DEFAULT_SETTINGS;
   }
 
-  /* eslint-disable no-console */
-  private static async globalSetup() {
+  static async #globalSetup() {
     const serverPort = Number(await startServer(TestConfig.serverType, []));
+    // eslint-disable-next-line no-console
     console.log(`Started ${TestConfig.serverType} server on port ${serverPort}`);
     puppeteer.Puppeteer.registerCustomQueryHandler('pierceShadowText', {
       queryOne: querySelectorShadowTextOne as ((node: Node, selector: string) => Node | null),
@@ -105,7 +101,7 @@ export class StateProvider {
   }
 
   async closeBrowsers() {
-    await this.browserMap.forEach(async (browser: BrowserWrapper) => {
+    await this.#browserMap.forEach(async (browser: BrowserWrapper) => {
       await browser.browser.close();
     });
   }

test/e2e_non_hosted/shared/frontend-helper.ts

@@ -25,7 +25,7 @@ const envLatePromises = process.env['LATE_PROMISES'] !== undefined ?
 type DeducedElementType<ElementType extends Element|null, Selector extends string> =
     ElementType extends null ? puppeteer.NodeFor<Selector>: ElementType;
 
-export class DevToolsFronendPage extends PageWrapper {
+export class DevToolsPage extends PageWrapper {
   async setExperimentEnabled(experiment: string, enabled: boolean) {
     await this.evaluate(`(async () => {
       const Root = await import('./core/root/root.js');
@@ -62,7 +62,7 @@ export class DevToolsFronendPage extends PageWrapper {
     }
     /* eslint-disable-next-line no-console */
     console.log(`Throttling CPU: ${envThrottleRate}x slowdown`);
-    const client = await this.page.target().createCDPSession();
+    const client = await this.page.createCDPSession();
     await client.send('Emulation.setCPUThrottlingRate', {
       rate: envThrottleRate,
     });
@@ -104,7 +104,9 @@ export class DevToolsFronendPage extends PageWrapper {
     `);
   }
 
-  // Get a single element handle. Uses `pierce` handler per default for piercing Shadow DOM.
+  /**
+   * Get a single element handle. Uses `pierce` handler per default for piercing Shadow DOM.
+   */
   async $<ElementType extends Element|null = null, Selector extends string = string>(
       selector: Selector, root?: puppeteer.ElementHandle, handler = 'pierce') {
     const rootElement = root ? root : this.page;
@@ -184,11 +186,18 @@ export class DevToolsFronendPage extends PageWrapper {
 
   async click(selector: string, options?: ClickOptions) {
     return await this.performActionOnSelector(
-        selector, {root: options?.root}, element => element.click(options?.clickOptions));
+        selector,
+        {root: options?.root},
+        element => element.click(options?.clickOptions),
+    );
   }
 
   async hover(selector: string, options?: {root?: puppeteer.ElementHandle}) {
-    return await this.performActionOnSelector(selector, {root: options?.root}, element => element.hover());
+    return await this.performActionOnSelector(
+        selector,
+        {root: options?.root},
+        element => element.hover(),
+    );
   }
 
   waitForAria<ElementType extends Element = Element>(
@@ -206,7 +215,9 @@ export class DevToolsFronendPage extends PageWrapper {
     }, asyncScope), `Waiting for no elements to match selector '${selector}'`);
   }
 
-  // Get multiple element handles. Uses `pierce` handler per default for piercing Shadow DOM.
+  /**
+   * Get multiple element handles. Uses `pierce` handler per default for piercing Shadow DOM.
+   */
   async $$<ElementType extends Element|null = null, Selector extends string = string>(
       selector: Selector, root?: puppeteer.JSHandle, handler = 'pierce') {
     const rootElement = root ? root.asElement() || this.page : this.page;
@@ -237,7 +248,7 @@ export async function setupDevToolsPage(context: puppeteer.BrowserContext, setti
     throw new Error('Unable to find frontend target!');
   }
   installPageErrorHandlers(frontend);
-  const devToolsPage = new DevToolsFronendPage(frontend);
+  const devToolsPage = new DevToolsPage(frontend);
   await devToolsPage.ensureReadyForTesting();
   for (const key in settings.devToolsSettings) {
     await devToolsPage.setDevToolsSetting(key, settings.devToolsSettings[key]);

test/e2e_non_hosted/shared/page-wrapper.ts

@@ -9,17 +9,16 @@ export class PageWrapper {
   evaluate: puppeteer.Page['evaluate'];
   bringToFront: puppeteer.Page['bringToFront'];
 
-  constructor(p: puppeteer.Page) {
-    this.page = p;
-    this.evaluate = p.evaluate.bind(p);
-    this.bringToFront = p.bringToFront.bind(p);
+  constructor(page: puppeteer.Page) {
+    this.page = page;
+    this.evaluate = page.evaluate.bind(page);
+    this.bringToFront = page.bringToFront.bind(page);
   }
 
-  async screenshot() {
-    const opts = {
-      encoding: 'base64' as 'base64',
-    };
+  async screenshot(): Promise<string> {
     await this.bringToFront();
-    return await this.page.screenshot(opts);
+    return await this.page.screenshot({
+      encoding: 'base64',
+    });
   }
 }

test/e2e_non_hosted/types.d.ts

@@ -4,7 +4,7 @@
 import type {Platform} from '../conductor/platform.js';
 
 import type {BrowserSettings, BrowserWrapper} from './shared/browser-helper.js';
-import type {DevToolsFronendPage, DevtoolsSettings} from './shared/frontend-helper.js';
+import type {DevToolsPage, DevtoolsSettings} from './shared/frontend-helper.js';
 import type {InspectedPage} from './shared/target-helper.js';
 
 declare global {
@@ -34,7 +34,7 @@ declare global {
     export type SuiteSettings = Partial<HarnessSettings>;
 
     export interface State {
-      devToolsPage: DevToolsFronendPage;
+      devToolsPage: DevToolsPage;
       inspectedPage: InspectedPage;
       browser: BrowserWrapper;
     }

test/shared/non_hosted_wrappers.ts

@@ -5,13 +5,13 @@
 import {getBrowserAndPages} from '../conductor/puppeteer-state.js';
 import {getTestServerPort} from '../conductor/server_port.js';
 import {BrowserWrapper} from '../e2e_non_hosted/shared/browser-helper.js';
-import {DevToolsFronendPage} from '../e2e_non_hosted/shared/frontend-helper.js';
+import {DevToolsPage} from '../e2e_non_hosted/shared/frontend-helper.js';
 import {InspectedPage} from '../e2e_non_hosted/shared/target-helper.js';
 
 export function getBrowserAndPagesWrappers() {
   const {frontend, target, browser} = getBrowserAndPages();
   return {
-    devToolsPage: new DevToolsFronendPage(frontend),
+    devToolsPage: new DevToolsPage(frontend),
     inspectedPage: new InspectedPage(target, getTestServerPort()),
     browserWrapper: new BrowserWrapper(browser),
   };