[TEST] Bump Jest dependencies to use version 28

.github/actions/build-setup/action.yml

@@ -23,4 +23,5 @@ runs:
         # Do not install browsers https://playwright.dev/docs/browsers#installing-browsers
         PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: '1'
       with:
-        install-command: npm ci --ignore-scripts --prefer-offline --audit false
+        # restore --ignore-scripts when https://github.com/playwright-community/jest-playwright/issues/808 is fixed
+        install-command: npm ci --prefer-offline --audit false

README.md

@@ -183,7 +183,7 @@ To contribute to `bpmn-visualization`, fork and clone this repository locally an
 Please write tests for your code before opening a pull-request:
 
 ```sh
-npm run test  # run all unit & e2e tests
+npm test  # run all tests
 ```
 
 You can find more detail in our [Contributing guide](CONTRIBUTING.md). Participation in this open source project is subject to a [Code of Conduct](CODE_OF_CONDUCT.md).

package.json

@@ -84,7 +84,9 @@
     "postversion": "node scripts/manage-version-in-files.mjs && git commit --no-verify -a -m \"[RELEASE] Prepare version for new developments\"",
     "prepublishOnly": "pinst --disable",
     "postpublish": "pinst --enable",
-    "prepare": "husky install",
+    "prepare": "run-s prepare:*",
+    "prepare:husky": "husky install",
+    "prepare:patch": "patch-package",
     "utils-all": "run-s utils:build utils:test:*",
     "utils:build": "rollup --config scripts/utils/rollup.config.mjs",
     "utils:test:json": "node ./scripts/utils/dist/utils.mjs test/fixtures/bpmn/simple-start-task-end.bpmn --output json",
@@ -104,7 +106,7 @@
     "@rollup/plugin-commonjs": "~23.0.2",
     "@rollup/plugin-node-resolve": "~15.0.1",
     "@types/debug": "~4.1.7",
-    "@types/jest": "~27.5.0",
+    "@types/jest": "~28.1.8",
     "@types/jest-image-snapshot": "~5.1.0",
     "@types/lodash.debounce": "~4.0.7",
     "@types/lodash.throttle": "~4.1.7",
@@ -126,16 +128,18 @@
     "expect-playwright": "~0.8.0",
     "fs-extra": "~10.1.0",
     "husky": "~8.0.2",
-    "jest": "~27.5.1",
+    "jest": "~28.1.3",
+    "jest-environment-jsdom": "~28.1.3",
     "jest-extended": "~3.1.0",
     "jest-html-reporter": "~3.7.0",
     "jest-html-reporters": "~3.0.11",
     "jest-image-snapshot": "~6.0.0",
-    "jest-playwright-preset": "~1.7.2",
+    "jest-playwright-preset": "~2.0.0",
     "jest-sonar": "~0.2.12",
     "lint-staged": "~13.0.3",
     "minimist": "~1.2.7",
     "npm-run-all": "~4.1.5",
+    "patch-package": "~6.5.0",
     "pinst": "~3.0.0",
     "playwright": "~1.27.1",
     "postcss": "~8.4.19",
@@ -149,7 +153,7 @@
     "rollup-plugin-terser": "~7.0.2",
     "rollup-plugin-typescript2": "~0.34.1",
     "tailwindcss": "~3.2.4",
-    "ts-jest": "~27.1.4",
+    "ts-jest": "~28.0.8",
     "typedoc": "~0.23.21",
     "typescript": "~4.8.4",
     "vite": "~3.2.3"

patches/jest-playwright-preset+2.0.0.patch

