Switch to more comprehensive tests of setting attributes sharing names with unwriteable properties

Author: mrginglymus

libraries/__shared__/webcomponents/src/ce-with-methods.js renamed to libraries/__shared__/webcomponents/src/ce-without-properties.js

@@ -15,16 +15,26 @@
  * limitations under the License.
  */
 
-class CEWithMethods extends HTMLElement {
+class CEWithoutProperties extends HTMLElement {
 
-    test() {
+    amethod() {
         this.innerText = 'Success';
+        return 'method';
+    }
+
+    get agetter() {
+        return 'getter';
     }
 
     connectedCallback() {
-        this.test();
+        this.amethod();
     }
 
 }
 
-customElements.define('ce-with-methods', CEWithMethods);
+Object.defineProperty(CEWithoutProperties.prototype, 'areadonly', {
+    value: 'readonly',
+    writable: false
+});
+
+customElements.define('ce-without-properties', CEWithoutProperties);

libraries/angular/src/basic-tests.js

@@ -28,7 +28,7 @@ import {
   ComponentWithUnregistered,
   ComponentWithImperativeEvent,
   ComponentWithDeclarativeEvent,
-  ComponentWithMethods
+  ComponentWithoutProperties
 } from "./components";
 
 beforeEach(function() {
@@ -42,7 +42,7 @@ beforeEach(function() {
       ComponentWithUnregistered,
       ComponentWithImperativeEvent,
       ComponentWithDeclarativeEvent,
-      ComponentWithMethods
+      ComponentWithoutProperties
     ],
     schemas: [CUSTOM_ELEMENTS_SCHEMA]
   });
@@ -149,11 +149,15 @@ describe("basic support", function() {
       expect(data).to.eql("Angular");
     });
 
-    it('will not overwrite methods', function () {
-      let fixture = TestBed.createComponent(ComponentWithMethods);
+    it('will not overwrite unwriteable properties', function () {
+      let fixture = TestBed.createComponent(ComponentWithoutProperties);
       fixture.detectChanges();
       let root = fixture.debugElement.nativeElement;
-      expect(root.innerText).to.eql('Success')
+      let wc = root.querySelector("#wc");
+      expect(wc.getAttribute('amethod')).to.eql('method');
+      expect(wc.getAttribute('agetter')).to.eql('getter');
+      expect(wc.getAttribute('areadonly')).to.eql('readonly');
+      expect(wc.innerHTML).to.eql('Success');
     });
   });
 

libraries/angular/src/components.ts

@@ -27,7 +27,7 @@ import 'ce-without-children';
 import 'ce-with-children';
 import 'ce-with-properties';
 import 'ce-with-event';
-import 'ce-with-methods';
+import 'ce-without-properties';
 
 @Component({
   template: `
@@ -109,11 +109,11 @@ export class ComponentWithProperties {
 @Component({
   template: `
     <div>
-      <ce-with-methods [test]="true"></ce-with-methods>
+      <ce-without-properties amethod="method" agetter="getter" areadonly="readonly" id="wc"></ce-without-properties>
     </div>
   `
 })
-export class ComponentWithMethods {}
+export class ComponentWithoutProperties {}
 
 @Component({
   template: `

libraries/angularjs/src/app.module.js

@@ -6,6 +6,7 @@ import {
   ComponentWithChildrenRerender,
   ComponentWithDifferentViews,
   ComponentWithProps,
+  ComponentWithoutProps,
   ComponentWithImperativeEvent,
   ComponentWithDeclarativeEvent
 } from './components';
@@ -16,6 +17,7 @@ export default angular.module('ce-tests', [])
 .component('compWithChildrenRerender', ComponentWithChildrenRerender)
 .component('compWithDifferentViews', ComponentWithDifferentViews)
 .component('compWithProps', ComponentWithProps)
+.component('compWithoutProps', ComponentWithoutProps)
 .component('compWithImperativeEvent', ComponentWithImperativeEvent)
 .component('compWithDeclarativeEvent', ComponentWithDeclarativeEvent)
 .name;

libraries/angularjs/src/basic-tests.js

@@ -113,6 +113,19 @@ describe("basic support", () => {
     });
   });
 
+  describe("without properties", () => {
+    it('will not overwrite unwriteable properties', function () {
+      this.weight = 3;
+      const comp = compile("<comp-without-props>")(scope);
+      scope.$digest();
+      const wc = comp[0].querySelector("#wc");
+      expect(wc.getAttribute('amethod')).to.eql('method');
+      expect(wc.getAttribute('agetter')).to.eql('getter');
+      expect(wc.getAttribute('areadonly')).to.eql('readonly');
+      expect(wc.innerHTML).to.eql('Success');
+    });
+  });
+
   describe("events", () => {
     it("can imperatively listen to a DOM event dispatched by a Custom Element", function() {
       this.weight = 3;

libraries/angularjs/src/components.js

@@ -81,6 +81,28 @@ const ComponentWithProps = {
   }
 };
 
+const ComponentWithoutProps = {
+  template: `
+    <div>
+      <ce-without-properties id="wc"
+        ng-attr-amethod="{{ $ctrl.method }}"
+        ng-attr-agetter="{{ $ctrl.getter }}"
+        ng-attr-areadonly="{{ $ctrl.readonly }}"
+      ></ce-without-properties>
+    </div>
+  `,
+  controller: class {
+    constructor() {}
+    $onInit() {
+      angular.extend(this, {
+        method: 'method',
+        getter: 'getter',
+        readonly: 'readonly'
+      })
+    }
+  }
+}
+
 const ComponentWithImperativeEvent = {
   template: `
     <div>
@@ -154,6 +176,7 @@ export {
   ComponentWithChildrenRerender,
   ComponentWithDifferentViews,
   ComponentWithProps,
+  ComponentWithoutProps,
   ComponentWithImperativeEvent,
   ComponentWithDeclarativeEvent
 }

libraries/dio/src/basic-tests.js

@@ -25,7 +25,8 @@ import {
   ComponentWithProperties,
   ComponentWithUnregistered,
   ComponentWithImperativeEvent,
-  ComponentWithDeclarativeEvent
+  ComponentWithDeclarativeEvent,
+  ComponentWithoutProperties
 } from "./components";
 
 // Setup the test harness. This will get cleaned out with every test.
@@ -128,6 +129,16 @@ describe("basic support", function() {
       let data = wc.str || wc.getAttribute("str");
       expect(data).to.eql("DIO");
     });
+
+    it('will not overwrite unwriteable properties', function () {
+      render(<ComponentWithoutProperties />, scratch);
+      console.log(scratch);
+      let wc = scratch.querySelector("#wc");
+      expect(wc.getAttribute('amethod')).to.eql('method');
+      expect(wc.getAttribute('agetter')).to.eql('getter');
+      expect(wc.getAttribute('areadonly')).to.eql('readonly');
+      expect(wc.innerHTML).to.eql('Success');
+    })
   });
 
   describe("events", function() {

libraries/dio/src/components.js

@@ -20,6 +20,7 @@ import 'ce-without-children';
 import 'ce-with-children';
 import 'ce-with-properties';
 import 'ce-with-event';
+import 'ce-without-properties';
 
 export class ComponentWithoutChildren extends Component {
   render() {
@@ -109,6 +110,16 @@ export class ComponentWithProperties extends Component {
   }
 }
 
+export class ComponentWithoutProperties extends Component {
+  render () {
+    return (
+      <div>
+        <ce-without-properties id="wc" amethod="method" agetter="getter" areadonly="readonly" />
+      </div>
+    )
+  }
+}
+
 export class ComponentWithUnregistered extends Component {
   render () {
     const data = {

libraries/dojo/src/basic-tests.ts

@@ -22,7 +22,8 @@ import {
   ComponentWithChildrenRerender,
   ComponentWithDifferentViews,
   ComponentWithProperties,
-  ComponentWithImperativeEvent
+  ComponentWithImperativeEvent,
+  ComponentWithoutProperties
 } from "./components";
 
 import renderer, { w } from "@dojo/framework/core/vdom";
@@ -128,6 +129,16 @@ describe("basic support", function() {
       const data = wc.getAttribute("str");
       expect(data).to.eql("Dojo");
     });
+
+    it('will not overwrite unwriteable properties', function () {
+      const r = renderer(() => w(ComponentWithoutProperties, {}));
+      r.mount({ domNode: scratch, sync: true });
+      const wc: any = document.querySelector("ce-without-properties");
+      expect(wc.getAttribute('amethod')).to.eql('method');
+      expect(wc.getAttribute('agetter')).to.eql('getter');
+      expect(wc.getAttribute('areadonly')).to.eql('readonly');
+      expect(wc.innerHTML).to.eql('Success');
+    });
   });
 
   describe("events", function() {

libraries/dojo/src/components.ts

@@ -21,6 +21,7 @@ import 'ce-without-children';
 import 'ce-with-children';
 import 'ce-with-properties';
 import 'ce-with-event';
+import 'ce-without-properties';
 
 const factory = create({ icache });
 
@@ -67,6 +68,15 @@ export const ComponentWithProperties = factory(() => {
   return v('ce-with-properties', data);
 });
 
+export const ComponentWithoutProperties = factory(() => {
+  const data = {
+    amethod: 'method',
+    agetter: 'getter',
+    areadonly: 'readonly'
+  };
+  return v('ce-without-properties', data);
+})
+
 export const ComponentWithUnregistered = factory(() => {
   const data = {
     bool: true,

libraries/hybrids/src/basic-tests.js

@@ -25,6 +25,7 @@ import {
   ComponentWithDifferentViews,
   ComponentWithProperties,
   ComponentWithDeclarativeEvent,
+  ComponentWithoutProperties,
 } from "./components";
 
 describe("basic support", function() {
@@ -165,6 +166,25 @@ describe("basic support", function() {
     });
   });
 
+  describe('without properties', function () {
+    define("component-without-properties", ComponentWithoutProperties);
+
+    beforeEach(() => {
+      root.appendChild(document.createElement("component-without-properties"));
+    });
+
+    it('will not overwrite unwriteable properties', function () {
+      this.weight = 3;
+      requestAnimationFrame(() => {
+        const wc = root.firstElementChild.shadowRoot.querySelector('#wc');
+        expect(wc.getAttribute('amethod')).to.eql('method');
+        expect(wc.getAttribute('agetter')).to.eql('getter');
+        expect(wc.getAttribute('areadonly')).to.eql('readonly');
+        expect(wc.innerHTML).to.eql('Success');
+      })
+    });
+  });
+
   describe("events", function() {
     define("component-with-declarative-event", ComponentWithDeclarativeEvent);
 

libraries/hybrids/src/components.js

@@ -19,6 +19,7 @@ import 'ce-without-children';
 import 'ce-with-children';
 import 'ce-with-properties';
 import 'ce-with-event';
+import 'ce-without-properties';
 
 import { html } from 'hybrids';
 
@@ -62,6 +63,17 @@ export const ComponentWithProperties = {
   `,
 };
 
+export const ComponentWithoutProperties = {
+  render: () => html`
+    <ce-without-properties
+      id="wc"
+      amethod="method"
+      agetter="getter"
+      areadonly="readonly"
+    ></ce-without-properties>
+  `
+}
+
 export const ComponentWithDeclarativeEvent = {
   lowercaseHandled: false,
   kebabHandled: false,

libraries/react/src/basic-tests.js

@@ -29,7 +29,7 @@ import {
   ComponentWithUnregistered,
   ComponentWithImperativeEvent,
   ComponentWithDeclarativeEvent,
-  ComponentWithMethods,
+  ComponentWithoutProperties,
 } from "./components";
 
 // Setup the test harness. This will get cleaned out with every test.
@@ -199,18 +199,20 @@ describe("basic support", function () {
       expect(data).to.eql("React");
     });
 
-    it('will not overwrite methods', function () {
-      let root;
+    it('will not overwrite unwriteable properties', function () {
+      let wc;
       render(
-        <ComponentWithMethods
+        <ComponentWithoutProperties
           ref={(current) => {
-            root = current;
+            wc = current;
           }}
         />
       )
-      let wc = root.wc;
-      expect(wc.innerText).to.eql('Success');
-    })
+      expect(wc.getAttribute('amethod')).to.eql('method');
+      expect(wc.getAttribute('agetter')).to.eql('getter');
+      expect(wc.getAttribute('areadonly')).to.eql('readonly');
+      expect(wc.innerHTML).to.eql('Success');
+    });
 
     // TODO: Is it the framework's responsibility to check if the underlying
     // property is defined? Or should it just always assume it is and do its

libraries/react/src/components.js

@@ -20,7 +20,7 @@ import 'ce-without-children';
 import 'ce-with-children';
 import 'ce-with-properties';
 import 'ce-with-event';
-import 'ce-with-methods';
+import 'ce-without-properties';
 
 export class ComponentWithoutChildren extends Component {
   render() {
@@ -111,13 +111,11 @@ export class ComponentWithProperties extends Component {
   }
 }
 
-export class ComponentWithMethods extends Component {
-  render() {
-    return <div>
-      <ce-with-methods test ref={(el) => this.wc = el}></ce-with-methods>
-    </div>
-  }
-}
+export const ComponentWithoutProperties = React.forwardRef(({}, ref) => {
+  return <div>
+    <ce-without-properties amethod="method" agetter="getter" areadonly="readonly" ref={ref}></ce-without-properties>
+  </div>
+});
 
 export class ComponentWithUnregistered extends Component {
   render () {