chore: enable watch mode for puppeteer tests

e2e/helpers.ts

@@ -24,4 +24,4 @@ export const textContent = async (selector: string) => page.$eval(selector, e =>
 /**
  * Retrieve the outerHTML from the editor
  */
-export const outerHTML = async (selector: string) => page.$eval(selector, e => e.outerHTML);
+export const outerHtml = async (selector: string) => page.$eval(selector, e => e.outerHTML);

jest-puppeteer.config.js

@@ -7,6 +7,7 @@ module.exports = {
   launch: {
     dumpio: debug,
     headless: !debug,
+    timeout: 120000,
   },
   browser,
 };

package.json

@@ -61,7 +61,7 @@
     "test:puppeteer": "jest --verbose --config e2e/jest.config.js",
     "test:puppeteer:debug": "cross-env PUPPETEER_DEBUG=true run-s test:puppeteer",
     "test:puppeteer:firefox": "cross-env PUPPETEER_BROWSER=firefox run-s test:puppeteer",
-    "test:puppeteer:storybook": "cross-env STORYBOOK_ONLY=true run-s test:puppeteer",
+    "test:puppeteer:storybook": "cross-env PUPPETEER_SERVERS=storybook run-s test:puppeteer",
     "test:watch": "jest  --watch --verbose=false --coverage=false",
     "typecheck": "run-s typecheck:*",
     "typecheck:e2e": "tsc -p ./e2e/tsconfig.json --noEmit",
@@ -135,7 +135,6 @@
     "jest-cli": "24.8.0",
     "jest-dev-server": "^4.2.0",
     "jest-dom": "3.5.0",
-    "jest-each": "^24.8.0",
     "jest-emotion": "10.0.11",
     "jest-environment-enzyme": "^7.0.2",
     "jest-environment-puppeteer": "^4.2.0",
@@ -173,6 +172,7 @@
     "rollup-plugin-replace": "2.2.0",
     "rollup-plugin-size-snapshot": "0.9.0",
     "rollup-plugin-terser": "5.0.0",
+    "signal-exit": "^3.0.2",
     "start-server-and-test": "1.9.1",
     "tslint": "5.17.0",
     "typescript": "3.5.1",

support/jest/jest.puppeteer.setup.ts

@@ -1,35 +1,6 @@
 import { Config } from '@jest/types';
-import { JestDevServerOptions, setup as setupDevServer } from 'jest-dev-server';
-
-const { setup: setupPuppeteer } = require('jest-environment-puppeteer');
-const { STORYBOOK_ONLY } = process.env;
+import { startServer } from './puppeteer';
 
 export default async function globalSetup(globalConfig: Config.GlobalConfig) {
-  const servers: JestDevServerOptions[] = [
-    {
-      command: 'yarn storybook:ci',
-      port: 3002,
-      usedPortAction: 'kill',
-      launchTimeout: 60000,
-    },
-  ];
-  if (!STORYBOOK_ONLY) {
-    servers.push(
-      {
-        command: 'yarn next:ci',
-        port: 3001,
-        usedPortAction: 'kill',
-        launchTimeout: 60000,
-      },
-      {
-        command: 'yarn dev:docs',
-        port: 3000,
-        usedPortAction: 'kill',
-        launchTimeout: 60000,
-      },
-    );
-  }
-  await setupDevServer(servers);
-
-  await setupPuppeteer(globalConfig);
+  await startServer(globalConfig);
 }

support/jest/jest.puppeteer.teardown.ts

@@ -1,9 +1,6 @@
 import { Config } from '@jest/types';
-import { teardown as teardownDevServer } from 'jest-dev-server';
-
-const { teardown: teardownPuppeteer } = require('jest-environment-puppeteer');
+import { destroyServer } from './puppeteer';
 
 export default async function globalTeardown(globalConfig: Config.GlobalConfig) {
-  await teardownDevServer();
-  await teardownPuppeteer(globalConfig);
+  await destroyServer(globalConfig);
 }

support/jest/patches.d.ts

@@ -122,3 +122,52 @@ declare module 'jest-dev-server' {
 
   export class JestDevServerError extends Error {}
 }
+
+declare module 'signal-exit' {
+  namespace signalExit {
+    interface Options {
+      /**
+       * Whether the listener should run after the exit.
+       */
+      alwaysLast?: boolean;
+    }
+
+    function load(): void;
+    function unload(): void;
+
+    /**
+     * A function which returns the possible signals for this platform
+     *
+     * @remarks
+     * This is not the set of all possible signals.
+     * It IS, however, the set of all signals that trigger
+     * an exit on either Linux or BSD systems.  Linux is a
+     * superset of the signal names supported on BSD, and
+     * the unknown signals just fail to register, so we can
+     * catch that easily enough.
+     * Don't bother with SIGKILL.  It's uncatchable, which
+     * means that we can't fire any callbacks anyway.
+     * If a user does happen to register a handler on a non-
+     * fatal signal like SIGWINCH or something, and then
+     * exit, it'll end up firing `process.emit('exit')`, so
+     * the handler will be fired anyway.
+     * SIGBUS, SIGFPE, SIGSEGV and SIGILL, when not raised
+     * artificially, inherently leave the process in a
+     * state from which it is not safe to try and enter JS
+     * listeners.
+     */
+    function signals(): string[];
+
+    /**
+     * The exit
+     * @params code - the exitCode number or null if artifically induced
+     * @params signal - the string signal which triggered the exit or null when artificially triggered
+     */
+    type ExitListener = (code: number | null, signal: string | null) => void;
+  }
+
+  declare function signalExit(listener: ExitListener, options?: signalExit.Options);
+
+  export = signalExit;
+  export as namespace signalExit;
+}

support/jest/puppeteer.ts

@@ -0,0 +1,63 @@
+import { Config } from '@jest/types';
+import { JestDevServerOptions, setup, teardown } from 'jest-dev-server';
+import onExit from 'signal-exit';
+
+const { teardown: teardownPuppeteer } = require('jest-environment-puppeteer');
+
+const { setup: setupPuppeteer } = require('jest-environment-puppeteer');
+const { PUPPETEER_SERVERS } = process.env;
+
+type Server = 'next' | 'storybook' | 'docz';
+
+const servers: Server[] = (PUPPETEER_SERVERS
+  ? PUPPETEER_SERVERS.split(',')
+  : ['next', 'storybook', 'docz']) as any;
+
+const serverConfig: Record<Server, JestDevServerOptions> = {
+  storybook: {
+    command: 'yarn storybook:ci',
+    port: 3002,
+    usedPortAction: 'kill',
+    launchTimeout: 60000,
+  },
+  next: {
+    command: 'yarn next:ci',
+    port: 3001,
+    usedPortAction: 'kill',
+    launchTimeout: 60000,
+  },
+  docz: {
+    command: 'yarn dev:docs',
+    port: 3000,
+    usedPortAction: 'kill',
+    launchTimeout: 60000,
+  },
+};
+
+let serverSetupPromise: Promise<void> | undefined;
+
+export async function setupServer(globalConfig: Config.GlobalConfig) {
+  await setup(servers.map(server => serverConfig[server]));
+
+  onExit(() =>
+    Promise.all([teardown(), teardownPuppeteer()]).then(() => {
+      process.exit();
+    }),
+  );
+
+  await setupPuppeteer(globalConfig);
+}
+
+export async function startServer(globalConfig: Config.GlobalConfig) {
+  if (serverSetupPromise) {
+    return serverSetupPromise;
+  } else {
+    serverSetupPromise = setupServer(globalConfig);
+    return serverSetupPromise;
+  }
+}
+export async function destroyServer(globalConfig: Config.GlobalConfig) {
+  serverSetupPromise = undefined;
+  await teardown();
+  await teardownPuppeteer(globalConfig);
+}