fix(web components): Support Polymer quirks

karma.conf.js

@@ -10,6 +10,7 @@ module.exports = function(config) {
     files: [
       'packages/web_components/platform.js',
       'packages/web_components/dart_support.js',
+      'test/core_dom/web_components_support.js',
       'test/*.dart',
       'test/**/*_spec.dart',
       'test/config/init_guinness.dart',

test/core_dom/web_components_spec.dart

@@ -4,8 +4,8 @@ import '../_specs.dart';
 import 'dart:js' as js;
 
 registerElement(String name, prototype) {
-  return (new js.JsObject.fromBrowserObject(document)).callMethod('registerElement',
-          [name, new js.JsObject.jsify({"prototype": prototype })]);
+  js.context['angularTestsRegisterElement'].apply(
+          [name, new js.JsObject.jsify(prototype)]);
 }
 
 
@@ -32,6 +32,14 @@ main() {
       (new js.JsObject.fromBrowserObject(_.rootElement))[prop] = value;
     }
 
+    compileAndUpgrade(String html) {
+      _.compile(html);
+      var CustomElements = js.context['CustomElements'];
+      if (CustomElements != null) {
+        CustomElements['upgradeAll'].apply([new js.JsObject.fromBrowserObject(_.rootElement)]);
+      }
+    }
+
     beforeEach((TestBed tb) {
       _ = tb;
     });
@@ -40,14 +48,14 @@ main() {
       registerElement('tests-basic', {'prop-x': 6});
 
       // Create a web component
-      _.compile('<tests-basic></tests-basic>');
+      compileAndUpgrade('<tests-basic></tests-basic>');
       expect(customProp('prop-x')).toEqual(6);
     });
 
 
     it('should bind to Custom Element properties', () {
       registerElement('tests-bound', {'prop-y': 10});
-      _.compile('<tests-bound bind-prop-y=27></tests-bound>');
+      compileAndUpgrade('<tests-bound bind-prop-y=27></tests-bound>');
 
       // Scope has not been digested yet
       expect(customProp('prop-y')).toEqual(10);
@@ -59,22 +67,22 @@ main() {
 
     it('should bind to a non-existent property', () {
       registerElement('tests-empty', {});
-      _.compile('<tests-empty bind-new-prop=27></tests-empty>');
+      compileAndUpgrade('<tests-empty bind-new-prop=27></tests-empty>');
       _.rootScope.apply();
       expect(customProp('new-prop')).toEqual(27);
     });
 
     it('should bind to both directives and properties', () {
       registerElement('tests-double', {});
-      _.compile('<tests-double ng-bind bind-ng-bind="\'hello\'"></tests-double>');
+      compileAndUpgrade('<tests-double ng-bind bind-ng-bind="\'hello\'"></tests-double>');
       _.rootScope.apply();
       expect(customProp('ng-bind')).toEqual("hello");
       expect(_.rootElement).toHaveText('hello');
     });
 
     it('should support two-way bindings for components that trigger a change event', () {
       registerElement('tests-twoway', {});
-      _.compile('<tests-twoway bind-prop="x"></tests-twoway>');
+      compileAndUpgrade('<tests-twoway bind-prop="x"></tests-twoway>');
 
       setCustomProp('prop', 6);
       _.rootElement.dispatchEvent(new Event.eventType('CustomEvent', 'change'));

test/core_dom/web_components_support.js

@@ -0,0 +1,10 @@
+/**
+ * Used to create Javascript Web Components from Dart tests
+ */
+function angularTestsRegisterElement(name, prototype) {
+  // Polymer requires that all prototypes are chained to HTMLElement
+  // https://github.com/Polymer/CustomElements/issues/121
+  prototype.__proto__ = HTMLElement.prototype;
+  prototype.createdCallback = function() {};
+  document.registerElement(name, {prototype: prototype});
+}