🧪 Testing

Comprehensive test suite with Vitest + Testing Library:

📘 For complete testing guide, see TESTING.md

Includes: testing strategies, patterns, DI testing, mocking, coverage, and CI/CD setup

# Run tests
pnpm test:run          # All tests once
pnpm test             # Watch mode
pnpm test:ui          # Interactive UI
pnpm test:coverage    # With coverage

What's Tested

• API Endpoints - Request/response validation, error handling
• Svelte Components - User interactions, form validation
• Services - Business logic with dependency injection
• Error Scenarios - Custom error classes and status codes

Deployment

pnpm deploy        # Deploy to dev
pnpm deploy:cf     # Deploy to production

🌐 API Endpoints

Built with Hono and comprehensive error handling:

Core Endpoints

User Management (Demo CRUD)

Response Format

Consistent JSON responses across all endpoints:

// Success
{ "success": true, "data": any, "message?": string, "timestamp": string }

// Error
{ "success": false, "error": string, "timestamp": string }

Quick API Test

# Health check
curl http://localhost:5173/api/health

# List users (demo data)
curl http://localhost:5173/api/users

# Create user
curl -X POST http://localhost:5173/api/users \
  -H "Content-Type: application/json" \
  -d '{"name":"John Doe","email":"[email protected]"}'

Error Handling

Custom Error Classes with proper HTTP status codes:

• ValidationError (400) - Invalid input data
• NotFoundError (404) - Resource not found
• ConflictError (409) - Duplicate resources
• Plus: BadRequestError, UnauthorizedError, ForbiddenError, InternalServerError

Global Error Handler catches all exceptions and returns consistent JSON responses with structured logging.

🧪 Testing

Comprehensive test suite with Vitest (unit/component) + Playwright (E2E):

📘 For complete testing guides:

• TESTING.md - Unit & component testing with Vitest
• E2E_TESTING.md - End-to-end testing with Playwright

Unit & Component Tests (Vitest)

pnpm test              # Watch mode
pnpm test:run          # Run once
pnpm test:ui           # Interactive UI
pnpm test:coverage     # With coverage

E2E Tests (Playwright)

pnpm test:e2e          # Run E2E tests (headless)
pnpm test:e2e:ui       # Interactive UI mode (recommended)
pnpm test:e2e:headed   # Run with visible browser
pnpm test:e2e:debug    # Debug with DevTools
pnpm test:e2e:chromium # Test in Chrome only
pnpm test:e2e:firefox  # Test in Firefox only
pnpm test:e2e:webkit   # Test in Safari only

What's Tested

Unit & Component Tests:

• API Endpoints - Request/response validation, error handling
• Svelte Components - User interactions, form validation
• Services - Business logic with dependency injection
• Error Scenarios - Custom error classes and status codes

E2E Tests (117 tests across 3 browsers):

• Homepage - UI rendering, API integration, page structure
• User Management - CRUD operations, form validation, state management
• API Endpoints - RESTful API testing, error responses, data validation
• Navigation - Routing, browser history, link behavior, multi-tab scenarios

✅ Validation with Zod v4

Input validation is implemented with Zod v4. Schemas live in src/models/user.model.ts and types are inferred directly from the schemas for end-to-end type safety.

// src/models/user.model.ts
import { z } from 'zod';

export const createUserSchema = z.object({
    name: z
        .string()
        .trim()
        .min(1, { message: 'Name is required' })
        .refine((v) => v.length === 0 || v.length >= 2, {
            message: 'Name must be at least 2 characters long'
        }),
    email: z
        .string()
        .trim()
        .min(1, { message: 'Email is required' })
        .refine((v) => v.length === 0 || /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v), {
            message: 'Email format is invalid'
        })
});

export type CreateUserRequest = z.infer<typeof createUserSchema>;

Services validate using safeParse and throw a ValidationError on failure:

// src/services/user.service.ts
const parsed = createUserSchema.safeParse(userData);
if (!parsed.success) {
    const messages = parsed.error.issues.map((i) => i.message);
    throw new ValidationError(`Validation failed: ${messages.join(', ')}`);
}

📝 Project Structure

src/
├── routes/                        # SvelteKit routes
│   ├── +page.svelte               # Demo page
│   └── api/[...paths]/+server.ts  # Hono API server
├── container/                     # Dependency Injection
│   ├── inversify.config.ts        # IoC container
│   ├── types.ts                   # Service types
│   └── resolvers.ts               # Service resolvers
├── models/                        # Domain models and schemas (Zod)
│   ├── user.model.ts              # User model + Zod schemas
│   └── error.model.ts             # Custom error classes and mapping
├── interfaces/                    # TypeScript interfaces
├── services/                      # Business logic layer
├── types/                         # Type definitions
└── tests/                         # Test suites
    ├── api/                       # API tests
    └── components/                # Component tests

Key Files:

• wrangler.toml - Cloudflare Workers configuration
• svelte.config.js - SvelteKit + adapter setup
• vite.config.ts - Vite + testing configuration

🚀 Deployment

To Cloudflare Workers

# One-time setup
wrangler login

# Deploy to development
pnpm deploy

# Deploy to production
pnpm deploy:cf

Environment Variables

• Local: .env.local (SvelteKit)
• Production: wrangler.toml (Cloudflare Workers)

🔧 Architecture Highlights

Dependency Injection

Using InversifyJS for clean architecture:

• Service interfaces for contracts
• Concrete implementations
• IoC container for dependency resolution
• Easy testing with mocked dependencies

Cloudflare Optimization

• Edge deployment for ultra-low latency
• Automatic HTTPS and SSL
• CDN-cached static assets
• Serverless API routes

🤝 Contributing

1. Fork & Clone the repository
2. Install: pnpm install
3. Create branch: git checkout -b feature/your-feature
4. Make changes and add tests
5. Quality check: pnpm test:run && pnpm lint && pnpm check
6. Commit & Push your changes
7. Open Pull Request

Ensure all tests pass and follow the existing code patterns.

📚 Documentation & Resources

Project Docs

• DEVELOPMENT.md - Comprehensive development guide
• TESTING.md - Unit & component testing guide
• E2E_TESTING.md - End-to-end testing with Playwright

Tech Stack Docs

• SvelteKit - Frontend framework
• Hono - API framework
• Cloudflare Workers - Deployment platform
• InversifyJS - Dependency injection
• Vitest - Unit/component testing
• Playwright - E2E testing

🐛 Troubleshooting

API routes not working?

• Check wrangler.toml configuration
• Ensure all HTTP methods are exported in +server.ts

Environment variables?

• Client vars: prefix with PUBLIC_
• Server vars: add to wrangler.toml

Build errors?

• Run pnpm check for TypeScript validation
• Verify imports and dependencies

Test failures?

• Use pnpm test:ui for interactive debugging
• Check mock configurations in test setup

➡️ See DEVELOPMENT.md for detailed troubleshooting

📄 License

MIT License - see LICENSE file.

⭐ Support

Give a ⭐ if this helped you!

Built with ❤️ using SvelteKit + Hono + Cloudflare Workers