From 879772fa28983a88d77a9624dceb5af6ce3dca98 Mon Sep 17 00:00:00 2001
From: James deBoer <james@huronbox.com>
Date: Thu, 31 Jul 2014 12:30:08 -0700
Subject: [PATCH] fix(web components): Support Polymer quirks

Closes #1292
---
 karma.conf.js                           |  1 +
 test/core_dom/web_components_spec.dart  | 22 +++++++++++++++-------
 test/core_dom/web_components_support.js | 10 ++++++++++
 3 files changed, 26 insertions(+), 7 deletions(-)
 create mode 100644 test/core_dom/web_components_support.js

diff --git a/karma.conf.js b/karma.conf.js
index 4a62c722b..3797fa676 100644
--- a/karma.conf.js
+++ b/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',
diff --git a/test/core_dom/web_components_spec.dart b/test/core_dom/web_components_spec.dart
index e7a63c934..6cad2a403 100644
--- a/test/core_dom/web_components_spec.dart
+++ b/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,14 +67,14 @@ 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');
@@ -74,7 +82,7 @@ main() {
 
     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'));
diff --git a/test/core_dom/web_components_support.js b/test/core_dom/web_components_support.js
new file mode 100644
index 000000000..4f09d1190
--- /dev/null
+++ b/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});
+}