diff --git a/integration-tests/create-element.test.ts b/integration-tests/create-element.test.ts index 171a6f0..a5ee1bc 100644 --- a/integration-tests/create-element.test.ts +++ b/integration-tests/create-element.test.ts @@ -1,7 +1,12 @@ import { screen } from "@testing-library/dom"; import userEvent from "@testing-library/user-event"; -import { attachComponent, createElement } from "../src"; +import { + attachComponent, + createElement, + createState, + type State, +} from "../src"; describe("createElement", () => { let cleanup: Function | undefined; @@ -156,4 +161,40 @@ describe("createElement", () => { expect(screen.getByTestId("container").textContent).toBe("text 5"); }); + + test("support returning useValue directly from a component", async () => { + const user = userEvent.setup(); + function App() { + const showState = createState(false); + return createElement("div", { + children: [ + createElement("h1", { children: ["parent component"] }), + createElement("button", { + "data-testid": "button", + onClick: () => showState.setValue(true), + }), + createElement(StateComponent, { showState }), + ], + }); + } + + function StateComponent({ showState }: { showState: State }) { + return showState.useValue((shouldShowState) => + shouldShowState + ? createElement("div", { + "data-testid": "stateComponent", + children: "state component", + }) + : null + ); + } + cleanup = attachComponent({ + htmlElement: document.body, + component: createElement(App), + }); + + expect(screen.queryByTestId("stateComponent")).not.toBeInTheDocument(); + await user.click(screen.getByTestId("button")); + expect(screen.getByTestId("stateComponent")).toBeInTheDocument(); + }); }); diff --git a/src/types.d.ts b/src/types.d.ts index 18e2d9a..5de291a 100644 --- a/src/types.d.ts +++ b/src/types.d.ts @@ -85,7 +85,7 @@ export type ComponentAPI = { export type ComponentFunction = ( props: VelesElementProps, componentAPI: ComponentAPI -) => VelesElement | VelesComponent | string | null; +) => VelesElement | VelesComponent | VelesStringElement | string | null; export type AttributeHelper = { (htmlElement: HTMLElement, attributeName: string, node: VelesElement): T;