[Testing] Add Comprehensive Test Coverage

[Dancode-188]

[Testing] Add Comprehensive Test Coverage

Labels

testing, quality, good first issue

Problem Statement

RestBolt currently has no automated tests. While the application works well, the lack of tests means:

• 😰 Risk of regressions - Changes might break existing features
• 🐛 Harder to catch bugs - Issues only discovered during manual testing
• 📉 Lower confidence - Difficult to refactor or add features safely
• 🤝 Contributors hesitant - Hard for others to contribute without tests

We need comprehensive test coverage across unit, integration, and E2E tests.

Proposed Solution

Testing Strategy

1. Unit Tests (70% of tests)

Test individual functions and services in isolation

• Services (http-client, chain-service, etc.)
• Utilities and helpers
• Pure functions

2. Integration Tests (20% of tests)

Test how components work together

• Component integration with services
• State management flows
• API interactions

3. E2E Tests (10% of tests)

Test complete user workflows

• Send request → view response
• Create collection → save request
• Build chain → execute workflow

Testing Stack

// Recommended tools
{
  "unit": "Vitest",           // Fast, modern, works great with Vite/Next
  "component": "React Testing Library", // Standard for React
  "e2e": "Playwright",        // Better than Cypress for modern apps
  "coverage": "Vitest coverage"
}

Test Coverage Goals

Phase 1: Critical Path (Target: 40% coverage)

Focus on the most important features first:

Priority 1 - Core Features:
├── HTTP Client (lib/http-client.ts)
├── Request Execution
├── Response Handling
└── Variable Interpolation

Priority 2 - Data Layer:
├── Database operations (lib/db.ts)
├── Collections service
└── History service

Priority 3 - Chain Builder:
├── Chain execution (lib/chain-service.ts)
├── Variable extraction
└── Conflict detection

Phase 2: Comprehensive (Target: 60% coverage)

Add tests for remaining features:

• Code generation
• Diffing service
• WebSocket handling
• Export/import
• Environment management

Phase 3: E2E Scenarios (Target: 80% overall)

Complete user workflows:

• New user onboarding flow
• Complex chain execution
• Error handling scenarios

Implementation Plan

Step 1: Setup Testing Infrastructure (1 day)

# Install dependencies
npm install -D vitest @testing-library/react @testing-library/jest-dom
npm install -D @playwright/test
npm install -D @vitest/coverage-v8

# Update package.json
{
  "scripts": {
    "test": "vitest",
    "test:ui": "vitest --ui",
    "test:coverage": "vitest --coverage",
    "test:e2e": "playwright test"
  }
}

Create test configuration files:

• vitest.config.ts
• playwright.config.ts
• setupTests.ts

Step 2: Unit Tests - Services (2-3 days)

Example: HTTP Client Tests

// lib/__tests__/http-client.test.ts
import { describe, it, expect, vi } from 'vitest';
import { httpClient } from '../http-client';

describe('HTTP Client', () => {
  it('should send GET request successfully', async () => {
    const response = await httpClient.send({
      method: 'GET',
      url: 'https://api.example.com/data'
    });
    
    expect(response.status).toBe(200);
    expect(response.data).toBeDefined();
  });

  it('should handle errors gracefully', async () => {
    await expect(
      httpClient.send({
        method: 'GET',
        url: 'https://invalid-url'
      })
    ).rejects.toThrow();
  });

  it('should interpolate variables in URL', async () => {
    const response = await httpClient.send({
      method: 'GET',
      url: 'https://api.example.com/users/{{userId}}'
    }, { userId: '123' });
    
    expect(response.config.url).toBe('https://api.example.com/users/123');
  });
});

Example: Chain Service Tests

// lib/__tests__/chain-service.test.ts
import { describe, it, expect } from 'vitest';
import { chainService } from '../chain-service';

describe('Chain Service', () => {
  it('should execute steps in order', async () => {
    const chain = {
      steps: [
        { /* step 1 */ },
        { /* step 2 */ }
      ]
    };
    
    const result = await chainService.executeChain(chain.id);
    expect(result.status).toBe('completed');
  });

  it('should extract variables from responses', async () => {
    // Test variable extraction logic
  });

  it('should detect variable conflicts', async () => {
    // Test conflict detection
  });
});

