@homebound/form-state 2.33.0 → 3.0.0

package/dist/useFormState.test.js

@@ -1,787 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const rtl_utils_1 = require("@homebound/rtl-utils");
-const react_1 = require("@testing-library/react");
-const mobx_1 = require("mobx");
-const mobx_react_1 = require("mobx-react");
-const react_2 = require("react");
-const FormStateApp_1 = require("./FormStateApp");
-const objectField_1 = require("./fields/objectField");
-const rules_1 = require("./rules");
-const useFormState_1 = require("./useFormState");
-describe("useFormState", () => {
-    it("calls init.map if init.input is defined", async () => {
-        // Given a component
-        function TestComponent() {
-            const config = { firstName: { type: "value" } };
-            // And we have query data that may or may not be defined
-            const data = { firstName: "bob" };
-            const form = (0, useFormState_1.useFormState)({
-                config,
-                // Then the lambda is passed the "de-undefined" data, i.e. `d.firstName` is not a compile error
-                init: { input: data, map: (d) => ({ firstName: d.firstName }) },
-            });
-            return (0, jsx_runtime_1.jsx)("div", { children: form.firstName.value });
-        }
-        const r = await (0, rtl_utils_1.render)((0, jsx_runtime_1.jsx)(TestComponent, {}));
-        expect(r.baseElement).toHaveTextContent("bob");
-    });
-    it("memoizes on init.input being an array", async () => {
-        const config = { firstName: { type: "value" } };
-        function TestComponent() {
-            const [, setTick] = (0, react_2.useState)(0);
-            const form = (0, useFormState_1.useFormState)({
-                config,
-                init: { input: ["a", "b"], map: ([a, b]) => ({ firstName: a + b }) },
-            });
-            const onClick = () => [form.firstName.set("fred"), setTick(1)];
-            return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("button", { "data-testid": "change", onClick: onClick }), (0, jsx_runtime_1.jsx)("div", { "data-testid": "firstName", children: form.firstName.value })] }));
-        }
-        const r = await (0, rtl_utils_1.render)((0, jsx_runtime_1.jsx)(TestComponent, {}));
-        expect(r.firstName).toHaveTextContent("ab");
-        (0, rtl_utils_1.click)(r.change);
-        expect(r.firstName).toHaveTextContent("fred");
-    });
-    it("uses default if init.input is undefined", async () => {
-        // Given a component
-        function TestComponent() {
-            const config = { firstName: { type: "value" } };
-            // And we have query data that may or may not be defined (but is actually undefined)
-            const data = Math.random() >= 0 ? undefined : { firstName: "bob" };
-            const form = (0, useFormState_1.useFormState)({
-                config,
-                init: { input: data, map: (d) => ({ firstName: d.firstName }) },
-            });
-            return (0, jsx_runtime_1.jsx)("div", { children: form.firstName.value });
-        }
-        const r = await (0, rtl_utils_1.render)((0, jsx_runtime_1.jsx)(TestComponent, {}));
-        // Then we init.map wasn't called, and we used {} instead
-        expect(r.baseElement.textContent).toEqual("");
-    });
-    it("uses custom init.ifUndefined if init.input is undefined", async () => {
-        // Given a component
-        function TestComponent() {
-            const config = {
-                id: { type: "value" },
-                firstName: { type: "value" },
-            };
-            // And we have query data that may or may not be defined (but is actually undefined)
-            const data = Math.random() >= 0 ? undefined : { firstName: "bob" };
-            const form = (0, useFormState_1.useFormState)({
-                config,
-                // And we pass `ifUndefined`
-                init: {
-                    input: data,
-                    map: (d) => ({ firstName: d.firstName }),
-                    ifUndefined: { firstName: "default" },
-                },
-            });
-            return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { "data-testid": "firstName", children: form.firstName.value }), (0, jsx_runtime_1.jsx)("div", { "data-testid": "changedValue", children: JSON.stringify(form.changedValue) })] }));
-        }
-        const r = await (0, rtl_utils_1.render)((0, jsx_runtime_1.jsx)(TestComponent, {}));
-        // Then we use the ifUndefined value
-        expect(r.firstName.textContent).toEqual("default");
-        expect(r.changedValue.textContent).toEqual(JSON.stringify({ firstName: "default" }));
-    });
-    it("doesn't required an init value", async () => {
-        function TestComponent() {
-            const config = { firstName: { type: "value" } };
-            const form = (0, useFormState_1.useFormState)({ config });
-            return (0, jsx_runtime_1.jsx)("div", { children: form.firstName.value });
-        }
-        const r = await (0, rtl_utils_1.render)((0, jsx_runtime_1.jsx)(TestComponent, {}));
-        expect(r.baseElement.textContent).toEqual("");
-    });
-    it("uses init.onlyOnce to not react to identity changes", async () => {
-        const config = { firstName: { type: "value" } };
-        const TestComponent = (0, mobx_react_1.observer)(() => {
-            // And we have an `init` value that is dynamic, so we can observe whether init reruns
-            const renderCount = (0, react_2.useRef)(0).current++;
-            const form = (0, useFormState_1.useFormState)({
-                config,
-                init: { input: { firstName: `${renderCount}` }, onlyOnce: true },
-            });
-            const [, setTick] = (0, react_2.useState)(0);
-            return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("button", { "data-testid": "change", onClick: () => setTick(1) }), (0, jsx_runtime_1.jsx)("div", { "data-testid": "firstName", children: form.firstName.value })] }));
-        });
-        const r = await (0, rtl_utils_1.render)((0, jsx_runtime_1.jsx)(TestComponent, {}));
-        expect(r.firstName).toHaveTextContent("0");
-        (0, rtl_utils_1.click)(r.change);
-        expect(r.firstName).toHaveTextContent("0");
-    });
-    it("can init with fragments", async () => {
-        // Given a component
-        function TestComponent() {
-            var _a, _b, _c, _d;
-            // And we have query data that may or may not be defined
-            const form = (0, useFormState_1.useFormState)({
-                config: authorWithBookFragments,
-                init: {
-                    input: {},
-                    map: () => ({ firstName: "a1", books: [{ id: "b:1", data: (0, objectField_1.fragment)({ misc: "data" }) }] }),
-                },
-            });
-            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { "data-testid": "fieldValue", children: form.books.rows[0].data.value.misc }), (0, jsx_runtime_1.jsx)("div", { "data-testid": "rowValue", children: (_b = (_a = form.books.rows[0].value.data) === null || _a === void 0 ? void 0 : _a.misc) !== null && _b !== void 0 ? _b : "unset" }), (0, jsx_runtime_1.jsx)("div", { "data-testid": "listValue", children: (_d = (_c = form.books.value[0].data) === null || _c === void 0 ? void 0 : _c.misc) !== null && _d !== void 0 ? _d : "unset" })] }));
-        }
-        const r = await (0, rtl_utils_1.render)((0, jsx_runtime_1.jsx)(TestComponent, {}));
-        expect(r.fieldValue).toHaveTextContent("data");
-        expect(r.rowValue).toHaveTextContent("unset");
-        expect(r.listValue).toHaveTextContent("unset");
-    });
-    it("keeps local changed values when a query refreshes", async () => {
-        // Given a component
-        function TestComponent() {
-            const config = authorWithAddressAndBooksConfig;
-            // And we have two sets of data
-            const data1 = {
-                id: "a:1",
-                firstName: "f1",
-                lastName: "l1",
-                address: { id: "address:1", street: "s1", city: "c1" },
-                books: [
-                    { id: "b:1", title: "a1" },
-                    { id: "b:2", title: "b1" },
-                ],
-            };
-            const data2 = {
-                id: "a:1",
-                firstName: "f2", // we'll have a local WIP change
-                lastName: "l2",
-                address: {
-                    id: "address:1",
-                    street: "s2", // we'll have a local WIP change
-                    city: "c2",
-                },
-                books: [
-                    {
-                        id: "b:1",
-                        title: "a2", // we'll have a local WIP change
-                    },
-                    { id: "b:2", title: "b2" },
-                    { id: "b:3", title: "b3" },
-                ],
-            };
-            // Eventually our local values are saved
-            const data3 = {
-                id: "a:1",
-                firstName: "local",
-                lastName: "l2",
-                address: { id: "address:1", street: "local", city: "c2" },
-                books: [
-                    { id: "b:1", title: "local" },
-                    { id: "b:2", title: "b2" },
-                    { id: "b:3", title: "b3" },
-                ],
-            };
-            // And we start out with data1
-            const [data, setData] = (0, react_2.useState)(data1);
-            const form = (0, useFormState_1.useFormState)({ config, init: { input: data } });
-            function makeLocalChanges() {
-                form.firstName.value = "local";
-                form.address.street.value = "local";
-                form.books.rows[0].title.value = "local";
-            }
-            return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { "data-testid": "firstName", children: form.firstName.value }), (0, jsx_runtime_1.jsx)("div", { "data-testid": "lastName", children: form.lastName.value }), (0, jsx_runtime_1.jsx)("div", { "data-testid": "street", children: form.address.street.value }), (0, jsx_runtime_1.jsx)("div", { "data-testid": "city", children: form.address.city.value }), (0, jsx_runtime_1.jsx)("div", { "data-testid": "title1", children: form.books.rows[0].title.value }), (0, jsx_runtime_1.jsx)("div", { "data-testid": "title2", children: form.books.rows[1].title.value }), (0, jsx_runtime_1.jsx)("div", { "data-testid": "booksLength", children: form.books.rows.length }), (0, jsx_runtime_1.jsx)("button", { "data-testid": "makeLocalChanges", onClick: makeLocalChanges }), (0, jsx_runtime_1.jsx)("button", { "data-testid": "refreshData", onClick: () => setData(data2) }), (0, jsx_runtime_1.jsx)("button", { "data-testid": "saveData", onClick: () => setData(data3) }), (0, jsx_runtime_1.jsx)("div", { "data-testid": "dirty", children: String(form.dirty) })] })) }));
-        }
-        // And we start out with the initial query data
-        const r = await (0, rtl_utils_1.render)((0, jsx_runtime_1.jsx)(TestComponent, {}));
-        expect(r.firstName.textContent).toEqual("f1");
-        expect(r.street.textContent).toEqual("s1");
-        expect(r.title1.textContent).toEqual("a1");
-        // When we make some local changes
-        (0, rtl_utils_1.click)(r.makeLocalChanges);
-        // Then we see them
-        expect(r.firstName.textContent).toEqual("local");
-        expect(r.street.textContent).toEqual("local");
-        expect(r.title1.textContent).toEqual("local");
-        expect(r.dirty.textContent).toEqual("true");
-        // And when the new query is ran i.e. due to a cache refresh
-        (0, rtl_utils_1.click)(r.refreshData);
-        // Then we kept our local changes
-        expect(r.firstName.textContent).toEqual("local");
-        expect(r.street.textContent).toEqual("local");
-        expect(r.title1.textContent).toEqual("local");
-        // But we also see the new data for fields we have not changed
-        expect(r.lastName.textContent).toEqual("l2");
-        expect(r.city.textContent).toEqual("c2");
-        expect(r.title2.textContent).toEqual("b2");
-        expect(r.booksLength.textContent).toEqual("3");
-        expect(r.dirty.textContent).toEqual("true");
-        // And then when our mutation results come back
-        (0, rtl_utils_1.click)(r.saveData);
-        // And we're not dirty anymore
-        expect(r.dirty.textContent).toEqual("false");
-    });
-    it("accepts server values if client has no further changes", async () => {
-        function TestComponent() {
-            const config = authorWithAddressAndBooksConfig;
-            // The initial resposne
-            const data1 = { id: "a:1", firstName: "F1" };
-            // The acked response, which uppercases our submission
-            const data2 = { id: "a:1", firstName: "F2" };
-            // And we start out with data1
-            const [data, setData] = (0, react_2.useState)(data1);
-            const form = (0, useFormState_1.useFormState)({ config, init: { input: data } });
-            function makeLocalChanges() {
-                form.firstName.value = "f2";
-            }
-            return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { "data-testid": "firstName", children: form.firstName.value }), (0, jsx_runtime_1.jsx)("button", { "data-testid": "makeLocalChanges", onClick: makeLocalChanges }), (0, jsx_runtime_1.jsx)("button", { "data-testid": "refreshData", onClick: () => {
-                                noop(form.changedValue); // pretend we put this on the wire
-                                setData(data2);
-                            } })] })) }));
-        }
-        // And we start out with the initial query data
-        const r = await (0, rtl_utils_1.render)((0, jsx_runtime_1.jsx)(TestComponent, {}));
-        expect(r.firstName.textContent).toEqual("F1");
-        // When we make some local changes
-        (0, rtl_utils_1.click)(r.makeLocalChanges);
-        // Then we see them
-        expect(r.firstName.textContent).toEqual("f2");
-        // And when the server acks a slightly different result
-        (0, rtl_utils_1.click)(r.refreshData);
-        // Then we accept it
-        expect(r.firstName.textContent).toEqual("F2");
-    });
-    it("can immediately update from a server ack before init input rerenders", async () => {
-        const config = {
-            firstName: { type: "value" },
-            lastName: { type: "value" },
-        };
-        const initialAuthor = { legalFirstName: "First", legalLastName: "Last" };
-        const savedAuthor = { legalFirstName: "Saved", legalLastName: "Author" };
-        function TestComponent() {
-            const form = (0, useFormState_1.useFormState)({
-                config,
-                init: { input: initialAuthor, map: mapServerAuthor },
-            });
-            function makeLocalChanges() {
-                form.firstName.set("Saved");
-                form.lastName.set("Author");
-            }
-            function saveWithoutUpdating() {
-                noop(form.changedValue);
-            }
-            function saveAndUpdate() {
-                noop(form.changedValue);
-                form.update(savedAuthor);
-            }
-            return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { "data-testid": "firstName", children: form.firstName.value }), (0, jsx_runtime_1.jsx)("div", { "data-testid": "lastName", children: form.lastName.value }), (0, jsx_runtime_1.jsx)("div", { "data-testid": "dirty", children: String(form.dirty) }), (0, jsx_runtime_1.jsx)("button", { "data-testid": "makeLocalChanges", onClick: makeLocalChanges }), (0, jsx_runtime_1.jsx)("button", { "data-testid": "saveWithoutUpdating", onClick: saveWithoutUpdating }), (0, jsx_runtime_1.jsx)("button", { "data-testid": "saveAndUpdate", onClick: saveAndUpdate })] })) }));
-        }
-        const r = await (0, rtl_utils_1.render)((0, jsx_runtime_1.jsx)(TestComponent, {}));
-        expect(r.firstName.textContent).toEqual("First");
-        expect(r.lastName.textContent).toEqual("Last");
-        expect(r.dirty.textContent).toEqual("false");
-        (0, rtl_utils_1.click)(r.makeLocalChanges);
-        expect(r.firstName.textContent).toEqual("Saved");
-        expect(r.lastName.textContent).toEqual("Author");
-        expect(r.dirty.textContent).toEqual("true");
-        (0, rtl_utils_1.click)(r.saveWithoutUpdating);
-        expect(r.dirty.textContent).toEqual("true");
-        (0, rtl_utils_1.click)(r.saveAndUpdate);
-        expect(r.firstName.textContent).toEqual("Saved");
-        expect(r.lastName.textContent).toEqual("Author");
-        expect(r.dirty.textContent).toEqual("false");
-        function mapServerAuthor(input) {
-            return { firstName: input.legalFirstName, lastName: input.legalLastName };
-        }
-    });
-    it("becomes clean when update acks an array value with the same contents", async () => {
-        const config = { colors: { type: "value" } };
-        function TestComponent() {
-            const form = (0, useFormState_1.useFormState)({ config, init: { input: { colors: ["red", "green", "blue"] } } });
-            // Note: we deliberately do not read `form.changedValue` (the way an auto-save would), so the only
-            // thing that can let `update` accept the server value is content equality, not the changedValue hint.
-            return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => {
-                    var _a;
-                    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { "data-testid": "colors", children: ((_a = form.colors.value) !== null && _a !== void 0 ? _a : []).join(",") }), (0, jsx_runtime_1.jsx)("div", { "data-testid": "dirty", children: String(form.dirty) }), (0, jsx_runtime_1.jsx)("button", { "data-testid": "edit", onClick: () => form.colors.set(["red", "green"]) }), (0, jsx_runtime_1.jsx)("button", { "data-testid": "saveAndUpdate", onClick: () => form.update({ colors: ["red", "green"] }) })] }));
-                } }));
-        }
-        const r = await (0, rtl_utils_1.render)((0, jsx_runtime_1.jsx)(TestComponent, {}));
-        expect(r.dirty.textContent).toEqual("false");
-        // When the user edits the array
-        (0, rtl_utils_1.click)(r.edit);
-        expect(r.dirty.textContent).toEqual("true");
-        // And the server acks the same contents in a brand-new array instance
-        (0, rtl_utils_1.click)(r.saveAndUpdate);
-        // Then the form is clean (we don't get stuck dirty on array reference inequality)
-        expect(r.colors.textContent).toEqual("red,green");
-        expect(r.dirty.textContent).toEqual("false");
-    });
-    it("can accept new data while read only", async () => {
-        // Given a component
-        function TestComponent() {
-            const config = authorWithAddressAndBooksConfig;
-            // And we have two sets of data
-            const data1 = {
-                firstName: "f1",
-                address: { street: "s1" },
-                books: [{ title: "a1" }],
-            };
-            const data2 = {
-                firstName: "f2",
-                address: { street: "s2" },
-                books: [{ title: "a2" }],
-            };
-            // And we start out with data1
-            const [data, setData] = (0, react_2.useState)(data1);
-            const form = (0, useFormState_1.useFormState)({
-                config,
-                init: { input: data },
-                // And the form is read only
-                readOnly: true,
-            });
-            return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { "data-testid": "firstName", children: form.firstName.value }), (0, jsx_runtime_1.jsx)("div", { "data-testid": "street", children: form.address.street.value }), (0, jsx_runtime_1.jsx)("div", { "data-testid": "title1", children: form.books.rows[0].title.value }), (0, jsx_runtime_1.jsx)("button", { "data-testid": "refreshData", onClick: () => setData(data2) })] })) }));
-        }
-        // And we start out with the initial query data
-        const r = await (0, rtl_utils_1.render)((0, jsx_runtime_1.jsx)(TestComponent, {}));
-        expect(r.firstName.textContent).toEqual("f1");
-        expect(r.street.textContent).toEqual("s1");
-        expect(r.title1.textContent).toEqual("a1");
-        // When the new query is ran i.e. due to a cache refresh
-        (0, rtl_utils_1.click)(r.refreshData);
-        // Then we see the latest data
-        expect(r.firstName.textContent).toEqual("f2");
-        expect(r.street.textContent).toEqual("s2");
-        expect(r.title1.textContent).toEqual("a2");
-    });
-    it("can accept new data with computed fields", async () => {
-        // Given a component
-        // And it's using a class/mobx proxy as the basis for the data
-        class AuthorRow {
-            constructor(firstName, lastName, books) {
-                this.firstName = firstName;
-                this.lastName = lastName;
-                this.books = books;
-                (0, mobx_1.makeAutoObservable)(this);
-            }
-            get fullName() {
-                return this.firstName + " " + this.lastName;
-            }
-        }
-        function TestComponent() {
-            // And we have two sets of data
-            const data1 = { firstName: "f1", lastName: "l1", books: [] };
-            const data2 = { firstName: "f2", lastName: "l2", books: [{ title: "t1" }] };
-            // And we start out with data1
-            const [data, setData] = (0, react_2.useState)(data1);
-            const author = (0, react_2.useMemo)(() => new AuthorRow(data.firstName, data.lastName, data.books), [data]);
-            const config = (0, react_2.useMemo)(() => ({
-                firstName: { type: "value" },
-                lastName: { type: "value" },
-                fullName: { type: "value", computed: true },
-                books: { type: "list", config: { title: { type: "value" } } },
-            }), []);
-            const form = (0, useFormState_1.useFormState)({ config, init: { input: author, map: (a) => a } });
-            return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { "data-testid": "firstName", children: form.firstName.value }), (0, jsx_runtime_1.jsx)("div", { "data-testid": "fullName", children: form.fullName.value }), (0, jsx_runtime_1.jsx)("div", { "data-testid": "booksLength", children: form.books.rows.length }), (0, jsx_runtime_1.jsx)("div", { "data-testid": "booksDirty", children: String(form.books.touched) }), (0, jsx_runtime_1.jsx)("button", { "data-testid": "refreshData", onClick: () => setData(data2) })] })) }));
-        }
-        // And we start out with the initial query data
-        const r = await (0, rtl_utils_1.render)((0, jsx_runtime_1.jsx)(TestComponent, {}));
-        expect(r.firstName.textContent).toEqual("f1");
-        expect(r.fullName.textContent).toEqual("f1 l1");
-        expect(r.booksLength.textContent).toEqual("0");
-        expect(r.booksDirty.textContent).toEqual("false");
-        // When the new query is ran i.e. due to a cache refresh
-        (0, rtl_utils_1.click)(r.refreshData);
-        expect(r.firstName.textContent).toEqual("f2");
-        expect(r.fullName.textContent).toEqual("f2 l2");
-        expect(r.booksLength.textContent).toEqual("1");
-        expect(r.booksDirty.textContent).toEqual("false");
-    });
-    it("can trigger auto-save when underlying observable is changed", async () => {
-        // Given a component
-        // And it's using a class/mobx proxy as the basis for the data
-        class AuthorRow {
-            constructor(firstName) {
-                this.firstName = firstName;
-                (0, mobx_1.makeAutoObservable)(this);
-            }
-        }
-        const autoSave = jest.fn();
-        function TestComponent() {
-            // And the author starts out with f1
-            const author = (0, react_2.useMemo)(() => new AuthorRow("f1"), []);
-            const config = (0, react_2.useMemo)(() => ({ firstName: { type: "value" } }), []);
-            const form = (0, useFormState_1.useFormState)({ config, init: { input: author, map: (a) => a }, autoSave });
-            return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("button", { "data-testid": "changeFirstName", onClick: () => (author.firstName = "f2") }), (0, jsx_runtime_1.jsx)("button", { "data-testid": "clearFirstName", onClick: () => (author.firstName = undefined) })] }));
-        }
-        // When we change the underlying observable
-        const r = await (0, rtl_utils_1.render)((0, jsx_runtime_1.jsx)(TestComponent, {}));
-        expect(autoSave).toBeCalledTimes(0);
-        await (0, rtl_utils_1.clickAndWait)(r.changeFirstName);
-        // Then auto save is triggered
-        expect(autoSave).toBeCalledTimes(1);
-        await (0, rtl_utils_1.clickAndWait)(r.clearFirstName);
-        expect(autoSave).toBeCalledTimes(2);
-    });
-    it("can trigger auto save for fields in list that were initially undefined", async () => {
-        const autoSave = jest.fn();
-        // Given a component
-        function TestComponent() {
-            // When the data is initially undefined
-            const [data, setData] = (0, react_2.useState)();
-            const data2 = { books: [{ title: "Title 1" }] };
-            const form = (0, useFormState_1.useFormState)({
-                config: authorWithBooksConfig,
-                init: { input: data, ifUndefined: { books: [] } },
-                autoSave,
-            });
-            return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("button", { "data-testid": "refreshData", onClick: () => setData(data2) }), (0, jsx_runtime_1.jsx)("button", { "data-testid": "add", onClick: () => form.books.add({ title: "New Book" }) }), (0, jsx_runtime_1.jsx)("button", { "data-testid": "blurBookOne", onClick: () => focusAndBlur(form.books.rows[0].title) }), (0, jsx_runtime_1.jsx)("button", { "data-testid": "blurBookTwo", onClick: () => focusAndBlur(form.books.rows[1].title) })] })) }));
-        }
-        // Given a formState with `onBlur` set
-        const r = await (0, rtl_utils_1.render)((0, jsx_runtime_1.jsx)(TestComponent, {}));
-        // When the data/child is now available
-        (0, rtl_utils_1.click)(r.refreshData);
-        // And the field is blurred
-        await (0, rtl_utils_1.clickAndWait)(r.blurBookOne);
-        // Then we don't auto-save because nothing has changed
-        expect(autoSave).toBeCalledTimes(0);
-        // And when adding a new book
-        await (0, rtl_utils_1.clickAndWait)(r.add);
-        // We autoSave the new row right away (because we don't have any validation rules
-        // that say the new row can't be empty)
-        expect(autoSave).toBeCalledTimes(1);
-        // And the new book is blurred
-        await (0, rtl_utils_1.clickAndWait)(r.blurBookTwo);
-        // Then we auto save again
-        expect(autoSave).toBeCalledTimes(2);
-    });
-    it("can revert to last-saved-state after a failed auto save", async () => {
-        // Given a component
-        function TestComponent() {
-            // And the firstName is initially "f1"
-            const [data, setData] = (0, react_2.useState)({ firstName: "f1" });
-            const query = (0, react_2.useMemo)(() => {
-                return { data, loading: false, error: undefined };
-            }, [data]);
-            const form = (0, useFormState_1.useFormState)({
-                config: authorConfig,
-                init: { query, map: (d) => d },
-                async autoSave(fs) {
-                    // If the user types "f2", we'll pretend the backend accepted the update, and acks it in the mutation response
-                    if (fs.firstName.value === "f2") {
-                        await new Promise((resolve) => setTimeout(resolve, 1));
-                        setData(fs.value);
-                    }
-                    else {
-                        // If the user types anything else, pretend the backend rejected it, and revert
-                        await new Promise((resolve) => setTimeout(resolve, 1));
-                        fs.revertChanges();
-                    }
-                },
-            });
-            return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { "data-testid": "firstNameOriginal", children: form.firstName.originalValue }), (0, jsx_runtime_1.jsx)(FormStateApp_1.TextField, { field: form.firstName }), ";"] })) }));
-        }
-        // So we start out with f1
-        const r = await (0, rtl_utils_1.render)((0, jsx_runtime_1.jsx)(TestComponent, {}));
-        expect(r.firstName).toHaveValue("f1");
-        // When we type f2, it should be accepted & stay
-        await (0, rtl_utils_1.typeAndWait)(r.firstName, "f2");
-        expect(r.firstName).toHaveValue("f2");
-        expect(r.firstNameOriginal).toHaveTextContent("f2");
-        // But if we type f3, we want it reverted, back to f2 (the last good value)
-        await (0, rtl_utils_1.typeAndWait)(r.firstName, "f3");
-        expect(r.firstName).toHaveValue("f2");
-        expect(r.firstNameOriginal).toHaveTextContent("f2");
-    });
-    it("returns empty lists even when inputs are undefined", async () => {
-        const autoSave = jest.fn();
-        // Given a component
-        function TestComponent() {
-            // And there is no initial data (i.e. we're creating the author)
-            const form = (0, useFormState_1.useFormState)({
-                config: authorWithBooksConfig,
-                init: { input: undefined, map: (d) => d },
-                autoSave,
-            });
-            return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { "data-testid": "len", children: form.books.value.length }), (0, jsx_runtime_1.jsx)("div", { "data-testid": "dirty", children: String(form.books.dirty) })] }));
-        }
-        // Then we can still read it as empty
-        const r = await (0, rtl_utils_1.render)((0, jsx_runtime_1.jsx)(TestComponent, {}));
-        expect(r.len).toHaveTextContent("0");
-        expect(r.dirty).toHaveTextContent("false");
-    });
-    it("does not infinite loop when calling set inside of auto-save", async () => {
-        // Given a component
-        let autoSaves = 0;
-        function TestComponent() {
-            const config = authorConfig;
-            const data = { firstName: "f1", lastName: "f1" };
-            const form = (0, useFormState_1.useFormState)({
-                config,
-                init: { input: data },
-                // And there is reactive business logic in the `autoSave` method
-                async autoSave(state) {
-                    state.lastName.set("l2");
-                    autoSaves++;
-                },
-            });
-            return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("button", { "data-testid": "setFirst", onClick: () => form.firstName.set("f2") }) }));
-        }
-        const r = await (0, rtl_utils_1.render)((0, jsx_runtime_1.jsx)(TestComponent, {}));
-        // When we change firstName
-        await (0, rtl_utils_1.clickAndWait)(r.setFirst);
-        // When autoSave didn't infinite loop
-        expect(autoSaves).toEqual(1);
-    });
-    it("batches calls to auto-save", async () => {
-        // Given a component
-        const autoSave = jest.fn();
-        function TestComponent() {
-            const config = authorConfig;
-            const data = { firstName: "f1", lastName: "f1" };
-            const form = (0, useFormState_1.useFormState)({
-                config,
-                init: { input: data },
-                autoSave: (form) => autoSave(form.changedValue),
-            });
-            return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("button", { "data-testid": "set", onClick: () => {
-                        // And it sets two fields in a single callback
-                        form.firstName.set("f2");
-                        form.lastName.set("l2");
-                    } }) }));
-        }
-        const r = await (0, rtl_utils_1.render)((0, jsx_runtime_1.jsx)(TestComponent, {}));
-        // When we change both
-        await (0, rtl_utils_1.clickAndWait)(r.set);
-        // Then we only call autoSave once
-        expect(autoSave).toBeCalledTimes(1);
-        expect(autoSave).toBeCalledWith({ firstName: "f2", lastName: "l2" });
-    });
-    it("queues changes for auto save if a save is already in progress", async () => {
-        const autoSaveStub = jest.fn();
-        const config = {
-            id: { type: "value" },
-            firstName: { type: "value" },
-            lastName: { type: "value" },
-        };
-        // Given a component using `getObjectState` for lazily creating ObjectStates
-        function TestComponent() {
-            const [apiData, setApiData] = (0, react_2.useState)({ id: "a:1", firstName: "Brandon", lastName: "Dow" });
-            const state = (0, useFormState_1.useFormState)({ config, autoSave, init: { input: apiData, map: (v) => v } });
-            async function autoSave(form) {
-                autoSaveStub(form.changedValue);
-                const changed = form.changedValue;
-                // Pretend to make an API call and update the local state
-                await Promise.resolve(1);
-                setApiData((prevState) => ({ ...prevState, ...changed }));
-            }
-            return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { "data-testid": "name", children: [apiData.firstName, " ", apiData.lastName] }), (0, jsx_runtime_1.jsx)("button", { "data-testid": "focusSetAndSaveField", onClick: () => {
-                            state.firstName.focus();
-                            state.firstName.set("Foo");
-                            state.firstName.maybeAutoSave();
-                            state.firstName.blur();
-                        } }), (0, jsx_runtime_1.jsx)("button", { "data-testid": "focusSetAndSaveFieldLastName", onClick: () => {
-                            state.lastName.focus();
-                            state.lastName.set("Bar");
-                            state.lastName.maybeAutoSave();
-                        } })] }));
-        }
-        const r = await (0, rtl_utils_1.render)((0, jsx_runtime_1.jsx)(TestComponent, {}));
-        // And triggering the auto save behavior before awaiting the initial promise to
-        // resolve so we have pending changes.
-        (0, rtl_utils_1.click)(r.focusSetAndSaveField, { allowAsync: true });
-        // Let the initial autoSave be called
-        (0, react_1.act)(() => {
-            jest.runOnlyPendingTimers();
-        });
-        expect(r.name).toHaveTextContent("Brandon Dow");
-        expect(autoSaveStub).toBeCalledTimes(1);
-        expect(autoSaveStub).toBeCalledWith({ id: "a:1", firstName: "Foo" });
-        // And while that is in flight, trigger another user action
-        (0, rtl_utils_1.click)(r.focusSetAndSaveFieldLastName, { allowAsync: true });
-        // (Use `wait` so that our timer flushes before the Promise.resolve(1) is ran)
-        await (0, rtl_utils_1.wait)();
-        // Then expect the auto save to only have been called twice. Once with each changedValues.
-        expect(autoSaveStub).toBeCalledTimes(2);
-        expect(autoSaveStub).toBeCalledWith({ id: "a:1", firstName: "Foo" });
-        expect(autoSaveStub).toBeCalledWith({ id: "a:1", lastName: "Bar" });
-    });
-    it("calls autoSave with results of calculations in addRules", async () => {
-        const autoSaveStub = jest.fn();
-        const config = {
-            id: { type: "value" },
-            firstName: { type: "value" },
-            lastName: { type: "value" },
-        };
-        // Given a component that is using autoSave
-        function TestComponent() {
-            const fs = (0, useFormState_1.useFormState)({
-                config,
-                addRules(fs) {
-                    // And also has calculated values
-                    (0, mobx_1.reaction)(() => fs.firstName.value, (curr) => (fs.lastName.value = curr));
-                },
-                autoSave: (fs) => autoSaveStub(fs.changedValue),
-                init: { input: { id: "a:1" } },
-            });
-            return (0, jsx_runtime_1.jsx)(FormStateApp_1.TextField, { field: fs.firstName });
-        }
-        const r = await (0, rtl_utils_1.render)((0, jsx_runtime_1.jsx)(TestComponent, {}));
-        // When the user sets one field
-        await (0, rtl_utils_1.typeAndWait)(r.firstName, "first");
-        // Then we only called autoSave once
-        expect(autoSaveStub).toBeCalledTimes(1);
-        expect(autoSaveStub).toBeCalledWith({ id: "a:1", firstName: "first", lastName: "first" });
-    });
-    it("sets loading if opts.loading is true", async () => {
-        const config = { firstName: { type: "value" } };
-        function TestComponent({ loading }) {
-            const form = (0, useFormState_1.useFormState)({ config, loading });
-            return (0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => (0, jsx_runtime_1.jsx)("div", { "data-testid": "loading", children: String(form.loading) }) });
-        }
-        // And we initially pass in `init.query.loading: true`
-        const r = await (0, rtl_utils_1.render)((0, jsx_runtime_1.jsx)(TestComponent, { loading: true }));
-        // Then the form is marked as loading
-        expect(r.loading).toHaveTextContent("true");
-        // And when the query is not loading
-        await r.rerender((0, jsx_runtime_1.jsx)(TestComponent, { loading: false }));
-        // Then the form is marked as not loading
-        expect(r.loading).toHaveTextContent("false");
-    });
-    it("sets loading if input.data is undefined", async () => {
-        const config = { firstName: { type: "value" } };
-        function TestComponent({ data }) {
-            const form = (0, useFormState_1.useFormState)({ config, init: { input: data } });
-            return (0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => (0, jsx_runtime_1.jsx)("div", { "data-testid": "loading", children: String(form.loading) }) });
-        }
-        // And we initially pass in `init.input: undefined`
-        const r = await (0, rtl_utils_1.render)((0, jsx_runtime_1.jsx)(TestComponent, { data: undefined }));
-        // Then the form is marked as loading
-        expect(r.loading).toHaveTextContent("true");
-        // And when the data is no longer undefined
-        await r.rerender((0, jsx_runtime_1.jsx)(TestComponent, { data: { firstName: "first" } }));
-        // Then the form is marked as not loading
-        expect(r.loading).toHaveTextContent("false");
-    });
-    it("sets loading if query.loading is true", async () => {
-        const config = { firstName: { type: "value" } };
-        function TestComponent({ loading, data }) {
-            const form = (0, useFormState_1.useFormState)({ config, init: { query: { data, loading, error: null }, map: (d) => d } });
-            return (0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => (0, jsx_runtime_1.jsx)("div", { "data-testid": "loading", children: String(form.loading) }) });
-        }
-        // And we initially pass in `init.query.loading: true`
-        const r = await (0, rtl_utils_1.render)((0, jsx_runtime_1.jsx)(TestComponent, { loading: true, data: undefined }));
-        // Then the form is marked as loading
-        expect(r.loading).toHaveTextContent("true");
-        // And when the query is not loading
-        await r.rerender((0, jsx_runtime_1.jsx)(TestComponent, { loading: false, data: { firstName: "first" } }));
-        // Then the form is marked as not loading
-        expect(r.loading).toHaveTextContent("false");
-    });
-    it("treats the id changing as a whole new entity instead of a delete", async () => {
-        const config = { firstName: { type: "value" } };
-        function TestComponent() {
-            // Given an initial author a1
-            const [author, setAuthor] = (0, react_2.useState)({ id: "a:1", firstName: "a1" });
-            const form = (0, useFormState_1.useFormState)({ config, init: { input: author, map: (a) => a } });
-            return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { "data-testid": "value", children: String(form.firstName.value) }), (0, jsx_runtime_1.jsx)("div", { "data-testid": "dirty", children: String(form.firstName.dirty) }), (0, jsx_runtime_1.jsx)("div", { "data-testid": "originalValue", children: String(form.firstName.originalValue) }), (0, jsx_runtime_1.jsx)("div", { "data-testid": "objectValue", children: String(form.value.firstName) }), (0, jsx_runtime_1.jsx)("div", { "data-testid": "a1", onClick: () => setAuthor({ id: "a:1", firstName: "a1" }) }), (0, jsx_runtime_1.jsx)("div", { "data-testid": "a2", onClick: () => setAuthor({ id: "a:2", firstName: undefined }) })] })) }));
-        }
-        const r = await (0, rtl_utils_1.render)((0, jsx_runtime_1.jsx)(TestComponent, {}));
-        // And the value is initially a1/and not dirty
-        expect(r.value).toHaveTextContent("a1");
-        expect(r.dirty).toHaveTextContent("false");
-        expect(r.originalValue).toHaveTextContent("a1");
-        expect(r.objectValue).toHaveTextContent("a1");
-        // When we switch to a completely separate author
-        (0, rtl_utils_1.click)(r.a2);
-        // Then it switches to the next author
-        expect(r.value).toHaveTextContent("undefined");
-        // And the field is not dirty (which had been the case before this bug fix)
-        expect(r.dirty).toHaveTextContent("false");
-        expect(r.originalValue).toHaveTextContent("undefined");
-        expect(r.objectValue).toHaveTextContent("undefined");
-        // And when we switch back to the original author
-        (0, rtl_utils_1.click)(r.a1);
-        // It again restores the value and does not think an edit was WIP
-        expect(r.value).toHaveTextContent("a1");
-        expect(r.dirty).toHaveTextContent("false");
-        expect(r.originalValue).toHaveTextContent("a1");
-        expect(r.objectValue).toHaveTextContent("a1");
-    });
-    it("doesn't allow calling commitChanges", async () => {
-        // Given a component
-        const autoSave = jest.fn();
-        function TestComponent() {
-            const config = authorConfig;
-            const form = (0, useFormState_1.useFormState)({
-                config,
-                init: { input: { firstName: "f1", lastName: "f1" } },
-                autoSave: async (form) => {
-                    autoSave(form.changedValue);
-                    // And the autoSave functions erroneously calls commitChanges
-                    form.commitChanges();
-                },
-            });
-            return (0, jsx_runtime_1.jsx)("button", { "data-testid": "set", onClick: () => form.firstName.set("f2") });
-        }
-        await (0, rtl_utils_1.render)((0, jsx_runtime_1.jsx)(TestComponent, {}));
-        // When we change a field, and try to commit, it blows up
-        // await expect(clickAndWait(r.set)).rejects.toThrow(
-        //   "When using autoSave, you should not manually call commitChanges",
-        // );
-        //
-        // ...for some reason, I think maybe due to rtl-utils calling runOnlyPendingTimers
-        // instead of runOnlyPendingTimers async, the `clickAndWait` actually resolves
-        // successfully (it's not a rejected promise), and our test technically keeps running,
-        // except then somewhere in the guts of Jest, the fake timer infra realizes that a tick
-        // failed (our autosave is actually fired from a setTimout tick), and so the Jest test
-        // fails anyway, but without anyway for us to catch and do a `.toThrow` assertion.
-    });
-});
-const authorConfig = {
-    id: { type: "value" },
-    firstName: { type: "value" },
-    lastName: { type: "value" },
-};
-const authorWithBooksConfig = {
-    id: { type: "value" },
-    firstName: { type: "value" },
-    lastName: { type: "value" },
-    books: {
-        type: "list",
-        config: {
-            id: { type: "value" },
-            title: { type: "value", rules: [rules_1.required] },
-            classification: { type: "value" },
-        },
-    },
-};
-const authorWithAddressAndBooksConfig = {
-    id: { type: "value" },
-    firstName: { type: "value" },
-    lastName: { type: "value" },
-    address: {
-        type: "object",
-        config: {
-            id: { type: "value" },
-            street: { type: "value", rules: [rules_1.required] },
-            city: { type: "value" },
-        },
-    },
-    books: {
-        type: "list",
-        config: {
-            id: { type: "value" },
-            title: { type: "value", rules: [rules_1.required] },
-            classification: { type: "value" },
-        },
-    },
-};
-const authorWithBookFragments = {
-    id: { type: "value" },
-    firstName: { type: "value" },
-    books: {
-        type: "list",
-        config: {
-            id: { type: "value" },
-            data: { type: "fragment" },
-        },
-    },
-};
-/** Emulates a user focusing and then blurring a field. */
-function focusAndBlur(state) {
-    state.focus();
-    state.blur();
-}
-function noop(value) { }