@applicaster/zapp-react-native-utils 15.0.0-rc.96 → 15.0.0-rc.98

package/reactHooks/ui/__tests__/useFadeOutWhenBlurred.test.ts

@@ -0,0 +1,580 @@
+import { renderHook, act } from "@testing-library/react-native";
+import { useFadeOutWhenBlurred } from "../index";
+import { Animated } from "react-native";
+
+// Mock React Native Animated
+jest.mock("react-native", () => ({
+  Animated: {
+    Value: jest.fn((value) => ({
+      setValue: jest.fn(),
+      _value: value,
+    })),
+    timing: jest.fn((_value, _config) => ({
+      start: jest.fn(),
+    })),
+  },
+  Easing: {
+    in: jest.fn((fn) => fn),
+    bezier: jest.fn(() => jest.fn()),
+  },
+}));
+
+describe("useFadeOutWhenBlurred", () => {
+  let mockAnimatedValue: any;
+  let mockTiming: jest.Mock;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+
+    mockAnimatedValue = {
+      setValue: jest.fn(),
+      _value: 1,
+    };
+
+    (Animated as any).Value = jest.fn().mockReturnValue(mockAnimatedValue);
+
+    mockTiming = jest.fn(() => ({
+      start: jest.fn(),
+    }));
+
+    (Animated as any).timing = mockTiming;
+  });
+
+  describe("initialization", () => {
+    it("should return opacity, willReceiveFocus, and hasLostFocus", () => {
+      const component = {
+        rules: { fade_out_when_blurred: true },
+      } as any;
+
+      const { result } = renderHook(() => useFadeOutWhenBlurred(component));
+
+      expect(result.current).toHaveProperty("opacity");
+      expect(result.current).toHaveProperty("willReceiveFocus");
+      expect(result.current).toHaveProperty("hasLostFocus");
+    });
+
+    it("should initialize with opacity 1", () => {
+      const component = {
+        rules: { fade_out_when_blurred: true },
+      } as any;
+
+      const { result } = renderHook(() => useFadeOutWhenBlurred(component));
+
+      expect(Animated.Value).toHaveBeenCalledWith(1);
+      expect(result.current.opacity).toBe(mockAnimatedValue);
+    });
+
+    it("should return callback functions", () => {
+      const component = {
+        rules: { fade_out_when_blurred: true },
+      } as any;
+
+      const { result } = renderHook(() => useFadeOutWhenBlurred(component));
+
+      expect(typeof result.current.willReceiveFocus).toBe("function");
+      expect(typeof result.current.hasLostFocus).toBe("function");
+    });
+
+    it("should handle component without fade_out_when_blurred rule", () => {
+      const component = {
+        rules: {},
+      } as any;
+
+      const { result } = renderHook(() => useFadeOutWhenBlurred(component));
+
+      expect(result.current.opacity).toBeDefined();
+      expect(result.current.willReceiveFocus).toBeDefined();
+      expect(result.current.hasLostFocus).toBeDefined();
+    });
+  });
+
+  describe("willReceiveFocus callback", () => {
+    it("should set visible to true when called while not visible", () => {
+      const component = {
+        rules: { fade_out_when_blurred: true },
+      } as any;
+
+      const { result } = renderHook(() => useFadeOutWhenBlurred(component));
+
+      // First lose focus
+      act(() => {
+        result.current.hasLostFocus(null, { value: "down" });
+      });
+
+      // Then receive focus
+      act(() => {
+        result.current.willReceiveFocus();
+      });
+
+      // Animation should be called to fade in
+      expect(mockTiming).toHaveBeenCalledWith(
+        mockAnimatedValue,
+        expect.objectContaining({
+          toValue: 1,
+        })
+      );
+    });
+
+    it("should not change visible state when already visible", () => {
+      const component = {
+        rules: { fade_out_when_blurred: true },
+      } as any;
+
+      const { result } = renderHook(() => useFadeOutWhenBlurred(component));
+
+      const initialCallCount = mockTiming.mock.calls.length;
+
+      act(() => {
+        result.current.willReceiveFocus();
+      });
+
+      // Should not trigger animation if already visible
+      expect(mockTiming.mock.calls.length).toBe(initialCallCount);
+    });
+
+    it("should be memoized", () => {
+      const component = {
+        rules: { fade_out_when_blurred: true },
+      } as any;
+
+      const { result, rerender } = renderHook(
+        ({ component }) => useFadeOutWhenBlurred(component),
+        {
+          initialProps: { component },
+        }
+      );
+
+      const firstCallback = result.current.willReceiveFocus;
+
+      rerender({ component });
+
+      const secondCallback = result.current.willReceiveFocus;
+
+      expect(firstCallback).toBe(secondCallback);
+    });
+  });
+
+  describe("hasLostFocus callback", () => {
+    it("should set visible to false when direction is down", () => {
+      const component = {
+        rules: { fade_out_when_blurred: true },
+      } as any;
+
+      const { result } = renderHook(() => useFadeOutWhenBlurred(component));
+
+      act(() => {
+        result.current.hasLostFocus(null, { value: "down" });
+      });
+
+      // Animation should be called to fade out
+      expect(mockTiming).toHaveBeenCalledWith(
+        mockAnimatedValue,
+        expect.objectContaining({
+          toValue: 0,
+        })
+      );
+    });
+
+    it("should not change visible state when direction is not down", () => {
+      const component = {
+        rules: { fade_out_when_blurred: true },
+      } as any;
+
+      const { result } = renderHook(() => useFadeOutWhenBlurred(component));
+
+      const initialCallCount = mockTiming.mock.calls.length;
+
+      act(() => {
+        result.current.hasLostFocus(null, { value: "up" });
+      });
+
+      expect(mockTiming.mock.calls.length).toBe(initialCallCount);
+
+      act(() => {
+        result.current.hasLostFocus(null, { value: "left" });
+      });
+
+      expect(mockTiming.mock.calls.length).toBe(initialCallCount);
+
+      act(() => {
+        result.current.hasLostFocus(null, { value: "right" });
+      });
+
+      expect(mockTiming.mock.calls.length).toBe(initialCallCount);
+    });
+
+    it("should handle missing direction gracefully", () => {
+      const component = {
+        rules: { fade_out_when_blurred: true },
+      } as any;
+
+      const { result } = renderHook(() => useFadeOutWhenBlurred(component));
+
+      expect(() => {
+        act(() => {
+          result.current.hasLostFocus(null, "left" as any);
+        });
+      }).not.toThrow();
+    });
+
+    it("should handle direction without value property", () => {
+      const component = {
+        rules: { fade_out_when_blurred: true },
+      } as any;
+
+      const { result } = renderHook(() => useFadeOutWhenBlurred(component));
+
+      expect(() => {
+        act(() => {
+          result.current.hasLostFocus(null, {} as any);
+        });
+      }).not.toThrow();
+    });
+
+    it("should be memoized", () => {
+      const component = {
+        rules: { fade_out_when_blurred: true },
+      } as any;
+
+      const { result, rerender } = renderHook(
+        ({ component }) => useFadeOutWhenBlurred(component),
+        {
+          initialProps: { component },
+        }
+      );
+
+      const firstCallback = result.current.hasLostFocus;
+
+      rerender({ component });
+
+      const secondCallback = result.current.hasLostFocus;
+
+      expect(firstCallback).toBe(secondCallback);
+    });
+  });
+
+  describe("animation behavior", () => {
+    it("should animate to opacity 0 when losing focus with down direction", () => {
+      const component = {
+        rules: { fade_out_when_blurred: true },
+      } as any;
+
+      const { result } = renderHook(() => useFadeOutWhenBlurred(component));
+
+      act(() => {
+        result.current.hasLostFocus(null, { value: "down" });
+      });
+
+      expect(mockTiming).toHaveBeenCalledWith(
+        mockAnimatedValue,
+        expect.objectContaining({
+          toValue: 0,
+          duration: 300,
+          useNativeDriver: true,
+        })
+      );
+    });
+
+    it("should animate to opacity 1 when receiving focus", () => {
+      const component = {
+        rules: { fade_out_when_blurred: true },
+      } as any;
+
+      const { result } = renderHook(() => useFadeOutWhenBlurred(component));
+
+      // First lose focus
+      act(() => {
+        result.current.hasLostFocus(null, { value: "down" });
+      });
+
+      // Then receive focus
+      act(() => {
+        result.current.willReceiveFocus();
+      });
+
+      expect(mockTiming).toHaveBeenLastCalledWith(
+        mockAnimatedValue,
+        expect.objectContaining({
+          toValue: 1,
+          duration: 300,
+          useNativeDriver: true,
+        })
+      );
+    });
+
+    it("should use custom animation options when provided", () => {
+      const component = {
+        rules: { fade_out_when_blurred: true },
+      } as any;
+
+      const animatedOptions = {
+        duration: 500,
+      };
+
+      const { result } = renderHook(() =>
+        useFadeOutWhenBlurred(component, animatedOptions)
+      );
+
+      act(() => {
+        result.current.hasLostFocus(null, { value: "down" });
+      });
+
+      expect(mockTiming).toHaveBeenCalledWith(
+        mockAnimatedValue,
+        expect.objectContaining({
+          duration: 500,
+        })
+      );
+    });
+
+    it("should not animate when fade_out_when_blurred is false", () => {
+      const component = {
+        rules: { fade_out_when_blurred: false },
+      } as any;
+
+      const { result } = renderHook(() => useFadeOutWhenBlurred(component));
+
+      const initialCallCount = mockTiming.mock.calls.length;
+
+      act(() => {
+        result.current.hasLostFocus(null, { value: "down" });
+      });
+
+      expect(mockTiming.mock.calls.length).toBe(initialCallCount);
+    });
+
+    it("should not animate when fade_out_when_blurred is undefined", () => {
+      const component = {
+        rules: {},
+      } as any;
+
+      const { result } = renderHook(() => useFadeOutWhenBlurred(component));
+
+      const initialCallCount = mockTiming.mock.calls.length;
+
+      act(() => {
+        result.current.hasLostFocus(null, { value: "down" });
+      });
+
+      expect(mockTiming.mock.calls.length).toBe(initialCallCount);
+    });
+
+    it("should start animation", () => {
+      const component = {
+        rules: { fade_out_when_blurred: true },
+      } as any;
+
+      const mockStart = jest.fn();
+
+      mockTiming.mockReturnValue({
+        start: mockStart,
+      });
+
+      const { result } = renderHook(() => useFadeOutWhenBlurred(component));
+
+      act(() => {
+        result.current.hasLostFocus(null, { value: "down" });
+      });
+
+      expect(mockStart).toHaveBeenCalled();
+    });
+  });
+
+  describe("focus state transitions", () => {
+    it("should handle multiple focus/blur cycles", () => {
+      const component = {
+        rules: { fade_out_when_blurred: true },
+      } as any;
+
+      const { result } = renderHook(() => useFadeOutWhenBlurred(component));
+
+      // Blur
+      act(() => {
+        result.current.hasLostFocus(null, { value: "down" });
+      });
+
+      expect(mockTiming).toHaveBeenLastCalledWith(
+        mockAnimatedValue,
+        expect.objectContaining({ toValue: 0 })
+      );
+
+      // Focus
+      act(() => {
+        result.current.willReceiveFocus();
+      });
+
+      expect(mockTiming).toHaveBeenLastCalledWith(
+        mockAnimatedValue,
+        expect.objectContaining({ toValue: 1 })
+      );
+
+      // Blur again
+      act(() => {
+        result.current.hasLostFocus(null, { value: "down" });
+      });
+
+      expect(mockTiming).toHaveBeenLastCalledWith(
+        mockAnimatedValue,
+        expect.objectContaining({ toValue: 0 })
+      );
+    });
+
+    it("should handle rapid focus changes", () => {
+      const component = {
+        rules: { fade_out_when_blurred: true },
+      } as any;
+
+      const { result } = renderHook(() => useFadeOutWhenBlurred(component));
+
+      act(() => {
+        result.current.hasLostFocus(null, { value: "down" });
+        result.current.willReceiveFocus();
+        result.current.hasLostFocus(null, { value: "down" });
+        result.current.willReceiveFocus();
+      });
+
+      // Should handle all transitions
+      expect(mockTiming.mock.calls.length).toBeGreaterThan(0);
+    });
+  });
+
+  describe("edge cases", () => {
+    it("should handle null animatedOptions", () => {
+      const component = {
+        rules: { fade_out_when_blurred: true },
+      } as any;
+
+      const { result } = renderHook(() =>
+        useFadeOutWhenBlurred(component, null as any)
+      );
+
+      act(() => {
+        result.current.hasLostFocus(null, { value: "down" });
+      });
+
+      expect(mockTiming).toHaveBeenCalled();
+    });
+
+    it("should handle empty animatedOptions", () => {
+      const component = {
+        rules: { fade_out_when_blurred: true },
+      } as any;
+
+      const { result } = renderHook(() => useFadeOutWhenBlurred(component, {}));
+
+      act(() => {
+        result.current.hasLostFocus(null, { value: "down" });
+      });
+
+      expect(mockTiming).toHaveBeenCalled();
+    });
+  });
+
+  describe("return value memoization", () => {
+    it("should memoize return object", () => {
+      const component = {
+        rules: { fade_out_when_blurred: true },
+      } as any;
+
+      const { result, rerender } = renderHook(
+        ({ component }) => useFadeOutWhenBlurred(component),
+        {
+          initialProps: { component },
+        }
+      );
+
+      const firstResult = result.current;
+
+      rerender({ component });
+
+      const secondResult = result.current;
+
+      // The return object should be memoized
+      expect(firstResult).toBe(secondResult);
+    });
+
+    it("should keep same opacity reference across rerenders", () => {
+      const component = {
+        rules: { fade_out_when_blurred: true },
+      } as any;
+
+      const { result, rerender } = renderHook(
+        ({ component }) => useFadeOutWhenBlurred(component),
+        {
+          initialProps: { component },
+        }
+      );
+
+      const firstOpacity = result.current.opacity;
+
+      rerender({ component });
+
+      const secondOpacity = result.current.opacity;
+
+      expect(firstOpacity).toBe(secondOpacity);
+    });
+  });
+
+  describe("animation configuration", () => {
+    it("should use bezier easing", () => {
+      const component = {
+        rules: { fade_out_when_blurred: true },
+      } as any;
+
+      const { result } = renderHook(() => useFadeOutWhenBlurred(component));
+
+      act(() => {
+        result.current.hasLostFocus(null, { value: "down" });
+      });
+
+      const animationConfig = mockTiming.mock.calls[0][1];
+      expect(animationConfig.easing).toBeDefined();
+    });
+
+    it("should use native driver", () => {
+      const component = {
+        rules: { fade_out_when_blurred: true },
+      } as any;
+
+      const { result } = renderHook(() => useFadeOutWhenBlurred(component));
+
+      act(() => {
+        result.current.hasLostFocus(null, { value: "down" });
+      });
+
+      expect(mockTiming).toHaveBeenCalledWith(
+        mockAnimatedValue,
+        expect.objectContaining({
+          useNativeDriver: true,
+        })
+      );
+    });
+
+    it("should override animation config with custom options", () => {
+      const component = {
+        rules: { fade_out_when_blurred: true },
+      } as any;
+
+      const customOptions = {
+        duration: 1000,
+        useNativeDriver: false,
+      };
+
+      const { result } = renderHook(() =>
+        useFadeOutWhenBlurred(component, customOptions)
+      );
+
+      act(() => {
+        result.current.hasLostFocus(null, { value: "down" });
+      });
+
+      expect(mockTiming).toHaveBeenCalledWith(
+        mockAnimatedValue,
+        expect.objectContaining({
+          duration: 1000,
+          useNativeDriver: false,
+        })
+      );
+    });
+  });
+});