import * as React from "react";
import { render } from "reakit-test-utils";
import { createComponent } from "../createComponent";
test("keys", () => {
const useHook = ({ children }: { children: string }) => ({ children });
useHook.__keys = ["children"] as const;
const Component = createComponent({ as: "div", useHook });
const { getByText } = render(component);
expect(getByText("component")).toBeDefined();
});
test("as string", () => {
const useA = ({ a }: { a: string }) => ({ children: a });
useA.__keys = ["a"] as const;
const A = createComponent({ as: "div", useHook: useA });
const { getByText } = render();
expect(getByText("a")).toMatchInlineSnapshot(`
a
`);
});
test("as component", () => {
const useA = ({ a }: { a: string }, htmlProps: any) => ({
children: a,
...htmlProps,
});
useA.__keys = ["a"] as const;
const A = createComponent({ as: "div", useHook: useA });
const B = ({ b, ...props }: { b: string }) => ;
const { getByText } = render();
expect(getByText("a")).toMatchInlineSnapshot(`
a
`);
});
test("as generic component", () => {
const useA = ({ a }: { a: string }, htmlProps: any) => ({
children: a,
...htmlProps,
});
useA.__keys = ["a"] as const;
const A = createComponent({ as: "div", useHook: useA });
function B({ b, ...props }: { b: T }) {
return ;
}
const { getByText } = render();
expect(getByText("a")).toMatchInlineSnapshot(`
a
`);
});
test("as other component created with createComponent", () => {
const useA = ({ a }: { a: string }, h: any) => ({ children: a, ...h });
useA.__keys = ["a"] as const;
const A = createComponent({ as: "div", useHook: useA });
const useB = ({ b }: { b: string }, h: any) => ({ id: b, ...h });
useB.__keys = ["b"] as const;
const B = createComponent({ as: "div", useHook: useB });
const { getByText } = render();
expect(getByText("a")).toMatchInlineSnapshot(`
a
`);
});
test("wrap", () => {
const useA = (_: any, h: any) => ({
wrapElement: (element: React.ReactNode) => (
{element}
),
...h,
});
const A = createComponent({ as: "span", useHook: useA });
const { baseElement } = render(a);
expect(baseElement).toMatchInlineSnapshot(`
`);
});