Merge pull request #1 from SUI-Components/feat/use-dynamic-urls

feat(Root): use dynamic urls

Author: Rafa Moral

.github/workflows/test.yml

@@ -2,25 +2,39 @@ name: Test this action
 
 on:
   push:
-    branches: [ master ]
+    branches: [ main ]
   pull_request:
-    branches: [ master ]
+    branches: [ main ]
 
 jobs:
   check-skip:
-    runs-on: small
+    runs-on: ubuntu-latest
     steps:
       - name: Cancel Previous Redundant Builds
         uses: styfle/cancel-workflow-action@0.6.0
         with:
           access_token: ${{ github.token }}
 
-  test-action:
-    runs-on: small
+  tests:
+    runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      - uses: ./
+      - name: Checkout Code
+        uses: actions/checkout@v3
+      
+      - name: Setup node
+        uses: actions/setup-node@v2
         with:
-          number: ${{ github.event.issue.number }}
-          LHCI_GITHUB_TOKEN: ${{ secrets.LHCI_GITHUB_TOKEN }}
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          node-version: 16
+
+      - name: Install dependencies
+        run: npm run phoenix
+
+      - name: Run Tests
+        run: npm run test
+
+      - name: Run Lighthouse pull request action
+        uses: ./pull-request
+        with:
+          urls: |
+            http://localhost:8000/
+            http://localhost:8000/listing

.gitignore

@@ -1 +1,2 @@
+package-lock.json
 node_modules

.lighthouserc.js

@@ -143,22 +143,22 @@ const assertions = {
   viewport: ['off', {}]
 }
 
+
+const assert = {
+  assertions
+}
+
 const collect = {
   chromePath: '/opt/hostedtoolcache/chromium/latest/x64/chrome',
   startServerCommand:
-    'node server',
+    'npm run serve:lhci',
   startServerReadyPattern: 'listening',
   settings: {chromeFlags: ['--disable-gpu', '--no-sandbox', '-no-zygote']}
 }
 
 module.exports = {
   ci: {
-    assert: {
-      assertions
-    },
-    collect,
-    upload: {
-      githubApiHost: 'https://github.mpi-internal.com/api/v3'
-    }
+    assert,
+    collect
   }
 }

README.md

@@ -1 +1,7 @@
-# frontend-common--lighthouse-pr-action
+# lighthouse actions
+
+## Actions
+
+| Name | Description |
+|------|-------------|
+| [pull-request](pull-request) | Analyse how Pull Request changes affects performance and add a comment |

action.yml

@@ -1,13 +1,30 @@
 {
-  "name": "frontend-common--lighthouse-pr-action",
+  "name": "@s-ui/lighthouse-action",
   "version": "1.0.0",
   "description": "Action for running Lighthouse CI on a PR and posts the results as a comment",
-  "scripts": {
-    "co": "npx @s-ui/mono@2 commit"
-  },
   "repository": {
     "type": "git",
-    "url": "https://github.mpi-internal.com/rafael-moral/frontend-common--lighthouse-pr-action.git"
+    "url": "https://github.com/SUI-Components/lighthouse-action.git"
+  },
+  "license": "MIT",
+  "scripts": {
+    "co": "npx @s-ui/mono@2 commit",
+    "phoenix": "npx @s-ui/mono phoenix",
+    "serve:lhci": "NODE_ENV=production node server",
+    "test": "npx @s-ui/test server -P './test/**/*.js'"
+  },
+  "dependencies": {
+    "@s-ui/lint": "4",
+    "@s-ui/test": "8",
+    "chai": "4.3.6"
+  },
+  "eslintConfig": {
+    "extends": [
+      "./node_modules/@s-ui/lint/eslintrc.js"
+    ]
   },
-  "author": "Web Platform <enablers-frontend@adevinta.com>"
+  "prettier": "./node_modules/@s-ui/lint/.prettierrc.js",
+  "stylelint": {
+    "extends": "./node_modules/@s-ui/lint/stylelint.config.js"
+  }
 }

package.json

