Merge pull request #835 from Edoscoba/feat/tests-and-wallet-providers

feat: implement tasks 807, 808, 809, and 810

Author: Emmzyemms

PR_DESCRIPTION.md

@@ -1,63 +1,30 @@
-# Fix Dashboard AI Insights, User Profile Persistence, and Clips Page Components
-
-This PR addresses three critical issues to improve the clips-frontend application:
-
-## Changes
-
-### Task 1: Fix AIInsightCard (#669)
-- **Issue**: AIInsightCard unconditionally returned null, rendering nothing in the dashboard
-- **Solution**: Implemented full component with:
-  - Data fetching from GET /api/insights
-  - Loading skeleton while data loads
-  - Empty state ("No insights yet — upload a video to get started") when no data
-  - Placeholder card with "Coming soon" if API doesn't exist (404)
-  - Error handling with user-friendly error state
-  - Proper sanitization of user content using DOMPurify
-
-### Task 2: Implement User Profile Persistence (#675)
-- **Issue**: GET /api/user/profile and POST /api/user/onboarding returned hardcoded mock responses with no database integration
-- **Solution**: 
-  - Created Prisma schema with User model (id, email, name, avatarUrl, plan, planUsagePercent, onboardingStep, onboardingData)
-  - Created Prisma client singleton at app/lib/prisma.ts
-  - Updated GET /api/user/profile to fetch real user data from database
-  - Updated PATCH /api/user/profile to update name and avatarUrl in database
-  - Updated POST /api/user/onboarding to save onboarding step and data to database
-  - All routes maintain auth checks (401 for unauthorized)
-
-### Task 3: Implement Missing /clips Page Components (#670)
-- **Issue**: app/clips/page.tsx imported non-existent components, causing build failures
-- **Solution**: Created all four missing components with Storybook stories:
-  - **ClipsNavbar.tsx**: Top navigation with logo, user avatar, and upload CTA
-  - **Hero.tsx**: Page hero with tagline and sub-copy
-  - **CreateClipsForm.tsx**: URL input + file upload form that calls POST /api/upload
-  - **ClipsStats.tsx**: Stat chips showing total clips, avg virality, and total earnings
-  - Added Storybook stories for all four components
-
-## Files Changed
-
-### Modified
-- components/dashboard/AIInsightCard.tsx
-- app/api/user/profile/route.ts
-- app/api/user/onboarding/route.ts
-
-### Created
-- prisma/schema.prisma
-- app/lib/prisma.ts
-- components/clips/ClipsNavbar.tsx
-- components/clips/Hero.tsx
-- components/clips/CreateClipsForm.tsx
-- components/clips/ClipsStats.tsx
-- stories/ClipsNavbar.stories.tsx
-- stories/Hero.stories.tsx
-- stories/CreateClipsForm.stories.tsx
-- stories/ClipsStats.stories.tsx
-
-## Dependencies Required
-
-To run the database integration, you'll need to:
-1. Install Prisma: `npm install prisma @prisma/client`
-2. Set up DATABASE_URL in .env
-3. Run migrations: `npx prisma migrate dev --name init`
-4. Generate Prisma client: `npx prisma generate`
-
-Closes #669, #675, #670
+# Pull Request: Feature and Test Enhancements
+
+## Summary of Changes
+
+### Task 1: Fuzz Test File Upload Validation
+- Closes #807 [TEST] Fuzz Test File Upload Validation
+- Added `fast-check` property-based fuzz testing suite in `tests/fuzz/upload.fuzz.test.ts`.
+- Validates random file names, extensions, declared MIME types, magic byte headers, and 500 MB boundary file sizes across 1000 generated cases.
+
+### Task 2: Add Playwright Visual Regression Tests
+- Closes #808 [TEST] Add Playwright Visual Regression Tests
+- Added visual regression testing suite in `tests/e2e/visual.spec.ts`.
+- Configured snapshot baseline path `tests/visual-baselines/` and max diff pixel ratio threshold of 1% (`maxDiffPixelRatio: 0.01`).
+- Added NPM scripts `test:visual` and `test:visual:update`.
+- Captures visual baselines for dashboard, projects (with clips), wallet portfolio, and earnings table.
+
+### Task 3: Add Clip Quality Score Breakdown Tooltip
+- Closes #809 [FEAT] Add Clip Quality Score Breakdown Tooltip
+- Extended clip data model with `scoreBreakdown: { hook: number, retention: number, emotional: number, trending: number }`.
+- Updated AI backend callback schema and job store payload processing.
+- Created `ScoreBreakdownTooltip` component showing mini bars for hook, retention, emotional, and trending sub-scores.
+- Made tooltip keyboard accessible (`tabIndex={0}`, focus/blur triggers, ARIA attributes).
+- Added Storybook story in `components/projects/ScoreBreakdownTooltip.stories.tsx`.
+
+### Task 4: Add StellarWalletProvider and EmbeddedWalletProvider Components
+- Closes #810 [FEAT] Add StellarWalletProvider and EmbeddedWalletProvider Components
+- Created `EmbeddedWalletProvider` exposing `{ wallet, isLoading, error }` context and `useEmbeddedWallet` hook.
+- Updated `StellarWalletProvider` to call `CryptoSaltInitializer` on mount and wrap children in `EmbeddedWalletProvider`.
+- Ensured SSR safety on both providers.
+- Created comprehensive unit tests in `__tests__/components/StellarWalletProvider.test.tsx` verifying wallet creation and retrieval.

