diff --git a/.github/workflows/lighthouse-report.yml b/.github/workflows/lighthouse-report.yml index 45aa14b5460b..41fd2dc71565 100644 --- a/.github/workflows/lighthouse-report.yml +++ b/.github/workflows/lighthouse-report.yml @@ -28,6 +28,7 @@ jobs: with: urls: | https://deploy-preview-$PR_NUMBER--docusaurus-2.netlify.app/ + https://deploy-preview-$PR_NUMBER--docusaurus-2.netlify.app/docs/ configPath: ./.github/workflows/lighthouserc.json uploadArtifacts: true temporaryPublicStorage: true @@ -39,24 +40,11 @@ jobs: with: github-token: ${{ secrets.GITHUB_TOKEN }} script: | - const result = ${{ steps.lighthouse_audit.outputs.manifest }}[0].summary + const results = ${{ steps.lighthouse_audit.outputs.manifest }} const links = ${{ steps.lighthouse_audit.outputs.links }} - const formatResult = (res) => Math.round((res * 100)) - Object.keys(result).forEach(key => result[key] = formatResult(result[key])) - const score = res => res >= 90 ? '🟢' : res >= 50 ? '🟠' : '🔴' - const comment = [ - `⚡️ [Lighthouse report](${Object.values(links)[0]}) for the changes in this PR:`, - '| Category | Score |', - '| --- | --- |', - `| ${score(result.performance)} Performance | ${result.performance} |`, - `| ${score(result.accessibility)} Accessibility | ${result.accessibility} |`, - `| ${score(result['best-practices'])} Best practices | ${result['best-practices']} |`, - `| ${score(result.seo)} SEO | ${result.seo} |`, - `| ${score(result.pwa)} PWA | ${result.pwa} |`, - ' ', - `*Lighthouse ran on [${Object.keys(links)[0]}](${Object.keys(links)[0]})*` - ].join('\n') - core.setOutput("comment", comment); + const createLighthouseReport = require(`${process.env.GITHUB_WORKSPACE}/.github/workflows/scripts/format-lighthouse-score.js`) + const comment = createLighthouseReport({ results, links }) + core.setOutput("comment", comment); - name: Add Lighthouse stats as comment id: comment_to_pr diff --git a/.github/workflows/scripts/format-lighthouse-score.js b/.github/workflows/scripts/format-lighthouse-score.js new file mode 100644 index 000000000000..99ece0294c45 --- /dev/null +++ b/.github/workflows/scripts/format-lighthouse-score.js @@ -0,0 +1,58 @@ +const score = (res) => (res >= 90 ? '🟢' : res >= 50 ? '🟠' : '🔴'); +const formatResult = (res) => Math.round(res * 100); +const scoreEntry = (scoreResult) => { + const normalizedScore = formatResult(scoreResult); + const scoreIcon = score(normalizedScore); + return `${scoreIcon} ${normalizedScore}`; +}; + +const createMarkdownTableRow = ({ + url, + performance, + accessibility, + bestPractices, + seo, + pwa, + reportUrl, +}) => { + return `| ${url} | ${performance} | ${accessibility} | ${bestPractices} | ${seo} | ${pwa} | [View report](${reportUrl})|`; +}; + +const createSingleRow = ({summary, testUrl, reportPublicUrl}) => { + const normalizedBody = { + url: testUrl, + performance: scoreEntry(summary.performance), + accessibility: scoreEntry(summary.accessibility), + bestPractices: scoreEntry(summary['best-practices']), + seo: scoreEntry(summary.seo), + pwa: scoreEntry(summary.pwa), + reportUrl: reportPublicUrl, + }; + return createMarkdownTableRow(normalizedBody); +}; + +const createMarkdownTableHeader = () => { + return [ + '| URL | Performance | Accessibility | Best Practices | SEO | PWA | Report |', + '|---------------------------|-------------|---------------|----------------|----------|---------|--------|', + ]; +}; + +const createLighthouseReport = ({results, links}) => { + const tableHeader = createMarkdownTableHeader(); + const tableBody = results.map((result) => { + const testUrl = Object.keys(links).find((key) => key === result.url); + const reportPublicUrl = links[testUrl]; + return createSingleRow({summary: result.summary, testUrl, reportPublicUrl}); + }); + const comment = [ + '### ⚡️ Lighthouse report for the changes in this PR', + '', + ...tableHeader, + ...tableBody, + '', + ]; + return comment.join('\n'); +}; + +module.exports = createLighthouseReport;