@mic-rexjs/usecases-react 1.3.36 → 1.4.1

package/es/hooks/useUseCase/index.test.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { objectUseCase, } from '@mic-rexjs/usecases';
+import { objectUseCase, entityUseCase, } from '@mic-rexjs/usecases';
 import { describe, expect, jest, test } from '@jest/globals';
 import { renderHook, act, render, fireEvent, screen } from '@testing-library/react';
 import { useUseCase } from '.';
@@ -34,9 +34,9 @@ const fileUseCase = (options = {}) => {
         const size = 2000;
         yield* setPath(entity, path);
         await Promise.resolve(null);
-        yield (prevEntity) => {
+        yield (oldEntity) => {
             return {
-                ...prevEntity,
+                ...oldEntity,
                 size,
             };
         };
@@ -58,6 +58,9 @@ const mathUseCase = (options = {}) => {
     };
     return { add, subtraction };
 };
+const fieldPathUseCase = () => {
+    return objectUseCase();
+};
 const Child = ({ textPrefix = '', onUpdate, onPathChange, onUndefinedEntity }) => {
     const [file, { setPath }] = useUseCase(fileUseCase);
     const { path, ext } = file || {};
@@ -121,31 +124,31 @@ describe('useUseCase', () => {
             const { result } = renderHook(() => {
                 return useUseCase(defaultFile, fileUseCase);
             });
-            const { current: context } = result;
-            expect(context).toHaveLength(3);
+            const { current: cores } = result;
+            expect(cores).toHaveLength(3);
         });
         test('`entity` should equal `defaultFile`', () => {
             const { result } = renderHook(() => {
                 return useUseCase(defaultFile, fileUseCase);
             });
-            const { current: context } = result;
-            const [entity] = context;
+            const { current: cores } = result;
+            const [entity] = cores;
             expect(entity).toBe(defaultFile);
         });
         test('`reducers` should be returned as an object', () => {
             const { result } = renderHook(() => {
                 return useUseCase(defaultFile, fileUseCase);
             });
-            const { current: context } = result;
-            const [, reducers] = context;
+            const { current: cores } = result;
+            const [, reducers] = cores;
             expect(typeof reducers).toBe('object');
         });
         test('`Provider` should be returned as a function', () => {
             const { result } = renderHook(() => {
                 return useUseCase(defaultFile, fileUseCase);
             });
-            const { current: context } = result;
-            const [, , Provider] = context;
+            const { current: cores } = result;
+            const [, , Provider] = cores;
             expect(typeof Provider).toBe('function');
         });
         test('after call non-generator reducer, it should not trigger update', () => {
@@ -189,14 +192,14 @@ describe('useUseCase', () => {
                 });
                 return useUseCase(defaultFile, fileUseCase);
             });
-            const { current: context } = result;
-            const [entity, reducers] = context;
+            const { current: cores } = result;
+            const [entity, reducers] = cores;
             const { setPath, setEntity } = reducers;
             act(() => {
                 setPath(PATH_1);
                 setEntity({ size: 5000 });
             });
-            expect(result.current).not.toBe(context);
+            expect(result.current).not.toBe(cores);
             expect(result.current[0]).not.toBe(entity);
             expect(result.current[1]).not.toBe(reducers);
             expect(result.current[1].setPath).not.toBe(setPath);
@@ -216,14 +219,14 @@ describe('useUseCase', () => {
                 });
                 return useUseCase(defaultFile, fileUseCase);
             });
-            const { current: context } = result;
-            const [entity, reducers] = context;
+            const { current: cores } = result;
+            const [entity, reducers] = cores;
             const { readFile } = reducers;
             const promise = act(() => {
                 return readFile(PATH_1);
             });
-            expect(result.current).toBe(context);
-            expect(result.current).toEqual(context);
+            expect(result.current).toBe(cores);
+            expect(result.current).toEqual(cores);
             expect(onUpdate).toHaveBeenCalledTimes(0);
             await promise;
             expect(result.current[0]).not.toBe(entity);
@@ -242,8 +245,8 @@ describe('useUseCase', () => {
                 });
                 return useUseCase(defaultFile, fileUseCase);
             });
-            const { current: context } = result;
-            const [, reducers] = context;
+            const { current: cores } = result;
+            const [, reducers] = cores;
             const { init } = reducers;
             act(() => {
                 init({ ...defaultFile, size: 5000 });
@@ -261,8 +264,8 @@ describe('useUseCase', () => {
                 });
                 return useUseCase(file, fileUseCase, { stateless: true });
             });
-            const { current: context } = result;
-            const [, { setPath }] = context;
+            const { current: cores } = result;
+            const [, { setPath }] = cores;
             setPath(PATH_1);
             expect(onUpdate).toHaveBeenCalledTimes(0);
             expect(result.current[0].path).toBe('');
@@ -279,14 +282,14 @@ describe('useUseCase', () => {
                 });
                 return useUseCase(defaultFile, fileUseCase, { stateless: true });
             });
-            const { current: context } = result;
-            const [, reducers] = context;
+            const { current: cores } = result;
+            const [, reducers] = cores;
             const { setPath } = reducers;
             act(() => {
                 setPath(PATH_1);
             });
