e2e-tests.yml

name: E2E Tests

# E2E tests are expensive - only run when manually triggered or on schedule
on:
  workflow_dispatch:
    inputs:
      browsers:
        description: 'Browsers to test (comma-separated: chromium,firefox,webkit)'
        required: false
        default: 'chromium'
      test-pattern:
        description: 'Test file pattern to run'
        required: false
        default: '**/*.spec.js'
  schedule:
    # Run nightly at 2 AM UTC
    - cron: '0 2 * * *'
  push:
    branches:
      - main
    paths:
      # Only run automatically on significant UI changes
      - '_layouts/**'
      - '_includes/**'
      - 'static/js/**'

jobs:
  # Build the site once and share it across all test jobs
  build:
    name: Build Jekyll Site
    runs-on: ubuntu-latest

    steps:
      - name: 📂 Checkout repository
        uses: actions/checkout@v6

      - name: 💎 Setup Ruby
        uses: ruby/setup-ruby@v1
        with:
          ruby-version: '3.3'
          bundler-cache: true

      - name: 📦 Install Ruby dependencies
        run: bundle install

      - name: 🏗️ Build Jekyll site
        run: |
          bundle exec jekyll build --config _config.yml,_config.test.yml
        env:
          JEKYLL_ENV: test

      - name: 📤 Upload built site
        uses: actions/upload-artifact@v6
        with:
          name: jekyll-site
          path: _site/
          retention-days: 1

  e2e-tests:
    name: E2E Tests - ${{ matrix.browser }}
    runs-on: ubuntu-latest
    needs: build

    strategy:
      fail-fast: false
      matrix:
        browser: [chromium, firefox, webkit]

    steps:
      - name: 📂 Checkout repository
        uses: actions/checkout@v6

      - name: 🟢 Setup Node.js
        uses: actions/setup-node@v6
        with:
          node-version: '20'
          cache: 'npm'

      - name: 📦 Install Node dependencies
        run: npm ci

      - name: 🎭 Install Playwright browsers
        run: |
          npx playwright install --with-deps ${{ matrix.browser }}

      - name: 📥 Download built site
        uses: actions/download-artifact@v7
        with:
          name: jekyll-site
          path: _site/

      - name: 🚀 Start static server
        run: |
          npx serve _site -l 4000 &
        env:
          CI: true

      - name: ⏳ Wait for server
        run: |
          npx wait-on http://localhost:4000 -t 15000

      - name: 🧪 Run E2E tests
        run: |
          PLAYWRIGHT_JSON_OUTPUT_NAME=test-results.json npx playwright test --project=${{ matrix.browser }} --reporter=html,json
        env:
          CI: true
          BASE_URL: http://localhost:4000

      - name: 📋 Write test summary
        if: always()
        run: |
          if [ -f test-results.json ]; then
            echo "## 🎭 E2E Test Results - ${{ matrix.browser }}" >> $GITHUB_STEP_SUMMARY
            echo "" >> $GITHUB_STEP_SUMMARY
            node -e "
              const results = require('./test-results.json');
              const stats = results.stats || {};
              const passed = stats.expected - stats.unexpected - stats.flaky || 0;
              const failed = stats.unexpected || 0;
              const flaky = stats.flaky || 0;
              const skipped = stats.skipped || 0;
              const total = stats.expected || 0;
              const status = failed === 0 ? '✅ Passed' : '❌ Failed';
              console.log('| Status | Total | Passed | Failed | Flaky | Skipped |');
              console.log('|--------|-------|--------|--------|-------|---------|');
              console.log('| ' + status + ' | ' + total + ' | ' + passed + ' | ' + failed + ' | ' + flaky + ' | ' + skipped + ' |');
            " >> $GITHUB_STEP_SUMMARY
          fi

      - name: 📊 Upload test results
        if: always()
        uses: actions/upload-artifact@v6
        with:
          name: playwright-report-${{ matrix.browser }}
          path: |
            playwright-report/
            test-results/
          retention-days: 7

      - name: 📸 Upload screenshots
        if: failure()
        uses: actions/upload-artifact@v6
        with:
          name: screenshots-${{ matrix.browser }}
          path: test-results/screenshots/
          retention-days: 7

  e2e-mobile:
    name: E2E Tests - Mobile
    runs-on: ubuntu-latest
    needs: build

    steps:
      - name: 📂 Checkout repository
        uses: actions/checkout@v6

      - name: 🟢 Setup Node.js
        uses: actions/setup-node@v6
        with:
          node-version: '20'
          cache: 'npm'

      - name: 📦 Install Node dependencies
        run: npm ci

      - name: 🎭 Install Playwright browsers
        run: |
          npx playwright install --with-deps chromium webkit

      - name: 📥 Download built site
        uses: actions/download-artifact@v7
        with:
          name: jekyll-site
          path: _site/

      - name: 🚀 Start static server
        run: |
          npx serve _site -l 4000 &
        env:
          CI: true

      - name: ⏳ Wait for server
        run: |
          npx wait-on http://localhost:4000 -t 15000

      - name: 📱 Run mobile E2E tests
        run: |
          PLAYWRIGHT_JSON_OUTPUT_NAME=test-results.json npx playwright test --project=mobile-chrome --project=mobile-safari --reporter=html,json
        env:
          CI: true
          BASE_URL: http://localhost:4000

      - name: 📋 Write test summary
        if: always()
        run: |
          if [ -f test-results.json ]; then
            echo "## 🎭 E2E Test Results - Mobile" >> $GITHUB_STEP_SUMMARY
            echo "" >> $GITHUB_STEP_SUMMARY
            node -e "
              const results = require('./test-results.json');
              const stats = results.stats || {};
              const passed = stats.expected - stats.unexpected - stats.flaky || 0;
              const failed = stats.unexpected || 0;
              const flaky = stats.flaky || 0;
              const skipped = stats.skipped || 0;
              const total = stats.expected || 0;
              const status = failed === 0 ? '✅ Passed' : '❌ Failed';
              console.log('| Status | Total | Passed | Failed | Flaky | Skipped |');
              console.log('|--------|-------|--------|--------|-------|---------|');
              console.log('| ' + status + ' | ' + total + ' | ' + passed + ' | ' + failed + ' | ' + flaky + ' | ' + skipped + ' |');
            " >> $GITHUB_STEP_SUMMARY
          fi

      - name: 📊 Upload mobile test results
        if: always()
        uses: actions/upload-artifact@v6
        with:
          name: playwright-report-mobile
          path: |
            playwright-report/
            test-results/
          retention-days: 7

  visual-regression:
    name: Visual Regression Tests
    runs-on: ubuntu-latest
    needs: build
    if: github.event_name == 'pull_request'

    steps:
      - name: 📂 Checkout repository
        uses: actions/checkout@v6

      - name: 🟢 Setup Node.js
        uses: actions/setup-node@v6
        with:
          node-version: '20'
          cache: 'npm'

      - name: 📦 Install Node dependencies
        run: npm ci

      - name: 🎭 Install Playwright
        run: |
          npx playwright install --with-deps chromium

      - name: 📥 Download built site
        uses: actions/download-artifact@v7
        with:
          name: jekyll-site
          path: _site/

      - name: 🚀 Start static server
        run: |
          npx serve _site -l 4000 &
        env:
          CI: true

      - name: ⏳ Wait for server
        run: |
          npx wait-on http://localhost:4000 -t 15000

      - name: 📸 Capture screenshots
        run: |
          npx playwright test --project=chromium --grep @visual
        env:
          CI: true
          BASE_URL: http://localhost:4000

      - name: 🖼️ Upload visual diffs
        if: failure()
        uses: actions/upload-artifact@v6
        with:
          name: visual-diffs
          path: test-results/visual-diffs/
          retention-days: 7

  report:
    name: Test Report
    runs-on: ubuntu-latest
    needs: [e2e-tests, e2e-mobile]
    if: always()

    steps:
      - name: 📂 Checkout repository
        uses: actions/checkout@v6

      - name: 🟢 Setup Node.js
        uses: actions/setup-node@v6
        with:
          node-version: '20'

      - name: 📥 Download all artifacts
        uses: actions/download-artifact@v7
        with:
          path: all-reports

      - name: 📋 Merge test results
        run: |
          mkdir -p merged-report
          # Merge all test results
          find all-reports -name "*.xml" -exec cp {} merged-report/ \;
          find all-reports -name "*.json" -exec cp {} merged-report/ \;

      - name: 💬 Comment PR with results
        if: github.event_name == 'pull_request'
        uses: actions/github-script@v8
        with:
          script: |
            const fs = require('fs');
            const path = require('path');

            let comment = '## 🎭 E2E Test Results\n\n';

            // Parse test results
            const reportFiles = fs.readdirSync('merged-report').filter(f => f.endsWith('.json'));
            let totalTests = 0;
            let passedTests = 0;
            let failedTests = 0;
            let skippedTests = 0;

            reportFiles.forEach(file => {
              try {
                const data = JSON.parse(fs.readFileSync(path.join('merged-report', file), 'utf8'));
                if (data.stats) {
                  totalTests += data.stats.expected || 0;
                  passedTests += data.stats.passed || 0;
                  failedTests += data.stats.failed || 0;
                  skippedTests += data.stats.skipped || 0;
                }
              } catch (e) {
                console.error(`Failed to parse ${file}:`, e);
              }
            });

            comment += `| Browser | Status | Tests | Passed | Failed | Skipped |\n`;
            comment += `|---------|--------|-------|--------|--------|----------|\n`;

            const browsers = ['chromium', 'firefox', 'webkit', 'mobile'];
            for (const browser of browsers) {
              const artifactExists = fs.existsSync(`all-reports/playwright-report-${browser}`);
              if (artifactExists) {
                const status = failedTests === 0 ? '✅' : '❌';
                comment += `| ${browser} | ${status} | ${totalTests} | ${passedTests} | ${failedTests} | ${skippedTests} |\n`;
              }
            }

            comment += '\n### 📊 Coverage Summary\n';
            comment += '- Notification System: ✅ Tested\n';
            comment += '- Countdown Timers: ✅ Tested\n';
            comment += '- Conference Management: ✅ Tested\n';
            comment += '- Search & Filter: ✅ Tested\n';

            if (failedTests > 0) {
              comment += '\n⚠️ **Some tests failed. Please check the artifacts for details.**\n';
            } else {
              comment += '\n✅ **All E2E tests passed successfully!**\n';
            }

            // Find and update or create comment
            const { data: comments } = await github.rest.issues.listComments({
              owner: context.repo.owner,
              repo: context.repo.repo,
              issue_number: context.issue.number,
            });

            const botComment = comments.find(comment =>
              comment.user.type === 'Bot' &&
              comment.body.includes('E2E Test Results')
            );

            if (botComment) {
              await github.rest.issues.updateComment({
                owner: context.repo.owner,
                repo: context.repo.repo,
                comment_id: botComment.id,
                body: comment
              });
            } else {
              await github.rest.issues.createComment({
                owner: context.repo.owner,
                repo: context.repo.repo,
                issue_number: context.issue.number,
                body: comment
              });
            }

      - name: 📈 Upload to dashboard
        if: github.ref == 'refs/heads/main'
        continue-on-error: true
        run: |
          echo "Test results can be uploaded to a dashboard service here"