react-native-reanimated-carousel 5.0.0-beta.6 → 5.0.0-beta.8

package/src/components/LazyView.test.tsx

@@ -1,61 +0,0 @@
-import { render } from "@testing-library/react-native";
-import React from "react";
-import { Text } from "react-native";
-
-import { LazyView } from "./LazyView";
-
-describe("LazyView", () => {
-  it("should render children when shouldUpdate is true", () => {
-    const { getByText } = render(
-      <LazyView shouldUpdate={true}>
-        <Text>Test Child</Text>
-      </LazyView>
-    );
-
-    expect(getByText("Test Child")).toBeTruthy();
-  });
-
-  it("should not render children when shouldUpdate is false", () => {
-    const { queryByText } = render(
-      <LazyView shouldUpdate={false}>
-        <Text>Test Child</Text>
-      </LazyView>
-    );
-
-    expect(queryByText("Test Child")).toBeNull();
-  });
-
-  it("should render empty fragment when shouldUpdate is false", () => {
-    const { toJSON } = render(
-      <LazyView shouldUpdate={false}>
-        <Text>Test Child</Text>
-      </LazyView>
-    );
-
-    expect(toJSON()).toBeNull();
-  });
-
-  it("should handle multiple children when shouldUpdate is true", () => {
-    const { getByText } = render(
-      <LazyView shouldUpdate={true}>
-        <Text>First Child</Text>
-        <Text>Second Child</Text>
-      </LazyView>
-    );
-
-    expect(getByText("First Child")).toBeTruthy();
-    expect(getByText("Second Child")).toBeTruthy();
-  });
-
-  it("should not render multiple children when shouldUpdate is false", () => {
-    const { queryByText } = render(
-      <LazyView shouldUpdate={false}>
-        <Text>First Child</Text>
-        <Text>Second Child</Text>
-      </LazyView>
-    );
-
-    expect(queryByText("First Child")).toBeNull();
-    expect(queryByText("Second Child")).toBeNull();
-  });
-});

package/src/components/Pagination/Pagination.test.tsx

@@ -1,178 +0,0 @@
-import { act, fireEvent, render } from "@testing-library/react-native";
-import { View } from "react-native";
-import { useSharedValue } from "react-native-reanimated";
-
-import { Pagination } from ".";
-
-jest.mock("react-native-worklets", () => ({
-  scheduleOnRN: (fn: (...args: unknown[]) => void, ...args: unknown[]) => fn(...args),
-}));
-
-// Use fake timers so the reanimated mapper's mockedRequestAnimationFrame
-// (a setTimeout-based RAF) doesn't fire outside of act().
-beforeEach(() => {
-  jest.useFakeTimers();
-});
-
-afterEach(() => {
-  jest.useRealTimers();
-});
-
-describe("Pagination.Basic", () => {
-  it("throws when size/dot width/height are non-number", () => {
-    const Test = () => {
-      const progress = useSharedValue(0);
-      return (
-        <Pagination.Basic
-          data={[1, 2]}
-          progress={progress}
-          // @ts-expect-error intentional invalid type
-          size={"12px"}
-        />
-      );
-    };
-
-    expect(() => render(<Test />)).toThrow("size/width/height must be a number");
-  });
-
-  it("renders dots and calls onPress", async () => {
-    const handlePress = jest.fn();
-    const Test = () => {
-      const progress = useSharedValue(0);
-      return (
-        <Pagination.Basic
-          data={[1, 2, 3]}
-          progress={progress}
-          onPress={handlePress}
-          carouselName="Demo"
-        />
-      );
-    };
-
-    const { UNSAFE_root } = render(<Test />);
-    await act(async () => {
-      jest.advanceTimersByTime(100);
-    });
-
-    const buttons = UNSAFE_root.findAll(
-      (node) =>
-        node?.props?.accessibilityRole === "button" &&
-        typeof node?.props?.accessibilityLabel === "string" &&
-        node.props.accessibilityLabel.startsWith("Slide ")
-    );
-
-    const uniqueByLabel = Array.from(
-      new Map(buttons.map((b) => [b.props.accessibilityLabel, b])).values()
-    );
-
-    expect(uniqueByLabel).toHaveLength(3);
-
-    await act(async () => {
-      fireEvent.press(uniqueByLabel[1]);
-      jest.advanceTimersByTime(100);
-    });
-    expect(handlePress).toHaveBeenCalledWith(1);
-  });
-
-  it("does not include undefined in default accessibilityLabel when carouselName is omitted", async () => {
-    const Test = () => {
-      const progress = useSharedValue(0);
-      return <Pagination.Basic data={[1, 2]} progress={progress} />;
-    };
-
-    const { UNSAFE_root } = render(<Test />);
-    await act(async () => {
-      jest.advanceTimersByTime(100);
-    });
-
-    const buttons = UNSAFE_root.findAll(
-      (node) =>
-        node?.props?.accessibilityRole === "button" &&
-        typeof node?.props?.accessibilityLabel === "string" &&
-        node.props.accessibilityLabel.startsWith("Slide ")
-    );
-
-    const uniqueByLabel = Array.from(
-      new Map(buttons.map((b) => [b.props.accessibilityLabel, b])).values()
-    );
-
-    expect(uniqueByLabel[0].props.accessibilityLabel).toBe("Slide 1 of 2");
-    expect(uniqueByLabel[0].props.accessibilityLabel).not.toContain("undefined");
-  });
-});
-
-describe("Pagination.Custom", () => {
-  it("throws when any size-related prop is non-number", () => {
-    const Test = () => {
-      const progress = useSharedValue(0);
-      return (
-        <Pagination.Custom
-          data={[1]}
-          progress={progress}
-          // @ts-expect-error intentional invalid type
-          activeDotStyle={{ width: "10px" }}
-        />
-      );
-    };
-
-    expect(() => render(<Test />)).toThrow("size/width/height must be a number");
-  });
-
-  it("uses max item dimensions for container min sizes", async () => {
-    const Test = () => {
-      const progress = useSharedValue(0);
-      return (
-        <Pagination.Custom
-          data={[1, 2]}
-          progress={progress}
-          size={12}
-          dotStyle={{ width: 14, height: 8 }}
-          activeDotStyle={{ width: 16, height: 20 }}
-        />
-      );
-    };
-
-    const { UNSAFE_root } = render(<Test />);
-    await act(async () => {
-      jest.advanceTimersByTime(100);
-    });
-
-    // @ts-expect-error
-    const container = UNSAFE_root.findByType(View);
-    const flattened = Array.isArray(container.props.style)
-      ? Object.assign({}, ...container.props.style.filter(Boolean))
-      : container.props.style;
-
-    expect(flattened.minWidth).toBe(16);
-    expect(flattened.minHeight).toBe(20);
-  });
-
-  it("allows overriding pagination item accessibility props", async () => {
-    const Test = () => {
-      const progress = useSharedValue(0);
-      return (
-        <Pagination.Custom
-          data={[1, 2]}
-          progress={progress}
-          paginationItemAccessibility={(index: number, length: number) => ({
-            accessibilityLabel: `Page ${index + 1}/${length}`,
-            accessibilityHint: `Jump to ${index + 1}`,
-            accessibilityRole: "link",
-          })}
-        />
-      );
-    };
-
-    const { UNSAFE_root } = render(<Test />);
-    await act(async () => {
-      jest.advanceTimersByTime(100);
-    });
-
-    const item = UNSAFE_root.find(
-      (node) =>
-        node?.props?.accessibilityLabel === "Page 1/2" && node?.props?.accessibilityRole === "link"
-    );
-
-    expect(item.props.accessibilityHint).toBe("Jump to 1");
-  });
-});