-            expect(result.current).toBe(context);
-            expect(result.current).toEqual(context);
+            expect(result.current).toBe(cores);
+            expect(result.current).toEqual(cores);
             expect(onUpdate).toHaveBeenCalledTimes(0);
         });
         test('`options.onChange` should be trigger when entity has changed', () => {
@@ -294,8 +297,8 @@ describe('useUseCase', () => {
             const { result } = renderHook(() => {
                 return useUseCase(defaultFile, fileUseCase, { onChange });
             });
-            const { current: context } = result;
-            const [, reducers] = context;
+            const { current: cores } = result;
+            const [, reducers] = cores;
             const { setPath } = reducers;
             expect(onChange).toHaveBeenCalledTimes(0);
             act(() => {
@@ -311,8 +314,8 @@ describe('useUseCase', () => {
                     options: { pathPrefix: '123/' },
                 });
             });
-            const { current: context } = result;
-            const [{ path }, reducers] = context;
+            const { current: cores } = result;
+            const [{ path }, reducers] = cores;
             const { setPath } = reducers;
             expect(path).toBe('');
             act(() => {
@@ -343,6 +346,33 @@ describe('useUseCase', () => {
             expect(onDeepUpdate).toHaveBeenCalledTimes(0);
         });
         test('when `entity` change, it should trigger watchers', () => {
+            const onPathChange = jest.fn();
+            const onSizeChange = jest.fn();
+            const { result } = renderHook(() => {
+                return useUseCase(defaultFile, fileUseCase, {
+                    watch: {
+                        path: onPathChange,
+                        size: onSizeChange,
+                    },
+                });
+            });
+            const { current: cores } = result;
+            const [, { setPath }] = cores;
+            expect(onPathChange).toHaveBeenCalledTimes(0);
+            act(() => {
+                setPath(PATH_1);
+            });
+            expect(onPathChange).toHaveBeenCalledTimes(1);
+            expect(onSizeChange).toHaveBeenCalledTimes(0);
+            expect(onPathChange).toHaveBeenLastCalledWith({
+                fieldPaths: ['path'],
+                newEntity: { ...defaultFile, path: PATH_1, ext: EXT_1 },
+                oldEntity: defaultFile,
+                newValue: PATH_1,
+                oldValue: '',
+            });
+        });
+        test('watcher should be updated after `entity` change', () => {
             const onPathChange1 = jest.fn();
             const onPathChange2 = jest.fn();
             let onPathChange = onPathChange1;
@@ -353,8 +383,8 @@ describe('useUseCase', () => {
                     },
                 });
             });
-            const { current: context } = result;
-            const [, { setPath, setEntity }] = context;
+            const { current: cores } = result;
+            const [, { setPath, setEntity }] = cores;
             onPathChange = onPathChange2;
             expect(onPathChange1).toHaveBeenCalledTimes(0);
             act(() => {
@@ -362,12 +392,24 @@ describe('useUseCase', () => {
                 setEntity({ size: 5000 });
             });
             expect(onPathChange1).toHaveBeenCalledTimes(1);
-            expect(onPathChange1).toHaveBeenLastCalledWith({ ...defaultFile, path: PATH_1, ext: EXT_1 }, defaultFile);
+            expect(onPathChange1).toHaveBeenLastCalledWith({
+                fieldPaths: ['path'],
+                newEntity: { ...defaultFile, path: PATH_1, ext: EXT_1 },
+                oldEntity: defaultFile,
+                newValue: PATH_1,
+                oldValue: '',
+            });
             act(() => {
                 setPath('');
             });
             expect(onPathChange2).toHaveBeenCalledTimes(1);
-            expect(onPathChange2).toHaveBeenLastCalledWith({ ...defaultFile, size: 5000 }, { ...defaultFile, path: PATH_1, size: 5000, ext: EXT_1 });
+            expect(onPathChange2).toHaveBeenLastCalledWith({
+                fieldPaths: ['path'],
+                newEntity: { ...defaultFile, size: 5000 },
+                oldEntity: { ...defaultFile, path: PATH_1, size: 5000, ext: EXT_1 },
+                newValue: '',
+                oldValue: PATH_1,
+            });
         });
         test('when `deps` has changed, it should trigger update', () => {
             const onUpdate = jest.fn();
@@ -414,72 +456,122 @@ describe('useUseCase', () => {
             expect(onDeepUpdate).toHaveBeenCalledTimes(0);
         });
     });
-    describe('`useUseCase` should work with 1+ argument on accessor mode', () => {
-        test('check `context.length`', () => {
+    describe('`useUseCase` should work with 1+ arguments on non-entity mode', () => {
+        test('`entity` should equal `defaultFile`', () => {
             const { result } = renderHook(() => {
-                return useUseCase(fileUseCase);
+                return useUseCase(mathUseCase);
             });
-            const { current: context } = result;
-            expect(context).toHaveLength(2);
+            const { current: reducers } = result;
+            expect(Array.isArray(reducers)).toBe(false);
         });
-        test('`entity` should be `undefined`', () => {
+        test('returned reducer should work', () => {
             const { result } = renderHook(() => {
-                return useUseCase(fileUseCase);
+                return useUseCase(mathUseCase);
             });
-            const { current: context } = result;
-            const [entity] = context;
-            expect(entity).toBe(void 0);
+            const { current: reducers } = result;
+            const { add } = reducers;
+            expect(add(1, 2)).toBe(3);
         });
-        test('`reducers` should be returned as an object', () => {
+        test('`options.extraValue` should be added after call `add` method', () => {
             const { result } = renderHook(() => {
-                return useUseCase(fileUseCase);
+                return useUseCase(mathUseCase, { extraValue: 5 });
             });
-            const { current: context } = result;
-            const [, reducers] = context;
-            expect(typeof reducers).toBe('object');
+            const { current: reducers } = result;
+            const { add } = reducers;
+            expect(add(1, 2)).toBe(8);
         });
-        test('`yield entity` should not trigger update', () => {
+        test('when `options` has changed, it should not trigger update', () => {
             const onUpdate = jest.fn();
+            const onDeepUpdate = jest.fn();
             const { result } = renderHook(() => {
+                const [extraValue, setExtraValue] = useState(0);
+                const reducers = useUseCase(mathUseCase, { extraValue });
                 useUpdateEffect(() => {
                     onUpdate();
-                });
-                return useUseCase(fileUseCase);
+                }, [reducers]);
+                useDeepCompareUpdate(() => {
+                    onDeepUpdate();
+                }, [reducers]);
+                return setExtraValue;
             });
-            const { current: context } = result;
-            const [, reducers] = context;
-            const { setPath } = reducers;
+            expect(onUpdate).toHaveBeenCalledTimes(0);
+            expect(onDeepUpdate).toHaveBeenCalledTimes(0);
             act(() => {
-                setPath(PATH_1);
+                result.current(3);
             });
-            expect(result.current).toBe(context);
-            expect(result.current).toEqual(context);
             expect(onUpdate).toHaveBeenCalledTimes(0);
+            expect(onDeepUpdate).toHaveBeenCalledTimes(0);
         });
-        test('should work within <Child />', () => {
+        test('when `deps` change, it should update reducers', () => {
+            const onUpdate = jest.fn();
+            const onDeepUpdate = jest.fn();
+            const { result } = renderHook(() => {
+                const [extraValue, setExtraValue] = useState(0);
+                const reducers = useUseCase(mathUseCase, { extraValue }, [extraValue]);
+                useUpdateEffect(() => {
+                    onUpdate();
+                }, [reducers]);
+                useDeepCompareUpdate(() => {
+                    onDeepUpdate();
+                }, [reducers]);
+                return setExtraValue;
+            });
+            expect(onUpdate).toHaveBeenCalledTimes(0);
+            expect(onDeepUpdate).toHaveBeenCalledTimes(0);
+            act(() => {
+                result.current(3);
+            });
+            expect(onUpdate).toHaveBeenCalledTimes(1);
+            expect(onDeepUpdate).toHaveBeenCalledTimes(1);
+        });
+        test('empty `deps` should not update reducers', () => {
+            const onUpdate = jest.fn();
+            const onDeepUpdate = jest.fn();
+            const { result } = renderHook(() => {
+                const [extraValue, setExtraValue] = useState(0);
+                const reducers = useUseCase(mathUseCase, { extraValue }, []);
+                useUpdateEffect(() => {
+                    onUpdate();
+                }, [reducers]);
+                useDeepCompareUpdate(() => {
+                    onDeepUpdate();
+                }, [reducers]);
+                return setExtraValue;
+            });
+            expect(onUpdate).toHaveBeenCalledTimes(0);
+            expect(onDeepUpdate).toHaveBeenCalledTimes(0);
+            act(() => {
+                result.current(3);
+            });
+            expect(onUpdate).toHaveBeenCalledTimes(0);
+            expect(onDeepUpdate).toHaveBeenCalledTimes(0);
+        });
+        test('should not trigger update', () => {
+            const onUpdate = jest.fn();
+            render(_jsx(MathParent, { onUpdate: onUpdate }));
+            fireEvent.click(screen.getByText(PARENT_BUTTON_TEXT));
+            expect(onUpdate).toHaveBeenCalledTimes(0);
+        });
+    });
+    describe('`useUseCase` should work with 1+ arguments on context mode', () => {
+        test('should work within <Child /> which it is under <Parent />', () => {
             const textPrefix = '>>';
-            const onUpdate1 = jest.fn();
-            const onPathChange1 = jest.fn();
-            const onUndefinedEntity1 = jest.fn();
-            const onUpdate2 = jest.fn();
-            const onPathChange2 = jest.fn();
-            const onUndefinedEntity2 = jest.fn();
+            const onUpdate = jest.fn();
+            const onPathChange = jest.fn();
+            const onUndefinedEntity = jest.fn();
             const onSetPath = jest.fn(() => {
                 return PATH_1;
             });
-            render(_jsxs("div", { children: [_jsx(Parent, { onSetPath: onSetPath, children: _jsx(Child, { textPrefix: textPrefix, onUpdate: onUpdate1, onPathChange: onPathChange1, onUndefinedEntity: onUndefinedEntity1 }) }), _jsx(Child, { onUpdate: onUpdate2, onPathChange: onPathChange2, onUndefinedEntity: onUndefinedEntity2 })] }));
+            render(_jsx("div", { children: _jsx(Parent, { onSetPath: onSetPath, children: _jsx(Child, { textPrefix: textPrefix, onUpdate: onUpdate, onPathChange: onPathChange, onUndefinedEntity: onUndefinedEntity }) }) }));
             fireEvent.click(screen.getByText(PARENT_BUTTON_TEXT));
             expect(onSetPath).toHaveBeenCalledTimes(1);
-            expect(onUpdate1).toHaveBeenCalledTimes(1);
-            expect(onPathChange1).toHaveBeenCalledWith(PATH_1);
+            expect(onUpdate).toHaveBeenCalledTimes(1);
+            expect(onPathChange).toHaveBeenCalledWith(PATH_1);
             fireEvent.click(screen.getByText(textPrefix + CHILD_BUTTON_TEXT));
             expect(onSetPath).toHaveBeenCalledTimes(1);
-            expect(onUpdate1).toHaveBeenCalledTimes(2);
-            expect(onPathChange1).toHaveBeenCalledWith('');
-            expect(onUpdate2).toHaveBeenCalledTimes(0);
-            expect(onPathChange2).toHaveBeenCalledTimes(0);
-            expect(onUndefinedEntity1).toHaveBeenCalledTimes(0);
-            expect(onUndefinedEntity2).toHaveBeenCalledTimes(1);
+            expect(onUpdate).toHaveBeenCalledTimes(2);
+            expect(onPathChange).toHaveBeenCalledWith('');
+            expect(onUndefinedEntity).toHaveBeenCalledTimes(0);
         });
         test('`options.onChange` event should be trigger at child elements', () => {
             const onFirstChange = jest.fn();
@@ -522,6 +614,39 @@ describe('useUseCase', () => {
             expect(onFirstChange).toHaveBeenCalledTimes(1);
             expect(onParentPathChange).toHaveBeenCalledTimes(2);
         });
+        test('`options.onChange` event should be trigger in orders', () => {
+            let changeTimes = 0;
+            const updateChangeTimes = () => {
+                return ++changeTimes;
+            };
+            const onChangeA = jest.fn(updateChangeTimes);
+            const onChangeB = jest.fn(updateChangeTimes);
+            const onChangeC = jest.fn(updateChangeTimes);
+            const buttonText = 'my button';
+            const A = ({ children }) => {
+                useUseCase(fileUseCase, { onChange: onChangeA });
+                return _jsx(Fragment, { children: children });
+            };
+            const B = () => {
+                useUseCase(fileUseCase, { onChange: onChangeB });
+                return _jsx(Fragment, {});
+            };
+            const C = () => {
+                const [, { setPath }, Provider] = useUseCase(defaultFile, fileUseCase, {
+                    onChange: onChangeC,
+                });
+                const onFirstClick = () => {
+                    setPath(PATH_1);
+                };
+                return (_jsxs(Provider, { children: [_jsx(A, { children: _jsx(B, {}) }), _jsx("button", { onClick: onFirstClick, children: buttonText })] }));
+            };
+            render(_jsx(C, {}));
+            expect(changeTimes).toBe(0);
+            fireEvent.click(screen.getByText(buttonText));
+            expect(onChangeA).toHaveReturnedWith(2);
+            expect(onChangeB).toHaveReturnedWith(1);
+            expect(onChangeC).toHaveReturnedWith(3);
+        });
         test('`options.watch` should be trigger at child elements', () => {
             const onFirstExtChange = jest.fn();
             const onSecondExtChange = jest.fn();
@@ -556,115 +681,472 @@ describe('useUseCase', () => {
             expect(onFirstExtChange).toHaveBeenCalledTimes(0);
             fireEvent.click(screen.getByText(firstButtonText));
             expect(onFirstExtChange).toHaveBeenCalledTimes(1);
-            expect(onFirstExtChange).toHaveBeenLastCalledWith({ ...defaultFile, ext: EXT_1, path: PATH_1 }, defaultFile);
+            expect(onFirstExtChange).toHaveBeenLastCalledWith({
+                fieldPaths: ['ext'],
+                newEntity: { ...defaultFile, ext: EXT_1, path: PATH_1 },
+                oldEntity: defaultFile,
+                newValue: EXT_1,
+                oldValue: '',
+            });
             expect(onParentExtChange).toHaveBeenCalledTimes(1);
             expect(onSecondExtChange).toHaveBeenCalledTimes(0);
             fireEvent.click(screen.getByText(secondButtonText));
             expect(onSecondExtChange).toHaveBeenCalledTimes(1);
-            expect(onSecondExtChange).toHaveBeenLastCalledWith(defaultFile, {
-                ...defaultFile,
-                ext: EXT_1,
-                path: PATH_1,
+            expect(onSecondExtChange).toHaveBeenLastCalledWith({
+                fieldPaths: ['ext'],
+                newEntity: defaultFile,
+                oldEntity: { ...defaultFile, ext: EXT_1, path: PATH_1 },
+                newValue: '',
+                oldValue: EXT_1,
             });
             expect(onFirstExtChange).toHaveBeenCalledTimes(1);
             expect(onParentExtChange).toHaveBeenCalledTimes(2);
         });
-    });
-    describe('`useUseCase` should work with 1+ arguments on non-entity mode', () => {
-        test('`entity` should equal `defaultFile`', () => {
-            const { result } = renderHook(() => {
-                return useUseCase(mathUseCase);
-            });
-            const { current: reducers } = result;
-            expect(typeof reducers).toBe('object');
+        test('`options.watch` should be trigger in orders', () => {
+            let changeTimes = 0;
+            const updateChangeTimes = (e) => {
+                void e;
+                return ++changeTimes;
+            };
+            const onChangeA = jest.fn(updateChangeTimes);
+            const onChangeB = jest.fn(updateChangeTimes);
+            const onChangeC = jest.fn(updateChangeTimes);
+            const buttonText = 'my button';
+            const A = ({ children }) => {
+                useUseCase(fileUseCase, {
+                    watch: {
+                        ext: onChangeA,
+                    },
+                });
+                return _jsx(Fragment, { children: children });
+            };
+            const B = () => {
+                useUseCase(fileUseCase, {
+                    watch: {
+                        ext: onChangeB,
+                    },
+                });
+                return _jsx(Fragment, {});
+            };
+            const C = () => {
+                const [, { setPath }, Provider] = useUseCase(defaultFile, fileUseCase, {
+                    watch: {
+                        ext: onChangeC,
+                    },
+                });
+                const onFirstClick = () => {
+                    setPath(PATH_1);
+                };
+                return (_jsxs(Provider, { children: [_jsx(A, { children: _jsx(B, {}) }), _jsx("button", { onClick: onFirstClick, children: buttonText })] }));
+            };
+            render(_jsx(C, {}));
+            expect(changeTimes).toBe(0);
+            fireEvent.click(screen.getByText(buttonText));
+            expect(onChangeA).toHaveReturnedWith(2);
+            expect(onChangeB).toHaveReturnedWith(1);
+            expect(onChangeC).toHaveReturnedWith(3);
         });
-        test('returned reducer should work', () => {
+        test('`options.watch` should work with array field path of array', () => {
+            const onExtChange = jest.fn();
+            const onSizeChange = jest.fn();
             const { result } = renderHook(() => {
-                return useUseCase(mathUseCase);
+                return useUseCase({}, fieldPathUseCase, {
+                    watch: {
+                        'list.ext': onExtChange,
+                        'list.size': onSizeChange,
+                    },
+                });
             });
-            const { current: reducers } = result;
-            const { add } = reducers;
-            expect(add(1, 2)).toBe(3);
-        });
-        test('`options.extraValue` should be added after call `add` method', () => {
-            const { result } = renderHook(() => {
-                return useUseCase(mathUseCase, { extraValue: 5 });
+            const { current: cores } = result;
+            const [, { setEntity }] = cores;
+            act(() => {
+                setEntity({ list: [defaultFile] });
+            });
+            expect(onExtChange).toHaveBeenCalledTimes(1);
+            expect(onSizeChange).toHaveBeenCalledTimes(1);
+            expect(onExtChange).toHaveBeenCalledWith({
+                fieldPaths: ['list', '0', 'ext'],
+                newEntity: { list: [defaultFile] },
+                oldEntity: {},
+                newValue: '',
+                oldValue: void 0,
+            });
+            expect(onSizeChange).toHaveBeenCalledWith({
+                fieldPaths: ['list', '0', 'size'],
+                newEntity: { list: [defaultFile] },
+                oldEntity: {},
+                newValue: 0,
+                oldValue: void 0,
+            });
+            act(() => {
+                setEntity({ list: [{ ...defaultFile, ext: EXT_1 }] });
+            });
+            expect(onExtChange).toHaveBeenCalledTimes(2);
+            expect(onSizeChange).toHaveBeenCalledTimes(1);
+            expect(onExtChange).toHaveBeenCalledWith({
+                fieldPaths: ['list', '0', 'ext'],
+                newEntity: { list: [{ ...defaultFile, ext: EXT_1 }] },
+                oldEntity: { list: [defaultFile] },
+                newValue: EXT_1,
+                oldValue: '',
+            });
+            act(() => {
+                setEntity({
+                    list: [
+                        { ...defaultFile, ext: EXT_1 },
+                        { ...defaultFile, ext: EXT_2 },
+                    ],
+                });
+            });
+            expect(onExtChange).toHaveBeenCalledTimes(3);
+            expect(onSizeChange).toHaveBeenCalledTimes(2);
+            expect(onExtChange).toHaveBeenCalledWith({
+                fieldPaths: ['list', '1', 'ext'],
+                newEntity: {
+                    list: [
+                        { ...defaultFile, ext: EXT_1 },
+                        { ...defaultFile, ext: EXT_2 },
+                    ],
+                },
+                oldEntity: { list: [{ ...defaultFile, ext: EXT_1 }] },
+                newValue: EXT_2,
+                oldValue: void 0,
+            });
+            expect(onSizeChange).toHaveBeenCalledWith({
+                fieldPaths: ['list', '1', 'size'],
+                newEntity: {
+                    list: [
+                        { ...defaultFile, ext: EXT_1 },
+                        { ...defaultFile, ext: EXT_2 },
+                    ],
+                },
+                oldEntity: { list: [{ ...defaultFile, ext: EXT_1 }] },
+                newValue: 0,
+                oldValue: void 0,
+            });
+            act(() => {
+                setEntity({
+                    nestedList: [],
+                });
+            });
+            expect(onExtChange).toHaveBeenCalledTimes(3);
+            expect(onSizeChange).toHaveBeenCalledTimes(2);
+            act(() => {
+                setEntity(() => {
+                    return {
+                        list: [{ ...defaultFile, ext: EXT_2 }, { ...defaultFile, ext: EXT_1 }, defaultFile],
+                    };
+                });
+            });
+            expect(onExtChange).toHaveBeenCalledTimes(6);
+            expect(onSizeChange).toHaveBeenCalledTimes(3);
+            expect(onExtChange).toHaveBeenNthCalledWith(4, {
+                fieldPaths: ['list', '0', 'ext'],
+                newEntity: {
+                    list: [{ ...defaultFile, ext: EXT_2 }, { ...defaultFile, ext: EXT_1 }, defaultFile],
+                },
+                oldEntity: {
+                    list: [
+                        { ...defaultFile, ext: EXT_1 },
+                        { ...defaultFile, ext: EXT_2 },
+                    ],
+                    nestedList: [],
+                },
+                newValue: EXT_2,
+                oldValue: EXT_1,
+            });
+            expect(onExtChange).toHaveBeenNthCalledWith(5, {
+                fieldPaths: ['list', '1', 'ext'],
+                newEntity: {
+                    list: [{ ...defaultFile, ext: EXT_2 }, { ...defaultFile, ext: EXT_1 }, defaultFile],
+                },
+                oldEntity: {
+                    list: [
+                        { ...defaultFile, ext: EXT_1 },
+                        { ...defaultFile, ext: EXT_2 },
+                    ],
+                    nestedList: [],
+                },
+                newValue: EXT_1,
+                oldValue: EXT_2,
+            });
+            expect(onExtChange).toHaveBeenNthCalledWith(6, {
+                fieldPaths: ['list', '2', 'ext'],
+                newEntity: {
+                    list: [{ ...defaultFile, ext: EXT_2 }, { ...defaultFile, ext: EXT_1 }, defaultFile],
+                },
+                oldEntity: {
+                    list: [
+                        { ...defaultFile, ext: EXT_1 },
+                        { ...defaultFile, ext: EXT_2 },
+                    ],
+                    nestedList: [],
+                },
+                newValue: '',
+                oldValue: void 0,
+            });
+            expect(onSizeChange).toHaveBeenCalledWith({
+                fieldPaths: ['list', '2', 'size'],
+                newEntity: {
+                    list: [{ ...defaultFile, ext: EXT_2 }, { ...defaultFile, ext: EXT_1 }, defaultFile],
+                },
+                oldEntity: {
+                    list: [
+                        { ...defaultFile, ext: EXT_1 },
+                        { ...defaultFile, ext: EXT_2 },
+                    ],
+                    nestedList: [],
+                },
+                newValue: 0,
+                oldValue: void 0,
+            });
+            act(() => {
+                setEntity(() => {
+                    return {};
+                });
+            });
+            expect(onExtChange).toHaveBeenCalledTimes(9);
+            expect(onSizeChange).toHaveBeenCalledTimes(6);
+            expect(onExtChange).toHaveBeenNthCalledWith(7, {
+                fieldPaths: ['list', '0', 'ext'],
+                newEntity: {},
+                oldEntity: {
+                    list: [{ ...defaultFile, ext: EXT_2 }, { ...defaultFile, ext: EXT_1 }, defaultFile],
+                },
+                newValue: void 0,
+                oldValue: EXT_2,
+            });
+            expect(onExtChange).toHaveBeenNthCalledWith(8, {
+                fieldPaths: ['list', '1', 'ext'],
+                newEntity: {},
+                oldEntity: {
+                    list: [{ ...defaultFile, ext: EXT_2 }, { ...defaultFile, ext: EXT_1 }, defaultFile],
+                },
+                newValue: void 0,
+                oldValue: EXT_1,
+            });
+            expect(onExtChange).toHaveBeenNthCalledWith(9, {
+                fieldPaths: ['list', '2', 'ext'],
+                newEntity: {},
+                oldEntity: {
+                    list: [{ ...defaultFile, ext: EXT_2 }, { ...defaultFile, ext: EXT_1 }, defaultFile],
+                },
+                newValue: void 0,
+                oldValue: '',
+            });
+            expect(onSizeChange).toHaveBeenNthCalledWith(4, {
+                fieldPaths: ['list', '0', 'size'],
+                newEntity: {},
+                oldEntity: {
+                    list: [{ ...defaultFile, ext: EXT_2 }, { ...defaultFile, ext: EXT_1 }, defaultFile],
+                },
+                newValue: void 0,
+                oldValue: 0,
+            });
+            expect(onSizeChange).toHaveBeenNthCalledWith(5, {
+                fieldPaths: ['list', '1', 'size'],
+                newEntity: {},
+                oldEntity: {
+                    list: [{ ...defaultFile, ext: EXT_2 }, { ...defaultFile, ext: EXT_1 }, defaultFile],
+                },
+                newValue: void 0,
+                oldValue: 0,
+            });
+            expect(onSizeChange).toHaveBeenNthCalledWith(6, {
+                fieldPaths: ['list', '2', 'size'],
+                newEntity: {},
+                oldEntity: {
+                    list: [{ ...defaultFile, ext: EXT_2 }, { ...defaultFile, ext: EXT_1 }, defaultFile],
+                },
+                newValue: void 0,
+                oldValue: 0,
             });
-            const { current: reducers } = result;
-            const { add } = reducers;
-            expect(add(1, 2)).toBe(8);
         });
-        test('when `options` has changed, it should not trigger update', () => {
-            const onUpdate = jest.fn();
-            const onDeepUpdate = jest.fn();
+        test('`options.watch` should work with field path of array length', () => {
+            const onEntityLengthChange = jest.fn();
+            const onListLengthChange = jest.fn();
+            const lengthUseCase = () => {
+                return entityUseCase();
+            };
             const { result } = renderHook(() => {
-                const [extraValue, setExtraValue] = useState(0);
-                const reducers = useUseCase(mathUseCase, { extraValue });
-                useUpdateEffect(() => {
-                    onUpdate();
-                }, [reducers]);
-                useDeepCompareUpdate(() => {
-                    onDeepUpdate();
-                }, [reducers]);
-                return setExtraValue;
+                return useUseCase([], lengthUseCase, {
+                    watch: {
+                        length: onEntityLengthChange,
+                        'list.length': onListLengthChange,
+                    },
+                });
             });
-            expect(onUpdate).toHaveBeenCalledTimes(0);
-            expect(onDeepUpdate).toHaveBeenCalledTimes(0);
+            const { current: cores } = result;
+            const [, { setEntity }] = cores;
+            expect(onEntityLengthChange).toHaveBeenCalledTimes(0);
+            expect(onListLengthChange).toHaveBeenCalledTimes(0);
             act(() => {
-                result.current(3);
+                setEntity([{ list: [defaultFile, defaultFile] }]);
+            });
+            expect(onEntityLengthChange).toHaveBeenCalledTimes(1);
+            expect(onListLengthChange).toHaveBeenCalledTimes(1);
+            expect(onEntityLengthChange).toHaveBeenCalledWith({
+                fieldPaths: ['length'],
+                newEntity: [{ list: [defaultFile, defaultFile] }],
+                oldEntity: [],
+                newValue: 1,
+                oldValue: 0,
+            });
+            expect(onListLengthChange).toHaveBeenCalledWith({
+                fieldPaths: ['0', 'list', 'length'],
+                newEntity: [{ list: [defaultFile, defaultFile] }],
+                oldEntity: [],
+                newValue: 2,
+                oldValue: void 0,
             });
-            expect(onUpdate).toHaveBeenCalledTimes(0);
-            expect(onDeepUpdate).toHaveBeenCalledTimes(0);
         });
-        test('when `deps` change, it should update reducers', () => {
-            const onUpdate = jest.fn();
-            const onDeepUpdate = jest.fn();
+        test('`options.watch` should work with field path of nested array', () => {
+            const onChange = jest.fn();
             const { result } = renderHook(() => {
-                const [extraValue, setExtraValue] = useState(0);
-                const reducers = useUseCase(mathUseCase, { extraValue }, [extraValue]);
-                useUpdateEffect(() => {
-                    onUpdate();
-                }, [reducers]);
-                useDeepCompareUpdate(() => {
-                    onDeepUpdate();
-                }, [reducers]);
-                return setExtraValue;
+                return useUseCase({}, fieldPathUseCase, {
+                    watch: {
+                        'nestedList.size': onChange,
+                    },
+                });
             });
-            expect(onUpdate).toHaveBeenCalledTimes(0);
-            expect(onDeepUpdate).toHaveBeenCalledTimes(0);
+            const { current: cores } = result;
+            const [, { setEntity }] = cores;
+            expect(onChange).toHaveBeenCalledTimes(0);
             act(() => {
-                result.current(3);
+                setEntity({ nestedList: [[[defaultFile]]] });
+            });
+            expect(onChange).toHaveBeenCalledTimes(1);
+            expect(onChange).toHaveBeenCalledWith({
+                fieldPaths: ['nestedList', '0', '0', '0', 'size'],
+                newEntity: { nestedList: [[[defaultFile]]] },
+                oldEntity: {},
+                newValue: 0,
+                oldValue: void 0,
+            });
+            act(() => {
+                setEntity({
+                    nestedList: [
+                        [
+                            [
+                                { ...defaultFile, size: 100 },
+                                { ...defaultFile, size: 200 },
+                            ],
+                        ],
+                        [[{ ...defaultFile, size: 300 }]],
+                    ],
+                });
+            });
+            expect(onChange).toHaveBeenCalledTimes(4);
+            expect(onChange).toHaveBeenNthCalledWith(2, {
+                fieldPaths: ['nestedList', '0', '0', '0', 'size'],
+                newEntity: {
+                    nestedList: [
+                        [
+                            [
+                                { ...defaultFile, size: 100 },
+                                { ...defaultFile, size: 200 },
+                            ],
+                        ],
+                        [[{ ...defaultFile, size: 300 }]],
+                    ],
+                },
+                oldEntity: { nestedList: [[[defaultFile]]] },
+                newValue: 100,
+                oldValue: 0,
+            });
+            expect(onChange).toHaveBeenNthCalledWith(3, {
+                fieldPaths: ['nestedList', '0', '0', '1', 'size'],
+                newEntity: {
+                    nestedList: [
+                        [
+                            [
+                                { ...defaultFile, size: 100 },
+                                { ...defaultFile, size: 200 },
+                            ],
+                        ],
+                        [[{ ...defaultFile, size: 300 }]],
+                    ],
+                },
+                oldEntity: { nestedList: [[[defaultFile]]] },
+                newValue: 200,
+                oldValue: void 0,
+            });
+            expect(onChange).toHaveBeenNthCalledWith(4, {
+                fieldPaths: ['nestedList', '1', '0', '0', 'size'],
+                newEntity: {
+                    nestedList: [
+                        [
+                            [
+                                { ...defaultFile, size: 100 },
+                                { ...defaultFile, size: 200 },
+                            ],
+                        ],
+                        [[{ ...defaultFile, size: 300 }]],
+                    ],
+                },
+                oldEntity: { nestedList: [[[defaultFile]]] },
+                newValue: 300,
+                oldValue: void 0,
             });
-            expect(onUpdate).toHaveBeenCalledTimes(1);
-            expect(onDeepUpdate).toHaveBeenCalledTimes(1);
         });
-        test('empty `deps` should not update reducers', () => {
-            const onUpdate = jest.fn();
-            const onDeepUpdate = jest.fn();
+        test('`options.watch` should work with field path of object', () => {
+            const onExtChange = jest.fn();
+            const onSizeChange = jest.fn();
             const { result } = renderHook(() => {
-                const [extraValue, setExtraValue] = useState(0);
-                const reducers = useUseCase(mathUseCase, { extraValue }, []);
-                useUpdateEffect(() => {
-                    onUpdate();
-                }, [reducers]);
-                useDeepCompareUpdate(() => {
-                    onDeepUpdate();
-                }, [reducers]);
-                return setExtraValue;
+                return useUseCase({}, fieldPathUseCase, {
+                    watch: {
+                        'obj.file.ext': onExtChange,
+                        'obj.file.size': onSizeChange,
+                    },
+                });
             });
-            expect(onUpdate).toHaveBeenCalledTimes(0);
-            expect(onDeepUpdate).toHaveBeenCalledTimes(0);
+            const { current: cores } = result;
+            const [, { setEntity }] = cores;
+            expect(onExtChange).toHaveBeenCalledTimes(0);
             act(() => {
-                result.current(3);
+                setEntity({
+                    obj: {
+                        file: {
+                            ext: EXT_1,
+                        },
+                    },
+                });
+            });
+            expect(onExtChange).toHaveBeenCalledTimes(1);
+            expect(onSizeChange).toHaveBeenCalledTimes(0);
+            expect(onExtChange).toHaveBeenCalledWith({
+                fieldPaths: ['obj', 'file', 'ext'],
+                newEntity: {
+                    obj: {
+                        file: {
+                            ext: EXT_1,
+                        },
+                    },
+                },
+                oldEntity: {},
+                newValue: EXT_1,
+                oldValue: void 0,
+            });
+            act(() => {
+                setEntity(() => {
+                    return {};
+                });
+            });
+            expect(onExtChange).toHaveBeenCalledTimes(2);
+            expect(onSizeChange).toHaveBeenCalledTimes(0);
+            expect(onExtChange).toHaveBeenCalledWith({
+                fieldPaths: ['obj', 'file', 'ext'],
+                newEntity: {},
+                oldEntity: {
+                    obj: {
+                        file: {
+                            ext: EXT_1,
+                        },
+                    },
+                },
+                newValue: void 0,
+                oldValue: EXT_1,
             });
-            expect(onUpdate).toHaveBeenCalledTimes(0);
-            expect(onDeepUpdate).toHaveBeenCalledTimes(0);
-        });
-        test('should not trigger update', () => {
-            const onUpdate = jest.fn();
-            render(_jsx(MathParent, { onUpdate: onUpdate }));
-            fireEvent.click(screen.getByText(PARENT_BUTTON_TEXT));
-            expect(onUpdate).toHaveBeenCalledTimes(0);
         });
     });
 });