lighthouse-pr-audit.yml

name: Frontend-Lighthouse


on:
  pull_request:
    paths:
      - 'web/**'

jobs:
  build_and_preview:
    runs-on: ubuntu-22.04
    defaults:
      run:
        working-directory: ./web

    steps:
      - uses: actions/checkout@v3

      - uses: pnpm/action-setup@v2
        with:
          version: 8
      
      - uses: actions/setup-node@v3
        with:
          node-version: '20'
          cache: 'pnpm'
          cache-dependency-path: './web/pnpm-lock.yaml'

      - name: Install deps and build
        run: |
          echo "${{ secrets.PREVIEW_ENV_FILE }}" > ./.env

          pnpm install
          pnpm build

      - uses: FirebaseExtended/action-hosting-deploy@v0
        id: firebase_preview_url
        with:
          repoToken: "${{ secrets.GITHUB_TOKEN }}"
          firebaseServiceAccount: "${{ secrets.PREVIEW_FIREBASE_SERVICE_ACCOUNT }}"
          expires: 2d
          projectId: pse-p0tion-staging
          channelId: "preview-${{ github.sha }}"
          entryPoint: ./web/

      - name: '[Mobile] Audit preview URL with Lighthouse'
        id: lighthouse_audit_mobile
        uses: treosh/lighthouse-ci-action@v10
        with:
          urls: ${{ steps.firebase_preview_url.outputs.details_url }}
          temporaryPublicStorage: true
          
      - name: '[Desktop] Audit preview URL with Lighthouse'
        id: lighthouse_audit_desktop
        uses: treosh/lighthouse-ci-action@v10
        with:
          urls: ${{ steps.firebase_preview_url.outputs.details_url }}
          temporaryPublicStorage: true
          configPath: './.github/.lighthouserc.json'

      - name: Format lighthouse score
        id: format_lighthouse_score
        uses: actions/github-script@v3
        with:
          github-token: ${{secrets.GITHUB_TOKEN}}
          script: |
            const score = res => res >= 90 ? '🟢' : res >= 50 ? '🟠' : '🔴'          
            const formatResult = (res) => Math.round((res * 100))

            const desktop_result = ${{ steps.lighthouse_audit_desktop.outputs.manifest }}[0].summary
            const desktop_links = ${{ steps.lighthouse_audit_desktop.outputs.links }}
            Object.keys(desktop_result).forEach(key => desktop_result[key] = formatResult(desktop_result[key]))

            const mobile_result = ${{ steps.lighthouse_audit_mobile.outputs.manifest }}[0].summary
            const mobile_links = ${{ steps.lighthouse_audit_mobile.outputs.links }}
            Object.keys(mobile_result).forEach(key => mobile_result[key] = formatResult(mobile_result[key]))
            
            const comment = [
                `⚡️ [(Desktop) Lighthouse report](${Object.values(desktop_links)[0]}) for the changes in this PR:`,
                '| Category | Score |',
                '| --- | --- |',
                `| ${score(desktop_result.performance)} Performance | ${desktop_result.performance} |`,
                `| ${score(desktop_result.accessibility)} Accessibility | ${desktop_result.accessibility} |`,
                `| ${score(desktop_result['best-practices'])} Best practices | ${desktop_result['best-practices']} |`,
                `| ${score(desktop_result.seo)} SEO | ${desktop_result.seo} |`,
                `| ${score(desktop_result.pwa)} PWA | ${desktop_result.pwa} |`,
                ' ',
                `⚡️ [(Mobile) Lighthouse report](${Object.values(mobile_links)[0]}) for the changes in this PR:`,
                '| Category | Score |',
                '| --- | --- |',
                `| ${score(mobile_result.performance)} Performance | ${mobile_result.performance} |`,
                `| ${score(mobile_result.accessibility)} Accessibility | ${mobile_result.accessibility} |`,
                `| ${score(mobile_result['best-practices'])} Best practices | ${mobile_result['best-practices']} |`,
                `| ${score(mobile_result.seo)} SEO | ${mobile_result.seo} |`,
                `| ${score(mobile_result.pwa)} PWA | ${mobile_result.pwa} |`,
                ' ',
                `*Lighthouse ran on [${Object.keys(mobile_links)[0]}](${Object.keys(mobile_links)[0]})*`
            ].join('\n')
            core.setOutput("comment", comment); 

      - name: Add comment to PR
        id: comment_to_pr
        uses: marocchino/sticky-pull-request-comment@v1
        with:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          number: ${{ github.event.issue.number }}
          header: lighthouse
          message: |
            ${{ steps.format_lighthouse_score.outputs.comment }}