name: Frontend Tests

on:

pull_request:

paths:

- 'static/js/**'

- 'tests/frontend/**'

- 'package.json'

- 'package-lock.json'

- 'jest.config.js'

- '.github/workflows/frontend-tests.yml'

push:

branches:

- main

- develop

paths:

- 'static/js/**'

- 'tests/frontend/**'

- 'package.json'

- 'jest.config.js'

workflow_dispatch:

# Allow manual trigger for testing

permissions:

contents: read

jobs:

test:

name: Run JavaScript Tests

runs-on: ubuntu-latest

permissions:

contents: read

pull-requests: write

issues: write

strategy:

fail-fast: true

matrix:

node-version: [20] # Simplify to just Node 20

steps:

- name: 📂 Checkout repository

uses: actions/checkout@v7

- name: 🟢 Setup Node.js ${{ matrix.node-version }}

uses: actions/setup-node@v6

with:

node-version: ${{ matrix.node-version }}

cache: 'npm'

cache-dependency-path: package-lock.json

- name: 📦 Cache node_modules

id: cache-node-modules

uses: actions/cache@v6

with:

path: node_modules

key: ${{ runner.os }}-node-${{ matrix.node-version }}-${{ hashFiles('package-lock.json') }}

restore-keys: |

${{ runner.os }}-node-${{ matrix.node-version }}-

- name: 📦 Install dependencies

if: steps.cache-node-modules.outputs.cache-hit != 'true'

run: |

npm ci

# Also install optional reporter if needed

npm install jest-html-reporter --save-dev || true

- name: 🧪 Run unit tests

run: npm test -- --coverage --ci --maxWorkers=2

env:

CI: true

- name: 📊 Generate coverage report

run: |

npm run test:coverage || true

- name: 📤 Upload coverage to Codecov

uses: codecov/codecov-action@v7

with:

files: ./coverage/lcov.info

flags: frontend

name: frontend-coverage

fail_ci_if_error: false

- name: 📋 Upload test results

if: always()

uses: actions/upload-artifact@v7

with:

name: test-results-node-${{ matrix.node-version }}

path: |

coverage/

test-report.html

retention-days: 7

- name: 💬 Comment PR with results

if: github.event_name == 'pull_request'

uses: actions/github-script@v9

with:

script: |

const fs = require('fs');

let coverageText = '📊 **Frontend Test Coverage Report**\n\n';

try {

// Try to read coverage summary if it exists

const coveragePath = './coverage/coverage-summary.json';

if (fs.existsSync(coveragePath)) {

const coverage = JSON.parse(fs.readFileSync(coveragePath, 'utf8'));

const total = coverage.total;

coverageText += '| Metric | Coverage | Status |\n';

coverageText += '|--------|----------|--------|\n';

const getStatus = (pct) => pct >= 80 ? '✅' : pct >= 70 ? '⚠️' : '❌';

coverageText += `| Lines | ${total.lines.pct}% | ${getStatus(total.lines.pct)} |\n`;

coverageText += `| Statements | ${total.statements.pct}% | ${getStatus(total.statements.pct)} |\n`;

coverageText += `| Functions | ${total.functions.pct}% | ${getStatus(total.functions.pct)} |\n`;

coverageText += `| Branches | ${total.branches.pct}% | ${getStatus(total.branches.pct)} |\n`;

} else {

coverageText += '⚠️ Coverage report not found\n';

}

} catch (error) {

coverageText += `⚠️ Could not parse coverage report: ${error.message}\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('Frontend Test Coverage Report')

);

if (botComment) {

await github.rest.issues.updateComment({

owner: context.repo.owner,

repo: context.repo.repo,

comment_id: botComment.id,

body: coverageText

});

} else {

await github.rest.issues.createComment({

owner: context.repo.owner,

repo: context.repo.repo,

issue_number: context.issue.number,

body: coverageText

});

}

lint-js:

name: Lint JavaScript

runs-on: ubuntu-latest

steps:

- name: 📂 Checkout repository

uses: actions/checkout@v7

- name: 🟢 Setup Node.js

uses: actions/setup-node@v6

with:

node-version: '20'

cache: 'npm'

- name: 📦 Install ESLint

run: |

npm install --save-dev eslint

npm install --save-dev eslint-plugin-jest || true

- name: 🔍 Run ESLint

run: |

npx eslint static/js/*.js --ignore-pattern "*.min.js" || true

continue-on-error: true # Don't fail the build on linting errors initially

integration:

name: Integration Tests

runs-on: ubuntu-latest

needs: test

steps:

- name: 📂 Checkout repository

uses: actions/checkout@v7

- name: 🟢 Setup Node.js

uses: actions/setup-node@v6

with:

node-version: '20'

cache: 'npm'

- name: 💎 Setup Ruby

uses: ruby/setup-ruby@v1

with:

ruby-version: '3.3'

bundler-cache: true

- name: 📦 Install dependencies

run: |

npm ci

bundle install

- name: 🏗️ Build Jekyll site

run: |

bundle exec jekyll build

env:

JEKYLL_ENV: test

- name: 🧪 Run integration tests

run: |

npm run test:integration || echo "No integration tests yet"

continue-on-error: true

- name: 📤 Upload built site

uses: actions/upload-artifact@v7

with:

name: built-site

path: _site/

retention-days: 1