Merge branch 'master' into deps/lodash-es

Author: tbouffard

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "bpmn-visualization",
-  "version": "0.34.0-post",
+  "version": "0.34.1-post",
   "description": "A TypeScript library for visualizing process execution data on BPMN diagrams",
   "keywords": [
     "typescript",
@@ -101,23 +101,23 @@
     "strnum": "1.0.5"
   },
   "devDependencies": {
-    "@microsoft/api-extractor": "~7.34.4",
-    "@rollup/plugin-commonjs": "~24.1.0",
+    "@microsoft/api-extractor": "~7.34.9",
+    "@rollup/plugin-commonjs": "~25.0.0",
     "@rollup/plugin-node-resolve": "~15.0.2",
     "@rollup/plugin-terser": "~0.4.1",
     "@types/debug": "~4.1.7",
     "@types/jest-image-snapshot": "~6.1.0",
     "@types/lodash-es": "~4.17.7",
     "@types/minimist": "~1.2.2",
-    "@typescript-eslint/eslint-plugin": "~5.59.1",
-    "@typescript-eslint/parser": "~5.59.1",
+    "@typescript-eslint/eslint-plugin": "~5.59.6",
+    "@typescript-eslint/parser": "~5.59.6",
     "asciidoctor": "~2.2.6",
     "autoprefixer": "~10.4.14",
     "clipboardy": "~3.0.0",
     "cross-env": "~7.0.3",
-    "cssnano": "~6.0.0",
+    "cssnano": "~6.0.1",
     "debug": "~4.3.4",
-    "eslint": "~8.39.0",
+    "eslint": "~8.40.0",
     "eslint-config-prettier": "~8.8.0",
     "eslint-plugin-jest": "~27.2.1",
     "eslint-plugin-notice": "~0.9.10",
@@ -138,20 +138,20 @@
     "minimist": "~1.2.8",
     "npm-run-all": "~4.1.5",
     "pinst": "~3.0.0",
-    "playwright": "~1.30.0",
+    "playwright": "~1.33.0",
     "postcss": "~8.4.23",
     "postcss-cli": "~10.1.0",
     "prettier": "~2.8.8",
     "rimraf": "~5.0.0",
-    "rollup": "~3.21.2",
-    "rollup-plugin-node-externals": "~5.1.2",
+    "rollup": "~3.21.8",
+    "rollup-plugin-node-externals": "~6.0.1",
     "rollup-plugin-sizes": "~1.0.5",
     "rollup-plugin-typescript2": "~0.34.1",
     "tailwindcss": "~3.3.2",
     "ts-jest": "~29.1.0",
-    "typedoc": "~0.24.6",
+    "typedoc": "~0.24.7",
     "typescript": "~5.0.4",
-    "vite": "~4.3.4"
+    "vite": "~4.3.6"
   },
   "overrides": {
     "@types/node": "^16.18.0"

package.json

@@ -4,7 +4,7 @@ sonar.organization=process-analytics
 
 # This is the name and version displayed in the SonarCloud UI.
 sonar.projectName=bpmn-visualization
-sonar.projectVersion=0.34.0-post
+sonar.projectVersion=0.34.1-post
 
 # Path is relative to the sonar-project.properties file. Replace "\" by "/" on Windows.
 sonar.sources=src

sonar-project.properties

@@ -18,7 +18,7 @@ import { mxgraph } from './mxgraph/initializer';
 
 // WARN: this constant is automatically updated at release time by the 'manage-version-in-files.mjs' script.
 // So, if you modify the name of this file or this constant, please update the script accordingly.
-const libVersion = '0.34.0-post';
+const libVersion = '0.34.1-post';
 
 /**
  * @internal

src/component/version.ts

@@ -90,7 +90,7 @@ const computeConfigurationForDevServerUsage = defaultBrowsers => {
     command: `npm run dev`,
     port: 10001,
     basePath: '/dev/public/index.html',
-    // if default or tcp, the test starts right await whereas the dev server is not available on http
+    // if default or tcp, the test starts right away whereas the dev server is not available on http
     // for more details, see https://github.com/process-analytics/bpmn-visualization-js/pull/1056
     protocol: 'http',
     // high value mainly for GitHub Workflows running on macOS (slow machines) and to build the bundle before start

test/config/jest-playwright.js

@@ -14,13 +14,15 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import debugLogger from 'debug';
 import type { MatchImageSnapshotOptions } from 'jest-image-snapshot';
 import { toMatchImageSnapshot } from 'jest-image-snapshot';
-import { copyFileSync } from 'node:fs';
 import { addAttach } from 'jest-html-reporters/helper';
+import { copyFileSync } from 'node:fs';
 import MatcherContext = jest.MatcherContext;
 import CustomMatcherResult = jest.CustomMatcherResult;
 
+const jestLog = debugLogger('bv:test:jest:img');
 const toMatchImageSnapshotWithRealSignature = toMatchImageSnapshot as (received: unknown, options?: MatchImageSnapshotOptions) => CustomMatcherResult;
 
 // The path is relative from the jest-html-reporters page to the folder storing the images
@@ -39,11 +41,15 @@ class RetriesCounter {
   private readonly retryTimes = parseInt(global[Symbol.for('RETRY_TIMES')], 10) || 0;
 
   hasReachMaxRetries(testId: unknown): boolean {
-    return !this.retryTimes || this.timesCalled.get(testId) > this.retryTimes;
+    return !this.retryTimes || this.getExecutionCount(testId) > this.retryTimes;
   }
 
   incrementExecutionCount(testId: unknown): void {
-    this.timesCalled.set(testId, (this.timesCalled.get(testId) || 0) + 1);
+    this.timesCalled.set(testId, this.getExecutionCount(testId) + 1);
+  }
+
+  getExecutionCount(testId: unknown): number {
+    return this.timesCalled.get(testId) ?? 0;
   }
 }
 
@@ -108,19 +114,27 @@ function saveAndRegisterImages(matcherContext: MatcherContext, received: Buffer,
 // All options properties used here are always set in bpmn-visualization tests
 // If the following implementation would be done directly in jest-image-snapshot, this won't be required as it set default values we cannot access here
 function toMatchImageSnapshotCustom(this: MatcherContext, received: Buffer, options: MatchImageSnapshotOptions): CustomMatcherResult {
+  const testId = this.currentTestName;
+  retriesCounter.incrementExecutionCount(testId);
+  jestLog("Test: '%s' (test file path: '%s')", this.currentTestName, this.testPath);
+  const executionCount = retriesCounter.getExecutionCount(testId);
+  jestLog('Ready to execute toMatchImageSnapshot, execution count: %s', executionCount);
   const result = toMatchImageSnapshotWithRealSignature.call(this, received, options);
+  jestLog('toMatchImageSnapshot executed');
+
   if (!result.pass) {
-    const testId = this.currentTestName;
-    retriesCounter.incrementExecutionCount(testId);
+    jestLog('Result: failure');
     if (retriesCounter.hasReachMaxRetries(testId)) {
       saveAndRegisterImages(this, received, options);
     }
 
     // Add configured failure threshold in the error message
     const messages = result.message().split('\n');
     // For generalization, check options.failureThresholdType for percentage/pixel
-    const newMessage = [`${messages[0]} Failure threshold was set to ${options.failureThreshold * 100}%.`, ...messages.slice(1)].join('\n');
+    const newMessage = [`${messages[0]} Failure threshold was set to ${options.failureThreshold * 100}%. Execution count: ${executionCount}.`, ...messages.slice(1)].join('\n');
     result.message = () => newMessage;
+  } else {
+    jestLog('Result: success');
   }
 
   return result;

test/config/jest.image.ts

@@ -19,4 +19,4 @@ limitations under the License.
 import envUtils = require('@test/shared/environment-utils.js');
 
 const onCi = envUtils.isRunningOnCi();
-jest.retryTimes(onCi ? 3 : 0);
+jest.retryTimes(onCi ? 3 : 0, { logErrorsBeforeRetry: true });

test/config/jest.retries.ts

@@ -14,6 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import debugLogger from 'debug';
 import 'jest-playwright-preset';
 import { join } from 'node:path';
 import type { Page } from 'playwright';
@@ -23,6 +24,8 @@ import type { ImageSnapshotThresholdConfig } from './helpers/visu/image-snapshot
 import { ImageSnapshotConfigurator, MultiBrowserImageSnapshotThresholds } from './helpers/visu/image-snapshot-config';
 import { ZoomType } from '@lib/component/options';
 
+const log = debugLogger('bv:test:e2e:navigation:zoom-pan');
+
 class MouseNavigationImageSnapshotThresholds extends MultiBrowserImageSnapshotThresholds {
   constructor() {
     super({ chromium: 0.0005 / 100, firefox: 0.04 / 100, webkit: 0 });
@@ -62,23 +65,40 @@ describe('diagram navigation - zoom and pan with mouse', () => {
   let containerCenter: Point;
 
   beforeEach(async () => {
+    log("Start test: '%s' (test file path: '%s')", expect.getState().currentTestName, expect.getState().testPath);
+
     await pageTester.gotoPageAndLoadBpmnDiagram(bpmnDiagramName);
     containerCenter = await pageTester.getContainerCenter();
   });
+  afterEach(() => {
+    log("End test: '%s' (test file path: '%s')", expect.getState().currentTestName, expect.getState().testPath);
+  });
 
   it('mouse panning', async () => {
+    log('Starting mouse panning checks');
+    log('Doing mouse panning');
     await pageTester.mousePanning({ originPoint: containerCenter, destinationPoint: { x: containerCenter.x + 150, y: containerCenter.y + 40 } });
+    log('Mouse panning done');
 
+    log('Checking image match');
     const image = await page.screenshot({ fullPage: true });
     const config = imageSnapshotConfigurator.getConfig(bpmnDiagramName);
     expect(image).toMatchImageSnapshot({
       ...config,
       customSnapshotIdentifier: 'mouse.panning',
     });
+    log('Image match OK');
   });
 
-  describe.each([ZoomType.In, ZoomType.Out])(`ctrl + mouse: zoom %s`, (zoomType: ZoomType) => {
-    it.each([1, 3])('zoom %s times', async (xTimes: number) => {
+  describe.each([ZoomType.In, ZoomType.Out])(`ctrl + mouse: zoom [%s]`, (zoomType: ZoomType) => {
+    beforeEach(() => {
+      log("Start test: '%s' (test file path: '%s')", expect.getState().currentTestName, expect.getState().testPath);
+    });
+    afterEach(() => {
+      log("End test: '%s' (test file path: '%s')", expect.getState().currentTestName, expect.getState().testPath);
+    });
+
+    it.each([1, 3])('zoom [%s times]', async (xTimes: number) => {
       await pageTester.mouseZoom({ x: containerCenter.x + 200, y: containerCenter.y }, zoomType, xTimes);
 
       const image = await page.screenshot({ fullPage: true });

test/e2e/diagram.navigation.zoom.pan.test.ts

@@ -24,7 +24,8 @@ module.exports = {
   rootDir: '../..',
   roots: ['./test/e2e'],
   testMatch: ['**/?(*.)+(spec|test).[t]s'],
-  testTimeout: 200000,
+  testTimeout: 100_000,
+  verbose: false, // if true, report each individual test run with execution time
   transform: {
     '^.+\\.ts?$': [
       'ts-jest',

test/e2e/jest.config.js

@@ -25,6 +25,9 @@ import type { Point } from '@test/shared/visu/bpmn-page-utils';
 import { AvailableTestPages, PageTester } from '@test/shared/visu/bpmn-page-utils';
 import type { ImageSnapshotThresholdConfig } from './helpers/visu/image-snapshot-config';
 import { ImageSnapshotConfigurator, MultiBrowserImageSnapshotThresholds } from './helpers/visu/image-snapshot-config';
+import debugLogger from 'debug';
+
+const log = debugLogger('bv:test:e2e:overlays');
 
 class ImageSnapshotThresholds extends MultiBrowserImageSnapshotThresholds {
   constructor() {
@@ -320,24 +323,35 @@ describe('Overlay navigation', () => {
   const imageSnapshotConfigurator = new ImageSnapshotConfigurator(new OverlayNavigationImageSnapshotThresholds(), 'overlays');
 
   beforeEach(async () => {
+    log("Start test: '%s' (test file path: '%s')", expect.getState().currentTestName, expect.getState().testPath);
     await pageTester.gotoPageAndLoadBpmnDiagram(bpmnDiagramName);
     containerCenter = await pageTester.getContainerCenter();
 
+    log('Adding overlays');
     await pageTester.addOverlays('StartEvent_1', 'bottom-center');
     await pageTester.addOverlays('Activity_1', 'middle-right');
     await pageTester.addOverlays('Gateway_1', 'top-right');
     await pageTester.addOverlays('Flow_1', 'start');
+    log('Overlays added');
+  });
+  afterEach(() => {
+    log("End test: '%s' (test file path: '%s')", expect.getState().currentTestName, expect.getState().testPath);
   });
 
   it('panning', async () => {
+    log('Starting mouse panning checks');
+    log('Doing mouse panning');
     await pageTester.mousePanning({ originPoint: containerCenter, destinationPoint: { x: containerCenter.x + 150, y: containerCenter.y + 40 } });
+    log('Mouse panning done');
 
+    log('Checking image match');
     const image = await page.screenshot({ fullPage: true });
     const config = imageSnapshotConfigurator.getConfig(bpmnDiagramName);
     expect(image).toMatchImageSnapshot({
       ...config,
       customSnapshotIdentifier: 'panning',
     });
+    log('Image match OK');
   });
 
   it(`zoom out`, async () => {