TEST: Set up for testing via zuul/sauce labs (#86)

This requires the .travis.yml to be updated with the open sauce credentials
as explained at https://github.com/defunctzombie/zuul/wiki/Travis-ci#5-final-step

.gitignore

@@ -3,3 +3,7 @@ coverage/
 tmp/
 npm-debug.log*
 .DS_Store
+.sauce-credentials.json
+*.swp
+sauce_connect.log
+.zuulrc

.travis.yml

@@ -1,7 +1,11 @@
 node_js:
-- "4"
-- "6"
+- '4'
+- '6'
 sudo: false
 language: node_js
-script: "npm run test:cov"
-after_script: "npm i -g codecov.io && cat ./coverage/lcov.info | codecov"
+script: npm run test:cov
+after_script: npm i -g codecov.io && cat ./coverage/lcov.info | codecov
+env:
+  global:
+  - secure: t6MYp/rV/HXKQ8yb21fDMAV9fkwZmPFJ/4Za4TeXvVOojFan4Q40j5VZF6wiVBHTemctMRueQ2iuGl8pgNX3jqRHMKvNS5zKCCUHYvmyvMLQiWpkDC3Lz3R9oz2fooY1f0fpnzaE0TmJHoZQcVDYDTZSk/o6fNXJQnI4SUG/nmnb3VAA0H8lRZ1OidkAbBzJNFj8i0ZTuaqwo0uQVhNDSvLLKgM94ryF+DB+c0vKuZr85wn+xnuJ1ZPZM5S+uZrOAY+TnwD1QvstULHnbF6sqH5WuUkUCHpXV84Hz2pr7GL7yCkj65XoNoqvnoR5ETv8yBa5r/OccrCY9NqXSCv/zWiS4vRWybrJq0Mdx67cXHKHjbQMrILHsbRBDxbCJwn+LAQlwRUoktEcI9bNRUhi0Wt/LQmLvyfldt7mMvgl+7srBdlZWPoTZWRZKqu04XpYTaqAnAeNOjfSOOuB29uVTRu7n9pCeKA/gDNYOWCF3CfN++ztbL+E2OpPnpoRWwoSXnXzFQrLofq6zF1bpIrb5UpaqNYGX+PifUYX+hRYKLdOqqAS3JlJBqG+0ArRZgf3sm/uk4ZDesV5Ee9qB7Ty32Vh66wmU8P6wZjgare4TL+hcsgtNRrd6+kZwXfn0mqcqeFovN2yPpQSmF1U5+ki8+o1NcFFYdeucWa7E9ULkVE=
+  - secure: w0Bkyfc2O/DeSBiIJ3tRnV6zgRbZNCO3SZZikqga/oUWdeIeCB8HDx9eBNvvJH2PF3tyUtRbfbwR+yZotmX/pRF9wc8W8RMFg9xQgsho/WtUG9bQVWGTyeCd9+hCxh9+VnJP0t4YwNOc4UwheRWb+5bxgYZZABxT3VmGBeshFNlryGY9xGMVbDQeF1M3GpQdt51Kud8V2APzShyKdi0YjQM6eC8Jfcl58chrnWDBcGtynREM+fT3rAM7MMEAZf5cRYVze/V/UqFvwaMsu1niCL1eUyg3gf3NpkGIjd9pi7XmYfbRogx41/WPcpeq1susI2hrHdFmco+Ykv6ebrhA7qqQT0MKOSezN2lmoGnr7q+954qxPN7wQMnSCAYZ4Rk1S2Zu1HQBUW4UyjK+yvVnj0HOZF2ksIoNz46zFesa7+SlBN10VkVpBYIHW8GZn9+AanjGJbIPJ7I98Ga7rbU4nBQWpP5lc5vVflMmtVGOjcY37S+FxB05oPLnNU4AJivZFdbdf0xYrc5eWNC/t3+JLZ3BJyD2ZTiWbNtJT4YIdKpV9RdjV/u60XnxLKmGFuPIn+b+CKPW0+IM9ooyJK4mir8ET2uv4A926Ocgs2qzq9geU8IJ8WYLS1I9OgT/IM9EgJEeBeUOaeukW4t1V8pVRXDRsIqOleyHiBQ6bR7GH6I=

.zuul.yml

@@ -0,0 +1,28 @@
+ui: tape
+browsers:
+  - name: chrome
+    version: latest
+    os: 'Mac 10.11'
+  - name: internet explorer
+    version: 9..11
+    os: 'Windows 10'
+  - name: firefox
+    version: latest
+    os: 'Mac 10.11'
+  - name: microsoftedge
+    version: latest
+  - name: safari
+    version: latest
+    os: 'Mac 10.11'
+  - name: iphone
+    version: '8.4..9.2'
+  - name: android
+    version: '4.3..5.1'
+  - name: opera
+    version: latest
+    platform: 'Windows 10'
+browserify:
+  - transform:
+      name: es2020
+      global: true
+  - transform: sheetify/transform

README.md

@@ -796,6 +796,18 @@ Consider running some of the following:
 - [envify](https://github.com/hughsk/envify) - replace `process.env` values
   with plain strings
 
+### Choo + Internet Explorer & Safari
+Out of the box `choo` only supports runtimes which support:
+* `const`
+* `fat-arrow` functions (e.g. `() => {}`)
+* `template-strings`
+
+This does not include Safari 9 or any version of IE. If support for these
+platforms is required you will have to provide some sort of transform that
+makes this functionalty available in older browsers.  The test suite uses
+[es2020](https://github.com/yoshuawuyts/es2020) as a global transform, but
+anything else which might satisfy this requirement is fair game.
+
 Generally for production builds you'll want to run:
 ```sh
 $ NODE_ENV=production browserify \
@@ -813,6 +825,13 @@ Yup, it's greatly inspired by the `elm` architecture. But contrary to `elm`,
 ### Is it production ready?
 Sure.
 
+## Browser Test Status
+<a href="https://saucelabs.com/u/yoshuawuyts">
+  <img
+    src="https://saucelabs.com/browser-matrix/yoshuawuyts.svg"
+    alt="Sauce Test Status"/>
+</a>
+
 ## Installation
 ```sh
 $ npm install choo

package.json

@@ -5,8 +5,12 @@
   "main": "index.js",
   "scripts": {
     "deps": "dependency-check . && dependency-check . --extra --no-dev -i xhr",
-    "test": "standard && npm run deps && NODE_ENV=test node tests/*",
-    "test:cov": "standard && npm run deps && NODE_ENV=test istanbul cover tests/*"
+    "test:server": "standard && npm run deps && NODE_ENV=test node tests/server/*",
+    "test:server:cov": "standard && npm run deps && NODE_ENV=test istanbul cover tests/server/*",
+    "test:browser": "standard && npm run deps && NODE_ENV=test zuul tests/browser/*",
+    "test:browser:local": "standard && npm run deps && NODE_ENV=test zuul --local 8080 -- tests/browser/*",
+    "test:cov": "npm run test:server:cov && npm run test:browser",
+    "test": "npm run test:server && npm run test:browser"
   },
   "repository": "yoshuawuyts/choo",
   "keywords": [
@@ -30,15 +34,18 @@
   "devDependencies": {
     "bankai": "^2.0.2",
     "browserify": "^13.0.1",
+    "browserify-istanbul": "^2.0.0",
     "bundle-collapser": "^1.2.1",
     "dependency-check": "^2.5.1",
     "es2020": "^1.0.1",
     "insert-css": "^0.2.0",
-    "istanbul": "^0.4.3",
+    "istanbul": "^0.4.4",
+    "karma-sauce-launcher": "^1.0.0",
     "server-router": "^2.1.0",
     "sheetify": "^5.0.0",
     "standard": "^7.1.0",
     "tachyons": "^4.0.0-beta.19",
-    "tape": "^4.5.1"
+    "tape": "^4.5.1",
+    "zuul": "toddself/zuul"
   }
 }

tests/browser/basic.js

@@ -0,0 +1,60 @@
+const tape = require('tape')
+const choo = require('../../')
+
+tape('should render on the client', function (t) {
+  t.test('state should not be mutable', function (t) {
+    t.plan(4)
+
+    const app = choo()
+    const state = {
+      foo: 'baz',
+      beep: 'boop'
+    }
+
+    app.model({
+      state: state,
+      namespace: 'test',
+      reducers: {
+        'no-reducer-mutate': (action, state) => {
+          return {}
+        },
+        'mutate-on-return': (action, state) => {
+          delete action.type
+          return action
+        }
+      },
+      effects: {
+        'triggers-reducers': (action, state, send) => {
+          send('test:mutate-on-return', {beep: 'barp'})
+        }
+      }
+    })
+
+    let loop = -1
+
+    const asserts = [
+      (state) => t.deepEqual(state, {foo: 'baz', beep: 'boop'}, 'intial state'),
+      (state) => t.deepEqual(state, {foo: 'baz', beep: 'boop'}, 'no change in state'),
+      (state) => t.deepEqual(state, {foo: 'oof', beep: 'boop'}, 'change in state from reducer'),
+      (state) => t.deepEqual(state, {foo: 'oof', beep: 'barp'}, 'change in state from effect')
+    ]
+
+    const triggers = [
+      (send) => send('test:no-reducer-mutate'),
+      (send) => send('test:mutate-on-return', {foo: 'oof'}),
+      (send) => send('test:triggers-reducers')
+    ]
+
+    app.router((route) => [
+      route('/', function (params, state, send) {
+        ++loop
+        asserts[loop] && asserts[loop](state.test)
+        setTimeout(() => triggers[loop] && triggers[loop](send), 5)
+        return choo.view`<div><span class="test">${state.foo}:${state.beep}</span></div>`
+      })
+    ])
+
+    const tree = app.start()
+    document.body.appendChild(tree)
+  })
+})

tests/server/index.js

@@ -1,5 +1,5 @@
 const tape = require('tape')
-const choo = require('../')
+const choo = require('../../')
 
 tape('should render on the server', function (t) {
   t.test('should render a static response', function (t) {