feat: Generate lh scores for desktop and mobile (#714)

fix: consolidate steps to build result
bigcommerce · Mar 29, 2024 · e45f811 · e45f811
1 parent 643033a
commit e45f811
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 13 deletions.
diff --git a/.github/workflows/.lighthouserc-desktop.json b/.github/workflows/.lighthouserc-desktop.json
@@ -0,0 +1,9 @@
+{
+  "ci": {
+    "collect": {
+      "settings": {
+        "preset": "desktop"
+      }
+    }
+  }
+}
diff --git a/.github/workflows/lighthouse.yml b/.github/workflows/lighthouse.yml
@@ -15,28 +15,53 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@main
 
-      - uses: pnpm/action-setup@v3
+      - name: Lighthouse house audit on desktop
+        id: lighthouse_audit_desktop
+        uses: treosh/lighthouse-ci-action@v11
+        with:
+          urls: |
+            ${{ github.event.deployment_status.target_url }}
+          configPath: '.github/workflows/.lighthouserc-desktop.json'
+          temporaryPublicStorage: true
+          runs: 3
 
-      - name: Audit preview URL with Lighthouse
-        id: lighthouse_audit
+      - name: Lighthouse audit on mobile
+        id: lighthouse_audit_mobile
         uses: treosh/lighthouse-ci-action@v11
         with:
           urls: |
             ${{ github.event.deployment_status.target_url }}
-          uploadArtifacts: true
           temporaryPublicStorage: true
           runs: 3
 
-      - name: Format lighthouse score
-        id: format_lighthouse_score
+      - uses: pnpm/action-setup@v3
+      - name: Format lighthouse score on desktop
+        id: format_lighthouse_score_desktop
         uses: actions/github-script@v7
         with:
           script: |
             const lighthouseCommentMaker = require('./.github/workflows/lighthouseCommentMaker.js');
 
             const lighthouseOutputs = {
-              manifest: ${{ steps.lighthouse_audit.outputs.manifest }},
-              links: ${{ steps.lighthouse_audit.outputs.links }}
+              manifest: ${{ steps.lighthouse_audit_desktop.outputs.manifest }},
+              links: ${{ steps.lighthouse_audit_desktop.outputs.links }},
+              preset: "desktop"
+            };
+
+            const comment = lighthouseCommentMaker({ lighthouseOutputs });
+            core.setOutput("comment", comment);
+
+      - name: Format lighthouse score on mobile
+        id: format_lighthouse_score_mobile
+        uses: actions/github-script@v7
+        with:
+          script: |
+            const lighthouseCommentMaker = require('./.github/workflows/lighthouseCommentMaker.js');
+            
+            const lighthouseOutputs = {
+              manifest: ${{ steps.lighthouse_audit_mobile.outputs.manifest }},
+              links: ${{ steps.lighthouse_audit_mobile.outputs.links }},
+              preset: "mobile"
             };
 
             const comment = lighthouseCommentMaker({ lighthouseOutputs });
@@ -54,4 +79,15 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           number: ${{ steps.finder.outputs.pr }}
           header: lighthouse
-          message: ${{ steps.format_lighthouse_score.outputs.comment }}
+          message: |
+            # ⚡️🏠 Lighthouse report
+            
+            *Lighthouse ran against ${{ github.event.deployment_status.target_url }}* 
+            
+            ## 🖥️ Desktop
+            
+            ${{ steps.format_lighthouse_score_desktop.outputs.comment }}
+            
+            ## 📱 Mobile
+            
+            ${{ steps.format_lighthouse_score_mobile.outputs.comment }}
diff --git a/.github/workflows/lighthouseCommentMaker.js b/.github/workflows/lighthouseCommentMaker.js
@@ -22,6 +22,7 @@
  * @typedef {Object} LighthouseOutputs
  * @prop {Record<string, string>} links
  * @prop {Manifest[]} manifest
+ * @prop {string} preset
  */
 
 const formatScore = (/** @type { number } */ score) => Math.round(score * 100);
@@ -39,10 +40,9 @@ const scoreRow = (
 function makeComment(lighthouseOutputs) {
     const { summary } = lighthouseOutputs.manifest[2];
     const [[testedUrl, reportUrl]] = Object.entries(lighthouseOutputs.links);
+    const preset = lighthouseOutputs.preset;
 
-    const comment = `## ⚡️🏠 Lighthouse report
-
-We ran Lighthouse against the changes and produced this [report](${reportUrl}). Here's the summary:
+    const comment = `We ran Lighthouse against the changes on a ${preset} and produced this [report](${reportUrl}). Here's the summary:
 
 | Category | Score |
 | -------- | ----- |
@@ -51,7 +51,6 @@ ${scoreRow('Accessibility', summary.accessibility)}
 ${scoreRow('Best practices', summary['best-practices'])}
 ${scoreRow('SEO', summary.seo)}
 
-*Lighthouse ran against [${testedUrl}](${testedUrl})*
 `;
 
     return comment;