@croacroa/react-native-template 2.0.1 → 3.2.0

package/__tests__/components/snapshots.test.tsx

@@ -1,131 +1,131 @@
-/**
- * @fileoverview Snapshot tests for UI components
- * Ensures visual consistency of components across changes.
- */
-
-import React from "react";
-import { render } from "@testing-library/react-native";
-import { Text, View } from "react-native";
-
-import { Button } from "@/components/ui/Button";
-import { Card } from "@/components/ui/Card";
-
-// Mock useTheme hook for components that use it
-jest.mock("@/hooks/useTheme", () => ({
-  useTheme: () => ({
-    isDark: false,
-    mode: "light",
-    isLoaded: true,
-    setMode: jest.fn(),
-    toggleTheme: jest.fn(),
-  }),
-}));
-
-describe("UI Components Snapshots", () => {
-  describe("Button", () => {
-    it("renders primary variant correctly", () => {
-      const { toJSON } = render(<Button variant="primary">Primary</Button>);
-      expect(toJSON()).toMatchSnapshot();
-    });
-
-    it("renders secondary variant correctly", () => {
-      const { toJSON } = render(<Button variant="secondary">Secondary</Button>);
-      expect(toJSON()).toMatchSnapshot();
-    });
-
-    it("renders outline variant correctly", () => {
-      const { toJSON } = render(<Button variant="outline">Outline</Button>);
-      expect(toJSON()).toMatchSnapshot();
-    });
-
-    it("renders ghost variant correctly", () => {
-      const { toJSON } = render(<Button variant="ghost">Ghost</Button>);
-      expect(toJSON()).toMatchSnapshot();
-    });
-
-    it("renders danger variant correctly", () => {
-      const { toJSON } = render(<Button variant="danger">Danger</Button>);
-      expect(toJSON()).toMatchSnapshot();
-    });
-
-    it("renders small size correctly", () => {
-      const { toJSON } = render(<Button size="sm">Small</Button>);
-      expect(toJSON()).toMatchSnapshot();
-    });
-
-    it("renders large size correctly", () => {
-      const { toJSON } = render(<Button size="lg">Large</Button>);
-      expect(toJSON()).toMatchSnapshot();
-    });
-
-    it("renders loading state correctly", () => {
-      const { toJSON } = render(<Button isLoading>Loading</Button>);
-      expect(toJSON()).toMatchSnapshot();
-    });
-
-    it("renders disabled state correctly", () => {
-      const { toJSON } = render(<Button disabled>Disabled</Button>);
-      expect(toJSON()).toMatchSnapshot();
-    });
-
-    it("renders with custom children correctly", () => {
-      const { toJSON } = render(
-        <Button>
-          <View>
-            <Text>Custom Content</Text>
-          </View>
-        </Button>
-      );
-      expect(toJSON()).toMatchSnapshot();
-    });
-  });
-
-  describe("Card", () => {
-    it("renders default variant correctly", () => {
-      const { toJSON } = render(
-        <Card>
-          <Text>Default Card</Text>
-        </Card>
-      );
-      expect(toJSON()).toMatchSnapshot();
-    });
-
-    it("renders elevated variant correctly", () => {
-      const { toJSON } = render(
-        <Card variant="elevated">
-          <Text>Elevated Card</Text>
-        </Card>
-      );
-      expect(toJSON()).toMatchSnapshot();
-    });
-
-    it("renders outlined variant correctly", () => {
-      const { toJSON } = render(
-        <Card variant="outlined">
-          <Text>Outlined Card</Text>
-        </Card>
-      );
-      expect(toJSON()).toMatchSnapshot();
-    });
-
-    it("renders with custom className correctly", () => {
-      const { toJSON } = render(
-        <Card className="p-4 m-2">
-          <Text>Custom Styled Card</Text>
-        </Card>
-      );
-      expect(toJSON()).toMatchSnapshot();
-    });
-
-    it("renders complex content correctly", () => {
-      const { toJSON } = render(
-        <Card variant="elevated" className="p-4">
-          <Text>Title</Text>
-          <Text>Description text here</Text>
-          <Button>Action</Button>
-        </Card>
-      );
-      expect(toJSON()).toMatchSnapshot();
-    });
-  });
-});
+/**
+ * @fileoverview Snapshot tests for UI components
+ * Ensures visual consistency of components across changes.
+ */
+
+import React from "react";
+import { render } from "@testing-library/react-native";
+import { Text, View } from "react-native";
+
+import { Button } from "@/components/ui/Button";
+import { Card } from "@/components/ui/Card";
+
+// Mock useTheme hook for components that use it
+jest.mock("@/hooks/useTheme", () => ({
+  useTheme: () => ({
+    isDark: false,
+    mode: "light",
+    isLoaded: true,
+    setMode: jest.fn(),
+    toggleTheme: jest.fn(),
+  }),
+}));
+
+describe("UI Components Snapshots", () => {
+  describe("Button", () => {
+    it("renders primary variant correctly", () => {
+      const { toJSON } = render(<Button variant="primary">Primary</Button>);
+      expect(toJSON()).toMatchSnapshot();
+    });
+
+    it("renders secondary variant correctly", () => {
+      const { toJSON } = render(<Button variant="secondary">Secondary</Button>);
+      expect(toJSON()).toMatchSnapshot();
+    });
+
+    it("renders outline variant correctly", () => {
+      const { toJSON } = render(<Button variant="outline">Outline</Button>);
+      expect(toJSON()).toMatchSnapshot();
+    });
+
+    it("renders ghost variant correctly", () => {
+      const { toJSON } = render(<Button variant="ghost">Ghost</Button>);
+      expect(toJSON()).toMatchSnapshot();
+    });
+
+    it("renders danger variant correctly", () => {
+      const { toJSON } = render(<Button variant="danger">Danger</Button>);
+      expect(toJSON()).toMatchSnapshot();
+    });
+
+    it("renders small size correctly", () => {
+      const { toJSON } = render(<Button size="sm">Small</Button>);
+      expect(toJSON()).toMatchSnapshot();
+    });
+
+    it("renders large size correctly", () => {
+      const { toJSON } = render(<Button size="lg">Large</Button>);
+      expect(toJSON()).toMatchSnapshot();
+    });
+
+    it("renders loading state correctly", () => {
+      const { toJSON } = render(<Button isLoading>Loading</Button>);
+      expect(toJSON()).toMatchSnapshot();
+    });
+
+    it("renders disabled state correctly", () => {
+      const { toJSON } = render(<Button disabled>Disabled</Button>);
+      expect(toJSON()).toMatchSnapshot();
+    });
+
+    it("renders with custom children correctly", () => {
+      const { toJSON } = render(
+        <Button>
+          <View>
+            <Text>Custom Content</Text>
+          </View>
+        </Button>
+      );
+      expect(toJSON()).toMatchSnapshot();
+    });
+  });
+
+  describe("Card", () => {
+    it("renders default variant correctly", () => {
+      const { toJSON } = render(
+        <Card>
+          <Text>Default Card</Text>
+        </Card>
+      );
+      expect(toJSON()).toMatchSnapshot();
+    });
+
+    it("renders elevated variant correctly", () => {
+      const { toJSON } = render(
+        <Card variant="elevated">
+          <Text>Elevated Card</Text>
+        </Card>
+      );
+      expect(toJSON()).toMatchSnapshot();
+    });
+
+    it("renders outlined variant correctly", () => {
+      const { toJSON } = render(
+        <Card variant="outlined">
+          <Text>Outlined Card</Text>
+        </Card>
+      );
+      expect(toJSON()).toMatchSnapshot();
+    });
+
+    it("renders with custom className correctly", () => {
+      const { toJSON } = render(
+        <Card className="p-4 m-2">
+          <Text>Custom Styled Card</Text>
+        </Card>
+      );
+      expect(toJSON()).toMatchSnapshot();
+    });
+
+    it("renders complex content correctly", () => {
+      const { toJSON } = render(
+        <Card variant="elevated" className="p-4">
+          <Text>Title</Text>
+          <Text>Description text here</Text>
+          <Button>Action</Button>
+        </Card>
+      );
+      expect(toJSON()).toMatchSnapshot();
+    });
+  });
+});

