fix!(testing): puppeteer v10 support (#2934)

- Update puppeteer to v10.0.0
  - Remove @types/puppeteer from root package.json file
- Update programmatic library checks
  - Remove @types/puppeteer
  - Make puppeteer@10 the recommended version
- Replace @types/puppeteer instances of PageCloseOptions
  - This interface was originally defined in v5.4.3 of the DefinitelyTyped type declaration file for Puppeteer https://github.com/DefinitelyTyped/DefinitelyTyped/blob/34edf5fb8fdf54f57ed6584f77f1611767af7f6b/types/puppeteer/index.d.ts#L1423
  - It has since been removed, and replace with an object literal of the
    same shape
https://github.com/puppeteer/puppeteer/blob/main/src/common/Page.ts#L2097
- Replace usages of NavigationOptions for WaitForOptions
  - WaitForOptions is structurally the same as @types/puppeteer's
    [NavigationOptions](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/34edf5fb8fdf54f57ed6584f77f1611767af7f6b/types/puppeteer/index.d.ts#L616)
and is used as a drop in replacement
  - The page#goTo method in Puppeteer's definition in both v5.4.3 and
    v10 allow an optional 'referer' string. Since it was omitted in the
    original implementation, I did not include it in this update
- Replace Response with HTTPResponse
- Update ElementHandle#press to use KeyInput instead of string
- Make typings of executionContext.evaluate explicit
- Migrate EmulateOptions
  - Puppeteer no longer exports a type of name EmulateOptions, in favor of
an object literal.

BREAKING CHANGE: Requires Puppeteer v10.0.0

Author: rwaskiewicz

package-lock.json

@@ -76,7 +76,7 @@
     "@types/pixelmatch": "^5.2.4",
     "@types/pngjs": "^3.4.2",
     "@types/prompts": "^2.0.9",
-    "@types/semver": "^7.3.12",
+    "@types/semver": "^7.3.4",
     "@types/sizzle": "^2.3.2",
     "@types/webpack": "^4.41.26",
     "@types/ws": "^7.4.0",

package.json

@@ -47,6 +47,41 @@ export const taskTest = async (config: ValidatedConfig): Promise<void> => {
   }
 
   try {
+    config.buildDocs = false;
+    const testingRunOpts: TestingRunOptions = {
+      e2e: !!config.flags.e2e,
+      screenshot: !!config.flags.screenshot,
+      spec: !!config.flags.spec,
+      updateScreenshot: !!config.flags.updateScreenshot,
+    };
+
+    // always ensure we have jest modules installed
+    const ensureModuleIds = ['@types/jest', 'jest', 'jest-cli'];
+
+    if (testingRunOpts.e2e) {
+      // if it's an e2e test, also make sure we're got
+      // puppeteer modules installed and if browserExecutablePath is provided don't download Chromium use only puppeteer-core instead
+      const puppeteer = config.testing.browserExecutablePath ? 'puppeteer-core' : 'puppeteer';
+
+      ensureModuleIds.push(puppeteer);
+
+      if (testingRunOpts.screenshot) {
+        // ensure we've got pixelmatch for screenshots
+        config.logger.warn(
+          config.logger.yellow(
+            `EXPERIMENTAL: screenshot visual diff testing is currently under heavy development and has not reached a stable status. However, any assistance testing would be appreciated.`,
+          ),
+        );
+      }
+    }
+
+    // ensure we've got the required modules installed
+    const diagnostics = await config.sys.lazyRequire.ensure(config.rootDir, ensureModuleIds);
+    if (diagnostics.length > 0) {
+      config.logger.printDiagnostics(diagnostics);
+      return config.sys.exit(1);
+    }
+
     // let's test!
     const { createTesting } = await import('@stencil/core/testing');
     const testing = await createTesting(config);

src/cli/task-test.ts

@@ -589,12 +589,14 @@ export function createNodeSys(c: { process?: any } = {}) {
   const nodeResolve = new NodeResolveModule();
 
   sys.lazyRequire = new NodeLazyRequire(nodeResolve, {
-    '@types/jest': { minVersion: '24.9.1', recommendedVersion: '27.0.3', maxVersion: '27.0.0' },
-    jest: { minVersion: '24.9.1', recommendedVersion: '27.0.3', maxVersion: '27.0.0' },
-    'jest-cli': { minVersion: '24.9.0', recommendedVersion: '27.4.5', maxVersion: '27.0.0' },
-    puppeteer: { minVersion: '1.19.0', recommendedVersion: '10.0.0' },
-    'puppeteer-core': { minVersion: '1.19.0', recommendedVersion: '5.2.1' },
-    'workbox-build': { minVersion: '4.3.1', recommendedVersion: '4.3.1' },
+    // [minimumVersion, recommendedVersion]
+    '@types/jest': ['24.9.1', '26.0.21'],
+    'jest': ['24.9.0', '26.6.3'],
+    'jest-cli': ['24.9.0', '26.6.3'],
+    'pixelmatch': ['4.0.2', '4.0.2'],
+    'puppeteer': ['1.19.0', '10.0.0'],
+    'puppeteer-core': ['1.19.0', '5.2.1'],
+    'workbox-build': ['4.3.1', '4.3.1'],
   });
 
   prcs.on('SIGINT', runInterruptsCallbacks);

src/sys/node/node-sys.ts

@@ -46,7 +46,7 @@ export async function startPuppeteerBrowser(config: ValidatedConfig) {
   if (config.testing.browserWSEndpoint) {
     browser = await puppeteer.connect({
       browserWSEndpoint: config.testing.browserWSEndpoint,
-      ...connectOpts,
+      ...connectOpts
     });
   } else {
     const launchOpts: puppeteer.BrowserLaunchArgumentOptions & puppeteer.LaunchOptions & puppeteer.ConnectOptions = {

src/testing/puppeteer/puppeteer-browser.ts

@@ -1,47 +1,19 @@
 import type { EventInitDict, EventSpy, ScreenshotDiff, ScreenshotOptions } from '@stencil/core/internal';
 import type {
   ClickOptions,
-  HTTPResponse as PuppeteerHTTPResponse,
+  HTTPResponse,
   Page,
   ScreenshotOptions as PuppeteerScreenshotOptions,
   WaitForOptions,
 } from 'puppeteer';
 
-/**
- * This type helps with declaration merging as a part of Stencil's migration from Puppeteer v5.4.3 to v10.0.0. In
- * v5.4.3, `HttpResponse` was an interface whereas v10.0.0 declares it as a class. It is redeclared here to help teams
- * migrate to a newer minor version of Stencil without requiring a Puppeteer upgrade/major version of Stencil. This type
- * should be removed as a part of the Stencil 3.0 release.
- */
-export type HTTPResponse = PuppeteerHTTPResponse;
-
-/**
- * These types help with declaration merging as a part of Stencil's migration from Puppeteer v5.4.3 to v10.0.0. In
- * v10.0.0, `WaitForOptions` is a renamed version of `NavigationOptions` from v5.4.3, who has had its type hierarchy
- * flattened.
- *
- * See {@link https://github.com/DefinitelyTyped/DefinitelyTyped/blob/8290e943f6b398acf39ee1b2e486824144e15bc8/types/puppeteer/index.d.ts#L605-L622}
- * for the v5.4.3 types.
- *
- * These types are redeclared here to help teams migrate to a newer minor version of Stencil without requiring a
- * Puppeteer upgrade/major version of Stencil. These type additions should be removed as a part of the Stencil 3.0
- * release.
- */
-declare module 'puppeteer' {
-  type LifeCycleEvent = 'load' | 'domcontentloaded' | 'networkidle0' | 'networkidle2';
-  interface WaitForOptions {
-    timeout?: number;
-    waitUntil?: LifeCycleEvent | LifeCycleEvent[];
-  }
-}
-
 /**
  * This type was once exported by Puppeteer, but has since moved to an object literal in (Puppeteer’s) native types.
  * Re-create it here as a named type to use across multiple Stencil-related testing files.
  */
 export type PageCloseOptions = {
   runBeforeUnload?: boolean;
-};
+}
 
 export interface NewE2EPageOptions extends WaitForOptions {
   url?: string;

src/testing/puppeteer/puppeteer-declarations.ts

@@ -18,10 +18,8 @@ export function setScreenshotEmulateData(userEmulateConfig: EmulateConfig, env:
     try {
       const deviceDescriptors = require(env.__STENCIL_PUPPETEER_MODULE__ + '/DeviceDescriptors');
 
-      const puppeteerEmulateOpts = deviceDescriptors[userEmulateConfig.device] as {
-        userAgent: string;
-        viewport: puppeteer.Viewport;
-      };
+      const puppeteerEmulateOpts =
+        deviceDescriptors[userEmulateConfig.device] as { userAgent: string,  viewport: puppeteer.Viewport };
       if (!puppeteerEmulateOpts) {
         console.error(`invalid emulate device: ${userEmulateConfig.device}`);
         return;

src/testing/puppeteer/puppeteer-emulate.ts

@@ -9,6 +9,14 @@ import type {
   PageCloseOptions,
   PageDiagnostic,
 } from './puppeteer-declarations';
+
+import type {
+  ConsoleMessage,
+  ConsoleMessageLocation,
+  JSHandle,
+  Page,
+  WaitForOptions,
+} from 'puppeteer';
 import { find, findAll } from './puppeteer-element';
 import { initPageEvents, waitForEvent } from './puppeteer-events';
 import { initPageScreenshot } from './puppeteer-screenshot';