@@ -0,0 +1,45 @@
+name: 'Lighthouse CI for Pull Requests'
+description: 'Runs Lighthouse CI on a PR and posts the results as a comment'
+
+inputs:
+  urls:
+    description: 'List of URL(s) to analyze'
+    required: true
+
+runs:
+  using: "composite"
+  steps:
+    - run: |
+        sudo apt-get update
+        sudo apt-get install -y libgconf-2-4 libatk1.0-0 libatk-bridge2.0-0 libgdk-pixbuf2.0-0 libgtk-3-0 libgbm-dev libnss3-dev libxss-dev libasound2
+      shell: bash
+    - uses: browser-actions/setup-chrome@latest
+    - run: |
+        chrome --version
+        which chrome
+      shell: bash
+    - name: Audit preview URL with Lighthouse
+      id: lhci
+      uses: treosh/lighthouse-ci-action@v3
+      with:
+        configPath: ./.lighthouserc.js
+        urls: ${{inputs.urls}}
+    - name: Format lighthouse score
+      id: format_lhci_score
+      uses: actions/github-script@v6
+      with:
+        script: |
+          const path = require('path')
+          const generateCommentFromResults = require(path.resolve('./src/generateCommentFromResults.js'))
+          const results = ${{ steps.lhci.outputs.manifest }}
+          const comment = generateCommentFromResults({results})
+          core.setOutput("comment", comment);
+    - name: Add comment to PR
+      id: comment_to_pr
+      uses: marocchino/sticky-pull-request-comment@v2
+      with:
+        hide_and_recreate: true
+        hide_classify: "OUTDATED"
+        number: ${{ github.event.issue.number }}
+        message: |
+          ${{ steps.format_lhci_score.outputs.comment }}

pull-request/action.yml

@@ -1,11 +1,12 @@
-var http = require('http'),
-    fs = require('fs');
+const http = require('http')
 
+const html =
+  '<!DOCTYPE html><html><head><title>Page Title</title></head><body><h1>My First Heading</h1><p>My first paragraph.</p></body></html>'
 
-const html = '<!DOCTYPE html><html><head><title>Page Title</title></head><body><h1>My First Heading</h1><p>My first paragraph.</p></body></html>';
-
-http.createServer(function(request, response) {  
-    response.writeHeader(200, {"Content-Type": "text/html"});
-    response.write(html);
-    response.end();
-}).listen(8000);
+http
+  .createServer(function (request, response) {
+    response.writeHeader(200, {'Content-Type': 'text/html'})
+    response.write(html)
+    response.end()
+  })
+  .listen(8000)

server/index.js

@@ -0,0 +1,40 @@
+// '⚡️ [Lighthouse report]'
+// `(${Object.values(links)[0]}) for the changes in this PR:`,
+
+const getScore = res => {
+  if (res >= 90) return '🟢'
+  return res >= 50 ? '🟠' : '🔴'
+}
+
+const getResultPart = ({summary, url}) => {
+  return [
+    '| Category | Score |',
+    '| --- | --- |',
+    `| ${getScore(summary.performance)} Performance | ${summary.performance} |`,
+    `| ${getScore(summary.accessibility)} Accessibility | ${
+      summary.accessibility
+    } |`,
+    `| ${getScore(summary['best-practices'])} Best practices | ${
+      summary['best-practices']
+    } |`,
+    `| ${getScore(summary.seo)} SEO | ${summary.seo} |`,
+    `| ${getScore(summary.pwa)} PWA | ${summary.pwa} |`,
+    ' ',
+    `*Lighthouse ran on ${url}*`,
+    ' '
+  ].join('\n')
+}
+
+const fromResultsToCommentMapper = (results = []) => {
+  const comments = [
+    '⚡️ [Lighthouse report]',
+    ' ',
+    ...results.map(getResultPart)
+  ]
+
+  const comment = comments.join('\n')
+
+  return comment
+}
+
+module.exports = fromResultsToCommentMapper

src/fromResultsToCommentMapper.js

@@ -0,0 +1,9 @@
+const mapLhciResults = require('./mapLhciResults.js')
+const fromResultsToCommentMapper = require('./fromResultsToCommentMapper.js')
+
+module.exports = ({results = []}) => {
+  const formattedResults = mapLhciResults(results)
+  const comment = fromResultsToCommentMapper(formattedResults)
+
+  return comment
+}