Add forceRegister flag to force an element to fully register when `…

…Polymer` is called. Normally, some work is deferred until the first element instance is created. Add lazy registration tests.
Polymer · Mar 15, 2016 · d53323d · d53323d
1 parent 812db6a
commit d53323d
Show file tree

Hide file tree

Showing 3 changed files with 112 additions and 1 deletion.
diff --git a/src/lib/base.html b/src/lib/base.html
@@ -28,6 +28,9 @@
       this._desugarBehaviors(); // abstract
       this._doBehavior('beforeRegister'); // abstract
       this._registerFeatures();  // abstract
+      if (this.forceRegister) {
+        this.ensureRegistered();
+      }
     },
 
     createdCallback: function() {

diff --git a/test/runner.html b/test/runner.html
@@ -71,7 +71,8 @@
       'unit/dom-bind.html',
       'unit/dom-bind-yield.html',
       'unit/script-after-import-in-head.html',
-      'unit/globals.html'
+      'unit/globals.html',
+      'unit/lazy-register.html'
     ];
 
     if (document.body.createShadowRoot) {

diff --git a/test/unit/lazy-register.html b/test/unit/lazy-register.html
@@ -0,0 +1,107 @@
+<!doctype html>
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<html>
+<head>
+  <meta charset="utf-8">
+  <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
+  <script src="../../../web-component-tester/browser.js"></script>
+  <link rel="import" href="../../polymer.html">
+  <link rel="import" href="behaviors-elements.html">
+<body>
+
+  <script>
+  HTMLImports.whenReady(function() {
+
+    window.XLazy = Polymer({
+      is: 'x-lazy',
+      registered: sinon.spy()
+    });
+
+    window.XEager = Polymer({
+      is: 'x-eager',
+      forceRegister: true,
+      registered: sinon.spy()
+    });
+
+  });
+  </script>
+
+  <dom-module id="x-lazy-style">
+    <template>
+      <style>
+        :host {
+          background: red;
+        }
+      </style>
+      Lazy
+    </template>
+    <script>
+    HTMLImports.whenReady(function() {
+      Polymer({
+        is: 'x-lazy-style'
+      });
+    });
+    </script>
+  </dom-module>
+
+  <dom-module id="x-eager-style">
+    <template>
+      <style>
+        :host {
+          background: blue;
+        }
+      </style>
+      Lazy
+    </template>
+    <script>
+    HTMLImports.whenReady(function() {
+      Polymer({
+        is: 'x-eager-style',
+        forceRegister: true
+      });
+    });
+    </script>
+  </dom-module>
+
+<script>
+
+suite('lazy-register', function() {
+
+  test('not registered until first instance', function() {
+    assert.isFalse(XLazy.prototype.registered.called, 'registered called before instance created');
+    document.createElement('x-lazy');
+    assert.isTrue(XLazy.prototype.registered.called, 'registered not called after instance created');
+  });
+
+  test('registered called at registration time if `forceRegister` is true', function() {
+    assert.isTrue(XEager.prototype.registered.called, 'registered not called before instance created');
+    document.createElement('x-eager');
+    assert.isTrue(XLazy.prototype.registered.calledOnce, 'registered called more than once');
+  });
+
+  test('styles shimmed at first instance', function() {
+    assert.notOk(document.querySelector('style[scope=x-lazy-style]'), 'style shimmed before registration complete');
+    document.createElement('x-lazy-style');
+    assert.ok(document.querySelector('style[scope=x-lazy-style]'), 'style shimmed at first instance');
+  });  
+
+  test('styles shimmed at registration when `forceRegister` is true', function() {
+    assert.ok(document.querySelector('style[scope=x-eager-style]'), 'style shimmed before registration complete');
+    document.createElement('x-eager-style');
+    assert.equal(document.querySelectorAll('style[scope=x-eager-style]').length, 1);
+  });  
+
+});
+
+</script>
+
+</body>
+</html>