57 lines
1.7 KiB
JavaScript
57 lines
1.7 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("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);
|
|
});
|
|
}); |