react-native-reanimated-carousel 5.0.0-beta.7 → 5.0.0

package/src/hooks/useLayoutConfig.test.tsx

@@ -1,247 +0,0 @@
-import React from "react";
-import { View } from "react-native";
-
-import { renderHook } from "@testing-library/react-hooks";
-
-import { useLayoutConfig } from "./useLayoutConfig";
-
-describe("useLayoutConfig", () => {
-  const defaultProps = {
-    size: 300,
-    vertical: false,
-  };
-  it("should return normal layout by default", () => {
-    const { result } = renderHook(() =>
-      useLayoutConfig({
-        ...defaultProps,
-        data: [],
-        renderItem: () => <View />,
-        loop: false,
-        autoFillData: false,
-        defaultIndex: 0,
-        autoPlayInterval: 0,
-        scrollAnimationDuration: 0,
-        width: 0,
-        height: 0,
-        rawData: [],
-        dataLength: 0,
-        rawDataLength: 0,
-      })
-    );
-
-    expect(result.current).toBeDefined();
-    expect(typeof result.current).toBe("function");
-  });
-
-  it("should handle parallax mode", () => {
-    const props = {
-      ...defaultProps,
-      mode: "parallax" as const,
-      modeConfig: {
-        parallaxScrollingScale: 0.9,
-        parallaxScrollingOffset: 50,
-        parallaxAdjacentItemScale: 0.8,
-      },
-    };
-
-    const { result } = renderHook(() =>
-      useLayoutConfig({
-        ...props,
-        data: [],
-        renderItem: () => <View />,
-        loop: false,
-        autoFillData: false,
-        defaultIndex: 0,
-        autoPlayInterval: 0,
-        scrollAnimationDuration: 0,
-        width: 0,
-        height: 0,
-        rawData: [],
-        dataLength: 0,
-        rawDataLength: 0,
-      })
-    );
-    const style = result.current(0); // Test with offset 0
-
-    expect(style.transform).toBeDefined();
-    expect(style.transform).toContainEqual({ translateX: 0 });
-    expect(style.transform).toContainEqual({ scale: 0.9 });
-  });
-
-  it("should handle horizontal-stack mode", () => {
-    const props = {
-      ...defaultProps,
-      mode: "horizontal-stack" as const,
-      modeConfig: {
-        snapDirection: "left" as const,
-        showLength: 3,
-      },
-    };
-
-    const { result } = renderHook(() =>
-      useLayoutConfig({
-        ...props,
-        data: [],
-        renderItem: () => <View />,
-        loop: false,
-        autoFillData: false,
-        defaultIndex: 0,
-        autoPlayInterval: 0,
-        scrollAnimationDuration: 0,
-        width: 0,
-        height: 0,
-        rawData: [],
-        dataLength: 0,
-        rawDataLength: 0,
-      })
-    );
-    const style = result.current(0); // Test with offset 0
-
-    expect(style.transform).toBeDefined();
-    expect(style.zIndex).toBeDefined();
-    expect(style.opacity).toBeDefined();
-  });
-
-  it("should handle vertical-stack mode", () => {
-    const props = {
-      ...defaultProps,
-      mode: "vertical-stack" as const,
-      modeConfig: {
-        snapDirection: "left" as const,
-        showLength: 3,
-      },
-    };
-
-    const { result } = renderHook(() =>
-      useLayoutConfig({
-        ...props,
-        data: [],
-        renderItem: () => <View />,
-        loop: false,
-        autoFillData: false,
-        defaultIndex: 0,
-        autoPlayInterval: 0,
-        scrollAnimationDuration: 0,
-        width: 0,
-        height: 0,
-        rawData: [],
-        dataLength: 0,
-        rawDataLength: 0,
-      })
-    );
-    const style = result.current(0); // Test with offset 0
-
-    expect(style.transform).toBeDefined();
-    expect(style.zIndex).toBeDefined();
-    expect(style.opacity).toBeDefined();
-  });
-
-  it("should handle vertical orientation", () => {
-    const props = {
-      ...defaultProps,
-      vertical: true,
-    };
-
-    const { result } = renderHook(() =>
-      useLayoutConfig({
-        ...props,
-        data: [],
-        renderItem: () => <View />,
-        loop: false,
-        autoFillData: false,
-        defaultIndex: 0,
-        autoPlayInterval: 0,
-        scrollAnimationDuration: 0,
-        width: 0,
-        height: 0,
-        rawData: [],
-        dataLength: 0,
-        rawDataLength: 0,
-      })
-    );
-    const style = result.current(0); // Test with offset 0
-
-    expect(style.transform).toBeDefined();
-    expect(style.transform).toContainEqual({ translateY: 0 });
-  });
-
-  it("should handle different offsets", () => {
-    const { result } = renderHook(() =>
-      useLayoutConfig({
-        ...defaultProps,
-        data: [],
-        renderItem: () => <View />,
-        loop: false,
-        autoFillData: false,
-        defaultIndex: 0,
-        autoPlayInterval: 0,
-        scrollAnimationDuration: 0,
-        width: 0,
-        height: 0,
-        rawData: [],
-        dataLength: 0,
-        rawDataLength: 0,
-      })
-    );
-
-    const style1 = result.current(-1); // Previous item
-    const style2 = result.current(0); // Current item
-    const style3 = result.current(1); // Next item
-
-    expect(style1.transform).toContainEqual({ translateX: -300 });
-    expect(style2.transform).toContainEqual({ translateX: 0 });
-    expect(style3.transform).toContainEqual({ translateX: 300 });
-  });
-
-  it("should memoize layout function", () => {
-    const { result, rerender } = renderHook(() =>
-      useLayoutConfig({
-        ...defaultProps,
-        data: [],
-        renderItem: () => <View />,
-        loop: false,
-        autoFillData: false,
-        defaultIndex: 0,
-        autoPlayInterval: 0,
-        scrollAnimationDuration: 0,
-        width: 0,
-        height: 0,
-        rawData: [],
-        dataLength: 0,
-        rawDataLength: 0,
-      })
-    );
-    const firstResult = result.current;
-
-    rerender();
-    expect(result.current).toBe(firstResult);
-  });
-
-  it("should update layout when props change", () => {
-    const { result, rerender } = renderHook(
-      (props) =>
-        useLayoutConfig({
-          ...props,
-          data: [],
-          renderItem: () => <View />,
-          loop: false,
-          autoFillData: false,
-          defaultIndex: 0,
-          autoPlayInterval: 0,
-          scrollAnimationDuration: 0,
-          width: 0,
-          height: 0,
-          rawData: [],
-          dataLength: 0,
-          rawDataLength: 0,
-        }),
-      {
-        initialProps: defaultProps,
-      }
-    );
-    const firstResult = result.current;
-
-    rerender({ ...defaultProps, size: 400 });
-    expect(result.current).not.toBe(firstResult);
-  });
-});

