@homebound/form-state 2.2.9 → 2.2.13

package/dist/useFormState.test.js

@@ -0,0 +1,474 @@
+"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 mobx_1 = require("mobx");
+const mobx_react_1 = require("mobx-react");
+const react_1 = require("react");
+const formState_1 = require("./formState");
+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 = Math.random() >= 0 ? { firstName: "bob" } : undefined;
+            // Then the lambda is passed the "de-undefined" data
+            const form = useFormState_1.useFormState({
+                config,
+                init: { input: data, map: (d) => ({ firstName: d.firstName }) },
+            });
+            return jsx_runtime_1.jsx("div", { children: form.firstName.value }, void 0);
+        }
+        const r = await rtl_utils_1.render(jsx_runtime_1.jsx(TestComponent, {}, void 0));
+        expect(r.baseElement).toHaveTextContent("bob");
+    });
+    it("memoizes on init.input being an array", async () => {
+        const config = { firstName: { type: "value" } };
+        function TestComponent() {
+            const [, setTick] = react_1.useState(0);
+            const form = useFormState_1.useFormState({
+                config,
+                init: { input: ["a", "b"], map: ([a, b]) => ({ firstName: a + b }) },
+            });
+            const onClick = () => [form.firstName.set("fred"), setTick(1)];
+            return (jsx_runtime_1.jsxs("div", { children: [jsx_runtime_1.jsx("button", { "data-testid": "change", onClick: onClick }, void 0),
+                    jsx_runtime_1.jsx("div", Object.assign({ "data-testid": "firstName" }, { children: form.firstName.value }), void 0)] }, void 0));
+        }
+        const r = await rtl_utils_1.render(jsx_runtime_1.jsx(TestComponent, {}, void 0));
+        expect(r.firstName()).toHaveTextContent("ab");
+        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 = useFormState_1.useFormState({
+                config,
+                init: { input: data, map: (d) => ({ firstName: d.firstName }) },
+            });
+            return jsx_runtime_1.jsx("div", { children: form.firstName.value }, void 0);
+        }
+        const r = await rtl_utils_1.render(jsx_runtime_1.jsx(TestComponent, {}, void 0));
+        // 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 = useFormState_1.useFormState({
+                config,
+                // And we pass `ifUndefined`
+                init: {
+                    input: data,
+                    map: (d) => ({ firstName: d.firstName }),
+                    ifUndefined: { firstName: "default" },
+                },
+            });
+            return (jsx_runtime_1.jsxs("div", { children: [jsx_runtime_1.jsx("div", Object.assign({ "data-testid": "firstName" }, { children: form.firstName.value }), void 0),
+                    jsx_runtime_1.jsx("div", Object.assign({ "data-testid": "changedValue" }, { children: JSON.stringify(form.changedValue) }), void 0)] }, void 0));
+        }
+        const r = await rtl_utils_1.render(jsx_runtime_1.jsx(TestComponent, {}, void 0));
+        // Then we use the ifUndefined value
+        expect(r.firstName.textContent).toEqual("default");
+        expect(r.changedValue.textContent).toEqual(JSON.stringify({ firstName: "default" }));
+    });
+    it("uses init if set as a value", async () => {
+        const config = { firstName: { type: "value" } };
+        function TestComponent() {
+            const [, setTick] = react_1.useState(0);
+            const form = useFormState_1.useFormState({
+                config,
+                // That's using a raw init value
+                init: { firstName: "bob" },
+            });
+            return (jsx_runtime_1.jsxs("div", { children: [jsx_runtime_1.jsx("button", { "data-testid": "change", onClick: () => {
+                            // When that value changes
+                            form.firstName.set("fred");
+                            // And also we re-render the component
+                            setTick(1);
+                        } }, void 0),
+                    jsx_runtime_1.jsx("div", Object.assign({ "data-testid": "firstName" }, { children: form.firstName.value }), void 0)] }, void 0));
+        }
+        const r = await rtl_utils_1.render(jsx_runtime_1.jsx(TestComponent, {}, void 0));
+        expect(r.firstName()).toHaveTextContent("bob");
+        rtl_utils_1.click(r.change);
+        // Then the change didn't get dropped due to init being unstable
+        expect(r.firstName()).toHaveTextContent("fred");
+    });
+    it("doesn't required an init value", async () => {
+        function TestComponent() {
+            const config = { firstName: { type: "value" } };
+            const form = useFormState_1.useFormState({ config });
+            return jsx_runtime_1.jsx("div", { children: form.firstName.value }, void 0);
+        }
+        const r = await rtl_utils_1.render(jsx_runtime_1.jsx(TestComponent, {}, void 0));
+        expect(r.baseElement.textContent).toEqual("");
+    });
+    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",
+                lastName: "l2",
+                address: { id: "address:1", street: "s2", city: "c2" },
+                books: [
+                    { id: "b:1", title: "a2" },
+                    { 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] = react_1.useState(data1);
+            const form = useFormState_1.useFormState({ config, init: { input: data, map: (d) => d } });
+            function makeLocalChanges() {
+                form.firstName.value = "local";
+                form.address.street.value = "local";
+                form.books.rows[0].title.value = "local";
+            }
+            return (jsx_runtime_1.jsx(mobx_react_1.Observer, { children: () => (jsx_runtime_1.jsxs("div", { children: [jsx_runtime_1.jsx("div", Object.assign({ "data-testid": "firstName" }, { children: form.firstName.value }), void 0),
+                        jsx_runtime_1.jsx("div", Object.assign({ "data-testid": "lastName" }, { children: form.lastName.value }), void 0),
+                        jsx_runtime_1.jsx("div", Object.assign({ "data-testid": "street" }, { children: form.address.street.value }), void 0),
+                        jsx_runtime_1.jsx("div", Object.assign({ "data-testid": "city" }, { children: form.address.city.value }), void 0),
+                        jsx_runtime_1.jsx("div", Object.assign({ "data-testid": "title1" }, { children: form.books.rows[0].title.value }), void 0),
+                        jsx_runtime_1.jsx("div", Object.assign({ "data-testid": "title2" }, { children: form.books.rows[1].title.value }), void 0),
+                        jsx_runtime_1.jsx("div", Object.assign({ "data-testid": "booksLength" }, { children: form.books.rows.length }), void 0),
+                        jsx_runtime_1.jsx("button", { "data-testid": "makeLocalChanges", onClick: makeLocalChanges }, void 0),
+                        jsx_runtime_1.jsx("button", { "data-testid": "refreshData", onClick: () => setData(data2) }, void 0),
+                        jsx_runtime_1.jsx("button", { "data-testid": "saveData", onClick: () => setData(data3) }, void 0),
+                        jsx_runtime_1.jsx("div", Object.assign({ "data-testid": "changedValue" }, { children: JSON.stringify(form.changedValue) }), void 0)] }, void 0)) }, void 0));
+        }
+        // And we start out with the initial query data
+        const r = await rtl_utils_1.render(jsx_runtime_1.jsx(TestComponent, {}, void 0));
+        expect(r.firstName().textContent).toEqual("f1");
+        expect(r.street().textContent).toEqual("s1");
+        expect(r.title1().textContent).toEqual("a1");
+        // When we make some local changes
+        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(JSON.parse(r.changedValue().textContent)).toEqual({
+            id: "a:1",
+            address: { id: "address:1", street: "local" },
+            books: [{ id: "b:1", title: "local" }, { id: "b:2" }],
+            firstName: "local",
+        });
+        // And when the new query is ran i.e. due to a cache refresh
+        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(JSON.parse(r.changedValue().textContent)).toEqual({
+            id: "a:1",
+            address: { id: "address:1", street: "local" },
+            books: [{ id: "b:1", title: "local" }, { id: "b:2" }, { id: "b:3" }],
+            firstName: "local",
+        });
+        // And then when our mutation results come back
+        rtl_utils_1.click(r.saveData);
+        // Then changedValue doesn't show our local changes anymore
+        expect(JSON.parse(r.changedValue().textContent)).toEqual({
+            id: "a:1",
+        });
+    });
+    it("useFormState 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] = react_1.useState(data1);
+            const form = useFormState_1.useFormState({
+                config,
+                init: { input: data, map: (d) => d },
+                // And the form is read only
+                readOnly: true,
+            });
+            return (jsx_runtime_1.jsx(mobx_react_1.Observer, { children: () => (jsx_runtime_1.jsxs("div", { children: [jsx_runtime_1.jsx("div", Object.assign({ "data-testid": "firstName" }, { children: form.firstName.value }), void 0),
+                        jsx_runtime_1.jsx("div", Object.assign({ "data-testid": "street" }, { children: form.address.street.value }), void 0),
+                        jsx_runtime_1.jsx("div", Object.assign({ "data-testid": "title1" }, { children: form.books.rows[0].title.value }), void 0),
+                        jsx_runtime_1.jsx("button", { "data-testid": "refreshData", onClick: () => setData(data2) }, void 0)] }, void 0)) }, void 0));
+        }
+        // And we start out with the initial query data
+        const r = await rtl_utils_1.render(jsx_runtime_1.jsx(TestComponent, {}, void 0));
+        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
+        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("useFormState can accept new data with computed fields", async () => {
+        // Given a component
+        function TestComponent() {
+            // And it's using a class/mobx proxy as the basis for the data
+            class AuthorRow {
+                constructor(firstName, lastName) {
+                    this.firstName = firstName;
+                    this.lastName = lastName;
+                }
+                get fullName() {
+                    return this.firstName + " " + this.lastName;
+                }
+            }
+            // And we have two sets of data
+            const data1 = { firstName: "f1", lastName: "l1" };
+            const data2 = { firstName: "f2", lastName: "l2" };
+            // And we start out with data1
+            const [data, setData] = react_1.useState(data1);
+            const author = react_1.useMemo(() => new AuthorRow(data.firstName, data.lastName), [data]);
+            const config = react_1.useMemo(() => ({
+                firstName: { type: "value" },
+                lastName: { type: "value" },
+                fullName: { type: "value", computed: true },
+            }), []);
+            const form = useFormState_1.useFormState({ config, init: { input: author, map: (a) => a } });
+            return (jsx_runtime_1.jsx(mobx_react_1.Observer, { children: () => (jsx_runtime_1.jsxs("div", { children: [jsx_runtime_1.jsx("div", Object.assign({ "data-testid": "firstName" }, { children: form.firstName.value }), void 0),
+                        jsx_runtime_1.jsx("div", Object.assign({ "data-testid": "fullName" }, { children: form.fullName.value }), void 0),
+                        jsx_runtime_1.jsx("button", { "data-testid": "refreshData", onClick: () => setData(data2) }, void 0)] }, void 0)) }, void 0));
+        }
+        // And we start out with the initial query data
+        const r = await rtl_utils_1.render(jsx_runtime_1.jsx(TestComponent, {}, void 0));
+        expect(r.firstName().textContent).toEqual("f1");
+        expect(r.fullName().textContent).toEqual("f1 l1");
+        // When the new query is ran i.e. due to a cache refresh
+        rtl_utils_1.click(r.refreshData);
+        expect(r.firstName().textContent).toEqual("f2");
+        expect(r.fullName().textContent).toEqual("f2 l2");
+    });
+    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] = react_1.useState();
+            const data2 = { books: [{ title: "Title 1" }] };
+            const form = useFormState_1.useFormState({
+                config: authorWithBooksConfig,
+                init: { input: data, map: (d) => d, ifUndefined: { books: [] } },
+                autoSave,
+            });
+            return (jsx_runtime_1.jsx(mobx_react_1.Observer, { children: () => (jsx_runtime_1.jsxs("div", { children: [jsx_runtime_1.jsx("button", { "data-testid": "refreshData", onClick: () => setData(data2) }, void 0),
+                        jsx_runtime_1.jsx("button", { "data-testid": "add", onClick: () => form.books.add({ title: "New Book" }) }, void 0),
+                        jsx_runtime_1.jsx("button", { "data-testid": "blurBookOne", onClick: () => form.books.rows[0].title.blur() }, void 0),
+                        jsx_runtime_1.jsx("button", { "data-testid": "blurBookTwo", onClick: () => form.books.rows[1].title.blur() }, void 0)] }, void 0)) }, void 0));
+        }
+        // Given a formState with `onBlur` set
+        const r = await rtl_utils_1.render(jsx_runtime_1.jsx(TestComponent, {}, void 0));
+        // When the data/child is now available
+        rtl_utils_1.click(r.refreshData);
+        // And the field is blurred
+        rtl_utils_1.click(r.blurBookOne);
+        // Then we don't auto-save because nothing has changed
+        expect(autoSave).toBeCalledTimes(0);
+        // And when adding a new book
+        rtl_utils_1.click(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
+        rtl_utils_1.click(r.blurBookTwo);
+        // Then we auto save again
+        expect(autoSave).toBeCalledTimes(2);
+    });
+    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 = useFormState_1.useFormState({
+                config,
+                init: data,
+                // And there is reactive business logic in the `autoSave` method
+                autoSave(state) {
+                    state.lastName.set("l2");
+                    autoSaves++;
+                },
+            });
+            return (jsx_runtime_1.jsx("div", { children: jsx_runtime_1.jsx("button", { "data-testid": "setFirst", onClick: () => form.firstName.set("f2") }, void 0) }, void 0));
+        }
+        const r = await rtl_utils_1.render(jsx_runtime_1.jsx(TestComponent, {}, void 0));
+        // When we change firstName
+        rtl_utils_1.click(r.setFirst);
+        // When autoSave didn't infinite loop
+        expect(autoSaves).toEqual(1);
+    });
+    describe("pickFields", () => {
+        it("can pick a value field", () => {
+            const a = useFormState_1.pickFields(
+            //
+            { firstName: { type: "value" } }, { firstName: "a", b: "ignored" });
+            expect(a).toMatchInlineSnapshot(`
+      Object {
+        "firstName": "a",
+      }
+    `);
+        });
+        it("can pick an unset object fields", () => {
+            const a = useFormState_1.pickFields(authorWithAddressConfig, { firstName: "a", b: "ignored" });
+            expect(a).toMatchInlineSnapshot(`
+      Object {
+        "address": undefined,
+        "firstName": "a",
+        "id": undefined,
+        "lastName": undefined,
+      }
+    `);
+        });
+        it("can pick a set object field", () => {
+            const a = useFormState_1.pickFields(authorWithAddressConfig, { firstName: "a", b: "ignored", address: {} });
+            expect(a).toMatchInlineSnapshot(`
+      Object {
+        "address": Object {
+          "city": undefined,
+          "street": undefined,
+        },
+        "firstName": "a",
+        "id": undefined,
+        "lastName": undefined,
+      }
+    `);
+        });
+        it("can pick an unset list field", () => {
+            const a = useFormState_1.pickFields(authorWithBooksConfig, { firstName: "a", b: "ignored" });
+            expect(a).toMatchInlineSnapshot(`
+      Object {
+        "books": undefined,
+        "firstName": "a",
+        "id": undefined,
+        "lastName": undefined,
+      }
+    `);
+        });
+        it("can pick a set list field", () => {
+            const a = useFormState_1.pickFields(authorWithBooksConfig, { firstName: "a", b: "ignored", books: [{}] });
+            expect(a).toMatchInlineSnapshot(`
+      Object {
+        "books": Array [
+          Object {
+            "classification": undefined,
+            "id": undefined,
+            "title": undefined,
+          },
+        ],
+        "firstName": "a",
+        "id": undefined,
+        "lastName": undefined,
+      }
+    `);
+        });
+        it("can pick a set observable list field", () => {
+            const books = mobx_1.observable([]);
+            const a = useFormState_1.pickFields(authorWithBooksConfig, { firstName: "a", b: "ignored", books });
+            expect(mobx_1.isObservable(a.books)).toEqual(true);
+        });
+    });
+});
+const authorConfig = {
+    id: { type: "value" },
+    firstName: { type: "value" },
+    lastName: { type: "value" },
+};
+const authorWithAddressConfig = {
+    id: { type: "value" },
+    firstName: { type: "value" },
+    lastName: { type: "value" },
+    address: {
+        type: "object",
+        config: {
+            street: { type: "value", rules: [formState_1.required] },
+            city: { type: "value" },
+        },
+    },
+};
+const authorWithBooksConfig = {
+    id: { type: "value" },
+    firstName: { type: "value" },
+    lastName: { type: "value" },
+    books: {
+        type: "list",
+        config: {
+            id: { type: "value" },
+            title: { type: "value", rules: [formState_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: [formState_1.required] },
+            city: { type: "value" },
+        },
+    },
+    books: {
+        type: "list",
+        config: {
+            id: { type: "value" },
+            title: { type: "value", rules: [formState_1.required] },
+            classification: { type: "value" },
+        },
+    },
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homebound/form-state",
-  "version": "2.2.9",
+  "version": "2.2.13",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",
@@ -21,9 +21,13 @@
     "format": "prettier --loglevel warn --write \"**/*.{ts,tsx,css,md}\"",
     "semantic-release": "semantic-release"
   },
-  "peerDependencies": {
+  "dependencies": {
+    "fast-deep-equal": "^3.1.3",
+    "is-plain-object": "^5.0.0",
     "mobx": "^6.3.2",
-    "mobx-react": "^7.2.0",
+    "mobx-react": "^7.2.0"
+  },
+  "peerDependencies": {
     "react": ">=16"
   },
   "devDependencies": {