Testing

Current Testing Status

The Rippler project currently does not have a formal automated testing suite. However, the codebase includes several quality assurance practices and tools to ensure code reliability.

No test files (.test.ts, .test.tsx, .spec.ts, .spec.tsx) were found in the codebase. Setting up automated testing is recommended for production applications.

Quality Assurance Tools

While automated tests are not yet implemented, the project uses several tools to maintain code quality:

TypeScript Type Checking

The project uses strict TypeScript configuration to catch errors at compile time:

npm run check:types

TypeScript Configuration

tsconfig.json

{
  "compilerOptions": {
    "strict": true,
    "esModuleInterop": true,
    "paths": {
      "@/*": ["./client/*"],
      "@shared/*": ["./shared/*"]
    },
    "types": ["node"]
  },
  "exclude": ["node_modules", "build", "dist", "**/*.test.ts"]
}

Benefits:

Catches type errors before runtime
Ensures type safety across client and server
Validates prop types and function signatures
Prevents common JavaScript pitfalls

ESLint Code Analysis

ESLint checks for code quality issues and potential bugs:

npm run lint

Configuration:

Expo ESLint config
Prettier integration
React best practices
TypeScript-specific rules

Common checks:

Unused variables
Missing dependencies in hooks
Improper React patterns
Code style violations

Prettier Code Formatting

Ensures consistent code style across the project:

npm run format

Enforces:

Consistent indentation
Proper line breaks
Quote style
Semicolon usage
Trailing commas

Manual Testing Approach

Currently, the Rippler app relies on manual testing during development:

Development Testing Workflow

Start development servers

Run both the Expo client and backend server:

# Terminal 1
npm run expo:dev

# Terminal 2
npm run server:dev

Test on physical device or emulator

Open the Expo Go app on your device and scan the QR code, or use an emulator:

iOS Simulator (macOS only)
Android Emulator
Physical device via Expo Go

Verify functionality

Manually test:

Navigation between screens
Workout tracking and data entry
Goal setting and tracking
Theme switching (light/dark mode)
Data persistence

Check error handling

Test error scenarios:

Network failures
Invalid data input
Edge cases
Error boundary behavior

Error Boundary

The app includes an ErrorBoundary component to catch runtime errors:

client/App.tsx

import { ErrorBoundary } from '@/components/ErrorBoundary';

export default function App() {
  return (
    <ErrorBoundary>
      {/* App content */}
    </ErrorBoundary>
  );
}

Features:

Catches React component errors
Displays user-friendly error UI
Prevents app crashes
Logs errors for debugging

Recommended Testing Setup

For a production-ready application, consider implementing these testing frameworks:

Unit Testing with Jest

Installation

npm install --save-dev jest @types/jest ts-jest
npm install --save-dev @testing-library/react-native @testing-library/jest-native

Jest Configuration

jest.config.js

module.exports = {
  preset: 'jest-expo',
  transformIgnorePatterns: [
    'node_modules/(?!((jest-)?react-native|@react-native(-community)?)|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|react-native-svg)'
  ],
  setupFilesAfterEnv: ['@testing-library/jest-native/extend-expect'],
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/client/$1',
    '^@shared/(.*)$': '<rootDir>/shared/$1',
  },
};

What to test:

Component rendering
User interactions
State management
Custom hooks
Utility functions

Example test:

Button.test.tsx

import { render, fireEvent } from '@testing-library/react-native';
import { Button } from '@/components/Button';

describe('Button', () => {
  it('renders correctly', () => {
    const { getByText } = render(<Button title="Press Me" />);
    expect(getByText('Press Me')).toBeTruthy();
  });

  it('calls onPress when pressed', () => {
    const onPress = jest.fn();
    const { getByText } = render(
      <Button title="Press Me" onPress={onPress} />
    );
    
    fireEvent.press(getByText('Press Me'));
    expect(onPress).toHaveBeenCalledTimes(1);
  });
});

Integration Testing

Recommended Tools

Detox - End-to-end testing for React Native
Supertest - HTTP assertion for API testing
Playwright - Web version testing

API testing example:

routes.test.ts

import request from 'supertest';
import app from './server';

describe('API Routes', () => {
  it('GET /api/workouts returns workout data', async () => {
    const response = await request(app)
      .get('/api/workouts')
      .expect(200);
    
    expect(response.body).toHaveProperty('workouts');
  });
});

Database Testing

Drizzle ORM Testing

import { db } from './storage';
import { users } from '@shared/schema';

describe('Database Operations', () => {
  beforeEach(async () => {
    // Clean up test data
    await db.delete(users);
  });

  it('creates a new user', async () => {
    const user = await db.insert(users).values({
      username: 'testuser',
      password: 'hashedpassword',
    }).returning();
    
    expect(user).toHaveLength(1);
    expect(user[0].username).toBe('testuser');
  });
});

