@mic-rexjs/usecases-react 1.3.36 → 1.4.1

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

@@ -81,8 +81,8 @@ var fileUseCase = function fileUseCase() {
             return (0, _awaitAsyncGenerator2["default"])(Promise.resolve(null));
           case 4:
             _context3.next = 6;
-            return function (prevEntity) {
-              return _objectSpread(_objectSpread({}, prevEntity), {}, {
+            return function (oldEntity) {
+              return _objectSpread(_objectSpread({}, oldEntity), {}, {
                 size: size
               });
             };
@@ -124,6 +124,9 @@ var mathUseCase = function mathUseCase() {
     subtraction: subtraction
   };
 };
+var fieldPathUseCase = function fieldPathUseCase() {
+  return (0, _usecases.objectUseCase)();
+};
 var Child = function Child(_ref2) {
   var _ref2$textPrefix = _ref2.textPrefix,
     textPrefix = _ref2$textPrefix === void 0 ? '' : _ref2$textPrefix,
@@ -243,17 +246,17 @@ var useDeepCompareUpdate = function useDeepCompareUpdate(callback, deps) {
           return (0, _.useUseCase)(defaultFile, fileUseCase);
         }),
         result = _renderHook.result;
-      var context = result.current;
-      (0, _globals.expect)(context).toHaveLength(3);
+      var cores = result.current;
+      (0, _globals.expect)(cores).toHaveLength(3);
     });
     (0, _globals.test)('`entity` should equal `defaultFile`', function () {
       var _renderHook2 = (0, _react.renderHook)(function () {
           return (0, _.useUseCase)(defaultFile, fileUseCase);
         }),
         result = _renderHook2.result;
-      var context = result.current;
-      var _context4 = (0, _slicedToArray2["default"])(context, 1),
-        entity = _context4[0];
+      var cores = result.current;
+      var _cores = (0, _slicedToArray2["default"])(cores, 1),
+        entity = _cores[0];
       (0, _globals.expect)(entity).toBe(defaultFile);
     });
     (0, _globals.test)('`reducers` should be returned as an object', function () {
@@ -261,9 +264,9 @@ var useDeepCompareUpdate = function useDeepCompareUpdate(callback, deps) {
           return (0, _.useUseCase)(defaultFile, fileUseCase);
         }),
         result = _renderHook3.result;
-      var context = result.current;
-      var _context5 = (0, _slicedToArray2["default"])(context, 2),
-        reducers = _context5[1];
+      var cores = result.current;
+      var _cores2 = (0, _slicedToArray2["default"])(cores, 2),
+        reducers = _cores2[1];
       (0, _globals.expect)((0, _typeof2["default"])(reducers)).toBe('object');
     });
     (0, _globals.test)('`Provider` should be returned as a function', function () {
@@ -271,9 +274,9 @@ var useDeepCompareUpdate = function useDeepCompareUpdate(callback, deps) {
           return (0, _.useUseCase)(defaultFile, fileUseCase);
         }),
         result = _renderHook4.result;
-      var context = result.current;
-      var _context6 = (0, _slicedToArray2["default"])(context, 3),
-        Provider = _context6[2];
+      var cores = result.current;
+      var _cores3 = (0, _slicedToArray2["default"])(cores, 3),
+        Provider = _cores3[2];
       (0, _globals.expect)((0, _typeof2["default"])(Provider)).toBe('function');
     });
     (0, _globals.test)('after call non-generator reducer, it should not trigger update', function () {
@@ -281,8 +284,8 @@ var useDeepCompareUpdate = function useDeepCompareUpdate(callback, deps) {
       var onDeepUpdate = _globals.jest.fn();
       var _renderHook5 = (0, _react.renderHook)(function () {
           var context = (0, _.useUseCase)(defaultFile, fileUseCase);
-          var _context7 = (0, _slicedToArray2["default"])(context, 2),
-            reducers = _context7[1];
+          var _context4 = (0, _slicedToArray2["default"])(context, 2),
+            reducers = _context4[1];
           var isImage = reducers.isImage;
           var update = (0, _ahooks.useUpdate)();
           (0, _ahooks.useUpdateEffect)(function () {
@@ -320,10 +323,10 @@ var useDeepCompareUpdate = function useDeepCompareUpdate(callback, deps) {
           return (0, _.useUseCase)(defaultFile, fileUseCase);
         }),
         result = _renderHook6.result;
-      var context = result.current;
-      var _context8 = (0, _slicedToArray2["default"])(context, 2),
-        entity = _context8[0],
-        reducers = _context8[1];
+      var cores = result.current;
+      var _cores4 = (0, _slicedToArray2["default"])(cores, 2),
+        entity = _cores4[0],
+        reducers = _cores4[1];
       var setPath = reducers.setPath,
         setEntity = reducers.setEntity;
       (0, _react.act)(function () {
@@ -332,7 +335,7 @@ var useDeepCompareUpdate = function useDeepCompareUpdate(callback, deps) {
           size: 5000
         });
       });
-      (0, _globals.expect)(result.current).not.toBe(context);
+      (0, _globals.expect)(result.current).not.toBe(cores);
       (0, _globals.expect)(result.current[0]).not.toBe(entity);
       (0, _globals.expect)(result.current[1]).not.toBe(reducers);
       (0, _globals.expect)(result.current[1].setPath).not.toBe(setPath);
@@ -344,9 +347,9 @@ var useDeepCompareUpdate = function useDeepCompareUpdate(callback, deps) {
       (0, _globals.expect)(onUpdate).toHaveBeenCalledTimes(1);
     });
     (0, _globals.test)('after `yield entity` on async mode, it should trigger update', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3() {
-      var onUpdate, _renderHook7, result, context, _context9, entity, reducers, readFile, promise;
-      return _regenerator["default"].wrap(function _callee3$(_context10) {
-        while (1) switch (_context10.prev = _context10.next) {
+      var onUpdate, _renderHook7, result, cores, _cores5, entity, reducers, readFile, promise;
+      return _regenerator["default"].wrap(function _callee3$(_context5) {
+        while (1) switch (_context5.prev = _context5.next) {
           case 0:
             onUpdate = _globals.jest.fn();
             _renderHook7 = (0, _react.renderHook)(function () {
@@ -355,16 +358,16 @@ var useDeepCompareUpdate = function useDeepCompareUpdate(callback, deps) {
               });
               return (0, _.useUseCase)(defaultFile, fileUseCase);
             }), result = _renderHook7.result;
-            context = result.current;
-            _context9 = (0, _slicedToArray2["default"])(context, 2), entity = _context9[0], reducers = _context9[1];
+            cores = result.current;
+            _cores5 = (0, _slicedToArray2["default"])(cores, 2), entity = _cores5[0], reducers = _cores5[1];
             readFile = reducers.readFile;
             promise = (0, _react.act)(function () {
               return readFile(PATH_1);
             });
-            (0, _globals.expect)(result.current).toBe(context);
-            (0, _globals.expect)(result.current).toEqual(context);
+            (0, _globals.expect)(result.current).toBe(cores);
+            (0, _globals.expect)(result.current).toEqual(cores);
             (0, _globals.expect)(onUpdate).toHaveBeenCalledTimes(0);
-            _context10.next = 11;
+            _context5.next = 11;
             return promise;
           case 11:
             (0, _globals.expect)(result.current[0]).not.toBe(entity);
@@ -376,7 +379,7 @@ var useDeepCompareUpdate = function useDeepCompareUpdate(callback, deps) {
             (0, _globals.expect)(onUpdate).toHaveBeenCalledTimes(1);
           case 18:
           case "end":
-            return _context10.stop();
+            return _context5.stop();
         }
       }, _callee3);
     })));
@@ -389,9 +392,9 @@ var useDeepCompareUpdate = function useDeepCompareUpdate(callback, deps) {
           return (0, _.useUseCase)(defaultFile, fileUseCase);
         }),
         result = _renderHook8.result;
-      var context = result.current;
-      var _context11 = (0, _slicedToArray2["default"])(context, 2),
-        reducers = _context11[1];
+      var cores = result.current;
+      var _cores6 = (0, _slicedToArray2["default"])(cores, 2),
+        reducers = _cores6[1];
       var init = reducers.init;
       (0, _react.act)(function () {
         init(_objectSpread(_objectSpread({}, defaultFile), {}, {
@@ -416,9 +419,9 @@ var useDeepCompareUpdate = function useDeepCompareUpdate(callback, deps) {
         }),
         result = _renderHook9.result,
         rerender = _renderHook9.rerender;
-      var context = result.current;
-      var _context12 = (0, _slicedToArray2["default"])(context, 2),
-        setPath = _context12[1].setPath;
+      var cores = result.current;
+      var _cores7 = (0, _slicedToArray2["default"])(cores, 2),
+        setPath = _cores7[1].setPath;
       setPath(PATH_1);
       (0, _globals.expect)(onUpdate).toHaveBeenCalledTimes(0);
       (0, _globals.expect)(result.current[0].path).toBe('');
@@ -440,15 +443,15 @@ var useDeepCompareUpdate = function useDeepCompareUpdate(callback, deps) {
           });
         }),
         result = _renderHook10.result;
-      var context = result.current;
-      var _context13 = (0, _slicedToArray2["default"])(context, 2),
-        reducers = _context13[1];
+      var cores = result.current;
+      var _cores8 = (0, _slicedToArray2["default"])(cores, 2),
+        reducers = _cores8[1];
       var setPath = reducers.setPath;
       (0, _react.act)(function () {
         setPath(PATH_1);
       });
-      (0, _globals.expect)(result.current).toBe(context);
-      (0, _globals.expect)(result.current).toEqual(context);
+      (0, _globals.expect)(result.current).toBe(cores);
+      (0, _globals.expect)(result.current).toEqual(cores);
       (0, _globals.expect)(onUpdate).toHaveBeenCalledTimes(0);
     });
     (0, _globals.test)('`options.onChange` should be trigger when entity has changed', function () {
@@ -459,9 +462,9 @@ var useDeepCompareUpdate = function useDeepCompareUpdate(callback, deps) {
           });
         }),
         result = _renderHook11.result;
-      var context = result.current;
-      var _context14 = (0, _slicedToArray2["default"])(context, 2),
-        reducers = _context14[1];
+      var cores = result.current;
+      var _cores9 = (0, _slicedToArray2["default"])(cores, 2),
+        reducers = _cores9[1];
       var setPath = reducers.setPath;
       (0, _globals.expect)(onChange).toHaveBeenCalledTimes(0);
       (0, _react.act)(function () {
@@ -483,10 +486,10 @@ var useDeepCompareUpdate = function useDeepCompareUpdate(callback, deps) {
           });
         }),
         result = _renderHook12.result;
-      var context = result.current;
-      var _context15 = (0, _slicedToArray2["default"])(context, 2),
-        path = _context15[0].path,
-        reducers = _context15[1];
+      var cores = result.current;
+      var _cores10 = (0, _slicedToArray2["default"])(cores, 2),
+        path = _cores10[0].path,
+        reducers = _cores10[1];
       var setPath = reducers.setPath;
       (0, _globals.expect)(path).toBe('');
       (0, _react.act)(function () {
@@ -523,22 +526,54 @@ var useDeepCompareUpdate = function useDeepCompareUpdate(callback, deps) {
       (0, _globals.expect)(onDeepUpdate).toHaveBeenCalledTimes(0);
     });
     (0, _globals.test)('when `entity` change, it should trigger watchers', function () {
+      var onPathChange = _globals.jest.fn();
+      var onSizeChange = _globals.jest.fn();
+      var _renderHook14 = (0, _react.renderHook)(function () {
+          return (0, _.useUseCase)(defaultFile, fileUseCase, {
+            watch: {
+              path: onPathChange,
+              size: onSizeChange
+            }
+          });
+        }),
+        result = _renderHook14.result;
+      var cores = result.current;
+      var _cores11 = (0, _slicedToArray2["default"])(cores, 2),
+        setPath = _cores11[1].setPath;
+      (0, _globals.expect)(onPathChange).toHaveBeenCalledTimes(0);
+      (0, _react.act)(function () {
+        setPath(PATH_1);
+      });
+      (0, _globals.expect)(onPathChange).toHaveBeenCalledTimes(1);
+      (0, _globals.expect)(onSizeChange).toHaveBeenCalledTimes(0);
+      (0, _globals.expect)(onPathChange).toHaveBeenLastCalledWith({
+        fieldPaths: ['path'],
+        newEntity: _objectSpread(_objectSpread({}, defaultFile), {}, {
+          path: PATH_1,
+          ext: EXT_1
+        }),
+        oldEntity: defaultFile,
+        newValue: PATH_1,
+        oldValue: ''
+      });
+    });
+    (0, _globals.test)('watcher should be updated after `entity` change', function () {
       var onPathChange1 = _globals.jest.fn();
       var onPathChange2 = _globals.jest.fn();
       var onPathChange = onPathChange1;
-      var _renderHook14 = (0, _react.renderHook)(function () {
+      var _renderHook15 = (0, _react.renderHook)(function () {
           return (0, _.useUseCase)(defaultFile, fileUseCase, {
             watch: {
               path: onPathChange
             }
           });
         }),
-        result = _renderHook14.result;
-      var context = result.current;
-      var _context16 = (0, _slicedToArray2["default"])(context, 2),
-        _context16$ = _context16[1],
-        setPath = _context16$.setPath,
-        setEntity = _context16$.setEntity;
+        result = _renderHook15.result;
+      var cores = result.current;
+      var _cores12 = (0, _slicedToArray2["default"])(cores, 2),
+        _cores12$ = _cores12[1],
+        setPath = _cores12$.setPath,
+        setEntity = _cores12$.setEntity;
       onPathChange = onPathChange2;
       (0, _globals.expect)(onPathChange1).toHaveBeenCalledTimes(0);
       (0, _react.act)(function () {
@@ -548,26 +583,38 @@ var useDeepCompareUpdate = function useDeepCompareUpdate(callback, deps) {
         });
       });
       (0, _globals.expect)(onPathChange1).toHaveBeenCalledTimes(1);
-      (0, _globals.expect)(onPathChange1).toHaveBeenLastCalledWith(_objectSpread(_objectSpread({}, defaultFile), {}, {
-        path: PATH_1,
-        ext: EXT_1
-      }), defaultFile);
+      (0, _globals.expect)(onPathChange1).toHaveBeenLastCalledWith({
+        fieldPaths: ['path'],
+        newEntity: _objectSpread(_objectSpread({}, defaultFile), {}, {
+          path: PATH_1,
+          ext: EXT_1
+        }),
+        oldEntity: defaultFile,
+        newValue: PATH_1,
+        oldValue: ''
+      });
       (0, _react.act)(function () {
         setPath('');
       });
       (0, _globals.expect)(onPathChange2).toHaveBeenCalledTimes(1);
-      (0, _globals.expect)(onPathChange2).toHaveBeenLastCalledWith(_objectSpread(_objectSpread({}, defaultFile), {}, {
-        size: 5000
-      }), _objectSpread(_objectSpread({}, defaultFile), {}, {
-        path: PATH_1,
-        size: 5000,
-        ext: EXT_1
-      }));
+      (0, _globals.expect)(onPathChange2).toHaveBeenLastCalledWith({
+        fieldPaths: ['path'],
+        newEntity: _objectSpread(_objectSpread({}, defaultFile), {}, {
+          size: 5000
+        }),
+        oldEntity: _objectSpread(_objectSpread({}, defaultFile), {}, {
+          path: PATH_1,
+          size: 5000,
+          ext: EXT_1
+        }),
+        newValue: '',
+        oldValue: PATH_1
+      });
     });
     (0, _globals.test)('when `deps` has changed, it should trigger update', function () {
       var onUpdate = _globals.jest.fn();
       var onDeepUpdate = _globals.jest.fn();
-      var _renderHook15 = (0, _react.renderHook)(function () {
+      var _renderHook16 = (0, _react.renderHook)(function () {
           var _useState3 = (0, _react2.useState)('user/'),
             _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
             pathPrefix = _useState4[0],
@@ -583,7 +630,7 @@ var useDeepCompareUpdate = function useDeepCompareUpdate(callback, deps) {
           }, [context]);
           return setPathPrefix;
         }),
-        result = _renderHook15.result;
+        result = _renderHook16.result;
       (0, _globals.expect)(onUpdate).toHaveBeenCalledTimes(0);
       (0, _globals.expect)(onDeepUpdate).toHaveBeenCalledTimes(0);
       (0, _react.act)(function () {
@@ -595,7 +642,7 @@ var useDeepCompareUpdate = function useDeepCompareUpdate(callback, deps) {
     (0, _globals.test)('empty `deps` should not trigger update', function () {
       var onUpdate = _globals.jest.fn();
       var onDeepUpdate = _globals.jest.fn();
-      var _renderHook16 = (0, _react.renderHook)(function () {
+      var _renderHook17 = (0, _react.renderHook)(function () {
           var _useState5 = (0, _react2.useState)('user/'),
             _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
             pathPrefix = _useState6[0],
@@ -611,7 +658,7 @@ var useDeepCompareUpdate = function useDeepCompareUpdate(callback, deps) {
           }, [context]);
           return setPathPrefix;
         }),
-        result = _renderHook16.result;
+        result = _renderHook17.result;
       (0, _globals.expect)(onUpdate).toHaveBeenCalledTimes(0);
       (0, _globals.expect)(onDeepUpdate).toHaveBeenCalledTimes(0);
       (0, _react.act)(function () {
@@ -621,93 +668,157 @@ var useDeepCompareUpdate = function useDeepCompareUpdate(callback, deps) {
       (0, _globals.expect)(onDeepUpdate).toHaveBeenCalledTimes(0);
     });
   });
-  (0, _globals.describe)('`useUseCase` should work with 1+ argument on accessor mode', function () {
-    (0, _globals.test)('check `context.length`', function () {
-      var _renderHook17 = (0, _react.renderHook)(function () {
-          return (0, _.useUseCase)(fileUseCase);
-        }),
-        result = _renderHook17.result;
-      var context = result.current;
-      (0, _globals.expect)(context).toHaveLength(2);
-    });
-    (0, _globals.test)('`entity` should be `undefined`', function () {
+  (0, _globals.describe)('`useUseCase` should work with 1+ arguments on non-entity mode', function () {
+    (0, _globals.test)('`entity` should equal `defaultFile`', function () {
       var _renderHook18 = (0, _react.renderHook)(function () {
-          return (0, _.useUseCase)(fileUseCase);
+          return (0, _.useUseCase)(mathUseCase);
         }),
         result = _renderHook18.result;
-      var context = result.current;
-      var _context17 = (0, _slicedToArray2["default"])(context, 1),
-        entity = _context17[0];
-      (0, _globals.expect)(entity).toBe(void 0);
+      var reducers = result.current;
+      (0, _globals.expect)(Array.isArray(reducers)).toBe(false);
     });
-    (0, _globals.test)('`reducers` should be returned as an object', function () {
+    (0, _globals.test)('returned reducer should work', function () {
       var _renderHook19 = (0, _react.renderHook)(function () {
-          return (0, _.useUseCase)(fileUseCase);
+          return (0, _.useUseCase)(mathUseCase);
         }),
         result = _renderHook19.result;
-      var context = result.current;
-      var _context18 = (0, _slicedToArray2["default"])(context, 2),
-        reducers = _context18[1];
-      (0, _globals.expect)((0, _typeof2["default"])(reducers)).toBe('object');
+      var reducers = result.current;
+      var add = reducers.add;
+      (0, _globals.expect)(add(1, 2)).toBe(3);
     });
-    (0, _globals.test)('`yield entity` should not trigger update', function () {
-      var onUpdate = _globals.jest.fn();
+    (0, _globals.test)('`options.extraValue` should be added after call `add` method', function () {
       var _renderHook20 = (0, _react.renderHook)(function () {
-          (0, _ahooks.useUpdateEffect)(function () {
-            onUpdate();
+          return (0, _.useUseCase)(mathUseCase, {
+            extraValue: 5
           });
-          return (0, _.useUseCase)(fileUseCase);
         }),
         result = _renderHook20.result;
-      var context = result.current;
-      var _context19 = (0, _slicedToArray2["default"])(context, 2),
-        reducers = _context19[1];
-      var setPath = reducers.setPath;
+      var reducers = result.current;
+      var add = reducers.add;
+      (0, _globals.expect)(add(1, 2)).toBe(8);
+    });
+    (0, _globals.test)('when `options` has changed, it should not trigger update', function () {
+      var onUpdate = _globals.jest.fn();
+      var onDeepUpdate = _globals.jest.fn();
+      var _renderHook21 = (0, _react.renderHook)(function () {
+          var _useState7 = (0, _react2.useState)(0),
+            _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+            extraValue = _useState8[0],
+            setExtraValue = _useState8[1];
+          var reducers = (0, _.useUseCase)(mathUseCase, {
+            extraValue: extraValue
+          });
+          (0, _ahooks.useUpdateEffect)(function () {
+            onUpdate();
+          }, [reducers]);
+          useDeepCompareUpdate(function () {
+            onDeepUpdate();
+          }, [reducers]);
+          return setExtraValue;
+        }),
+        result = _renderHook21.result;
+      (0, _globals.expect)(onUpdate).toHaveBeenCalledTimes(0);
+      (0, _globals.expect)(onDeepUpdate).toHaveBeenCalledTimes(0);
       (0, _react.act)(function () {
-        setPath(PATH_1);
+        result.current(3);
       });
-      (0, _globals.expect)(result.current).toBe(context);
-      (0, _globals.expect)(result.current).toEqual(context);
       (0, _globals.expect)(onUpdate).toHaveBeenCalledTimes(0);
+      (0, _globals.expect)(onDeepUpdate).toHaveBeenCalledTimes(0);
     });
-    (0, _globals.test)('should work within <Child />', function () {
+    (0, _globals.test)('when `deps` change, it should update reducers', function () {
+      var onUpdate = _globals.jest.fn();
+      var onDeepUpdate = _globals.jest.fn();
+      var _renderHook22 = (0, _react.renderHook)(function () {
+          var _useState9 = (0, _react2.useState)(0),
+            _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
+            extraValue = _useState10[0],
+            setExtraValue = _useState10[1];
+          var reducers = (0, _.useUseCase)(mathUseCase, {
+            extraValue: extraValue
+          }, [extraValue]);
+          (0, _ahooks.useUpdateEffect)(function () {
+            onUpdate();
+          }, [reducers]);
+          useDeepCompareUpdate(function () {
+            onDeepUpdate();
+          }, [reducers]);
+          return setExtraValue;
+        }),
+        result = _renderHook22.result;
+      (0, _globals.expect)(onUpdate).toHaveBeenCalledTimes(0);
+      (0, _globals.expect)(onDeepUpdate).toHaveBeenCalledTimes(0);
+      (0, _react.act)(function () {
+        result.current(3);
+      });
+      (0, _globals.expect)(onUpdate).toHaveBeenCalledTimes(1);
+      (0, _globals.expect)(onDeepUpdate).toHaveBeenCalledTimes(1);
+    });
+    (0, _globals.test)('empty `deps` should not update reducers', function () {
+      var onUpdate = _globals.jest.fn();
+      var onDeepUpdate = _globals.jest.fn();
+      var _renderHook23 = (0, _react.renderHook)(function () {
+          var _useState11 = (0, _react2.useState)(0),
+            _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
+            extraValue = _useState12[0],
+            setExtraValue = _useState12[1];
+          var reducers = (0, _.useUseCase)(mathUseCase, {
+            extraValue: extraValue
+          }, []);
+          (0, _ahooks.useUpdateEffect)(function () {
+            onUpdate();
+          }, [reducers]);
+          useDeepCompareUpdate(function () {
+            onDeepUpdate();
+          }, [reducers]);
+          return setExtraValue;
+        }),
+        result = _renderHook23.result;
+      (0, _globals.expect)(onUpdate).toHaveBeenCalledTimes(0);
+      (0, _globals.expect)(onDeepUpdate).toHaveBeenCalledTimes(0);
+      (0, _react.act)(function () {
+        result.current(3);
+      });
+      (0, _globals.expect)(onUpdate).toHaveBeenCalledTimes(0);
+      (0, _globals.expect)(onDeepUpdate).toHaveBeenCalledTimes(0);
+    });
+    (0, _globals.test)('should not trigger update', function () {
+      var onUpdate = _globals.jest.fn();
+      (0, _react.render)((0, _jsxRuntime.jsx)(MathParent, {
+        onUpdate: onUpdate
+      }));
+      _react.fireEvent.click(_react.screen.getByText(PARENT_BUTTON_TEXT));
+      (0, _globals.expect)(onUpdate).toHaveBeenCalledTimes(0);
+    });
+  });
+  (0, _globals.describe)('`useUseCase` should work with 1+ arguments on context mode', function () {
+    (0, _globals.test)('should work within <Child /> which it is under <Parent />', function () {
       var textPrefix = '>>';
-      var onUpdate1 = _globals.jest.fn();
-      var onPathChange1 = _globals.jest.fn();
-      var onUndefinedEntity1 = _globals.jest.fn();
-      var onUpdate2 = _globals.jest.fn();
-      var onPathChange2 = _globals.jest.fn();
-      var onUndefinedEntity2 = _globals.jest.fn();
+      var onUpdate = _globals.jest.fn();
+      var onPathChange = _globals.jest.fn();
+      var onUndefinedEntity = _globals.jest.fn();
       var onSetPath = _globals.jest.fn(function () {
         return PATH_1;
       });
-      (0, _react.render)((0, _jsxRuntime.jsxs)("div", {
-        children: [(0, _jsxRuntime.jsx)(Parent, {
+      (0, _react.render)((0, _jsxRuntime.jsx)("div", {
+        children: (0, _jsxRuntime.jsx)(Parent, {
           onSetPath: onSetPath,
           children: (0, _jsxRuntime.jsx)(Child, {
             textPrefix: textPrefix,
-            onUpdate: onUpdate1,
-            onPathChange: onPathChange1,
-            onUndefinedEntity: onUndefinedEntity1
+            onUpdate: onUpdate,
+            onPathChange: onPathChange,
+            onUndefinedEntity: onUndefinedEntity
           })
-        }), (0, _jsxRuntime.jsx)(Child, {
-          onUpdate: onUpdate2,
-          onPathChange: onPathChange2,
-          onUndefinedEntity: onUndefinedEntity2
-        })]
+        })
       }));
       _react.fireEvent.click(_react.screen.getByText(PARENT_BUTTON_TEXT));
       (0, _globals.expect)(onSetPath).toHaveBeenCalledTimes(1);
-      (0, _globals.expect)(onUpdate1).toHaveBeenCalledTimes(1);
-      (0, _globals.expect)(onPathChange1).toHaveBeenCalledWith(PATH_1);
+      (0, _globals.expect)(onUpdate).toHaveBeenCalledTimes(1);
+      (0, _globals.expect)(onPathChange).toHaveBeenCalledWith(PATH_1);
       _react.fireEvent.click(_react.screen.getByText(textPrefix + CHILD_BUTTON_TEXT));
       (0, _globals.expect)(onSetPath).toHaveBeenCalledTimes(1);
-      (0, _globals.expect)(onUpdate1).toHaveBeenCalledTimes(2);
-      (0, _globals.expect)(onPathChange1).toHaveBeenCalledWith('');
-      (0, _globals.expect)(onUpdate2).toHaveBeenCalledTimes(0);
-      (0, _globals.expect)(onPathChange2).toHaveBeenCalledTimes(0);
-      (0, _globals.expect)(onUndefinedEntity1).toHaveBeenCalledTimes(0);
-      (0, _globals.expect)(onUndefinedEntity2).toHaveBeenCalledTimes(1);
+      (0, _globals.expect)(onUpdate).toHaveBeenCalledTimes(2);
+      (0, _globals.expect)(onPathChange).toHaveBeenCalledWith('');
+      (0, _globals.expect)(onUndefinedEntity).toHaveBeenCalledTimes(0);
     });
     (0, _globals.test)('`options.onChange` event should be trigger at child elements', function () {
       var onFirstChange = _globals.jest.fn();
@@ -765,6 +876,56 @@ var useDeepCompareUpdate = function useDeepCompareUpdate(callback, deps) {
       (0, _globals.expect)(onFirstChange).toHaveBeenCalledTimes(1);
       (0, _globals.expect)(onParentPathChange).toHaveBeenCalledTimes(2);
     });
+    (0, _globals.test)('`options.onChange` event should be trigger in orders', function () {
+      var changeTimes = 0;
+      var updateChangeTimes = function updateChangeTimes() {
+        return ++changeTimes;
+      };
+      var onChangeA = _globals.jest.fn(updateChangeTimes);
+      var onChangeB = _globals.jest.fn(updateChangeTimes);
+      var onChangeC = _globals.jest.fn(updateChangeTimes);
+      var buttonText = 'my button';
+      var A = function A(_ref7) {
+        var children = _ref7.children;
+        (0, _.useUseCase)(fileUseCase, {
+          onChange: onChangeA
+        });
+        return (0, _jsxRuntime.jsx)(_react2.Fragment, {
+          children: children
+        });
+      };
+      var B = function B() {
+        (0, _.useUseCase)(fileUseCase, {
+          onChange: onChangeB
+        });
+        return (0, _jsxRuntime.jsx)(_react2.Fragment, {});
+      };
+      var C = function C() {
+        var _useUseCase8 = (0, _.useUseCase)(defaultFile, fileUseCase, {
+            onChange: onChangeC
+          }),
+          _useUseCase9 = (0, _slicedToArray2["default"])(_useUseCase8, 3),
+          setPath = _useUseCase9[1].setPath,
+          Provider = _useUseCase9[2];
+        var onFirstClick = function onFirstClick() {
+          setPath(PATH_1);
+        };
+        return (0, _jsxRuntime.jsxs)(Provider, {
+          children: [(0, _jsxRuntime.jsx)(A, {
+            children: (0, _jsxRuntime.jsx)(B, {})
+          }), (0, _jsxRuntime.jsx)("button", {
+            onClick: onFirstClick,
+            children: buttonText
+          })]
+        });
+      };
+      (0, _react.render)((0, _jsxRuntime.jsx)(C, {}));
+      (0, _globals.expect)(changeTimes).toBe(0);
+      _react.fireEvent.click(_react.screen.getByText(buttonText));
+      (0, _globals.expect)(onChangeA).toHaveReturnedWith(2);
+      (0, _globals.expect)(onChangeB).toHaveReturnedWith(1);
+      (0, _globals.expect)(onChangeC).toHaveReturnedWith(3);
+    });
     (0, _globals.test)('`options.watch` should be trigger at child elements', function () {
       var onFirstExtChange = _globals.jest.fn();
       var onSecondExtChange = _globals.jest.fn();
@@ -781,14 +942,14 @@ var useDeepCompareUpdate = function useDeepCompareUpdate(callback, deps) {
         return (0, _jsxRuntime.jsx)(_react2.Fragment, {});
       };
       var B = function B() {
-        var _useUseCase8 = (0, _.useUseCase)(defaultFile, fileUseCase, {
+        var _useUseCase10 = (0, _.useUseCase)(defaultFile, fileUseCase, {
             watch: {
               ext: onParentExtChange
             }
           }),
-          _useUseCase9 = (0, _slicedToArray2["default"])(_useUseCase8, 3),
-          setPath = _useUseCase9[1].setPath,
-          Provider = _useUseCase9[2];
+          _useUseCase11 = (0, _slicedToArray2["default"])(_useUseCase10, 3),
+          setPath = _useUseCase11[1].setPath,
+          Provider = _useUseCase11[2];
         var onFirstClick = function onFirstClick() {
           setPath(PATH_1);
           onExtChange = onSecondExtChange;
@@ -810,142 +971,582 @@ var useDeepCompareUpdate = function useDeepCompareUpdate(callback, deps) {
       (0, _globals.expect)(onFirstExtChange).toHaveBeenCalledTimes(0);
       _react.fireEvent.click(_react.screen.getByText(firstButtonText));
       (0, _globals.expect)(onFirstExtChange).toHaveBeenCalledTimes(1);
-      (0, _globals.expect)(onFirstExtChange).toHaveBeenLastCalledWith(_objectSpread(_objectSpread({}, defaultFile), {}, {
-        ext: EXT_1,
-        path: PATH_1
-      }), defaultFile);
+      (0, _globals.expect)(onFirstExtChange).toHaveBeenLastCalledWith({
+        fieldPaths: ['ext'],
+        newEntity: _objectSpread(_objectSpread({}, defaultFile), {}, {
+          ext: EXT_1,
+          path: PATH_1
+        }),
+        oldEntity: defaultFile,
+        newValue: EXT_1,
+        oldValue: ''
+      });
       (0, _globals.expect)(onParentExtChange).toHaveBeenCalledTimes(1);
       (0, _globals.expect)(onSecondExtChange).toHaveBeenCalledTimes(0);
       _react.fireEvent.click(_react.screen.getByText(secondButtonText));
       (0, _globals.expect)(onSecondExtChange).toHaveBeenCalledTimes(1);
-      (0, _globals.expect)(onSecondExtChange).toHaveBeenLastCalledWith(defaultFile, _objectSpread(_objectSpread({}, defaultFile), {}, {
-        ext: EXT_1,
-        path: PATH_1
-      }));
+      (0, _globals.expect)(onSecondExtChange).toHaveBeenLastCalledWith({
+        fieldPaths: ['ext'],
+        newEntity: defaultFile,
+        oldEntity: _objectSpread(_objectSpread({}, defaultFile), {}, {
+          ext: EXT_1,
+          path: PATH_1
+        }),
+        newValue: '',
+        oldValue: EXT_1
+      });
       (0, _globals.expect)(onFirstExtChange).toHaveBeenCalledTimes(1);
       (0, _globals.expect)(onParentExtChange).toHaveBeenCalledTimes(2);
     });
-  });
-  (0, _globals.describe)('`useUseCase` should work with 1+ arguments on non-entity mode', function () {
-    (0, _globals.test)('`entity` should equal `defaultFile`', function () {
-      var _renderHook21 = (0, _react.renderHook)(function () {
-          return (0, _.useUseCase)(mathUseCase);
-        }),
-        result = _renderHook21.result;
-      var reducers = result.current;
-      (0, _globals.expect)((0, _typeof2["default"])(reducers)).toBe('object');
-    });
-    (0, _globals.test)('returned reducer should work', function () {
-      var _renderHook22 = (0, _react.renderHook)(function () {
-          return (0, _.useUseCase)(mathUseCase);
-        }),
-        result = _renderHook22.result;
-      var reducers = result.current;
-      var add = reducers.add;
-      (0, _globals.expect)(add(1, 2)).toBe(3);
-    });
-    (0, _globals.test)('`options.extraValue` should be added after call `add` method', function () {
-      var _renderHook23 = (0, _react.renderHook)(function () {
-          return (0, _.useUseCase)(mathUseCase, {
-            extraValue: 5
-          });
-        }),
-        result = _renderHook23.result;
-      var reducers = result.current;
-      var add = reducers.add;
-      (0, _globals.expect)(add(1, 2)).toBe(8);
+    (0, _globals.test)('`options.watch` should be trigger in orders', function () {
+      var changeTimes = 0;
+      var updateChangeTimes = function updateChangeTimes(e) {
+        void e;
+        return ++changeTimes;
+      };
+      var onChangeA = _globals.jest.fn(updateChangeTimes);
+      var onChangeB = _globals.jest.fn(updateChangeTimes);
+      var onChangeC = _globals.jest.fn(updateChangeTimes);
+      var buttonText = 'my button';
+      var A = function A(_ref8) {
+        var children = _ref8.children;
+        (0, _.useUseCase)(fileUseCase, {
+          watch: {
+            ext: onChangeA
+          }
+        });
+        return (0, _jsxRuntime.jsx)(_react2.Fragment, {
+          children: children
+        });
+      };
+      var B = function B() {
+        (0, _.useUseCase)(fileUseCase, {
+          watch: {
+            ext: onChangeB
+          }
+        });
+        return (0, _jsxRuntime.jsx)(_react2.Fragment, {});
+      };
+      var C = function C() {
+        var _useUseCase12 = (0, _.useUseCase)(defaultFile, fileUseCase, {
+            watch: {
+              ext: onChangeC
+            }
+          }),
+          _useUseCase13 = (0, _slicedToArray2["default"])(_useUseCase12, 3),
+          setPath = _useUseCase13[1].setPath,
+          Provider = _useUseCase13[2];
+        var onFirstClick = function onFirstClick() {
+          setPath(PATH_1);
+        };
+        return (0, _jsxRuntime.jsxs)(Provider, {
+          children: [(0, _jsxRuntime.jsx)(A, {
+            children: (0, _jsxRuntime.jsx)(B, {})
+          }), (0, _jsxRuntime.jsx)("button", {
+            onClick: onFirstClick,
+            children: buttonText
+          })]
+        });
+      };
+      (0, _react.render)((0, _jsxRuntime.jsx)(C, {}));
+      (0, _globals.expect)(changeTimes).toBe(0);
+      _react.fireEvent.click(_react.screen.getByText(buttonText));
+      (0, _globals.expect)(onChangeA).toHaveReturnedWith(2);
+      (0, _globals.expect)(onChangeB).toHaveReturnedWith(1);
+      (0, _globals.expect)(onChangeC).toHaveReturnedWith(3);
     });
-    (0, _globals.test)('when `options` has changed, it should not trigger update', function () {
-      var onUpdate = _globals.jest.fn();
-      var onDeepUpdate = _globals.jest.fn();
+    (0, _globals.test)('`options.watch` should work with array field path of array', function () {
+      var onExtChange = _globals.jest.fn();
+      var onSizeChange = _globals.jest.fn();
       var _renderHook24 = (0, _react.renderHook)(function () {
-          var _useState7 = (0, _react2.useState)(0),
-            _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
-            extraValue = _useState8[0],
-            setExtraValue = _useState8[1];
-          var reducers = (0, _.useUseCase)(mathUseCase, {
-            extraValue: extraValue
+          return (0, _.useUseCase)({}, fieldPathUseCase, {
+            watch: {
+              'list.ext': onExtChange,
+              'list.size': onSizeChange
+            }
           });
-          (0, _ahooks.useUpdateEffect)(function () {
-            onUpdate();
-          }, [reducers]);
-          useDeepCompareUpdate(function () {
-            onDeepUpdate();
-          }, [reducers]);
-          return setExtraValue;
         }),
         result = _renderHook24.result;
-      (0, _globals.expect)(onUpdate).toHaveBeenCalledTimes(0);
-      (0, _globals.expect)(onDeepUpdate).toHaveBeenCalledTimes(0);
+      var cores = result.current;
+      var _cores13 = (0, _slicedToArray2["default"])(cores, 2),
+        setEntity = _cores13[1].setEntity;
       (0, _react.act)(function () {
-        result.current(3);
+        setEntity({
+          list: [defaultFile]
+        });
+      });
+      (0, _globals.expect)(onExtChange).toHaveBeenCalledTimes(1);
+      (0, _globals.expect)(onSizeChange).toHaveBeenCalledTimes(1);
+      (0, _globals.expect)(onExtChange).toHaveBeenCalledWith({
+        fieldPaths: ['list', '0', 'ext'],
+        newEntity: {
+          list: [defaultFile]
+        },
+        oldEntity: {},
+        newValue: '',
+        oldValue: void 0
+      });
+      (0, _globals.expect)(onSizeChange).toHaveBeenCalledWith({
+        fieldPaths: ['list', '0', 'size'],
+        newEntity: {
+          list: [defaultFile]
+        },
+        oldEntity: {},
+        newValue: 0,
+        oldValue: void 0
+      });
+      (0, _react.act)(function () {
+        setEntity({
+          list: [_objectSpread(_objectSpread({}, defaultFile), {}, {
+            ext: EXT_1
+          })]
+        });
+      });
+      (0, _globals.expect)(onExtChange).toHaveBeenCalledTimes(2);
+      (0, _globals.expect)(onSizeChange).toHaveBeenCalledTimes(1);
+      (0, _globals.expect)(onExtChange).toHaveBeenCalledWith({
+        fieldPaths: ['list', '0', 'ext'],
+        newEntity: {
+          list: [_objectSpread(_objectSpread({}, defaultFile), {}, {
+            ext: EXT_1
+          })]
+        },
+        oldEntity: {
+          list: [defaultFile]
+        },
+        newValue: EXT_1,
+        oldValue: ''
+      });
+      (0, _react.act)(function () {
+        setEntity({
+          list: [_objectSpread(_objectSpread({}, defaultFile), {}, {
+            ext: EXT_1
+          }), _objectSpread(_objectSpread({}, defaultFile), {}, {
+            ext: EXT_2
+          })]
+        });
+      });
+      (0, _globals.expect)(onExtChange).toHaveBeenCalledTimes(3);
+      (0, _globals.expect)(onSizeChange).toHaveBeenCalledTimes(2);
+      (0, _globals.expect)(onExtChange).toHaveBeenCalledWith({
+        fieldPaths: ['list', '1', 'ext'],
+        newEntity: {
+          list: [_objectSpread(_objectSpread({}, defaultFile), {}, {
+            ext: EXT_1
+          }), _objectSpread(_objectSpread({}, defaultFile), {}, {
+            ext: EXT_2
+          })]
+        },
+        oldEntity: {
+          list: [_objectSpread(_objectSpread({}, defaultFile), {}, {
+            ext: EXT_1
+          })]
+        },
+        newValue: EXT_2,
+        oldValue: void 0
+      });
+      (0, _globals.expect)(onSizeChange).toHaveBeenCalledWith({
+        fieldPaths: ['list', '1', 'size'],
+        newEntity: {
+          list: [_objectSpread(_objectSpread({}, defaultFile), {}, {
+            ext: EXT_1
+          }), _objectSpread(_objectSpread({}, defaultFile), {}, {
+            ext: EXT_2
+          })]
+        },
+        oldEntity: {
+          list: [_objectSpread(_objectSpread({}, defaultFile), {}, {
+            ext: EXT_1
+          })]
+        },
+        newValue: 0,
+        oldValue: void 0
+      });
+      (0, _react.act)(function () {
+        setEntity({
+          nestedList: []
+        });
+      });
+      (0, _globals.expect)(onExtChange).toHaveBeenCalledTimes(3);
+      (0, _globals.expect)(onSizeChange).toHaveBeenCalledTimes(2);
+      (0, _react.act)(function () {
+        setEntity(function () {
+          return {
+            list: [_objectSpread(_objectSpread({}, defaultFile), {}, {
+              ext: EXT_2
+            }), _objectSpread(_objectSpread({}, defaultFile), {}, {
+              ext: EXT_1
+            }), defaultFile]
+          };
+        });
+      });
+      (0, _globals.expect)(onExtChange).toHaveBeenCalledTimes(6);
+      (0, _globals.expect)(onSizeChange).toHaveBeenCalledTimes(3);
+      (0, _globals.expect)(onExtChange).toHaveBeenNthCalledWith(4, {
+        fieldPaths: ['list', '0', 'ext'],
+        newEntity: {
+          list: [_objectSpread(_objectSpread({}, defaultFile), {}, {
+            ext: EXT_2
+          }), _objectSpread(_objectSpread({}, defaultFile), {}, {
+            ext: EXT_1
+          }), defaultFile]
+        },
+        oldEntity: {
+          list: [_objectSpread(_objectSpread({}, defaultFile), {}, {
+            ext: EXT_1
+          }), _objectSpread(_objectSpread({}, defaultFile), {}, {
+            ext: EXT_2
+          })],
+          nestedList: []
+        },
+        newValue: EXT_2,
+        oldValue: EXT_1
+      });
+      (0, _globals.expect)(onExtChange).toHaveBeenNthCalledWith(5, {
+        fieldPaths: ['list', '1', 'ext'],
+        newEntity: {
+          list: [_objectSpread(_objectSpread({}, defaultFile), {}, {
+            ext: EXT_2
+          }), _objectSpread(_objectSpread({}, defaultFile), {}, {
+            ext: EXT_1
+          }), defaultFile]
+        },
+        oldEntity: {
+          list: [_objectSpread(_objectSpread({}, defaultFile), {}, {
+            ext: EXT_1
+          }), _objectSpread(_objectSpread({}, defaultFile), {}, {
+            ext: EXT_2
+          })],
+          nestedList: []
+        },
+        newValue: EXT_1,
+        oldValue: EXT_2
+      });
+      (0, _globals.expect)(onExtChange).toHaveBeenNthCalledWith(6, {
+        fieldPaths: ['list', '2', 'ext'],
+        newEntity: {
+          list: [_objectSpread(_objectSpread({}, defaultFile), {}, {
+            ext: EXT_2
+          }), _objectSpread(_objectSpread({}, defaultFile), {}, {
+            ext: EXT_1
+          }), defaultFile]
+        },
+        oldEntity: {
+          list: [_objectSpread(_objectSpread({}, defaultFile), {}, {
+            ext: EXT_1
+          }), _objectSpread(_objectSpread({}, defaultFile), {}, {
+            ext: EXT_2
+          })],
+          nestedList: []
+        },
+        newValue: '',
+        oldValue: void 0
+      });
+      (0, _globals.expect)(onSizeChange).toHaveBeenCalledWith({
+        fieldPaths: ['list', '2', 'size'],
+        newEntity: {
+          list: [_objectSpread(_objectSpread({}, defaultFile), {}, {
+            ext: EXT_2
+          }), _objectSpread(_objectSpread({}, defaultFile), {}, {
+            ext: EXT_1
+          }), defaultFile]
+        },
+        oldEntity: {
+          list: [_objectSpread(_objectSpread({}, defaultFile), {}, {
+            ext: EXT_1
+          }), _objectSpread(_objectSpread({}, defaultFile), {}, {
+            ext: EXT_2
+          })],
+          nestedList: []
+        },
+        newValue: 0,
+        oldValue: void 0
+      });
+      (0, _react.act)(function () {
+        setEntity(function () {
+          return {};
+        });
+      });
+      (0, _globals.expect)(onExtChange).toHaveBeenCalledTimes(9);
+      (0, _globals.expect)(onSizeChange).toHaveBeenCalledTimes(6);
+      (0, _globals.expect)(onExtChange).toHaveBeenNthCalledWith(7, {
+        fieldPaths: ['list', '0', 'ext'],
+        newEntity: {},
+        oldEntity: {
+          list: [_objectSpread(_objectSpread({}, defaultFile), {}, {
+            ext: EXT_2
+          }), _objectSpread(_objectSpread({}, defaultFile), {}, {
+            ext: EXT_1
+          }), defaultFile]
+        },
+        newValue: void 0,
+        oldValue: EXT_2
+      });
+      (0, _globals.expect)(onExtChange).toHaveBeenNthCalledWith(8, {
+        fieldPaths: ['list', '1', 'ext'],
+        newEntity: {},
+        oldEntity: {
+          list: [_objectSpread(_objectSpread({}, defaultFile), {}, {
+            ext: EXT_2
+          }), _objectSpread(_objectSpread({}, defaultFile), {}, {
+            ext: EXT_1
+          }), defaultFile]
+        },
+        newValue: void 0,
+        oldValue: EXT_1
+      });
+      (0, _globals.expect)(onExtChange).toHaveBeenNthCalledWith(9, {
+        fieldPaths: ['list', '2', 'ext'],
+        newEntity: {},
+        oldEntity: {
+          list: [_objectSpread(_objectSpread({}, defaultFile), {}, {
+            ext: EXT_2
+          }), _objectSpread(_objectSpread({}, defaultFile), {}, {
+            ext: EXT_1
+          }), defaultFile]
+        },
+        newValue: void 0,
+        oldValue: ''
+      });
+      (0, _globals.expect)(onSizeChange).toHaveBeenNthCalledWith(4, {
+        fieldPaths: ['list', '0', 'size'],
+        newEntity: {},
+        oldEntity: {
+          list: [_objectSpread(_objectSpread({}, defaultFile), {}, {
+            ext: EXT_2
+          }), _objectSpread(_objectSpread({}, defaultFile), {}, {
+            ext: EXT_1
+          }), defaultFile]
+        },
+        newValue: void 0,
+        oldValue: 0
+      });
+      (0, _globals.expect)(onSizeChange).toHaveBeenNthCalledWith(5, {
+        fieldPaths: ['list', '1', 'size'],
+        newEntity: {},
+        oldEntity: {
+          list: [_objectSpread(_objectSpread({}, defaultFile), {}, {
+            ext: EXT_2
+          }), _objectSpread(_objectSpread({}, defaultFile), {}, {
+            ext: EXT_1
+          }), defaultFile]
+        },
+        newValue: void 0,
+        oldValue: 0
+      });
+      (0, _globals.expect)(onSizeChange).toHaveBeenNthCalledWith(6, {
+        fieldPaths: ['list', '2', 'size'],
+        newEntity: {},
+        oldEntity: {
+          list: [_objectSpread(_objectSpread({}, defaultFile), {}, {
+            ext: EXT_2
+          }), _objectSpread(_objectSpread({}, defaultFile), {}, {
+            ext: EXT_1
+          }), defaultFile]
+        },
+        newValue: void 0,
+        oldValue: 0
       });
-      (0, _globals.expect)(onUpdate).toHaveBeenCalledTimes(0);
-      (0, _globals.expect)(onDeepUpdate).toHaveBeenCalledTimes(0);
     });
-    (0, _globals.test)('when `deps` change, it should update reducers', function () {
-      var onUpdate = _globals.jest.fn();
-      var onDeepUpdate = _globals.jest.fn();
+    (0, _globals.test)('`options.watch` should work with field path of array length', function () {
+      var onEntityLengthChange = _globals.jest.fn();
+      var onListLengthChange = _globals.jest.fn();
+      var lengthUseCase = function lengthUseCase() {
+        return (0, _usecases.entityUseCase)();
+      };
       var _renderHook25 = (0, _react.renderHook)(function () {
-          var _useState9 = (0, _react2.useState)(0),
-            _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
-            extraValue = _useState10[0],
-            setExtraValue = _useState10[1];
-          var reducers = (0, _.useUseCase)(mathUseCase, {
-            extraValue: extraValue
-          }, [extraValue]);
-          (0, _ahooks.useUpdateEffect)(function () {
-            onUpdate();
-          }, [reducers]);
-          useDeepCompareUpdate(function () {
-            onDeepUpdate();
-          }, [reducers]);
-          return setExtraValue;
+          return (0, _.useUseCase)([], lengthUseCase, {
+            watch: {
+              length: onEntityLengthChange,
+              'list.length': onListLengthChange
+            }
+          });
         }),
         result = _renderHook25.result;
-      (0, _globals.expect)(onUpdate).toHaveBeenCalledTimes(0);
-      (0, _globals.expect)(onDeepUpdate).toHaveBeenCalledTimes(0);
+      var cores = result.current;
+      var _cores14 = (0, _slicedToArray2["default"])(cores, 2),
+        setEntity = _cores14[1].setEntity;
+      (0, _globals.expect)(onEntityLengthChange).toHaveBeenCalledTimes(0);
+      (0, _globals.expect)(onListLengthChange).toHaveBeenCalledTimes(0);
       (0, _react.act)(function () {
-        result.current(3);
+        setEntity([{
+          list: [defaultFile, defaultFile]
+        }]);
+      });
+      (0, _globals.expect)(onEntityLengthChange).toHaveBeenCalledTimes(1);
+      (0, _globals.expect)(onListLengthChange).toHaveBeenCalledTimes(1);
+      (0, _globals.expect)(onEntityLengthChange).toHaveBeenCalledWith({
+        fieldPaths: ['length'],
+        newEntity: [{
+          list: [defaultFile, defaultFile]
+        }],
+        oldEntity: [],
+        newValue: 1,
+        oldValue: 0
+      });
+      (0, _globals.expect)(onListLengthChange).toHaveBeenCalledWith({
+        fieldPaths: ['0', 'list', 'length'],
+        newEntity: [{
+          list: [defaultFile, defaultFile]
+        }],
+        oldEntity: [],
+        newValue: 2,
+        oldValue: void 0
       });
-      (0, _globals.expect)(onUpdate).toHaveBeenCalledTimes(1);
-      (0, _globals.expect)(onDeepUpdate).toHaveBeenCalledTimes(1);
     });
-    (0, _globals.test)('empty `deps` should not update reducers', function () {
-      var onUpdate = _globals.jest.fn();
-      var onDeepUpdate = _globals.jest.fn();
+    (0, _globals.test)('`options.watch` should work with field path of nested array', function () {
+      var onChange = _globals.jest.fn();
       var _renderHook26 = (0, _react.renderHook)(function () {
-          var _useState11 = (0, _react2.useState)(0),
-            _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
-            extraValue = _useState12[0],
-            setExtraValue = _useState12[1];
-          var reducers = (0, _.useUseCase)(mathUseCase, {
-            extraValue: extraValue
-          }, []);
-          (0, _ahooks.useUpdateEffect)(function () {
-            onUpdate();
-          }, [reducers]);
-          useDeepCompareUpdate(function () {
-            onDeepUpdate();
-          }, [reducers]);
-          return setExtraValue;
+          return (0, _.useUseCase)({}, fieldPathUseCase, {
+            watch: {
+              'nestedList.size': onChange
+            }
+          });
         }),
         result = _renderHook26.result;
-      (0, _globals.expect)(onUpdate).toHaveBeenCalledTimes(0);
-      (0, _globals.expect)(onDeepUpdate).toHaveBeenCalledTimes(0);
+      var cores = result.current;
+      var _cores15 = (0, _slicedToArray2["default"])(cores, 2),
+        setEntity = _cores15[1].setEntity;
+      (0, _globals.expect)(onChange).toHaveBeenCalledTimes(0);
       (0, _react.act)(function () {
-        result.current(3);
+        setEntity({
+          nestedList: [[[defaultFile]]]
+        });
+      });
+      (0, _globals.expect)(onChange).toHaveBeenCalledTimes(1);
+      (0, _globals.expect)(onChange).toHaveBeenCalledWith({
+        fieldPaths: ['nestedList', '0', '0', '0', 'size'],
+        newEntity: {
+          nestedList: [[[defaultFile]]]
+        },
+        oldEntity: {},
+        newValue: 0,
+        oldValue: void 0
+      });
+      (0, _react.act)(function () {
+        setEntity({
+          nestedList: [[[_objectSpread(_objectSpread({}, defaultFile), {}, {
+            size: 100
+          }), _objectSpread(_objectSpread({}, defaultFile), {}, {
+            size: 200
+          })]], [[_objectSpread(_objectSpread({}, defaultFile), {}, {
+            size: 300
+          })]]]
+        });
+      });
+      (0, _globals.expect)(onChange).toHaveBeenCalledTimes(4);
+      (0, _globals.expect)(onChange).toHaveBeenNthCalledWith(2, {
+        fieldPaths: ['nestedList', '0', '0', '0', 'size'],
+        newEntity: {
+          nestedList: [[[_objectSpread(_objectSpread({}, defaultFile), {}, {
+            size: 100
+          }), _objectSpread(_objectSpread({}, defaultFile), {}, {
+            size: 200
+          })]], [[_objectSpread(_objectSpread({}, defaultFile), {}, {
+            size: 300
+          })]]]
+        },
+        oldEntity: {
+          nestedList: [[[defaultFile]]]
+        },
+        newValue: 100,
+        oldValue: 0
+      });
+      (0, _globals.expect)(onChange).toHaveBeenNthCalledWith(3, {
+        fieldPaths: ['nestedList', '0', '0', '1', 'size'],
+        newEntity: {
+          nestedList: [[[_objectSpread(_objectSpread({}, defaultFile), {}, {
+            size: 100
+          }), _objectSpread(_objectSpread({}, defaultFile), {}, {
+            size: 200
+          })]], [[_objectSpread(_objectSpread({}, defaultFile), {}, {
+            size: 300
+          })]]]
+        },
+        oldEntity: {
+          nestedList: [[[defaultFile]]]
+        },
+        newValue: 200,
+        oldValue: void 0
+      });
+      (0, _globals.expect)(onChange).toHaveBeenNthCalledWith(4, {
+        fieldPaths: ['nestedList', '1', '0', '0', 'size'],
+        newEntity: {
+          nestedList: [[[_objectSpread(_objectSpread({}, defaultFile), {}, {
+            size: 100
+          }), _objectSpread(_objectSpread({}, defaultFile), {}, {
+            size: 200
+          })]], [[_objectSpread(_objectSpread({}, defaultFile), {}, {
+            size: 300
+          })]]]
+        },
+        oldEntity: {
+          nestedList: [[[defaultFile]]]
+        },
+        newValue: 300,
+        oldValue: void 0
       });
-      (0, _globals.expect)(onUpdate).toHaveBeenCalledTimes(0);
-      (0, _globals.expect)(onDeepUpdate).toHaveBeenCalledTimes(0);
     });
-    (0, _globals.test)('should not trigger update', function () {
-      var onUpdate = _globals.jest.fn();
-      (0, _react.render)((0, _jsxRuntime.jsx)(MathParent, {
-        onUpdate: onUpdate
-      }));
-      _react.fireEvent.click(_react.screen.getByText(PARENT_BUTTON_TEXT));
-      (0, _globals.expect)(onUpdate).toHaveBeenCalledTimes(0);
+    (0, _globals.test)('`options.watch` should work with field path of object', function () {
+      var onExtChange = _globals.jest.fn();
+      var onSizeChange = _globals.jest.fn();
+      var _renderHook27 = (0, _react.renderHook)(function () {
+          return (0, _.useUseCase)({}, fieldPathUseCase, {
+            watch: {
+              'obj.file.ext': onExtChange,
+              'obj.file.size': onSizeChange
+            }
+          });
+        }),
+        result = _renderHook27.result;
+      var cores = result.current;
+      var _cores16 = (0, _slicedToArray2["default"])(cores, 2),
+        setEntity = _cores16[1].setEntity;
+      (0, _globals.expect)(onExtChange).toHaveBeenCalledTimes(0);
+      (0, _react.act)(function () {
+        setEntity({
+          obj: {
+            file: {
+              ext: EXT_1
+            }
+          }
+        });
+      });
+      (0, _globals.expect)(onExtChange).toHaveBeenCalledTimes(1);
+      (0, _globals.expect)(onSizeChange).toHaveBeenCalledTimes(0);
+      (0, _globals.expect)(onExtChange).toHaveBeenCalledWith({
+        fieldPaths: ['obj', 'file', 'ext'],
+        newEntity: {
+          obj: {
+            file: {
+              ext: EXT_1
+            }
+          }
+        },
+        oldEntity: {},
+        newValue: EXT_1,
+        oldValue: void 0
+      });
+      (0, _react.act)(function () {
+        setEntity(function () {
+          return {};
+        });
+      });
+      (0, _globals.expect)(onExtChange).toHaveBeenCalledTimes(2);
+      (0, _globals.expect)(onSizeChange).toHaveBeenCalledTimes(0);
+      (0, _globals.expect)(onExtChange).toHaveBeenCalledWith({
+        fieldPaths: ['obj', 'file', 'ext'],
+        newEntity: {},
+        oldEntity: {
+          obj: {
+            file: {
+              ext: EXT_1
+            }
+          }
+        },
+        newValue: void 0,
+        oldValue: EXT_1
+      });
     });
   });
 });