react-native-reanimated-carousel 4.0.2 → 4.0.3

package/src/hooks/useCommonVariables.test.tsx

@@ -1,6 +1,7 @@
 import { renderHook } from "@testing-library/react-hooks";
 
 import { useCommonVariables } from "./useCommonVariables";
+import { TInitializeCarouselProps } from "./useInitProps";
 
 type UseCommonVariablesInput = Parameters<typeof useCommonVariables>[0];
 
@@ -17,6 +18,7 @@ const input = {
   autoPlay: false,
   autoPlayInterval: 2000,
   data: [0, 1, 2, 3],
+  renderItem: () => null,
   pagingEnabled: true,
   defaultIndex: 0,
   autoFillData: true,
@@ -36,4 +38,192 @@ describe("useCommonVariables", () => {
     expect(hook.result.current.validLength).toMatchInlineSnapshot("3");
     expect(hook.result.current.handlerOffset.value).toMatchInlineSnapshot("-0");
   });
+
+  it("should handle vertical orientation", () => {
+    const verticalInput = {
+      ...input,
+      vertical: true,
+    } as TInitializeCarouselProps<any>;
+
+    const hook = renderHook(() => useCommonVariables(verticalInput));
+
+    expect(hook.result.current.size).toBe(350); // Should use height instead of width
+    expect(hook.result.current.validLength).toBe(3);
+  });
+
+  it("should calculate defaultHandlerOffsetValue correctly with non-zero defaultIndex", () => {
+    const inputWithDefaultIndex = {
+      ...input,
+      defaultIndex: 2,
+    };
+
+    const hook = renderHook(() => useCommonVariables(inputWithDefaultIndex));
+
+    expect(hook.result.current.handlerOffset.value).toBe(-1400); // -2 * 700
+  });
+
+  it("should use custom defaultScrollOffsetValue when provided", () => {
+    const customOffset = {
+      value: -500,
+      addListener: jest.fn(),
+      removeListener: jest.fn(),
+      modify: jest.fn(),
+    };
+    const inputWithCustomOffset = {
+      ...input,
+      defaultScrollOffsetValue: customOffset,
+    };
+
+    const hook = renderHook(() => useCommonVariables(inputWithCustomOffset));
+
+    expect(hook.result.current.handlerOffset).toBe(customOffset);
+    expect(hook.result.current.handlerOffset.value).toBe(-500);
+  });
+
+  it("should handle single data item", () => {
+    const singleItemInput = {
+      ...input,
+      dataLength: 1,
+      data: [0],
+    };
+
+    const hook = renderHook(() => useCommonVariables(singleItemInput));
+
+    expect(hook.result.current.validLength).toBe(0); // dataLength - 1
+  });
+
+  it("should handle zero dataLength", () => {
+    const emptyInput = {
+      ...input,
+      dataLength: 0,
+      data: [],
+    };
+
+    const hook = renderHook(() => useCommonVariables(emptyInput));
+
+    expect(hook.result.current.validLength).toBe(-1); // dataLength - 1
+  });
+
+  it("should handle negative defaultIndex", () => {
+    const negativeIndexInput = {
+      ...input,
+      defaultIndex: -1,
+    };
+
+    const hook = renderHook(() => useCommonVariables(negativeIndexInput));
+
+    expect(hook.result.current.handlerOffset.value).toBe(-700); // -Math.abs(-1 * 700)
+  });
+
+  it("should handle loop disabled", () => {
+    const noLoopInput = {
+      ...input,
+      loop: false,
+    };
+
+    const hook = renderHook(() => useCommonVariables(noLoopInput));
+
+    expect(hook.result.current.size).toBe(700);
+    expect(hook.result.current.validLength).toBe(3);
+  });
+
+  it("should update when props change", () => {
+    const hook = renderHook(({ props }) => useCommonVariables(props), {
+      initialProps: { props: input },
+    });
+
+    expect(hook.result.current.size).toBe(700);
+
+    // Update width
+    const updatedInput = {
+      ...input,
+      width: 800,
+    };
+
+    hook.rerender({ props: updatedInput });
+    expect(hook.result.current.size).toBe(800);
+  });
+
+  it("should handle dataLength changes", () => {
+    const hook = renderHook(({ props }) => useCommonVariables(props), {
+      initialProps: { props: input },
+    });
+
+    expect(hook.result.current.validLength).toBe(3);
+
+    // Update dataLength
+    const updatedInput = {
+      ...input,
+      dataLength: 6,
+    };
+
+    hook.rerender({ props: updatedInput });
+    expect(hook.result.current.validLength).toBe(5);
+  });
+
+  it("should handle zero size (edge case)", () => {
+    const zeroSizeInput = {
+      ...input,
+      width: 0,
+    };
+
+    const hook = renderHook(() => useCommonVariables(zeroSizeInput));
+
+    expect(hook.result.current.size).toBe(0);
+    expect(hook.result.current.handlerOffset.value).toBe(-0); // -Math.abs(0 * 0)
+  });
+
+  it("should handle large defaultIndex", () => {
+    const largeIndexInput = {
+      ...input,
+      defaultIndex: 10,
+    };
+
+    const hook = renderHook(() => useCommonVariables(largeIndexInput));
+
+    expect(hook.result.current.handlerOffset.value).toBe(-7000); // -Math.abs(10 * 700)
+  });
+
+  it("should handle vertical with zero height", () => {
+    const verticalZeroHeightInput = {
+      ...input,
+      vertical: true,
+      height: 0,
+    } as TInitializeCarouselProps<any>;
+
+    const hook = renderHook(() => useCommonVariables(verticalZeroHeightInput));
+
+    expect(hook.result.current.size).toBe(0);
+  });
+
+  it("should handle floating point dimensions", () => {
+    const floatInput = {
+      ...input,
+      width: 700.5,
+      height: 350.25,
+    };
+
+    const hook = renderHook(() => useCommonVariables(floatInput));
+
+    expect(hook.result.current.size).toBe(700.5);
+  });
+
+  it("should calculate validLength correctly for different data lengths", () => {
+    const testCases = [
+      { dataLength: 0, expected: -1 },
+      { dataLength: 1, expected: 0 },
+      { dataLength: 5, expected: 4 },
+      { dataLength: 100, expected: 99 },
+    ];
+
+    for (const { dataLength, expected } of testCases) {
+      const testInput = {
+        ...input,
+        dataLength,
+      };
+
+      const hook = renderHook(() => useCommonVariables(testInput));
+      expect(hook.result.current.validLength).toBe(expected);
+    }
+  });
 });