Step 3: Component Tests (2-3 days)

// components/__tests__/RequestBuilder.test.tsx
import { render, screen, fireEvent } from '@testing-library/react';
import RequestBuilder from '../RequestBuilder';

describe('RequestBuilder', () => {
  it('should render all input fields', () => {
    render(<RequestBuilder />);
    
    expect(screen.getByLabelText('URL')).toBeInTheDocument();
    expect(screen.getByRole('button', { name: 'Send' })).toBeInTheDocument();
  });

  it('should update URL on input change', () => {
    render(<RequestBuilder />);
    const urlInput = screen.getByLabelText('URL');
    
    fireEvent.change(urlInput, { 
      target: { value: 'https://api.example.com' } 
    });
    
    expect(urlInput.value).toBe('https://api.example.com');
  });

  it('should call send function on button click', async () => {
    const mockSend = vi.fn();
    render(<RequestBuilder onSend={mockSend} />);
    
    fireEvent.click(screen.getByRole('button', { name: 'Send' }));
    
    expect(mockSend).toHaveBeenCalled();
  });
});

Step 4: E2E Tests (2-3 days)

// e2e/basic-workflow.spec.ts
import { test, expect } from '@playwright/test';

test('send request and view response', async ({ page }) => {
  await page.goto('http://localhost:3000');
  
  // Enter URL
  await page.fill('[data-testid="url-input"]', 'https://jsonplaceholder.typicode.com/posts/1');
  
  // Click send
  await page.click('[data-testid="send-button"]');
  
  // Wait for response
  await page.waitForSelector('[data-testid="response-viewer"]');
  
  // Verify response is visible
  const responseText = await page.textContent('[data-testid="response-viewer"]');
  expect(responseText).toContain('"userId"');
});

test('create and execute chain', async ({ page }) => {
  await page.goto('http://localhost:3000');
  
  // Navigate to Chains tab
  await page.click('text=Chains');
  
  // Create new chain
  await page.click('text=New Chain');
  
  // Add steps and configure
  await page.fill('[data-testid="chain-name"]', 'Test Chain');
  await page.click('text=Add Step');
  
  // Execute chain
  await page.click('text=Execute');
  
  // Verify execution completes
  await expect(page.locator('text=completed')).toBeVisible();
});

Step 5: CI/CD Integration (1 day)

Create GitHub Actions workflow:

# .github/workflows/test.yml
name: Tests

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'
      
      - name: Install dependencies
        run: npm ci
      
      - name: Run unit tests
        run: npm test
      
      - name: Run E2E tests
        run: npm run test:e2e
      
      - name: Generate coverage
        run: npm run test:coverage
      
      - name: Upload coverage
        uses: codecov/codecov-action@v3

Test Organization

restbolt/
├── src/
│   ├── lib/
│   │   ├── __tests__/
│   │   │   ├── http-client.test.ts
│   │   │   ├── chain-service.test.ts
│   │   │   └── db.test.ts
│   │   └── ...
│   ├── components/
│   │   ├── __tests__/
│   │   │   ├── RequestBuilder.test.tsx
│   │   │   ├── ResponseViewer.test.tsx
│   │   │   └── ChainBuilder.test.tsx
│   │   └── ...
├── e2e/
│   ├── basic-workflow.spec.ts
│   ├── chain-builder.spec.ts
│   └── collections.spec.ts
├── vitest.config.ts
└── playwright.config.ts

Coverage Badges

Add to README:

