tests: add inital tests for element attributes

Author: jmcgavin

packages/scoped-custom-element-registry/README.md

@@ -22,7 +22,7 @@ upgrade it.
 Notes/limitations:
 
 - In order to leverage native CE when available, `observedAttributes` handling
-  must be simulated by patching `setAttribute`/`getAttribute` to call
+  must be simulated by patching `setAttribute`/`getAttribute`/`toggleAttribute` to call
   `attributeChangedCallback` manually, since while we can delegate constructors,
   the `observedAttributes` respected by the browser are fixed at define time.
   This means that native reflecting properties are not observable when set via

packages/scoped-custom-element-registry/src/scoped-custom-element-registry.js

@@ -51,7 +51,7 @@ if (!ShadowRoot.prototype.createElement) {
         );
       }
       // Since observedAttributes can't change, we approximate it by patching
-      // set/removeAttribute on the user's class
+      // set/remove/toggleAttribute on the user's class
       const attributeChangedCallback =
         elementClass.prototype.attributeChangedCallback;
       const observedAttributes = new Set(elementClass.observedAttributes || []);
@@ -307,8 +307,8 @@ if (!ShadowRoot.prototype.createElement) {
     };
   };
 
-  // Helper to patch CE class setAttribute/getAttribute to implement
-  // attributeChangedCallback
+  // Helper to patch CE class setAttribute/getAttribute/toggleAttribute to
+  // implement attributeChangedCallback
   const patchAttributes = (
     elementClass,
     observedAttributes,

packages/scoped-custom-element-registry/test/Element.test.html.js

@@ -1,6 +1,11 @@
 import {expect} from '@open-wc/testing';
 
-import {getTestElement, getShadowRoot, getHTML} from './utils.js';
+import {
+  getTestElement,
+  getObservedAttributesTestElement,
+  getShadowRoot,
+  getHTML
+} from './utils.js';
 
 describe('Element', () => {
   describe('global registry', () => {
@@ -104,4 +109,41 @@ describe('Element', () => {
       expect($el.firstElementChild).to.not.be.instanceof(CustomElementClass);
     });
   });
+
+  describe('attributes', () => {
+    it('should call setAttribute', () => {
+      const {tagName, CustomElementClass} = getObservedAttributesTestElement(['foo']);
+      customElements.define(tagName, CustomElementClass);
+      const $el = getHTML('<div></div>');
+      $el.innerHTML = `<${tagName}></${tagName}>`;
+
+      $el.firstElementChild.setAttribute('foo', 'bar');
+
+      expect($el.firstElementChild.getAttribute('foo')).to.equal('bar');
+    });
+    it('should call removeAttribute', () => {
+      const {tagName, CustomElementClass} = getObservedAttributesTestElement(['foo']);
+      customElements.define(tagName, CustomElementClass);
+      const $el = getHTML('<div></div>');
+      $el.innerHTML = `<${tagName} foo></${tagName}>`;
+
+      $el.firstElementChild.removeAttribute('foo');
+
+      expect($el.firstElementChild.hasAttribute('foo')).to.be.false;
+    });
+    it('should call toggleAttribute', () => {
+      const {tagName, CustomElementClass} = getObservedAttributesTestElement(['foo']);
+      customElements.define(tagName, CustomElementClass);
+      const $el = getHTML('<div></div>');
+      $el.innerHTML = `<${tagName}></${tagName}>`;
+
+      $el.firstElementChild.toggleAttribute('foo', false);
+
+      expect($el.firstElementChild.hasAttribute('foo')).to.be.false;
+
+      $el.firstElementChild.toggleAttribute('foo', true);
+
+      expect($el.firstElementChild.hasAttribute('foo')).to.be.true;
+    });
+  });
 });

packages/scoped-custom-element-registry/test/utils.js

@@ -30,6 +30,20 @@ export const getTestElement = () => ({
   CustomElementClass: class extends HTMLElement {},
 });
 
+/**
+ * 
+ * @param {array<string>} observedAttributeNames the names of the attributes you want to observe
+ * @returns {{Klass: typeof HTMLElement, tagName: string}}
+ */
+export const getObservedAttributesTestElement = (observedAttributeNames = []) => ({
+  tagName: getTestTagName(),
+  CustomElementClass: class extends HTMLElement {
+    static get observedAttributes() {
+      return observedAttributeNames;
+    }
+  },
+});
+
 export const getFormAssociatedTestElement = () => ({
   tagName: getTestTagName(),
   CustomElementClass: class extends HTMLElement {