Hypermonkey

.gitignore

@@ -1,2 +1,3 @@
+*.sw*
 node_modules
 bundle*

browser/api.js

@@ -1,5 +1,9 @@
+import httpism from 'httpism/browser';
+
 export default {
   loadTODOs() {
-    return window.fetch('/api/todos').then(res => res.json());
+    return httpism.get('/api/todos').then(res => res.body).catch(e => {
+      console.log('eee', e)
+    });
   }
 }

browser/app.jsx

@@ -1,5 +1,5 @@
-/** @jsx plastiq.jsx */
-import plastiq from 'plastiq';
+/** @jsx hyperdom.jsx */
+import hyperdom from 'hyperdom';
 import Api from './api';
 
 function navigateTo(route) {

browser/browser.js

@@ -1,6 +1,6 @@
-import plastiq from 'plastiq';
+import hyperdom from 'hyperdom';
 import App from './app.jsx';
-import router from 'plastiq-router';
+import router from 'hyperdom-router';
 
 router.start();
-plastiq.append(document.body, new App({router: router}));
+hyperdom.append(window.document.body, new App({router: router}));

lib/app.js

@@ -20,8 +20,4 @@ app.get('*', (req, res) => {
   res.sendFile(process.cwd() + '/public/index.html');
 });
 
-var port = process.env.PORT || 4322;
-
-app.listen(port, function () {
-  console.log(`listening on http://localhost:${port}/`);
-});
+export default app;

lib/server.js

@@ -0,0 +1,7 @@
+import app from './app';
+
+var port = process.env.PORT || 4322;
+
+app.listen(port, function () {
+  console.log(`listening on http://localhost:${port}/`);
+});

package.json

@@ -1,13 +1,15 @@
 {
   "scripts": {
-    "start": "babel-node lib/app.js",
+    "start": "babel-node lib/server.js",
     "dev": "nodemon --exec babel-node lib/app.js",
     "test-karma": "karma start --single-run",
     "test-electron": "electron-mocha --renderer --compilers js:babel-core/register test/**/*Spec.js",
     "test-vdom": "mocha --compilers js:babel-core/register test/**/*Spec.js"
   },
   "dependencies": {
     "babel-cli": "^6.16.0",
+    "babel-core": "^6.18.2",
+    "babel-plugin-transform-regenerator": "^6.16.1",
     "babel-plugin-transform-runtime": "^6.15.0",
     "babel-preset-es2015": "^6.16.0",
     "babel-preset-react": "^6.16.0",
@@ -17,22 +19,25 @@
     "express": "^4.14.0",
     "express-babelify-middleware": "^0.2.1",
     "httpism": "^2.4.2",
-    "plastiq": "^1.33.0",
-    "plastiq-router": "^2.18.0"
+    "hyperdom": "^0.2.0",
+    "hyperdom-router": "featurist/plastiq-router#hyperdomify"
   },
   "devDependencies": {
-    "browser-monkey": "featurist/browser-monkey",
+    "browser-monkey": "github:featurist/browser-monkey",
     "browserify": "^13.1.0",
     "chai": "^3.5.0",
     "electron-mocha": "^3.1.1",
     "electron-prebuilt-compile": "^1.4.3",
+    "global": "^4.3.1",
+    "hypermonkey": "0.0.3",
     "karma": "^1.3.0",
     "karma-browserify": "^5.1.0",
     "karma-chrome-launcher": "^2.0.0",
     "karma-mocha": "^1.2.0",
     "mocha": "^3.1.2",
     "nodemon": "^1.11.0",
-    "vdom-query": "dereke/vdom-query#rewrite-like-jquery",
+    "vdom-query": "featurist/vdom-query",
+    "vinehill": "0.0.4",
     "watchify": "^3.7.0"
   },
   "name": "bm-demo",

test/pageHelper.js

@@ -1,8 +1,6 @@
 import { expect } from 'chai';
 
 export default function(browser) {
-  var $ = browser.get('$');
-
   return browser.component({
     fetchTODOs: function() {
       return this.find('button').click();
@@ -12,11 +10,8 @@ export default function(browser) {
       return this.find('.loading', {text: 'Loading...'}).shouldExist();
     },
 
-    expectTODOs: async function(...expectedTodos) {
-      var actualTodos = (await this.find('ul li').elements())
-        .map(e => $(e).innerText());
-
-      expect(actualTodos.sort()).to.eql(expectedTodos.sort());
+    expectTODOs: function(...expectedTodos) {
+      return this.find('ul li').shouldHave({text: expectedTodos, timeout: 2000});
     }
   });
 }

test/todosSpec.js

@@ -1,40 +1,43 @@
-import router from 'plastiq-router';
+import window from 'global';
+import hypermonkey from 'hypermonkey';
 import App from '../browser/app';
-import mountApp from './mountApp';
-import fakeApi from './fakeApi';
+import ServerApp from '../lib/app';
 import pageHelper from './pageHelper';
 
 describe('todos app', () => {
-  var page;
+  var page, monkey;
 
   beforeEach(() => {
-    router.start();
-    var browser = mountApp(new App({api: fakeApi, router: router}));
-    page = pageHelper(browser);
+    monkey = hypermonkey()
+      .withServer('http://localhost:1234', ServerApp)
+      .withApp(router => new App({router: router}))
+      .start();
+
+    page = pageHelper(monkey.browser);
   });
 
-  afterEach(() => router.clear());
+  afterEach(() => monkey.stop());
 
   context('when user lands on "/"', () => {
-    before(() => {
+    beforeEach(() => {
       window.history.pushState(null, null, '/');
     });
 
     it('allows user to fetch todos', async () => {
       await page.fetchTODOs();
       await page.observeLoadingBar();
-      await page.expectTODOs('one', 'two');
+      await page.expectTODOs('buy beer', 'call Dave', 'watch tv');
     });
   });
 
   context('when user lands on "/todos"', () => {
-    before(() => {
+    beforeEach(() => {
       window.history.pushState(null, null, '/todos');
     });
 
     it('fetches todos automatically', async () => {
       await page.observeLoadingBar();
-      await page.expectTODOs('one', 'two');
+      await page.expectTODOs('buy beer', 'call Dave', 'watch tv');
     });
   });
 });