diff --git a/libraries/__shared__/webcomponents/src/ce-with-inheritance.js b/libraries/__shared__/webcomponents/src/ce-with-inheritance.js new file mode 100644 index 0000000000..cabad086ed --- /dev/null +++ b/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); diff --git a/libraries/angular/meta/expectedResults.json b/libraries/angular/meta/expectedResults.json index 755586be4b..aa7948790a 100644 --- a/libraries/angular/meta/expectedResults.json +++ b/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 } } \ No newline at end of file diff --git a/libraries/angular/src/advanced-tests.js b/libraries/angular/src/advanced-tests.js index f0f516dec1..bd6444672f 100644 --- a/libraries/angular/src/advanced-tests.js +++ b/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() { diff --git a/libraries/angular/src/components.ts b/libraries/angular/src/components.ts index fbb4cfe45e..6205ae4765 100644 --- a/libraries/angular/src/components.ts +++ b/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: ` +
+ +
+ ` +}) +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: `
diff --git a/libraries/angularjs/meta/expectedResults.json b/libraries/angularjs/meta/expectedResults.json index c15d4478b5..e78773a7bf 100644 --- a/libraries/angularjs/meta/expectedResults.json +++ b/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 } } \ No newline at end of file diff --git a/libraries/angularjs/src/advanced-tests.js b/libraries/angularjs/src/advanced-tests.js index f0b98d8949..90d824b69c 100644 --- a/libraries/angularjs/src/advanced-tests.js +++ b/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("") + 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", () => { diff --git a/libraries/angularjs/src/app.module.js b/libraries/angularjs/src/app.module.js index 5ad040272f..478f5bb1a2 100644 --- a/libraries/angularjs/src/app.module.js +++ b/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; diff --git a/libraries/angularjs/src/components.js b/libraries/angularjs/src/components.js index f7f7a0f369..870c85f957 100644 --- a/libraries/angularjs/src/components.js +++ b/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: ` +
+ +
+ `, + 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: `
@@ -154,6 +183,7 @@ export { ComponentWithChildrenRerender, ComponentWithDifferentViews, ComponentWithProps, + ComponentWithInheritance, ComponentWithImperativeEvent, ComponentWithDeclarativeEvent } diff --git a/libraries/dio/meta/expectedResults.json b/libraries/dio/meta/expectedResults.json index 33d25e192e..fb9150a507 100644 --- a/libraries/dio/meta/expectedResults.json +++ b/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 } } \ No newline at end of file diff --git a/libraries/dio/src/advanced-tests.js b/libraries/dio/src/advanced-tests.js index b8ed66cd9a..b76087f80a 100644 --- a/libraries/dio/src/advanced-tests.js +++ b/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(, 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() { diff --git a/libraries/dio/src/components.js b/libraries/dio/src/components.js index 78df469ca7..696082b5c1 100644 --- a/libraries/dio/src/components.js +++ b/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 ( +
+ +
+ ); + } +} + export class ComponentWithUnregistered extends Component { render () { const data = { diff --git a/libraries/dojo/meta/expectedResults.json b/libraries/dojo/meta/expectedResults.json index 755586be4b..aa7948790a 100644 --- a/libraries/dojo/meta/expectedResults.json +++ b/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 } } \ No newline at end of file diff --git a/libraries/dojo/src/advanced-tests.ts b/libraries/dojo/src/advanced-tests.ts index e8bfb1eb53..e4da4fefd1 100644 --- a/libraries/dojo/src/advanced-tests.ts +++ b/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() { diff --git a/libraries/dojo/src/components.ts b/libraries/dojo/src/components.ts index 436bef0f36..8a324240d7 100644 --- a/libraries/dojo/src/components.ts +++ b/libraries/dojo/src/components.ts @@ -20,6 +20,7 @@ import icache from '@dojo/framework/core/middleware/icache'; import 'ce-without-children'; import 'ce-with-children'; import 'ce-with-properties'; +import 'ce-with-inheritance'; import 'ce-with-event'; const factory = create({ icache }); @@ -67,6 +68,18 @@ export const ComponentWithProperties = factory(() => { return v('ce-with-properties', data); }); +export const ComponentWithInheritance = factory(() => { + const data = { + bool: true, + num: 42, + str: 'Dojo', + arr: ['d', 'o', 'j', 'o'], + obj: { org: 'dojo', repo: 'dojo' }, + camelCaseObj: { label: "passed" } + }; + return v('ce-with-inheritance', data); +}); + export const ComponentWithUnregistered = factory(() => { const data = { bool: true, diff --git a/libraries/hybrids/meta/expectedResults.json b/libraries/hybrids/meta/expectedResults.json index c15d4478b5..14aaf05758 100644 --- a/libraries/hybrids/meta/expectedResults.json +++ b/libraries/hybrids/meta/expectedResults.json @@ -1,19 +1,19 @@ { "success": 30, - "failed": 2, + "failed": 4, "skipped": 0, "error": false, "disconnected": false, "exitCode": 1, - "score": 94, + "score": 89, "basicSupport": { "total": 16, "failed": 0, "passed": 16 }, "advancedSupport": { - "total": 16, - "failed": 2, + "total": 18, + "failed": 4, "passed": 14 } } \ No newline at end of file diff --git a/libraries/hybrids/src/advanced-tests.js b/libraries/hybrids/src/advanced-tests.js index 7caa0d6f8e..58f3b6ee6c 100644 --- a/libraries/hybrids/src/advanced-tests.js +++ b/libraries/hybrids/src/advanced-tests.js @@ -20,6 +20,7 @@ import { define } from "hybrids"; import { ComponentWithProperties, + ComponentWithInheritance, ComponentWithDeclarativeEvent, } from "./components"; @@ -43,12 +44,10 @@ describe("advanced support", function() { describe("attributes and properties", function() { define("component-with-properties", ComponentWithProperties); - - beforeEach(() => { - root.appendChild(document.createElement("component-with-properties")); - }) + define("component-with-inheritance", ComponentWithInheritance); it("will pass array data as a property", function(done) { + root.appendChild(document.createElement("component-with-properties")); this.weight = 2; requestAnimationFrame(() => { const wc = root.firstElementChild.shadowRoot.querySelector('#wc'); @@ -59,6 +58,7 @@ describe("advanced support", function() { }); it("will pass object data as a property", function(done) { + root.appendChild(document.createElement("component-with-properties")); this.weight = 2; requestAnimationFrame(() => { const wc = root.firstElementChild.shadowRoot.querySelector('#wc'); @@ -69,6 +69,7 @@ describe("advanced support", function() { }); it("will pass object data to a camelCase-named property", function(done) { + root.appendChild(document.createElement("component-with-properties")); this.weight = 2; requestAnimationFrame(() => { const wc = root.firstElementChild.shadowRoot.querySelector('#wc'); @@ -78,6 +79,17 @@ describe("advanced support", function() { }); }); + it("will pass object data to inherited properties", function(done) { + root.appendChild(document.createElement("component-with-inheritance")); + this.weight = 2; + requestAnimationFrame(() => { + const wc = root.firstElementChild.shadowRoot.querySelector('#wc'); + expect(wc.arr).to.eql(["h", "y", "b", "r", "i", "d", "s"]); + expect(wc.obj).to.eql({ library: "hybrids" }); + done(); + }); + }); + }); describe("events", function() { diff --git a/libraries/hybrids/src/components.js b/libraries/hybrids/src/components.js index ae5810576e..7b2d5c7700 100644 --- a/libraries/hybrids/src/components.js +++ b/libraries/hybrids/src/components.js @@ -18,6 +18,7 @@ import 'ce-without-children'; import 'ce-with-children'; import 'ce-with-properties'; +import 'ce-with-inheritance'; import 'ce-with-event'; import { html } from 'hybrids'; @@ -62,6 +63,20 @@ export const ComponentWithProperties = { `, }; +export const ComponentWithInheritance = { + render: () => html` + + `, +}; + export const ComponentWithDeclarativeEvent = { lowercaseHandled: false, kebabHandled: false, diff --git a/libraries/hyperapp/meta/expectedResults.json b/libraries/hyperapp/meta/expectedResults.json index 755586be4b..aa7948790a 100644 --- a/libraries/hyperapp/meta/expectedResults.json +++ b/libraries/hyperapp/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 } } \ No newline at end of file diff --git a/libraries/hyperapp/package.json b/libraries/hyperapp/package.json index aed382d23f..f5b5b846bb 100644 --- a/libraries/hyperapp/package.json +++ b/libraries/hyperapp/package.json @@ -35,7 +35,7 @@ "output": [ "results" ], - "command": "cross-env LIBRARY_NAME=hyperapp karma start" + "command": "cross-env LIBRARY_NAME=hyperapp karma start || echo''" }, "build": { "dependencies": [ diff --git a/libraries/hyperapp/src/advanced-tests.js b/libraries/hyperapp/src/advanced-tests.js index 941ab139cd..40da90660b 100644 --- a/libraries/hyperapp/src/advanced-tests.js +++ b/libraries/hyperapp/src/advanced-tests.js @@ -24,7 +24,8 @@ import { ComponentWithDifferentViews, ComponentWithProperties, ComponentWithImperativeEvent, - ComponentWithDeclarativeEvent + ComponentWithDeclarativeEvent, + ComponentWithInheritance } from "./components"; // Setup the test harness. This will get cleaned out with every test. @@ -69,6 +70,15 @@ describe("advanced support", function () { expect(wc.camelCaseObj).to.eql({ label: "passed" }); }); + it("will pass object data to inherited properties", async function () { + this.weight = 2; + ComponentWithInheritance(root); + await new Promise(requestAnimationFrame); + let wc = testContainer.querySelector("#wc"); + expect(wc.arr).to.eql(["H", "y", "p", "e", "r", "a", "p", "p"]); + expect(wc.obj).to.eql({ org: "Hyperapp", repo: "hyperapp.js" }); + }); + }); describe("events", function () { diff --git a/libraries/hyperapp/src/components.js b/libraries/hyperapp/src/components.js index 73726e7934..f207f69a2f 100644 --- a/libraries/hyperapp/src/components.js +++ b/libraries/hyperapp/src/components.js @@ -18,6 +18,7 @@ import "ce-without-children" import "ce-with-children" import "ce-with-properties" +import "ce-with-inheritance"; import "ce-with-event" import { app, h, text } from "hyperapp" @@ -81,6 +82,24 @@ export const ComponentWithProperties = node => ]), }) +export const ComponentWithInheritance = node => +app({ + node, + init: {}, + view: () => + h("div", {}, [ + h("ce-with-inheritance", { + id: "wc", + bool: true, + num: 42, + str: "Hyperapp", + arr: ["H", "y", "p", "e", "r", "a", "p", "p"], + obj: { org: "Hyperapp", repo: "hyperapp.js" }, + camelCaseObj: { label: "passed" }, + }), + ]), +}) + export const ComponentWithImperativeEvent = node => { const _withElem = (_, opts) => requestAnimationFrame(_ => { diff --git a/libraries/hyperhtml/meta/expectedResults.json b/libraries/hyperhtml/meta/expectedResults.json index 755586be4b..aa7948790a 100644 --- a/libraries/hyperhtml/meta/expectedResults.json +++ b/libraries/hyperhtml/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 } } \ No newline at end of file diff --git a/libraries/hyperhtml/package.json b/libraries/hyperhtml/package.json index 64db55f9b3..b3f8d56ff8 100644 --- a/libraries/hyperhtml/package.json +++ b/libraries/hyperhtml/package.json @@ -35,7 +35,7 @@ "output": [ "results" ], - "command": "cross-env LIBRARY_NAME=hyperhtml karma start" + "command": "cross-env LIBRARY_NAME=hyperhtml karma start || echo ''" }, "build": { "dependencies": [ diff --git a/libraries/hyperhtml/src/advanced-tests.js b/libraries/hyperhtml/src/advanced-tests.js index 90762c1507..337ed80cb8 100644 --- a/libraries/hyperhtml/src/advanced-tests.js +++ b/libraries/hyperhtml/src/advanced-tests.js @@ -27,7 +27,8 @@ import { ComponentWithDifferentViews, ComponentWithProperties, ComponentWithImperativeEvent, - ComponentWithDeclarativeEvent + ComponentWithDeclarativeEvent, + ComponentWithInheritance } from "./components"; // Setup the test harness. This will get cleaned out with every test. @@ -70,6 +71,14 @@ describe("advanced support", function() { expect(wc.camelCaseObj).to.eql({ label: "passed" }); }); + it("will pass object data to inherited properties", async function() { + this.weight = 2; + ComponentWithInheritance(root); + let wc = root.querySelector("#wc"); + expect(wc.arr).to.eql(["h", "y", "p", "e", "r", "H", "T", "M", "L"]); + expect(wc.obj).to.eql({ org: "viperHTML", repo: "hyperHTML" }); + }); + }); describe("events", function() { diff --git a/libraries/hyperhtml/src/components.js b/libraries/hyperhtml/src/components.js index 4ab1431184..6446807968 100644 --- a/libraries/hyperhtml/src/components.js +++ b/libraries/hyperhtml/src/components.js @@ -18,6 +18,7 @@ import 'ce-without-children'; import 'ce-with-children'; import 'ce-with-properties'; +import 'ce-with-inheritance'; import 'ce-with-event'; import HyperHTMLELement from 'hyperhtml-element/esm'; @@ -79,6 +80,18 @@ export const ComponentWithProperties = (root) => hyper(root)` >
`; +export const ComponentWithInheritance = (root) => hyper(root)` +
+ +
`; + export class ComponentWithImperativeEvent extends HyperHTMLELement { created() { this.eventClicks = 0; diff --git a/libraries/lit/meta/expectedResults.json b/libraries/lit/meta/expectedResults.json index 755586be4b..aa7948790a 100644 --- a/libraries/lit/meta/expectedResults.json +++ b/libraries/lit/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 } } \ No newline at end of file diff --git a/libraries/lit/src/advanced-tests.js b/libraries/lit/src/advanced-tests.js index 185e588c4c..ba60fe91ca 100644 --- a/libraries/lit/src/advanced-tests.js +++ b/libraries/lit/src/advanced-tests.js @@ -40,42 +40,47 @@ describe("advanced support", function() { let root; let wc; - beforeEach(async function() { + + it("will pass array data as a property", async function() { + this.weight = 2; root = document.createElement("component-with-properties"); scratch.appendChild(root); await root.updateComplete; wc = root.shadowRoot.querySelector("#wc"); - }); - - it("will pass array data as a property", function() { - this.weight = 2; let data = wc.arr; - expect(data).to.eql([ - "L", - "i", - "t", - "-", - "e", - "l", - "e", - "m", - "e", - "n", - "t" - ]); + expect(data).to.eql(["L", "i", "t"]); }); - it("will pass object data as a property", function() { + it("will pass object data as a property", async function() { this.weight = 2; + root = document.createElement("component-with-properties"); + scratch.appendChild(root); + await root.updateComplete; + wc = root.shadowRoot.querySelector("#wc"); let data = wc.obj; - expect(data).to.eql({ org: "polymer", repo: "lit-element" }); + expect(data).to.eql({ org: "lit", repo: "lit" }); }); - it("will pass object data to a camelCase-named property", function() { + it("will pass object data to a camelCase-named property", async function() { this.weight = 2; + root = document.createElement("component-with-properties"); + scratch.appendChild(root); + await root.updateComplete; + wc = root.shadowRoot.querySelector("#wc"); let data = wc.camelCaseObj; expect(data).to.eql({ label: "passed" }); }); + + it("will pass object data to inherited properties", async function() { + this.weight = 2; + root = document.createElement("component-with-inheritance"); + scratch.appendChild(root); + await root.updateComplete; + wc = root.shadowRoot.querySelector("#wc"); + expect(wc.arr).to.eql(["L", "i", "t"]); + expect(wc.obj).to.eql({ org: "lit", repo: "lit" }); + }); + }); describe("events", function() { diff --git a/libraries/lit/src/basic-tests.js b/libraries/lit/src/basic-tests.js index 7bba7cbd7b..d851e3ca43 100644 --- a/libraries/lit/src/basic-tests.js +++ b/libraries/lit/src/basic-tests.js @@ -124,7 +124,7 @@ describe("basic support", function() { it("will pass string data as either an attribute or a property", function() { this.weight = 3; let data = wc.str || wc.getAttribute("str"); - expect(data).to.eql("Lit element"); + expect(data).to.eql("Lit"); }); }); diff --git a/libraries/lit/src/components.js b/libraries/lit/src/components.js index 7cd9671c32..5ab07e4dfc 100644 --- a/libraries/lit/src/components.js +++ b/libraries/lit/src/components.js @@ -3,5 +3,6 @@ import "./components/component-with-children.js"; import "./components/component-with-children-rerender.js"; import "./components/component-with-different-views.js"; import "./components/component-with-properties.js"; +import "./components/component-with-inheritance.js"; import "./components/component-with-imperative-event.js"; import "./components/component-with-declarative-event.js"; diff --git a/libraries/lit/src/components/component-with-inheritance.js b/libraries/lit/src/components/component-with-inheritance.js new file mode 100644 index 0000000000..5d84a4be26 --- /dev/null +++ b/libraries/lit/src/components/component-with-inheritance.js @@ -0,0 +1,44 @@ +import { LitElement, html } from "lit"; +import "ce-with-inheritance"; + +class ComponentWithInheritance extends LitElement { + static get properties() { + return { + bool: { type: Boolean }, + num: { type: Number }, + str: { type: String }, + arr: { type: Array }, + obj: { type: Object }, + camelCaseObj: { type: Object }, + }; + } + + constructor() { + super(); + this.bool = true; + this.num = 42; + this.str = "Lit"; + this.arr = ["L", "i", "t"]; + this.obj = { org: "lit", repo: "lit" }; + } + + render() { + return html` +
+ +
+ `; + } +} +customElements.define( + "component-with-inheritance", + ComponentWithInheritance +); diff --git a/libraries/lit/src/components/component-with-properties.js b/libraries/lit/src/components/component-with-properties.js index 85a8753c7e..229cbdcd31 100644 --- a/libraries/lit/src/components/component-with-properties.js +++ b/libraries/lit/src/components/component-with-properties.js @@ -17,9 +17,9 @@ class ComponentWithProperties extends LitElement { super(); this.bool = true; this.num = 42; - this.str = "Lit element"; - this.arr = ["L", "i", "t", "-", "e", "l", "e", "m", "e", "n", "t"]; - this.obj = { org: "polymer", repo: "lit-element" }; + this.str = "Lit"; + this.arr = ["L", "i", "t"]; + this.obj = { org: "lit", repo: "lit" }; } render() { diff --git a/libraries/mithril/meta/expectedResults.json b/libraries/mithril/meta/expectedResults.json index 755586be4b..aa7948790a 100644 --- a/libraries/mithril/meta/expectedResults.json +++ b/libraries/mithril/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 } } \ No newline at end of file diff --git a/libraries/mithril/src/advanced-tests.js b/libraries/mithril/src/advanced-tests.js index b382ed38ad..27f72d848a 100644 --- a/libraries/mithril/src/advanced-tests.js +++ b/libraries/mithril/src/advanced-tests.js @@ -25,6 +25,7 @@ import { ComponentWithChildrenRerender, ComponentWithDifferentViews, ComponentWithProperties, + ComponentWithInheritance, ComponentWithImperativeEvent, ComponentWithDeclarativeEvent } from "./components"; @@ -69,6 +70,14 @@ describe("advanced support", function() { expect(wc.camelCaseObj).to.eql({ label: "passed" }); }); + it("will pass object data to a camelCase-named property", async function() { + this.weight = 2; + m.mount(root, ComponentWithInheritance()); + let wc = root.querySelector("#wc"); + expect(wc.arr).to.eql(['M', 'i', 't', 'h', 'r', 'i', 'l']); + expect(wc.obj).to.eql({ org: "MithrilJS", repo: "mithril.js" }); + }); + }); describe("events", function() { diff --git a/libraries/mithril/src/components.js b/libraries/mithril/src/components.js index 27be8d6d01..992d2ca588 100644 --- a/libraries/mithril/src/components.js +++ b/libraries/mithril/src/components.js @@ -18,6 +18,7 @@ import 'ce-without-children' import 'ce-with-children' import 'ce-with-properties' +import 'ce-with-inheritance' import 'ce-with-event' import m from 'mithril' @@ -86,6 +87,20 @@ export const ComponentWithProperties = () => ({ ) }) +export const ComponentWithInheritance = () => ({ + view: () => + m('div', + m('ce-with-inheritance#wc', { + bool: true, + num: 42, + str: 'Mithril', + arr: ['M', 'i', 't', 'h', 'r', 'i', 'l'], + obj: { org: 'MithrilJS', repo: 'mithril.js' }, + camelCaseObj: { label: "passed" }, + }) + ) +}) + export const ComponentWithImperativeEvent = () => { let eventHandled = false diff --git a/libraries/omi/meta/expectedResults.json b/libraries/omi/meta/expectedResults.json index 755586be4b..aa7948790a 100644 --- a/libraries/omi/meta/expectedResults.json +++ b/libraries/omi/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 } } \ No newline at end of file diff --git a/libraries/omi/src/advanced-tests.js b/libraries/omi/src/advanced-tests.js index 5364c33789..652e873671 100644 --- a/libraries/omi/src/advanced-tests.js +++ b/libraries/omi/src/advanced-tests.js @@ -46,6 +46,15 @@ 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 root = render(, scratch); + let wc = root.shadowRoot.querySelector("#wc"); + expect(wc.arr).to.eql(["O", "m", "i"]); + expect(wc.obj).to.eql({ org: "tencent", repo: "omi" }); + }); + }); describe("events", function () { diff --git a/libraries/omi/src/components.js b/libraries/omi/src/components.js index 97269ce804..0776fbdf31 100644 --- a/libraries/omi/src/components.js +++ b/libraries/omi/src/components.js @@ -2,6 +2,7 @@ import { define, h } from 'omi' import 'ce-without-children' import 'ce-with-children' import 'ce-with-properties' +import 'ce-with-inheritance' import 'ce-with-event' define('component-without-children', _ => ( @@ -78,8 +79,30 @@ define('component-with-properties', _ => { }) +define('component-with-inheritance', _ => { + const data = { + bool: true, + num: 42, + str: 'Omi', + arr: ['O', 'm', 'i'], + obj: { org: 'tencent', repo: 'omi' }, + camelCaseObj: { label: "passed" } + }; + return ( +
+ +
+ ); +}) define('component-with-unregistered', _ => { diff --git a/libraries/polymer/meta/expectedResults.json b/libraries/polymer/meta/expectedResults.json index 33d25e192e..fb9150a507 100644 --- a/libraries/polymer/meta/expectedResults.json +++ b/libraries/polymer/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 } } \ No newline at end of file diff --git a/libraries/polymer/src/advanced-tests.js b/libraries/polymer/src/advanced-tests.js index d02d00a2bc..87458f4131 100644 --- a/libraries/polymer/src/advanced-tests.js +++ b/libraries/polymer/src/advanced-tests.js @@ -37,33 +37,43 @@ afterEach(function() { describe("advanced support", function() { describe("attributes and properties", function() { - let root; - let wc; - - beforeEach(function() { - root = document.createElement("component-with-properties"); - scratch.appendChild(root); - wc = root.shadowRoot.querySelector("#wc"); - }); it("will pass array data as a property", function() { this.weight = 2; + const root = document.createElement("component-with-properties"); + scratch.appendChild(root); + const wc = root.shadowRoot.querySelector("#wc"); let data = wc.arr; expect(data).to.eql(["P", "o", "l", "y", "m", "e", "r"]); }); it("will pass object data as a property", function() { this.weight = 2; + const root = document.createElement("component-with-properties"); + scratch.appendChild(root); + const wc = root.shadowRoot.querySelector("#wc"); let data = wc.obj; expect(data).to.eql({ org: "polymer", repo: "polymer" }); }); it("will pass object data to a camelCase-named property", function() { this.weight = 2; + const root = document.createElement("component-with-properties"); + scratch.appendChild(root); + const wc = root.shadowRoot.querySelector("#wc"); let data = wc.camelCaseObj; expect(data).to.eql({ label: "passed" }); }); + it("will pass object data to inherited properties", function() { + this.weight = 2; + const root = document.createElement("component-with-inheritance"); + scratch.appendChild(root); + const wc = root.shadowRoot.querySelector("#wc"); + expect(wc.arr).to.eql(["P", "o", "l", "y", "m", "e", "r"]); + expect(wc.obj).to.eql({ org: "polymer", repo: "polymer" }); + }); + }); describe("events", function() { diff --git a/libraries/polymer/src/components.js b/libraries/polymer/src/components.js index 7cd9671c32..5ab07e4dfc 100644 --- a/libraries/polymer/src/components.js +++ b/libraries/polymer/src/components.js @@ -3,5 +3,6 @@ import "./components/component-with-children.js"; import "./components/component-with-children-rerender.js"; import "./components/component-with-different-views.js"; import "./components/component-with-properties.js"; +import "./components/component-with-inheritance.js"; import "./components/component-with-imperative-event.js"; import "./components/component-with-declarative-event.js"; diff --git a/libraries/polymer/src/components/component-with-inheritance.js b/libraries/polymer/src/components/component-with-inheritance.js new file mode 100644 index 0000000000..9e188266d0 --- /dev/null +++ b/libraries/polymer/src/components/component-with-inheritance.js @@ -0,0 +1,60 @@ +import { PolymerElement, html } from "@polymer/polymer/polymer-element.js"; +import "ce-with-inheritance"; + +class ComponentWithInheritance extends PolymerElement { + static get is() { + return "component-with-inheritance"; + } + static get properties() { + return { + bool: { + type: Boolean, + value: true + }, + num: { + type: Number, + value: 42 + }, + str: { + type: String, + value: "Polymer" + }, + arr: { + type: Array, + value: function() { + return ["P", "o", "l", "y", "m", "e", "r"]; + } + }, + obj: { + type: Object, + value: function() { + return { org: "polymer", repo: "polymer" }; + } + }, + camelCaseObj: { + type: Object, + value: function() { + return { label: "passed" }; + } + } + }; + } + static get template() { + return html` +
+ +
+ `; + } +} +window.customElements.define( + ComponentWithInheritance.is, + ComponentWithInheritance +); diff --git a/libraries/preact/meta/expectedResults.json b/libraries/preact/meta/expectedResults.json index 755586be4b..aa7948790a 100644 --- a/libraries/preact/meta/expectedResults.json +++ b/libraries/preact/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 } } \ No newline at end of file diff --git a/libraries/preact/src/advanced-tests.js b/libraries/preact/src/advanced-tests.js index efdf22f2d9..fc73046d2d 100644 --- a/libraries/preact/src/advanced-tests.js +++ b/libraries/preact/src/advanced-tests.js @@ -24,6 +24,7 @@ import { ComponentWithChildrenRerender, ComponentWithDifferentViews, ComponentWithProperties, + ComponentWithInheritance, ComponentWithUnregistered, ComponentWithImperativeEvent, ComponentWithDeclarativeEvent @@ -56,6 +57,14 @@ describe("advanced support", function() { expect(data).to.eql({ label: "passed" }); }); + it("will pass object data to inherited properties", function() { + this.weight = 2; + let root = mount().getDOMNode(); + let wc = root.querySelector("#wc"); + expect(wc.arr).to.eql(["P", "r", "e", "a", "c", "t"]); + expect(wc.obj).to.eql({ org: "developit", repo: "preact" }); + }); + }); describe("events", function() { diff --git a/libraries/preact/src/components.js b/libraries/preact/src/components.js index 0792eae4cd..2aafe0d8b9 100644 --- a/libraries/preact/src/components.js +++ b/libraries/preact/src/components.js @@ -19,6 +19,7 @@ import { h, render, Component } from 'preact'; 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: 'Preact', + arr: ['P', 'r', 'e', 'a', 'c', 't'], + obj: { org: 'developit', repo: 'preact' }, + camelCaseObj: { label: "passed" } + }; + return ( +
+ +
+ ); + } +} + export class ComponentWithUnregistered extends Component { render () { const data = { diff --git a/libraries/react-experimental/meta/expectedResults.json b/libraries/react-experimental/meta/expectedResults.json index 755586be4b..aa7948790a 100644 --- a/libraries/react-experimental/meta/expectedResults.json +++ b/libraries/react-experimental/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 } } \ No newline at end of file diff --git a/libraries/react-experimental/src/advanced-tests.js b/libraries/react-experimental/src/advanced-tests.js index 3cf56cd669..a325fb1763 100644 --- a/libraries/react-experimental/src/advanced-tests.js +++ b/libraries/react-experimental/src/advanced-tests.js @@ -27,7 +27,8 @@ import { ComponentWithProperties, ComponentWithUnregistered, ComponentWithImperativeEvent, - ComponentWithDeclarativeEvent + ComponentWithDeclarativeEvent, + ComponentWithInheritance } from "./components"; // Setup the test harness. This will get cleaned out with every test. @@ -115,6 +116,22 @@ 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 root; + render( + { + root = current; + }} + /> + ); + let wc = root.wc; + expect(wc.arr).to.eql(["R", "e", "a", "c", "t"]); + expect(wc.obj).to.eql({ org: "facebook", repo: "react" }); + }); + }); describe("events", function() { diff --git a/libraries/react-experimental/src/components.js b/libraries/react-experimental/src/components.js index 3431e5e10c..ace0e57221 100644 --- a/libraries/react-experimental/src/components.js +++ b/libraries/react-experimental/src/components.js @@ -19,6 +19,7 @@ import React, { Component } from 'react'; 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: 'React', + arr: ['R', 'e', 'a', 'c', 't'], + obj: { org: 'facebook', repo: 'react' }, + camelCaseObj: { label: "passed" } + }; + return ( +
+ this.wc = el} + bool={data.bool} + num={data.num} + str={data.str} + arr={data.arr} + obj={data.obj} + camelCaseObj={data.camelCaseObj} + > +
+ ); + } +} + export class ComponentWithUnregistered extends Component { render () { const data = { diff --git a/libraries/react/meta/expectedResults.json b/libraries/react/meta/expectedResults.json index 00d8e95ab4..fa88f5e639 100644 --- a/libraries/react/meta/expectedResults.json +++ b/libraries/react/meta/expectedResults.json @@ -1,19 +1,19 @@ { "success": 16, - "failed": 16, + "failed": 18, "skipped": 0, "error": false, "disconnected": false, "exitCode": 1, - "score": 67, + "score": 63, "basicSupport": { "total": 16, "failed": 0, "passed": 16 }, "advancedSupport": { - "total": 16, - "failed": 16, + "total": 18, + "failed": 18, "passed": 0 } } \ No newline at end of file diff --git a/libraries/react/src/advanced-tests.js b/libraries/react/src/advanced-tests.js index fcdbf8b4f6..66b08ea685 100644 --- a/libraries/react/src/advanced-tests.js +++ b/libraries/react/src/advanced-tests.js @@ -24,7 +24,8 @@ import { ComponentWithChildren, ComponentWithChildrenRerender, ComponentWithDifferentViews, -ComponentWithProperties, + ComponentWithProperties, + ComponentWithInheritance, ComponentWithUnregistered, ComponentWithImperativeEvent, ComponentWithDeclarativeEvent @@ -111,6 +112,22 @@ 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 root; + render( + { + root = current; + }} + /> + ); + let wc = root.wc; + expect(wc.arr).to.eql(["R", "e", "a", "c", "t"]); + expect(wc.obj).to.eql({ org: "facebook", repo: "react" }); + }); + }); describe("events", function() { diff --git a/libraries/react/src/components.js b/libraries/react/src/components.js index 4eed7267a1..c1bed2cb00 100644 --- a/libraries/react/src/components.js +++ b/libraries/react/src/components.js @@ -19,6 +19,7 @@ import React, { Component } from 'react'; 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: 'React', + arr: ['R', 'e', 'a', 'c', 't'], + obj: { org: 'facebook', repo: 'react' }, + camelCaseObj: { label: "passed" }, + }; + return ( +
+ this.wc = el} + bool={data.bool} + num={data.num} + str={data.str} + arr={data.arr} + obj={data.obj} + camelCaseObj={data.camelCaseObj} + > +
+ ); + } +} + export class ComponentWithUnregistered extends Component { render () { const data = { diff --git a/libraries/riot/meta/expectedResults.json b/libraries/riot/meta/expectedResults.json index 755586be4b..aa7948790a 100644 --- a/libraries/riot/meta/expectedResults.json +++ b/libraries/riot/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 } } \ No newline at end of file diff --git a/libraries/riot/src/advanced-tests.js b/libraries/riot/src/advanced-tests.js index 0c34a6b8c0..7e8e77e3ff 100644 --- a/libraries/riot/src/advanced-tests.js +++ b/libraries/riot/src/advanced-tests.js @@ -19,6 +19,7 @@ import { expect } from 'chai' import { component } from 'riot' import { ComponentWithProperties, + ComponentWithInheritance, ComponentWithDeclarativeEvent } from './components' @@ -66,6 +67,14 @@ describe('advanced support', function() { expect(data).to.eql({ label: "passed" }); }) + it('will pass object data to inherited properties', function() { + this.weight = 2; + component(ComponentWithInheritance)(scratch); + let wc = scratch.querySelector('#wc'); + expect(wc.arr).to.eql(['r', 'i', 'o', 't']); + expect(wc.obj).to.eql({ org: 'riotjs', repo: 'riot' }); + }) + }) describe('events', function() { diff --git a/libraries/riot/src/components.js b/libraries/riot/src/components.js index a144c30860..089184ad86 100644 --- a/libraries/riot/src/components.js +++ b/libraries/riot/src/components.js @@ -18,6 +18,7 @@ import 'ce-without-children' import 'ce-with-children' import 'ce-with-properties' +import 'ce-with-inheritance' import 'ce-with-event' export { default as ComponentWithoutChildren } from './components/ComponentWithoutChildren.riot' @@ -25,6 +26,7 @@ export { default as ComponentWithChildren } from './components/ComponentWithChil export { default as ComponentWithChildrenRerender } from './components/ComponentWithChildrenRerender.riot' export { default as ComponentWithDifferentViews } from './components/ComponentWithDifferentViews.riot' export { default as ComponentWithProperties } from './components/ComponentWithProperties.riot' +export { default as ComponentWithInheritance } from './components/ComponentWithInheritance.riot' export { default as ComponentWithUnregistered } from './components/ComponentWithUnregistered.riot' export { default as ComponentWithImperativeEvent } from './components/ComponentWithImperativeEvent.riot' export { default as ComponentWithDeclarativeEvent } from './components/ComponentWithDeclarativeEvent.riot' diff --git a/libraries/riot/src/components/ComponentWithInheritance.riot b/libraries/riot/src/components/ComponentWithInheritance.riot new file mode 100644 index 0000000000..68d3c45df1 --- /dev/null +++ b/libraries/riot/src/components/ComponentWithInheritance.riot @@ -0,0 +1,15 @@ + + + + diff --git a/libraries/skate/meta/expectedResults.json b/libraries/skate/meta/expectedResults.json index 33d25e192e..fb9150a507 100644 --- a/libraries/skate/meta/expectedResults.json +++ b/libraries/skate/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 } } \ No newline at end of file diff --git a/libraries/skate/src/advanced-tests.js b/libraries/skate/src/advanced-tests.js index 911afc2777..0668ffa3be 100644 --- a/libraries/skate/src/advanced-tests.js +++ b/libraries/skate/src/advanced-tests.js @@ -23,6 +23,7 @@ import { ComponentWithChildrenRerender, ComponentWithDifferentViews, ComponentWithProperties, + ComponentWithInheritance, ComponentWithUnregistered, ComponentWithImperativeEvent, ComponentWithDeclarativeEvent @@ -77,6 +78,16 @@ describe("advanced support", function() { expect(data).to.eql({ label: "passed" }); }); + it("will pass object data to inherited properties", async function() { + this.weight = 2; + let root = document.createElement("component-with-inheritance"); + scratch.appendChild(root); + await Promise.resolve(); + let wc = root.shadowRoot.querySelector("#wc"); + expect(wc.arr).to.eql(["S", "k", "a", "t", "e"]); + expect(wc.obj).to.eql({ org: "skatejs", repo: "skatejs" }); + }); + }); describe("events", function() { diff --git a/libraries/skate/src/components.js b/libraries/skate/src/components.js index 053578727e..83f0ca5c41 100644 --- a/libraries/skate/src/components.js +++ b/libraries/skate/src/components.js @@ -23,6 +23,7 @@ import { h } from "preact"; import "ce-without-children"; import "ce-with-children"; import "ce-with-properties"; +import "ce-with-inheritance"; import "ce-with-event"; export class ComponentWithoutChildren extends withComponent(withPreact()) { @@ -128,6 +129,33 @@ export class ComponentWithProperties extends withComponent(withPreact()) { } customElements.define("component-with-properties", ComponentWithProperties); +export class ComponentWithInheritance extends withComponent(withPreact()) { + render() { + const data = { + bool: true, + num: 42, + str: "Skate", + arr: ["S", "k", "a", "t", "e"], + obj: { org: "skatejs", repo: "skatejs" }, + camelCaseObj: { label: "passed" } + }; + return ( +
+ +
+ ); + } +} +customElements.define("component-with-inheritance", ComponentWithInheritance); + export class ComponentWithUnregistered extends withComponent(withPreact()) { render() { const data = { diff --git a/libraries/solid/meta/expectedResults.json b/libraries/solid/meta/expectedResults.json index c15d4478b5..e78773a7bf 100644 --- a/libraries/solid/meta/expectedResults.json +++ b/libraries/solid/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 } } \ No newline at end of file diff --git a/libraries/solid/src/advanced-tests.js b/libraries/solid/src/advanced-tests.js index 61c1d9b539..c35edefde9 100644 --- a/libraries/solid/src/advanced-tests.js +++ b/libraries/solid/src/advanced-tests.js @@ -19,6 +19,7 @@ import { render } from 'solid-js/web'; import { expect } from "chai"; import { ComponentWithProperties, + ComponentWithInheritance, ComponentWithDeclarativeEvent } from "./components"; @@ -51,6 +52,14 @@ describe("advanced support", function() { expect(data).to.eql({ label: "passed" }); }); + it("will pass object data to inherited properties", function() { + this.weight = 2; + let wc; + render(() => wc = , document.body); + expect(wc.arr).to.eql(["S", "o", "l", "i", "d"]); + expect(wc.obj).to.eql({ org: "ryansolid", repo: "solid" }); + }); + }); describe("events", function() { diff --git a/libraries/solid/src/components.js b/libraries/solid/src/components.js index 4f00dab7ab..a69afa3322 100644 --- a/libraries/solid/src/components.js +++ b/libraries/solid/src/components.js @@ -20,6 +20,7 @@ import { createStore } from "solid-js/store"; import "ce-without-children"; import "ce-with-children"; import "ce-with-properties"; +import "ce-with-inheritance"; import "ce-with-event"; export const ComponentWithoutChildren = () => ; @@ -63,6 +64,27 @@ export const ComponentWithProperties = () => { ); }; +export const ComponentWithInheritance = () => { + const data = { + bool: true, + num: 42, + str: "Solid", + arr: ["S", "o", "l", "i", "d"], + obj: { org: "ryansolid", repo: "solid" }, + camelCaseObj: { label: "passed" }, + }; + return ( + + ); +}; + export const ComponentWithUnregistered = () => { const data = { bool: true, diff --git a/libraries/stencil/meta/expectedResults.json b/libraries/stencil/meta/expectedResults.json index 755586be4b..aa7948790a 100644 --- a/libraries/stencil/meta/expectedResults.json +++ b/libraries/stencil/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 } } \ No newline at end of file diff --git a/libraries/stencil/src/advanced-tests.js b/libraries/stencil/src/advanced-tests.js index 6d11122c1c..ff1e1e4735 100644 --- a/libraries/stencil/src/advanced-tests.js +++ b/libraries/stencil/src/advanced-tests.js @@ -38,42 +38,47 @@ afterEach(function () { describe("advanced support", function () { describe("attributes and properties", function () { - let root; - let wc; - - beforeEach(async function () { - root = document.createElement("component-with-properties"); - scratch.appendChild(root); - await waitForRender(root); - wc = root.shadowRoot.querySelector("#wc"); - }); it("will pass array data as a property", async function () { this.weight = 2; + const root = document.createElement("component-with-properties"); + scratch.appendChild(root); + await waitForRender(root); + const wc = root.shadowRoot.querySelector("#wc"); let data = wc.arr; - expect(data).to.eql([ - "S", - "t", - "e", - "n", - "c", - "i", - "l" - ]); + expect(data).to.eql(["S", "t", "e", "n", "c", "i", "l"]); }); - it("will pass object data as a property", function () { + it("will pass object data as a property", async function () { this.weight = 2; + const root = document.createElement("component-with-properties"); + scratch.appendChild(root); + await waitForRender(root); + const wc = root.shadowRoot.querySelector("#wc"); let data = wc.obj; expect(data).to.eql({ org: "Ionic", repo: "stencil" }); }); - it("will pass object data to a camelCase-named property", function () { + it("will pass object data to a camelCase-named property", async function () { this.weight = 2; + const root = document.createElement("component-with-properties"); + scratch.appendChild(root); + await waitForRender(root); + const wc = root.shadowRoot.querySelector("#wc"); let data = wc.camelCaseObj; expect(data).to.eql({ label: "passed" }); }); + it("will pass object data to inherited properties", async function () { + this.weight = 2; + const root = document.createElement("component-with-inheritance"); + scratch.appendChild(root); + await waitForRender(root); + const wc = root.shadowRoot.querySelector("#wc"); + expect(wc.arr).to.eql(["S", "t", "e", "n", "c", "i", "l"]); + expect(wc.obj).to.eql({ org: "Ionic", repo: "stencil" }); + }); + }); describe("events", function () { diff --git a/libraries/stencil/src/components.d.ts b/libraries/stencil/src/components.d.ts index f1c933cfb1..62b676a1b3 100644 --- a/libraries/stencil/src/components.d.ts +++ b/libraries/stencil/src/components.d.ts @@ -25,6 +25,14 @@ export namespace Components { interface ComponentWithImperativeEvent { "eventHandled": boolean; } + interface ComponentWithInheritance { + "arr": string[]; + "bool": boolean; + "camelCaseObj": { label: string; }; + "num": number; + "obj": { org: string; repo: string; }; + "str": string; + } interface ComponentWithProperties { "arr": string[]; "bool": boolean; @@ -67,6 +75,12 @@ declare global { prototype: HTMLComponentWithImperativeEventElement; new (): HTMLComponentWithImperativeEventElement; }; + interface HTMLComponentWithInheritanceElement extends Components.ComponentWithInheritance, HTMLStencilElement { + } + var HTMLComponentWithInheritanceElement: { + prototype: HTMLComponentWithInheritanceElement; + new (): HTMLComponentWithInheritanceElement; + }; interface HTMLComponentWithPropertiesElement extends Components.ComponentWithProperties, HTMLStencilElement { } var HTMLComponentWithPropertiesElement: { @@ -85,6 +99,7 @@ declare global { "component-with-declarative-event": HTMLComponentWithDeclarativeEventElement; "component-with-different-views": HTMLComponentWithDifferentViewsElement; "component-with-imperative-event": HTMLComponentWithImperativeEventElement; + "component-with-inheritance": HTMLComponentWithInheritanceElement; "component-with-properties": HTMLComponentWithPropertiesElement; "component-without-children": HTMLComponentWithoutChildrenElement; } @@ -108,6 +123,14 @@ declare namespace LocalJSX { interface ComponentWithImperativeEvent { "eventHandled"?: boolean; } + interface ComponentWithInheritance { + "arr"?: string[]; + "bool"?: boolean; + "camelCaseObj"?: { label: string; }; + "num"?: number; + "obj"?: { org: string; repo: string; }; + "str"?: string; + } interface ComponentWithProperties { "arr"?: string[]; "bool"?: boolean; @@ -124,6 +147,7 @@ declare namespace LocalJSX { "component-with-declarative-event": ComponentWithDeclarativeEvent; "component-with-different-views": ComponentWithDifferentViews; "component-with-imperative-event": ComponentWithImperativeEvent; + "component-with-inheritance": ComponentWithInheritance; "component-with-properties": ComponentWithProperties; "component-without-children": ComponentWithoutChildren; } @@ -137,6 +161,7 @@ declare module "@stencil/core" { "component-with-declarative-event": LocalJSX.ComponentWithDeclarativeEvent & JSXBase.HTMLAttributes; "component-with-different-views": LocalJSX.ComponentWithDifferentViews & JSXBase.HTMLAttributes; "component-with-imperative-event": LocalJSX.ComponentWithImperativeEvent & JSXBase.HTMLAttributes; + "component-with-inheritance": LocalJSX.ComponentWithInheritance & JSXBase.HTMLAttributes; "component-with-properties": LocalJSX.ComponentWithProperties & JSXBase.HTMLAttributes; "component-without-children": LocalJSX.ComponentWithoutChildren & JSXBase.HTMLAttributes; } diff --git a/libraries/stencil/src/components.js b/libraries/stencil/src/components.js index 4efba7f4e4..968bd51215 100644 --- a/libraries/stencil/src/components.js +++ b/libraries/stencil/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"; import { ComponentWithChildren } from "../dist/components/component-with-children.js"; import { ComponentWithChildrenRerender } from "../dist/components/component-with-children-rerender.js"; @@ -8,6 +9,7 @@ import { ComponentWithDeclarativeEvent } from "../dist/components/component-with import { ComponentWithDifferentViews } from "../dist/components/component-with-different-views.js"; import { ComponentWithImperativeEvent } from "../dist/components/component-with-imperative-event.js"; import { ComponentWithProperties } from "../dist/components/component-with-properties.js"; +import { ComponentWithInheritance } from "../dist/components/component-with-inheritance.js"; import { ComponentWithoutChildren } from "../dist/components/component-without-children.js"; customElements.define("component-without-children", ComponentWithoutChildren); @@ -29,3 +31,4 @@ customElements.define( ComponentWithDeclarativeEvent ); customElements.define("component-with-properties", ComponentWithProperties); +customElements.define("component-with-inheritance", ComponentWithInheritance); diff --git a/libraries/stencil/src/components/component-with-inheritance/component-with-inheritance.tsx b/libraries/stencil/src/components/component-with-inheritance/component-with-inheritance.tsx new file mode 100644 index 0000000000..ab725f0079 --- /dev/null +++ b/libraries/stencil/src/components/component-with-inheritance/component-with-inheritance.tsx @@ -0,0 +1,30 @@ +import { Component, Host, h, Prop } from "@stencil/core"; + +@Component({ + tag: "component-with-inheritance", + shadow: true +}) +export class ComponentWithInheritance { + @Prop() bool = true; + @Prop() num = 42; + @Prop() str = "Stencil"; + @Prop() arr = ["S", "t", "e", "n", "c", "i", "l"]; + @Prop() obj = { org: "Ionic", repo: "stencil" }; + @Prop() camelCaseObj = { label: "passed" }; + + render() { + return ( + + + + ); + } +} diff --git a/libraries/surplus/meta/expectedResults.json b/libraries/surplus/meta/expectedResults.json index 755586be4b..aa7948790a 100644 --- a/libraries/surplus/meta/expectedResults.json +++ b/libraries/surplus/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 } } \ No newline at end of file diff --git a/libraries/surplus/src/advanced-tests.js b/libraries/surplus/src/advanced-tests.js index 74674348a5..debb8e25f4 100644 --- a/libraries/surplus/src/advanced-tests.js +++ b/libraries/surplus/src/advanced-tests.js @@ -26,7 +26,8 @@ import { ComponentWithProperties, ComponentWithUnregistered, ComponentWithImperativeEvent, - ComponentWithDeclarativeEvent + ComponentWithDeclarativeEvent, + ComponentWithInheritance } from "./components"; describe("advanced support", function() { @@ -62,6 +63,16 @@ describe("advanced support", function() { }); }); + it("will pass object data to inherited properties", function() { + this.weight = 2; + S.root(() => { + let root = ; + let wc = root.wc; + expect(wc.arr).to.eql(["S", "u", "r", "p", "l", "u", "s"]); + expect(wc.obj).to.eql({ org: "adam.haile@gmail.com", repo: "surplus" }); + }); + }); + }); describe("events", function() { diff --git a/libraries/surplus/src/components.js b/libraries/surplus/src/components.js index c20d5fe4a5..e6ac97921c 100644 --- a/libraries/surplus/src/components.js +++ b/libraries/surplus/src/components.js @@ -21,6 +21,7 @@ import on from 'surplus-mixin-on'; import 'ce-without-children'; import 'ce-with-children'; import 'ce-with-properties'; +import 'ce-with-inheritance'; import 'ce-with-event'; export const ComponentWithoutChildren = () => @@ -80,6 +81,29 @@ export const ComponentWithProperties = () => { ); } +export const ComponentWithInheritance = () => { + const data = { + bool: true, + num: 42, + str: 'Surplus', + arr: ['S', 'u', 'r', 'p', 'l', 'u', 's'], + obj: { org: 'adam.haile@gmail.com', repo: 'surplus' }, + camelCaseObj: { label: "passed" } + }; + return ( +
+ +
+ ); +} + export const ComponentWithUnregistered = () => { const data = { bool: true, diff --git a/libraries/svelte/meta/expectedResults.json b/libraries/svelte/meta/expectedResults.json index c15d4478b5..e78773a7bf 100644 --- a/libraries/svelte/meta/expectedResults.json +++ b/libraries/svelte/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 } } \ No newline at end of file diff --git a/libraries/svelte/src/advanced-tests.js b/libraries/svelte/src/advanced-tests.js index f027bfed76..ea8a54ae5b 100644 --- a/libraries/svelte/src/advanced-tests.js +++ b/libraries/svelte/src/advanced-tests.js @@ -18,6 +18,7 @@ import { expect } from "chai"; import { ComponentWithProperties, + ComponentWithInheritance, ComponentWithDeclarativeEvent } from "./components"; import { tick } from "svelte"; @@ -65,6 +66,15 @@ 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; + new ComponentWithInheritance({ target: scratch }); + let wc = scratch.querySelector("#wc"); + expect(wc.arr).to.eql(["s", "v", "e", "l", "t", "e"]); + expect(wc.obj).to.eql({ org: "sveltejs", repo: "svelte" }); + }); + }); describe("events", function() { diff --git a/libraries/svelte/src/components.js b/libraries/svelte/src/components.js index 8e773bc191..9273fc7674 100644 --- a/libraries/svelte/src/components.js +++ b/libraries/svelte/src/components.js @@ -18,6 +18,7 @@ import 'ce-without-children'; import 'ce-with-children'; import 'ce-with-properties'; +import 'ce-with-inheritance'; import 'ce-with-event'; export { default as ComponentWithoutChildren } from './components/ComponentWithoutChildren.svelte'; @@ -25,6 +26,7 @@ export { default as ComponentWithChildren } from './components/ComponentWithChil export { default as ComponentWithChildrenRerender } from './components/ComponentWithChildrenRerender.svelte'; export { default as ComponentWithDifferentViews } from './components/ComponentWithDifferentViews.svelte'; export { default as ComponentWithProperties } from './components/ComponentWithProperties.svelte'; +export { default as ComponentWithInheritance } from './components/ComponentWithInheritance.svelte'; export { default as ComponentWithUnregistered } from './components/ComponentWithUnregistered.svelte'; export { default as ComponentWithImperativeEvent } from './components/ComponentWithImperativeEvent.svelte'; export { default as ComponentWithDeclarativeEvent } from './components/ComponentWithDeclarativeEvent.svelte'; diff --git a/libraries/svelte/src/components/ComponentWithInheritance.svelte b/libraries/svelte/src/components/ComponentWithInheritance.svelte new file mode 100644 index 0000000000..63d6c1b191 --- /dev/null +++ b/libraries/svelte/src/components/ComponentWithInheritance.svelte @@ -0,0 +1,10 @@ + + + diff --git a/libraries/vue/meta/expectedResults.json b/libraries/vue/meta/expectedResults.json index 755586be4b..aa7948790a 100644 --- a/libraries/vue/meta/expectedResults.json +++ b/libraries/vue/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 } } \ No newline at end of file diff --git a/libraries/vue/src/advanced-tests.js b/libraries/vue/src/advanced-tests.js index d0f0b7c4f5..11baf0ac51 100644 --- a/libraries/vue/src/advanced-tests.js +++ b/libraries/vue/src/advanced-tests.js @@ -22,6 +22,7 @@ import { ComponentWithChildrenRerender, ComponentWithDifferentViews, ComponentWithProperties, + ComponentWithInheritance, ComponentWithUnregistered, ComponentWithImperativeEvent, ComponentWithDeclarativeEvent @@ -81,6 +82,16 @@ describe("advanced support", function() { expect(data).to.eql({ label: "passed" }); }); + it("will pass object data to inherited properties", function() { + this.weight = 2; + const app = createApp(ComponentWithInheritance) + app.config.compilerOptions.isCustomElement = isCustomElement; + app.mount(scratch); + const wc = scratch.querySelector("#wc"); + expect(wc.arr).to.eql(["V", "u", "e"]); + expect(wc.obj).to.eql({ org: "vuejs", repo: "vue" }); + }); + }); describe("events", function() { diff --git a/libraries/vue/src/components.js b/libraries/vue/src/components.js index 9a4ac360b8..d20aa3f413 100644 --- a/libraries/vue/src/components.js +++ b/libraries/vue/src/components.js @@ -19,6 +19,7 @@ import {defineComponent, nextTick} from 'vue'; import 'ce-without-children'; import 'ce-with-children'; import 'ce-with-properties'; +import 'ce-with-inheritance'; import 'ce-with-event'; export const ComponentWithoutChildren = defineComponent({ @@ -100,6 +101,31 @@ export const ComponentWithProperties = defineComponent({ } }); +export const ComponentWithInheritance = defineComponent({ + template: ` +
+ +
+ `, + data: function() { + return { + bool: true, + num: 42, + str: 'Vue', + arr: ['V', 'u', 'e'], + obj: { org: 'vuejs', repo: 'vue' }, + camelCaseObj: { label: "passed" } + } + } +}); + export const ComponentWithUnregistered = defineComponent({ template: `
diff --git a/scripts/copy-and-verify-results.mjs b/scripts/copy-and-verify-results.mjs index d890101ae8..8ffe4b8d85 100644 --- a/scripts/copy-and-verify-results.mjs +++ b/scripts/copy-and-verify-results.mjs @@ -13,11 +13,19 @@ import {opts, libraries} from './common.mjs'; async function copyAndVerifyLibraryResults() { const verb = opts['update-goldens'] ? "Updating test goldens" : "Testing"; console.log(`\n### ${verb}\n`); - await Promise.all(libraries.map(async (library) => { + const results = await Promise.allSettled(libraries.map(async (library) => { await verifyResults(library); await fetchMetadata(library); await copyDocs(library); })); + for (let i = 0; i < libraries.length; i++) { + const result = results[i]; + if (result.status === 'rejected') { + const library = libraries[i]; + console.error(`Failure in ${library.name}`); + console.error(result.reason); + } + } } async function fetchMetadata(library) { @@ -65,11 +73,11 @@ function compareResultsAgainstGoldens(library) { } catch (err) { throw new Error(`Could not read expectedResults.json for ${library.name}:\n ${err}`); } + chai.assert.deepEqual(actual, expected, `${library.name} has incorrect deep results equal`); // A constant, to make sure that if we add/remove any tests, that we add that test to all // tested libraries. - const numberOfTests = 32; + const numberOfTests = 34; chai.assert.equal(actual.success + actual.failed, numberOfTests, `${library.name} has incorrect total tests`); - chai.assert.deepEqual(actual, expected, `${library.name} has incorrect deep results equal`); }