feat: provide launch and startServer functions as single source of truth for creating new browser/server instance within monorepo (microsoft#26375)

* feat(scripts-pupeteer): provide launch function as single source of truth for creating new browser instance

* chore: bump puppeteer to v17

* refactor(scripts): make startServer generic and used everywhere

Author: Hotell

apps/ssr-tests-v9/package.json

@@ -25,6 +25,7 @@
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
     "@fluentui/scripts-tasks": "*",
-    "@fluentui/scripts-storybook": "*"
+    "@fluentui/scripts-storybook": "*",
+    "@fluentui/scripts-puppeteer": "*"
   }
 }

apps/ssr-tests-v9/src/test.ts

@@ -15,18 +15,18 @@ async function test(): Promise<void> {
   const startTime = process.hrtime();
   console.log('Starting a browser...');
 
+  const htmlPath = path.resolve(__dirname, '..', 'dist', 'index.html');
+
+  if (!fs.existsSync(htmlPath)) {
+    throw new Error('"dist/index.html" does not exist, please run "yarn build" first');
+  }
+
   let browser: Browser | undefined;
 
   try {
     browser = await launchBrowser();
     console.log('Using', await browser.version());
 
-    const htmlPath = path.resolve(__dirname, '..', 'dist', 'index.html');
-
-    if (!fs.existsSync(htmlPath)) {
-      throw new Error('"dist/index.html" does not exist, please run "yarn build" first');
-    }
-
     const url = `file://${htmlPath}`;
     console.log(`Using "${url}"`);
 

apps/ssr-tests-v9/src/utils/launchBrowser.ts

@@ -1,23 +1 @@
-import { Browser, launch } from 'puppeteer';
-
-export async function launchBrowser(): Promise<Browser> {
-  let browser;
-  let attempt = 1;
-
-  while (!browser) {
-    try {
-      browser = await launch();
-    } catch (err) {
-      if (attempt === 5) {
-        console.error(`Failed to launch a browser after 5 attempts...`);
-        throw err;
-      }
-
-      console.warn('A browser failed to start, retrying...');
-      console.warn(err);
-      attempt++;
-    }
-  }
-
-  return browser;
-}
+export { launch as launchBrowser } from '@fluentui/scripts-puppeteer';

apps/ssr-tests-v9/src/utils/visitPage.test.ts

@@ -1,31 +1,11 @@
-import type { Browser, Page } from 'puppeteer';
+import type { Browser } from 'puppeteer';
+import { visitUrl } from '@fluentui/scripts-puppeteer';
 import { PROVIDER_ID } from './constants';
 
 class RenderError extends Error {
   public name = 'RangeError';
 }
 
-export async function visitUrl(page: Page, url: string) {
-  let attempt = 1;
-
-  while (attempt <= 5) {
-    try {
-      await page.goto(url, { timeout: 10 * 1000 /* 10 seconds */ });
-      break;
-    } catch (err) {
-      if (attempt === 5) {
-        console.error(`Failed to navigate to a page after 5 attempts...`);
-        throw err;
-      }
-
-      console.warn('A browser failed to navigate to a page, retrying...');
-      console.warn(err);
-
-      attempt++;
-    }
-  }
-}
-
 export async function visitPage(browser: Browser, url: string) {
   const page = await browser.newPage();
   await page.setRequestInterception(true);

apps/ssr-tests-v9/src/utils/visitPage.ts

@@ -291,7 +291,7 @@
     "pretty-bytes": "5.6.0",
     "progress": "2.0.3",
     "prompts": "2.4.2",
-    "puppeteer": "14.4.0",
+    "puppeteer": "17.1.3",
     "raw-loader": "4.0.2",
     "react": "17.0.2",
     "react-app-polyfill": "2.0.0",

package.json

@@ -15,6 +15,7 @@
     "@fluentui/scripts-utils": "*",
     "@fluentui/scripts-prettier": "*",
     "@fluentui/scripts-puppeteer": "*",
-    "@fluentui/scripts-babel": "*"
+    "@fluentui/scripts-babel": "*",
+    "@fluentui/scripts-projects-test": "*"
   }
 }

scripts/gulp/package.json

@@ -1,9 +1,8 @@
 import { spawn, spawnSync } from 'child_process';
-import CDP from 'chrome-remote-interface';
-import puppeteer from 'puppeteer';
 import * as net from 'net';
 
-import { safeLaunchOptions } from '@fluentui/scripts-puppeteer';
+import { launch } from '@fluentui/scripts-puppeteer';
+import CDP from 'chrome-remote-interface';
 
 export type Page = {
   executeJavaScript: <R>(code: string) => Promise<R>;
@@ -17,39 +16,24 @@ export type Browser = {
 };
 
 export async function createChrome(): Promise<Browser> {
-  const options = safeLaunchOptions();
-  let browser: puppeteer.Browser | undefined;
-  let attempt = 1;
-  while (!browser) {
-    try {
-      browser = await puppeteer.launch(options);
-    } catch (err) {
-      if (attempt === 5) {
-        console.error(`Puppeteer failed to launch after 5 attempts`);
-        throw err;
-      }
-      console.warn('Puppeteer failed to launch (will retry):');
-      console.warn(err);
-      attempt++;
-    }
-  }
+  const browser = await launch();
 
   console.log(`Chromium version: ${await browser.version()}`);
 
   return {
     openPage: async url => {
-      const page = await (browser as puppeteer.Browser).newPage();
+      const page = await browser.newPage();
 
       await page.goto(url);
 
       return {
         executeJavaScript: async code => {
           return page.evaluate(code);
         },
-        close: async () => page.close(),
+        close: () => page.close(),
       };
     },
-    close: async () => (browser as puppeteer.Browser).close(),
+    close: () => browser.close(),
   };
 }
 
@@ -137,9 +121,6 @@ export async function createElectron(electronPath: string): Promise<Browser> {
         },
       };
     },