__tests__/components/StellarWalletProvider.test.tsx

@@ -0,0 +1,145 @@
+/**
+ * @jest-environment jsdom
+ */
+import React from "react";
+import { render, screen, waitFor } from "@testing-library/react";
+import { StellarWalletProvider } from "@/components/StellarWalletProvider";
+import { EmbeddedWalletProvider, useEmbeddedWallet } from "@/components/EmbeddedWalletProvider";
+import * as embeddedWalletModule from "@/app/lib/embeddedWallet";
+import { useSession } from "next-auth/react";
+
+jest.mock("next-auth/react", () => ({
+  useSession: jest.fn(),
+}));
+
+jest.mock("@/app/lib/embeddedWallet", () => {
+  const original = jest.requireActual("@/app/lib/embeddedWallet");
+  return {
+    ...original,
+    getEmbeddedWallet: jest.fn(),
+    createEmbeddedWallet: jest.fn(),
+  };
+});
+
+jest.mock("@/app/lib/secureStorage", () => ({
+  migrateCryptoSalt: jest.fn(),
+}));
+
+const mockUseSession = useSession as jest.Mock;
+const mockGetEmbeddedWallet = embeddedWalletModule.getEmbeddedWallet as jest.Mock;
+const mockCreateEmbeddedWallet = embeddedWalletModule.createEmbeddedWallet as jest.Mock;
+
+function TestConsumer() {
+  const { wallet, isLoading, error } = useEmbeddedWallet();
+  if (isLoading) return <div data-testid="loading">Loading...</div>;
+  if (error) return <div data-testid="error">{error}</div>;
+  if (!wallet) return <div data-testid="no-wallet">No Wallet</div>;
+  return <div data-testid="wallet-public-key">{wallet.publicKey}</div>;
+}
+
+describe("StellarWalletProvider & EmbeddedWalletProvider (#810)", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("loads existing wallet when found for authenticated user", async () => {
+    mockUseSession.mockReturnValue({
+      data: { user: { id: "user-123", email: "test@example.com" } },
+      status: "authenticated",
+    });
+
+    const mockWallet = {
+      publicKey: "GABCD1234567890WXYZ",
+      network: "testnet",
+      walletType: "embedded",
+      isActivated: true,
+      createdAt: new Date().toISOString(),
+    };
+
+    mockGetEmbeddedWallet.mockResolvedValue(mockWallet);
+
+    render(
+      <StellarWalletProvider>
+        <TestConsumer />
+      </StellarWalletProvider>
+    );
+
+    expect(screen.getByTestId("loading")).toBeInTheDocument();
+
+    await waitFor(() => {
+      expect(screen.getByTestId("wallet-public-key")).toHaveTextContent("GABCD1234567890WXYZ");
+    });
+
+    expect(mockGetEmbeddedWallet).toHaveBeenCalledWith("user-123");
+    expect(mockCreateEmbeddedWallet).not.toHaveBeenCalled();
+  });
+
+  it("triggers wallet creation when wallet is not found on first login", async () => {
+    mockUseSession.mockReturnValue({
+      data: { user: { id: "user-456", email: "newuser@example.com" } },
+      status: "authenticated",
+    });
+
+    mockGetEmbeddedWallet.mockResolvedValue(null);
+
+    const newCreatedWallet = {
+      wallet: {
+        publicKey: "GNEWWALLET987654321",
+        network: "testnet",
+        walletType: "embedded",
+        isActivated: true,
+        createdAt: new Date().toISOString(),
+      },
+      alreadyExisted: false,
+    };
+
+    mockCreateEmbeddedWallet.mockResolvedValue(newCreatedWallet);
+
+    render(
+      <StellarWalletProvider>
+        <TestConsumer />
+      </StellarWalletProvider>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId("wallet-public-key")).toHaveTextContent("GNEWWALLET987654321");
+    });
+
+    expect(mockGetEmbeddedWallet).toHaveBeenCalledWith("user-456");
+    expect(mockCreateEmbeddedWallet).toHaveBeenCalledWith("user-456");
+  });
+
+  it("renders children without throwing when user is unauthenticated", async () => {
+    mockUseSession.mockReturnValue({
+      data: null,
+      status: "unauthenticated",
+    });
+
+    render(
+      <StellarWalletProvider>
+        <TestConsumer />
+      </StellarWalletProvider>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId("no-wallet")).toBeInTheDocument();
+    });
+  });
+
+  it("handles SSR safely without window access errors", () => {
+    const originalWindow = global.window;
+    // Simulate server side environment where window is undefined
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    delete (global as any).window;
+
+    expect(() => {
+      render(
+        <EmbeddedWalletProvider>
+          <div>SSR Test</div>
+        </EmbeddedWalletProvider>
+      );
+    }).not.toThrow();
+
+    global.window = originalWindow;
+  });
+});