package/__tests__/helpers/a11y.ts

@@ -0,0 +1,54 @@
+/**
+ * @fileoverview Reusable accessibility test helpers
+ * Provides assertion functions to verify a11y compliance of UI components.
+ * @module __tests__/helpers/a11y
+ */
+
+import { ReactTestInstance } from "react-test-renderer";
+
+/**
+ * Assert that an element is an accessible button.
+ * Checks: accessibilityRole="button" or role="button", has accessibilityLabel
+ */
+export function expectAccessibleButton(element: ReactTestInstance): void {
+  // Check role is "button"
+  const role = element.props.accessibilityRole || element.props.role;
+  expect(role).toBe("button");
+  // Check has label (accessibilityLabel or aria-label)
+  const label = element.props.accessibilityLabel || element.props["aria-label"];
+  expect(label).toBeTruthy();
+}
+
+/**
+ * Assert that an element is an accessible text input.
+ * Checks: has accessibilityLabel or placeholder, correct state (editable)
+ */
+export function expectAccessibleInput(element: ReactTestInstance): void {
+  const label =
+    element.props.accessibilityLabel ||
+    element.props["aria-label"] ||
+    element.props.placeholder;
+  expect(label).toBeTruthy();
+}
+
+/**
+ * Assert that an element has an accessible label.
+ */
+export function expectAccessibleLabel(element: ReactTestInstance): void {
+  const label =
+    element.props.accessibilityLabel ||
+    element.props["aria-label"] ||
+    element.props.accessibilityHint;
+  expect(label).toBeTruthy();
+}
+
+/**
+ * Assert that a disabled element communicates its disabled state to assistive tech.
+ */
+export function expectAccessibleDisabledState(
+  element: ReactTestInstance
+): void {
+  const state = element.props.accessibilityState;
+  expect(state).toBeDefined();
+  expect(state.disabled).toBe(true);
+}

