@react-formless/core/lib/index.spec.js

Data-driven react forms library written in typescript

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var react_hooks_1 = require("@testing-library/react-hooks");
var utils_1 = require("@react-formless/utils");
var _1 = require(".");
describe("useFormHook()", function () {
    var getFormHook = function (p) { return react_hooks_1.renderHook(function () { return _1.useFormHook(p); }); };
    var stringInputStateFixture = utils_1.factory({ active: false, visited: false, value: "" });
    var numberInputStateFixture = utils_1.factory({ active: false, visited: false, value: 0 });
    var initialValue = { name: "", level: 0 };
    var schema = {
        name: { name: "Skill Name", type: "text", validators: [utils_1.validateNotEmpty, utils_1.validateAZ] },
        level: { name: "Level", type: "number", validators: utils_1.validNumber, toValue: function (v) { return parseInt(v, 10); } }
    };
    var schemaNoValidators = {
        name: { name: "Skill Name", type: "text", validators: [] },
        level: { name: "Level", type: "number", validators: [], toValue: function (v) { return parseInt(v, 10); } }
    };
    var getMockedEvent = function () { return ({ preventDefault: jest.fn() }); };
    it("returns correct form state when initialized", function () {
        var expected = { name: stringInputStateFixture(), level: numberInputStateFixture() };
        var result = getFormHook({ schema: schema, initialValue: initialValue, onSubmit: utils_1._noop }).result;
        expect(result.current.formViewProps.state).toEqual(expected);
    });
    it("returns correct result when no errors", function () {
        var result = getFormHook({ schema: schemaNoValidators, initialValue: initialValue, onSubmit: utils_1._noop }).result;
        expect(result.current.result).toEqual(utils_1.mkOk(initialValue));
    });
    it("returns initial values on submit without changes", function () {
        var resultSpy = jest.fn();
        var result = getFormHook({ schema: schemaNoValidators, initialValue: initialValue, onSubmit: resultSpy }).result;
        react_hooks_1.act(function () { return result.current.handleSubmit(getMockedEvent()); });
        expect(resultSpy).toBeCalledWith(initialValue);
    });
    it("calls setState and returns ok validation", function () {
        var onSubmit = jest.fn();
        var result = getFormHook({ schema: schema, initialValue: initialValue, onSubmit: onSubmit }).result;
        var delta = {
            name: stringInputStateFixture({ value: "a" }),
            level: numberInputStateFixture()
        };
        react_hooks_1.act(function () { return result.current.formViewProps.setState(delta); });
        expect(result.current.formViewProps.state.name.value).toEqual("a");
        expect(onSubmit).toBeCalledTimes(0);
    });
    it("call setState and returns error when validation fails", function () {
        var onSubmit = jest.fn();
        var result = getFormHook({ schema: schema, initialValue: initialValue, onSubmit: onSubmit }).result;
        var delta = {
            name: stringInputStateFixture({ value: "1" }),
            level: numberInputStateFixture()
        };
        react_hooks_1.act(function () { return result.current.formViewProps.setState(delta); });
        react_hooks_1.act(function () { return result.current.handleSubmit({ preventDefault: utils_1._noop }); });
        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
        expect(result.current.formViewProps.state.name.validationResult.type).toEqual("Err");
        expect(onSubmit).toBeCalledTimes(0);
    });
    it("calls onSubmit when validation passed", function () {
        var onSubmit = jest.fn();
        var result = getFormHook({ schema: schema, initialValue: initialValue, onSubmit: onSubmit }).result;
        var delta = {
            name: stringInputStateFixture({ value: "foo" }),
            level: numberInputStateFixture()
        };
        react_hooks_1.act(function () { return result.current.formViewProps.setState(delta); });
        react_hooks_1.act(function () { return result.current.handleSubmit({ preventDefault: utils_1._noop }); });
        expect(onSubmit).toBeCalledTimes(1);
    });
    it("prevents default browser behaviour upon submission", function () {
        var e = getMockedEvent();
        var result = getFormHook({ schema: schema, initialValue: initialValue }).result;
        react_hooks_1.act(function () { return result.current.handleSubmit(e); });
        expect(e.preventDefault).toHaveBeenCalled();
    });
    it("returns new props when setState prop is called", function () {
        var result = getFormHook({ schema: schema, initialValue: initialValue, onSubmit: utils_1._noop }).result;
        var value = "foo";
        var delta = { name: stringInputStateFixture({ value: value }), level: numberInputStateFixture() };
        react_hooks_1.act(function () { return result.current.formViewProps.setState(delta); });
        expect(result.current.formViewProps.state.name.value).toEqual(value);
    });
    it("returns submitted state for untouched form", function () {
        var result = getFormHook({ schema: schema, initialValue: initialValue, onSubmit: utils_1._noop }).result;
        expect(result.current.submitted).toEqual(false);
    });
    it("returns submitted state for invalid form", function () {
        var result = getFormHook({ schema: schema, initialValue: initialValue, onSubmit: utils_1._noop }).result;
        react_hooks_1.act(function () { return result.current.handleSubmit(getMockedEvent()); });
        expect(result.current.submitted).toEqual(true);
    });
    it("set submitted to false when resetState is called", function () {
        var v = { name: "test", level: 100 };
        var result = getFormHook({ schema: schema, initialValue: v, onSubmit: utils_1._noop }).result;
        react_hooks_1.act(function () { return result.current.handleSubmit(getMockedEvent()); });
        expect(result.current.submitted).toEqual(true);
        react_hooks_1.act(function () { return result.current.resetState(); });
        expect(result.current.submitted).toEqual(false);
    });
    describe("touched", function () {
        it("returns touched: false for untouched form", function () {
            var result = getFormHook({ schema: schema, initialValue: initialValue, onSubmit: utils_1._noop }).result;
            expect(result.current.touched).toEqual(false);
        });
        it("set touched when field setState is called", function () {
            var result = getFormHook({ schema: schema, initialValue: initialValue, onSubmit: utils_1._noop }).result;
            var delta = {
                name: stringInputStateFixture({ value: "foo" }),
                level: numberInputStateFixture()
            };
            react_hooks_1.act(function () { return result.current.formViewProps.setState(delta); });
            expect(result.current.touched).toEqual(true);
        });
        it("set touched when submit is called even without changes", function () {
            var result = getFormHook({ schema: schema, initialValue: initialValue, onSubmit: utils_1._noop }).result;
            react_hooks_1.act(function () { return result.current.handleSubmit(getMockedEvent()); });
            expect(result.current.touched).toEqual(true);
        });
        it("set touched to false after calling resetState", function () {
            var result = getFormHook({ schema: schema, initialValue: initialValue, onSubmit: utils_1._noop }).result;
            react_hooks_1.act(function () { return result.current.handleSubmit(getMockedEvent()); });
            expect(result.current.touched).toEqual(true);
            react_hooks_1.act(function () { return result.current.resetState(); });
            expect(result.current.touched).toEqual(false);
        });
    });
    describe("passes subtypes in custom inputs", function () {
        it("passes subtypes in custom box", function () {
            var customSchema = {
                date: { type: "customBox", subtype: "date" }
            };
            var result = getFormHook({
                schema: customSchema,
                initialValue: { date: "" },
                onSubmit: utils_1._noop
            }).result;
            var resultingSchema = result.current.formViewProps.schema.date;
            expect(resultingSchema.type).toEqual("customBox");
            expect(resultingSchema.subtype === "date");
        });
        it("passes subtypes in custom box", function () {
            var customSchema = {
                cascader: {
                    type: "customOption",
                    subtype: "cascader",
                    values: [
                        ["1", "2"],
                        ["3", "4"]
                    ]
                }
            };
            var result = getFormHook({
                schema: customSchema,
                initialValue: { cascader: "" },
                onSubmit: utils_1._noop
            }).result;
            var resultingSchema = result.current.formViewProps.schema.cascader;
            expect(resultingSchema.type).toEqual("customOption");
            expect(resultingSchema.subtype === "cascader");
        });
    });
});
//# sourceMappingURL=index.spec.js.map