Add inherited properties test

libraries/__shared__/webcomponents/src/ce-with-inheritance.js

@@ -0,0 +1,57 @@
+/**
+ * @license
+ * Copyright 2023 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 CEBaseClass extends HTMLElement {
+  set bool(value) {
+    this._bool = value;
+  }
+  get bool() {
+    return this._bool;
+  }
+  set num(value) {
+    this._num = value;
+  }
+  get num() {
+    return this._num;
+  }
+  set str(value) {
+    this._str = value;
+  }
+  get str() {
+    return this._str;
+  }
+  set arr(value) {
+    this._arr = value;
+  }
+  get arr() {
+    return this._arr;
+  }
+  set obj(value) {
+    this._obj = value;
+  }
+  get obj() {
+    return this._obj;
+  }
+  set camelCaseObj(value) {
+    this._camelCaseObj = value;
+  }
+  get camelCaseObj() {
+    return this._camelCaseObj;
+  }
+}
+class CEWithInheritance extends CEBaseClass {}
+customElements.define('ce-with-inheritance', CEWithInheritance);

libraries/angular/meta/expectedResults.json

@@ -1,5 +1,5 @@
 {
-  "success": 32,
+  "success": 34,
   "failed": 0,
   "skipped": 0,
   "error": false,
@@ -12,8 +12,8 @@
     "passed": 16
   },
   "advancedSupport": {
-    "total": 16,
+    "total": 18,
     "failed": 0,
-    "passed": 16
+    "passed": 18
   }
 }

libraries/angular/src/advanced-tests.js

@@ -25,6 +25,7 @@ import {
   ComponentWithChildrenRerender,
   ComponentWithDifferentViews,
   ComponentWithProperties,
+  ComponentWithInheritance,
   ComponentWithUnregistered,
   ComponentWithImperativeEvent,
   ComponentWithDeclarativeEvent
@@ -78,6 +79,17 @@ describe("advanced support", function() {
       let data = wc.camelCaseObj;
       expect(data).to.eql({ label: "passed" });
     });
+
+    it("will pass object data to inherited properties", function() {
+      this.weight = 2;
+      let fixture = TestBed.createComponent(ComponentWithInheritance);
+      fixture.detectChanges();
+      let root = fixture.debugElement.nativeElement;
+      let wc = root.querySelector("#wc");
+      expect(wc.arr).to.eql(["A", "n", "g", "u", "l", "a", "r"]);
+      expect(wc.obj).to.eql({ org: "angular", repo: "angular" });
+    });
+
   });
 
   describe("events", function() {

libraries/angular/src/components.ts

@@ -26,6 +26,7 @@ import {
 import 'ce-without-children';
 import 'ce-with-children';
 import 'ce-with-properties';
+import 'ce-with-inheritance';
 import 'ce-with-event';
 
 @Component({
@@ -105,6 +106,31 @@ export class ComponentWithProperties {
   }
 }
 
+@Component({
+  template: `
+    <div>
+      <ce-with-inheritance id="wc"
+        [bool]="data.bool"
+        [num]="data.num"
+        [str]="data.str"
+        [arr]="data.arr"
+        [obj]="data.obj"
+        [camelCaseObj]="data.camelCaseObj"
+      ></ce-with-inheritance>
+    </div>
+  `
+})
+export class ComponentWithInheritance {
+  data = {
+    bool: true,
+    num: 42,
+    str: 'Angular',
+    arr: ['A', 'n', 'g', 'u', 'l', 'a', 'r'],
+    obj: { org: 'angular', repo: 'angular' },
+    camelCaseObj: { label: "passed" }
+  }
+}
+
 @Component({
   template: `
     <div>

libraries/angularjs/meta/expectedResults.json

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

libraries/angularjs/src/advanced-tests.js

@@ -47,6 +47,15 @@ describe("advanced support", () => {
       let data = wc.camelCaseObj;
       expect(data).to.eql({ label: "passed" });
     });
+
+    it("will pass object data to inherited properties", function() {
+      this.weight = 2;
+      let root = prep("<comp-with-inheritance>")
+      scope.$digest()
+      let wc = root.querySelector('#wc')
+      expect(wc.arr).to.eql(['A', 'n', 'g', 'u', 'l', 'a', 'r']);
+      expect(wc.obj).to.eql({ org: "angular", repo: "angular" });
+    });
   });
 
   describe("events", () => {

libraries/angularjs/src/app.module.js

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

libraries/angularjs/src/components.js

@@ -1,6 +1,7 @@
 import 'ce-without-children';
 import 'ce-with-children';
 import 'ce-with-properties';
+import 'ce-with-inheritance';
 import 'ce-with-event';
 
 const ComponentWithoutChildren = {
@@ -81,6 +82,34 @@ const ComponentWithProps = {
   }
 };
 
+const ComponentWithInheritance = {
+  template: `
+    <div>
+      <ce-with-inheritance id="wc"
+        ng-prop-bool="$ctrl.bool"
+        ng-prop-num="$ctrl.num"
+        ng-prop-str="$ctrl.str"
+        ng-prop-arr="$ctrl.arr"
+        ng-prop-obj="$ctrl.obj"
+        ng-prop-camel-case-obj="$ctrl.camelCaseObj"
+      ></ce-with-inheritance>
+    </div>
+  `,
+  controller: class {
+    constructor() {}
+    $onInit() {
+      angular.extend(this, {
+        bool: true,
+        num: 42,
+        str: 'Angular',
+        arr: ['A', 'n', 'g', 'u', 'l', 'a', 'r'],
+        obj: { org: 'angular', repo: 'angular' },
+        camelCaseObj: { label: "passed" }
+      });
+    }
+  }
+};
+
 const ComponentWithImperativeEvent = {
   template: `
     <div>
@@ -154,6 +183,7 @@ export {
   ComponentWithChildrenRerender,
   ComponentWithDifferentViews,
   ComponentWithProps,
+  ComponentWithInheritance,
   ComponentWithImperativeEvent,
   ComponentWithDeclarativeEvent
 }

libraries/dio/meta/expectedResults.json

@@ -1,5 +1,5 @@
 {
-  "success": 26,
+  "success": 28,
   "failed": 6,
   "skipped": 0,
   "error": false,
@@ -12,8 +12,8 @@
     "passed": 16
   },
   "advancedSupport": {
-    "total": 16,
+    "total": 18,
     "failed": 6,
-    "passed": 10
+    "passed": 12
   }
 }

libraries/dio/src/advanced-tests.js

@@ -25,7 +25,8 @@ import {
   ComponentWithProperties,
   ComponentWithUnregistered,
   ComponentWithImperativeEvent,
-  ComponentWithDeclarativeEvent
+  ComponentWithDeclarativeEvent,
+  ComponentWithInheritance
 } from "./components";
 
 // Setup the test harness. This will get cleaned out with every test.
@@ -72,6 +73,14 @@ describe("advanced support", function() {
       expect(data).to.eql({ label: "passed" });
     });
 
+    it("will pass object data to inherited properties", function() {
+      this.weight = 2;
+      render(<ComponentWithInheritance />, scratch);
+      let wc = scratch.querySelector("#wc");
+      expect(wc.arr).to.eql(["D", "I", "O"]);
+      expect(wc.obj).to.eql({ org: "thysultan", repo: "dio.js" });
+    });
+
   });
 
   describe("events", function() {

libraries/dio/src/components.js

@@ -19,6 +19,7 @@ import { h, render, Component } from 'dio.js';
 import 'ce-without-children';
 import 'ce-with-children';
 import 'ce-with-properties';
+import 'ce-with-inheritance';
 import 'ce-with-event';
 
 export class ComponentWithoutChildren extends Component {
@@ -109,6 +110,31 @@ export class ComponentWithProperties extends Component {
   }
 }
 
+export class ComponentWithInheritance extends Component {
+  render () {
+    const data = {
+      bool: true,
+      num: 42,
+      str: 'DIO',
+      arr: ['D', 'I', 'O'],
+      obj: { org: 'thysultan', repo: 'dio.js' },
+      camelCaseObj: { label: "passed" }
+    };
+    return (
+      <div>
+        <ce-with-inheritance id="wc"
+          bool={data.bool}
+          num={data.num}
+          str={data.str}
+          arr={data.arr}
+          obj={data.obj}
+          camelCaseObj={data.camelCaseObj}
+        ></ce-with-inheritance>
+      </div>
+    );
+  }
+}
+
 export class ComponentWithUnregistered extends Component {
   render () {
     const data = {

libraries/dojo/meta/expectedResults.json

@@ -1,5 +1,5 @@
 {
-  "success": 32,
+  "success": 34,
   "failed": 0,
   "skipped": 0,
   "error": false,
@@ -12,8 +12,8 @@
     "passed": 16
   },
   "advancedSupport": {
-    "total": 16,
+    "total": 18,
     "failed": 0,
-    "passed": 16
+    "passed": 18
   }
 }

libraries/dojo/src/advanced-tests.ts

@@ -18,7 +18,8 @@
 import { expect } from "chai";
 import {
   ComponentWithProperties,
-  ComponentWithDeclarativeEvent
+  ComponentWithDeclarativeEvent,
+  ComponentWithInheritance
 } from "./components";
 
 import renderer, { w } from "@dojo/framework/core/vdom";
@@ -70,6 +71,15 @@ describe("advanced support", function() {
       expect(data).to.eql({ label: "passed" });
     });
 
+    it("will pass object data to inherited properties", function() {
+      this.weight = 2;
+      const r = renderer(() => w(ComponentWithInheritance, {}));
+      r.mount({ domNode: scratch, sync: true });
+      const wc: any = document.querySelector("ce-with-inheritance");
+      expect(wc.arr).to.eql(["d", "o", "j", "o"]);
+      expect(wc.obj).to.eql({ org: "dojo", repo: "dojo" });
+    });
+
   });
 
   describe("events", function() {