Testing Guide

Testing approach, strategies, and quality assurance for SkillRise

Overview

SkillRise emphasizes code quality and reliability through a combination of automated testing, continuous integration checks, and manual testing procedures.

While SkillRise currently uses CI/CD for linting and build verification, this guide outlines testing strategies and best practices for ensuring application quality.

Current Testing Strategy

Automated CI/CD Checks

Every pull request to main or dev branches triggers automated quality checks:

Code Linting

ESLint validates code quality and catches potential bugs for both client and server

Code Formatting

Prettier ensures consistent code formatting across the entire codebase

Build Verification

Vite builds the client to ensure no compilation errors exist

Dependency Check

Verifies all dependencies install correctly with npm ci

CI/CD Pipeline

Build Workflow

Triggered on pull requests to main or dev branches:

Client Job

name: Lint, Format & Build Client
runs-on: ubuntu-latest

steps:
  - Checkout code
  - Setup Node.js 20
  - Install dependencies (npm ci)
  - Run ESLint (npm run lint)
  - Check Prettier (npm run format:check)
  - Build app (npm run build)

What it validates:

• No ESLint errors or warnings
• Code follows Prettier formatting rules
• Vite successfully builds production bundle
• All imports and dependencies resolve correctly

Server Job

name: Lint & Format Check Server
runs-on: ubuntu-latest

steps:
  - Checkout code
  - Setup Node.js 20
  - Install dependencies (npm ci)
  - Run ESLint (npm run lint)
  - Check Prettier (npm run format:check)

What it validates:

• No ESLint errors or warnings
• Code follows Prettier formatting rules
• All dependencies install without errors

Pull requests cannot be merged if any CI check fails. All issues must be resolved before requesting review.

Deploy Workflow

Triggered on push to main branch:

1. Build Server Image

   • Builds Docker image from server/Dockerfile
   • Tags as pushkarverma/skillrise-server:latest
   • Pushes to Docker Hub
2. Build Client Image

   • Builds Docker image from client/Dockerfile
   • Injects build-time environment variables
   • Tags as pushkarverma/skillrise-client:latest
   • Pushes to Docker Hub

Running Quality Checks Locally

Client Checks

Linting

cd client

# Check for linting errors
npm run lint

# Automatically fix fixable issues
npm run lint:fix

Server Checks

Linting

cd server

# Check for linting errors
npm run lint

# Automatically fix fixable issues
npm run lint:fix

Run these commands before committing to catch issues early and avoid CI failures.

Manual Testing Procedures

Local Development Testing

Before submitting a pull request, manually test your changes:

Feature Testing Checklist

When adding or modifying features, test the full user flow:

Authentication Features

• Sign up with valid credentials
• Sign in with existing account
• Sign out successfully
• Test protected routes redirect correctly
• Verify role-based access (student, educator, admin)
• Check session persistence across page refreshes

Course Features

• Browse course catalog
• Search and filter courses
• View course details
• Enroll in a course (with Stripe test cards)
• Track course progress
• Complete chapters and lectures
• Test video player functionality

Educator Features

• Apply to become an educator
• Create a new course
• Add chapters and lectures
• Upload thumbnails and content
• Publish/unpublish courses
• View dashboard analytics
• See enrolled students

AI Features

• Chat with AI assistant
• Generate personalized roadmap
• Generate chapter quizzes
• Take quiz and submit answers
• View quiz results and explanations

Community Features

• Browse community groups
• Join and leave groups
• Create discussion posts
• Reply to posts
• Upvote posts and replies
• View threaded conversations

Admin Features

• View platform dashboard
• Check analytics charts
• Review all courses
• Manage users
• View purchase history
• Approve/reject educator applications

Testing Environment Setup

Test Data with Database Seeder

Use the seeder script to populate your database with realistic test data:

cd server
npm run seed

What gets created:

Users

• 5 educators with complete profiles
• 5 students with enrolled courses
• Different roles for testing permissions

Courses

• 5 courses across different categories
• Multiple chapters per course
• Multiple lectures per chapter
• Realistic descriptions and metadata

Community

• Multiple community groups
• Discussion posts within groups
• Threaded replies
• Upvote data

Learning Data

• Enrollment records
• Course progress tracking
• Quiz data
• Sample purchase history

The seeder is safe to re-run - it clears existing seeded data before creating new records.

Test Payment Cards (Stripe)

Use Stripe test cards for payment testing:

Card Number	Scenario	CVC	Date
4242 4242 4242 4242	Successful payment	Any 3 digits	Any future date
4000 0000 0000 9995	Insufficient funds	Any 3 digits	Any future date
4000 0000 0000 0002	Card declined	Any 3 digits	Any future date
4000 0025 0000 3155	3D Secure required	Any 3 digits	Any future date

Webhook Testing

For testing webhooks locally:

1. Install ngrok

   npm install -g ngrok
   
