113 lines
3.6 KiB
JavaScript
113 lines
3.6 KiB
JavaScript
import { render, CustomElement, Host, defineElement, state, prop } from "@cerxes/csx";
|
|
import { testContainer } from "../utils/test-container";
|
|
import { nextAnimationFrame } from "../utils/next-animation-frame";
|
|
|
|
describe("Inheritance tests", () => {
|
|
/**
|
|
* Assert that a we can extend a getter/setter prop
|
|
*/
|
|
test("Single inherited getter/setter-property", async () => {
|
|
@defineElement('base-component')
|
|
class BaseComponent extends CustomElement{
|
|
@prop()
|
|
set name(value){
|
|
if(this.#name!==value){
|
|
this.#name = value;
|
|
}
|
|
}
|
|
get name(){
|
|
return this.#name;
|
|
}
|
|
#name;
|
|
|
|
render(){
|
|
return (
|
|
<div>
|
|
<label>Value is</label>
|
|
<div>{this.name}</div>
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
@defineElement('extended-component')
|
|
class ExtendedComponent extends BaseComponent{
|
|
@prop()
|
|
set name(value){
|
|
super.name = `Hi my name is ${value??""}`;
|
|
}
|
|
get name(){
|
|
return super.name;
|
|
}
|
|
}
|
|
|
|
let container = testContainer(
|
|
render(<ExtendedComponent name={"Slim Shady"}/>)
|
|
);
|
|
document.body.appendChild(container);// Components need to be added to the DOM or their connectecCallback will not be called
|
|
|
|
expect(
|
|
container.innerHTML
|
|
).toBe([
|
|
`<extended-component>`,
|
|
`<div>`,
|
|
`<label>Value is</label>`,
|
|
`<div>Hi my name is Slim Shady</div>`,
|
|
`</div>`,
|
|
`</extended-component>`,
|
|
].join(''));
|
|
|
|
document.body.removeChild(container);
|
|
});
|
|
|
|
|
|
/**
|
|
* Assert that a we can extend a basic prop with a get/set
|
|
* This test is expected to fail as long as decorators don't fully work as expected in babel
|
|
* The problem showing up here is an initalizerDefineProperty being called in the base class, that replaces
|
|
* the end descriptor of the function in the extended version
|
|
*/
|
|
test("Single inherited basic-property component", async () => {
|
|
@defineElement('base-component-2')
|
|
class BaseComponent extends CustomElement{
|
|
@prop()
|
|
name;
|
|
|
|
render(){
|
|
return (
|
|
<div>
|
|
<label>Value is</label>
|
|
<div>{this.name}</div>
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
@defineElement('extended-component-2')
|
|
class ExtendedComponent extends BaseComponent{
|
|
@prop()
|
|
set name(value){
|
|
super.name = `Hi my name is ${value??""}`;
|
|
}
|
|
get name(){
|
|
return super.name;
|
|
}
|
|
}
|
|
|
|
let container = testContainer(
|
|
render(<ExtendedComponent name={"John Johnson"}/>)
|
|
);
|
|
document.body.appendChild(container);// Components need to be added to the DOM or their connectecCallback will not be called
|
|
|
|
expect(
|
|
container.innerHTML
|
|
).toBe([
|
|
`<extended-component-2>`,
|
|
`<div>`,
|
|
`<label>Value is</label>`,
|
|
`<div>Hi my name is John Johnson</div>`,
|
|
`</div>`,
|
|
`</extended-component-2>`,
|
|
].join(''));
|
|
|
|
document.body.removeChild(container);
|
|
});
|
|
}); |