[ci skip] Add alacarte usage smoke tests.

Polymer · May 13, 2017 · e54bc5f · e54bc5f
1 parent 580c040
commit e54bc5f
Show file tree

Hide file tree

Showing 4 changed files with 366 additions and 0 deletions.
diff --git a/test/smoke/alacarte-property-accessors.html b/test/smoke/alacarte-property-accessors.html
@@ -0,0 +1,57 @@
+<!--
+@license
+Copyright (c) 2017 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
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width">
+  <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
+  <link rel="import" href="../../lib/mixins/property-accessors.html">
+</head>
+<body>
+
+<script>
+
+  // Apply mixins to base class
+  class MyElement extends Polymer.PropertyAccessors(HTMLElement) {
+
+    // Declare observed attributes
+    static get observedAttributes() { return ['foo', 'bar']; }
+
+    // Enable accessors and flush any queued property changes
+    connectedCallback() {
+      this._enableProperties();
+    }
+
+    // React to changes
+    _propertiesChanged(currentProps, changedProps, oldProps) {
+      for (let p in changedProps) {
+        this.innerHTML += `${p}: ${changedProps[p]}<br>`;
+      }
+    }
+
+  }
+
+  // Generate property accessors for all observed attributes
+  MyElement.createPropertiesForAttributes();
+
+  // Register element
+  customElements.define('my-element', MyElement);
+
+</script>
+
+<my-element foo="5" bar="10"></my-element>
+
+<script>
+  document.querySelector('my-element').foo = 20;
+</script>
+
+</body>
+</html>
diff --git a/test/smoke/alacarte-property-effects-ordering.html b/test/smoke/alacarte-property-effects-ordering.html
@@ -0,0 +1,129 @@
+<!--
+@license
+Copyright (c) 2017 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
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width">
+  <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
+  <link rel="import" href="../../polymer-element.html">
+</head>
+<body>
+
+<template id="my-element-template">
+  <style>
+     :host {
+       display: block;
+     }
+    #counter {
+      padding: 10px;
+      background: lightblue;
+    }
+  </style>
+  <!-- can use declarative event listeners -->
+  <button on-click="handleIncrement">Increment!</button>
+  <span id="counter">[[limited]]</span>
+  <x-a prop="[[limited]]"></x-a>
+  <x-b></x-b>
+</template>
+
+<script>
+
+  customElements.define('x-a', class extends Polymer.Element {
+    static get observers() { return ['propChanged(prop)']; }
+    constructor() {
+      super();
+      this.prop = 99;
+    }
+    propChanged(prop) {
+      console.log(this.localName, 'propChanged', prop);
+      this.textContent = prop;
+    }
+    ready() {
+      super.ready();
+      console.log(this.localName, 'ready');
+    }
+  });
+
+  customElements.define('x-b', class extends Polymer.Element {
+    static get observers() { return ['propChanged(prop)']; }
+    constructor() {
+      super();
+      this.prop = 77;
+    }
+    propChanged(prop) {
+      console.log(this.localName, 'propChanged', prop);
+      this.textContent = prop;
+    }
+    ready() {
+      super.ready();
+      console.log(this.localName, 'ready');
+    }
+  });
+
+  let template = document.getElementById('my-element-template');
+
+  // Apply mixins to base class
+  let MyBaseClass = Polymer.PropertyEffects(HTMLElement);
+
+  class MyElement extends MyBaseClass {
+
+    // Declare observed attributes
+    static get observedAttributes() { return ['counter', 'limit']; }
+
+    constructor() {
+      super();
+      this.counter = 0;
+      this.limit = Infinity;
+    }
+
+    // Enable accessors and flush any queued property changes
+    connectedCallback() {
+      this._enableProperties();
+    }
+
+    // Called once by PropertyAccessors during first property flush
+    // Do one-time work like setting up Shadow DOM
+    ready() {
+      console.log(this.localName, 'before ready');
+      this.dom = this._stampTemplate(template);
+      super.ready();
+      console.log(this.localName, 'after ready');
+    }
+
+    _readyClients() {
+      this.attachShadow({mode: 'open'}).appendChild(this.dom);
+      super._readyClients();
+    }
+
+    computeLimited(counter, limit) {
+      return Math.min(counter, limit);
+    }
+
+    handleIncrement() {
+      this.counter++;
+    }
+
+  }
+
+  // Generate property accessors for all observed attributes
+  MyElement.createComputedProperty('limited', 'computeLimited(counter, limit)');
+  MyElement.bindTemplate(template);
+
+  // Register element
+  customElements.define('my-element', MyElement);
+
+</script>
+
+
+<my-element counter="10" limit="20"></my-element>
+
+</body>
+</html>
diff --git a/test/smoke/alacarte-property-effects.html b/test/smoke/alacarte-property-effects.html
@@ -0,0 +1,86 @@
+<!--
+@license
+Copyright (c) 2017 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
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width">
+  <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
+  <link rel="import" href="../../lib/mixins/property-effects.html">
+</head>
+<body>
+
+<template id="my-element-template">
+  <style>
+     :host {
+       display: block;
+     }
+    #counter {
+      padding: 10px;
+      background: lightblue;
+    }
+  </style>
+  <!-- can use declarative event listeners -->
+  <button on-click="handleIncrement">Increment!</button>
+  <span id="counter">[[limited]]</span>
+</template>
+
+<script>
+
+  let template = document.getElementById('my-element-template');
+
+  class MyElement extends Polymer.PropertyEffects(HTMLElement) {
+
+    // Declare observed attributes
+    static get observedAttributes() { return ['counter', 'limit']; }
+
+    constructor() {
+      super();
+      this.counter = 0;
+      this.limit = Infinity;
+    }
+
+    // Enable accessors and flush any queued property changes
+    connectedCallback() {
+      this._enableProperties();
+    }
+
+    // Called once by PropertyAccessors during first property flush
+    // Do one-time work like setting up Shadow DOM
+    ready() {
+      this.dom = this._stampTemplate(template);
+      this.attachShadow({mode: 'open'}).appendChild(this.dom);
+      super.ready();
+    }
+
+    computeLimited(counter, limit) {
+      return Math.min(counter, limit);
+    }
+
+    handleIncrement() {
+      this.counter++;
+    }
+
+  }
+
+  // Generate property accessors for all observed attributes
+  MyElement.createComputedProperty('limited', 'computeLimited(counter, limit)');
+  MyElement.bindTemplate(template);
+
+  // Register element
+  customElements.define('my-element', MyElement);
+
+</script>
+
+
+<my-element counter="10" limit="20"></my-element>
+
+</body>
+</html>
diff --git a/test/smoke/alacarte-template-stamp.html b/test/smoke/alacarte-template-stamp.html
@@ -0,0 +1,94 @@
+<!--
+@license
+Copyright (c) 2017 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
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width">
+  <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
+  <link rel="import" href="../../lib/mixins/property-accessors.html">
+  <link rel="import" href="../../lib/mixins/template-stamp.html">
+</head>
+<body>
+
+<template id="my-element-template">
+  <style>
+     :host {
+       display: block;
+     }
+    #counter {
+      padding: 10px;
+      background: lightblue;
+    }
+  </style>
+  <!-- can use declarative event listeners -->
+  <button on-click="handleIncrement">Increment!</button>
+  <span id="counter"></span>
+</template>
+
+<script>
+
+  // Apply mixins to base class
+  let MyBaseClass =
+    Polymer.TemplateStamp(
+      Polymer.PropertyAccessors(
+        HTMLElement));
+
+  class MyElement extends MyBaseClass {
+
+    // Declare observed attributes
+    static get observedAttributes() { return ['counter', 'limit']; }
+
+    constructor() {
+      super();
+      this.counter = 0;
+      this.limit = Infinity;
+    }
+
+    // Enable accessors and flush any queued property changes
+    connectedCallback() {
+      this._enableProperties();
+    }
+
+    // Called once by PropertyAccessors during first property flush
+    // Do one-time work like setting up Shadow DOM
+    ready() {
+      let template = document.getElementById('my-element-template');
+      this.dom = this._stampTemplate(template);
+      this.attachShadow({mode: 'open'}).appendChild(this.dom);
+      super.ready();
+    }
+
+    // React to changes
+    _propertiesChanged(currentProps, changedProps, oldProps) {
+      // Can use this.$ to access id'ed nodes in template
+      this.dom.$.counter.textContent =
+        Math.min(currentProps.counter, currentProps.limit);
+    }
+
+    handleIncrement() {
+      this.counter++;
+    }
+
+  }
+
+  // Generate property accessors for all observed attributes
+  MyElement.createPropertiesForAttributes();
+
+  // Register element
+  customElements.define('my-element', MyElement);
+
+</script>
+
+
+<my-element counter="10" limit="20"></my-element>
+
+</body>
+</html>