![Tests](https://github.com/Dancode-188/restbolt/actions/workflows/test.yml/badge.svg)
![Coverage](https://codecov.io/gh/Dancode-188/restbolt/branch/main/graph/badge.svg)

Acceptance Criteria

Phase 1 (Critical Path):

• Test infrastructure setup complete
• HTTP client has 80%+ coverage
• Chain service has 70%+ coverage
• Database operations have 60%+ coverage
• Tests run in CI/CD

Phase 2 (Comprehensive):

• All services have 60%+ coverage
• Critical components have 70%+ coverage
• Overall project coverage: 60%+

Phase 3 (E2E):

• 5+ E2E test scenarios
• E2E tests run in CI
• Overall project coverage: 80%+

Benefits

✅ Confidence - Make changes without fear
✅ Quality - Catch bugs before users do
✅ Documentation - Tests serve as usage examples
✅ Contributors - Easier for others to contribute
✅ Refactoring - Safe to improve code

Priority

High - Essential for long-term project health and contributor confidence

Estimated Effort

• Phase 1: 4-5 days (critical path coverage)
• Phase 2: 3-4 days (comprehensive coverage)
• Phase 3: 2-3 days (E2E scenarios)
• Total: 9-12 days

Getting Started (Good First Issue!)

New contributors can start with easy tests:

1. Test pure utility functions
2. Test simple components
3. Add E2E test for basic workflow

References

• Vitest: https://vitest.dev/
• React Testing Library: https://testing-library.com/react
• Playwright: https://playwright.dev/
• Testing best practices: https://kentcdodds.com/blog/common-mistakes-with-react-testing-library

[SSJane]

Hi, I'd like to contribute to this issue.
I have experience in manual and basic automation testing using Postman and selenium.
May i start by adding basic unit tests or simple E2E tests?

[Dancode-188]

Hi @SSJane! 👋

Thank you so much for your interest in contributing to RestBolt! I apologize for the delayed response. I missed your notification in my inbox.

I'd absolutely love your help with adding test coverage! Your experience with Postman and Selenium is perfect for this project.

Getting Started:

For your first contribution, I'd recommend starting with basic unit tests for the core services. Here's a good starting point:

1. HTTP Client Tests (lib/http-client.ts)

   • Test basic GET/POST requests
   • Test error handling
   • Test variable interpolation in URLs

2. Chain Service Tests (lib/chain-service.ts)

   • Test step execution order
   • Test variable extraction

Setup:

Install test dependencies

npm install -D vitest @testing-library/react @testing-library/jest-dom

Run tests

npm test

I'll need to add the test configuration first. Give me 24 hours to:

• Set up Vitest configuration
• Create example test files
• Add a CONTRIBUTING.md guide

In the meantime:

• Feel free to explore the codebase (src/lib/ and src/components/)
• Check out the testing strategy outlined in the issue description
• Let me know if you have any questions!

Again, really excited to have you contribute! Let's make RestBolt rock-solid with great test coverage. 🚀

Best,
Daniel

[Dancode-188]

Hi @SSJane! 👋

Great news - the test infrastructure is now set up and ready for you to start contributing! 🎉

What's Ready:
✅ Vitest configured with coverage support
✅ Test setup with proper mocks (localStorage, IndexedDB)
✅ Example HTTP client tests (see src/lib/tests/http-client.test.ts)
✅ Test scripts ready:

npm test,
npm run test:ui, 
npm run test:coverage

How to Get Started:

1. Fork and clone the repo
2. Install dependencies:

npm install

3. Run existing tests:

npm test

4. Run tests in UI mode:

npm run test:ui (great for development!)

Suggested First Contributions:

Since you have Postman experience, here are some great places to start:

1. Chain Service Tests (src/lib/tests/chain-service.test.ts)

   • Test chain execution logic
   • Test variable extraction from responses
   • Test conflict detection

2. Request/Response Utils (src/lib/tests/utils.test.ts)

   • Test URL parsing utilities
   • Test header formatting
   • Test body serialization

3. Database Service Tests (src/lib/tests/db.test.ts)

   • Test collection CRUD operations
   • Test request history storage
   • Test environment variable management

Testing Guidelines:

• Follow the Arrange-Act-Assert pattern (see http-client tests as example)
• Aim for descriptive test names: should do X when Y happens
• Mock external dependencies (like we did with axios)
• Each test should be independent and fast

Need Help?

• Check the existing http-client.test.ts for patterns
• Vitest docs: https://vitest.dev/
• Testing Library docs: https://testing-library.com/

Feel free to start with whichever service you're most comfortable with! Looking forward to your contribution! 🚀

Let me know if you have any questions or need clarification on any part of the codebase.

Best,
Daniel

[biocodeit]

hey Dancode, Can I work on this

[Dancode-188]

Hi @biocodeit! 👋

Thanks for your interest in contributing to RestBolt!

Great news - you're welcome to work on this issue! Since @SSJane expressed interest first (2 weeks ago), I want to make sure we coordinate so you're not duplicating effort.

Here's what I suggest:

Option 1: Collaborate with SSJane

• @SSJane - if you're still interested, please let me know your timeline
• @biocodeit - you two could team up and tackle different parts
  • One person: HTTP client tests + Chain service tests
  • Other person: Component tests + Database tests

Option 2: Pick Different Areas
If you both want to work independently, you could split by service:

• Person A: Core services (http-client, chain-service, db)
• Person B: Components and UI tests (RequestBuilder, ResponseViewer, ChainBuilder)

Option 3: First-Come-First-Serve

• @SSJane gets first priority since they commented first
• @biocodeit can start on different issues (I can create more!)

What I need from both of you:

1. Confirm your interest and availability
2. Let me know which approach you prefer (collaborate vs. split work)
3. Timeline estimate (helps me coordinate)

Getting Started:

The test infrastructure is already set up! Check out:

• itest.config.ts - Test configuration ✅
• src/lib/tests/http-client.test.ts - Example tests ✅
• CONTRIBUTING.md - Setup guide ✅

Run

npm test 

to see the existing tests in action.

Other Ways to Contribute:

If you want to start right away without waiting, I can create additional issues:

• Add E2E tests with Playwright
• Improve test coverage for specific services
• Add integration tests
• Set up GitHub Actions for CI/CD

Let me know what works best for you both! Excited to have you contributing! 🚀

Best,
Daniel

[biocodeit]

@Dancode-188 I would prefer- Add E2E tests with Playwright, if @SSJane is not working on this.

[Dancode-188]

Hi @biocodeit! 👋

Perfect! E2E tests with Playwright is a great choice and completely separate from the unit tests @SSJane was interested in. This means you can start right away without any conflicts!

You're officially assigned to E2E testing! 🎉

I'll create a new issue specifically for this: *[Testing] Add E2E Tests with Playwright*

Give me about 30 minutes to:

• Create the new issue with detailed requirements
• Set up the Playwright configuration
• Add example test scenarios
• Update the project structure

I'll tag you once it's ready. Thanks for being flexible and respectful of @SSJane's priority!

Best,
Daniel

[Dancode-188]

@biocodeit Your E2E testing issue is ready! 🎉

Check it out here: #5

I've included:

• ✅ Detailed test scenarios (3 core workflows to start)
• ✅ Playwright setup instructions
• ✅ Example test code
• ✅ Project structure
• ✅ Step-by-step implementation guide

Feel free to ask questions in that issue if you need any help. Looking forward to your contribution!

Best,
Daniel

[SSJane]

Hi @Dancode-188 👋

Thanks for coordinating this. I’m still very interested in contributing to HTTP Client Tests and Chain Service Tests. I’m happy to focus on these core services, and I think it makes sense for @biocodeit to work on E2E tests.

Proposed Timeline for My Contribution:

Day 1: Explore codebase, review existing http-client tests, set up local environment

Day 2–3: Add additional unit tests for HTTP Client (GET/POST, error handling, variable interpolation)

Day 4–5: Add unit tests for Chain Service (step execution, variable extraction, conflict detection)

Day 6: Run full tests, check coverage, polish test names and mocks

Day 7: Submit PR for review

This timeline should allow me to cover the critical parts of the core services without overlapping with E2E tests.

Looking forward to contributing! 🚀

Best,
SSJane

[Dancode-188]

Hi @SSJane! 👋

Your timeline looks perfect! 🎉 I'm officially assigning you to work on HTTP Client Tests and Chain Service Tests.

Approved Plan:

• Days 1-3: HTTP Client tests (GET/POST, error handling, variable interpolation) ✅
• Days 4-5: Chain Service tests (step execution, variable extraction, conflict detection) ✅
• Day 6: Polish and coverage checks ✅
• Day 7: PR submission ✅

Quick Notes:

• The test infrastructure is already set up (vitest.config.ts, setup files)
• Check out src/lib/tests/http-client.test.ts as a reference for patterns
• @biocodeit is working on E2E tests ([Testing] Add E2E Tests with Playwright #5), so no overlap!

Getting Started:

1. Fork the repo
2. Run

npm install

3. Run

npm test

to see existing tests
4. Create branch:

git checkout -b add-service-tests

Feel free to ask questions as you go! Looking forward to your contribution! 🚀

Best,
Daniel