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

Author: mrginglymus

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

@@ -15,16 +15,25 @@
  * limitations under the License.
  */
 
-class CEWithMethods extends HTMLElement {
+class CEWithoutProperties extends HTMLElement {
 
-    test() {
-        this.innerText = 'Success';
+    amethod() {
+        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,14 @@ 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');
     });
   });
 

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,18 @@ 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');
+    });
+  });
+
   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,15 @@ 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');
+    })
   });
 
   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/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,19 @@ 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');
+    });
 
     // 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 () {

libraries/svelte/src/basic-tests.js

@@ -24,7 +24,7 @@ import {
   ComponentWithProperties,
   ComponentWithUnregistered,
   ComponentWithImperativeEvent,
-  ComponentWithMethods,
+  ComponentWithoutProperties,
 } from "./components";
 import { tick } from "svelte";
 
@@ -127,9 +127,11 @@ describe("basic support", function() {
     });
 
     it('will not overwrite methods', function () {
-      new ComponentWithMethods({ target: scratch });
+      new ComponentWithoutProperties({ target: scratch });
       const wc = scratch.querySelector('#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');
     })
 
     // it('will set boolean attributes on a Custom Element that has not already been defined and upgraded', function() {

libraries/svelte/src/components.js

@@ -19,7 +19,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 { default as ComponentWithoutChildren } from './components/ComponentWithoutChildren.svelte';
 export { default as ComponentWithChildren } from './components/ComponentWithChildren.svelte';
@@ -29,4 +29,4 @@ export { default as ComponentWithProperties } from './components/ComponentWithPr
 export { default as ComponentWithUnregistered } from './components/ComponentWithUnregistered.svelte';
 export { default as ComponentWithImperativeEvent } from './components/ComponentWithImperativeEvent.svelte';
 export { default as ComponentWithDeclarativeEvent } from './components/ComponentWithDeclarativeEvent.svelte';
-export { default as ComponentWithMethods } from './components/ComponentWithMethods.svelte';
+export { default as ComponentWithoutProperties } from './components/ComponentWithoutProperties.svelte';

libraries/svelte/src/components/ComponentWithMethods.svelte

@@ -0,0 +1 @@
+<ce-with-methods id="wc" method="method" getter="getter" readonly="readonly"></ce-with-methods>

libraries/svelte/src/components/ComponentWithoutProperties.svelte

@@ -25,7 +25,7 @@ import {
   ComponentWithUnregistered,
   ComponentWithImperativeEvent,
   ComponentWithDeclarativeEvent,
-  ComponentWithMethods
+  ComponentWithoutProperties
 } from "./components";
 import { expect } from "chai";
 
@@ -148,11 +148,13 @@ describe("basic support", function() {
       expect(data).to.eql("Vue");
     });
 
-    it('will not overwrite methods', function () {
-     const app = createApp(ComponentWithMethods);
+    it('will not overwrite unwriteable properties', function () {
+     const app = createApp(ComponentWithoutProperties);
      app.mount(scratch);
      const wc = scratch.querySelector('#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');
     })
 
     // it('will set boolean attributes on a Custom Element that has not already been defined and upgraded', function() {

libraries/vue/src/basic-tests.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 const ComponentWithoutChildren = defineComponent({
   template: `
@@ -101,14 +101,23 @@ export const ComponentWithProperties = defineComponent({
   }
 });
 
-export const ComponentWithMethods = defineComponent({
+export const ComponentWithoutProperties = defineComponent({
   template: `
     <div>
-      <ce-with-methods id="wc"
-        :test.attr="true"
-      ></ce-with-methods>
+      <ce-without-properties id="wc"
+        :amethod.attr="method"
+        :agetter.attr="getter"
+        :areadonly.attr="readonly"
+      ></ce-without-properties>
     </div>
-  `
+  `,
+  data: function () {
+    return {
+      method: 'method',
+      getter: 'getter',
+      readonly: 'readonly',
+    }
+  }
 })
 
 export const ComponentWithUnregistered = defineComponent({