lighthouse.yml

name: Run lighthouse CI

on:
  pull_request:
    branches: [main]

jobs:
  Lighthouse-CI:
    name: Lighthouse CI
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node: [16.x]
    steps:
      - name: Checkout
        uses: actions/checkout@v3

      - name: Use Node.js ${{ matrix.node }}
        uses: actions/setup-node@v3
        with:
          node-version: ${{ matrix.node }}

      - name: Dependency Install
        uses: ./.github/actions/yarn-install

      - name: Build
        run: |
          yarn build

      - name: Run Lighthouse CI
        env:
          LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}
        run: |
          npm install -g @lhci/cli
          lhci autorun || echo "Fail to Run Lighthouse CI!"

      - name: Format lighthouse score
        id: format_lighthouse_score
        uses: actions/github-script@v3
        with:
          github-token: ${{secrets.GITHUB_TOKEN}}
          script: |
            const fs = require('fs');
            const results = JSON.parse(fs.readFileSync("./lhci_reports/manifest.json"));
            const tries = 3;
            const triesArr = Array.from({ length: tries }, (_, idx) => idx + 1);
            let comments = "JJINN Lighthouse 성능 측정 결과 🤾‍♀️" + "\n\n";
            results.forEach((result, i) => {
              const { summary, jsonPath } = result;
              const details = JSON.parse(fs.readFileSync(jsonPath));
              const { audits } = details;
              const formatResult = (res) => Math.round(res * 100);
              Object.keys(summary).forEach(
                (key) => (summary[key] = formatResult(summary[key]))
              );
              const score = (res) => (res >= 90 ? "🟢" : res >= 50 ? "🟠" : "🔴");
              const comment = [
                `try ${triesArr[i]}`,
                `| Category | Score |`,
                `| --- | --- |`,
                `| ${score(summary.performance)} Performance | ${summary.performance} |`,
                `| ${score(summary.accessibility)} Accessibility | ${summary.accessibility} |`,
                `| ${score(summary["best-practices"])} Best-Practices | ${summary["best-practices"]} |`,
                `| ${score(summary.seo)} SEO | ${summary.seo} |`,
                `| ${score(summary.pwa)} PWA | ${summary.pwa} |`
              ].join("\n");
              const detail = [
                `| Category | Score |`,
                `| --- | --- |`,
                `| ${score(
                  audits["first-contentful-paint"].score * 100
                )} First Contentful Paint | ${
                  audits["first-contentful-paint"].displayValue
                } |`,
                `| ${score(
                  audits["largest-contentful-paint"].score * 100
                )} Largest Contentful Paint | ${
                  audits["largest-contentful-paint"].displayValue
                } |`,
                `| ${score(
                  audits["first-meaningful-paint"].score * 100
                )} First Meaningful Paint | ${
                  audits["first-meaningful-paint"].displayValue
                } |`,
                `| ${score(
                  audits["speed-index"].score * 100
                )} Speed Index | ${
                  audits["speed-index"].displayValue
                } |`,
                `| ${score(
                  audits["total-blocking-time"].score * 100
                )} Total Blocking Time | ${
                  audits["total-blocking-time"].displayValue
                } |`,
              ].join("\n");
              comments += comment + "\n" +"\n"+ detail + "\n" + "\n";
            });
            core.setOutput('comments', comments)
      - uses: jwalton/gh-find-current-pr@v1
        id: finder
      - uses: marocchino/sticky-pull-request-comment@v2
        with:
          number: ${{ steps.finder.outputs.pr }}
          message: |
            ${{ github.sha }}
            Lighthouse CI ended successfully.
            ${{ steps.format_lighthouse_score.outputs.comments}}