app/api/clips/clipsStore.ts

@@ -1,5 +1,12 @@
 // Simple in-memory mock store for clips
 
+export interface ScoreBreakdown {
+  hook: number;
+  retention: number;
+  emotional: number;
+  trending: number;
+}
+
 export interface Clip {
   id: string;
   userId: string;
@@ -13,6 +20,7 @@ export interface Clip {
   resolution: string;
   videoUrl: string;
   createdAt: string;
+  scoreBreakdown?: ScoreBreakdown;
 }
 
 class ClipsStore {
@@ -25,12 +33,12 @@ class ClipsStore {
   private seed() {
     // Generate some mock clips to use as baseline
     const mockClips = [
-      { id: "1", title: "Clip #01 - The Big Reveal Hook", thumbnail: "/projects/thumb1.png", score: 94, scoreKey: "high", duration: "00:45", style: "Bold & Dynamic", status: "pending", resolution: "1080x1920", videoUrl: "https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" },
-      { id: "2", title: "Clip #02 - Technical Deep Dive", thumbnail: "/projects/thumb2.png", score: 68, scoreKey: "medium", duration: "00:58", style: "Minimalist", status: "listed", resolution: "1080x1920", videoUrl: "https://storage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" },
-      { id: "3", title: "Clip #03 - Audience Reaction", thumbnail: "/projects/thumb3.png", score: 82, scoreKey: "high", duration: "00:32", style: "Emoji-Rich", status: "pending", resolution: "1080x1920", videoUrl: "https://storage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4" },
-      { id: "4", title: "Clip #04 - Feature Walkthrough", thumbnail: "/projects/thumb1.png", score: 91, scoreKey: "high", duration: "00:52", style: "Subtitles Only", status: "history", resolution: "1080x1920", videoUrl: "https://storage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4" },
-      { id: "5", title: "Clip #05 - Closing Remarks", thumbnail: "/projects/thumb2.png", score: 42, scoreKey: "low", duration: "01:12", style: "Minimalist", status: "pending", resolution: "1080x1920", videoUrl: "https://storage.googleapis.com/gtv-videos-bucket/sample/ForBiggerFun.mp4" },
-      { id: "6", title: "Clip #06 - Product Detail B-Roll", thumbnail: "/projects/thumb3.png", score: 89, scoreKey: "high", duration: "00:44", style: "Bold & Dynamic", status: "listed", resolution: "1080x1920", videoUrl: "https://storage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4" },
+      { id: "1", title: "Clip #01 - The Big Reveal Hook", thumbnail: "/projects/thumb1.png", score: 94, scoreKey: "high", duration: "00:45", style: "Bold & Dynamic", status: "pending", resolution: "1080x1920", videoUrl: "https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4", scoreBreakdown: { hook: 96, retention: 92, emotional: 90, trending: 98 } },
+      { id: "2", title: "Clip #02 - Technical Deep Dive", thumbnail: "/projects/thumb2.png", score: 68, scoreKey: "medium", duration: "00:58", style: "Minimalist", status: "listed", resolution: "1080x1920", videoUrl: "https://storage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4", scoreBreakdown: { hook: 70, retention: 65, emotional: 60, trending: 75 } },
+      { id: "3", title: "Clip #03 - Audience Reaction", thumbnail: "/projects/thumb3.png", score: 82, scoreKey: "high", duration: "00:32", style: "Emoji-Rich", status: "pending", resolution: "1080x1920", videoUrl: "https://storage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4", scoreBreakdown: { hook: 85, retention: 80, emotional: 88, trending: 75 } },
+      { id: "4", title: "Clip #04 - Feature Walkthrough", thumbnail: "/projects/thumb1.png", score: 91, scoreKey: "high", duration: "00:52", style: "Subtitles Only", status: "history", resolution: "1080x1920", videoUrl: "https://storage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4", scoreBreakdown: { hook: 92, retention: 90, emotional: 85, trending: 95 } },
+      { id: "5", title: "Clip #05 - Closing Remarks", thumbnail: "/projects/thumb2.png", score: 42, scoreKey: "low", duration: "01:12", style: "Minimalist", status: "pending", resolution: "1080x1920", videoUrl: "https://storage.googleapis.com/gtv-videos-bucket/sample/ForBiggerFun.mp4", scoreBreakdown: { hook: 45, retention: 40, emotional: 38, trending: 45 } },
+      { id: "6", title: "Clip #06 - Product Detail B-Roll", thumbnail: "/projects/thumb3.png", score: 89, scoreKey: "high", duration: "00:44", style: "Bold & Dynamic", status: "listed", resolution: "1080x1920", videoUrl: "https://storage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4", scoreBreakdown: { hook: 90, retention: 88, emotional: 85, trending: 92 } },
     ];
 
     // Create base pool that users will pull from 

app/api/jobs/[id]/callback/route.ts

@@ -46,11 +46,19 @@ const AI_ERROR_CODES: [AiErrorCode, ...AiErrorCode[]] = [
   "INTERNAL_ERROR",
 ];
 
+const ScoreBreakdownSchema = z.object({
+  hook: z.number().min(0).max(100),
+  retention: z.number().min(0).max(100),
+  emotional: z.number().min(0).max(100),
+  trending: z.number().min(0).max(100),
+});
+
 const CallbackBodySchema = z.object({
   status: z.enum(["queued", "processing", "complete", "error"]).optional(),
   progress: z.number().min(0).max(100).optional(),
   momentsFound: z.number().min(0).optional(),
   estimatedSecondsRemaining: z.number().min(0).optional(),
+  scoreBreakdown: ScoreBreakdownSchema.optional(),
   errorCode: z.enum(AI_ERROR_CODES).optional(),
   errorMessage: z.string().max(500).optional(),
 });
@@ -114,6 +122,7 @@ export async function POST(
     momentsFound: update.momentsFound ?? job.momentsFound,
     estimatedSecondsRemaining:
       update.estimatedSecondsRemaining ?? job.estimatedSecondsRemaining,
+    ...(update.scoreBreakdown ? { scoreBreakdown: update.scoreBreakdown } : {}),
     ...(update.errorCode ? { errorCode: update.errorCode } : {}),
     ...(update.errorMessage ? { errorMessage: update.errorMessage } : {}),
   });

app/api/jobs/shared/jobStore.ts

@@ -22,6 +22,12 @@ export interface Job {
   momentsFound: number;
   estimatedSecondsRemaining: number;
   createdAt: number;
+  scoreBreakdown?: {
+    hook: number;
+    retention: number;
+    emotional: number;
+    trending: number;
+  };
   /** Human-readable error message set by the AI backend on failure. */
   errorCode?: AiErrorCode;
   errorMessage?: string;

components/CryptoSaltInitializer.tsx

@@ -1,5 +1,18 @@
 "use client";
 
+import { useEffect } from "react";
+import { migrateCryptoSalt } from "@/app/lib/secureStorage";
+
+/**
+ * Initializes and migrates cryptographic salt material upon app startup.
+ * Ensured to run before any wallet operations execute.
+ */
 export default function CryptoSaltInitializer() {
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      migrateCryptoSalt();
+    }
+  }, []);
+
   return null;
 }