Merge pull request floxxih#96 from Wilfred007/Feat-No-frontend-unit

ran frontend tests

Author: gboigwe

frontend/package-lock.json

@@ -7,7 +7,8 @@
     "build": "next build",
     "start": "next start",
     "lint": "eslint",
-    "test": "echo \"No tests defined yet\" && exit 0"
+    "test": "vitest",
+    "test:coverage": "vitest run --coverage"
   },
   "dependencies": {
     "@hookform/resolvers": "^5.2.2",
@@ -26,12 +27,19 @@
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
+    "@vitejs/plugin-react": "^5.1.4",
     "eslint": "^9",
     "eslint-config-next": "16.1.6",
+    "jsdom": "^28.1.0",
     "tailwindcss": "^4",
-    "typescript": "^5"
+    "typescript": "^5",
+    "vitest": "^4.0.18",
+    "vitest-canvas-mock": "^1.1.3"
   }
 }

frontend/package.json

@@ -0,0 +1,94 @@
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { BidForm } from './BidForm';
+import { vi, describe, it, expect, beforeEach } from 'vitest';
+import { usePlaceBid } from '@/hooks/useContract';
+import { Auction } from '@/types/contracts';
+
+// Mock the hook
+vi.mock('@/hooks/useContract', () => ({
+    usePlaceBid: vi.fn(),
+}));
+
+const mockAuction: Auction = {
+    auction_id: 1n,
+    publisher: 'GABC...789',
+    impression_slot: 'Homepage Banner',
+    floor_price: 10000000n, // 1 XLM in stroops (10^7)
+    reserve_price: 12000000n,
+    start_time: 0n,
+    end_time: BigInt(Math.floor(Date.now() / 1000) + 3600),
+    status: 'Open',
+    winning_bid: null,
+    winner: null,
+    bid_count: 0,
+};
+
+describe('BidForm', () => {
+    const mockMutateAsync = vi.fn();
+
+    beforeEach(() => {
+        vi.clearAllMocks();
+        vi.mocked(usePlaceBid).mockReturnValue({
+            mutateAsync: mockMutateAsync,
+            isPending: false,
+        } as any);
+    });
+
+    it('should render floor price correctly', () => {
+        render(<BidForm auction={mockAuction} />);
+        expect(screen.getByText('1 XLM')).toBeDefined();
+    });
+
+    it('should show error if bid is below floor price', async () => {
+        render(<BidForm auction={mockAuction} />);
+
+        const bidInput = screen.getByLabelText(/Bid Amount/i);
+        const campaignInput = screen.getByLabelText(/Campaign ID/i);
+        const submitButton = screen.getByText('Submit Bid');
+
+        fireEvent.change(bidInput, { target: { value: '0.5' } });
+        fireEvent.change(campaignInput, { target: { value: '10' } });
+        fireEvent.click(submitButton);
+
+        expect(await screen.findByText(/Minimum bid is 1.0000 XLM/i)).toBeInTheDocument();
+        expect(mockMutateAsync).not.toHaveBeenCalled();
+    });
+
+    it('should call placeBid with correct parameters on valid submission', async () => {
+        render(<BidForm auction={mockAuction} />);
+
+        const bidInput = screen.getByLabelText(/Bid Amount/i);
+        const campaignInput = screen.getByLabelText(/Campaign ID/i);
+        const submitButton = screen.getByText('Submit Bid');
+
+        fireEvent.change(bidInput, { target: { value: '2.5' } });
+        fireEvent.change(campaignInput, { target: { value: '123' } });
+
+        mockMutateAsync.mockResolvedValue({ success: true });
+
+        fireEvent.click(submitButton);
+
+        await waitFor(() => {
+            expect(mockMutateAsync).toHaveBeenCalledWith({
+                auctionId: 1n,
+                campaignId: 123,
+                amountStroops: 25000000n, // Matches BidForm call to placeBid
+            });
+        });
+    });
+
+    it('should show error if submission fails', async () => {
+        mockMutateAsync.mockRejectedValue(new Error('Insufficent funds'));
+
+        render(<BidForm auction={mockAuction} />);
+
+        const bidInput = screen.getByLabelText(/Bid Amount/i);
+        const campaignInput = screen.getByLabelText(/Campaign ID/i);
+        fireEvent.change(bidInput, { target: { value: '5' } });
+        fireEvent.change(campaignInput, { target: { value: '123' } });
+
+        fireEvent.click(screen.getByText('Submit Bid'));
+
+        expect(await screen.findByText(/Insufficent funds/i)).toBeInTheDocument();
+    });
+});

