-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(lhci-report): add lighthouse ci reports
- Loading branch information
1 parent
156eaed
commit 9c08af1
Showing
12 changed files
with
256 additions
and
8 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| # Lighthouse CI report | ||
|
|
||
| Print Lighthouse CI report to CLI | ||
|
|
||
| ## Install | ||
|
|
||
| ``` | ||
| npm install -D eslint @rambler-tech/lhci-report | ||
| ``` | ||
|
|
||
| or | ||
|
|
||
| ``` | ||
| yarn add -D eslint @rambler-tech/lhci-report | ||
| ``` | ||
|
|
||
| ## Usage | ||
|
|
||
| ```sh | ||
| @rambler-tech/lhci-report <lhci report dir> | ||
|
|
||
| Lighthouse report | ||
|
|
||
| URL: https://www.rambler.ru/ | ||
| Number of runs: 3 | ||
|
|
||
| performance 0.93 0.94 0.94 | ||
| accessibility 0.87 0.87 0.87 | ||
| best-practices 0.52 0.56 0.56 | ||
| seo 0.92 0.92 0.92 | ||
| pwa 0.71 0.71 0.71 | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| #!/usr/bin/env node | ||
| import * as path from 'path' | ||
| import * as fs from 'fs/promises' | ||
| import {formatReport} from './format' | ||
| import {getReport, type Manifest} from './report' | ||
|
|
||
| async function print(dir: string) { | ||
| const manifestFile = path.resolve(dir, 'manifest.json') | ||
| // eslint-disable-next-line security/detect-non-literal-fs-filename | ||
| const manifestJson = await fs.readFile(manifestFile, 'utf8') | ||
| const manifest: Manifest = JSON.parse(manifestJson) | ||
| const report = getReport(manifest) | ||
|
|
||
| // eslint-disable-next-line no-console | ||
| console.log(formatReport(report)) | ||
| } | ||
|
|
||
| const [, , reportDir] = process.argv | ||
|
|
||
| if (!reportDir) { | ||
| throw new Error('report dir not exists') | ||
| } | ||
|
|
||
| print(path.resolve(process.cwd(), reportDir)) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| import {green, red, yellow} from 'chalk' | ||
| import {formatReport} from './format' | ||
|
|
||
| test('format the report', () => { | ||
| const mock = { | ||
| 'http://example.com': { | ||
| performance: [1, 0.9], | ||
| accessibility: [0.5, 0.6], | ||
| 'best-practices': [0.6, 0.5], | ||
| seo: [0.2, 0.3], | ||
| pwa: [0.1, 0.4] | ||
| } | ||
| } | ||
|
|
||
| const report = formatReport(mock) | ||
|
|
||
| expect(report).toContain('URL: http://example.com') | ||
| expect(report).toContain('Number of runs: 2') | ||
| expect(report).toContain( | ||
| `performance ${green('1.00')} ${green('0.90')}` | ||
| ) | ||
| expect(report).toContain( | ||
| `accessibility ${yellow('0.50')} ${yellow('0.60')}` | ||
| ) | ||
| expect(report).toContain( | ||
| `best-practices ${yellow('0.60')} ${yellow('0.50')}` | ||
| ) | ||
| expect(report).toContain(`seo ${red('0.20')} ${red('0.30')}`) | ||
| expect(report).toContain(`pwa ${red('0.10')} ${red('0.40')}`) | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| import {green, red, yellow, type Chalk} from 'chalk' | ||
| import type {Report} from './report' | ||
|
|
||
| const METRIC_NAME_LENGTH = 18 | ||
|
|
||
| const CRITICAL_TRESHOLD = 0.5 | ||
| const WARN_TRESHOLD = 0.9 | ||
|
|
||
| const TRESHOLDS: [number, Chalk][] = [ | ||
| [CRITICAL_TRESHOLD, red], | ||
| [WARN_TRESHOLD, yellow], | ||
| [Infinity, green] | ||
| ] | ||
|
|
||
| function formatMetricValue(value: number) { | ||
| const [, color]: any = TRESHOLDS.find(([treshold]) => value < treshold) | ||
|
|
||
| return color(value.toFixed(2)) | ||
| } | ||
|
|
||
| export function formatReport(report: Report) { | ||
| let output = '\nLighthouse report\n' | ||
|
|
||
| Object.entries(report).forEach(([url, metrics]) => { | ||
| output += '\n' | ||
| output += `URL: ${url}` | ||
| output += '\n' | ||
| output += `Number of runs: ${metrics.performance.length}` | ||
| output += '\n\n' | ||
|
|
||
| Object.entries(metrics).forEach(([metric, values]) => { | ||
| const row = [ | ||
| metric.padEnd(METRIC_NAME_LENGTH, ' '), | ||
| ...values.map(formatMetricValue) | ||
| ] | ||
|
|
||
| output += row.join(' ') | ||
| output += '\n' | ||
| }) | ||
| }) | ||
|
|
||
| return output | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| { | ||
| "name": "@rambler-tech/lhci-report", | ||
| "version": "0.0.0", | ||
| "cli": "dist/cli.js", | ||
| "types": "dist/cli.d.ts", | ||
| "license": "MIT", | ||
| "sideEffects": false, | ||
| "publishConfig": { | ||
| "access": "public" | ||
| }, | ||
| "devDependencies": { | ||
| "@types/chalk": "^0.4.31", | ||
| "@types/node": "^20.11.30" | ||
| }, | ||
| "dependencies": { | ||
| "chalk": "^4" | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| import {getReport} from './report' | ||
|
|
||
| test('get the report', () => { | ||
| const mock = [ | ||
| { | ||
| url: 'http://example.com', | ||
| summary: { | ||
| performance: 1, | ||
| acccessibility: 0.5, | ||
| 'best-practices': 0.6, | ||
| seo: 0.2, | ||
| pwa: 0.1 | ||
| } | ||
| }, | ||
| { | ||
| url: 'http://example.com', | ||
| summary: { | ||
| performance: 0.9, | ||
| acccessibility: 0.6, | ||
| 'best-practices': 0.5, | ||
| seo: 0.3, | ||
| pwa: 0.4 | ||
| } | ||
| } | ||
| ] | ||
|
|
||
| const report = getReport(mock) | ||
|
|
||
| expect(report).toEqual({ | ||
| 'http://example.com': { | ||
| performance: [1, 0.9], | ||
| acccessibility: [0.5, 0.6], | ||
| 'best-practices': [0.6, 0.5], | ||
| seo: [0.2, 0.3], | ||
| pwa: [0.1, 0.4] | ||
| } | ||
| }) | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| export type Manifest = { | ||
| url: string | ||
| summary: Record<string, number> | ||
| }[] | ||
|
|
||
| export type Report = Record<string, Record<string, number[]>> | ||
|
|
||
| export function getReport(manifest: Manifest) { | ||
| return manifest.reduce((acc, {url, summary}) => { | ||
| Object.entries(summary).forEach(([metric, value]) => { | ||
| acc[url] ??= {} | ||
| acc[url][metric] ??= [] | ||
| acc[url][metric].push(value) | ||
| }) | ||
|
|
||
| return acc | ||
| }, {} as Report) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| ../../tsconfig.package.json |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters