@croacroa/react-native-template 1.0.0 → 2.0.0

package/__tests__/components/snapshots.test.tsx

@@ -0,0 +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();
+    });
+  });
+});

package/__tests__/integration/auth-api.test.tsx

@@ -0,0 +1,227 @@
+/**
+ * @fileoverview Integration tests for authentication and API flow
+ * Tests the complete flow from sign-in through authenticated API calls.
+ */
+
+import React from "react";
+import { render, waitFor, act } from "@testing-library/react-native";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { AuthProvider, useAuth, getAuthToken } from "@/hooks/useAuth";
+import { api } from "@/services/api";
+
+// Mock SecureStore
+const mockSecureStore: Record<string, string> = {};
+jest.mock("expo-secure-store", () => ({
+  getItemAsync: jest.fn((key: string) =>
+    Promise.resolve(mockSecureStore[key] || null)
+  ),
+  setItemAsync: jest.fn((key: string, value: string) => {
+    mockSecureStore[key] = value;
+    return Promise.resolve();
+  }),
+  deleteItemAsync: jest.fn((key: string) => {
+    delete mockSecureStore[key];
+    return Promise.resolve();
+  }),
+}));
+
+// Mock expo-router
+jest.mock("expo-router", () => ({
+  router: {
+    replace: jest.fn(),
+    push: jest.fn(),
+  },
+}));
+
+// Mock toast
+jest.mock("@/utils/toast", () => ({
+  toast: {
+    success: jest.fn(),
+    error: jest.fn(),
+    info: jest.fn(),
+  },
+  handleApiError: jest.fn(),
+}));
+
+// Test component that uses auth
+function TestAuthComponent({
+  onAuthState,
+}: {
+  onAuthState: (state: {
+    user: unknown;
+    isAuthenticated: boolean;
+    isLoading: boolean;
+  }) => void;
+}) {
+  const auth = useAuth();
+
+  React.useEffect(() => {
+    onAuthState({
+      user: auth.user,
+      isAuthenticated: auth.isAuthenticated,
+      isLoading: auth.isLoading,
+    });
+  }, [auth.user, auth.isAuthenticated, auth.isLoading, onAuthState]);
+
+  return null;
+}
+
+// Wrapper with providers
+function createWrapper() {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+    },
+  });
+
+  return function Wrapper({ children }: { children: React.ReactNode }) {
+    return (
+      <QueryClientProvider client={queryClient}>
+        <AuthProvider>{children}</AuthProvider>
+      </QueryClientProvider>
+    );
+  };
+}
+
+describe("Auth + API Integration", () => {
+  beforeEach(() => {
+    // Clear mock storage
+    Object.keys(mockSecureStore).forEach((key) => delete mockSecureStore[key]);
+    jest.clearAllMocks();
+  });
+
+  describe("Authentication Flow", () => {
+    it("starts with loading state then transitions to unauthenticated", async () => {
+      const states: Array<{ isLoading: boolean; isAuthenticated: boolean }> =
+        [];
+
+      render(
+        <TestAuthComponent
+          onAuthState={(state) => states.push(state)}
+        />,
+        { wrapper: createWrapper() }
+      );
+
+      await waitFor(() => {
+        expect(states.length).toBeGreaterThanOrEqual(2);
+      });
+
+      // First state should be loading
+      expect(states[0].isLoading).toBe(true);
+
+      // Final state should be not loading and not authenticated
+      const finalState = states[states.length - 1];
+      expect(finalState.isLoading).toBe(false);
+      expect(finalState.isAuthenticated).toBe(false);
+    });
+
+    it("restores session from stored tokens", async () => {
+      // Pre-populate storage with valid tokens
+      const tokens = {
+        accessToken: "stored_access_token",
+        refreshToken: "stored_refresh_token",
+        expiresAt: Date.now() + 60 * 60 * 1000, // 1 hour from now
+      };
+      const user = {
+        id: "1",
+        email: "stored@example.com",
+        name: "Stored User",
+      };
+
+      mockSecureStore["auth_tokens"] = JSON.stringify(tokens);
+      mockSecureStore["auth_user"] = JSON.stringify(user);
+
+      let finalState: { user: unknown; isAuthenticated: boolean } | null = null;
+
+      render(
+        <TestAuthComponent
+          onAuthState={(state) => {
+            if (!state.isLoading) {
+              finalState = state;
+            }
+          }}
+        />,
+        { wrapper: createWrapper() }
+      );
+
+      await waitFor(() => {
+        expect(finalState).not.toBeNull();
+      });
+
+      expect(finalState?.isAuthenticated).toBe(true);
+      expect(finalState?.user).toEqual(user);
+    });
+
+    it("handles expired tokens by refreshing", async () => {
+      // Pre-populate storage with expired tokens
+      const tokens = {
+        accessToken: "expired_access_token",
+        refreshToken: "valid_refresh_token",
+        expiresAt: Date.now() - 1000, // Expired 1 second ago
+      };
+      const user = {
+        id: "1",
+        email: "test@example.com",
+        name: "Test User",
+      };
+
+      mockSecureStore["auth_tokens"] = JSON.stringify(tokens);
+      mockSecureStore["auth_user"] = JSON.stringify(user);
+
+      let finalState: { isAuthenticated: boolean } | null = null;
+
+      render(
+        <TestAuthComponent
+          onAuthState={(state) => {
+            if (!state.isLoading) {
+              finalState = state;
+            }
+          }}
+        />,
+        { wrapper: createWrapper() }
+      );
+
+      await waitFor(
+        () => {
+          expect(finalState).not.toBeNull();
+        },
+        { timeout: 3000 }
+      );
+
+      // Should be authenticated after token refresh (mock implementation always succeeds)
+      expect(finalState?.isAuthenticated).toBe(true);
+    });
+  });
+
+  describe("Token Management", () => {
+    it("getAuthToken returns null when no tokens stored", async () => {
+      const token = await getAuthToken();
+      expect(token).toBeNull();
+    });
+
+    it("getAuthToken returns access token when stored", async () => {
+      const tokens = {
+        accessToken: "test_access_token",
+        refreshToken: "test_refresh_token",
+        expiresAt: Date.now() + 60 * 60 * 1000,
+      };
+
+      mockSecureStore["auth_tokens"] = JSON.stringify(tokens);
+
+      const token = await getAuthToken();
+      expect(token).toBe("test_access_token");
+    });
+  });
+
+  describe("API Client Integration", () => {
+    it("api client exists and has required methods", () => {
+      expect(api).toBeDefined();
+      expect(typeof api.get).toBe("function");
+      expect(typeof api.post).toBe("function");
+      expect(typeof api.patch).toBe("function");
+      expect(typeof api.delete).toBe("function");
+    });
+  });
+});

