Testing

Comprehensive testing guide for Orphelix

Testing Overview

Orphelix has comprehensive test coverage with 300+ tests across unit and E2E testing:

Unit Tests

214 tests with Vitest

• Component tests
• Hook tests
• Utility function tests

E2E Tests

93 tests with Playwright

• User flow testing
• Integration testing
• Visual regression testing

Running Tests

Unit Tests

# Run all unit tests
npm test

# Run tests in watch mode
npm run test:watch

# Run tests with coverage
npm run test:coverage

# Run specific test file
npm test status-badge

E2E Tests

# Run all E2E tests
npm run test:e2e

# Run E2E tests in UI mode
npm run test:e2e:ui

# Run E2E tests in headed mode (see browser)
npm run test:e2e:headed

Test Structure

Unit Tests Location

__tests__/
├── components/
│   ├── common/
│   │   ├── status-badge.test.tsx
│   │   └── page-header.test.tsx
│   ├── dashboard/
│   │   └── summary-card.test.tsx
│   └── pods/
│       └── logs-viewer.test.tsx
├── lib/
│   ├── hooks/
│   │   ├── use-deployments.test.ts
│   │   └── use-pods.test.ts
│   └── utils.test.ts
└── types/
    └── kubernetes.test.ts

E2E Tests Location

e2e/
├── dashboard.spec.ts
├── deployments.spec.ts
├── pods.spec.ts
├── nodes.spec.ts
└── settings.spec.ts

Writing Unit Tests

Component Testing Example

import { render, screen } from '@testing-library/react'
import { StatusBadge } from '@/app/components/common/status-badge'

describe('StatusBadge', () => {
  it('renders Available status with success color', () => {
    render(<StatusBadge status="Available" />)

    const badge = screen.getByText('Available')
    expect(badge).toBeInTheDocument()

    const chip = badge.closest('.MuiChip-root')
    expect(chip).toHaveClass('MuiChip-colorSuccess')
  })
})

Hook Testing Example

import { renderHook, waitFor } from '@testing-library/react'
import { useDeployments } from '@/lib/hooks/use-deployments'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'

describe('useDeployments', () => {
  it('fetches deployments successfully', async () => {
    const queryClient = new QueryClient()
    const wrapper = ({ children }) => (
      <QueryClientProvider client={queryClient}>
        {children}
      </QueryClientProvider>
    )

    const { result } = renderHook(() => useDeployments(), { wrapper })

    await waitFor(() => {
      expect(result.current.isSuccess).toBe(true)
    })

    expect(result.current.data).toHaveLength(5)
  })
})

Writing E2E Tests

Page Testing Example

import { test, expect } from '@playwright/test'

test('dashboard displays summary cards', async ({ page }) => {
  await page.goto('http://localhost:3000')

  // Check all summary cards are visible
  await expect(page.getByText('Deployments')).toBeVisible()
  await expect(page.getByText('Pods')).toBeVisible()
  await expect(page.getByText('Nodes')).toBeVisible()

  // Check card values
  const deploymentsCard = page.locator('[data-testid="summary-card-deployments"]')
  await expect(deploymentsCard).toContainText('5')
})

User Flow Testing

test('navigate to deployment details', async ({ page }) => {
  await page.goto('http://localhost:3000/deployments')

  // Click on first deployment
  await page.click('tr:first-child td:first-child')

  // Verify we're on detail page
  await expect(page).toHaveURL(/\/deployments\/.*/)
  await expect(page.getByRole('heading')).toBeVisible()
})

Test Coverage

Current coverage (as of latest):

Category	Coverage
Statements	78%
Branches	72%
Functions	81%
Lines	78%

View Coverage Report

npm run test:coverage

Opens an HTML report in your browser showing detailed coverage for each file.

Testing with Real Cluster

Prerequisites

Kubernetes Cluster

Access to a K8s cluster (Minikube, Kind, or cloud provider)

kubectl

Configured and authenticated

Permissions

Read access to resources in target namespace

Setup Test Cluster

Option 1: Minikube

# Start Minikube
minikube start

# Create test resources
kubectl create deployment nginx --image=nginx:latest --replicas=3
kubectl create configmap app-config --from-literal=APP_ENV=test

Option 2: Kind

# Create cluster
kind create cluster --name orphelix-test

# Create test resources
kubectl create deployment nginx --image=nginx:latest --replicas=3

Test Real Mode

1. Start application

   npm run dev
   
2. Click 'DEMO MODE' badge

   Switch from demo to real cluster

3. Select kubectl context

   Choose your test cluster context

4. Test connection

   Click “Test Connection” to verify access

5. Switch mode

   Click “Switch to Real Cluster”

6. Verify data

   Confirm you see real resources from your cluster

CI/CD Testing

GitHub Actions

Tests run automatically on every push and PR:

name: Tests
on: [push, pull_request]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '20'
      - run: npm install
      - run: npm test
      - run: npm run test:e2e

Best Practices

Write tests for new features

Every new component or feature should include tests

Test edge cases

Don’t just test happy paths - test errors, loading states, and edge cases

Use data-testid

Add data-testid attributes for reliable E2E selectors

Mock external dependencies

Mock API calls, K8s client, and other external dependencies in unit tests

Keep tests fast

Unit tests should run in milliseconds, E2E tests in seconds

Troubleshooting

Tests timing out

Increase timeout in test file:

test('slow test', async ({ page }) => {
  test.setTimeout(60000) // 60 seconds
  // ...
})

E2E tests failing locally

Make sure dev server is running:

npm run dev

Module not found errors

Clear cache and reinstall:

rm -rf node_modules .next
npm install

Next Steps

Contributing

Learn how to contribute code

Architecture

Understand the system design