Testing Guide - 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
Server 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

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:

Build Server Image

Builds Docker image from server/Dockerfile
Tags as pushkarverma/skillrise-server:latest
Pushes to Docker Hub

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

cd client

# Check for linting errors
npm run lint

# Automatically fix fixable issues
npm run lint:fix

cd client

# Check if code is formatted correctly
npm run format:check

# Format all files
npm run format

cd client

# Build production bundle
npm run build

# Preview production build
npm run preview

Server Checks

cd server

# Check for linting errors
npm run lint

# Automatically fix fixable issues
npm run lint:fix

cd server

# Check if code is formatted correctly
npm run format:check

# Format all files
npm run format

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
Courses
Community
Learning Data

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

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:

Install ngrok

npm install -g ngrok

Start ngrok tunnel

ngrok http 3000

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

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

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

curl http://localhost:3000/

curl http://localhost:3000/api/course

curl http://localhost:3000/api/course/COURSE_ID

curl -H "Authorization: Bearer YOUR_CLERK_TOKEN" \
     http://localhost:3000/api/user/enrollments

Testing with Postman

Import API Collection

Create a Postman collection for SkillRise endpoints

Set Environment Variables

BASE_URL: http://localhost:3000
CLERK_TOKEN: Your Clerk session token

Test Endpoints

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

Debugging Techniques

Client-Side Debugging

Browser DevTools
Network Inspection
Vite Error Overlay

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

Server-Side Debugging

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

# Start server in debug mode
node --inspect server.js

# Or with nodemon
nodemon --inspect server.js

# Then connect Chrome DevTools to node process
# Open chrome://inspect

// Verify environment variables
console.log('MongoDB URI:', process.env.MONGODB_URI)
console.log('Clerk Secret exists:', !!process.env.CLERK_SECRET_KEY)

Common Issues and Solutions

CORS errors in browser

Problem: API requests blocked by CORS policySolution:

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 inSolution:

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 checkoutSolution:

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 errorSolution:

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 variablesSolution:

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:

Open Chrome DevTools

Press F12 or Cmd/Ctrl + Shift + I

Navigate to Lighthouse tab

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

Run audit

Select categories and click “Analyze page load”

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

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.

​Overview

​Current Testing Strategy

​Automated CI/CD Checks

Code Linting

Code Formatting

Build Verification

Dependency Check

​CI/CD Pipeline

​Build Workflow

​Deploy Workflow

​Running Quality Checks Locally

​Client Checks

​Server Checks

​Manual Testing Procedures

​Local Development Testing

​Feature Testing Checklist

​Testing Environment Setup

​Test Data with Database Seeder

​Test Payment Cards (Stripe)

​Webhook Testing

​Browser Testing

​Recommended Browsers

Chrome

Firefox

Safari

​Responsive Testing

​API Testing

​Testing with curl

​Testing with Postman

​Debugging Techniques

​Client-Side Debugging

​Server-Side Debugging

​Common Issues and Solutions

​Performance Testing

​Lighthouse Audits

​Load Testing (Optional)

​Pre-Deployment Checklist

​Future Testing Enhancements

Unit Tests

Integration Tests

E2E Tests

Visual Regression

​Related Resources

Project Structure

Contributing Guide

Overview

Current Testing Strategy

Automated CI/CD Checks

CI/CD Pipeline

Build Workflow

Deploy Workflow

Running Quality Checks Locally

Client Checks

Server Checks

Manual Testing Procedures

Local Development Testing

Feature Testing Checklist

Testing Environment Setup

Test Data with Database Seeder

Test Payment Cards (Stripe)

Webhook Testing

Browser Testing

Recommended Browsers

Responsive Testing

API Testing

Testing with curl

Testing with Postman

Debugging Techniques

Client-Side Debugging

Server-Side Debugging

Common Issues and Solutions

Performance Testing

Lighthouse Audits

Load Testing (Optional)

Pre-Deployment Checklist

Future Testing Enhancements

Related Resources