package/src/hooks/useOffsetX.test.ts

@@ -1,54 +0,0 @@
-import { useSharedValue } from "react-native-reanimated";
-
-import { renderHook } from "@testing-library/react-hooks";
-
-import type { IOpts } from "./useOffsetX";
-import { useOffsetX } from "./useOffsetX";
-import type { IVisibleRanges } from "./useVisibleRanges";
-
-describe("useSharedValue", () => {
-  it("should return the correct values", async () => {
-    const hook = renderHook(() => {
-      const range = useSharedValue({
-        negativeRange: [7, 9],
-        positiveRange: [0, 3],
-      }) as IVisibleRanges;
-      const inputs: Array<{
-        config: IOpts;
-        range: IVisibleRanges;
-      }> = Array.from({ length: 10 }).map((_, index) => ({
-        config: {
-          dataLength: 10,
-          handlerOffset: useSharedValue(-0),
-          index,
-          loop: false,
-          size: 393,
-        },
-        range,
-      }));
-
-      return inputs.map((input) => {
-        const { config, range } = input;
-
-        return useOffsetX(config, range);
-      });
-    });
-
-    const expected = hook.result.current.map((v) => v.value).slice();
-
-    expect(expected).toMatchInlineSnapshot(`
-            [
-              0,
-              393,
-              786,
-              1179,
-              9007199254740991,
-              9007199254740991,
-              9007199254740991,
-              2751,
-              3144,
-              3537,
-            ]
-        `);
-  });
-});

package/src/hooks/useOnProgressChange.test.tsx

