styled-hook-form/lib/components/form-builder/__tests__/formbuilder.test.js

React form library for styled-components based on grommet and react-hook-form

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("@testing-library/react");
require("jest-styled-components");
const test_utils_1 = require("react-dom/test-utils");
const form_builder_1 = require("../form-builder");
const types_1 = require("../types");
describe("FormBuilder", () => {
    it("model overrides default value", () => {
        const DropDownField = () => {
            return (jsx_runtime_1.jsx("div", { children: jsx_runtime_1.jsx(form_builder_1.FormBuilder, Object.assign({ model: {
                        test: "value2",
                    }, fields: [
                        {
                            type: types_1.FormFieldType.Text,
                            defaultValue: "value1",
                            name: "test",
                            label: "test",
                        },
                    ] }, { children: (methods) => (jsx_runtime_1.jsx("div", Object.assign({ "data-testid": "value" }, { children: methods.watch("test") }), void 0)) }), void 0) }, void 0));
        };
        let { container } = react_1.render(jsx_runtime_1.jsx(DropDownField, {}, void 0));
        let value = react_1.getByTestId(container, "value").innerHTML;
        expect(value).toBe("value2");
    });
    it("onChange event fires when value changes", () => {
        jest.useFakeTimers();
        window.HTMLElement.prototype.scrollIntoView = jest.fn();
        window.scrollTo = jest.fn();
        const Form = ({ onChange }) => {
            return (jsx_runtime_1.jsx("div", { children: jsx_runtime_1.jsx(form_builder_1.FormBuilder, { fields: [
                        {
                            type: types_1.FormFieldType.DropDown,
                            options: [
                                { text: "Opt1", value: "opt1" },
                                { text: "Opt2", value: "opt2" },
                            ],
                            itemLabelKey: "text",
                            itemValueKey: "value",
                            name: "test",
                            label: "test",
                            placeholder: "dropdown",
                            onChange: (v) => onChange && onChange(v),
                        },
                    ] }, void 0) }, void 0));
        };
        let onChangeFn = jest.fn();
        const { container } = react_1.render(jsx_runtime_1.jsx(Form, { onChange: onChangeFn }, void 0));
        let dp = react_1.getByText(container, "dropdown");
        react_1.fireEvent.click(dp);
        test_utils_1.act(() => {
            jest.advanceTimersByTime(200);
        });
        let secondOption = react_1.getByText(document.body, "Opt2");
        react_1.fireEvent.click(secondOption);
        test_utils_1.act(() => {
            jest.advanceTimersByTime(100);
        });
        expect(onChangeFn).toBeCalledWith("opt2");
    });
});