test-coverage

client/package.json

@@ -45,16 +45,22 @@
     "web-vitals": "^4.0.0"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react-swc": "^3.5.0",
+    "@vitest/coverage-v8": "^4.1.2",
     "autoprefixer": "^10.4.19",
     "eslint": "^8.57.0",
     "eslint-plugin-react": "^7.34.3",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-refresh": "^0.4.7",
+    "jsdom": "^29.0.1",
     "postcss": "^8.4.39",
     "tailwindcss": "^3.4.6",
-    "vite": "^5.3.4"
+    "vite": "^5.3.4",
+    "vitest": "^4.1.2"
   }
 }

client/src/Components/dashboard/reschedule-dialog.jsx

@@ -56,16 +56,16 @@ export function RescheduleDialog({ id }) {
                 <DialogHeader>
                     <DialogTitle>Reschedule Event</DialogTitle>
                     <DialogDescription>
-                        change the start and end date of your event 
+                        change the start and end date of your event
                     </DialogDescription>
                 </DialogHeader>
                 <div className="grid gap-4 py-4">
                     <div className="flex flex-col  gap-4">
-                        <label htmlFor="name" >
+                        <label htmlFor="startTime" >
                             Start Date
                         </label>
                         <input
-                        type="date"
+                            type="date"
                             id="startTime"
                             name="startTime"
                             className="col-span-3 w-full"
@@ -74,8 +74,8 @@ export function RescheduleDialog({ id }) {
                         />
                     </div>
                     <div className="flex flex-col  gap-4">
-                        <label htmlFor="username" >
-                            End Date 
+                        <label htmlFor="endTime" >
+                            End Date
                         </label>
                         <input
                             type="date"

client/src/Components/dashboard/sidebar.jsx

@@ -60,7 +60,9 @@ const Sidebar = () => {
                     <div className='flex gap-3'>
                         <img src='/assets/profile-picture.png' alt='profile-picture' width={71} height={63} />
                         <div className='flex flex-col gap-2 justify-center'>
-                            <p className='text-base text-white font-normal'>{address.slice(0, 5)}*****{address.slice(61, 65)}</p>
+                            <p className='text-base text-white font-normal'>
+                                {address?.length > 10 ? `${address?.slice(0, 5)}*****${address?.slice(-4)}` : address || 'Connect Wallet'}
+                            </p>
                             <p className='text-base text-white font-normal'>0xgabriel.eth</p>
                         </div>
                     </div>

client/src/Components/dashboard/transfer-dialogue.jsx

@@ -25,17 +25,17 @@ export function TransferDialog({ tba }) {
     })
 
     const options = {
-            account: account,
-            registryAddress: `0x4101d3fa033024654083dd982273a300cb019b8cb96dd829267a4daf59f7b7e`,
-            implementationAddress: `0x45d67b8590561c9b54e14dd309c9f38c4e2c554dd59414021f9d079811621bd`,
-            jsonRPC: `https://starknet-sepolia.g.alchemy.com/starknet/version/rpc/v0_7/RCp5m7oq9i9myxsvC8ctUmNq2Wq2Pa_v`
-          }
-        
-          let tokenbound;
-        
-          if (account) {
-            tokenbound = new TokenboundClient(options)
-          }
+        account: account,
+        registryAddress: `0x4101d3fa033024654083dd982273a300cb019b8cb96dd829267a4daf59f7b7e`,
+        implementationAddress: `0x45d67b8590561c9b54e14dd309c9f38c4e2c554dd59414021f9d079811621bd`,
+        jsonRPC: `https://starknet-sepolia.g.alchemy.com/starknet/version/rpc/v0_7/RCp5m7oq9i9myxsvC8ctUmNq2Wq2Pa_v`
+    }
+
+    let tokenbound;
+
+    if (account) {
+        tokenbound = new TokenboundClient(options)
+    }
 
     const inputChange = (e) => {
         setFormData((prevState) => ({
@@ -72,7 +72,7 @@ export function TransferDialog({ tba }) {
                 </DialogHeader>
                 <div className="grid gap-4 py-4">
                     <div className="flex flex-col  gap-4">
-                        <label htmlFor="name" >
+                        <label htmlFor="receiver" >
                             Receiver address                        </label>
                         <input
                             type="text"
@@ -84,7 +84,7 @@ export function TransferDialog({ tba }) {
                         />
                     </div>
                     <div className="flex flex-col  gap-4">
-                        <label htmlFor="username" >
+                        <label htmlFor="amount" >
                             Amount
                         </label>
                         <input

client/src/__tests__/AboutSection.test.jsx

@@ -0,0 +1,30 @@
+import { render, screen, cleanup } from '@testing-library/react';
+import { describe, it, expect, afterEach } from 'vitest';
+import React from 'react';
+import AboutSection from '../Components/landing-page/sections/about-section';
+
+describe('AboutSection Component', () => {
+    afterEach(() => {
+        cleanup();
+    });
+
+    it('renders with images and correctly titled card', () => {
+        render(<AboutSection />);
+        expect(screen.getByAltText('podcast-image')).toBeInTheDocument();
+        expect(screen.getByAltText('concert-image')).toBeInTheDocument();
+        expect(screen.getByAltText('get-together-image')).toBeInTheDocument();
+        expect(screen.getByAltText('dinner-image')).toBeInTheDocument();
+        expect(screen.getByText(/About Us/i)).toBeInTheDocument();
+    });
+
+    it('renders descriptive paragraphs', () => {
+        render(<AboutSection />);
+        expect(screen.getByText(/premier event ticketing and management solution/i)).toBeInTheDocument();
+        expect(screen.getByText(/seamless and secure ticketing experience/i)).toBeInTheDocument();
+    });
+
+    it('renders Learn More button', () => {
+        render(<AboutSection />);
+        expect(screen.getByText(/Learn More/i)).toBeInTheDocument();
+    });
+});

client/src/__tests__/AppDisconnected.test.jsx

@@ -0,0 +1,35 @@
+import { render, screen, cleanup } from '@testing-library/react';
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import React from 'react';
+import { BrowserRouter } from 'react-router-dom';
+import App from '../App';
+
+// MOCK DISCONNECTED STATE
+vi.mock('@starknet-react/core', () => ({
+    useStarknet: () => ({ account: {}, chain: {} }),
+    useConnect: () => ({ connect: vi.fn(), connectors: [] }),
+    useAccount: () => ({ address: null, status: 'disconnected', account: null }),
+    useDisconnect: () => ({ disconnect: vi.fn() }),
+    useContract: () => ({ contract: { address: '0x1' } }),
+    useInjectedConnectors: () => ({ connectors: [] }),
+    argent: vi.fn(),
+    braavos: vi.fn(),
+    publicProvider: vi.fn(),
+    starknet: vi.fn(),
+    StarknetConfig: ({ children }) => <div>{children}</div>,
+}));
+
+describe('App Disconnected State', () => {
+    afterEach(cleanup);
+
+    it('renders landing page when disconnected', () => {
+        render(
+            <BrowserRouter>
+                <App />
+            </BrowserRouter>
+        );
+        // It should render LandingPage components
+        // We look for common text in landing page
+        expect(screen.getByText(/Decentralized Event Management/i)).toBeInTheDocument();
+    });
+});

client/src/__tests__/AppLogic.test.jsx

@@ -0,0 +1,81 @@
+import { render, screen, cleanup } from '@testing-library/react';
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import App from '../App';
+
+// Mock SDK
+vi.mock('starknet-tokenbound-sdk', () => ({
+    TokenboundClient: class {
+        constructor() {
+            this.transferERC20 = vi.fn().mockResolvedValue({ status: "success" });
+        }
+    }
+}));
+
+// Mock starknet-react
+vi.mock('@starknet-react/core', () => ({
+    useConnect: () => ({ connect: vi.fn(), connectors: [] }),
+    useAccount: () => ({ address: '0x123', status: 'connected', account: {} }),
+    useDisconnect: () => ({ disconnect: vi.fn() }),
+    useContract: () => ({ contract: {} }),
+    StarknetConfig: ({ children }) => <div data-testid="starknet-config">{children}</div>,
+    useInjectedConnectors: () => ({ connectors: [] }),
+    publicProvider: vi.fn(),
+    alchemyProvider: vi.fn(),
+    argent: vi.fn(),
+    braavos: vi.fn(),
+    voyager: vi.fn(),
+    jsonRpcProvider: vi.fn(),
+}));
+
+// Mock starknet library
+vi.mock('starknet', () => ({
+    Contract: class {
+        constructor() {
+            this.call = vi.fn().mockResolvedValue({ eventCount: "1" });
+        }
+    },
+    RpcProvider: class {
+        constructor() {
+            this.waitForTransaction = vi.fn();
+        }
+    },
+    shortString: {
+        decodeShortString: vi.fn().mockReturnValue("Mocked String")
+    }
+}));
+
+// Mock StarknetProvider component
+vi.mock('../context/starknet-provider', () => ({
+    StarknetProvider: ({ children }) => <div data-testid="starknet-provider-mock">{children}</div>
+}));
+
+// Mock LandingPage and Dashboard to avoid deep nesting issues
+vi.mock('../pages/static/landing-page', () => ({
+    default: () => <div data-testid="landing-page-mock" />
+}));
+
+vi.mock('../pages/dashboard/dashboard', () => ({
+    default: () => <div data-testid="dashboard-mock" />
+}));
+
+const renderApp = (route = '/') => {
+    return render(
+        <MemoryRouter initialEntries={[route]}>
+            <App />
+        </MemoryRouter>
+    );
+};
+
+describe('General App and Landing Logic Rendering Tests', () => {
+    afterEach(() => {
+        cleanup();
+    });
+
+    it('renders the App routing correctly', () => {
+        renderApp('/');
+        // status is connected by default in mock, so it should show dashboard
+        expect(screen.getByTestId('dashboard-mock')).toBeInTheDocument();
+    });
+});