Automatic Testing Information

🤖 Automated Testing Pipeline

This document outlines the automatic testing infrastructure for the Minimal Status Panel plugin.

🔄 CI/CD Pipeline

GitHub Actions Workflows

1. Test & Lint Workflow (.github/workflows/ci.yml)

# Triggers on every push and PR
- TypeScript compilation check
- ESLint code quality check
- Jest unit tests
- Build verification

2. Release Workflow (.github/workflows/release.yml)

# Triggers on main branch push
- Semantic version analysis
- Build and package plugin
- Create GitHub release
- Upload release artifacts

Testing Matrix

🧪 Test Types

1. Unit Tests (src/__tests__/)

npm test

2. Integration Tests

npm run test:integration

3. End-to-End Tests

npm run test:e2e

📊 Test Coverage

Current Coverage Targets

Coverage Report

npm run test:coverage

🚀 Automated Deployment

Release Process

  1. Code pushed to main
  2. Tests run automatically
  3. Semantic version calculated
  4. Plugin built and packaged
  5. GitHub release created
  6. Artifacts uploaded

Version Bumping

# Patch: fix: commit message
# Minor: feat: commit message
# Major: feat!: commit message

📋 Test Scripts

Package.json Scripts

{
  "test": "jest",
  "test:ci": "jest --ci --coverage --watchAll=false",
  "test:watch": "jest --watch",
  "test:coverage": "jest --coverage",
  "typecheck": "tsc --noEmit",
  "lint": "eslint src --ext .ts,.tsx",
  "lint:fix": "eslint src --ext .ts,.tsx --fix"
}

Docker Testing

# Automated integration testing
docker-compose -f docker-compose.test.yml up --abort-on-container-exit

🔍 Quality Gates

Pre-commit Hooks

PR Requirements

Branch Protection

📈 Monitoring & Metrics

Build Metrics

Quality Metrics

🚨 Failure Handling

Test Failures

Release Failures

🔧 Local Testing Setup

Prerequisites

# Install dependencies
npm install

# Install testing tools
npm install -g jest @testing-library/react

Running Tests Locally

# Run all tests
npm test

# Run specific test file
npm test StatusPanel.test.tsx

# Run with coverage
npm run test:coverage

# Watch mode for development
npm run test:watch

📝 Test Configuration

Jest Configuration (jest.config.js)

module.exports = {
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: ['<rootDir>/src/setupTests.ts'],
  moduleNameMapping: {
    '\\.(css|scss)$': 'identity-obj-proxy'
  },
  collectCoverageFrom: [
    'src/**/*.{ts,tsx}',
    '!src/**/*.d.ts'
  ]
};

ESLint Configuration (.eslintrc.js)

module.exports = {
  extends: [
    '@grafana/eslint-config',
    'plugin:react-hooks/recommended'
  ],
  rules: {
    // Custom rules
  }
};

🎯 Testing Best Practices

Test Structure

Component Testing

// Example test structure
describe('StatusPanel', () => {
  const mockData = createMockPanelData();

  it('should render with valid data', () => {
    render(<StatusPanel {...mockProps} />);
    expect(screen.getByText('Service Name')).toBeInTheDocument();
  });
});

Data Testing

// Test data parsing
describe('parseDataFrames', () => {
  it('should parse prometheus metrics correctly', () => {
    const result = parseDataFrames(mockDataFrames);
    expect(result).toHaveLength(3);
    expect(result[0].status).toBe('up');
  });
});

🔮 Future Improvements

Planned Enhancements

Tooling Upgrades

📞 Getting Help

Test Issues

CI/CD Issues