lighthouse-desktop.yml

name: Lighthouse Desktop
on: [pull_request]
jobs:
  lighthouse:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v1
      - name: Waiting for pages to change
        uses: fountainhead/action-wait-for-check@v1.1.0
        id: wait-for-pages-changed
        with:
          token: ${{ secrets.GITHUB_TOKEN }}
          ref: ${{ github.event.pull_request.head.sha || github.sha }}
          checkName: 'Pages changed - elated-hoover-5c29bf'
          timeoutSeconds: 3600
      - name: Waiting for 200 from the Netlify Preview
        if: steps.wait-for-pages-changed.outputs.conclusion == 'neutral'
        uses: jakepartusch/wait-for-netlify-action@v1.4
        id: wait-for-netlify-preview
        with:
          site_name: 'elated-hoover-5c29bf'
          max_timeout: 3600
        env:
          NETLIFY_TOKEN: ${{ secrets.NETLIFY_TOKEN }}
      - name: Select random pages
        id: select-random-pages
        uses: actions/github-script@v6
        env:
          URL: ${{ steps.wait-for-netlify-preview.outputs.url }}
        with:
          script: |
            const { URL } = process.env
            const { selectRandomPages } = require('./src/tests/utils/select-pages.js')
            const pages = selectRandomPages({ sampleSize: 2 }).map(page => `${URL}${page}`).join('\n')
            core.setOutput('pages', pages)
      - name: Lighthouse CI
        id: lighthouse-ci
        uses: treosh/lighthouse-ci-action@v10
        with:
          urls: |
            ${{ steps.wait-for-netlify-preview.outputs.url }}
            ${{ steps.select-random-pages.outputs.pages }}
          configPath: ./lighthouserc.json
          temporaryPublicStorage: true
      - name: Generate summary report
        id: generate-summary-report
        uses: actions/github-script@v6
        env:
          URL: ${{ steps.wait-for-netlify-preview.outputs.url }}
          LINKS: ${{ steps.lighthouse-ci.outputs.links }}
          MANIFEST: ${{ steps.lighthouse-ci.outputs.manifest }}
        with:
          script: |
            const { URL } = process.env
            const links = JSON.parse(process.env.LINKS)
            const manifest = JSON.parse(process.env.MANIFEST)

            let count = 0
            let mean = {
              'performance': 0.0,
              'accessibility': 0.0,
              'best-practices': 0.0,
              'seo': 0.0,
            }

            let output = '# Performance Results\n\n'
            manifest.forEach(({ url, summary }) => {
              output += '<details>\n'
              output += '  <summary>\n'
              output += `    Page <a href=${url}>/${url.replace(URL, '')}</a>\n`
              output += '  </summary>\n'
              output += '  <br />\n\n'

              output += `  ![Performance](https://progress-bar.dev/${Math.floor(summary['performance'] * 100)}?title=Performance)\n`
              output += `  ![Accessibility](https://progress-bar.dev/${Math.floor(summary['accessibility'] * 100)}?title=Accessibility)\n`
              output += `  ![Best Practices](https://progress-bar.dev/${Math.floor(summary['best-practices'] * 100)}?title=Best%20Practices)\n`
              output += `  ![SEO](https://progress-bar.dev/${Math.floor(summary['seo'] * 100)}?title=SEO)\n\n`

              output += `  Complete results [here](${links[url]})\n`
              output += '</details>\n\n'

              count++
              Object.keys(summary).forEach(key => mean[key] += summary[key])
            })

            output += '## Overall Performance\n\n'
            output += `![Performance](https://progress-bar.dev/${Math.floor(mean['performance'] / count * 100)}?title=Performance)\n`
            output += `![Accessibility](https://progress-bar.dev/${Math.floor(mean['accessibility'] / count * 100)}?title=Accessibility)\n`
            output += `![Best Practices](https://progress-bar.dev/${Math.floor(mean['best-practices'] / count * 100)}?title=Best%20Practices)\n`
            output += `![SEO](https://progress-bar.dev/${Math.floor(mean['seo'] / count * 100)}?title=SEO)\n\n`

            core.setOutput('summary', output)
      - name: Comment PR
        uses: thollander/actions-comment-pull-request@v2
        with:
          comment_tag: lighthouse-summary
          message: ${{ steps.generate-summary-report.outputs.summary }}
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}