Set up comprehensive CI/CD pipeline with automated testing and deployment

[icedac]

Overview

Implement a complete CI/CD pipeline for SmartGroupTabs to ensure code quality, automated testing, and streamlined deployment to Chrome Web Store and Microsoft Edge Add-ons.

Objectives

• Automate code quality checks (linting, formatting)
• Implement comprehensive test suites (unit, integration, E2E)
• Automate extension packaging and versioning
• Enable automated deployment to browser stores
• Ensure cross-browser compatibility

Proposed CI/CD Architecture

🔧 Development Workflow

main branch (protected)
  ├── feature/* branches
  ├── fix/* branches
  └── release/* branches

PR Requirements:
  - All tests passing
  - Code coverage > 80%
  - Lint checks passed
  - Format checks passed
  - E2E tests passed

📋 GitHub Actions Workflows

1. Pull Request Checks (.github/workflows/pr-checks.yml)

on: [pull_request]
jobs:
  - lint (ESLint)
  - format (Prettier)
  - unit-tests (Jest)
  - coverage-report
  - e2e-tests (Puppeteer)
  - build-extension
  - security-scan

2. Main Branch CI (.github/workflows/main-ci.yml)

on:
  push:
    branches: [main]
jobs:
  - full-test-suite
  - build-artifacts
  - create-release-draft
  - update-changelog

3. Release Pipeline (.github/workflows/release.yml)

on:
  release:
    types: [published]
jobs:
  - version-bump
  - build-production
  - package-extension
  - deploy-chrome-store
  - deploy-edge-store
  - create-github-release

🧪 Testing Strategy

Unit Tests (Jest + Testing Library)

• Background script logic tests
• Settings/popup component tests
• Rule matching algorithm tests
• Storage operations tests
• Message passing tests

Integration Tests

• Chrome API mock testing
• Extension lifecycle tests
• Cross-component communication
• State management tests

E2E Tests (Puppeteer + Chrome Extension API)

• Installation flow
• Tab grouping scenarios
• Settings persistence
• Keyboard shortcuts
• Multi-window behavior
• Performance benchmarks

📊 Code Quality Tools

ESLint Configuration

{
  "extends": ["eslint:recommended", "plugin:webextensions/recommended"],
  "rules": {
    "no-console": ["warn", { "allow": ["error", "debug"] }],
    "prefer-const": "error",
    "no-unused-vars": ["error", { "argsIgnorePattern": "^_" }]
  }
}

Prettier Configuration

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 100
}

🚀 Deployment Configuration

Chrome Web Store

• API credentials stored in GitHub Secrets
• Automated version incrementing
• Screenshot generation
• Changelog extraction
• Submission with review notes

Microsoft Edge Add-ons

• Partner Center API integration
• Automated certification submission
• Multi-locale support
• Beta channel deployment option

📁 Project Structure Updates

SmartGroupTabs/
├── .github/
│   ├── workflows/
│   │   ├── pr-checks.yml
│   │   ├── main-ci.yml
│   │   └── release.yml
│   └── ISSUE_TEMPLATE/
├── tests/
│   ├── unit/
│   ├── integration/
│   └── e2e/
├── scripts/
│   ├── build.js
│   ├── test.js
│   └── deploy.js
├── .eslintrc.json
├── .prettierrc.json
├── jest.config.js
├── puppeteer.config.js
└── package.json

🔐 Security & Secrets Management

• Chrome Web Store credentials: CHROME_CLIENT_ID, CHROME_CLIENT_SECRET, CHROME_REFRESH_TOKEN
• Edge Store credentials: EDGE_CLIENT_ID, EDGE_CLIENT_SECRET, EDGE_TENANT_ID
• Code signing certificate: SIGNING_KEY
• Dependency scanning with Dependabot
• Security advisories integration

📈 Monitoring & Reporting

• Test coverage badges in README
• Build status indicators
• Performance regression alerts
• Bundle size tracking
• Error rate monitoring post-deployment

Implementation Steps

Week 1: Foundation

• Set up package.json with all dev dependencies
• Configure ESLint and Prettier
• Create basic GitHub Actions workflow
• Set up Jest for unit testing

Week 2: Testing Infrastructure

• Write unit tests for existing code
• Set up Puppeteer for E2E testing
• Create test fixtures and mocks
• Implement coverage reporting

Week 3: CI Pipeline

• Complete PR checks workflow
• Set up artifact building
• Configure test matrix for multiple Chrome versions
• Add performance benchmarking

Week 4: CD Pipeline

• Store deployment credentials
• Create deployment scripts
• Test deployment to beta channels
• Document release process

Success Criteria

• ✅ All PRs require passing tests
• ✅ Code coverage maintained above 80%
• ✅ Automated deployment reduces release time by 90%
• ✅ Zero manual steps in release process
• ✅ Rollback capability within 5 minutes

Dependencies

{
  "devDependencies": {
    "@types/chrome": "^0.0.246",
    "@types/jest": "^29.5.0",
    "eslint": "^8.50.0",
    "eslint-plugin-webextensions": "^0.10.0",
    "jest": "^29.7.0",
    "jest-chrome": "^0.8.0",
    "prettier": "^3.0.0",
    "puppeteer": "^21.0.0",
    "webpack": "^5.88.0",
    "webpack-cli": "^5.1.0"
  }
}

References

• Chrome Extension Testing Guide
• GitHub Actions for Chrome Extensions
• Web Store API Documentation

Credits

• Proposed by: g@2lab.ai
• DevOps consultation: threads@zhugehyuk
• Implementation: SmartGroupTabs contributors

---

Labels: infrastructure, testing, automation, high-priority
Assignees: @icedac
Milestone: v2.0 - Quality & Automation