@windstream/react-shared-components 0.1.93 → 0.1.95

package/src/components/animation-wrapper/index.test.tsx

@@ -0,0 +1,424 @@
+import React from "react";
+import { AnimationWrapper } from "./index";
+
+import { render, screen } from "@testing-library/react";
+
+import "@testing-library/jest-dom";
+
+// Mock framer-motion
+const mockUseReducedMotion = jest.fn(() => false);
+
+jest.mock("framer-motion", () => {
+  const actual = jest.requireActual("framer-motion");
+  return {
+    ...actual,
+    useReducedMotion: () => mockUseReducedMotion(),
+    motion: new Proxy(
+      {},
+      {
+        get: (_target, prop: string) => {
+          const motionKeys = [
+            "whileHover",
+            "whileTap",
+            "transition",
+            "animate",
+            "initial",
+            "exit",
+            "variants",
+          ];
+          const MotionMock = React.forwardRef(
+            (props: Record<string, unknown>, ref: React.Ref<unknown>) => {
+              const rest: Record<string, unknown> = {};
+              Object.keys(props).forEach(key => {
+                if (!motionKeys.includes(key)) {
+                  rest[key] = props[key];
+                }
+              });
+              return React.createElement(prop, {
+                ...rest,
+                ref,
+                "data-motion": "true",
+                "data-while-hover": JSON.stringify(props.whileHover),
+                "data-while-tap": JSON.stringify(props.whileTap),
+                "data-transition": JSON.stringify(props.transition),
+              });
+            }
+          );
+          MotionMock.displayName = `Motion(${prop})`;
+          return MotionMock;
+        },
+      }
+    ),
+  };
+});
+
+describe("AnimationWrapper", () => {
+  beforeEach(() => {
+    mockUseReducedMotion.mockReturnValue(false);
+  });
+
+  describe("when animation is disabled", () => {
+    it("returns the child directly when disableAnimation is true (default)", () => {
+      render(
+        <AnimationWrapper>
+          <button data-testid="child">Click</button>
+        </AnimationWrapper>
+      );
+      const btn = screen.getByTestId("child");
+      expect(btn).toBeInTheDocument();
+      expect(btn.tagName).toBe("BUTTON");
+      expect(btn).not.toHaveAttribute("data-motion");
+    });
+
+    it("returns the child directly when disableAnimation is explicitly true", () => {
+      render(
+        <AnimationWrapper disableAnimation={true}>
+          <span data-testid="child">Text</span>
+        </AnimationWrapper>
+      );
+      expect(screen.getByTestId("child")).not.toHaveAttribute("data-motion");
+    });
+
+    it("returns the child directly when user prefers reduced motion", () => {
+      mockUseReducedMotion.mockReturnValue(true);
+      render(
+        <AnimationWrapper disableAnimation={false} animationType="scale">
+          <div data-testid="child">Content</div>
+        </AnimationWrapper>
+      );
+      expect(screen.getByTestId("child")).not.toHaveAttribute("data-motion");
+    });
+  });
+
+  describe("when animation is enabled", () => {
+    describe("with intrinsic elements", () => {
+      it("wraps intrinsic element with motion component for scale animation", () => {
+        render(
+          <AnimationWrapper disableAnimation={false} animationType="scale">
+            <div data-testid="child">Animated</div>
+          </AnimationWrapper>
+        );
+        const el = screen.getByTestId("child");
+        expect(el).toHaveAttribute("data-motion", "true");
+        const whileHover = JSON.parse(
+          el.getAttribute("data-while-hover") || "{}"
+        );
+        expect(whileHover).toEqual({ scale: 1.02 });
+        const whileTap = JSON.parse(el.getAttribute("data-while-tap") || "{}");
+        expect(whileTap).toEqual({ scale: 0.98 });
+      });
+
+      it("applies shadow animation preset", () => {
+        render(
+          <AnimationWrapper disableAnimation={false} animationType="shadow">
+            <div data-testid="child">Shadow</div>
+          </AnimationWrapper>
+        );
+        const el = screen.getByTestId("child");
+        const whileHover = JSON.parse(
+          el.getAttribute("data-while-hover") || "{}"
+        );
+        expect(whileHover).toEqual({
+          boxShadow: "0 10px 25px rgba(0,0,0,0.15)",
+        });
+        // shadow preset has no whileTap, so mergedWhileTap is undefined
+        const whileTap = el.getAttribute("data-while-tap");
+        expect(whileTap).toBeNull();
+      });
+
+      it("applies lift animation preset", () => {
+        render(
+          <AnimationWrapper disableAnimation={false} animationType="lift">
+            <div data-testid="child">Lift</div>
+          </AnimationWrapper>
+        );
+        const el = screen.getByTestId("child");
+        const whileHover = JSON.parse(
+          el.getAttribute("data-while-hover") || "{}"
+        );
+        expect(whileHover).toEqual({ y: -5 });
+        const whileTap = JSON.parse(el.getAttribute("data-while-tap") || "{}");
+        expect(whileTap).toEqual({ y: 0 });
+      });
+
+      it("applies opacity animation preset", () => {
+        render(
+          <AnimationWrapper disableAnimation={false} animationType="opacity">
+            <div data-testid="child">Opacity</div>
+          </AnimationWrapper>
+        );
+        const el = screen.getByTestId("child");
+        const whileHover = JSON.parse(
+          el.getAttribute("data-while-hover") || "{}"
+        );
+        expect(whileHover).toEqual({ opacity: 0.8 });
+        const transition = JSON.parse(
+          el.getAttribute("data-transition") || "{}"
+        );
+        expect(transition).toEqual({ duration: 0.2 });
+      });
+
+      it("applies grow animation preset", () => {
+        render(
+          <AnimationWrapper disableAnimation={false} animationType="grow">
+            <div data-testid="child">Grow</div>
+          </AnimationWrapper>
+        );
+        const el = screen.getByTestId("child");
+        const whileHover = JSON.parse(
+          el.getAttribute("data-while-hover") || "{}"
+        );
+        expect(whileHover).toEqual({ scale: 1.1 });
+        const whileTap = JSON.parse(el.getAttribute("data-while-tap") || "{}");
+        expect(whileTap).toEqual({ scale: 0.95 });
+        const transition = JSON.parse(
+          el.getAttribute("data-transition") || "{}"
+        );
+        expect(transition).toEqual({
+          type: "spring",
+          stiffness: 300,
+          damping: 20,
+        });
+      });
+
+      it("works with different intrinsic HTML elements (span)", () => {
+        render(
+          <AnimationWrapper disableAnimation={false} animationType="scale">
+            <span data-testid="child">Span</span>
+          </AnimationWrapper>
+        );
+        const el = screen.getByTestId("child");
+        expect(el.tagName).toBe("SPAN");
+        expect(el).toHaveAttribute("data-motion", "true");
+      });
+
+      it("works with anchor elements", () => {
+        render(
+          <AnimationWrapper disableAnimation={false} animationType="lift">
+            <a data-testid="child" href="/test">
+              Link
+            </a>
+          </AnimationWrapper>
+        );
+        const el = screen.getByTestId("child");
+        expect(el.tagName).toBe("A");
+        expect(el).toHaveAttribute("href", "/test");
+        expect(el).toHaveAttribute("data-motion", "true");
+      });
+    });
+
+    describe("with composite (non-intrinsic) elements", () => {
+      const CustomComponent = ({ label }: { label: string }) => (
+        <span data-testid="custom">{label}</span>
+      );
+
+      it("wraps composite component in motion.div", () => {
+        const { container } = render(
+          <AnimationWrapper disableAnimation={false} animationType="scale">
+            <CustomComponent label="Hello" />
+          </AnimationWrapper>
+        );
+        // The wrapper should be a div with motion attributes
+        const wrapper = container.firstElementChild;
+        expect(wrapper?.tagName).toBe("DIV");
+        expect(wrapper).toHaveAttribute("data-motion", "true");
+        // The child should be rendered inside
+        expect(screen.getByTestId("custom")).toBeInTheDocument();
+        expect(screen.getByText("Hello")).toBeInTheDocument();
+      });
+
+      it("applies animation presets to motion.div wrapper", () => {
+        const { container } = render(
+          <AnimationWrapper disableAnimation={false} animationType="grow">
+            <CustomComponent label="Test" />
+          </AnimationWrapper>
+        );
+        const wrapper = container.firstElementChild;
+        const whileHover = JSON.parse(
+          wrapper?.getAttribute("data-while-hover") || "{}"
+        );
+        expect(whileHover).toEqual({ scale: 1.1 });
+      });
+    });
+
+    describe("with multiple animation types", () => {
+      it("merges multiple animation presets", () => {
+        render(
+          <AnimationWrapper
+            disableAnimation={false}
+            animationType={["scale", "shadow"]}
+          >
+            <div data-testid="child">Multi</div>
+          </AnimationWrapper>
+        );
+        const el = screen.getByTestId("child");
+        const whileHover = JSON.parse(
+          el.getAttribute("data-while-hover") || "{}"
+        );
+        expect(whileHover).toEqual({
+          scale: 1.02,
+          boxShadow: "0 10px 25px rgba(0,0,0,0.15)",
+        });
+      });
+
+      it("merges whileTap from multiple presets", () => {
+        render(
+          <AnimationWrapper
+            disableAnimation={false}
+            animationType={["scale", "lift"]}
+          >
+            <div data-testid="child">Multi Tap</div>
+          </AnimationWrapper>
+        );
+        const el = screen.getByTestId("child");
+        const whileTap = JSON.parse(el.getAttribute("data-while-tap") || "{}");
+        expect(whileTap).toEqual({ scale: 0.98, y: 0 });
+      });
+
+      it("merges transitions from multiple presets", () => {
+        render(
+          <AnimationWrapper
+            disableAnimation={false}
+            animationType={["opacity", "lift"]}
+          >
+            <div data-testid="child">Merged</div>
+          </AnimationWrapper>
+        );
+        const el = screen.getByTestId("child");
+        const transition = JSON.parse(
+          el.getAttribute("data-transition") || "{}"
+        );
+        expect(transition).toEqual({
+          duration: 0.2,
+          type: "spring",
+          stiffness: 300,
+          damping: 20,
+        });
+      });
+
+      it("handles empty array of animation types", () => {
+        render(
+          <AnimationWrapper disableAnimation={false} animationType={[]}>
+            <div data-testid="child">No Animation</div>
+          </AnimationWrapper>
+        );
+        const el = screen.getByTestId("child");
+        // With empty array, mergePresets returns undefined, so no preset is applied
+        expect(el).toHaveAttribute("data-motion", "true");
+      });
+    });
+
+    describe("custom overrides", () => {
+      it("overrides preset whileHover with custom prop", () => {
+        render(
+          <AnimationWrapper
+            disableAnimation={false}
+            animationType="scale"
+            whileHover={{ scale: 2 }}
+          >
+            <div data-testid="child">Override</div>
+          </AnimationWrapper>
+        );
+        const el = screen.getByTestId("child");
+        const whileHover = JSON.parse(
+          el.getAttribute("data-while-hover") || "{}"
+        );
+        // Custom override should merge with preset (custom wins)
+        expect(whileHover.scale).toBe(2);
+      });
+
+      it("overrides preset whileTap with custom prop", () => {
+        render(
+          <AnimationWrapper
+            disableAnimation={false}
+            animationType="scale"
+            whileTap={{ scale: 0.5 }}
+          >
+            <div data-testid="child">Override Tap</div>
+          </AnimationWrapper>
+        );
+        const el = screen.getByTestId("child");
+        const whileTap = JSON.parse(el.getAttribute("data-while-tap") || "{}");
+        expect(whileTap.scale).toBe(0.5);
+      });
+
+      it("overrides preset transition with custom prop", () => {
+        render(
+          <AnimationWrapper
+            disableAnimation={false}
+            animationType="scale"
+            transition={{ duration: 1 }}
+          >
+            <div data-testid="child">Override Trans</div>
+          </AnimationWrapper>
+        );
+        const el = screen.getByTestId("child");
+        const transition = JSON.parse(
+          el.getAttribute("data-transition") || "{}"
+        );
+        expect(transition.duration).toBe(1);
+      });
+
+      it("uses custom whileHover even without animationType", () => {
+        render(
+          <AnimationWrapper
+            disableAnimation={false}
+            whileHover={{ rotate: 10 }}
+          >
+            <div data-testid="child">Custom Only</div>
+          </AnimationWrapper>
+        );
+        const el = screen.getByTestId("child");
+        const whileHover = JSON.parse(
+          el.getAttribute("data-while-hover") || "{}"
+        );
+        expect(whileHover).toEqual({ rotate: 10 });
+      });
+
+      it("uses custom whileTap without animationType", () => {
+        render(
+          <AnimationWrapper disableAnimation={false} whileTap={{ rotate: -5 }}>
+            <div data-testid="child">Tap</div>
+          </AnimationWrapper>
+        );
+        const el = screen.getByTestId("child");
+        const whileTap = JSON.parse(el.getAttribute("data-while-tap") || "{}");
+        expect(whileTap).toEqual({ rotate: -5 });
+      });
+
+      it("uses custom transition without animationType", () => {
+        render(
+          <AnimationWrapper
+            disableAnimation={false}
+            transition={{ delay: 0.5 }}
+          >
+            <div data-testid="child">Trans</div>
+          </AnimationWrapper>
+        );
+        const el = screen.getByTestId("child");
+        const transition = JSON.parse(
+          el.getAttribute("data-transition") || "{}"
+        );
+        expect(transition).toEqual({ delay: 0.5 });
+      });
+    });
+
+    describe("no animationType and no custom overrides", () => {
+      it("renders motion component with undefined animation props", () => {
+        render(
+          <AnimationWrapper disableAnimation={false}>
+            <div data-testid="child">Plain</div>
+          </AnimationWrapper>
+        );
+        const el = screen.getByTestId("child");
+        expect(el).toHaveAttribute("data-motion", "true");
+      });
+    });
+  });
+
+  describe("displayName", () => {
+    it("has correct displayName", () => {
+      expect(AnimationWrapper.displayName).toBe("AnimationWrapper");
+    });
+  });
+});