ci(): Refactor GHA for reuse and caching

.github/actions/build-fabric-cached/action.yml

@@ -0,0 +1,15 @@
+name: 'Build fabric'
+description: 'Build fabric and cache result per commit'
+runs:
+  using: 'composite'
+  steps:
+    - name: Get cache build
+      id: build-cache
+      uses: actions/cache@v3
+      with:
+        path: ./dist
+        key: npm-${{ github.event.pull_request.head.sha }}
+    - name: Build fabric.js dist folder
+      if: steps.build-cache.outputs.cache-hit != 'true'
+      run: npm run build -- -f
+      shell: bash

.github/actions/cached-install/action.yml

@@ -0,0 +1,32 @@
+name: 'Install fabric'
+description: 'Install dependencies from cache between different node versions'
+inputs:
+  node-version:
+    required: true
+    description: 'the node version'
+  install-system-deps:
+    description: 'install node-canvas deps with apt-get'
+runs:
+  using: 'composite'
+  steps:
+    - name: Install system deps for node canvas
+      if: inputs.install-system-deps == 'true'
+      run: sudo apt-get install libgif-dev libpng-dev libpango1.0-dev libjpeg8-dev librsvg2-dev libcairo2-dev
+      shell: bash
+    - name: Use Node.js v${{ inputs.node-version }}
+      uses: actions/setup-node@v3
+      with:
+        node-version: ${{ inputs.node-version }}
+    - name: Get npm cache directory
+      id: npm-cache-dir
+      run: |
+        echo "dir=$(npm config get cache)" >> $GITHUB_OUTPUT
+      shell: bash
+    - name: Cache dependencies
+      uses: actions/cache@v3
+      with:
+        path: ${{ steps.npm-cache-dir.outputs.dir }}
+        key: npm-${{ inputs.node-version }}-${{ hashFiles('package-lock.json') }}
+        restore-keys: npm-${{ inputs.node-version }}
+    - run: npm ci --audit false --fund false
+      shell: bash

.github/workflows/build.yml

@@ -9,12 +9,11 @@ jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
       - name: Uglified build
-        uses: actions/setup-node@v1
+        uses: actions/checkout@v3
+      - uses: ./.github/actions/cached-install
         with:
           node-version: 18.x
-      - run: npm ci
       - run: npm run build
   stats:
     name: Build stats
@@ -72,38 +71,18 @@ jobs:
   lint:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
       - name: Linting
-        uses: actions/setup-node@v1
+        uses: actions/checkout@v3
+      - uses: ./.github/actions/cached-install
         with:
           node-version: 18.x
-      - run: npm ci
       - run: npm run lint
   prettier:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
       - name: Prettier check
-        uses: actions/setup-node@v1
+        uses: actions/checkout@v3
+      - uses: ./.github/actions/cached-install
         with:
           node-version: 18.x
-      - run: npm ci
       - run: npm run prettier:check
-  coverage:
-    if: ${{ always() }}
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-      - name: Code Coverage Report Updater
-        uses: actions/setup-node@v1
-        with:
-          node-version: 18.x
-      - run: npm ci
-      - run: npm run build -- -f
-      - run: npm run test:coverage && npm run test:visual:coverage
-      - run: npm run coverage:report
-      - uses: ShaMan123/[email protected]
-        with:
-          github-token: ${{ secrets.GITHUB_TOKEN }}
-          delete-old-comments: true
-          update-comment: true

.github/workflows/tests.yml

@@ -8,7 +8,49 @@ on:
     paths-ignore: [CHANGELOG.md]
 
 jobs:
