import * as React from "react"; import { render } from "reakit-test-utils"; import { createHook } from "../createHook"; import { SystemProvider } from "../SystemProvider"; type Options = { a: string; }; test("useProps", () => { const useHook = createHook>({ useProps(options, htmlProps) { return { ...htmlProps, "data-a": options.a, }; }, }); expect(useHook({ a: "a" }, { id: "a" })).toMatchInlineSnapshot(` Object { "data-a": "a", "id": "a", } `); }); test("useProps undefined props", () => { const useHook = createHook<{}, React.HTMLAttributes>({ useProps(_, htmlProps) { return { ...htmlProps, "data-a": undefined, }; }, }); expect(useHook({}, { id: "a" })).toMatchInlineSnapshot(` Object { "id": "a", } `); }); test("compose useProps", () => { const useHook = createHook>({ useProps(options, htmlProps) { return { ...htmlProps, "data-a": options.a, }; }, }); type Options2 = Options & { b: string; }; const useHook2 = createHook>({ compose: [useHook], useProps(options, htmlProps) { return { ...htmlProps, "data-b": options.b, }; }, }); expect(useHook2({ a: "a", b: "b" }, { id: "a" })).toMatchInlineSnapshot(` Object { "data-a": "a", "data-b": "b", "id": "a", } `); }); test("useOptions", () => { const useHook = createHook>({ useOptions(options) { return { ...options, a: "a", }; }, useProps(options, htmlProps) { return { ...htmlProps, id: options.a, }; }, }); expect(useHook()).toEqual({ id: "a" }); }); test("compose useOptions", () => { const useHook = createHook>({ useOptions(options) { return { ...options, a: `${options.a}b`, }; }, }); const useHook2 = createHook>({ compose: [useHook], useOptions(options) { return { ...options, a: "a", }; }, useProps(options, htmlProps) { return { ...htmlProps, id: options.a, }; }, }); expect(useHook2()).toEqual({ id: "ab" }); }); test("useComposeOptions", () => { const useHook = createHook>({ useProps(options, htmlProps) { return { ...htmlProps, id: `${options.a}b`, }; }, }); const useHook2 = createHook>({ compose: [useHook], useComposeOptions(options) { return { ...options, a: "a" }; }, }); expect(useHook2()).toEqual({ id: "ab" }); }); test("name", () => { const useHook = createHook>({ name: "A" }); expect(useHook.name).toBe("useA"); }); test("name and context", () => { const useHook = createHook>({ name: "A" }); const Test = () => { return

; }; const system = { useAProps: (_: Options, htmlProps: React.HTMLAttributes) => ({ ...htmlProps, id: "a", }), }; const { baseElement } = render( ); expect(baseElement).toMatchInlineSnapshot(`

`); }); test("name and context with useProps", () => { const useHook = createHook>({ name: "A", useProps(_, htmlProps) { return { className: "a", ...htmlProps }; }, }); const Test = () => { return

; }; const system = { useAProps: (_: Options, htmlProps: React.HTMLAttributes) => ({ ...htmlProps, id: "a", }), }; const { baseElement } = render( ); expect(baseElement).toMatchInlineSnapshot(`

`); }); test("name and context with useOptions", () => { const useHook = createHook>({ name: "A", useOptions(options) { return { ...options, a: "a", }; }, }); const Test = () => { return

; }; const system = { useAProps: (options: Options, htmlProps: React.HTMLAttributes) => ({ ...htmlProps, id: options.a, }), }; const { baseElement } = render( ); expect(baseElement).toMatchInlineSnapshot(`

`); });