Add custom element with method

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

@@ -0,0 +1,40 @@
+/**
+ * @license
+ * Copyright 2017 Google Inc. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+class CEWithoutProperties extends HTMLElement {
+
+    amethod() {
+        this.innerText = 'Success';
+        return 'method';
+    }
+
+    get agetter() {
+        return 'getter';
+    }
+
+    connectedCallback() {
+        this.amethod();
+    }
+
+}
+
+Object.defineProperty(CEWithoutProperties.prototype, 'areadonly', {
+    value: 'readonly',
+    writable: false
+});
+
+customElements.define('ce-without-properties', CEWithoutProperties);

libraries/angular/meta/expectedResults.json

@@ -1,15 +1,15 @@
 {
-  "success": 32,
+  "success": 34,
   "failed": 0,
   "skipped": 0,
   "error": false,
   "disconnected": false,
   "exitCode": 0,
   "score": 100,
   "basicSupport": {
-    "total": 16,
+    "total": 18,
     "failed": 0,
-    "passed": 16
+    "passed": 18
   },
   "advancedSupport": {
     "total": 16,

libraries/angular/src/basic-tests.js

@@ -27,7 +27,8 @@ import {
   ComponentWithProperties,
   ComponentWithUnregistered,
   ComponentWithImperativeEvent,
-  ComponentWithDeclarativeEvent
+  ComponentWithDeclarativeEvent,
+  ComponentWithoutProperties
 } from "./components";
 
 beforeEach(function() {
@@ -40,7 +41,8 @@ beforeEach(function() {
       ComponentWithProperties,
       ComponentWithUnregistered,
       ComponentWithImperativeEvent,
-      ComponentWithDeclarativeEvent
+      ComponentWithDeclarativeEvent,
+      ComponentWithoutProperties
     ],
     schemas: [CUSTOM_ELEMENTS_SCHEMA]
   });
@@ -146,6 +148,17 @@ describe("basic support", function() {
       let data = wc.str || wc.getAttribute("str");
       expect(data).to.eql("Angular");
     });
+
+    it('will not overwrite unwriteable properties', function () {
+      let fixture = TestBed.createComponent(ComponentWithoutProperties);
+      fixture.detectChanges();
+      let root = fixture.debugElement.nativeElement;
+      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');
+    });
   });
 
   describe("events", function() {

libraries/angular/src/components.ts

@@ -27,6 +27,7 @@ import 'ce-without-children';
 import 'ce-with-children';
 import 'ce-with-properties';
 import 'ce-with-event';
+import 'ce-without-properties';
 
 @Component({
   template: `
@@ -105,6 +106,15 @@ export class ComponentWithProperties {
   }
 }
 
+@Component({
+  template: `
+    <div>
+      <ce-without-properties amethod="method" agetter="getter" areadonly="readonly" id="wc"></ce-without-properties>
+    </div>
+  `
+})
+export class ComponentWithoutProperties {}
+
 @Component({
   template: `
     <div>

libraries/angularjs/meta/expectedResults.json

@@ -1,14 +1,14 @@
 {
   "success": 30,
-  "failed": 2,
+  "failed": 4,
   "skipped": 0,
   "error": false,
   "disconnected": false,
   "exitCode": 1,
-  "score": 94,
+  "score": 87,
   "basicSupport": {
-    "total": 16,
-    "failed": 0,
+    "total": 18,
+    "failed": 2,
     "passed": 16
   },
   "advancedSupport": {

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/meta/expectedResults.json

@@ -1,14 +1,14 @@
 {
   "success": 26,
-  "failed": 6,
+  "failed": 8,
   "skipped": 0,
   "error": false,
   "disconnected": false,
   "exitCode": 1,
-  "score": 92,
+  "score": 85,
   "basicSupport": {
-    "total": 16,
-    "failed": 0,
+    "total": 18,
+    "failed": 2,
     "passed": 16
   },
   "advancedSupport": {

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/meta/expectedResults.json

@@ -1,15 +1,15 @@
 {
-  "success": 32,
+  "success": 34,
   "failed": 0,
   "skipped": 0,
   "error": false,
   "disconnected": false,
   "exitCode": 0,
   "score": 100,
   "basicSupport": {
-    "total": 16,
+    "total": 18,
     "failed": 0,
-    "passed": 16
+    "passed": 18
   },
   "advancedSupport": {
     "total": 16,

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/meta/expectedResults.json

@@ -1,14 +1,14 @@
 {
   "success": 30,
-  "failed": 2,
+  "failed": 4,
   "skipped": 0,
   "error": false,
   "disconnected": false,
   "exitCode": 1,
-  "score": 94,
+  "score": 87,
   "basicSupport": {
-    "total": 16,
-    "failed": 0,
+    "total": 18,
+    "failed": 2,
     "passed": 16
   },
   "advancedSupport": {