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('');
+ compileAndUpgrade('');
expect(customProp('prop-x')).toEqual(6);
});
it('should bind to Custom Element properties', () {
registerElement('tests-bound', {'prop-y': 10});
- _.compile('');
+ compileAndUpgrade('');
// 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('');
+ compileAndUpgrade('');
_.rootScope.apply();
expect(customProp('new-prop')).toEqual(27);
});
it('should bind to both directives and properties', () {
registerElement('tests-double', {});
- _.compile('');
+ compileAndUpgrade('');
_.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('');
+ compileAndUpgrade('');
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});
+}