@@ -1,270 +0,0 @@
-import { useSharedValue } from "react-native-reanimated";
-
-import { renderHook } from "@testing-library/react-hooks";
-
-import { useOnProgressChange } from "./useOnProgressChange";
-
-// Mock Reanimated and Easing
-jest.mock("react-native-reanimated", () => {
-  const React = jest.requireActual("react");
-  let reactionCallback: ((value: any) => void) | null = null;
-  let reactionRegistrationCount = 0;
-
-  return {
-    useSharedValue: jest.fn((initialValue) => ({
-      value: initialValue,
-    })),
-    useAnimatedReaction: jest.fn((prepare, react, dependencies) => {
-      React.useEffect(() => {
-        reactionRegistrationCount += 1;
-        reactionCallback = react;
-        react(prepare());
-        return () => {
-          if (reactionCallback === react) reactionCallback = null;
-        };
-      }, dependencies);
-    }),
-    Easing: {
-      bezier: () => ({
-        factory: () => 0,
-      }),
-    },
-    // Export the helper function for testing
-    __triggerReaction: (value: any) => {
-      if (reactionCallback) reactionCallback(value);
-    },
-    __getReactionRegistrationCount: () => reactionRegistrationCount,
-    __resetReactionRegistrationCount: () => {
-      reactionRegistrationCount = 0;
-    },
-  };
-});
-
-jest.mock("react-native-worklets", () => {
-  const mockScheduleOnRN = jest.fn((fn, ...args) => fn(...args));
-  return {
-    scheduleOnRN: mockScheduleOnRN,
-    mockScheduleOnRN,
-  };
-});
-
-// Mock computedOffsetXValueWithAutoFillData
-jest.mock("../utils/computed-with-auto-fill-data", () => ({
-  computedOffsetXValueWithAutoFillData: jest.fn(({ value }) => value),
-}));
-
-describe("useOnProgressChange", () => {
-  const mockOffsetX = useSharedValue(0);
-  const mockSizeReady = useSharedValue(true);
-  const mockOnProgressChange = jest.fn();
-  const { __getReactionRegistrationCount, __resetReactionRegistrationCount, __triggerReaction } =
-    jest.requireMock("react-native-reanimated");
-
-  beforeEach(() => {
-    jest.clearAllMocks();
-    __resetReactionRegistrationCount();
-    mockOffsetX.value = 0;
-    mockSizeReady.value = true;
-  });
-
-  it("should handle progress change with function callback", () => {
-    renderHook(() =>
-      useOnProgressChange({
-        size: 300,
-        sizeReady: mockSizeReady,
-        autoFillData: false,
-        loop: false,
-        offsetX: mockOffsetX,
-        rawDataLength: 5,
-        onProgressChange: mockOnProgressChange,
-      })
-    );
-
-    mockOffsetX.value = -300; // Move to next slide
-    __triggerReaction({ offset: mockOffsetX.value, ready: mockSizeReady.value });
-    expect(mockOnProgressChange).toHaveBeenCalledWith(-300, 1);
-  });
-
-  it("should handle progress change with shared value", () => {
-    const progressValue = useSharedValue(0);
-    renderHook(() =>
-      useOnProgressChange({
-        size: 300,
-        sizeReady: mockSizeReady,
-        autoFillData: false,
-        loop: false,
-        offsetX: mockOffsetX,
-        rawDataLength: 5,
-        onProgressChange: progressValue,
-      })
-    );
-
-    mockOffsetX.value = -300; // Move to next slide
-    __triggerReaction({ offset: mockOffsetX.value, ready: mockSizeReady.value });
-    expect(progressValue.value).toBe(1);
-  });
-
-  it("should handle loop mode", () => {
-    renderHook(() =>
-      useOnProgressChange({
-        size: 300,
-        sizeReady: mockSizeReady,
-        autoFillData: false,
-        loop: true,
-        offsetX: mockOffsetX,
-        rawDataLength: 5,
-        onProgressChange: mockOnProgressChange,
-      })
-    );
-
-    mockOffsetX.value = -1500; // Move to last slide
-    __triggerReaction({ offset: mockOffsetX.value, ready: mockSizeReady.value });
-    expect(mockOnProgressChange).toHaveBeenCalledWith(-1500, 5);
-  });
-
-  it("should handle autoFillData mode", () => {
-    renderHook(() =>
-      useOnProgressChange({
-        size: 300,
-        sizeReady: mockSizeReady,
-        autoFillData: true,
-        loop: false,
-        offsetX: mockOffsetX,
-        rawDataLength: 3,
-        onProgressChange: mockOnProgressChange,
-      })
-    );
-
-    mockOffsetX.value = -300; // Move to next slide
-    __triggerReaction({ offset: mockOffsetX.value, ready: mockSizeReady.value });
-    expect(mockOnProgressChange).toHaveBeenCalledWith(-300, 1);
-  });
-
-  it("should clamp values when not in loop mode", () => {
-    renderHook(() =>
-      useOnProgressChange({
-        size: 300,
-        sizeReady: mockSizeReady,
-        autoFillData: false,
-        loop: false,
-        offsetX: mockOffsetX,
-        rawDataLength: 3,
-        onProgressChange: mockOnProgressChange,
-      })
-    );
-
-    mockOffsetX.value = 300; // Try to move before first slide
-    __triggerReaction({ offset: mockOffsetX.value, ready: mockSizeReady.value });
-    expect(mockOnProgressChange).toHaveBeenCalledWith(0, 0);
-
-    mockOffsetX.value = -900; // Try to move after last slide
-    __triggerReaction({ offset: mockOffsetX.value, ready: mockSizeReady.value });
-    expect(mockOnProgressChange).toHaveBeenCalledWith(-600, 2);
-  });
-
-  it("should handle positive offset values", () => {
-    renderHook(() =>
-      useOnProgressChange({
-        size: 300,
-        sizeReady: mockSizeReady,
-        autoFillData: false,
-        loop: true,
-        offsetX: mockOffsetX,
-        rawDataLength: 5,
-        onProgressChange: mockOnProgressChange,
-      })
-    );
-
-    mockOffsetX.value = 300; // Move backwards
-    __triggerReaction({ offset: mockOffsetX.value, ready: mockSizeReady.value });
-    expect(mockOnProgressChange).toHaveBeenCalledWith(300, 4);
-  });
-
-  it("should not call onProgressChange if not provided", () => {
-    renderHook(() =>
-      useOnProgressChange({
-        size: 300,
-        sizeReady: mockSizeReady,
-        autoFillData: false,
-        loop: false,
-        offsetX: mockOffsetX,
-        rawDataLength: 5,
-      })
-    );
-
-    mockOffsetX.value = -300; // Move to next slide
-    __triggerReaction({ offset: mockOffsetX.value, ready: mockSizeReady.value });
-    // Should not throw any errors or call any callbacks
-  });
-
-  it("should not trigger progress change when size is not ready", () => {
-    const mockSizeNotReady = useSharedValue(false);
-    renderHook(() =>
-      useOnProgressChange({
-        size: 300,
-        sizeReady: mockSizeNotReady,
-        autoFillData: false,
-        loop: false,
-        offsetX: mockOffsetX,
-        rawDataLength: 5,
-        onProgressChange: mockOnProgressChange,
-      })
-    );
-
-    mockOffsetX.value = -300; // Move to next slide
-    __triggerReaction({ offset: mockOffsetX.value, ready: mockSizeNotReady.value });
-    expect(mockOnProgressChange).not.toHaveBeenCalled();
-  });
-
-  it("should re-register the reaction when the offset shared value changes", () => {
-    const replacementOffsetX = useSharedValue(-300);
-    const { rerender } = renderHook(
-      ({ offsetX }) =>
-        useOnProgressChange({
-          size: 300,
-          sizeReady: mockSizeReady,
-          autoFillData: false,
-          loop: false,
-          offsetX,
-          rawDataLength: 5,
-          onProgressChange: mockOnProgressChange,
-        }),
-      { initialProps: { offsetX: mockOffsetX } }
-    );
-
-    const initialRegistrationCount = __getReactionRegistrationCount();
-    rerender({ offsetX: mockOffsetX });
-    expect(__getReactionRegistrationCount()).toBe(initialRegistrationCount);
-
-    rerender({ offsetX: replacementOffsetX });
-
-    expect(__getReactionRegistrationCount()).toBe(initialRegistrationCount + 1);
-    expect(mockOnProgressChange).toHaveBeenLastCalledWith(-300, 1);
-  });
-
-  it("should re-register the reaction when the size-ready shared value changes", () => {
-    const initialSizeReady = useSharedValue(false);
-    const replacementSizeReady = useSharedValue(true);
-    const { rerender } = renderHook(
-      ({ sizeReady }) =>
-        useOnProgressChange({
-          size: 300,
-          sizeReady,
-          autoFillData: false,
-          loop: false,
-          offsetX: mockOffsetX,
-          rawDataLength: 5,
-          onProgressChange: mockOnProgressChange,
-        }),
-      { initialProps: { sizeReady: initialSizeReady } }
-    );
-
-    const initialRegistrationCount = __getReactionRegistrationCount();
-    expect(mockOnProgressChange).not.toHaveBeenCalled();
-
-    rerender({ sizeReady: replacementSizeReady });
-
-    expect(__getReactionRegistrationCount()).toBe(initialRegistrationCount + 1);
-    expect(mockOnProgressChange).toHaveBeenCalledWith(0, 0);
-  });
-});