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

Data-driven react forms library written in typescript

"use strict";
var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
Object.defineProperty(exports, "__esModule", { value: true });
var forms_1 = require("./forms");
var validators_1 = require("@react-formless/utils/validators");
var genericErrorText = "generic_error";
var alwaysValid = function (v) { return validators_1.mkOk(v); };
var alwaysInvalid = function (v) { return validators_1.mkErr(genericErrorText, v); };
var getValidator = function (validity) { return [validity === "valid" ? alwaysValid : alwaysInvalid]; };
describe("text type", function () {
    var state = { text: { visited: false, active: false, value: "foo" } };
    var mkSimpleTextSchema = function (valid) {
        if (valid === void 0) { valid = "valid"; }
        return ({
            text: { name: "Name", type: "text", validators: getValidator(valid) }
        });
    };
    test("toFormState()", function () {
        var expected = { text: { visited: false, active: false, value: "foo" } };
        expect(forms_1.toFormState(mkSimpleTextSchema(), { text: "foo" })).toEqual(expected);
    });
    test("toResult() => ok", function () {
        var current = forms_1.toResult(mkSimpleTextSchema(), state).value;
        expect(current).toEqual({ text: "foo" });
    });
    test("toResult() => err", function () {
        var current = forms_1.toResult(mkSimpleTextSchema("invalid"), state);
        expect(current).toEqual(validators_1.mkErr({ text: genericErrorText }, { text: "foo" }));
    });
    test("validateForm()", function () {
        var expectedState = {
            text: { visited: true, active: false, value: "foo", validationResult: validators_1.mkOk("foo") }
        };
        expect(forms_1.validateForm(mkSimpleTextSchema(), state)).toEqual(expectedState);
    });
    it("isFormActive()", function () {
        var activeState = { text: { visited: false, active: true, value: "foo" } };
        var inactiveState = { text: { visited: false, active: false, value: "foo" } };
        expect(forms_1.isFormActive(mkSimpleTextSchema(), activeState)).toEqual(true);
        expect(forms_1.isFormActive(mkSimpleTextSchema(), inactiveState)).toEqual(false);
    });
});
describe("radio type", function () {
    test("toFormState()", function () {
        var values = [
            ["Active", true],
            ["Inactive", false]
        ];
        var schema = {
            isActive: { name: "Name", type: "radio", values: values, validators: [] }
        };
        var expected = { isActive: { visited: false, active: false, value: "false" } };
        expect(forms_1.toFormState(schema, { isActive: false })).toEqual(expected);
    });
});
describe("collection type", function () {
    var getValueSchema = function (valid) {
        if (valid === void 0) { valid = "valid"; }
        return ({
            name: { name: "Name", type: "text", validators: getValidator(valid) }
        });
    };
    var getCollectionSchema = function (valid) {
        if (valid === void 0) { valid = "valid"; }
        return ({
            values: { name: "Values", type: "collection", fields: getValueSchema(valid) }
        });
    };
    var getNestedValueSchema = function (valid) {
        if (valid === void 0) { valid = "valid"; }
        return ({
            name: { name: "Name", type: "text", validators: getValidator(valid) },
            values: { name: "Values", type: "collection", fields: getValueSchema(valid) }
        });
    };
    var getNestedCollectionSchema = function (valid) {
        if (valid === void 0) { valid = "valid"; }
        return ({
            nestedValues: { name: "Nested values", type: "collection", fields: getNestedValueSchema(valid) }
        });
    };
    var collection = {
        values: [{ name: "foo" }, { name: "bar" }]
    };
    var collectionState = {
        values: [
            { name: { visited: false, active: false, value: "foo" } },
            { name: { visited: false, active: false, value: "bar" } }
        ]
    };
    var nestedCollection = {
        nestedValues: [
            { name: "foo", values: [{ name: "baz" }] },
            { name: "bar", values: [{ name: "qux" }, { name: "quz" }] }
        ]
    };
    var nestedCollectionState = {
        nestedValues: [
            {
                name: { visited: false, active: false, value: "foo" },
                values: [{ name: { visited: false, active: false, value: "baz" } }]
            },
            {
                name: { visited: false, active: false, value: "bar" },
                values: [
                    { name: { visited: false, active: false, value: "qux" } },
                    { name: { visited: false, active: false, value: "quz" } }
                ]
            }
        ]
    };
    test("toFormState()", function () { return expect(forms_1.toFormState(getCollectionSchema(), collection)).toEqual(collectionState); });
    test("nested toFormState()", function () {
        return expect(forms_1.toFormState(getNestedCollectionSchema(), nestedCollection)).toEqual(nestedCollectionState);
    });
    test("toResult() => ok", function () {
        var current = forms_1.toResult(getCollectionSchema(), collectionState).value;
        expect(current.values).toEqual(collection.values);
    });
    test("toResult() => err", function () {
        var current = forms_1.toResult(getCollectionSchema("invalid"), collectionState);
        expect(current).toEqual(validators_1.mkErr({ values: genericErrorText }, collection));
    });
    test("nested toResult() => ok", function () {
        var current = forms_1.toResult(getNestedCollectionSchema(), nestedCollectionState).value;
        expect(current.nestedValues).toEqual(nestedCollection.nestedValues);
    });
    test("nested toResult() => err", function () {
        var current = forms_1.toResult(getNestedCollectionSchema("invalid"), nestedCollectionState);
        expect(current).toEqual(validators_1.mkErr({ nestedValues: genericErrorText }, nestedCollection));
    });
    test("validateForm()", function () {
        var validatedState = {
            values: [
                { name: { visited: true, active: false, value: "foo", validationResult: validators_1.mkOk("foo") } },
                { name: { visited: true, active: false, value: "bar", validationResult: validators_1.mkOk("bar") } }
            ]
        };
        expect(forms_1.validateForm(getCollectionSchema(), collectionState)).toEqual(validatedState);
    });
    it("nested isFormActive()", function () {
        var activeState = {
            nestedValues: [
                {
                    name: { visited: false, active: false, value: "foo" },
                    values: [{ name: { visited: false, active: false, value: "baz" } }]
                },
                {
                    name: { visited: false, active: false, value: "bar" },
                    values: [
                        { name: { visited: false, active: true, value: "qux" } },
                        { name: { visited: false, active: false, value: "quz" } }
                    ]
                }
            ]
        };
        var inactiveState = {
            nestedValues: [
                {
                    name: { visited: false, active: false, value: "foo" },
                    values: [{ name: { visited: false, active: false, value: "baz" } }]
                },
                {
                    name: { visited: false, active: false, value: "bar" },
                    values: [
                        { name: { visited: false, active: false, value: "qux" } },
                        { name: { visited: false, active: false, value: "quz" } }
                    ]
                }
            ]
        };
        expect(forms_1.isFormActive(getNestedCollectionSchema(), activeState)).toEqual(true);
        expect(forms_1.isFormActive(getNestedCollectionSchema(), inactiveState)).toEqual(false);
    });
});
describe("list type", function () {
    var getListSchema = function (valid) {
        if (valid === void 0) { valid = "valid"; }
        return ({
            items: {
                name: "Items",
                type: "list",
                field: { name: "Item", type: "text", validators: getValidator(valid) }
            }
        });
    };
    var list = { items: ["item", "item2"] };
    var listState = {
        items: [
            { visited: false, active: false, value: "item" },
            { visited: false, active: false, value: "item2" }
        ]
    };
    test("toFormState()", function () {
        expect(forms_1.toFormState(getListSchema(), list)).toEqual(listState);
    });
    test("toResult() => ok", function () {
        var current = forms_1.toResult(getListSchema(), listState).value;
        expect(current).toEqual(list);
    });
    test("toResult() => err", function () {
        var current = forms_1.toResult(getListSchema("invalid"), listState);
        expect(current).toEqual(validators_1.mkErr({ items: genericErrorText }, list));
    });
    it("validateForm", function () {
        var validatedState = {
            items: [
                {
                    visited: true,
                    active: false,
                    value: "item",
                    validationResult: validators_1.mkOk("item")
                },
                {
                    visited: true,
                    active: false,
                    value: "item2",
                    validationResult: validators_1.mkOk("item2")
                }
            ]
        };
        expect(forms_1.validateForm(getListSchema(), listState)).toEqual(validatedState);
    });
    test("isFormActive()", function () {
        var activeState = {
            items: [
                { visited: false, active: true, value: "item" },
                { visited: false, active: false, value: "item2" }
            ]
        };
        var inactiveState = {
            items: [
                { visited: false, active: false, value: "item" },
                { visited: false, active: false, value: "item2" }
            ]
        };
        expect(forms_1.isFormActive(getListSchema(), activeState)).toEqual(true);
        expect(forms_1.isFormActive(getListSchema(), inactiveState)).toEqual(false);
    });
});
describe("multiselect type", function () {
    var getMultiselectSchema = function (valid) {
        if (valid === void 0) { valid = "valid"; }
        return ({
            values: {
                name: "Values",
                type: "multiselect",
                creatable: true,
                values: [
                    ["label1", "foo"],
                    ["label2", "bar"]
                ],
                validators: getValidator(valid)
            }
        });
    };
    var emptyMultiselect = {};
    var emptyMultiselectState = { values: { visited: false, active: false, value: [] } };
    var multiselect = { values: ["foo", "bar"] };
    var multiselectState = {
        values: { visited: false, active: false, value: ["foo", "bar"] }
    };
    test("toFormState()", function () {
        expect(forms_1.toFormState(getMultiselectSchema(), emptyMultiselect)).toEqual(emptyMultiselectState);
        expect(forms_1.toFormState(getMultiselectSchema(), multiselect)).toEqual(multiselectState);
    });
    test("toResult() => ok", function () {
        var current = forms_1.toResult(getMultiselectSchema(), multiselectState).value;
        expect(current).toEqual(multiselect);
    });
    test("toResult() => err", function () {
        var current = forms_1.toResult(getMultiselectSchema("invalid"), multiselectState);
        expect(current).toEqual(validators_1.mkErr({ values: genericErrorText }, multiselect));
    });
    it("validateForm", function () {
        var validatedState = {
            values: {
                visited: true,
                active: false,
                value: ["foo", "bar"],
                validationResult: validators_1.mkOk(["foo", "bar"])
            }
        };
        expect(forms_1.validateForm(getMultiselectSchema(), multiselectState)).toEqual(validatedState);
    });
    test("isFormActive()", function () {
        var activeState = {
            values: { visited: false, active: true, value: ["foo", "bar"] }
        };
        var inactiveState = {
            values: { visited: false, active: false, value: ["foo", "bar"] }
        };
        expect(forms_1.isFormActive(getMultiselectSchema(), activeState)).toEqual(true);
        expect(forms_1.isFormActive(getMultiselectSchema(), inactiveState)).toEqual(false);
    });
});
describe("InputState()", function () {
    it("constructs state with correct value", function () {
        return expect(forms_1.mkInputState("", "foo")).toEqual({
            visited: false,
            active: false,
            value: "foo"
        });
    });
    it("constructs state with def value when value is empty", function () {
        return expect(forms_1.mkInputState("def", "")).toEqual({
            visited: false,
            active: false,
            value: "def"
        });
    });
    it("constructs state with def value when value is undefined", function () {
        return expect(forms_1.mkInputState("def", undefined)).toEqual({
            visited: false,
            active: false,
            value: "def"
        });
    });
    it("constructs state with active param ", function () {
        return expect(forms_1.mkInputState("", "foo", true)).toEqual({
            visited: false,
            active: true,
            value: "foo"
        });
    });
    it("constructs state with visited param ", function () {
        return expect(forms_1.mkInputState("", "foo", false, true)).toEqual({
            visited: true,
            active: false,
            value: "foo"
        });
    });
});
describe("validate()", function () {
    var state = { foo: 1 };
    var input = { state: state, schema: { type: "number" }, setDelta: jest.fn() };
    var value = { foo: 2 };
    beforeEach(function () { return input.setDelta.mockReset(); });
    it("sets state, value and validation result with setDelta", function () {
        forms_1.validate(input, value);
        var expected = __assign(__assign({}, input.state), { value: value, validationResult: validators_1.mkOk(value) });
        expect(input.setDelta).toBeCalledWith(expected);
    });
    it("returns validation result", function () {
        var current = forms_1.validate(input, value);
        expect(current).toEqual(validators_1.mkOk(value));
    });
    it("should should transform value with given function", function () {
        var result = { foo: "1" };
        var toValue = jest.fn().mockReturnValue(result);
        forms_1.validate(__assign(__assign({}, input), { schema: __assign(__assign({}, input.schema), { toValue: toValue }) }), value);
        expect(toValue).toBeCalledWith(value);
        expect(input.setDelta.mock.calls[0][0].value).toEqual(result);
    });
});
//# sourceMappingURL=forms.spec.js.map