package/__tests__/performance/VirtualizedList.perf.test.tsx

@@ -0,0 +1,362 @@
+/**
+ * @fileoverview Performance tests for VirtualizedList component
+ * Tests render times and memory usage with large datasets.
+ */
+
+import React from "react";
+import { render } from "@testing-library/react-native";
+import { View, Text } from "react-native";
+
+// Mock FlashList since it requires native modules
+jest.mock("@shopify/flash-list", () => {
+  const { FlatList } = require("react-native");
+  return {
+    FlashList: FlatList,
+  };
+});
+
+// Mock useTheme
+jest.mock("@/hooks/useTheme", () => ({
+  useTheme: () => ({
+    isDark: false,
+    mode: "light",
+    isLoaded: true,
+    setMode: jest.fn(),
+    toggleTheme: jest.fn(),
+  }),
+}));
+
+import { VirtualizedList } from "@/components/ui/VirtualizedList";
+
+/**
+ * Generate test data
+ */
+function generateTestData(count: number): Array<{ id: string; title: string; value: number }> {
+  return Array.from({ length: count }, (_, index) => ({
+    id: `item-${index}`,
+    title: `Item ${index}`,
+    value: Math.random() * 1000,
+  }));
+}
+
+/**
+ * Simple render item component
+ */
+function TestItem({ item }: { item: { id: string; title: string; value: number } }) {
+  return (
+    <View testID={`item-${item.id}`} style={{ height: 50, padding: 10 }}>
+      <Text>{item.title}</Text>
+      <Text>{item.value.toFixed(2)}</Text>
+    </View>
+  );
+}
+
+/**
+ * Performance thresholds (in milliseconds)
+ */
+const PERFORMANCE_THRESHOLDS = {
+  SMALL_LIST_RENDER: 100, // 100 items
+  MEDIUM_LIST_RENDER: 200, // 1000 items
+  LARGE_LIST_RENDER: 500, // 10000 items
+  INITIAL_RENDER: 50, // Initial render without data
+};
+
+describe("VirtualizedList Performance", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe("Render Time", () => {
+    it("renders empty list within threshold", () => {
+      const startTime = performance.now();
+
+      render(
+        <VirtualizedList
+          data={[]}
+          renderItem={({ item }) => <TestItem item={item} />}
+          keyExtractor={(item) => item.id}
+          estimatedItemSize={50}
+          emptyMessage="No items"
+        />
+      );
+
+      const renderTime = performance.now() - startTime;
+
+      expect(renderTime).toBeLessThan(PERFORMANCE_THRESHOLDS.INITIAL_RENDER);
+      console.log(`Empty list render time: ${renderTime.toFixed(2)}ms`);
+    });
+
+    it("renders small list (100 items) within threshold", () => {
+      const data = generateTestData(100);
+      const startTime = performance.now();
+
+      render(
+        <VirtualizedList
+          data={data}
+          renderItem={({ item }) => <TestItem item={item} />}
+          keyExtractor={(item) => item.id}
+          estimatedItemSize={50}
+        />
+      );
+
+      const renderTime = performance.now() - startTime;
+
+      expect(renderTime).toBeLessThan(PERFORMANCE_THRESHOLDS.SMALL_LIST_RENDER);
+      console.log(`Small list (100 items) render time: ${renderTime.toFixed(2)}ms`);
+    });
+
+    it("renders medium list (1000 items) within threshold", () => {
+      const data = generateTestData(1000);
+      const startTime = performance.now();
+
+      render(
+        <VirtualizedList
+          data={data}
+          renderItem={({ item }) => <TestItem item={item} />}
+          keyExtractor={(item) => item.id}
+          estimatedItemSize={50}
+        />
+      );
+
+      const renderTime = performance.now() - startTime;
+
+      expect(renderTime).toBeLessThan(PERFORMANCE_THRESHOLDS.MEDIUM_LIST_RENDER);
+      console.log(`Medium list (1000 items) render time: ${renderTime.toFixed(2)}ms`);
+    });
+
+    it("renders large list (10000 items) within threshold", () => {
+      const data = generateTestData(10000);
+      const startTime = performance.now();
+
+      render(
+        <VirtualizedList
+          data={data}
+          renderItem={({ item }) => <TestItem item={item} />}
+          keyExtractor={(item) => item.id}
+          estimatedItemSize={50}
+        />
+      );
+
+      const renderTime = performance.now() - startTime;
+
+      expect(renderTime).toBeLessThan(PERFORMANCE_THRESHOLDS.LARGE_LIST_RENDER);
+      console.log(`Large list (10000 items) render time: ${renderTime.toFixed(2)}ms`);
+    });
+  });
+
+  describe("Re-render Performance", () => {
+    it("handles data updates efficiently", () => {
+      const initialData = generateTestData(500);
+
+      const { rerender } = render(
+        <VirtualizedList
+          data={initialData}
+          renderItem={({ item }) => <TestItem item={item} />}
+          keyExtractor={(item) => item.id}
+          estimatedItemSize={50}
+        />
+      );
+
+      // Measure re-render with new data
+      const newData = generateTestData(500);
+      const startTime = performance.now();
+
+      rerender(
+        <VirtualizedList
+          data={newData}
+          renderItem={({ item }) => <TestItem item={item} />}
+          keyExtractor={(item) => item.id}
+          estimatedItemSize={50}
+        />
+      );
+
+      const rerenderTime = performance.now() - startTime;
+
+      // Re-render should be fast since only visible items are rendered
+      expect(rerenderTime).toBeLessThan(100);
+      console.log(`Re-render time (500 items): ${rerenderTime.toFixed(2)}ms`);
+    });
+
+    it("handles appending items efficiently", () => {
+      const initialData = generateTestData(100);
+
+      const { rerender } = render(
+        <VirtualizedList
+          data={initialData}
+          renderItem={({ item }) => <TestItem item={item} />}
+          keyExtractor={(item) => item.id}
+          estimatedItemSize={50}
+        />
+      );
+
+      // Append 100 more items
+      const appendedData = [...initialData, ...generateTestData(100).map((item, i) => ({
+        ...item,
+        id: `appended-${i}`,
+      }))];
+
+      const startTime = performance.now();
+
+      rerender(
+        <VirtualizedList
+          data={appendedData}
+          renderItem={({ item }) => <TestItem item={item} />}
+          keyExtractor={(item) => item.id}
+          estimatedItemSize={50}
+        />
+      );
+
+      const appendTime = performance.now() - startTime;
+
+      expect(appendTime).toBeLessThan(50);
+      console.log(`Append time (100 items): ${appendTime.toFixed(2)}ms`);
+    });
+  });
+
+  describe("Memory Efficiency", () => {
+    it("maintains stable render count with static data", () => {
+      let renderCount = 0;
+
+      const CountingItem = ({ item }: { item: { id: string; title: string; value: number } }) => {
+        renderCount++;
+        return <TestItem item={item} />;
+      };
+
+      const data = generateTestData(100);
+
+      const { rerender } = render(
+        <VirtualizedList
+          data={data}
+          renderItem={({ item }) => <CountingItem item={item} />}
+          keyExtractor={(item) => item.id}
+          estimatedItemSize={50}
+        />
+      );
+
+      const initialRenderCount = renderCount;
+
+      // Re-render with same data
+      rerender(
+        <VirtualizedList
+          data={data}
+          renderItem={({ item }) => <CountingItem item={item} />}
+          keyExtractor={(item) => item.id}
+          estimatedItemSize={50}
+        />
+      );
+
+      // With proper memoization, render count should not double
+      // Allow some flexibility for visible items being re-rendered
+      expect(renderCount).toBeLessThan(initialRenderCount * 2);
+      console.log(`Initial renders: ${initialRenderCount}, After re-render: ${renderCount}`);
+    });
+  });
+
+  describe("Props Validation", () => {
+    it("handles all size datasets without crashing", () => {
+      const sizes = [0, 1, 10, 100, 1000, 5000];
+
+      for (const size of sizes) {
+        const data = generateTestData(size);
+
+        expect(() => {
+          render(
+            <VirtualizedList
+              data={data}
+              renderItem={({ item }) => <TestItem item={item} />}
+              keyExtractor={(item) => item.id}
+              estimatedItemSize={50}
+            />
+          );
+        }).not.toThrow();
+      }
+    });
+
+    it("handles undefined/null items gracefully", () => {
+      const data = [
+        { id: "1", title: "Item 1", value: 100 },
+        { id: "2", title: "Item 2", value: 200 },
+      ];
+
+      expect(() => {
+        render(
+          <VirtualizedList
+            data={data}
+            renderItem={({ item }) => (item ? <TestItem item={item} /> : null)}
+            keyExtractor={(item) => item?.id || "unknown"}
+            estimatedItemSize={50}
+          />
+        );
+      }).not.toThrow();
+    });
+  });
+});
+
+describe("Performance Metrics Summary", () => {
+  it("logs performance summary", () => {
+    const metrics = {
+      emptyList: 0,
+      smallList: 0,
+      mediumList: 0,
+      largeList: 0,
+    };
+
+    // Empty list
+    let start = performance.now();
+    render(
+      <VirtualizedList
+        data={[]}
+        renderItem={({ item }) => <TestItem item={item} />}
+        keyExtractor={(item) => item.id}
+        estimatedItemSize={50}
+      />
+    );
+    metrics.emptyList = performance.now() - start;
+
+    // Small list
+    start = performance.now();
+    render(
+      <VirtualizedList
+        data={generateTestData(100)}
+        renderItem={({ item }) => <TestItem item={item} />}
+        keyExtractor={(item) => item.id}
+        estimatedItemSize={50}
+      />
+    );
+    metrics.smallList = performance.now() - start;
+
+    // Medium list
+    start = performance.now();
+    render(
+      <VirtualizedList
+        data={generateTestData(1000)}
+        renderItem={({ item }) => <TestItem item={item} />}
+        keyExtractor={(item) => item.id}
+        estimatedItemSize={50}
+      />
+    );
+    metrics.mediumList = performance.now() - start;
+
+    // Large list
+    start = performance.now();
+    render(
+      <VirtualizedList
+        data={generateTestData(10000)}
+        renderItem={({ item }) => <TestItem item={item} />}
+        keyExtractor={(item) => item.id}
+        estimatedItemSize={50}
+      />
+    );
+    metrics.largeList = performance.now() - start;
+
+    console.log("\n=== VirtualizedList Performance Summary ===");
+    console.log(`Empty list:        ${metrics.emptyList.toFixed(2)}ms`);
+    console.log(`Small (100):       ${metrics.smallList.toFixed(2)}ms`);
+    console.log(`Medium (1000):     ${metrics.mediumList.toFixed(2)}ms`);
+    console.log(`Large (10000):     ${metrics.largeList.toFixed(2)}ms`);
+    console.log("==========================================\n");
+
+    // This test always passes, it's just for logging
+    expect(true).toBe(true);
+  });
+});