Run DevTools e2e tests on Circle CI

Author: Brian Vaughn

.circleci/config.yml

@@ -200,6 +200,23 @@ jobs:
       - store_artifacts:
           path: ./build/devtools.tgz
 
+  run_devtools_e2e_tests:
+    docker: *docker
+    environment: *environment
+    steps:
+      - checkout
+      - attach_workspace:
+          at: .
+      - run: yarn workspaces info | head -n -1 > workspace_info.txt
+      - *restore_node_modules
+      - run:
+          name: Install Packages
+          command: yarn --frozen-lockfile --cache-folder ~/.cache/yarn
+      - run:
+          environment:
+            RELEASE_CHANNEL: experimental
+          command: ./scripts/circleci/run_devtools_e2e_tests.js
+
   yarn_lint_build:
     docker: *docker
     environment: *environment
@@ -452,6 +469,9 @@ workflows:
       - build_devtools_and_process_artifacts:
           requires:
             - yarn_build_combined
+      - run_devtools_e2e_tests:
+          requires:
+            - build_devtools_and_process_artifacts
 
   fuzz_tests:
     unless: << pipeline.parameters.prerelease_commit_sha >>

scripts/circleci/run_devtools_e2e_tests.js

@@ -0,0 +1,92 @@
+#!/usr/bin/env node
+
+'use strict';
+
+const {spawn} = require('child_process');
+const {join} = require('path');
+
+const ROOT_PATH = join(__dirname, '..', '..');
+
+let serverProcess = null;
+let testProcess = null;
+
+function runTestShell() {
+  const shellPackagePath = join(ROOT_PATH, 'packages', 'react-devtools-shell');
+
+  const timeoutID = setTimeout(() => {
+    // Assume the test shell server failed to start.
+    console.error('Testing shell server failed to start');
+    exitWithCode(1);
+  }, 30000);
+
+  console.log('Starting testing shell server');
+
+  serverProcess = spawn('yarn', ['start'], {cwd: shellPackagePath});
+  serverProcess.stdout.on('data', data => {
+    if (`${data}`.includes('Compiled successfully.')) {
+      console.log('Testing shell server running');
+
+      clearTimeout(timeoutID);
+
+      runEndToEndTests();
+    }
+  });
+  serverProcess.stderr.on('data', data => {
+    // Mostly non-fatal errors like Babel optimization warnings etc.
+    // But we do need to handle the case where the port is already in use.
+    console.error(`${data}`);
+    if (`${data}`.includes('EADDRINUSE')) {
+      console.log('Free up the port and re-run tests:');
+      console.log('  kill -9 $(lsof -ti:8080)');
+
+      exitWithCode(1);
+    }
+  });
+}
+
+async function runEndToEndTests() {
+  const inlinePackagePath = join(
+    ROOT_PATH,
+    'packages',
+    'react-devtools-inline'
+  );
+
+  console.log('Running e2e tests');
+
+  testProcess = spawn('yarn', ['test:e2e'], {cwd: inlinePackagePath});
+  testProcess.stdout.on('data', data => {
+    console.log(`${data}`);
+  });
+  testProcess.stderr.on('data', data => {
+    console.error(`${data}`);
+    exitWithCode(1);
+  });
+  testProcess.on('close', code => {
+    console.log(`Tests completed with code: ${code}`);
+    exitWithCode(code);
+  });
+}
+
+function exitWithCode(code) {
+  if (serverProcess !== null) {
+    try {
+      console.log('Shutting down shell server process');
+      serverProcess.kill();
+    } catch (error) {
+      console.error(error);
+    }
+  }
+
+  if (testProcess !== null) {
+    try {
+      console.log('Shutting down test process');
+      testProcess.kill();
+    } catch (error) {
+      console.error(error);
+    }
+  }
+
+  process.exit(code);
+}
+
+runTestShell();