From 3a5d4d43e435d9dcfa11d798eb6af99e7e993515 Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Wed, 4 May 2022 09:49:44 +0300 Subject: [PATCH 1/4] misc: check doc page by Lighthouse CI --- .github/workflows/lighthouse-report.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/lighthouse-report.yml b/.github/workflows/lighthouse-report.yml index 45aa14b5460b..47a7371c9a5d 100644 --- a/.github/workflows/lighthouse-report.yml +++ b/.github/workflows/lighthouse-report.yml @@ -27,7 +27,7 @@ jobs: uses: treosh/lighthouse-ci-action@b4dfae3eb959c5226e2c5c6afd563d493188bfaf # 9.3.0 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 From ea22edd6f032f3740bfd9ee39cbbdb2dc78bc87d Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Wed, 4 May 2022 10:13:51 +0300 Subject: [PATCH 2/4] Update lighthouse-report.yml --- .github/workflows/lighthouse-report.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/.github/workflows/lighthouse-report.yml b/.github/workflows/lighthouse-report.yml index 47a7371c9a5d..2478f15b4027 100644 --- a/.github/workflows/lighthouse-report.yml +++ b/.github/workflows/lighthouse-report.yml @@ -27,6 +27,7 @@ jobs: uses: treosh/lighthouse-ci-action@b4dfae3eb959c5226e2c5c6afd563d493188bfaf # 9.3.0 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 From be46037f117903ebc70f4fe09b0efb7518e4970e Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Wed, 4 May 2022 15:08:06 +0300 Subject: [PATCH 3/4] Add script to render Lighthouse results --- .../scripts/format-lighthouse-score.js | 58 +++++++++++++++++++ 1 file changed, 58 insertions(+) create mode 100644 .github/workflows/scripts/format-lighthouse-score.js diff --git a/.github/workflows/scripts/format-lighthouse-score.js b/.github/workflows/scripts/format-lighthouse-score.js new file mode 100644 index 000000000000..01b37ca2dfcd --- /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; From 2a2396f1268a39d03f8496a96c6b4c521a722b59 Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Wed, 4 May 2022 15:08:32 +0300 Subject: [PATCH 4/4] Use script --- .github/workflows/lighthouse-report.yml | 21 ++++--------------- .../scripts/format-lighthouse-score.js | 4 ++-- 2 files changed, 6 insertions(+), 19 deletions(-) diff --git a/.github/workflows/lighthouse-report.yml b/.github/workflows/lighthouse-report.yml index 2478f15b4027..41fd2dc71565 100644 --- a/.github/workflows/lighthouse-report.yml +++ b/.github/workflows/lighthouse-report.yml @@ -40,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 index 01b37ca2dfcd..99ece0294c45 100644 --- a/.github/workflows/scripts/format-lighthouse-score.js +++ b/.github/workflows/scripts/format-lighthouse-score.js @@ -38,7 +38,7 @@ const createMarkdownTableHeader = () => { ]; }; -const createLightHouseReport = ({results, links}) => { +const createLighthouseReport = ({results, links}) => { const tableHeader = createMarkdownTableHeader(); const tableBody = results.map((result) => { const testUrl = Object.keys(links).find((key) => key === result.url); @@ -55,4 +55,4 @@ const createLightHouseReport = ({results, links}) => { return comment.join('\n'); }; -module.exports = createLightHouseReport; +module.exports = createLighthouseReport;