package/__tests__/hooks/useAnalytics.test.ts

@@ -0,0 +1,100 @@
+import { renderHook, act } from "@testing-library/react-native";
+import { usePathname } from "expo-router";
+
+import { useTrackScreen } from "@/hooks/useTrackScreen";
+import { useTrackEvent } from "@/hooks/useTrackEvent";
+import { Analytics } from "@/services/analytics/analytics-adapter";
+
+// Mock analytics adapter
+jest.mock("@/services/analytics/analytics-adapter", () => ({
+  Analytics: {
+    screen: jest.fn(),
+    track: jest.fn(),
+    identify: jest.fn(),
+    reset: jest.fn(),
+    configure: jest.fn(),
+    initialize: jest.fn(),
+    setUserProperties: jest.fn(),
+  },
+}));
+
+const mockAnalytics = Analytics as jest.Mocked<typeof Analytics>;
+const mockUsePathname = usePathname as jest.Mock;
+
+describe("useTrackScreen", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockUsePathname.mockReturnValue("/home");
+  });
+
+  it("should call Analytics.screen when pathname changes", () => {
+    mockUsePathname.mockReturnValue("/home");
+    const { rerender } = renderHook(() => useTrackScreen());
+
+    expect(mockAnalytics.screen).toHaveBeenCalledWith("/home", {
+      segments: [],
+    });
+
+    // Change pathname
+    mockUsePathname.mockReturnValue("/profile");
+    rerender({});
+
+    expect(mockAnalytics.screen).toHaveBeenCalledWith("/profile", {
+      segments: [],
+    });
+    expect(mockAnalytics.screen).toHaveBeenCalledTimes(2);
+  });
+
+  it("should not call Analytics.screen with empty pathname", () => {
+    mockUsePathname.mockReturnValue("");
+    renderHook(() => useTrackScreen());
+
+    expect(mockAnalytics.screen).not.toHaveBeenCalled();
+  });
+
+  it("should not fire duplicate events for same pathname", () => {
+    mockUsePathname.mockReturnValue("/home");
+    const { rerender } = renderHook(() => useTrackScreen());
+
+    expect(mockAnalytics.screen).toHaveBeenCalledTimes(1);
+
+    // Re-render with same pathname
+    rerender({});
+
+    expect(mockAnalytics.screen).toHaveBeenCalledTimes(1);
+  });
+});
+
+describe("useTrackEvent", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("should return a track function", () => {
+    const { result } = renderHook(() => useTrackEvent());
+
+    expect(typeof result.current.track).toBe("function");
+  });
+
+  it("should call Analytics.track with event name and properties", () => {
+    const { result } = renderHook(() => useTrackEvent());
+
+    act(() => {
+      result.current.track("Button Clicked", { buttonId: "submit" });
+    });
+
+    expect(mockAnalytics.track).toHaveBeenCalledWith("Button Clicked", {
+      buttonId: "submit",
+    });
+  });
+
+  it("should return memoized track function (same reference across renders)", () => {
+    const { result, rerender } = renderHook(() => useTrackEvent());
+
+    const firstTrack = result.current.track;
+    rerender({});
+    const secondTrack = result.current.track;
+
+    expect(firstTrack).toBe(secondTrack);
+  });
+});

