From d26955b46e0453757873c023dede74253189e1c5 Mon Sep 17 00:00:00 2001
From: Steven Orvell <sorvell@google.com>
Date: Fri, 15 Sep 2017 19:16:23 -0700
Subject: [PATCH] Implement `basic-element` with `properties-changed`

Moves basic property creation and attribute deserialization into properties changed to make it suitable as a base for basic-element.
---
 lib/elements/basic-element.html               |  70 ++--
 lib/mixins/properties-changed.html            | 149 +++++++-
 lib/mixins/property-accessors.html            | 143 ++-----
 test/runner.html                              |   1 +
 ...basic-element-with-property-accessors.html | 360 ++++++++++++++++++
 test/unit/polymer.basic-element.html          |  27 +-
 6 files changed, 585 insertions(+), 165 deletions(-)
 create mode 100644 test/unit/polymer.basic-element-with-property-accessors.html

diff --git a/lib/elements/basic-element.html b/lib/elements/basic-element.html
index d3d6b7001c..d45439ec07 100644
--- a/lib/elements/basic-element.html
+++ b/lib/elements/basic-element.html
@@ -10,7 +10,7 @@
 
 <link rel="import" href="../utils/boot.html">
 <link rel="import" href="../utils/mixin.html">
-<link rel="import" href="../mixins/property-accessors.html">
+<link rel="import" href="../mixins/properties-changed.html">
 
 <script>
 (function() {
@@ -24,33 +24,33 @@
    * @polymer
    * @memberof Polymer
    * @constructor
-   * @implements {Polymer_PropertyAccessors}
+   * @implements {Polymer_PropertiesChanged}
    * @extends HTMLElement
-   * @appliesMixin Polymer.PropertyAccessors
+   * @appliesMixin Polymer.PropertiesChanged
    * @summary Custom element base class that provides minimal starting point
-   * using PropertyAccessors to create properties
+   * using PropertiesChanged to create properties
    */
-   class BasicElement extends Polymer.PropertyAccessors(HTMLElement) {
-
-    static _ensureFinalized(name) {
-      const proto = this.prototype;
-      if (!proto.hasOwnProperty('__finalized')) {
-        proto.__finalized = true;
-        this.finalize(name);
-      }
-    }
+   class BasicElement extends Polymer.PropertiesChanged(HTMLElement) {
 
     /**
      * Implements standard custom elements getter to observes the attributes
-     * listed in `properties`. These are camel to dash cased.
+     * listed in `properties`.
      */
     static get observedAttributes() {
       const props = this.properties;
       return props ? Object.keys(props).map(p => {
-        return this.prototype._attributeNameForProperty(p);
+        return this.prototype._attributeForProperty(p);
       }) : [];
     }
 
+    static _ensureFinalized(name) {
+      const proto = this.prototype;
+      if (!proto.hasOwnProperty('__finalized')) {
+        proto.__finalized = true;
+        this.finalize(name);
+      }
+    }
+
     /**
      * Finalizes an element definition. This includes ensuring property
      * accessors exist on the element prototype and parsing the element
@@ -65,6 +65,19 @@
       }
     }
 
+    /**
+     * Overrides implementation in PropertiesChanged to immediately process
+     * any pending changes to properties and ensure that
+     * `_propertiesChanged` is called.
+     *
+     * @public
+     */
+    ready() {
+      super.ready();
+      this._invalidateProperties();
+      this._validateProperties();
+    }
+
     /**
      * Overrides default behavior and adds a call to `finalize` which lazily
      * configures the element's property accessors.
@@ -76,29 +89,22 @@
     }
 
     /**
-     * Overrides default behavior to use `type` information stored in the
-     * static `properties` object. This allows attributes to be converted to
-     * the coressponding type given in `properties`. Atributes are dash to
-     * camel cased.
+     * Overrides PropertiesChanged method to return type specified in the
+     * static `properties` object for the given property.
+     * @param {string} name Name of property
+     * @return {*} Type to which to deserialize attribute
      *
-     * @param {string} attribute Name of attribute to deserialize.
-     * @param {?string} value of the attribute.
-     * @param {*=} type type to deserialize to.
+     * @protected
      */
-    _attributeToProperty(attribute, value, type) {
-      if (!type) {
-        const property = this._propertyNameForAttribute(attribute);
-        const props = this.__propertyInfo;
-        const info = props && props[property];
-        type = info && info.type || info;
-      }
-      super._attributeToProperty(attribute, value, type);
+    _typeForProperty(name) {
+      const props = this.__propertyInfo;
+      return props && props[name];
     }
 
     /**
      * Called when the element is added to a document.
      * Calls `_enableProperties` to turn on property system from
-     * `PropertyAccessors`.
+     * `PropertiesChanged`.
      */
     connectedCallback() {
       this._enableProperties();
@@ -112,7 +118,7 @@
    }
   /**
    * @constructor
-   * @implements {Polymer_PropertyAccessors}
+   * @implements {Polymer_PropertiesChanged}
    * @extends {HTMLElement}
    */
   Polymer.BasicElement = BasicElement;
diff --git a/lib/mixins/properties-changed.html b/lib/mixins/properties-changed.html
index 3211eaa247..e0fce0eb22 100644
--- a/lib/mixins/properties-changed.html
+++ b/lib/mixins/properties-changed.html
@@ -45,6 +45,61 @@
 
     return class PropertiesChanged extends superClass {
 
+      /**
+       * Creates property accessors for the given property names.
+       * @param {array} props Array of names of accessors.
+       */
+       static createProperties(props) {
+        for (let i=0; i < props.length; i++) {
+          this.prototype._createPropertyAccessor(props[i]);
+        }
+      }
+
+      /**
+       * Creates a setter/getter pair for the named property with its own
+       * local storage.  The getter returns the value in the local storage,
+       * and the setter calls `_setProperty`, which updates the local storage
+       * for the property and enqueues a `_propertiesChanged` callback.
+       *
+       * This method may be called on a prototype or an instance.  Calling
+       * this method may overwrite a property value that already exists on
+       * the prototype/instance by creating the accessor.
+       *
+       * @param {string} property Name of the property
+       * @param {boolean=} readOnly When true, no setter is created; the
+       *   protected `_setProperty` function must be used to set the property
+       * @protected
+       */
+      _createPropertyAccessor(property, readOnly) {
+        if (!this.hasOwnProperty('__dataHasAccessor')) {
+          this.__dataHasAccessor = Object.assign({}, this.__dataHasAccessor);
+        }
+        if (!this.__dataHasAccessor[property]) {
+          this.__dataHasAccessor[property] = true;
+          this._generatePropertyAccessor(property, readOnly);
+        }
+      }
+
+      /**
+       * Generates a property accessor for the given property.
+       * @param {string} property Name of the property
+       * @param {boolean=} readOnly When true, no setter is created
+       */
+      _generatePropertyAccessor(property, readOnly) {
+        Object.defineProperty(this, property, {
+          /* eslint-disable valid-jsdoc */
+          /** @this {PropertiesChanged} */
+          get: function() {
+            return this.__data[property];
+          },
+          /** @this {PropertiesChanged} */
+          set: readOnly ? function() {} : function(value) {
+            this._setProperty(property, value);
+          }
+          /* eslint-enable */
+        });
+      }
+
       constructor() {
         super();
         this.__dataEnabled = false;
@@ -75,12 +130,25 @@
       }
 
       /**
+       * Initializes the local storage for property accessors.
+       *
        * Provided as an override point for performing any setup work prior
        * to initializing the property accessor system.
        *
        * @protected
        */
-      _initializeProperties() {}
+      _initializeProperties() {
+        // Capture instance properties; these will be set into accessors
+        // during first flush. Don't set them here, since we want
+        // these to overwrite defaults/constructor assignments
+        for (let p in this.__dataHasAccessor) {
+          if (this.hasOwnProperty(p)) {
+            this.__dataInstanceProps = this.__dataInstanceProps || {};
+            this.__dataInstanceProps[p] = this[p];
+            delete this[p];
+          }
+        }
+      }
 
       /**
        * Called at ready time with bag of instance properties that overwrote
@@ -254,6 +322,85 @@
         );
       }
 
+      /**
+       * Implements native Custom Elements `attributeChangedCallback` to
+       * set an attribute value to a property via `_attributeToProperty`.
+       *
+       * @param {string} name Name of attribute that changed
+       * @param {?string} old Old attribute value
+       * @param {?string} value New attribute value
+       */
+      attributeChangedCallback(name, old, value) {
+        if (old !== value) {
+          this._attributeToProperty(name, value);
+        }
+      }
+
+      /**
+       * Deserializes an attribute to its associated property.
+       *
+       * This method calls the `_deserializeValue` method to convert the string to
+       * a typed value.
+       *
+       * @param {string} attribute Name of attribute to deserialize.
+       * @param {?string} value of the attribute.
+       * @param {*=} type type to deserialize to, defaults to the value
+       * returned from `_typeForProperty`
+       */
+      _attributeToProperty(attribute, value, type) {
+        const property = this._propertyForAttribute(attribute);
+        this[property] = this._deserializeValue(value, type ||
+          this._typeForProperty(property));
+      }
+
+      /**
+       * Converts a string to a typed JavaScript value.
+       *
+       * This method is called when reading HTML attribute values to
+       * JS properties.  Users may override this method to provide
+       * deserialization for custom `type`s.
+       *
+       * @param {?string} value Value to deserialize.
+       * @param {*=} type Type to deserialize the string to.
+       * @return {*} Typed value deserialized from the provided string.
+       */
+      _deserializeValue(value, type) {
+        return typeof type == 'function' ? type(value) : value;
+      }
+
+      /**
+       * Returns a property name that corresponds to the given attribute.
+       * By default, converts dash to camel case, e.g. `foo-bar` to `fooBar`.
+       * @param {string} attribute Attribute to convert
+       * @return {string} Property name corresponding to the given attribute.
+       *
+       * @protected
+       */
+       _propertyForAttribute(attribute) {
+        return attribute;
+      }
+
+      /**
+       * Returns an attribute name that corresponds to the given property.
+       * By default, converts camel to dash case, e.g. `fooBar` to `foo-bar`.
+       * @param {string} property Property to convert
+       * @return {string} Attribute name corresponding to the given property.
+       *
+       * @protected
+       */
+      _attributeForProperty(property) {
+        return property;
+      }
+
+      /**
+       * Override point to provide a type to which to deserialize a value to
+       * a given property.
+       * @param {string} name Name of property
+       *
+       * @protected
+       */
+       _typeForProperty(name) {} //eslint-disable-line no-unused-vars
+
     };
 
   });
diff --git a/lib/mixins/property-accessors.html b/lib/mixins/property-accessors.html
index 224cecca84..369a636830 100644
--- a/lib/mixins/property-accessors.html
+++ b/lib/mixins/property-accessors.html
@@ -124,17 +124,6 @@
         }
       }
 
-      /**
-       * Creates property accessors for the properties listed in the
-       * `observedProperties` array.
-       * @param {string} props Name of the element
-       */
-      static createProperties(props) {
-        for (let i=0; i < props.length; i++) {
-          this.prototype._createPropertyAccessor(props[i]);
-        }
-      }
-
       constructor() {
         super();
         /** @type {boolean} */
@@ -143,27 +132,15 @@
         this.__dataCounter;
       }
 
-      /**
-       * Implements native Custom Elements `attributeChangedCallback` to
-       * set an attribute value to a property via `_attributeToProperty`.
-       *
-       * @param {string} name Name of attribute that changed
-       * @param {?string} old Old attribute value
-       * @param {?string} value New attribute value
-       */
-      attributeChangedCallback(name, old, value) {
-        if (old !== value) {
-          this._attributeToProperty(name, value);
-        }
-      }
-
       /**
        * Returns a property name that corresponds to the given attribute.
        * By default, converts dash to camel case, e.g. `foo-bar` to `fooBar`.
        * @param {string} attribute Attribute to convert
        * @return {string} Property name corresponding to the given attribute.
+       *
+       * @protected
        */
-      _propertyNameForAttribute(attribute) {
+      _propertyForAttribute(attribute) {
         return caseMap.dashToCamelCase(attribute);
       }
 
@@ -172,16 +149,17 @@
        * By default, converts camel to dash case, e.g. `fooBar` to `foo-bar`.
        * @param {string} property Property to convert
        * @return {string} Attribute name corresponding to the given property.
+       *
+       * @protected
        */
-       _attributeNameForProperty(property) {
+      _attributeForProperty(property) {
         return caseMap.camelToDashCase(property);
       }
 
       /**
-       * Initializes the local storage for property accessors.
-       *
-       * Provided as an override point for performing any setup work prior
-       * to initializing the property accessor system.
+       * Overrides PropertiesChanged implementation to initialize values for
+       * accessors created for values that already existed on the element
+       * prototype.
        *
        * @protected
        */
@@ -192,16 +170,7 @@
           this._initializeProtoProperties(this.__dataProto);
           this.__dataProto = null;
         }
-        // Capture instance properties; these will be set into accessors
-        // during first flush. Don't set them here, since we want
-        // these to overwrite defaults/constructor assignments
-        for (let p in this.__dataHasAccessor) {
-          if (this.hasOwnProperty(p)) {
-            this.__dataInstanceProps = this.__dataInstanceProps || {};
-            this.__dataInstanceProps[p] = this[p];
-            delete this[p];
-          }
-        }
+        super._initializeProperties();
       }
 
       /**
@@ -222,22 +191,6 @@
         }
       }
 
-      /**
-       * Called at ready time with bag of instance properties that overwrote
-       * accessors when the element upgraded.
-       *
-       * The default implementation sets these properties back into the
-       * setter at ready time.  This method is provided as an override
-       * point for customizing or providing more efficient initialization.
-       *
-       * @param {Object} props Bag of property values that were overwritten
-       *   when creating property accessors.
-       * @protected
-       */
-      _initializeInstanceProperties(props) {
-        Object.assign(this, props);
-      }
-
       /**
        * Ensures the element has the given attribute. If it does not,
        * assigns the given value to the attribute.
@@ -265,8 +218,7 @@
       _attributeToProperty(attribute, value, type) {
         // Don't deserialize back to property if currently reflecting
         if (!this.__serializing) {
-          let property = this._propertyNameForAttribute(attribute);
-          this[property] = this._deserializeValue(value, type);
+          super._attributeToProperty(attribute, value, type);
         }
       }
 
@@ -313,6 +265,9 @@
        * HTML attributes.  Users may override this method on Polymer element
        * prototypes to provide serialization for custom types.
        *
+       * Note: The return value of `undefined` is used as a sentinel value to
+       * indicate the attribute should be removed.
+       *
        * @param {*} value Property value to serialize.
        * @return {string | undefined} String serialized from the provided property value.
        */
@@ -348,8 +303,6 @@
        * `properties` configuration object for a given property, and is
        * by convention the constructor for the type to deserialize.
        *
-       * Note: The return value of `undefined` is used as a sentinel value to
-       * indicate the attribute should be removed.
        *
        * @param {?string} value Attribute value to deserialize.
        * @param {*=} type Type to deserialize the string to.
@@ -401,46 +354,22 @@
       /* eslint-enable no-fallthrough */
 
       /**
-       * Creates a setter/getter pair for the named property with its own
-       * local storage.  The getter returns the value in the local storage,
-       * and the setter calls `_setProperty`, which updates the local storage
-       * for the property and enqueues a `_propertiesChanged` callback.
+       * Overrides PropertiesChanged implementation to save existing prototype
+       * property value so that it can be reset.
+       * @param {string} property Name of the property
+       * @param {boolean=} readOnly When true, no setter is created
        *
-       * This method may be called on a prototype or an instance.  Calling
-       * this method may overwrite a property value that already exists on
-       * the prototype/instance by creating the accessor.  When calling on
-       * a prototype, any overwritten values are saved in `__dataProto`,
-       * and it is up to the subclasser to decide how/when to set those
-       * properties back into the accessor.  When calling on an instance,
-       * the overwritten value is set via `_setPendingProperty`, and the
-       * user should call `_invalidateProperties` or `_flushProperties`
+       * When calling on a prototype, any overwritten values are saved in
+       * `__dataProto`, and it is up to the subclasser to decide how/when
+       * to set those properties back into the accessor.  When calling on an
+       * instance, the overwritten value is set via `_setPendingProperty`,
+       * and the user should call `_invalidateProperties` or `_flushProperties`
        * for the values to take effect.
-       *
-       * @param {string} property Name of the property
-       * @param {boolean=} readOnly When true, no setter is created; the
-       *   protected `_setProperty` function must be used to set the property
        * @protected
        */
-      _createPropertyAccessor(property, readOnly) {
-        if (!this.hasOwnProperty('__dataHasAccessor')) {
-          this.__dataHasAccessor = Object.assign({}, this.__dataHasAccessor);
-        }
-        if (!this.__dataHasAccessor[property]) {
-          this.__dataHasAccessor[property] = true;
-          saveAccessorValue(this, property);
-          Object.defineProperty(this, property, {
-            /* eslint-disable valid-jsdoc */
-            /** @this {PropertyAccessors} */
-            get: function() {
-              return this.__data[property];
-            },
-            /** @this {PropertyAccessors} */
-            set: readOnly ? function() {} : function(value) {
-              this._setProperty(property, value);
-            }
-            /* eslint-enable */
-          });
-        }
+      _generatePropertyAccessor(property, readOnly) {
+        saveAccessorValue(this, property);
+        super._generatePropertyAccessor(property, readOnly);
       }
 
       /**
@@ -465,11 +394,8 @@
       }
 
       /**
-       * Calls the `_propertiesChanged` callback with the current set of
-       * pending changes (and old values recorded when pending changes were
-       * set), and resets the pending set of changes. Generally, this method
-       * should not be called in user code.
-       *
+       * Overrides `PropertiesChanged` implementation to only process changes
+       * if any are pending.
        *
        * @protected
        */
@@ -482,16 +408,9 @@
       }
 
       /**
-       * Lifecycle callback called the first time properties are being flushed.
-       * Prior to `ready`, all property sets through accessors are queued and
-       * their effects are flushed after this method returns.
-       *
-       * Users may override this function to implement behavior that is
-       * dependent on the element having its properties initialized, e.g.
-       * from defaults (initialized from `constructor`, `_initializeProperties`),
-       * `attributeChangedCallback`, or values propagated from host e.g. via
-       * bindings.  `super.ready()` must be called to ensure the data system
-       * becomes enabled.
+       * Overrides implementation in PropertiesChanged to call
+       * _flushProperties to immediately process any pending changes to
+       * properties.
        *
        * @public
        */
diff --git a/test/runner.html b/test/runner.html
index 468e043de2..846577aa63 100644
--- a/test/runner.html
+++ b/test/runner.html
@@ -55,6 +55,7 @@
       'unit/behaviors.html',
       'unit/polymer.element.html',
       'unit/polymer.basic-element.html',
+      'unit/polymer.basic-element-with-property-accessors.html',
       'unit/polymer.legacyelement.html',
       'unit/debounce.html',
       'unit/inheritance.html',
diff --git a/test/unit/polymer.basic-element-with-property-accessors.html b/test/unit/polymer.basic-element-with-property-accessors.html
new file mode 100644
index 0000000000..f22d2b8b6d
--- /dev/null
+++ b/test/unit/polymer.basic-element-with-property-accessors.html
@@ -0,0 +1,360 @@
+<!doctype html>
+<!--
+@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
+-->
+<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="../../lib/elements/basic-element.html">
+  <link rel="import" href="../../lib/mixins/property-accessors.html">
+<body>
+
+  <dom-module id="my-element">
+    <script>
+    HTMLImports.whenReady(function() {
+
+      class MyElement extends Polymer.PropertyAccessors(Polymer.BasicElement) {
+
+        static get properties() {
+          return {
+            prop: String
+          };
+        }
+
+        constructor() {
+          super();
+          this._propertiesChanged = sinon.spy();
+          this._tapListener = sinon.spy();
+          this._calledConstructor++;
+          this.prop = 'prop';
+        }
+
+        connectedCallback() {
+          super.connectedCallback();
+          this._calledConnectedCallback++;
+        }
+
+        attributeChangedCallback() {
+          super.attributeChangedCallback.apply(this, arguments);
+          this._callAttributeChangedCallback++;
+        }
+
+        ready() {
+          super.ready();
+          this._ensureAttribute('tabIndex', 0);
+          this.addEventListener('click', (e) => this._tapListener(e));
+          this._calledReady++;
+        }
+
+      }
+
+      MyElement.prototype._calledConstructor = 0;
+      MyElement.prototype._calledConnectedCallback = 0;
+      MyElement.prototype._calledReady = 0;
+      MyElement.prototype._callAttributeChangedCallback = 0;
+
+      customElements.define('my-element', MyElement);
+
+      window.MyElement = MyElement;
+
+    });
+    </script>
+  </dom-module>
+
+
+  <dom-module id="sub-element">
+    <script>
+    HTMLImports.whenReady(function() {
+
+      class SubElement extends window.MyElement {
+
+        static get properties() {
+          return Object.assign({
+            prop2: String
+          }, super.properties);
+        }
+
+        constructor() {
+          super();
+          this._calledConstructor++;
+          this.prop = 'sub';
+          this.prop2 = 'prop2';
+        }
+
+        connectedCallback() {
+          super.connectedCallback();
+          this._calledConnectedCallback++;
+        }
+
+        ready() {
+          super.ready();
+          this._calledReady++;
+          this._ensureAttribute('role', 'button');
+          this.addEventListener('click', (e) => this._tapListener(e));
+        }
+
+      }
+
+      customElements.define('sub-element', SubElement);
+
+      window.SubElement = SubElement;
+    });
+    </script>
+  </dom-module>
+
+  <dom-module id="sub-mixin-element">
+    <script>
+    HTMLImports.whenReady(function() {
+
+    function MyMixin(Base) {
+      return class extends Base {
+
+        static get properties() {
+          return Object.assign({
+            mixin: Number
+          }, super.properties);
+        }
+
+        constructor() {
+          super();
+          this._calledConstructor++;
+          this.mixin = 'mixin';
+        }
+
+        connectedCallback() {
+          super.connectedCallback();
+          this._calledConnectedCallback++;
+        }
+
+        ready() {
+          super.ready();
+          this._calledReady++;
+          this._ensureAttribute('mixinattr', 'mixinattr');
+          this.addEventListener('click', (e) => this._tapListener(e));
+        }
+
+      };
+    }
+
+    class SubMixinElement extends MyMixin(window.SubElement) {
+
+      static get properties() {
+        return Object.assign({
+          prop3: String,
+          camelCase: String
+        }, super.properties);
+      }
+
+      constructor() {
+        super();
+        this._calledConstructor++;
+        this.prop3 = 'prop3';
+      }
+
+      connectedCallback() {
+        super.connectedCallback();
+        this._calledConnectedCallback++;
+      }
+
+      ready() {
+        super.ready();
+        this._calledReady++;
+        this._ensureAttribute('submixinattr', 'submixinattr');
+        this.addEventListener('click', (e) => this._tapListener(e));
+      }
+
+    }
+
+    customElements.define('sub-mixin-element', SubMixinElement);
+
+    window.SubMixinElement = SubMixinElement;
+
+    });
+    </script>
+  </dom-module>
+
+  <test-fixture id="my-element-attr">
+    <template>
+      <my-element prop="attr"></my-element>
+    </template>
+  </test-fixture>
+
+  <test-fixture id="sub-element-attr">
+    <template>
+      <sub-element prop="attr" prop2="attr"></sub-element>
+    </template>
+  </test-fixture>
+
+  <test-fixture id="sub-mixin-element-attr">
+    <template>
+      <sub-mixin-element prop="attr" prop2="attr" prop3="attr" mixin="5" camel-case="camelCase"></sub-mixin-element>
+    </template>
+  </test-fixture>
+
+  <script>
+  suite('class extends Polymer.BasicElement', function() {
+
+    var el;
+
+    setup(function() {
+      el = document.createElement('my-element');
+      document.body.appendChild(el);
+    });
+
+    teardown(function() {
+      document.body.removeChild(el);
+    });
+
+    test('instanceof', function() {
+      assert.instanceOf(el, HTMLElement);
+      assert.instanceOf(el, Polymer.BasicElement);
+      assert.instanceOf(el, window.MyElement);
+    });
+
+    test('lifecycle', function() {
+      assert.equal(el._calledConstructor, 1);
+      assert.equal(el._calledConnectedCallback, 1);
+      assert.equal(el._calledReady, 1);
+      assert.equal(el._callAttributeChangedCallback, 0);
+    });
+
+    test('listeners', function() {
+      el.dispatchEvent(new CustomEvent('click'));
+      assert.equal(el._tapListener.callCount, 1);
+    });
+
+    test('properties', function() {
+      assert.equal(el.prop, 'prop');
+      assert.isTrue(el._propertiesChanged.calledOnce);
+      assert.deepEqual(el._propertiesChanged.args[0][0], {prop: 'prop'});
+    });
+
+    test('attributes', function() {
+      var fixtureEl = fixture('my-element-attr');
+      assert.equal(fixtureEl.prop, 'attr');
+      assert.equal(fixtureEl._callAttributeChangedCallback, 1);
+      assert.isTrue(fixtureEl.hasAttribute('tabindex'));
+    });
+
+  });
+
+  suite('subclass', function() {
+
+    var el;
+
+    setup(function() {
+      el = document.createElement('sub-element');
+      document.body.appendChild(el);
+    });
+
+    teardown(function() {
+      document.body.removeChild(el);
+    });
+
+    test('instanceof', function() {
+      assert.instanceOf(el, HTMLElement);
+      assert.instanceOf(el, Polymer.BasicElement);
+      assert.instanceOf(el, window.MyElement);
+      assert.instanceOf(el, window.SubElement);
+    });
+
+    test('lifecycle', function() {
+      assert.equal(el._calledConstructor, 2);
+      assert.equal(el._calledConnectedCallback, 2);
+      assert.equal(el._calledReady, 2);
+      assert.equal(el._callAttributeChangedCallback, 0);
+    });
+
+    test('listeners', function() {
+      el.dispatchEvent(new CustomEvent('click'));
+      assert.equal(el._tapListener.callCount, 2);
+    });
+
+    test('properties', function() {
+      assert.equal(el.prop, 'sub');
+      assert.equal(el.prop2, 'prop2');
+      assert.isTrue(el._propertiesChanged.calledOnce);
+      assert.deepEqual(el._propertiesChanged.args[0][0], {prop: 'sub', prop2: 'prop2'});
+    });
+
+    test('attributes', function() {
+      var fixtureEl = fixture('sub-element-attr');
+      assert.equal(fixtureEl.prop, 'attr');
+      assert.equal(fixtureEl.prop2, 'attr');
+      assert.equal(fixtureEl._callAttributeChangedCallback, 2);
+      assert.isTrue(fixtureEl.hasAttribute('tabindex'));
+      assert.equal(fixtureEl.getAttribute('role'), 'button');
+    });
+
+  });
+
+  suite('mixin', function() {
+
+    var el;
+
+    setup(function() {
+      el = document.createElement('sub-mixin-element');
+      document.body.appendChild(el);
+    });
+
+    teardown(function() {
+      document.body.removeChild(el);
+    });
+
+    test('instanceof', function() {
+      assert.instanceOf(el, HTMLElement);
+      assert.instanceOf(el, Polymer.BasicElement);
+      assert.instanceOf(el, window.MyElement);
+      assert.instanceOf(el, window.SubElement);
+      assert.instanceOf(el, window.SubMixinElement);
+    });
+
+    test('lifecycle', function() {
+      assert.equal(el._calledConstructor, 4);
+      assert.equal(el._calledConnectedCallback, 4);
+      assert.equal(el._calledReady, 4);
+      assert.equal(el._callAttributeChangedCallback, 0);
+    });
+
+    test('listeners', function() {
+      el.dispatchEvent(new CustomEvent('click'));
+      assert.equal(el._tapListener.callCount, 4);
+    });
+
+    test('properties', function() {
+      assert.equal(el.prop, 'sub');
+      assert.equal(el.prop2, 'prop2');
+      assert.equal(el.mixin, 'mixin');
+      assert.equal(el.prop3, 'prop3');
+      assert.isTrue(el._propertiesChanged.calledOnce);
+      assert.deepEqual(el._propertiesChanged.args[0][0], {prop: 'sub', prop2: 'prop2', mixin: 'mixin', prop3: 'prop3'});
+    });
+
+    test('attributes', function() {
+      var fixtureEl = fixture('sub-mixin-element-attr');
+      assert.strictEqual(fixtureEl.prop, 'attr');
+      assert.strictEqual(fixtureEl.prop2, 'attr');
+      assert.strictEqual(fixtureEl.prop3, 'attr');
+      assert.strictEqual(fixtureEl.camelCase, 'camelCase');
+      assert.strictEqual(fixtureEl.mixin, 5);
+      assert.equal(fixtureEl._callAttributeChangedCallback, 5);
+      assert.isTrue(fixtureEl.hasAttribute('tabindex'));
+      assert.equal(fixtureEl.getAttribute('role'), 'button');
+      assert.equal(fixtureEl.getAttribute('mixinattr'), 'mixinattr');
+    });
+
+  });
+
+
+
+  </script>
+</body>
+</html>
diff --git a/test/unit/polymer.basic-element.html b/test/unit/polymer.basic-element.html
index b4a34bc9a7..98eb9c68ba 100644
--- a/test/unit/polymer.basic-element.html
+++ b/test/unit/polymer.basic-element.html
@@ -14,7 +14,7 @@
   <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
   <script src="../../../web-component-tester/browser.js"></script>
   <link rel="import" href="../../lib/elements/basic-element.html">
-<body>
+  <body>
 
   <dom-module id="my-element">
     <script>
@@ -48,7 +48,6 @@
 
         ready() {
           super.ready();
-          this._ensureAttribute('tabIndex', 0);
           this.addEventListener('click', (e) => this._tapListener(e));
           this._calledReady++;
         }
@@ -96,7 +95,6 @@
         ready() {
           super.ready();
           this._calledReady++;
-          this._ensureAttribute('role', 'button');
           this.addEventListener('click', (e) => this._tapListener(e));
         }
 
@@ -136,7 +134,6 @@
         ready() {
           super.ready();
           this._calledReady++;
-          this._ensureAttribute('mixinattr', 'mixinattr');
           this.addEventListener('click', (e) => this._tapListener(e));
         }
 
@@ -145,8 +142,6 @@
 
     class SubMixinElement extends MyMixin(window.SubElement) {
 
-      static get is() { return ''; }
-
       static get properties() {
         return Object.assign({
           prop3: String,
@@ -168,7 +163,6 @@
       ready() {
         super.ready();
         this._calledReady++;
-        this._ensureAttribute('submixinattr', 'submixinattr');
         this.addEventListener('click', (e) => this._tapListener(e));
       }
 
@@ -196,7 +190,7 @@
 
   <test-fixture id="sub-mixin-element-attr">
     <template>
-      <sub-mixin-element prop="attr" prop2="attr" prop3="attr" mixin="5" camel-case="camelCase"></sub-mixin-element>
+      <sub-mixin-element prop="attr" prop2="attr" prop3="attr" mixin="5"></sub-mixin-element>
     </template>
   </test-fixture>
 
@@ -242,7 +236,6 @@
       var fixtureEl = fixture('my-element-attr');
       assert.equal(fixtureEl.prop, 'attr');
       assert.equal(fixtureEl._callAttributeChangedCallback, 1);
-      assert.isTrue(fixtureEl.hasAttribute('tabindex'));
     });
 
   });
@@ -291,8 +284,6 @@
       assert.equal(fixtureEl.prop, 'attr');
       assert.equal(fixtureEl.prop2, 'attr');
       assert.equal(fixtureEl._callAttributeChangedCallback, 2);
-      assert.isTrue(fixtureEl.hasAttribute('tabindex'));
-      assert.equal(fixtureEl.getAttribute('role'), 'button');
     });
 
   });
@@ -341,15 +332,11 @@
 
     test('attributes', function() {
       var fixtureEl = fixture('sub-mixin-element-attr');
-      assert.equal(fixtureEl.prop, 'attr');
-      assert.equal(fixtureEl.prop2, 'attr');
-      assert.equal(fixtureEl.prop3, 'attr');
-      assert.equal(fixtureEl.camelCase, 'camelCase');
-      assert.equal(fixtureEl.mixin, 5);
-      assert.equal(fixtureEl._callAttributeChangedCallback, 5);
-      assert.isTrue(fixtureEl.hasAttribute('tabindex'));
-      assert.equal(fixtureEl.getAttribute('role'), 'button');
-      assert.equal(fixtureEl.getAttribute('mixinattr'), 'mixinattr');
+      assert.strictEqual(fixtureEl.prop, 'attr');
+      assert.strictEqual(fixtureEl.prop2, 'attr');
+      assert.strictEqual(fixtureEl.prop3, 'attr');
+      assert.strictEqual(fixtureEl.mixin, 5);
+      assert.equal(fixtureEl._callAttributeChangedCallback, 4);
     });
 
   });