crush the pyramid. async/await in server-side tests

.babelrc

@@ -1,3 +1,11 @@
 {
-  "presets": ["es2015"]
+  "presets": ["es2015"],
+  "env": {
+    "test": {
+      "plugins": [
+        "syntax-async-functions",
+        "transform-regenerator"
+      ]
+    }
+  }
 }

package.json

@@ -11,7 +11,7 @@
     "test": "npm run build-test && npm run test-server && npm run test-browser-local",
     "test-browser-local": "wct --plugin local test/browser/index.html",
     "test-browser-sauce": "wct --plugin sauce test/browser/index.html",
-    "test-server": "mocha --require babel-core/register test/server"
+    "test-server": "NODE_ENV=test mocha --require babel-core/register --require babel-polyfill test/server"
   },
   "repository": {
     "type": "git",
@@ -40,6 +40,9 @@
     "babel-cli": "^6.6.5",
     "babel-core": "^6.7.6",
     "babel-loader": "^6.2.4",
+    "babel-plugin-syntax-async-functions": "^6.13.0",
+    "babel-plugin-transform-regenerator": "^6.11.4",
+    "babel-polyfill": "^6.13.0",
     "babel-preset-es2015": "^6.6.0",
     "chai": "^3.5.0",
     "jsdoc": "^3.4.0",

test/server/component.js

@@ -1,11 +1,13 @@
 import '../../lib/isorender/dom-shims';
 
 import { expect } from 'chai';
-import requestAnimationFrame from 'raf';
+import requestAnimationFrameCB from 'raf';
 
 import { SimpleApp } from '../fixtures/simple-app';
 document.registerElement('simple-app', SimpleApp);
 
+const requestAnimationFrame = () => new Promise(requestAnimationFrameCB);
+
 describe('Server-side component renderer', function() {
   it('can register and create components with document.createElement', function() {
     const el = document.createElement('simple-app');
@@ -21,30 +23,31 @@ describe('Server-side component renderer', function() {
     expect(el.state).to.eql({foo: 'bar'});
   });
 
-  it('renders a simple component', function(done) {
+  it('renders a simple component', async function() {
     const el = new SimpleApp();
     el.attachedCallback();
-    requestAnimationFrame(function() {
-      const html = el.innerHTML;
-      expect(html).to.contain('<DIV class="foo">');
-      expect(html).to.contain('Value of foo: bar');
-      expect(html).to.contain('Foo capitalized: Bar');
-      done();
-    });
+
+    await requestAnimationFrame();
+
+    const html = el.innerHTML;
+    expect(html).to.contain('<DIV class="foo">');
+    expect(html).to.contain('Value of foo: bar');
+    expect(html).to.contain('Foo capitalized: Bar');
   });
 
-  it('renders updates', function(done) {
+  it('renders updates', async function() {
     const el = new SimpleApp();
     el.attachedCallback();
-    requestAnimationFrame(function() {
-      expect(el.textContent).to.contain('Value of foo: bar');
-      expect(el.textContent).to.contain('Foo capitalized: Bar');
-      el.update({foo: 'new value'});
-      requestAnimationFrame(function() {
-        expect(el.textContent).to.contain('Value of foo: new value');
-        expect(el.textContent).to.contain('Foo capitalized: New value');
-        done();
-      });
-    });
+
+    await requestAnimationFrame();
+
+    expect(el.textContent).to.contain('Value of foo: bar');
+    expect(el.textContent).to.contain('Foo capitalized: Bar');
+    el.update({foo: 'new value'});
+
+    await requestAnimationFrame();
+
+    expect(el.textContent).to.contain('Value of foo: new value');
+    expect(el.textContent).to.contain('Foo capitalized: New value');
   });
 });