2. Start ngrok tunnel

   ngrok http 3000
   

   Copy the HTTPS forwarding URL (e.g., https://abc123.ngrok.io)

3. Configure webhooks

   Clerk Dashboard:

   • Go to Webhooks section
   • Add endpoint: https://abc123.ngrok.io/clerk
   • Subscribe to user.created and user.updated events

   Stripe Dashboard:

   • Go to Developers → Webhooks
   • Add endpoint: https://abc123.ngrok.io/stripe
   • Subscribe to checkout.session.completed event
4. Test webhook delivery

   Perform actions that trigger webhooks (sign up, make payment) and verify logs

Browser Testing

Recommended Browsers

Test on multiple browsers to ensure compatibility:

Chrome

Latest version - primary development browser

Firefox

Latest version - good for dev tools

Safari

Latest version - test on macOS/iOS

Responsive Testing

Test the following viewport sizes:

Device	Width	Test Focus
Mobile	375px	Navigation, touch interactions, mobile menu
Tablet	768px	Layout transitions, sidebar behavior
Desktop	1440px	Full layout, multi-column displays
Large	1920px	Max-width constraints, spacing

Use Chrome DevTools’ device toolbar (Cmd/Ctrl + Shift + M) for quick responsive testing.

API Testing

Testing with curl

Health Check

curl http://localhost:3000/

Testing with Postman

1. Import API Collection

   Create a Postman collection for SkillRise endpoints

2. Set Environment Variables

   • BASE_URL: http://localhost:3000
   • CLERK_TOKEN: Your Clerk session token
3. Test Endpoints

   Test each API route with different scenarios (success, error, edge cases)

Debugging Techniques

Client-Side Debugging

Browser DevTools

Console:

console.log('User data:', user)
console.error('API error:', error)
console.table(courses)

Debugger:

debugger; // Execution pauses here

React DevTools:

• Install React DevTools extension
• Inspect component props and state
• Profile component renders

Network Inspection

• Open Network tab in DevTools
• Filter by XHR/Fetch to see API calls
• Check request/response headers
• Verify payload data
• Monitor response times

Vite Error Overlay

Development mode shows errors directly in browser:

• Syntax errors
• Runtime errors
• Component errors with stack traces

Server-Side Debugging

Console Logging

// Add logging to controllers
console.log('Request body:', req.body)
console.log('User from Clerk:', req.auth.userId)
console.error('Database error:', error)

Common Issues and Solutions

CORS errors in browser

Problem: API requests blocked by CORS policy

Solution:

• Verify VITE_BACKEND_URL points to http://localhost:3000
• Check server CORS configuration includes frontend origin
• Ensure credentials are included in requests if needed

Authentication fails

Problem: User not authenticated despite signing in

Solution:

• Verify Clerk publishable keys match in both .env files
• Check browser console for Clerk errors
• Clear browser cookies and local storage
• Ensure webhook is configured if testing user sync

Payment webhook not received

Problem: Purchases not completing after Stripe checkout

Solution:

• Verify ngrok tunnel is running
• Check Stripe webhook endpoint URL is correct
• Verify webhook secret in server/.env
• Check server logs for webhook errors
• Test webhook using Stripe CLI: stripe listen --forward-to localhost:3000/stripe

Database connection fails

Problem: Server won’t start due to MongoDB connection error

Solution:

• Verify MongoDB is running: mongosh
• Check MONGODB_URI in server/.env
• Ensure database name in URI is correct
• For Atlas: verify IP whitelist and credentials

Build fails with environment variable errors

Problem: Client build fails with undefined env variables

Solution:

• Ensure all VITE_* variables are defined in client/.env
• For CI/CD: verify GitHub Secrets are configured
• Variables must be prefixed with VITE_ to be accessible in client

Performance Testing

Lighthouse Audits

Run Lighthouse audits to check performance, accessibility, and SEO:

1. Open Chrome DevTools

   Press F12 or Cmd/Ctrl + Shift + I

2. Navigate to Lighthouse tab

   If not visible, click the >> icon and select Lighthouse

3. Run audit

   Select categories and click “Analyze page load”

4. Review results

   Focus on:

   • Performance score
   • Accessibility issues
   • Best practices violations
   • SEO recommendations

Load Testing (Optional)

For testing API performance under load:

# Install Apache Bench
apt-get install apache2-utils  # Linux
brew install httpd             # macOS

# Test endpoint with 100 requests, 10 concurrent
ab -n 100 -c 10 http://localhost:3000/api/course

# View response times and throughput

Pre-Deployment Checklist

Before deploying to production:

Future Testing Enhancements

Potential testing improvements for the project:

Unit Tests

Add Jest/Vitest for testing individual functions and components

Integration Tests

Test API endpoints with Supertest or Postman collections

E2E Tests

Implement Playwright or Cypress for end-to-end user flows

Visual Regression

Use Percy or Chromatic to catch UI changes

Related Resources

Project Structure

Understand the codebase organization

Contributing Guide

Learn the development workflow

Quality assurance is everyone’s responsibility. Take time to test your changes thoroughly before submitting PRs.