add custom_element package

pkg/custom_element/test/custom_element_test.dart

+// Copyright (c) 2013, 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 custom_element.test.custom_element_test;
+
+import 'dart:async';
+import 'dart:html';
+import 'package:custom_element/custom_element.dart';
+import 'package:unittest/html_config.dart';
+import 'package:unittest/unittest.dart';
+
+main() {
+  useHtmlConfiguration();
+
+  test('register creates the element and calls lifecycle methods', () {
+    // Add element to the page.
+    var element = new Element.html('<fancy-button>foo bar</fancy-button>');
+    document.body.nodes.add(element);
+
+    var xtag = null;
+    registerCustomElement('fancy-button', () => xtag = new FancyButton());
+    expect(xtag, isNotNull, reason: 'FancyButton was created');
+    expect(element.xtag, xtag, reason: 'xtag pointer should be set');
+    expect(xtag.host, element, reason: 'host pointer should be set');
+    expect(xtag.lifecycle, ['created']);
+    return new Future(() {

[Siggi Cherem (dart-lang), 2013/07/29 20:18:52]

I prefer to use either runAsync or Timer.run to explicitly choose which kind of
asynchrony we are using (`new Future` internally uses one or the other, but I
don't know which one it is and I believe it has changed recently)

[Jennifer Messerly, 2013/07/29 20:22:31]

the reason to return Future is to avoid the expectAsync, see next answer :)

+      expect(xtag.lifecycle, ['created', 'inserted']);
+      element.remove();
+      return new Future(() {

[Siggi Cherem (dart-lang), 2013/07/29 20:18:52]

on each of these callbacks add an expectAsync, to ensure that the test harness
waits until they get evaluated before moving to the next test.

[Jennifer Messerly, 2013/07/29 20:22:31]

I think it does that automatically. Pete taught me this pattern IIRC.

[Siggi Cherem (dart-lang), 2013/07/29 20:28:35]

a yes, only if you return it from the test. I didn't see the return initially.

LGTM

+        expect(xtag.lifecycle, ['created', 'inserted', 'removed']);
+      });
+    });
+  });
+
+  test('create a component in code', () {
+    var element = createElement('super-button');
+    expect(element is UnknownElement, true, reason: 'element not registered');
+
+    var xtag = null;
+    registerCustomElement('super-button', () => xtag = new FancyButton());
+
+    element = createElement('super-button');
+    expect(xtag, isNotNull, reason: 'FancyButton was created');
+    expect(element.xtag, xtag, reason: 'xtag pointer should be set');
+    expect(xtag.host, element, reason: 'host pointer should be set');
+    expect(xtag.lifecycle, ['created']);
+    return new Future(() {
+      expect(xtag.lifecycle, ['created'], reason: 'not inserted into document');
+
+      document.body.nodes.add(element);
+      return new Future(() {
+        expect(xtag.lifecycle, ['created'],
+            reason: 'mutation observer not implemented yet');
+
+        element.remove();
+        return new Future(() {
+          expect(xtag.lifecycle, ['created'],
+              reason: 'mutation observer not implemented yet');
+        });
+      });
+    });
+  });
+}
+
+class FancyButton extends CustomElement {
+  final lifecycle = [];
+  created() {
+    super.created();
+    lifecycle.add('created');
+  }
+  inserted() {
+    super.inserted();
+    lifecycle.add('inserted');
+  }
+  removed() {
+    super.removed();
+    lifecycle.add('removed');
+  }
+}