Best practices:

Use a separate test database
Clean up after each test
Mock external dependencies
Test error cases

Pre-Commit Checks

Implement quality checks before committing code:

Using Husky and lint-staged

Installation

npm install --save-dev husky lint-staged
npx husky install

Configuration

package.json

{
  "lint-staged": {
    "**/*.{js,ts,tsx}": [
      "prettier --write",
      "eslint --fix",
      "tsc --noEmit"
    ],
    "**/*.{json,css}": [
      "prettier --write"
    ]
  }
}

Pre-commit hook:

.husky/pre-commit

#!/bin/sh
npx lint-staged
npm run check:types

Continuous Integration

Recommended CI/CD pipeline checks:

Install dependencies

npm ci

Run linters

npm run lint
npm run check:format

Type checking

npm run check:types

Run tests (when implemented)

npm test

Build application

npm run expo:static:build
npm run server:build

GitHub Actions Example

.github/workflows/ci.yml

name: CI

on: [push, pull_request]

jobs:
  test:
    runs-on: ubuntu-latest
    
    steps:
      - uses: actions/checkout@v3
      
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'
          cache: 'npm'
      
      - name: Install dependencies
        run: npm ci
      
      - name: Lint code
        run: npm run lint
      
      - name: Check formatting
        run: npm run check:format
      
      - name: Type check
        run: npm run check:types
      
      - name: Run tests
        run: npm test

Testing Best Practices

When implementing tests, follow these guidelines:

Test Pyramid

Maintain balance:

Many unit tests
Some integration tests
Few end-to-end tests

Arrange-Act-Assert

Structure tests:

Arrange: Set up test data
Act: Execute the code
Assert: Verify results

Test Isolation

Each test should:

Run independently
Not depend on other tests
Clean up after itself

Meaningful Names

Test names should:

Describe what is tested
Include expected behavior
Be readable as documentation

Manual Testing Checklist

Until automated tests are implemented, use this checklist:

Navigation Testing

Data Entry Testing

Workout data saves correctly
Goals can be created and updated
Exercise percentages calculate properly
Invalid input is handled gracefully

Theme Testing

Light mode displays correctly
Dark mode displays correctly
Theme persists across app restarts
All components respect theme

Error Handling

Network errors show user-friendly messages
App doesn’t crash on errors
Error boundary catches component errors
Invalid API responses are handled

Performance Testing

App loads quickly
Scrolling is smooth
No memory leaks
Animations are fluid

Cross-Platform Testing

Works on iOS
Works on Android
Works on web (if applicable)
Consistent behavior across platforms

Next Steps

Setup Guide

Set up your development environment

Scripts Reference

Learn about available npm scripts

Project Structure

Understand the codebase layout

Architecture

Learn about the architecture

This documentation will be updated as testing infrastructure is implemented. Consider setting up Jest and React Native Testing Library as the first step toward automated testing.

Available Scripts

⌘I

Get Started

Core Features

Architecture

Development

Current Testing Status

Quality Assurance Tools

TypeScript Type Checking

ESLint Code Analysis

Prettier Code Formatting

Manual Testing Approach

Development Testing Workflow

Error Boundary

Recommended Testing Setup

Unit Testing with Jest

Integration Testing

Database Testing

Pre-Commit Checks

Using Husky and lint-staged

Continuous Integration

GitHub Actions Example

Testing Best Practices

Test Pyramid

Arrange-Act-Assert

Test Isolation

Meaningful Names

Manual Testing Checklist

Next Steps

Setup Guide

Scripts Reference

Project Structure

Architecture

Build docs developers (and LLMs) love

Get Started

Core Features

Architecture

Development

​Current Testing Status

​Quality Assurance Tools

​TypeScript Type Checking

​ESLint Code Analysis

​Prettier Code Formatting

​Manual Testing Approach

​Development Testing Workflow

​Error Boundary

​Recommended Testing Setup

​Unit Testing with Jest

​Integration Testing

​Database Testing

​Pre-Commit Checks

​Using Husky and lint-staged

​Continuous Integration

​GitHub Actions Example

​Testing Best Practices

Test Pyramid

Arrange-Act-Assert

Test Isolation

Meaningful Names

​Manual Testing Checklist

​Next Steps

Setup Guide

Scripts Reference

Project Structure

Architecture

Build docs developers (and LLMs) love

Current Testing Status

Quality Assurance Tools

TypeScript Type Checking

ESLint Code Analysis

Prettier Code Formatting

Manual Testing Approach

Development Testing Workflow

Error Boundary

Recommended Testing Setup

Unit Testing with Jest

Integration Testing

Database Testing

Pre-Commit Checks

Using Husky and lint-staged

Continuous Integration

GitHub Actions Example

Testing Best Practices

Manual Testing Checklist

Next Steps