package/src/layouts/parallax.test.ts

@@ -0,0 +1,239 @@
+import { parallaxLayout } from "./parallax";
+
+// Mock react-native-reanimated
+jest.mock("react-native-reanimated", () => ({
+  interpolate: jest.fn((value, inputRange, outputRange) => {
+    // Simple linear interpolation mock for testing
+    const inputMin = inputRange[0];
+    const inputMax = inputRange[inputRange.length - 1];
+    const outputMin = outputRange[0];
+    const outputMax = outputRange[outputRange.length - 1];
+
+    if (value <= inputMin) return outputMin;
+    if (value >= inputMax) return outputMax;
+
+    // Linear interpolation
+    const progress = (value - inputMin) / (inputMax - inputMin);
+    return outputMin + progress * (outputMax - outputMin);
+  }),
+  Extrapolation: {
+    CLAMP: "clamp",
+  },
+}));
+
+describe("parallaxLayout", () => {
+  const baseConfig = {
+    size: 300,
+    vertical: false,
+  };
+
+  it("should create layout function with default config", () => {
+    const layout = parallaxLayout(baseConfig);
+    expect(typeof layout).toBe("function");
+  });
+
+  it("should return transform object for horizontal layout", () => {
+    const layout = parallaxLayout(baseConfig);
+    const result = layout(0);
+
+    expect(result).toHaveProperty("transform");
+    expect(result).toHaveProperty("zIndex");
+    expect(result.transform).toHaveLength(2);
+    expect(result.transform[0]).toHaveProperty("translateX");
+    expect(result.transform[1]).toHaveProperty("scale");
+  });
+
+  it("should return transform object for vertical layout", () => {
+    const verticalConfig = { ...baseConfig, vertical: true };
+    const layout = parallaxLayout(verticalConfig);
+    const result = layout(0);
+
+    expect(result).toHaveProperty("transform");
+    expect(result).toHaveProperty("zIndex");
+    expect(result.transform).toHaveLength(2);
+    expect(result.transform[0]).toHaveProperty("translateY");
+    expect(result.transform[1]).toHaveProperty("scale");
+  });
+
+  it("should handle center position (value = 0)", () => {
+    const layout = parallaxLayout(baseConfig);
+    const result = layout(0);
+
+    // At center position, translateX should be 0
+    expect(result.transform[0].translateX).toBe(0);
+    // Scale should be a number (parallax logic applied)
+    expect(typeof result.transform[1].scale).toBe("number");
+  });
+
+  it("should handle left position (value = -1)", () => {
+    const layout = parallaxLayout(baseConfig);
+    const result = layout(-1);
+
+    // At left position, translateX should be -size + parallaxScrollingOffset
+    expect(result.transform[0].translateX).toBe(-200); // -300 + 100
+    // Scale should be a number
+    expect(typeof result.transform[1].scale).toBe("number");
+  });
+
+  it("should handle right position (value = 1)", () => {
+    const layout = parallaxLayout(baseConfig);
+    const result = layout(1);
+
+    // At right position, translateX should be size - parallaxScrollingOffset
+    expect(result.transform[0].translateX).toBe(200); // 300 - 100
+    // Scale should be a number
+    expect(typeof result.transform[1].scale).toBe("number");
+  });
+
+  it("should handle custom parallaxScrollingOffset", () => {
+    const modeConfig = { parallaxScrollingOffset: 50 };
+    const layout = parallaxLayout(baseConfig, modeConfig);
+
+    const leftResult = layout(-1);
+    const rightResult = layout(1);
+
+    expect(leftResult.transform[0].translateX).toBe(-250); // -300 + 50
+    expect(rightResult.transform[0].translateX).toBe(250); // 300 - 50
+  });
+
+  it("should handle custom parallaxScrollingScale", () => {
+    const modeConfig = { parallaxScrollingScale: 0.9 };
+    const layout = parallaxLayout(baseConfig, modeConfig);
+
+    const centerResult = layout(0);
+    const sideResult = layout(-1);
+
+    // Verify the structure and that scale values are calculated
+    expect(typeof centerResult.transform[1].scale).toBe("number");
+    expect(typeof sideResult.transform[1].scale).toBe("number");
+    expect(centerResult.transform[1].scale).toBeGreaterThan(0);
+    expect(sideResult.transform[1].scale).toBeGreaterThan(0);
+  });
+
+  it("should handle custom parallaxAdjacentItemScale", () => {
+    const modeConfig = {
+      parallaxScrollingScale: 0.9,
+      parallaxAdjacentItemScale: 0.7,
+    };
+    const layout = parallaxLayout(baseConfig, modeConfig);
+
+    const centerResult = layout(0);
+    const sideResult = layout(-1);
+
+    // Verify the structure and that scale values are calculated
+    expect(typeof centerResult.transform[1].scale).toBe("number");
+    expect(typeof sideResult.transform[1].scale).toBe("number");
+    expect(centerResult.transform[1].scale).toBeGreaterThan(0);
+    expect(sideResult.transform[1].scale).toBeGreaterThan(0);
+  });
+
+  it("should handle vertical layout with custom config", () => {
+    const verticalConfig = { ...baseConfig, vertical: true };
+    const modeConfig = { parallaxScrollingOffset: 80 };
+    const layout = parallaxLayout(verticalConfig, modeConfig);
+
+    const leftResult = layout(-1);
+    const centerResult = layout(0);
+    const rightResult = layout(1);
+
+    expect(leftResult.transform[0].translateY).toBe(-220); // -300 + 80
+    expect(centerResult.transform[0].translateY).toBe(0);
+    expect(rightResult.transform[0].translateY).toBe(220); // 300 - 80
+  });
+
+  it("should handle edge case values", () => {
+    const layout = parallaxLayout(baseConfig);
+
+    // Test with values beyond the normal range
+    const farLeftResult = layout(-2);
+    const farRightResult = layout(2);
+
+    expect(typeof farLeftResult.transform[0].translateX).toBe("number");
+    expect(typeof farLeftResult.transform[1].scale).toBe("number");
+    expect(typeof farRightResult.transform[0].translateX).toBe("number");
+    expect(typeof farRightResult.transform[1].scale).toBe("number");
+  });
+
+  it("should handle fractional values", () => {
+    const layout = parallaxLayout(baseConfig);
+
+    const halfwayResult = layout(0.5);
+    const quarterResult = layout(-0.25);
+
+    expect(typeof halfwayResult.transform[0].translateX).toBe("number");
+    expect(typeof halfwayResult.transform[1].scale).toBe("number");
+    expect(typeof quarterResult.transform[0].translateX).toBe("number");
+    expect(typeof quarterResult.transform[1].scale).toBe("number");
+  });
+
+  it("should handle zero size", () => {
+    const zeroSizeConfig = { ...baseConfig, size: 0 };
+    const layout = parallaxLayout(zeroSizeConfig);
+    const result = layout(0);
+
+    expect(result).toHaveProperty("transform");
+    expect(result).toHaveProperty("zIndex");
+  });
+
+  it("should handle negative size", () => {
+    const negativeSizeConfig = { ...baseConfig, size: -100 };
+    const layout = parallaxLayout(negativeSizeConfig);
+    const result = layout(0);
+
+    expect(result).toHaveProperty("transform");
+    expect(result).toHaveProperty("zIndex");
+  });
+
+  it("should handle all config properties at once", () => {
+    const fullModeConfig = {
+      parallaxScrollingOffset: 75,
+      parallaxScrollingScale: 0.85,
+      parallaxAdjacentItemScale: 0.6,
+    };
+    const layout = parallaxLayout(baseConfig, fullModeConfig);
+
+    const centerResult = layout(0);
+    const sideResult = layout(-1);
+
+    // Verify the structure and that values are calculated correctly
+    expect(typeof centerResult.transform[1].scale).toBe("number");
+    expect(typeof sideResult.transform[1].scale).toBe("number");
+    expect(sideResult.transform[0].translateX).toBe(-225); // -300 + 75
+  });
+
+  it("should handle empty mode config", () => {
+    const layout = parallaxLayout(baseConfig, {});
+    const result = layout(0);
+
+    // At center (value = 0), scale should be a number (default parallax behavior)
+    expect(typeof result.transform[1].scale).toBe("number");
+    expect(result.transform[1].scale).toBeGreaterThan(0);
+    expect(result.transform[1].scale).toBeLessThanOrEqual(1);
+  });
+
+  it("should handle undefined mode config", () => {
+    const layout = parallaxLayout(baseConfig, undefined);
+    const result = layout(0);
+
+    // At center (value = 0), scale should be a number (default parallax behavior)
+    expect(typeof result.transform[1].scale).toBe("number");
+    expect(result.transform[1].scale).toBeGreaterThan(0);
+    expect(result.transform[1].scale).toBeLessThanOrEqual(1);
+  });
+
+  it("should maintain consistent zIndex calculation", () => {
+    const layout = parallaxLayout(baseConfig);
+
+    const leftResult = layout(-1);
+    const centerResult = layout(0);
+    const rightResult = layout(1);
+
+    expect(typeof leftResult.zIndex).toBe("number");
+    expect(typeof centerResult.zIndex).toBe("number");
+    expect(typeof rightResult.zIndex).toBe("number");
+
+    // Center should have highest zIndex
+    expect(centerResult.zIndex).toBeGreaterThanOrEqual(leftResult.zIndex);
+    expect(centerResult.zIndex).toBeGreaterThanOrEqual(rightResult.zIndex);
+  });
+});