frontend/src/components/auction/BidForm.test.tsx

@@ -0,0 +1,79 @@
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { CampaignForm } from './CampaignForm';
+import { vi, describe, it, expect, beforeEach } from 'vitest';
+import { useCreateCampaign } from '@/hooks/useContract';
+
+// Mock the hook
+vi.mock('@/hooks/useContract', () => ({
+    useCreateCampaign: vi.fn(),
+}));
+
+describe('CampaignForm', () => {
+    const mockCreateCampaign = vi.fn();
+    const mockOnSuccess = vi.fn();
+
+    beforeEach(() => {
+        vi.clearAllMocks();
+        vi.mocked(useCreateCampaign).mockReturnValue({
+            mutateAsync: mockCreateCampaign,
+            isPending: false,
+        } as any);
+    });
+
+    it('should show error if title is missing', async () => {
+        render(<CampaignForm />);
+
+        const submitButton = screen.getByText('Create Campaign');
+        fireEvent.click(submitButton);
+
+        expect(await screen.findByText(/Title is required/i)).toBeInTheDocument();
+        expect(mockCreateCampaign).not.toHaveBeenCalled();
+    });
+
+    it('should call createCampaign with correct parameters on valid submission', async () => {
+        render(<CampaignForm onSuccess={mockOnSuccess} />);
+
+        fireEvent.change(screen.getByLabelText(/Campaign Title/i), {
+            target: { value: 'Test Campaign' },
+        });
+        fireEvent.change(screen.getByLabelText(/Content ID/i), {
+            target: { value: 'ipfs://123' },
+        });
+        fireEvent.change(screen.getByLabelText(/Total Budget/i), {
+            target: { value: '100' },
+        });
+
+        mockCreateCampaign.mockResolvedValue(1); // Returns campaign ID
+
+        fireEvent.click(screen.getByText('Create Campaign'));
+
+        await waitFor(() => {
+            expect(mockCreateCampaign).toHaveBeenCalledWith(expect.objectContaining({
+                title: 'Test Campaign',
+                contentId: 'ipfs://123',
+                budgetXlm: 100,
+            }));
+            expect(mockOnSuccess).toHaveBeenCalledWith(1);
+        });
+    });
+
+    it('should handle submission error', async () => {
+        mockCreateCampaign.mockRejectedValue(new Error('Contract call failed'));
+
+        render(<CampaignForm />);
+
+        fireEvent.change(screen.getByLabelText(/Campaign Title/i), {
+            target: { value: 'Error Campaign' },
+        });
+        fireEvent.change(screen.getByLabelText(/Content ID/i), {
+            target: { value: 'error' },
+        });
+        fireEvent.change(screen.getByLabelText(/Total Budget/i), {
+            target: { value: '10' },
+        });
+
+        fireEvent.click(screen.getByText('Create Campaign'));
+
+        expect(await screen.findByText(/Contract call failed/i)).toBeInTheDocument();
+    });
+});

frontend/src/components/campaign/CampaignForm.test.tsx

@@ -0,0 +1,55 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { ProposalCard } from './ProposalCard';
+import { vi, describe, it, expect } from 'vitest';
+import { GovernanceProposal } from '@/types/contracts';
+
+const mockProposal: GovernanceProposal = {
+    proposal_id: 1n,
+    proposer: 'GABC...123',
+    title: 'Upgrade Protocol',
+    description: 'A detailed description of the upgrade.',
+    status: 'Active',
+    votes_for: 1000n,
+    votes_against: 500n,
+    votes_abstain: 100n,
+    created_at: 0n,
+    voting_ends_at: BigInt(Math.floor(Date.now() / 1000) + 86400 * 3), // 3 days left
+};
+
+describe('ProposalCard', () => {
+    it('should render proposal details correctly', () => {
+        render(<ProposalCard proposal={mockProposal} />);
+
+        expect(screen.getByText('PIP-1')).toBeDefined();
+        expect(screen.getByText('Upgrade Protocol')).toBeDefined();
+        expect(screen.getByText('Active')).toBeDefined();
+        expect(screen.getByText(/62.5% For/i)).toBeDefined(); // 1000 / (1000+500+100) = 0.625
+    });
+
+    it('should call onVote when a vote button is clicked', () => {
+        const mockOnVote = vi.fn();
+        render(<ProposalCard proposal={mockProposal} onVote={mockOnVote} />);
+
+        const forButton = screen.getByText('For');
+        fireEvent.click(forButton);
+
+        expect(mockOnVote).toHaveBeenCalledWith(1n, 'for');
+    });
+
+    it('should show user vote if already voted', () => {
+        render(<ProposalCard proposal={mockProposal} userVote="against" />);
+
+        expect(screen.getByText(/You voted:/i)).toBeDefined();
+        expect(screen.getByText('against')).toBeDefined();
+        expect(screen.queryByText('For')).toBeNull(); // Buttons should be hidden
+    });
+
+    it('should disable buttons when isVoting is true', () => {
+        const mockOnVote = vi.fn();
+        render(<ProposalCard proposal={mockProposal} onVote={mockOnVote} isVoting={true} />);
+
+        const forButton = screen.getByText('For');
+        expect(forButton).toBeInTheDocument();
+        expect(forButton).toBeDisabled();
+    });
+});

