Tools: Product-specific visual comparison

.eslintignore

@@ -12,6 +12,7 @@ test/cypress
 test/test-*.*
 test/*.ts
 test/typescript-karma
+tools/affected-product
 tools/eslint-plugin-highcharts/node_modules/**
 tools/gulptasks/dashboards/api-docs/**/*.js
 tools/jsdoc/storage/**/*.js

.github/workflows/file-size.yml

@@ -0,0 +1,73 @@
+name: File Size Comparison
+on:
+  pull_request:
+    branches:
+      - 'master'
+    paths:
+      - 'ts/**'
+      - '.github/workflows/file-size.yml'
+
+permissions:
+  contents: read # to fetch code (actions/checkout)
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  file_size_comparison:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          ref: master
+
+      - name: Use Node.js lts/*
+        uses: actions/setup-node@v3
+        with:
+          node-version: lts/*
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm i
+
+      - name: Build Highcharts
+        run: npx gulp scripts
+
+      - name: Build Dashboards
+        run: npx gulp dashboards/scripts
+
+      - name: Write file sizes at master
+        run: npx gulp write-file-sizes --filename master.json
+
+      - name: Checkout current branch
+        uses: actions/checkout@v4
+        with:
+          clean: false
+          fetch-depth: 0
+
+      - name: Use Node.js lts/*
+        uses: actions/setup-node@v3
+        with:
+          node-version: lts/*
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm i
+
+      - name: Build Highcharts
+        run: npx gulp scripts
+
+      - name: Build Dashboards
+        run: npx gulp dashboards/scripts
+
+      - name: File size comparison
+        run: |
+          npx gulp write-file-sizes --filename ${{github.event.pull_request.number}}.json
+          npx gulp compare-size-and-comment \
+          --master ./tmp/filesizes/master.json \
+          --proposed ./tmp/filesizes/${{github.event.pull_request.number}}.json \
+          --pr ${{github.event.pull_request.number}} \
+          --user circleci-mu
+        env:
+          GITHUB_TOKEN: ${{secrets.PR_COMMENT_TOKEN}}

.github/workflows/highcharts-headless.yml

@@ -14,8 +14,8 @@ jobs:
     name: Node unit tests
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
           node-version: lts/*
           cache: 'npm'
@@ -33,8 +33,15 @@ jobs:
     name: Cypress tests
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v3
+      - name: Git checkout
+        uses: actions/checkout@v4
+
+      - name: Include main branch
+        run: |
+          git remote set-branches origin 'master'
+          git fetch --depth=1
+
+      - uses: actions/setup-node@v4
         with:
           node-version: lts/*
           cache: 'npm'
@@ -127,8 +134,8 @@ jobs:
   #   runs-on: macos-latest
   #   steps:
   #     ### SETUP ###
-  #     - uses: actions/checkout@v3
-  #     - uses: actions/setup-node@v3
+  #     - uses: actions/checkout@v4
+  #     - uses: actions/setup-node@v4
   #       with:
   #         node-version: lts/*
   #         cache: 'npm'

.github/workflows/highcharts-visual.yml

@@ -0,0 +1,103 @@
+name: Highcharts Visual Comparison
+on:
+  pull_request:
+    branches:
+      - 'master'
+    paths:
+      - 'samples/**'
+      - 'ts/**'
+      - 'css/**'
+      - '.github/workflows/highcharts-visual.yml'
+
+permissions:
+  contents: read # to fetch code (actions/checkout)
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  visual_compare:
+    timeout-minutes: 20
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [lts/*]
+    steps:
+      - name: Git checkout
+        uses: actions/checkout@v4
+
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'npm'
+
+      - name: Checkout main branch
+        run: |
+          git remote set-branches origin 'master'
+          git fetch --depth=1
+          git checkout master
+
+      - name: Install dependencies
+        run: npm i
+
+      - name: Build Highcharts
+        run: npx gulp scripts
+
+      - name: Test main branch for reference
+        run: |
+          npx karma start test/karma-conf.js --tests highcharts/*/* --reference --browsercount 2 --no-fail-on-empty-test-suite
+          npx karma start test/karma-conf.js --tests stock/*/* --reference --browsercount 2 --no-fail-on-empty-test-suite
+          npx karma start test/karma-conf.js --tests maps/*/* --reference --browsercount 2 --no-fail-on-empty-test-suite
+          npx karma start test/karma-conf.js --tests gantt/*/* --reference --browsercount 2 --no-fail-on-empty-test-suite
+
+      - name: Checkout current branch
+        run: git checkout -
+
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm i
+
+      - name: Build Highcharts
+        run: npx gulp scripts
+
+      - name: Test current branch and compare
+        run: |
+          npx karma start test/karma-conf.js --iff Core,Data,Series,Shared --tests highcharts/*/* --single-run --browsercount 2 --visualcompare || true
+          npx karma start test/karma-conf.js --iff Stock,Data,Series,Shared --tests stock/*/* --single-run --browsercount 2 --visualcompare || true
+          npx karma start test/karma-conf.js --iff Maps,Data,Series,Shared --tests maps/*/* --single-run --browsercount 2 --visualcompare || true
+          npx karma start test/karma-conf.js --iff Gantt,Data,Series,Shared --tests gantt/*/* --single-run --browsercount 2 --visualcompare || true
+
+      - name: Save test results where both an reference.svg and candidate.svg exists
+        run: |
+          mkdir -p ./tmp/visual-test-results
+          find samples -type d  -exec test -f '{}'/reference.svg -a -f '{}'/candidate.svg \; -print | xargs -I{} rsync -Rri --include="*/" --include="*.svg" --include="*.gif" --exclude="*" {} ./tmp/visual-test-results
+        if: ${{ always() }}
+
+      - name: Comment on PR and upload visual test images if any produced
+        run: |
+          npx gulp update-pr-testresults \
+          --fail-silently \
+          --user circleci-mu \
+          --pr ${{github.event.pull_request.number}}
+        if: ${{ always() }}
+        env:
+          GITHUB_TOKEN: ${{secrets.PR_COMMENT_TOKEN}}
+          HIGHCHARTS_VISUAL_TESTS_BUCKET: ${{secrets.VISUAL_TESTS_S3_BUCKET}}
+          AWS_ACCESS_KEY_ID: ${{secrets.VISUAL_TESTS_AWS_ACCESS_KEY_ID}}
+          AWS_SECRET_ACCESS_KEY: ${{secrets.VISUAL_TESTS_AWS_SECRET_ACCESS_KEY}}
+          AWS_REGION: ${{secrets.VISUAL_TESTS_AWS_REGION}}
+
+      - name: Store artifacts
+        uses: actions/upload-artifact@v3
+        if: ${{ always() }}
+        with:
+          name: visual-test-results
+          path: tmp/visual-test-results
+

cypress.config.mjs

@@ -16,9 +16,11 @@ for (const product of getProducts()) {
 }
 
 const productsPattern = (
-    products.length ?
+    products.length > 1 ?
         `{${Array.from(products).join(',')}}` :
-        '**'
+        products.length ?
+            products[0] :
+            '**'
 );
 
 export default defineConfig({