feat: lighthouse accessibility check pipeline

.gitea/workflows/lighthouse.yaml

@@ -0,0 +1,102 @@
+name: Lighthouse Checks
+run-name: Running Lighthouse Performance and Accessibility Checks on Pull Request
+on: [pull_request]
+
+jobs:
+  lighthouse:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [20.15.1]
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - name: Install Google Chrome
+        run: |
+          wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add -
+          echo "deb http://dl.google.com/linux/chrome/deb/ stable main" > /etc/apt/sources.list.d/google.list
+          apt-get update
+          apt-get install -y google-chrome-stable xvfb
+
+      - name: Install pm2 for process management
+        run: npm i -g pm2
+
+      - name: Create .env file for sasjs/server
+        run: |
+          touch .env
+          echo RUN_TIMES=js >> .env
+          echo NODE_PATH=node >> .env
+          echo CORS=enable >> .env
+          echo WHITELIST=http://localhost:4200 >> .env
+          cat .env
+
+      - name: Download sasjs/server package from github using curl
+        run: curl -L https://github.com/sasjs/server/releases/latest/download/linux.zip > linux.zip
+
+      - name: Unzip downloaded package
+        run: unzip linux.zip
+
+      - name: Run sasjs server
+        run: pm2 start api-linux --wait-ready
+
+      - name: Write .npmrc file
+        run: echo "$NPMRC" > client/.npmrc
+        shell: bash
+        env:
+          NPMRC: ${{ secrets.NPMRC}}
+
+      - name: Install npm dependencies
+        run: |
+          cd client
+          # Decrypt and Install sheet
+          echo ${{ secrets.SHEET_PWD }} | gpg --batch --yes --passphrase-fd 0 ./libraries/sheet-crypto.tgz.gpg
+          npm ci
+          npm install -g replace-in-files-cli
+
+      - name: Install Doxygen (used in sasjs doc)
+        run: sudo apt-get install doxygen
+
+      - name: Update appLoc in index.html
+        run: |
+          cd client
+          replace-in-files --regex='appLoc=".*?"' --replacement='appLoc="/proj/sasjs/genesis-mocks"' ./src/index.html
+
+      - name: Build Frontend
+        run: |
+          cd client
+          npm run build
+
+      - name: Deploy JS mocked services and frontend to the local SASjs Server instance
+        run: |
+          cd sas/mocks
+          npm ci
+          npm run deploy
+
+      - name: Start frontend server
+        run: |
+          cd client
+          npx ng serve --host 0.0.0.0 --port 4200 &
+          npx wait-on http://localhost:4200
+
+      - name: Wait for both servers to be ready
+        run: |
+          npx wait-on http://localhost:5000 http://localhost:4200
+
+      - name: Run Lighthouse CI
+        run: |
+          cd client
+          npx lhci autorun
+
+      - name: Lighthouse Result Artifacts
+        if: always()
+        uses: actions/upload-artifact@v3
+        with:
+          name: Lighthouse results
+          path: client/lighthouse-reports
+          include-hidden-files: true

.gitignore

@@ -21,3 +21,4 @@ sasjsresults
 .sasjsrc
 client/.npmrc
 *~
+.lighthouseci

README.md

@@ -38,4 +38,27 @@ For further information:
 * Docs:  https://docs.datacontroller.io
 * Code: https://code.datacontroller.io
 
-For support, contact support@4gl.io or reach out on [Matrix](https://matrix.to/#/#dc:4gl.io)!
+For support, contact support@4gl.io or reach out on [Matrix](https://matrix.to/#/#dc:4gl.io)!
+
+## Development
+
+### Lighthouse CI
+
+This project includes automated Lighthouse performance and accessibility checks that run on pull requests. The checks ensure:
+
+- **Accessibility Score**: Minimum 1.0 (100%) median score across all tested pages
+
+The Lighthouse CI workflow:
+1. Sets up the development environment with SASjs server and mocked services
+2. Builds and serves the Angular frontend
+3. Runs Lighthouse CI against key application pages
+4. Uploads results as artifacts for review
+
+To run Lighthouse checks locally:
+```bash
+cd client
+npm install
+npm run lighthouse
+```
+
+Configuration is in `client/lighthouserc.js`.

client/lighthouserc.js

@@ -0,0 +1,42 @@
+module.exports = {
+  ci: {
+    collect: {
+      settings: {
+        preset: "desktop",
+        chromeFlags: "--no-sandbox --disable-dev-shm-usage"
+      },
+      url: [
+        'http://localhost:5000/AppStream/clickme/#/home/tables',
+        'http://localhost:5000/AppStream/clickme/#/editor/DC996664.MPE_X_TEST',
+        'http://localhost:5000/AppStream/clickme/#/view/data',
+        'http://localhost:5000/AppStream/clickme/#/view/data/DC996664',
+        'http://localhost:5000/AppStream/clickme/#/view/data/DC996664.MPE_X_TEST',
+        'http://localhost:5000/AppStream/clickme/#/view/usernav/groups',
+        'http://localhost:5000/AppStream/clickme/#/view/usernav/groups',
+        'http://localhost:5000/AppStream/clickme/#/view/usernav/groups/1',
+        'http://localhost:5000/AppStream/clickme/#/view/usernav/users/1',
+        'http://localhost:5000/AppStream/clickme/#/home/excel-maps',
+        'http://localhost:5000/AppStream/clickme/#/home/excel-maps/BASEL-CR2',
+        'http://localhost:5000/AppStream/clickme/#/home/multi-load',
+        'http://localhost:5000/AppStream/clickme/#/review/submitted',
+        'http://localhost:5000/AppStream/clickme/#/review/approve',
+        'http://localhost:5000/AppStream/clickme/#/review/history',
+        'http://localhost:5000/AppStream/clickme/#/stage/DC20221006T142649516_059582_7169',
+        'http://localhost:5000/AppStream/clickme/#/review/submitted/DC20221006T142649516_059582_7169',
+        'http://localhost:5000/AppStream/clickme/#/system'
+      ]
+    },
+    assert: {
+      assertions: {
+        'categories:accessibility': [
+          'error',
+          { minScore: 1, aggregationMethod: 'median' }
+        ],
+        'categories:performance': [
+          'error',
+          { minScore: 0.4, aggregationMethod: 'median' }
+        ]
+      }
+    }
+  }
+}

client/package.json

@@ -31,7 +31,8 @@
     "sasdocs": "sasjs doc && ./sasjs/utils/deploydocs.sh",
     "compodoc:build": "compodoc -p tsconfig.doc.json --name 'Data Controller Client'",
     "compodoc:build-and-serve": "compodoc -p tsconfig.doc.json -s --name 'Data Controller Client'",
-    "compodoc:serve": "compodoc -s --name 'Data Controller Client'"
+    "compodoc:serve": "compodoc -s --name 'Data Controller Client'",
+    "lighthouse": "lhci autorun"
   },
   "private": true,
   "dependencies": {
@@ -128,6 +129,7 @@
     "ts-node": "^3.3.0",
     "typescript": "~5.4.4",
     "wait-on": "^6.0.1",
-    "watch": "^1.0.2"
+    "watch": "^1.0.2",
+    "@lhci/cli": "^0.12.0"
   }
 }

client/src/index.html

@@ -44,8 +44,8 @@
   -->
 
   <sasjs
-    serverUrl=""
-    appLoc="/Public/app/dc"
+    serverUrl="http://localhost:5000"
+    appLoc="/Public/app/devtest"
     serverType="SASJS"
     loginMechanism="Redirected"
     debug="false"