Update karma docs for usage on Chrome headless and normal browser in CI

neutrinojs · Nov 21, 2017 · 1f2d8dc · 1f2d8dc
1 parent 6191d6f
commit 1f2d8dc
Show file tree

Hide file tree

Showing 3 changed files with 108 additions and 62 deletions.
diff --git a/docs/packages/karma/README.md b/docs/packages/karma/README.md
@@ -8,7 +8,7 @@
 
 ## Features
 
-- Zero upfront configuration necessary to start testing on real browsers with Karma, Mocha, and Chrome
+- Zero upfront configuration necessary to start testing on real browsers with Karma, Mocha, and Chrome Headless
 - Babel compilation that compiles your tests using the same Babel options used by your source code
 - Source watching for re-running of tests on change
 - Out-of-the-box support for running in CI
@@ -95,18 +95,17 @@ Run the tests, and view the results in your console:
 ❯ yarn test
 
 START:
-16 02 2017 10:36:34.713:INFO [karma]: Karma v1.7.1 server started at http://0.0.0.0:9876/
-16 02 2017 10:36:34.715:INFO [launcher]: Launching browser Chrome with unlimited concurrency
-16 02 2017 10:36:34.731:INFO [launcher]: Starting browser Chrome
-16 02 2017 10:36:35.655:INFO [Chrome 60 (Mac OS X 10.12.3)]: Connected on socket MkTbqJLpAAa2HFaeAAAA with id 21326158
+21 11 2017 06:56:39.804:INFO [karma]: Karma v1.7.1 server started at http://0.0.0.0:9876/
+21 11 2017 06:56:39.806:INFO [launcher]: Launching browser ChromeHeadless with unlimited concurrency
+21 11 2017 06:56:39.809:INFO [launcher]: Starting browser ChromeHeadless
+21 11 2017 06:56:40.170:INFO [HeadlessChrome 0.0.0 (Mac OS X 10.13.0)]: Connected on socket PW-kCVej8pQuT-HAAAAA with id 14691980
   simple
     ✔ should be sane
 
-Finished in 0.003 secs / 0 secs @ 10:36:35 GMT-0600 (CST)
+Finished in 0.005 secs / 0 secs @ 06:56:40 GMT-0600 (CST)
 
 SUMMARY:
 ✔ 1 test completed
-✨  Done in 7.54s.
 ```
 
 #### npm
@@ -115,14 +114,14 @@ SUMMARY:
 ❯ npm test
 
 START:
-16 02 2017 10:38:12.865:INFO [karma]: Karma v1.7.1 server started at http://0.0.0.0:9876/
-16 02 2017 10:38:12.867:INFO [launcher]: Launching browser Chrome with unlimited concurrency
-16 02 2017 10:38:12.879:INFO [launcher]: Starting browser Chrome
-16 02 2017 10:38:13.688:INFO [Chrome 60 (Mac OS X 10.12.3)]: Connected on socket svRGoxU0etKTKQWhAAAA with id 68456725
+21 11 2017 06:56:39.804:INFO [karma]: Karma v1.7.1 server started at http://0.0.0.0:9876/
+21 11 2017 06:56:39.806:INFO [launcher]: Launching browser ChromeHeadless with unlimited concurrency
+21 11 2017 06:56:39.809:INFO [launcher]: Starting browser ChromeHeadless
+21 11 2017 06:56:40.170:INFO [HeadlessChrome 0.0.0 (Mac OS X 10.13.0)]: Connected on socket PW-kCVej8pQuT-HAAAAA with id 14691980
   simple
     ✔ should be sane
 
-Finished in 0.006 secs / 0 secs @ 10:38:13 GMT-0600 (CST)
+Finished in 0.005 secs / 0 secs @ 06:56:40 GMT-0600 (CST)
 
 SUMMARY:
 ✔ 1 test completed
@@ -147,21 +146,6 @@ extension. Use the command line [`files` parameters](../../cli/README.md#neutrin
 `@neutrinojs/karma` can watch for changes on your source directory and subsequently re-run tests. Simply use the
 `--watch` flag with your `neutrino test` command.
 
-## Using from CI
-
-`@neutrinojs/karma` needs no additional configuration to run your tests in CI infrastructure, but you will still
-need to ensure your CI can actually run the tests. This usually means having a display emulator and access to the
-browsers you are testing against.
-
-To do this in Travis-CI, you will need to add the following to your `.travis.yml` file for Chrome tests:
-
-```yaml
-before_install:
-- export CHROME_BIN=chromium-browser
-- export DISPLAY=:99.0
-- sh -e /etc/init.d/xvfb start
-```
-
 ## Preset options
 
 You can provide custom options and have them merged with this preset's default options, which are subsequently passed
@@ -195,6 +179,40 @@ module.exports = {
 };
 ```
 