+  prime-build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Install dependencies
+        uses: ./.github/actions/cached-install
+        with:
+          node-version: 18.x
+          install-system-deps: true
+      - name: Build fabric.js
+        uses: ./.github/actions/build-fabric-cached
+  node-coverage:
+    needs: [prime-build]
+    runs-on: ubuntu-latest
+    name: Node 18.x ${{ matrix.suite }} tests
+    strategy:
+      fail-fast: false
+      matrix:
+        # For more information see:
+        # https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+        # supported Node.js release schedule: https://nodejs.org/en/about/releases/
+        suite: [unit, visual]
+    steps:
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/cached-install
+        with:
+          node-version: 18.x
+          install-system-deps: true
+      - name: Build fabric.js
+        uses: ./.github/actions/build-fabric-cached
+      - name: Run ${{ matrix.suite }} tests with coverage
+        if: matrix.suite == 'unit'
+        run: npm run test:coverage
+      - name: Run ${{ matrix.suite }} tests with coverage
+        if: matrix.suite == 'visual'
+        run: npm run test:visual:coverage
+      - name: Upload test coverage
+        uses: actions/upload-artifact@v3
+        with:
+          name: coverage-${{ matrix.suite }}
+          path: .nyc_output/*.json
   browser:
+    needs: [prime-build]
     name: ${{ matrix.target }} ${{ matrix.suite }} tests
     runs-on: ubuntu-latest
     strategy:
@@ -18,18 +60,19 @@ jobs:
         suite: [unit, visual]
       fail-fast: false
     steps:
-      - uses: actions/checkout@v2
-      - name: Unit tests on Chrome
-        uses: actions/setup-node@v1
+      - name: Unit tests on browser ${{ matrix.target }}
+        uses: actions/checkout@v3
+      - uses: ./.github/actions/cached-install
         with:
           node-version: ${{ matrix.node-version }}
-      - run: npm ci
-      - run: npm run build -- -f
+      - name: Build fabric.js
+        uses: ./.github/actions/build-fabric-cached
       - name: Run ${{ matrix.target }} ${{ matrix.suite }} headless test
-        uses: GabrielBB/xvfb-action@v1
+        uses: coactions/setup-xvfb@v1
         with:
           run: npm run test -- -c ${{ matrix.target }} -s ${{ matrix.suite }}
   node:
+    needs: [prime-build]
     runs-on: ubuntu-latest
     name: Node ${{ matrix.node-version }} ${{ matrix.suite }} tests
     strategy:
@@ -38,32 +81,56 @@ jobs:
         # For more information see:
         # https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
         # supported Node.js release schedule: https://nodejs.org/en/about/releases/
-        node-version: [14.x, 16.x, 18.x]
+        node-version: [14.x, 16.x, 20.x]
         suite: [unit, visual]
     steps:
-      - uses: actions/checkout@v2
-      - name: Install node-canvas
-        run: sudo apt-get install libgif-dev libpng-dev libpango1.0-dev libjpeg8-dev librsvg2-dev libcairo2-dev
-      - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v1
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/cached-install
         with:
           node-version: ${{ matrix.node-version }}
-      - run: npm ci
-      - name: Build
-        run: npm run build -- -f
+          install-system-deps: true
+      - name: Build fabric.js
+        uses: ./.github/actions/build-fabric-cached
       - name: Run ${{ matrix.suite }} tests
         run: npm run test -- -c node -s ${{ matrix.suite }}
   jest:
     name: Jest tests
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - name: Install node-canvas
-        run: sudo apt-get install libgif-dev libpng-dev libpango1.0-dev libjpeg8-dev librsvg2-dev libcairo2-dev
-      - name: Use Node.js v18
-        uses: actions/setup-node@v1
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/cached-install
         with:
-          node-version: 18
-      - run: npm ci
+          node-version: 18.x
+          install-system-deps: true
       - name: Run Jest unit test
-        run: npm run test:jest
+        run: npm run test:jest:coverage
+      - name: Upload test coverage
+        uses: actions/upload-artifact@v3
+        with:
+          name: coverage-jest
+          path: .nyc_output/*.json
+  coverage:
+    needs: [node-coverage]
+    name: Coverage reporting
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/cached-install
+        with:
+          node-version: 18.x
+          install-system-deps: false
+      - uses: actions/download-artifact@v3
+        with:
+          name: coverage-unit
+          path: .nyc_output
+      - uses: actions/download-artifact@v3
+        with:
+          name: coverage-visual
+          path: .nyc_output
+      - run: ls -l .nyc_output
+      - run: npm run coverage:report
+      - uses: ShaMan123/[email protected]
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          delete-old-comments: true
+          update-comment: true

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## [next]
 
+- ci() Refactor GHA actions for caching and reuse [#9029](https://github.com/fabricjs/fabric.js/pull/9029)
 - ci(): install dev deps types [#9039](https://github.com/fabricjs/fabric.js/pull/9039)
 
 ## [6.0.0-beta10]

jest.config.js

@@ -20,18 +20,16 @@ module.exports = {
   collectCoverage: false,
 
   // An array of glob patterns indicating a set of files for which coverage information should be collected
-  // collectCoverageFrom: undefined,
+  collectCoverageFrom: undefined,
 
   // The directory where Jest should output its coverage files
-  coverageDirectory: 'coverage',
+  coverageDirectory: '.nyc_output',
 
   // An array of regexp pattern strings used to skip coverage collection
-  // coveragePathIgnorePatterns: [
-  //   "/node_modules/"
-  // ],
+  coveragePathIgnorePatterns: ['/node_modules/'],
 
-  // Indicates which provider should be used to instrument code for coverage
-  // coverageProvider: "babel",
+  // Indicates which provider should be used to instrument code for coverage (babel)
+  coverageProvider: 'v8',
 
   // A list of reporter names that Jest uses when writing coverage reports
   coverageReporters: [

package.json

@@ -57,8 +57,8 @@
     "test:visual-browser": "npm run test -- -s visual -p 8081 -l -c chrome firefox",
     "test:coverage": "nyc --silent qunit test/node_test_setup.js test/lib test/unit",
     "test:visual:coverage": "nyc --silent --no-clean qunit test/node_test_setup.js test/lib test/visual",
-    "test:jest:coverage": "jest --coverage=true --coverageDirectory=./.temp_coverage",
-    "coverage:merge": "nyc merge .temp_coverage .nyc_output/merged-coverage.json",
+    "test:jest:coverage": "jest --coverage=true",
+    "coverage:merge": "nyc merge coveragefiles .nyc_output/merged-coverage.json",
     "local-server": "http-server ./ -d=false",
     "test:e2e": "npx playwright test --headed",
     "coverage:report": "nyc report --reporter=lcov --reporter=text",