@uploadista/react 0.0.20 → 0.1.0

package/src/__tests__/use-upload.test.tsx

@@ -0,0 +1,317 @@
+import { act, renderHook } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { describe, expect, it, vi, beforeEach, type MockInstance } from "vitest";
+import { UploadistaProvider } from "../components/uploadista-provider";
+import { useUpload } from "../hooks/use-upload";
+
+// Create mock manager instance
+const mockManagerInstance = {
+  upload: vi.fn(),
+  abort: vi.fn(),
+  reset: vi.fn(),
+  retry: vi.fn(),
+  cleanup: vi.fn(),
+  canRetry: vi.fn(() => false),
+};
+
+// Keep track of UploadManager constructor calls
+let uploadManagerConstructorCalls: any[] = [];
+
+// Mock dependencies
+vi.mock("@uploadista/client-browser", () => ({
+  createUploadistaClient: vi.fn(() => ({
+    upload: vi.fn(),
+    executeFlow: vi.fn(),
+    discoverFlowInputs: vi.fn(),
+    uploadWithFlow: vi.fn(),
+    multiInputFlowUpload: vi.fn(),
+    getChunkingInsights: vi.fn(() => ({
+      currentChunkSize: 1024 * 1024,
+      recommendedChunkSize: 1024 * 1024,
+      networkCondition: "good",
+    })),
+    exportMetrics: vi.fn(() => ({})),
+    getNetworkMetrics: vi.fn(() => ({
+      averageSpeed: 1024 * 1024,
+      currentSpeed: 1024 * 1024,
+      estimatedTimeRemaining: 0,
+    })),
+    getNetworkCondition: vi.fn(() => "good"),
+    resetMetrics: vi.fn(),
+  })),
+}));
+
+vi.mock("@uploadista/client-core", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@uploadista/client-core")>();
+
+  // Use a proper class mock
+  class MockUploadManager {
+    constructor(...args: any[]) {
+      uploadManagerConstructorCalls.push(args);
+      Object.assign(this, mockManagerInstance);
+    }
+
+    upload = mockManagerInstance.upload;
+    abort = mockManagerInstance.abort;
+    reset = mockManagerInstance.reset;
+    retry = mockManagerInstance.retry;
+    cleanup = mockManagerInstance.cleanup;
+    canRetry = mockManagerInstance.canRetry;
+  }
+
+  return {
+    ...actual,
+    UploadManager: MockUploadManager,
+    FlowManager: class MockFlowManager {
+      handleFlowEvent = vi.fn();
+      handleUploadProgress = vi.fn();
+      cleanup = vi.fn();
+    },
+  };
+});
+
+// Wrapper component that provides the context
+const wrapper = ({ children }: { children: ReactNode }) => (
+  <UploadistaProvider
+    baseUrl="https://api.example.com"
+    storageId="test"
+    chunkSize={1024 * 1024}
+    storeFingerprintForResuming={true}
+  >
+    {children}
+  </UploadistaProvider>
+);
+
+describe("useUpload", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    uploadManagerConstructorCalls = [];
+    // Reset mock functions
+    mockManagerInstance.upload.mockClear();
+    mockManagerInstance.abort.mockClear();
+    mockManagerInstance.reset.mockClear();
+    mockManagerInstance.retry.mockClear();
+    mockManagerInstance.cleanup.mockClear();
+    mockManagerInstance.canRetry.mockReturnValue(false);
+  });
+
+  describe("initial state", () => {
+    it("should have correct initial state", () => {
+      const { result } = renderHook(() => useUpload(), { wrapper });
+
+      expect(result.current.state).toEqual({
+        status: "idle",
+        progress: 0,
+        bytesUploaded: 0,
+        totalBytes: null,
+        error: null,
+        result: null,
+      });
+    });
+
+    it("should return isUploading as false initially", () => {
+      const { result } = renderHook(() => useUpload(), { wrapper });
+
+      expect(result.current.isUploading).toBe(false);
+    });
+
+    it("should return canRetry as false initially", () => {
+      const { result } = renderHook(() => useUpload(), { wrapper });
+
+      expect(result.current.canRetry).toBe(false);
+    });
+
+    it("should return control methods", () => {
+      const { result } = renderHook(() => useUpload(), { wrapper });
+
+      expect(typeof result.current.upload).toBe("function");
+      expect(typeof result.current.abort).toBe("function");
+      expect(typeof result.current.reset).toBe("function");
+      expect(typeof result.current.retry).toBe("function");
+    });
+
+    it("should return metrics object", () => {
+      const { result } = renderHook(() => useUpload(), { wrapper });
+
+      expect(result.current.metrics).toBeDefined();
+      expect(typeof result.current.metrics.getInsights).toBe("function");
+      expect(typeof result.current.metrics.exportMetrics).toBe("function");
+      expect(typeof result.current.metrics.getNetworkMetrics).toBe("function");
+      expect(typeof result.current.metrics.getNetworkCondition).toBe("function");
+      expect(typeof result.current.metrics.resetMetrics).toBe("function");
+    });
+  });
+
+  describe("UploadManager initialization", () => {
+    it("should create UploadManager on mount", () => {
+      renderHook(() => useUpload(), { wrapper });
+
+      expect(uploadManagerConstructorCalls.length).toBeGreaterThan(0);
+    });
+
+    it("should pass upload function as first argument to UploadManager", () => {
+      renderHook(() => useUpload(), { wrapper });
+
+      expect(uploadManagerConstructorCalls.length).toBeGreaterThan(0);
+      expect(typeof uploadManagerConstructorCalls[0][0]).toBe("function");
+    });
+
+    it("should pass callbacks to UploadManager", () => {
+      const onProgress = vi.fn();
+      const onChunkComplete = vi.fn();
+      const onSuccess = vi.fn();
+      const onError = vi.fn();
+      const onAbort = vi.fn();
+
+      renderHook(
+        () =>
+          useUpload({
+            onProgress,
+            onChunkComplete,
+            onSuccess,
+            onError,
+            onAbort,
+          }),
+        { wrapper },
+      );
+
+      expect(uploadManagerConstructorCalls.length).toBeGreaterThan(0);
+      const callbacks = uploadManagerConstructorCalls[0][1];
+      expect(callbacks.onProgress).toBe(onProgress);
+      expect(callbacks.onChunkComplete).toBe(onChunkComplete);
+      expect(callbacks.onSuccess).toBe(onSuccess);
+      expect(callbacks.onError).toBe(onError);
+      expect(callbacks.onAbort).toBe(onAbort);
+    });
+
+    it("should pass options to UploadManager", () => {
+      const metadata = { key: "value" };
+      const onShouldRetry = vi.fn();
+
+      renderHook(
+        () =>
+          useUpload({
+            metadata,
+            uploadLengthDeferred: true,
+            uploadSize: 1000,
+            onShouldRetry,
+          }),
+        { wrapper },
+      );
+
+      expect(uploadManagerConstructorCalls.length).toBeGreaterThan(0);
+      const options = uploadManagerConstructorCalls[0][2];
+      expect(options.metadata).toEqual(metadata);
+      expect(options.uploadLengthDeferred).toBe(true);
+      expect(options.uploadSize).toBe(1000);
+      expect(options.onShouldRetry).toBe(onShouldRetry);
+    });
+
+    it("should cleanup UploadManager on unmount", () => {
+      const { unmount } = renderHook(() => useUpload(), { wrapper });
+
+      unmount();
+
+      expect(mockManagerInstance.cleanup).toHaveBeenCalled();
+    });
+  });
+
+  describe("upload method", () => {
+    it("should call manager.upload when upload is called", () => {
+      const { result } = renderHook(() => useUpload(), { wrapper });
+
+      const mockFile = new File(["test"], "test.txt", { type: "text/plain" });
+
+      act(() => {
+        result.current.upload(mockFile);
+      });
+
+      expect(mockManagerInstance.upload).toHaveBeenCalledWith(mockFile);
+    });
+  });
+
+  describe("abort method", () => {
+    it("should call manager.abort when abort is called", () => {
+      const { result } = renderHook(() => useUpload(), { wrapper });
+
+      act(() => {
+        result.current.abort();
+      });
+
+      expect(mockManagerInstance.abort).toHaveBeenCalled();
+    });
+  });
+
+  describe("reset method", () => {
+    it("should call manager.reset when reset is called", () => {
+      const { result } = renderHook(() => useUpload(), { wrapper });
+
+      act(() => {
+        result.current.reset();
+      });
+
+      expect(mockManagerInstance.reset).toHaveBeenCalled();
+    });
+  });
+
+  describe("retry method", () => {
+    it("should call manager.retry when retry is called", () => {
+      const { result } = renderHook(() => useUpload(), { wrapper });
+
+      act(() => {
+        result.current.retry();
+      });
+
+      expect(mockManagerInstance.retry).toHaveBeenCalled();
+    });
+  });
+
+  describe("canRetry", () => {
+    it("should return manager canRetry value after re-render", () => {
+      mockManagerInstance.canRetry.mockReturnValue(true);
+
+      const { result, rerender } = renderHook(() => useUpload(), { wrapper });
+
+      // Initial render - manager is created in useEffect, so canRetry is computed
+      // After re-render, canRetry should reflect manager's value
+      rerender();
+
+      expect(result.current.canRetry).toBe(true);
+    });
+
+    it("should return false when manager.canRetry returns false", () => {
+      mockManagerInstance.canRetry.mockReturnValue(false);
+
+      const { result, rerender } = renderHook(() => useUpload(), { wrapper });
+      rerender();
+
+      expect(result.current.canRetry).toBe(false);
+    });
+  });
+
+  describe("error handling", () => {
+    it("should throw when used outside provider", () => {
+      expect(() => {
+        renderHook(() => useUpload());
+      }).toThrow("useUploadistaContext must be used within an UploadistaProvider");
+    });
+  });
+
+  describe("method stability", () => {
+    it("should return stable method references", () => {
+      const { result, rerender } = renderHook(() => useUpload(), { wrapper });
+
+      const firstUpload = result.current.upload;
+      const firstAbort = result.current.abort;
+      const firstReset = result.current.reset;
+      const firstRetry = result.current.retry;
+
+      rerender();
+
+      expect(result.current.upload).toBe(firstUpload);
+      expect(result.current.abort).toBe(firstAbort);
+      expect(result.current.reset).toBe(firstReset);
+      expect(result.current.retry).toBe(firstRetry);
+    });
+  });
+});

