react-native-reanimated-carousel/lib/module/layouts/stack.test.js

Simple carousel component.fully implemented using Reanimated 2.Infinitely scrolling, very smooth.

import { horizontalStackLayout, useHorizontalStackLayout, verticalStackLayout } from "./stack"; // 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"
  }
})); // Mock react

jest.mock("react", () => ({
  useMemo: jest.fn(fn => fn())
})); // Mock Dimensions

jest.mock("react-native", () => ({
  Dimensions: {
    get: jest.fn(() => ({
      width: 375,
      height: 812
    }))
  }
}));
describe("horizontalStackLayout", () => {
  it("should make the rotateZDeg works properly when it is passed in horizontal-stack mode through modeConfig", () => {
    const screenWidth = 375;
    const calculator = horizontalStackLayout({
      showLength: 3,
      snapDirection: "left",
      moveSize: screenWidth,
      stackInterval: 18,
      scaleInterval: 0.04,
      opacityInterval: 0.1,
      rotateZDeg: 30
    });
    const result1 = calculator(-0.5);
    expect(result1).toHaveProperty("transform");
    expect(result1).toHaveProperty("zIndex");
    expect(result1).toHaveProperty("opacity");
    expect(result1.transform).toHaveLength(3);
    const result2 = calculator(-1);
    expect(result2).toHaveProperty("transform");
    expect(result2).toHaveProperty("zIndex");
    expect(result2).toHaveProperty("opacity");
    expect(result2.transform).toHaveLength(3);
  });
  it("should handle right snap direction", () => {
    const calculator = horizontalStackLayout({
      showLength: 3,
      snapDirection: "right",
      moveSize: 375,
      stackInterval: 18,
      scaleInterval: 0.04,
      opacityInterval: 0.1,
      rotateZDeg: 30
    });
    const result = calculator(0);
    expect(result).toHaveProperty("transform");
    expect(result).toHaveProperty("zIndex");
    expect(result).toHaveProperty("opacity");
    expect(result.transform).toHaveLength(3);
  });
  it("should handle default config", () => {
    const calculator = horizontalStackLayout();
    const result = calculator(0);
    expect(result).toHaveProperty("transform");
    expect(result).toHaveProperty("zIndex");
    expect(result).toHaveProperty("opacity");
  });
  it("should handle edge values", () => {
    const calculator = horizontalStackLayout({
      showLength: 5,
      snapDirection: "left"
    });
    const extremeLeftResult = calculator(-2);
    const extremeRightResult = calculator(4);
    expect(extremeLeftResult).toHaveProperty("transform");
    expect(extremeRightResult).toHaveProperty("transform");
  });
  it("should handle custom parameters", () => {
    var _result$transform;

    const calculator = horizontalStackLayout({
      showLength: 4,
      snapDirection: "right",
      moveSize: 400,
      stackInterval: 25,
      scaleInterval: 0.06,
      opacityInterval: 0.15,
      rotateZDeg: 45
    });
    const result = calculator(1);
    expect(result).toHaveProperty("transform");
    expect(result.transform).toHaveLength(3);
    expect((_result$transform = result.transform) === null || _result$transform === void 0 ? void 0 : _result$transform[2]).toHaveProperty("rotateZ");
  });
});
describe("verticalStackLayout", () => {
  it("should handle left snap direction", () => {
    var _result$transform2;

    const calculator = verticalStackLayout({
      showLength: 3,
      snapDirection: "left",
      moveSize: 375,
      stackInterval: 18,
      scaleInterval: 0.04,
      opacityInterval: 0.1,
      rotateZDeg: 30
    });
    const result = calculator(0);
    expect(result).toHaveProperty("transform");
    expect(result).toHaveProperty("zIndex");
    expect(result).toHaveProperty("opacity");
    expect(result.transform).toHaveLength(4); // includesTranslateY

    expect((_result$transform2 = result.transform) === null || _result$transform2 === void 0 ? void 0 : _result$transform2[3]).toHaveProperty("translateY");
  });
  it("should handle right snap direction", () => {
    var _result$transform3;

    const calculator = verticalStackLayout({
      showLength: 3,
      snapDirection: "right",
      moveSize: 375,
      stackInterval: 18,
      scaleInterval: 0.04,
      opacityInterval: 0.1,
      rotateZDeg: 30
    });
    const result = calculator(0);
    expect(result).toHaveProperty("transform");
    expect(result.transform).toHaveLength(4);
    expect((_result$transform3 = result.transform) === null || _result$transform3 === void 0 ? void 0 : _result$transform3[3]).toHaveProperty("translateY");
  });
  it("should handle default config", () => {
    const calculator = verticalStackLayout();
    const result = calculator(0);
    expect(result).toHaveProperty("transform");
    expect(result).toHaveProperty("zIndex");
    expect(result).toHaveProperty("opacity");
    expect(result.transform).toHaveLength(4);
  });
  it("should handle different values", () => {
    const calculator = verticalStackLayout({
      showLength: 4,
      snapDirection: "left"
    });
    const leftResult = calculator(-1);
    const centerResult = calculator(0);
    const rightResult = calculator(1);
    expect(leftResult).toHaveProperty("transform");
    expect(centerResult).toHaveProperty("transform");
    expect(rightResult).toHaveProperty("transform");
  });
  it("should handle fractional values", () => {
    const calculator = verticalStackLayout({
      showLength: 3,
      snapDirection: "right"
    });
    const result = calculator(0.5);
    expect(result).toHaveProperty("transform");
    expect(result.transform).toHaveLength(4);
  });
});
describe("useHorizontalStackLayout", () => {
  it("should return layout and config for left snap direction", () => {
    const customAnimationConfig = {
      snapDirection: "left",
      showLength: 3
    };
    const result = useHorizontalStackLayout(customAnimationConfig);
    expect(result).toHaveProperty("layout");
    expect(result).toHaveProperty("config");
    expect(typeof result.layout).toBe("function");
    expect(result.config.type).toBe("positive");
    expect(result.config.viewCount).toBe(3);
  });
  it("should return layout and config for right snap direction", () => {
    const customAnimationConfig = {
      snapDirection: "right",
      showLength: 4
    };
    const result = useHorizontalStackLayout(customAnimationConfig);
    expect(result).toHaveProperty("layout");
    expect(result).toHaveProperty("config");
    expect(result.config.type).toBe("negative");
    expect(result.config.viewCount).toBe(4);
  });
  it("should handle default config", () => {
    const result = useHorizontalStackLayout();
    expect(result).toHaveProperty("layout");
    expect(result).toHaveProperty("config");
    expect(typeof result.layout).toBe("function");
    expect(result.config.type).toBe("positive"); // Default snapDirection is "left"
  });
  it("should handle empty custom config", () => {
    const result = useHorizontalStackLayout({}, {});
    expect(result).toHaveProperty("layout");
    expect(result).toHaveProperty("config");
  });
  it("should merge custom config correctly", () => {
    const customAnimationConfig = {
      snapDirection: "right",
      showLength: 2
    };
    const result = useHorizontalStackLayout(customAnimationConfig);
    expect(result.config.type).toBe("negative");
    expect(result.config.viewCount).toBe(2);
  });
});
//# sourceMappingURL=stack.test.js.map