package/src/components/rnr-demo.test.tsx

@@ -1,53 +0,0 @@
-import { render } from "@testing-library/react-native";
-import type { FC } from "react";
-import React from "react";
-import Animated, { useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
-
-describe("Carousel Animations", () => {
-  beforeEach(() => {
-    jest.useFakeTimers();
-  });
-
-  afterEach(() => {
-    jest.runOnlyPendingTimers();
-    jest.useRealTimers();
-  });
-
-  it("animates opacity with timing", () => {
-    const TestComponent: FC<{ value: number }> = ({ value }) => {
-      const sharedValue = useSharedValue(value);
-
-      // Using withTiming to wrap the value change, so it can be tested
-      const animatedStyle = useAnimatedStyle(() => ({
-        opacity: withTiming(sharedValue.value, { duration: 500 }),
-      }));
-
-      // When the prop changes, update the shared value
-      React.useEffect(() => {
-        sharedValue.value = value;
-      }, [value, sharedValue]);
-
-      return <Animated.View testID="animated-view" style={animatedStyle} />;
-    };
-
-    const initialValue = 0;
-    const updatedValue = 1;
-
-    const { getByTestId, rerender } = render(<TestComponent value={initialValue} />);
-    const view = getByTestId("animated-view");
-
-    // Verify the initial state
-    expect(view).toHaveAnimatedStyle({ opacity: initialValue });
-
-    // Trigger the value change
-    rerender(<TestComponent value={updatedValue} />);
-
-    // Advance the animation to the middle point
-    jest.advanceTimersByTime(250);
-    expect(view).toHaveAnimatedStyle({ opacity: 0.5 }); // Animation middle value
-
-    // Advance the animation to the completion
-    jest.advanceTimersByTime(250);
-    expect(view).toHaveAnimatedStyle({ opacity: updatedValue }); // Animation completion
-  });
-});

package/src/hooks/useAutoPlay.test.ts

@@ -1,194 +0,0 @@
-import { act, renderHook } from "@testing-library/react-hooks";
-
-import { useAutoPlay } from "./useAutoPlay";
-
-describe("useAutoPlay", () => {
-  // Mock timer
-  beforeEach(() => {
-    jest.useFakeTimers();
-    jest.clearAllMocks();
-  });
-
-  afterEach(() => {
-    jest.clearAllTimers();
-    jest.useRealTimers();
-  });
-
-  // Mock carousel controller
-  const mockCarouselController = {
-    prev: jest.fn(),
-    next: jest.fn(),
-    getCurrentIndex: jest.fn(),
-    getSharedIndex: jest.fn(),
-    scrollTo: jest.fn(),
-  };
-
-  it("should start autoplay when autoPlay is true", () => {
-    renderHook(() =>
-      useAutoPlay({
-        autoPlay: true,
-        autoPlayInterval: 1000,
-        carouselController: mockCarouselController,
-      })
-    );
-
-    act(() => {
-      jest.runOnlyPendingTimers();
-    });
-
-    expect(mockCarouselController.next).toHaveBeenCalledTimes(1);
-    expect(mockCarouselController.next).toHaveBeenCalledWith(
-      expect.objectContaining({
-        onFinished: expect.any(Function),
-      })
-    );
-  });
-
-  it("should not start autoplay when autoPlay is false", () => {
-    renderHook(() =>
-      useAutoPlay({
-        autoPlay: false,
-        autoPlayInterval: 1000,
-        carouselController: mockCarouselController,
-      })
-    );
-
-    act(() => {
-      jest.runOnlyPendingTimers();
-    });
-
-    expect(mockCarouselController.next).not.toHaveBeenCalled();
-  });
-
-  it("should play in reverse when autoPlayReverse is true", () => {
-    renderHook(() =>
-      useAutoPlay({
-        autoPlay: true,
-        autoPlayReverse: true,
-        autoPlayInterval: 1000,
-        carouselController: mockCarouselController,
-      })
-    );
-
-    act(() => {
-      jest.runOnlyPendingTimers();
-    });
-
-    expect(mockCarouselController.prev).toHaveBeenCalledTimes(1);
-    expect(mockCarouselController.next).not.toHaveBeenCalled();
-  });
-
-  it("should clear timer on unmount", () => {
-    const { unmount } = renderHook(() =>
-      useAutoPlay({
-        autoPlay: true,
-        autoPlayInterval: 1000,
-        carouselController: mockCarouselController,
-      })
-    );
-
-    // Run the timer once to ensure it's set
-    act(() => {
-      jest.runOnlyPendingTimers();
-    });
-
-    // Clear previous call records
-    mockCarouselController.next.mockClear();
-
-    // Then unmount the component and run the timer again
-    act(() => {
-      unmount();
-      jest.runOnlyPendingTimers();
-    });
-
-    expect(mockCarouselController.next).not.toHaveBeenCalled();
-  });
-
-  it("should pause and resume autoplay", () => {
-    const { result } = renderHook(() =>
-      useAutoPlay({
-        autoPlay: true,
-        autoPlayInterval: 1000,
-        carouselController: mockCarouselController,
-      })
-    );
-
-    // Run the timer once to ensure it's set
-    act(() => {
-      jest.runOnlyPendingTimers();
-    });
-
-    // Clear previous call records
-    mockCarouselController.next.mockClear();
-
-    // Pause autoplay
-    act(() => {
-      result.current.pause();
-      jest.runOnlyPendingTimers();
-    });
-
-    expect(mockCarouselController.next).not.toHaveBeenCalled();
-
-    // Resume autoplay
-    act(() => {
-      result.current.start();
-      jest.runOnlyPendingTimers();
-    });
-
-    expect(mockCarouselController.next).toHaveBeenCalledTimes(1);
-  });
-
-  it("should respect autoPlayInterval timing", () => {
-    renderHook(() =>
-      useAutoPlay({
-        autoPlay: true,
-        autoPlayInterval: 2000,
-        carouselController: mockCarouselController,
-      })
-    );
-
-    // Advance less than interval
-    act(() => {
-      jest.advanceTimersByTime(1500);
-    });
-    expect(mockCarouselController.next).not.toHaveBeenCalled();
-
-    // Advance to complete interval
-    act(() => {
-      jest.advanceTimersByTime(500);
-    });
-    expect(mockCarouselController.next).toHaveBeenCalledTimes(1);
-  });
-
-  it("should chain autoplay calls correctly", () => {
-    renderHook(() =>
-      useAutoPlay({
-        autoPlay: true,
-        autoPlayInterval: 1000,
-        carouselController: mockCarouselController,
-      })
-    );
-
-    // First interval
-    act(() => {
-      jest.runOnlyPendingTimers();
-    });
-    expect(mockCarouselController.next).toHaveBeenCalledTimes(1);
-
-    // Trigger onFinished callback to start the next timer
-    const onFinished = mockCarouselController.next.mock.calls[0][0].onFinished;
-    act(() => {
-      onFinished();
-      jest.runOnlyPendingTimers();
-    });
-    expect(mockCarouselController.next).toHaveBeenCalledTimes(2);
-
-    // Trigger onFinished callback to start the next timer
-    const onFinished2 = mockCarouselController.next.mock.calls[1][0].onFinished;
-    act(() => {
-      onFinished2();
-      jest.runOnlyPendingTimers();
-    });
-    expect(mockCarouselController.next).toHaveBeenCalledTimes(3);
-  });
-});