-
-    // FIXME: this async is not necessary
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    close: async () => {},
+    close: () => Promise.resolve(),
   };
 }

scripts/gulp/src/tasks/browserAdapters.ts

@@ -1,44 +1,27 @@
-import express from 'express';
+import type { Server } from 'http';
 
+import { closeServer, startServer } from '@fluentui/scripts-projects-test';
 import historyApiFallback from 'connect-history-api-fallback';
-import { Server } from 'http';
-import { colors, log } from 'gulp-util';
+import type { Express } from 'express';
 
-type Express = ReturnType<typeof express>;
-
-export const serve = (
+export const serve = async (
   directoryPath: string,
   host: string,
   port: number,
-  configureMiddleware: (express: Express) => Express = app => app,
+  configureMiddleware = (app: Express) => app,
 ): Promise<Server> => {
-  return new Promise((resolve, reject) => {
-    try {
-      const server = configureMiddleware(
-        express().use(
-          historyApiFallback({
-            verbose: false,
-          }),
-        ),
-      )
-        .use(express.static(directoryPath))
-        .listen(port, host, () => {
-          log(colors.yellow(`Server running at http://${host}:${port}`));
-          resolve(server);
-        });
-    } catch (err) {
-      reject(err);
-    }
-  });
-};
+  const middleware = (app: Express) => {
+    return configureMiddleware(
+      app.use(
+        historyApiFallback({
+          verbose: false,
+        }),
+      ),
+    );
+  };
 
-export const forceClose = (server: Server): Promise<void> => {
-  if (!server) {
-    return Promise.resolve();
-  }
-
-  return new Promise((resolve, reject) => {
-    server.keepAliveTimeout = 1000;
-    server.close(err => (err ? reject(err) : resolve()));
-  });
+  const { server } = await startServer({ root: directoryPath, host, port }, middleware);
+  return server;
 };
+
+export const forceClose = closeServer;

scripts/gulp/src/tasks/serve.ts

@@ -1,4 +1,5 @@
-export * from './createReactApp';
-export * from './packPackages';
-export * from './performBrowserTest';
-export * from './utils';
+export { prepareCreateReactApp } from './createReactApp';
+export { addResolutionPathsForProjectPackages, packProjectPackages } from './packPackages';
+export { performBrowserTest, startServer, closeServer } from './performBrowserTest';
+export { createTempDir, generateFiles, log, prepareTempDirs, shEcho, workspaceRoot } from './utils';
+export type { TempPaths } from './utils';