v0.0.15: Function components

2020-06-09 00:25:27 +02:00
parent 0da07549e7
commit 15506fe890
12 changed files with 1266 additions and 577 deletions
--- a/jest/components/function-component.test.js
+++ b/jest/components/function-component.test.js
@@ -0,0 +1,57 @@
+import { render, CustomElement, Host, defineElement, state, prop } from "@cerxes/csx";
+import { testContainer } from "../utils/test-container";
+import { nextAnimationFrame } from "../utils/next-animation-frame";
+
+describe("Function components", () => {
+    /**
+     * Assert that a basic component renders as expected
+     */
+    test("Simple example-component", async () => {
+        
+        function FuncComponent(props, children){
+            return (
+                <div {...props}>
+                    <div className={"header"}>
+                        Header
+                    </div>
+                    <div className={"content"}>
+                        {children}
+                    </div>
+                </div>
+            )
+        }
+        
+        @defineElement('test-component')
+        class TestComponent extends CustomElement{
+            render(){
+                return (
+                    <FuncComponent className={"page"}>
+                        I am example content
+                    </FuncComponent>
+                )
+            }
+        }
+        
+        let container = testContainer(
+            render(<TestComponent/>)
+        );
+        document.body.appendChild(container);// Components need to be added to the DOM or their connectecCallback will not be called
+        
+        expect(
+            container.innerHTML
+        ).toBe([
+            `<test-component>`,
+            `<div class="page">`,
+            `<div class="header">`,
+            `Header`,
+            `</div>`,
+            `<div class="content">`,
+            `I am example content`,
+            `</div>`,
+            `</div>`,
+            `</test-component>`,
+        ].join(''));
+        
+        document.body.removeChild(container);
+    });
+});
--- a/jest/components/inheritance.test.js
+++ b/jest/components/inheritance.test.js
@@ -0,0 +1,113 @@
+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);
+    });
+});