package/src/__tests__/use-uploadista-client.test.tsx

@@ -0,0 +1,208 @@
+import { renderHook } from "@testing-library/react";
+import { createUploadistaClient } from "@uploadista/client-browser";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { useUploadistaClient } from "../hooks/use-uploadista-client";
+
+vi.mock("@uploadista/client-browser", () => ({
+  createUploadistaClient: vi.fn(() => ({
+    upload: vi.fn(),
+    executeFlow: vi.fn(),
+    discoverFlowInputs: vi.fn(),
+  })),
+}));
+
+describe("useUploadistaClient", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe("client creation", () => {
+    it("should create a client with provided options", () => {
+      const options = {
+        baseUrl: "https://api.example.com",
+        storageId: "test-storage",
+        chunkSize: 1024 * 1024,
+        storeFingerprintForResuming: true,
+      };
+
+      renderHook(() => useUploadistaClient(options));
+
+      expect(createUploadistaClient).toHaveBeenCalledWith(
+        expect.objectContaining({
+          baseUrl: "https://api.example.com",
+          storageId: "test-storage",
+          chunkSize: 1024 * 1024,
+          storeFingerprintForResuming: true,
+        }),
+      );
+    });
+
+    it("should return client and config", () => {
+      const options = {
+        baseUrl: "https://api.example.com",
+        storageId: "test-storage",
+        chunkSize: 1024 * 1024,
+        storeFingerprintForResuming: true,
+      };
+
+      const { result } = renderHook(() => useUploadistaClient(options));
+
+      expect(result.current.client).toBeDefined();
+      expect(result.current.config).toEqual(options);
+    });
+  });
+
+  describe("memoization", () => {
+    it("should return same client instance when options are stable", () => {
+      const options = {
+        baseUrl: "https://api.example.com",
+        storageId: "test-storage",
+        chunkSize: 1024 * 1024,
+        storeFingerprintForResuming: true,
+      };
+
+      const { result, rerender } = renderHook(() =>
+        useUploadistaClient(options),
+      );
+
+      const firstClient = result.current.client;
+
+      rerender();
+
+      expect(result.current.client).toBe(firstClient);
+      expect(createUploadistaClient).toHaveBeenCalledTimes(1);
+    });
+
+    it("should create new client when baseUrl changes", () => {
+      const { rerender } = renderHook(
+        ({ baseUrl }) =>
+          useUploadistaClient({
+            baseUrl,
+            storageId: "test-storage",
+            chunkSize: 1024 * 1024,
+            storeFingerprintForResuming: true,
+          }),
+        {
+          initialProps: { baseUrl: "https://api1.example.com" },
+        },
+      );
+
+      expect(createUploadistaClient).toHaveBeenCalledTimes(1);
+
+      rerender({ baseUrl: "https://api2.example.com" });
+
+      expect(createUploadistaClient).toHaveBeenCalledTimes(2);
+    });
+
+    it("should create new client when storageId changes", () => {
+      const { rerender } = renderHook(
+        ({ storageId }) =>
+          useUploadistaClient({
+            baseUrl: "https://api.example.com",
+            storageId,
+            chunkSize: 1024 * 1024,
+            storeFingerprintForResuming: true,
+          }),
+        {
+          initialProps: { storageId: "storage-1" },
+        },
+      );
+
+      expect(createUploadistaClient).toHaveBeenCalledTimes(1);
+
+      rerender({ storageId: "storage-2" });
+
+      expect(createUploadistaClient).toHaveBeenCalledTimes(2);
+    });
+
+    it("should create new client when chunkSize changes", () => {
+      const { rerender } = renderHook(
+        ({ chunkSize }) =>
+          useUploadistaClient({
+            baseUrl: "https://api.example.com",
+            storageId: "test-storage",
+            chunkSize,
+            storeFingerprintForResuming: true,
+          }),
+        {
+          initialProps: { chunkSize: 1024 * 1024 },
+        },
+      );
+
+      expect(createUploadistaClient).toHaveBeenCalledTimes(1);
+
+      rerender({ chunkSize: 2 * 1024 * 1024 });
+
+      expect(createUploadistaClient).toHaveBeenCalledTimes(2);
+    });
+  });
+
+  describe("options passthrough", () => {
+    it("should pass all client options to createUploadistaClient", () => {
+      const onEvent = vi.fn();
+      const connectionPoolingConfig = { maxConnectionsPerHost: 6 };
+      const options = {
+        baseUrl: "https://api.example.com",
+        storageId: "test-storage",
+        uploadistaBasePath: "/custom/upload",
+        chunkSize: 2 * 1024 * 1024,
+        storeFingerprintForResuming: true,
+        retryDelays: [1000, 2000, 5000],
+        parallelUploads: 3,
+        parallelChunkSize: 5,
+        uploadStrategy: { preferredStrategy: "parallel" as const },
+        smartChunking: { enabled: true },
+        networkMonitoring: { maxSamples: 100 },
+        uploadMetrics: { maxChunkHistory: 500 },
+        connectionPooling: connectionPoolingConfig,
+        auth: { mode: "direct" as const, getCredentials: () => ({ headers: { Authorization: "Bearer test-token" } }) },
+        onEvent,
+      };
+
+      renderHook(() => useUploadistaClient(options));
+
+      expect(createUploadistaClient).toHaveBeenCalledWith(
+        expect.objectContaining({
+          baseUrl: "https://api.example.com",
+          storageId: "test-storage",
+          uploadistaBasePath: "/custom/upload",
+          chunkSize: 2 * 1024 * 1024,
+          storeFingerprintForResuming: true,
+          retryDelays: [1000, 2000, 5000],
+          parallelUploads: 3,
+          parallelChunkSize: 5,
+          uploadStrategy: { preferredStrategy: "parallel" },
+          smartChunking: { enabled: true },
+          networkMonitoring: { maxSamples: 100 },
+          uploadMetrics: { maxChunkHistory: 500 },
+          connectionPooling: connectionPoolingConfig,
+          auth: expect.objectContaining({ mode: "direct" }),
+          onEvent,
+        }),
+      );
+    });
+  });
+
+  describe("config updates", () => {
+    it("should return updated config when options change", () => {
+      const { result, rerender } = renderHook(
+        ({ storageId }) =>
+          useUploadistaClient({
+            baseUrl: "https://api.example.com",
+            storageId,
+            chunkSize: 1024 * 1024,
+            storeFingerprintForResuming: true,
+          }),
+        {
+          initialProps: { storageId: "storage-1" },
+        },
+      );
+
+      expect(result.current.config.storageId).toBe("storage-1");
+
+      rerender({ storageId: "storage-2" });
+
+      expect(result.current.config.storageId).toBe("storage-2");
+    });
+  });
+});