+## Using from CI
+
+`@neutrinojs/karma` needs no additional configuration to run your tests in CI infrastructure when using Chrome Headless.
+If you decide to use a browser with a display, you will need to ensure your CI can actually run the tests similar to
+a headless mode. This usually means having a display emulator and access to the browsers you are testing against.
+
+For an example using Travis-CI and normal Chrome, you will need to add the following to your `.travis.yml` file:
+
+```yaml
+before_install:
+- export CHROME_BIN=chromium-browser
+- export DISPLAY=:99.0
+- sh -e /etc/init.d/xvfb start
+```
+
+You may also need to pass additional options to the Karma preset to change its behavior in CI, using standard
+Chrome as an example instead of Chrome Headless:
+
+```js
+module.exports = {
+  use: [
+    ['@neutrinojs/karma', {
+      browsers: [process.env.CI ? 'ChromeCI' : 'Chrome'],
+      customLaunchers: {
+        ChromeCI: {
+          base: 'Chrome',
+          flags: ['--no-sandbox']
+        }
+      },
+    }]
+  ]
+}
+```
+
 ## Contributing
 
 This preset is part of the [neutrino-dev](https://github.com/mozilla-neutrino/neutrino-dev) repository, a monorepo

diff --git a/packages/karma/README.md b/packages/karma/README.md
@@ -8,7 +8,7 @@
 
 ## Features
 
-- Zero upfront configuration necessary to start testing on real browsers with Karma, Mocha, and Chrome
+- Zero upfront configuration necessary to start testing on real browsers with Karma, Mocha, and Chrome Headless
 - Babel compilation that compiles your tests using the same Babel options used by your source code
 - Source watching for re-running of tests on change
 - Out-of-the-box support for running in CI
@@ -95,18 +95,17 @@ Run the tests, and view the results in your console:
 ❯ yarn test
 
 START:
-16 02 2017 10:36:34.713:INFO [karma]: Karma v1.7.1 server started at http://0.0.0.0:9876/
-16 02 2017 10:36:34.715:INFO [launcher]: Launching browser Chrome with unlimited concurrency
-16 02 2017 10:36:34.731:INFO [launcher]: Starting browser Chrome
-16 02 2017 10:36:35.655:INFO [Chrome 60 (Mac OS X 10.12.3)]: Connected on socket MkTbqJLpAAa2HFaeAAAA with id 21326158
+21 11 2017 06:56:39.804:INFO [karma]: Karma v1.7.1 server started at http://0.0.0.0:9876/
+21 11 2017 06:56:39.806:INFO [launcher]: Launching browser ChromeHeadless with unlimited concurrency
+21 11 2017 06:56:39.809:INFO [launcher]: Starting browser ChromeHeadless
+21 11 2017 06:56:40.170:INFO [HeadlessChrome 0.0.0 (Mac OS X 10.13.0)]: Connected on socket PW-kCVej8pQuT-HAAAAA with id 14691980
   simple
     ✔ should be sane
 
-Finished in 0.003 secs / 0 secs @ 10:36:35 GMT-0600 (CST)
+Finished in 0.005 secs / 0 secs @ 06:56:40 GMT-0600 (CST)
 
 SUMMARY:
 ✔ 1 test completed
-✨  Done in 7.54s.
 ```
 
 #### npm
@@ -115,14 +114,14 @@ SUMMARY:
 ❯ npm test
 
 START:
-16 02 2017 10:38:12.865:INFO [karma]: Karma v1.7.1 server started at http://0.0.0.0:9876/
-16 02 2017 10:38:12.867:INFO [launcher]: Launching browser Chrome with unlimited concurrency
-16 02 2017 10:38:12.879:INFO [launcher]: Starting browser Chrome
-16 02 2017 10:38:13.688:INFO [Chrome 60 (Mac OS X 10.12.3)]: Connected on socket svRGoxU0etKTKQWhAAAA with id 68456725
+21 11 2017 06:56:39.804:INFO [karma]: Karma v1.7.1 server started at http://0.0.0.0:9876/
+21 11 2017 06:56:39.806:INFO [launcher]: Launching browser ChromeHeadless with unlimited concurrency
+21 11 2017 06:56:39.809:INFO [launcher]: Starting browser ChromeHeadless
+21 11 2017 06:56:40.170:INFO [HeadlessChrome 0.0.0 (Mac OS X 10.13.0)]: Connected on socket PW-kCVej8pQuT-HAAAAA with id 14691980
   simple
     ✔ should be sane
 
-Finished in 0.006 secs / 0 secs @ 10:38:13 GMT-0600 (CST)
+Finished in 0.005 secs / 0 secs @ 06:56:40 GMT-0600 (CST)
 
 SUMMARY:
 ✔ 1 test completed
@@ -147,21 +146,6 @@ extension. Use the command line [`files` parameters](https://neutrino.js.org/cli
 `@neutrinojs/karma` can watch for changes on your source directory and subsequently re-run tests. Simply use the
 `--watch` flag with your `neutrino test` command.
 
-## Using from CI
-
-`@neutrinojs/karma` needs no additional configuration to run your tests in CI infrastructure, but you will still
-need to ensure your CI can actually run the tests. This usually means having a display emulator and access to the
-browsers you are testing against.
-
-To do this in Travis-CI, you will need to add the following to your `.travis.yml` file for Chrome tests:
-
-```yaml
-before_install:
-- export CHROME_BIN=chromium-browser
-- export DISPLAY=:99.0
-- sh -e /etc/init.d/xvfb start
-```
-
 ## Preset options
 
 You can provide custom options and have them merged with this preset's default options, which are subsequently passed
@@ -195,6 +179,40 @@ module.exports = {
 };
 ```
 
+## Using from CI
+
+`@neutrinojs/karma` needs no additional configuration to run your tests in CI infrastructure when using Chrome Headless.
+If you decide to use a browser with a display, you will need to ensure your CI can actually run the tests similar to
+a headless mode. This usually means having a display emulator and access to the browsers you are testing against.
+
+For an example using Travis-CI and normal Chrome, you will need to add the following to your `.travis.yml` file:
+
+```yaml
+before_install:
+- export CHROME_BIN=chromium-browser
+- export DISPLAY=:99.0
+- sh -e /etc/init.d/xvfb start
+```
+
+You may also need to pass additional options to the Karma preset to change its behavior in CI, using standard
+Chrome as an example instead of Chrome Headless:
+
+```js
+module.exports = {
+  use: [
+    ['@neutrinojs/karma', {
+      browsers: [process.env.CI ? 'ChromeCI' : 'Chrome'],
+      customLaunchers: {
+        ChromeCI: {
+          base: 'Chrome',
+          flags: ['--no-sandbox']
+        }
+      },
+    }]
+  ]
+}
+```
+
 ## Contributing
 
 This preset is part of the [neutrino-dev](https://github.com/mozilla-neutrino/neutrino-dev) repository, a monorepo

diff --git a/yarn.lock b/yarn.lock
@@ -4582,6 +4582,22 @@ good-listener@^1.2.2:
   dependencies:
     delegate "^3.1.2"
 
+got@^6.7.1:
+  version "6.7.1"
+  resolved "https://registry.yarnpkg.com/got/-/got-6.7.1.tgz#240cd05785a9a18e561dc1b44b41c763ef1e8db0"
+  dependencies:
+    create-error-class "^3.0.0"
+    duplexer3 "^0.1.4"
+    get-stream "^3.0.0"
+    is-redirect "^1.0.0"
+    is-retry-allowed "^1.0.0"
+    is-stream "^1.0.0"
+    lowercase-keys "^1.0.0"
+    safe-buffer "^5.0.1"
+    timed-out "^4.0.0"
+    unzip-response "^2.0.1"
+    url-parse-lax "^1.0.0"
+
 got@^7.0.0:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/got/-/got-7.1.0.tgz#05450fd84094e6bbea56f451a43a9c289166385a"
@@ -4601,7 +4617,7 @@ got@^7.0.0:
     url-parse-lax "^1.0.0"
     url-to-options "^1.0.1"
 
-graceful-fs@4.1.11, graceful-fs@^4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@~4.1.11, graceful-fs@~4.1.6:
+graceful-fs@4.1.11, graceful-fs@^4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.1.9, graceful-fs@~4.1.11, graceful-fs@~4.1.6:
   version "4.1.11"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658"
 
@@ -6414,7 +6430,7 @@ lodash.without@~4.4.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/lodash.without/-/lodash.without-4.4.0.tgz#3cd4574a00b67bae373a94b748772640507b7aac"
 
-lodash@4.17.4, lodash@^4.0.0, lodash@^4.1.0, lodash@^4.11.1, lodash@^4.14.0, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.5.0, lodash@^4.6.1:
+lodash@4.17.4, "lodash@>=3.5 <5", lodash@^4.0.0, lodash@^4.1.0, lodash@^4.11.1, lodash@^4.14.0, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.5.0, lodash@^4.6.1:
   version "4.17.4"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
 
@@ -8990,12 +9006,6 @@ scoped-regex@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/scoped-regex/-/scoped-regex-1.0.0.tgz#a346bb1acd4207ae70bd7c0c7ca9e566b6baddb8"
 
-script-ext-html-webpack-plugin@^1.8.5:
-  version "1.8.7"
-  resolved "https://registry.yarnpkg.com/script-ext-html-webpack-plugin/-/script-ext-html-webpack-plugin-1.8.7.tgz#456c44c21933ea06086d13bb0eaa29f41132ab06"
-  dependencies:
-    debug "^3.1.0"
-
 script-ext-html-webpack-plugin@^1.8.8:
   version "1.8.8"
   resolved "https://registry.yarnpkg.com/script-ext-html-webpack-plugin/-/script-ext-html-webpack-plugin-1.8.8.tgz#faa888a286ce746fcd06a5e0a9e39ed7b9d24f66"