package/__tests__/hooks/useAnimations.test.ts

@@ -0,0 +1,70 @@
+import { renderHook } from "@testing-library/react-native";
+
+import { useAnimatedEntry, useStaggeredEntry } from "@/hooks/useAnimatedEntry";
+import { useParallax } from "@/hooks/useParallax";
+
+describe("useAnimatedEntry", () => {
+  it("should return animatedStyle and play function", () => {
+    const { result } = renderHook(() => useAnimatedEntry());
+
+    expect(result.current.animatedStyle).toBeDefined();
+    expect(typeof result.current.play).toBe("function");
+    expect(typeof result.current.reset).toBe("function");
+    expect(result.current.progress).toBeDefined();
+  });
+
+  it("should default animation type to fadeIn", () => {
+    // The hook should work without options and use fadeIn as default
+    const { result } = renderHook(() => useAnimatedEntry());
+
+    // The hook returns successfully with defaults
+    expect(result.current.animatedStyle).toBeDefined();
+    expect(result.current.progress).toBeDefined();
+  });
+
+  it("should accept custom animation options", () => {
+    const { result } = renderHook(() =>
+      useAnimatedEntry({
+        animation: "slideUp",
+        delay: 200,
+        autoPlay: false,
+      })
+    );
+
+    expect(result.current.animatedStyle).toBeDefined();
+    expect(typeof result.current.play).toBe("function");
+  });
+});
+
+describe("useStaggeredEntry", () => {
+  it("should return staggered animated style with index-based delay", () => {
+    const { result } = renderHook(() =>
+      useStaggeredEntry(2, { animation: "slideUp", staggerDelay: 80 })
+    );
+
+    expect(result.current.animatedStyle).toBeDefined();
+    expect(typeof result.current.play).toBe("function");
+    expect(typeof result.current.reset).toBe("function");
+  });
+});
+
+describe("useParallax", () => {
+  it("should return scrollY, scrollHandler, parallaxStyle, and headerStyle", () => {
+    const { result } = renderHook(() => useParallax());
+
+    expect(result.current.scrollY).toBeDefined();
+    expect(result.current.scrollHandler).toBeDefined();
+    expect(result.current.parallaxStyle).toBeDefined();
+    expect(result.current.headerStyle).toBeDefined();
+  });
+
+  it("should accept custom options", () => {
+    const { result } = renderHook(() =>
+      useParallax({ speed: 0.3, headerHeight: 300 })
+    );
+
+    expect(result.current.scrollY).toBeDefined();
+    expect(result.current.parallaxStyle).toBeDefined();
+    expect(result.current.headerStyle).toBeDefined();
+  });
+});