@@ -0,0 +1,22 @@
+diff --git a/node_modules/jest-playwright-preset/types/global.d.ts b/node_modules/jest-playwright-preset/types/global.d.ts
+index 12f328f..091798f
+--- a/node_modules/jest-playwright-preset/types/global.d.ts
++++ b/node_modules/jest-playwright-preset/types/global.d.ts
+@@ -228,10 +228,13 @@ export interface JestPlaywrightConfig {
+   collectCoverage?: boolean
+ }
+
+-export type JestPlaywrightProjectConfig = (
+-  | Test['context']['config']
+-  | JestConfig
+-) & {
++// fix v2.0.0 types
++// See https://github.com/playwright-community/jest-playwright/issues/808
++// export type JestPlaywrightProjectConfig = (
++//   | Test['context']['config']
++//   | JestConfig
++// ) & {
++export type JestPlaywrightProjectConfig = Test['context']['config'] & {
+   browserName: BrowserType
+   wsEndpoint: WsEndpointType
+   device: DeviceType

test/bundles/jest.config.js

@@ -17,9 +17,9 @@ process.env.JEST_PLAYWRIGHT_CONFIG = './test/bundles/jest-playwright.config.js';
 
 /** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
 module.exports = {
-  rootDir: '../..',
-  roots: ['./test/bundles', './src'],
   preset: 'jest-playwright-preset',
+  rootDir: '../..',
+  roots: ['./test/bundles'],
   testMatch: ['**/?(*.)+(spec|test).[t]s'],
   testTimeout: 20000,
   transform: {

test/e2e/jest.config.js

@@ -17,9 +17,9 @@ process.env.JEST_PLAYWRIGHT_CONFIG = './test/e2e/jest-playwright.config.js';
 
 /** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
 module.exports = {
-  rootDir: '../..',
-  roots: ['./test/e2e', './src'],
   preset: 'jest-playwright-preset',
+  rootDir: '../..',
+  roots: ['./test/e2e'],
   testMatch: ['**/?(*.)+(spec|test).[t]s'],
   testTimeout: 200000,
   transform: {

test/helpers/query-selectors.ts

@@ -24,7 +24,9 @@ export class BpmnQuerySelectorsForTests extends BpmnQuerySelectors {
   }
 
   labelLastDiv(bpmnElementId: string): string {
-    return `${this.labelSvgGroup(bpmnElementId)} > g > foreignObject > div > div > div`;
+    // * is for 'foreignObject'
+    // Using 'foreignObject' do not work anymore with jest@28 (jsdom bump for 16.6 to 19)
+    return `${this.labelSvgGroup(bpmnElementId)} > g > * > div > div > div`;
   }
 
   labelSvgGroup(bpmnElementId: string): string {

test/integration/helpers/html-utils.ts

@@ -41,6 +41,11 @@ export class HtmlElementLookup {
     expect(svgGroupElement).toBeUndefined();
   }
 
+  // replicate what we do in HtmlElementRegistry: query selector on the BPMN container element directly
+  private querySelector<E extends Element>(selector: string): E | null {
+    return this.bpmnVisualization.graph.container.querySelector<E>(selector);
+  }
+
   // ===========================================================================
   // EVENTS
   // ===========================================================================
@@ -117,7 +122,7 @@ export class HtmlElementLookup {
     this.expectElement(bpmnId, expectSvgMessageFlow, ['bpmn-type-flow', 'bpmn-message-flow'], checks);
 
     // message flow icon
-    const msgFlowIconSvgGroupElement = document.querySelector<HTMLElement>(this.bpmnQuerySelectors.element(`messageFlowIcon_of_${bpmnId}`));
+    const msgFlowIconSvgGroupElement = this.querySelector<HTMLElement>(this.bpmnQuerySelectors.element(`messageFlowIcon_of_${bpmnId}`));
     if (checks?.hasIcon) {
       expectSvgMessageFlowIcon(msgFlowIconSvgGroupElement);
       expectClassAttribute(
@@ -148,7 +153,7 @@ export class HtmlElementLookup {
   }
 
   private expectSvgOverlay(bpmnId: string, overlayLabel?: string): void {
-    const overlayGroupElement = document.querySelector<SVGGElement>(this.bpmnQuerySelectors.overlays(bpmnId));
+    const overlayGroupElement = this.querySelector<SVGGElement>(this.bpmnQuerySelectors.overlays(bpmnId));
     if (overlayLabel) {
       expect(overlayGroupElement.querySelector('g > text').innerHTML).toEqual(overlayLabel);
       expectClassAttribute(overlayGroupElement, 'overlay-badge');
@@ -161,9 +166,10 @@ export class HtmlElementLookup {
     if (!label) {
       return;
     }
-    const labelLastDivElement = document.querySelector<HTMLElement>(this.bpmnQuerySelectors.labelLastDiv(bpmnId));
+
+    const labelLastDivElement = this.querySelector<HTMLElement>(this.bpmnQuerySelectors.labelLastDiv(bpmnId));
     expect(labelLastDivElement.innerHTML).toEqual(label);
-    const labelSvgGroup = document.querySelector<HTMLElement>(this.bpmnQuerySelectors.labelSvgGroup(bpmnId));
+    const labelSvgGroup = this.querySelector<HTMLElement>(this.bpmnQuerySelectors.labelSvgGroup(bpmnId));
     expectClassAttribute(labelSvgGroup, computeClassValue(bpmnClasses, ['bpmn-label', ...(additionalClasses ?? [])]));
   }
 }

test/integration/jest.config.js

@@ -17,7 +17,7 @@
 /** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
 module.exports = {
   rootDir: '../..',
-  roots: ['./test/integration', './src'],
+  roots: ['./test/integration'],
   testMatch: ['**/?(*.)+(spec|test).[t]s'],
   testEnvironment: 'jsdom', // mxgraph initialization needs to access to the window object
   transform: {

test/performance/jest.config.js

@@ -17,9 +17,9 @@ process.env.JEST_PLAYWRIGHT_CONFIG = './test/performance/jest-playwright.config.
 
 /** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
 module.exports = {
-  rootDir: '../..',
-  roots: ['./test/performance', './src'],
   preset: 'jest-playwright-preset',
+  rootDir: '../..',
+  roots: ['./test/performance'],
   testMatch: ['**/?(*.)+(spec|test).[t]s'],
   testTimeout: 200000,
   transform: {

test/typescript-support/tsconfig.json

@@ -8,7 +8,12 @@
     ],
     "moduleResolution": "Node",
     "strict": true,
-    "noEmit": true
+    "noEmit": true,
+    // By default, all visible ”@types” packages are included in your compilation. Packages in node_modules/@types of any enclosing folder are considered visible. For example, that
+    // means packages within ./node_modules/@types/, ../node_modules/@types/, ../../node_modules/@types/, and so on.
+    // ../../node_modules/@types includes types used to develop bpmn-visualization. We only want to check types used by bpmn-visualization when it is included in other projects/applications.
+    // So, we don't want development types to be part of the tests, especially because some of them may require a newer TypeScript version.
+    "typeRoots": [],
   },
   "include": [
     "src/**/*"

test/unit/jest.config.js

@@ -17,7 +17,7 @@
 /** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
 module.exports = {
   rootDir: '../..',
-  roots: ['./test/unit', './src'],
+  roots: ['./test/unit'],
   testMatch: ['**/?(*.)+(spec|test).[t]s'],
   transform: {
     '^.+\\.ts?$': 'ts-jest',