ui: Test using Headless Chrome

Begin running Karma tests using headless chrome instead of JSDOM. This
should ensure that our tests are running in the closest possible
environment to an actual browser.

Adds Chrome as a dependency to our builder image.

Release note (admin ui change): Running unit tests for the Admin UI now depend
on the installation of Google Chrome.

build/builder.sh

@@ -3,7 +3,7 @@
 set -euo pipefail
 
 image=cockroachdb/builder
-version=20180405-182035
+version=20180502-092643
 
 function init() {
   docker build --tag="${image}" "$(dirname "${0}")/builder"

build/builder/Dockerfile

@@ -167,20 +167,24 @@ RUN curl -fsSL https://deb.nodesource.com/gpgkey/nodesource.gpg.key | apt-key ad
  && echo 'deb https://dl.yarnpkg.com/debian/ stable main' | tee /etc/apt/sources.list.d/yarn.list \
  && curl -fsSL https://packages.cloud.google.com/apt/doc/apt-key.gpg | apt-key add - \
  && echo 'deb https://packages.cloud.google.com/apt cloud-sdk-xenial main' | tee /etc/apt/sources.list.d/gcloud.list \
+ && curl -fsSL https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add - \
+ && echo "deb [arch=amd64] https://dl.google.com/linux/chrome/deb/ stable main" | tee /etc/apt/sources.list.d/google.list \
  && apt-get update
 
 # ccache - speed up C and C++ compilation
 # nodejs - ui
 # openjdk-8-jre - railroad diagram generation
 # google-cloud-sdk - roachprod acceptance tests
 # yarn - ui
+# chrome - ui
 RUN apt-get install -y --no-install-recommends \
     ccache \
     google-cloud-sdk \
     nodejs \
     openjdk-8-jre \
     openssh-client \
-    yarn
+    yarn \
+    google-chrome-stable
 
 # Without CCACHE_CPP2=1, ccache can generate spurious warnings. See the manpage
 # for details. This option is enabled by default in ccache v3.3+, but our

pkg/ui/README.md

@@ -17,6 +17,8 @@ Our UI is compiled using a collection of tools that depends on
 [Node.js](https://nodejs.org/) and are managed with
 [Yarn](https://yarnpkg.com), a package manager that offers more deterministic
 package installation than NPM. NodeJS 6.x and Yarn 0.22.0 are known to work.
+[Chrome](https://www.google.com/chrome/), Google's internet browser. Unit tests
+are run using Chrome's "Headless" mode.
 
 With Node and Yarn installed, bootstrap local development by running `make` in
 this directory. This will run `yarn install` to install our Node dependencies,

pkg/ui/karma.conf.js

@@ -23,7 +23,7 @@ module.exports = function(config) {
 
     // start these browsers
     // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
-    browsers: ["jsdom"],
+    browsers: ["ChromeHeadless"],
 
     // enable / disable colors in the output (reporters and logs)
     colors: true,

pkg/ui/package.json

@@ -17,9 +17,9 @@
     "react": "^16.3.1",
     "react-addons-create-fragment": "^15.4.2",
     "react-copy-to-clipboard": "^5.0.1",
-    "react-motion": "^0.5.2",
     "react-dom": "^16.3.1",
     "react-helmet": "^5.2.0",
+    "react-motion": "^0.5.2",
     "react-paginate": "^5.2.2",
     "react-redux": "^5.0.3",
     "react-router": "^3.2.1",
@@ -81,11 +81,9 @@
     "html-webpack-plugin": "^2.30.1",
     "html-webpack-template": "^6.0.1",
     "http-proxy-middleware": "^0.17.4",
-    "jsdom": "^9.12.0",
     "karma": "^1.5.0",
     "karma-chai": "^0.1.0",
-    "karma-chrome-launcher": "^2.0.0",
-    "karma-jsdom-launcher": "^6.0.0",
+    "karma-chrome-launcher": "^2.2.0",
     "karma-mocha": "^1.3.0",
     "karma-mocha-reporter": "^2.2.3",
     "karma-sinon": "^1.0.5",