package/src/components/flow-primitives.tsx

@@ -7,12 +7,7 @@ import type {
   InputExecutionState,
 } from "@uploadista/client-core";
 import type { TypedOutput } from "@uploadista/core/flow";
-import {
-  type ReactNode,
-  createContext,
-  useCallback,
-  useContext,
-} from "react";
+import { createContext, type ReactNode, useCallback, useContext } from "react";
 import {
   type DragDropState,
   type UseDragDropReturn,
@@ -78,7 +73,7 @@ export function useFlowContext(): FlowContextValue {
   if (!context) {
     throw new Error(
       "useFlowContext must be used within a <Flow> component. " +
-        "Wrap your component tree with <Flow flowId=\"...\" storageId=\"...\">",
+        'Wrap your component tree with <Flow flowId="..." storageId="...">',
     );
   }
   return context;
@@ -113,7 +108,7 @@ export function useFlowInputContext(): FlowInputContextValue {
   if (!context) {
     throw new Error(
       "useFlowInputContext must be used within a <Flow.Input> component. " +
-        "Wrap your component with <Flow.Input nodeId=\"...\">",
+        'Wrap your component with <Flow.Input nodeId="...">',
     );
   }
   return context;

package/src/components/index.tsx

@@ -1,9 +1,5 @@
 // Flow Primitives (NEW compound component)
-export {
-  Flow,
-  useFlowContext,
-  useFlowInputContext,
-} from "./flow-primitives";
+
 export type {
   FlowCancelProps,
   FlowContextValue,
@@ -28,6 +24,11 @@ export type {
   FlowStatusRenderProps,
   FlowSubmitProps,
 } from "./flow-primitives";
+export {
+  Flow,
+  useFlowContext,
+  useFlowInputContext,
+} from "./flow-primitives";
 
 // Flow Upload List (for batch uploads with useMultiFlowUpload)
 export type {
@@ -49,7 +50,37 @@ export type {
   UploadListRenderProps,
 } from "./upload-list";
 export { SimpleUploadListItem, UploadList } from "./upload-list";
-
+export type {
+  MultiUploadState,
+  UploadCancelProps,
+  UploadClearCompletedProps,
+  UploadContextValue,
+  UploadDropZoneProps,
+  UploadDropZoneRenderProps,
+  UploadErrorProps,
+  UploadErrorRenderProps,
+  UploadItem,
+  UploadItemContextValue,
+  UploadItemProps,
+  UploadItemsProps,
+  UploadItemsRenderProps,
+  UploadProgressProps,
+  UploadProgressRenderProps,
+  UploadProps,
+  UploadResetProps,
+  UploadRetryProps,
+  UploadStartAllProps,
+  UploadState,
+  UploadStatus,
+  UploadStatusProps,
+  UploadStatusRenderProps,
+} from "./upload-primitives";
+// Upload Primitives (NEW compound component)
+export {
+  Upload,
+  useUploadContext,
+  useUploadItemContext,
+} from "./upload-primitives";
 export type {
   SimpleUploadZoneProps,
   UploadZoneProps,