Add a host script to run in a browser and start iframes for suites.

lib/src/runner/browser/static/host.dart

Index: lib/src/runner/browser/static/host.dart
diff --git a/lib/src/runner/browser/static/host.dart b/lib/src/runner/browser/static/host.dart
new file mode 100644
index 0000000000000000000000000000000000000000..9ad1cd29c17f9b2a3938414eb92fba05667c48d7
--- /dev/null
+++ b/lib/src/runner/browser/static/host.dart
@@ -0,0 +1,140 @@
+// Copyright (c) 2015, the Dart project authors.  Please see the AUTHORS file
+// for details. All rights reserved. Use of this source code is governed by a
+// BSD-style license that can be found in the LICENSE file.
+
+library unittest.runner.browser.host;
+
+import 'dart:async';
+import 'dart:convert';
+import 'dart:html';
+
+import 'package:stack_trace/stack_trace.dart';
+import 'package:unittest/src/util/multi_channel.dart';
+import 'package:unittest/src/util/stream_channel.dart';
+
+// TODO(nweiz): test this once we can run browser tests.
+/// Code that runs in the browser and loads test suites at the server's behest.
+///
+/// One instance of this runs for each browser. When the server tells it to load
+/// a test, it starts an iframe pointing at that test's code; from then on, it
+/// just relays messages between the two.
+///
+/// The browser uses two layers of [MultiChannel]s when communicating with the
+/// server:
+///
+///                                       server
+///                                         │
+///                                    (WebSocket)
+///                                         │
+///                    ┏━ host.html ━━━━━━━━┿━━━━━━━━━━━━━━━━━┓

[Bob Nystrom, 2015/03/02 20:31:31]

Box drawing characters aren't reliably monospace-sized on a lot of fonts. :(

You can probably keep this as-is if you want, but, for example, it looks broken
with Source Code Pro.

[nweiz, 2015/03/02 22:39:42]

It's too cool to kill! It looks good with GitHub's font, which is good enough
for me.

+///                    ┃                    │                 ┃
+///                    ┃    ┌──────┬───MultiChannel─────┐     ┃
+///                    ┃    │      │      │      │      │     ┃
+///                    ┃   host  suite  suite  suite  suite   ┃
+///                    ┃           │      │      │      │     ┃
+///                    ┗━━━━━━━━━━━┿━━━━━━┿━━━━━━┿━━━━━━┿━━━━━┛
+///                                │      │      │      │
+///                                │     ...    ...    ...
+///                                │
+///                          (postMessage)
+///                                │
+///      ┏━ suite.html (in iframe) ┿━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+///      ┃                         │                          ┃
+///      ┃         ┌──────────MultiChannel┬─────────┐         ┃
+///      ┃         │          │     │     │         │         ┃
+///      ┃   IframeListener  test  test  test  running test   ┃
+///      ┃                                                    ┃
+///      ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+///
+/// The host (this code) has a [MultiChannel] that splits the WebSocket
+/// connection with the server. One connection is used for the host itself to
+/// receive messages like "load a suite at this URL", and the rest are connected
+/// to each test suite's iframe via `postMessage`.
+///
+/// Each iframe then has its own [MultiChannel] which takes its `postMessage`
+/// connection and splits it again. One connection is used for the
+/// [IframeListener], which sends messages like "here are all the tests in this
+/// suite". The rest are used for each test, receiving messages like "start
+/// running". A new connection is also created whenever a test begins running to
+/// send status messages about its progress.
+///
+/// It's of particular note that the suite's [MultiChannel] connection uses the
+/// host's purely as a transport layer; neither is aware that the other is also
+/// using [MultiChannel]. This is necessary, since the host doesn't share memory
+/// with the suites and thus can't share its [MultiChannel] with them, but it
+/// does mean that the server needs to be sure to nest its [MultiChannel]s at
+/// the same place the client does.
+void main() {
+  runZoned(() {
+    var serverChannel = _connectToServer();
+    serverChannel.stream.listen((message) {
+      assert(message['command'] == 'loadSuite');
+      var suiteChannel = serverChannel.virtualChannel(message['channel']);
+      var iframeChannel = _connectToIframe(message['url']);
+      suiteChannel.pipe(iframeChannel);
+    });
+  }, onError: (error, stackTrace) {
+    print("$error\n${new Trace.from(stackTrace).terse}");
+  });
+}
+
+/// Creates a [MultiChannel] connection to the server, using a [WebSocket] as
+/// the underlying protocol.
+MultiChannel _connectToServer() {
+  // The `managerUrl` query parameter contains the WebSocket URL of the remote
+  // [BrowserManager] with which this communicates.
+  var currentUrl = Uri.parse(window.location.href);
+  var webSocketUrl = currentUrl
+      .resolve(currentUrl.queryParameters['managerUrl'])
+      .replace(scheme: 'ws');
+  var webSocket = new WebSocket(webSocketUrl.toString());
+
+  var inputController = new StreamController(sync: true);
+  webSocket.onMessage.listen(
+      (message) => inputController.add(JSON.decode(message.data)));
+
+  var outputController = new StreamController(sync: true);
+  outputController.stream.listen(
+      (message) => webSocket.send(JSON.encode(message)));
+
+  return new MultiChannel(inputController.stream, outputController.sink);
+}
+
+/// Creates an iframe with `src` [url] and establishes a connection to it using
+/// `postMessage`.
+StreamChannel _connectToIframe(String url) {
+  var iframe = new IFrameElement();
+  iframe.src = url;
+  document.body.children.add(iframe);
+
+  var inputController = new StreamController(sync: true);
+  var outputController = new StreamController(sync: true);
+  iframe.onLoad.first.then((_) {
+    // TODO(nweiz): use MessageChannel once Firefox supports it
+    // (http://caniuse.com/#search=MessageChannel).
+
+    // Send an initial command to give the iframe something to reply to.
+    iframe.contentWindow.postMessage(
+        {"command": "connect"},
+        window.location.origin);
+
+    window.onMessage.listen((message) {
+      // A message on the Window can theoretically come from any website. It's
+      // very unlikely that a malicious site would care about hacking someone's
+      // unit tests, let alone be able to find the unittest server while it's
+      // running, but it's good practice to check the origin anyway.
+      if (message.origin != window.location.origin) return;
+
+      // TODO(nweiz): Stop manually checking href here once issue 22554 is fixed.

[Bob Nystrom, 2015/03/02 20:31:30]

Long line is long.

[nweiz, 2015/03/02 22:39:42]

Done.

[nweiz, 2015/03/02 22:39:42]

Done.

+      if (message.data["href"] != iframe.src) return;
+
+      message.stopPropagation();
+      inputController.add(message.data["data"]);
+    });
+
+    outputController.stream.listen((message) =>
+        iframe.contentWindow.postMessage(message, window.location.origin));
+  });
+
+  return new StreamChannel(inputController.stream, outputController.sink);
+}