Skip to content

Commit

Permalink
test
Browse files Browse the repository at this point in the history
  • Loading branch information
tommm2 committed Mar 26, 2024
1 parent 10d5020 commit aa627fb
Show file tree
Hide file tree
Showing 3 changed files with 117 additions and 13 deletions.
58 changes: 50 additions & 8 deletions .github/workflows/lighthouse.yml
Original file line number Diff line number Diff line change
@@ -1,13 +1,55 @@
name: CI
name: Lighthouse

on: [push]

defaults:
run:
# This ensures that the working directory is the root of the repository
working-directory: ./

jobs:
lighthouseci:
lighthouse-ci:
name: Lighthouse Report
runs-on: ubuntu-latest

steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
- name: Capture Vercel Preview
uses: patrickedqvist/wait-for-vercel-preview@dca4940010f36d2d44caa487087a09b57939b24a # v1.3.1
id: vercel_preview_url
with:
node-version: 18
- run: npm install && npm install -g @lhci/cli@0.13.x
- run: npm run build
- run: lhci autorun
token: ${{ secrets.GITHUB_TOKEN }}
max_timeout: 300
check_interval: 10

- name: Audit Preview URL with Lighthouse
# Conduct the lighthouse audit
id: lighthouse_audit
uses: treosh/lighthouse-ci-action@1b0e7c33270fbba31a18a0fbb1de7cc5256b6d39 # v11.4.0
with:
# Defines the settings and assertions to audit
configPath: './.lighthouserc.json'
# These URLS capture critical pages / site functionality.
urls: |
${{ steps.vercel_preview_url.outputs.url }}/
${{ steps.vercel_preview_url.outputs.url }}/blog
${{ steps.vercel_preview_url.outputs.url }}/projects
${{ steps.vercel_preview_url.outputs.url }}/about
uploadArtifacts: true # save results as a action artifacts
temporaryPublicStorage: true # upload lighthouse report to the temporary storage

- name: Format Lighthouse Score
# Transform the audit results into a single, friendlier output
id: format_lighthouse_score
uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7.0.1
env:
# using env as input to our script
# see https://github.com/actions/github-script#use-env-as-input
LIGHTHOUSE_RESULT: ${{ steps.lighthouse_audit.outputs.manifest }}
LIGHTHOUSE_LINKS: ${{ steps.lighthouse_audit.outputs.links }}
VERCEL_PREVIEW_URL: ${{ steps.vercel_preview_url.outputs.url }}
with:
# Run as a separate file so we do not have to inline all of our formatting logic.
# See https://github.com/actions/github-script#run-a-separate-file for more info.
script: |
const { formatLighthouseResults } = await import('${{github.workspace}}/scripts/lighthouse/index.mjs')
await formatLighthouseResults({core})
21 changes: 16 additions & 5 deletions lighthouserc.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,18 @@
{
"ci": {
"upload": {
"target": "temporary-public-storage"
}
}
"ci": {
"collect": {
"numberOfRuns": 1,
"settings": {
"preset": "desktop"
}
},
"assert": {
"assertions": {
"categories:performance": ["warn", { "minScore": 0.9 }],
"categories:accessibility": ["warn", { "minScore": 0.9 }],
"categories:best-practices": ["warn", { "minScore": 0.9 }],
"categories:seo": ["warn", { "minScore": 0.9 }]
}
}
}
}
51 changes: 51 additions & 0 deletions scripts/lighthouse/index.mjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
'use strict';

const stoplight = res => (res >= 90 ? '🟢' : res >= 75 ? '🟠' : '🔴');
const normalizeScore = res => Math.round(res * 100);
const formatScore = res => {
const normalizedScore = normalizeScore(res);

return `${stoplight(normalizedScore)} ${normalizedScore}`;
};

/**
* `core` is in scope from https://github.com/actions/github-script
*/
export const formatLighthouseResults = ({ core }) => {
// this will be the shape of https://github.com/treosh/lighthouse-ci-action#manifest
const results = JSON.parse(process.env.LIGHTHOUSE_RESULT);

// this will be the shape of https://github.com/treosh/lighthouse-ci-action#links
const links = JSON.parse(process.env.LIGHTHOUSE_LINKS);

// start creating our markdown table
const header = [
'Lighthouse Results',
'URL | Performance | Accessibility | Best Practices | SEO | Report',
'| - | - | - | - | - | - |',
];

// map over each url result, formatting and linking to the output
const urlResults = results.map(({ url, summary }) => {
// make the tested link as a markdown link, without the long-generated host
const shortPreviewLink = `[${url.replace(
process.env.VERCEL_PREVIEW_URL,
''
)}](${url})`;

// make each formatted score from our lighthouse properties
const performanceScore = formatScore(summary.performance);
const accessibilityScore = formatScore(summary.accessibility);
const bestPracticesScore = formatScore(summary['best-practices']);
const seoScore = formatScore(summary.seo);

// create the markdown table row
return `${shortPreviewLink} | ${performanceScore} | ${accessibilityScore} | ${bestPracticesScore} | ${seoScore} | [🔗](${links[url]})`;
});

// join the header and the rows together
const finalResults = [...header, ...urlResults].join('\n');

// return our output to the github action
core.setOutput('comment', finalResults);
};

0 comments on commit aa627fb

Please sign in to comment.