frontend/src/components/governance/ProposalCard.test.tsx

@@ -0,0 +1,98 @@
+import { renderHook, act } from '@testing-library/react';
+import { useCampaign, useCreateCampaign } from './useContract';
+import { vi, describe, it, expect, beforeEach } from 'vitest';
+import { callReadOnly, callContract } from '@/lib/soroban-client';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import React from 'react';
+import { useWalletStore } from '@/store/wallet-store';
+
+// Mock soroban-client
+vi.mock('@/lib/soroban-client', () => ({
+    callReadOnly: vi.fn(),
+    callContract: vi.fn(),
+    u64ToScVal: vi.fn((v) => ({ _type: 'u64', value: v })),
+    stringToScVal: vi.fn((v) => ({ _type: 'string', value: v })),
+    i128ToScVal: vi.fn((v) => ({ _type: 'i128', value: v })),
+    addressToScVal: vi.fn((v) => ({ _type: 'address', value: v })),
+}));
+
+const createWrapper = () => {
+    const queryClient = new QueryClient({
+        defaultOptions: {
+            queries: {
+                retry: false,
+            },
+        },
+    });
+    return ({ children }: { children: React.ReactNode }) => (
+        <QueryClientProvider client= { queryClient } >
+        { children }
+        </QueryClientProvider>
+    );
+};
+
+describe('useContract hooks', () => {
+    beforeEach(() => {
+        vi.clearAllMocks();
+        useWalletStore.getState().setAddress('GABC...123');
+        useWalletStore.getState().setConnected(true);
+    });
+
+    describe('useCampaign', () => {
+        it('should fetch campaign data successfully', async () => {
+            const mockCampaign = { id: 1, title: 'Test Campaign' };
+            vi.mocked(callReadOnly).mockResolvedValue(mockCampaign);
+
+            const { result } = renderHook(() => useCampaign(1), {
+                wrapper: createWrapper(),
+            });
+
+            // Wait for query to finish
+            await act(async () => {
+                await new Promise((resolve) => setTimeout(resolve, 0));
+            });
+
+            expect(result.current.data).toEqual(mockCampaign);
+            expect(result.current.isLoading).toBe(false);
+            expect(callReadOnly).toHaveBeenCalled();
+        });
+
+        it('should handle fetch error', async () => {
+            vi.mocked(callReadOnly).mockRejectedValue(new Error('Contract error'));
+
+            const { result } = renderHook(() => useCampaign(1), {
+                wrapper: createWrapper(),
+            });
+
+            await act(async () => {
+                await new Promise((resolve) => setTimeout(resolve, 0));
+            });
+
+            expect(result.current.error).toBeDefined();
+            expect(result.current.isError).toBe(true);
+        });
+    });
+
+    describe('useCreateCampaign', () => {
+        it('should call contract to create campaign', async () => {
+            vi.mocked(callContract).mockResolvedValue({ success: true, result: 123 });
+
+            const { result } = renderHook(() => useCreateCampaign(), {
+                wrapper: createWrapper(),
+            });
+
+            await act(async () => {
+                await result.current.createCampaign({
+                    title: 'New Campaign',
+                    budgetXlm: 100,
+                    dailyBudgetXlm: 10,
+                    durationDays: 30,
+                    contentId: 'ipfs://...',
+                    campaignType: 1,
+                });
+            });
+
+            expect(callContract).toHaveBeenCalled();
+        });
+    });
+});