From 4a6d0b620b91bdbf61c34a832182ff633ef95ea9 Mon Sep 17 00:00:00 2001 From: Daniel Roe Date: Mon, 9 Feb 2026 23:35:12 +0000 Subject: [PATCH 1/2] test: add 0 cls standard --- .lighthouserc.cjs | 12 ++++--- CONTRIBUTING.md | 34 +++++++++++++++---- package.json | 4 ++- scripts/{lighthouse-a11y.sh => lighthouse.sh} | 15 ++++++-- 4 files changed, 52 insertions(+), 13 deletions(-) rename scripts/{lighthouse-a11y.sh => lighthouse.sh} (62%) diff --git a/.lighthouserc.cjs b/.lighthouserc.cjs index 5a6957e27..423eb0b4e 100644 --- a/.lighthouserc.cjs +++ b/.lighthouserc.cjs @@ -35,14 +35,18 @@ module.exports = { chromePath: findChrome(), puppeteerScript: './lighthouse-setup.cjs', settings: { - onlyCategories: ['accessibility'], + onlyCategories: process.env.LH_PERF ? ['performance'] : ['accessibility'], skipAudits: ['valid-source-maps'], }, }, assert: { - assertions: { - 'categories:accessibility': ['error', { minScore: 1 }], - }, + assertions: process.env.LH_PERF + ? { + 'cumulative-layout-shift': ['error', { maxNumericValue: 0 }], + } + : { + 'categories:accessibility': ['error', { minScore: 1 }], + }, }, upload: { target: 'temporary-public-storage', diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 0fd728f90..7325c36e6 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -54,6 +54,7 @@ This focus helps guide our project decisions as a community and what we choose t - [Unit tests](#unit-tests) - [Component accessibility tests](#component-accessibility-tests) - [Lighthouse accessibility tests](#lighthouse-accessibility-tests) + - [Lighthouse performance tests](#lighthouse-performance-tests) - [End to end tests](#end-to-end-tests) - [Test fixtures (mocking external APIs)](#test-fixtures-mocking-external-apis) - [Submitting changes](#submitting-changes) @@ -114,6 +115,7 @@ pnpm test:unit # Unit tests only pnpm test:nuxt # Nuxt component tests pnpm test:browser # Playwright E2E tests pnpm test:a11y # Lighthouse accessibility audits +pnpm test:perf # Lighthouse performance audits (CLS) ``` ### Project structure @@ -641,18 +643,38 @@ pnpm test:a11y:prebuilt # Or run a single color mode manually pnpm build:test -LIGHTHOUSE_COLOR_MODE=dark ./scripts/lighthouse-a11y.sh +LIGHTHOUSE_COLOR_MODE=dark ./scripts/lighthouse.sh ``` This requires Chrome or Chromium to be installed. The script will auto-detect common installation paths. Results are printed to the terminal and saved in `.lighthouseci/`. #### Configuration -| File | Purpose | -| ---------------------------- | --------------------------------------------------------- | -| `.lighthouserc.cjs` | Lighthouse CI config (URLs, assertions, Chrome path) | -| `lighthouse-setup.cjs` | Puppeteer script for color mode + client-side API mocking | -| `scripts/lighthouse-a11y.sh` | Shell wrapper that runs the audit for a given color mode | +| File | Purpose | +| ----------------------- | --------------------------------------------------------- | +| `.lighthouserc.cjs` | Lighthouse CI config (URLs, assertions, Chrome path) | +| `lighthouse-setup.cjs` | Puppeteer script for color mode + client-side API mocking | +| `scripts/lighthouse.sh` | Shell wrapper that runs the audit for a given color mode | + +### Lighthouse performance tests + +The project also runs Lighthouse performance audits to enforce zero Cumulative Layout Shift (CLS). These run separately from the accessibility audits and test the same set of URLs. + +#### How it works + +The same `.lighthouserc.cjs` config is shared between accessibility and performance audits. When the `LH_PERF` environment variable is set, the config switches from the `accessibility` category to the `performance` category and asserts that CLS is exactly 0. + +#### Running locally + +```bash +# Build + run performance audit +pnpm test:perf + +# Or against an existing test build +pnpm test:perf:prebuilt +``` + +Unlike the accessibility audits, performance audits do not run in separate light/dark modes. ### End to end tests diff --git a/package.json b/package.json index 470bddad5..410564a85 100644 --- a/package.json +++ b/package.json @@ -34,7 +34,9 @@ "generate:lexicons": "lex build --lexicons lexicons --out shared/types/lexicons --clear", "test": "vite test", "test:a11y": "pnpm build:test && LIGHTHOUSE_COLOR_MODE=dark pnpm test:a11y:prebuilt && LIGHTHOUSE_COLOR_MODE=light pnpm test:a11y:prebuilt", - "test:a11y:prebuilt": "./scripts/lighthouse-a11y.sh", + "test:a11y:prebuilt": "./scripts/lighthouse.sh", + "test:perf": "pnpm build:test && pnpm test:perf:prebuilt", + "test:perf:prebuilt": "LH_PERF=1 ./scripts/lighthouse.sh", "test:browser": "pnpm build:test && pnpm test:browser:prebuilt", "test:browser:prebuilt": "playwright test", "test:browser:ui": "pnpm build:test && pnpm test:browser:prebuilt --ui", diff --git a/scripts/lighthouse-a11y.sh b/scripts/lighthouse.sh similarity index 62% rename from scripts/lighthouse-a11y.sh rename to scripts/lighthouse.sh index eee6bf126..deb865dfc 100755 --- a/scripts/lighthouse-a11y.sh +++ b/scripts/lighthouse.sh @@ -1,12 +1,23 @@ #!/bin/bash -# Run Lighthouse accessibility tests in both light and dark mode +# Run Lighthouse CI audits. +# +# Modes: +# - Accessibility (default): requires LIGHTHOUSE_COLOR_MODE (dark/light) +# - Performance: set LH_PERF=1 (no color mode needed) # -# This script runs lhci autorun twice, once for each color mode. # The LIGHTHOUSE_COLOR_MODE env var is read by lighthouse-setup.cjs # to set the appropriate theme before each audit. set -e +if [ -n "${LH_PERF}" ]; then + echo "⚡ Running Lighthouse performance audit (CLS)..." + pnpx @lhci/cli autorun --upload.githubStatusContextSuffix="/perf" + echo "" + echo "✅ Performance audit completed" + exit 0 +fi + case "${LIGHTHOUSE_COLOR_MODE}" in dark) echo "🌙 Running Lighthouse accessibility audit (dark mode)..." From 71379ab1d7dcae3833f49b15f52cf507afee3f97 Mon Sep 17 00:00:00 2001 From: Daniel Roe Date: Tue, 10 Feb 2026 00:49:04 +0000 Subject: [PATCH 2/2] fix: reduce cls on package page --- .../Package/WeeklyDownloadStats.vue | 22 +- app/pages/about.vue | 15 +- app/pages/package/[[org]]/[name].vue | 212 ++++++++---------- 3 files changed, 107 insertions(+), 142 deletions(-) diff --git a/app/components/Package/WeeklyDownloadStats.vue b/app/components/Package/WeeklyDownloadStats.vue index a7627afc2..5cf37a7e8 100644 --- a/app/components/Package/WeeklyDownloadStats.vue +++ b/app/components/Package/WeeklyDownloadStats.vue @@ -228,6 +228,7 @@ const config = computed(() => { > {{ $t('package.downloads.analyze') }} +
@@ -240,26 +241,21 @@ const config = computed(() => {