@mic-rexjs/usecases-react 1.4.0 → 1.5.0

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,10 +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 () {
@@ -484,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 () {
@@ -524,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 () {
@@ -549,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],
@@ -584,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 () {
@@ -596,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],
@@ -612,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 () {
@@ -624,29 +670,29 @@ var useDeepCompareUpdate = function useDeepCompareUpdate(callback, deps) {
   });
   (0, _globals.describe)('`useUseCase` should work with 1+ arguments on non-entity mode', function () {
     (0, _globals.test)('`entity` should equal `defaultFile`', function () {
-      var _renderHook17 = (0, _react.renderHook)(function () {
+      var _renderHook18 = (0, _react.renderHook)(function () {
           return (0, _.useUseCase)(mathUseCase);
         }),
-        result = _renderHook17.result;
+        result = _renderHook18.result;
       var reducers = result.current;
       (0, _globals.expect)(Array.isArray(reducers)).toBe(false);
     });
     (0, _globals.test)('returned reducer should work', function () {
-      var _renderHook18 = (0, _react.renderHook)(function () {
+      var _renderHook19 = (0, _react.renderHook)(function () {
           return (0, _.useUseCase)(mathUseCase);
         }),
-        result = _renderHook18.result;
+        result = _renderHook19.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 _renderHook19 = (0, _react.renderHook)(function () {
+      var _renderHook20 = (0, _react.renderHook)(function () {
           return (0, _.useUseCase)(mathUseCase, {
             extraValue: 5
           });
         }),
-        result = _renderHook19.result;
+        result = _renderHook20.result;
       var reducers = result.current;
       var add = reducers.add;
       (0, _globals.expect)(add(1, 2)).toBe(8);
@@ -654,7 +700,7 @@ var useDeepCompareUpdate = function useDeepCompareUpdate(callback, deps) {
     (0, _globals.test)('when `options` has changed, it should not trigger update', function () {
       var onUpdate = _globals.jest.fn();
       var onDeepUpdate = _globals.jest.fn();
-      var _renderHook20 = (0, _react.renderHook)(function () {
+      var _renderHook21 = (0, _react.renderHook)(function () {
           var _useState7 = (0, _react2.useState)(0),
             _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
             extraValue = _useState8[0],
@@ -670,7 +716,7 @@ var useDeepCompareUpdate = function useDeepCompareUpdate(callback, deps) {
           }, [reducers]);
           return setExtraValue;
         }),
-        result = _renderHook20.result;
+        result = _renderHook21.result;
       (0, _globals.expect)(onUpdate).toHaveBeenCalledTimes(0);
       (0, _globals.expect)(onDeepUpdate).toHaveBeenCalledTimes(0);
       (0, _react.act)(function () {
@@ -682,7 +728,7 @@ var useDeepCompareUpdate = function useDeepCompareUpdate(callback, deps) {
     (0, _globals.test)('when `deps` change, it should update reducers', function () {
       var onUpdate = _globals.jest.fn();
       var onDeepUpdate = _globals.jest.fn();
-      var _renderHook21 = (0, _react.renderHook)(function () {
+      var _renderHook22 = (0, _react.renderHook)(function () {
           var _useState9 = (0, _react2.useState)(0),
             _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
             extraValue = _useState10[0],
@@ -698,7 +744,7 @@ var useDeepCompareUpdate = function useDeepCompareUpdate(callback, deps) {
           }, [reducers]);
           return setExtraValue;
         }),
-        result = _renderHook21.result;
+        result = _renderHook22.result;
       (0, _globals.expect)(onUpdate).toHaveBeenCalledTimes(0);
       (0, _globals.expect)(onDeepUpdate).toHaveBeenCalledTimes(0);
       (0, _react.act)(function () {
@@ -710,7 +756,7 @@ var useDeepCompareUpdate = function useDeepCompareUpdate(callback, deps) {
     (0, _globals.test)('empty `deps` should not update reducers', function () {
       var onUpdate = _globals.jest.fn();
       var onDeepUpdate = _globals.jest.fn();
-      var _renderHook22 = (0, _react.renderHook)(function () {
+      var _renderHook23 = (0, _react.renderHook)(function () {
           var _useState11 = (0, _react2.useState)(0),
             _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
             extraValue = _useState12[0],
@@ -726,7 +772,7 @@ var useDeepCompareUpdate = function useDeepCompareUpdate(callback, deps) {
           }, [reducers]);
           return setExtraValue;
         }),
-        result = _renderHook22.result;
+        result = _renderHook23.result;
       (0, _globals.expect)(onUpdate).toHaveBeenCalledTimes(0);
       (0, _globals.expect)(onDeepUpdate).toHaveBeenCalledTimes(0);
       (0, _react.act)(function () {
@@ -925,24 +971,37 @@ 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.test)('`options.watch` should be trigger in orders', function () {
       var changeTimes = 0;
-      var updateChangeTimes = function updateChangeTimes() {
+      var updateChangeTimes = function updateChangeTimes(e) {
+        void e;
         return ++changeTimes;
       };
       var onChangeA = _globals.jest.fn(updateChangeTimes);
@@ -996,5 +1055,498 @@ var useDeepCompareUpdate = function useDeepCompareUpdate(callback, deps) {
       (0, _globals.expect)(onChangeB).toHaveReturnedWith(1);
       (0, _globals.expect)(onChangeC).toHaveReturnedWith(3);
     });
+    (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 () {
+          return (0, _.useUseCase)({}, fieldPathUseCase, {
+            watch: {
+              'list.ext': onExtChange,
+              'list.size': onSizeChange
+            }
+          });
+        }),
+        result = _renderHook24.result;
+      var cores = result.current;
+      var _cores13 = (0, _slicedToArray2["default"])(cores, 2),
+        setEntity = _cores13[1].setEntity;
+      (0, _react.act)(function () {
+        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.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 () {
+          return (0, _.useUseCase)([], lengthUseCase, {
+            watch: {
+              length: onEntityLengthChange,
+              'list.length': onListLengthChange
+            }
+          });
+        }),
+        result = _renderHook25.result;
+      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 () {
+        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.test)('`options.watch` should work with field path of nested array', function () {
+      var onChange = _globals.jest.fn();
+      var _renderHook26 = (0, _react.renderHook)(function () {
+          return (0, _.useUseCase)({}, fieldPathUseCase, {
+            watch: {
+              'nestedList.size': onChange
+            }
+          });
+        }),
+        result = _renderHook26.result;
+      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 () {
+        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.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
+      });
+    });
   });
 });