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';
+    method() {
+        return 'method';
+    }
+
+    get getter() {
+        return 'getter';
     }
 
     connectedCallback() {
-        this.test();
+        this.method();
     }
 
 }
 
-customElements.define('ce-with-methods', CEWithMethods);
+Object.defineProperty(CEWithoutProperties.prototype, 'readonly', {
+    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('method')).to.eql('method');
+      expect(wc.getAttribute('getter')).to.eql('getter');
+      expect(wc.getAttribute('readonly')).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 method="method" getter="getter" readonly="readonly" id="wc"></ce-without-properties>
     </div>
   `
 })
-export class ComponentWithMethods {}
+export class ComponentWithoutProperties {}
 
 @Component({
   template: `

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('method')).to.eql('method');
+      expect(wc.getAttribute('getter')).to.eql('getter');
+      expect(wc.getAttribute('readonly')).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 method="method" getter="getter" readonly="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('method')).to.eql('method');
+      expect(wc.getAttribute('getter')).to.eql('getter');
+      expect(wc.getAttribute('readonly')).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('method')).to.eql('method');
+     expect(wc.getAttribute('getter')).to.eql('getter');
+     expect(wc.getAttribute('readonly')).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"
+        :method.attr="method"
+        :getter.attr="getter"
+        :readonly.attr="readonly"
+      ></ce-without-properties>
     </div>
-  `
+  `,
+  data: function () {
+    return {
+      method: 'method',
+      getter: 'getter',
+      readonly: 'readonly',
+    }
+  }
 })
 
 export const ComponentWithUnregistered = defineComponent({