From d5e98d5fe437d499e6e994dfaba266c8a4ef9115 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bed=C5=99ich=20Schindler?= Date: Fri, 31 May 2024 13:01:07 +0200 Subject: [PATCH 1/3] [WIP] Replace `jsdom` with `happy-dom` testing environment to enable `Modal` tests (#461) --- jest.config.js | 2 +- package-lock.json | 558 ++---------------- package.json | 6 +- src/components/Grid/__tests__/Grid.test.jsx | 20 +- src/components/Modal/__tests__/Modal.test.jsx | 53 +- .../Modal/__tests__/ModalTitle.test.jsx | 2 +- src/components/Radio/__tests__/Radio.test.jsx | 8 +- tests/propTests/tagPropTest.js | 2 +- 8 files changed, 93 insertions(+), 558 deletions(-) diff --git a/jest.config.js b/jest.config.js index c07a0aba..548c153e 100644 --- a/jest.config.js +++ b/jest.config.js @@ -13,7 +13,7 @@ module.exports = { setupFilesAfterEnv: [ '/tests/setupTestingLibrary.js', ], - testEnvironment: 'jsdom', + testEnvironment: '@happy-dom/jest-environment', transformIgnorePatterns: [ 'node_modules/(?!(@react-ui-org))', ], diff --git a/package-lock.json b/package-lock.json index 944482c6..36a63a95 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21,10 +21,11 @@ "@babel/preset-env": "^7.24.7", "@babel/preset-react": "^7.24.7", "@babel/register": "^7.24.6", + "@happy-dom/jest-environment": "^16.6.0", "@stylistic/stylelint-config": "^1.0.1", "@svgr/webpack": "^8.1.0", - "@testing-library/jest-dom": "^6.4.6", - "@testing-library/react": "^16.0.0", + "@testing-library/jest-dom": "^6.6.3", + "@testing-library/react": "^16.1.0", "@testing-library/user-event": "^14.5.2", "@visionappscz/eslint-config-visionapps": "^1.7.0", "@visionappscz/stylelint-config": "^4.0.0", @@ -42,7 +43,6 @@ "eslint-plugin-react-hooks": "^4.6.2", "identity-obj-proxy": "^3.0.0", "jest": "^29.7.0", - "jest-environment-jsdom": "^29.7.0", "markdownlint-cli2": "^0.13.0", "mini-css-extract-plugin": "^2.9.0", "postcss": "^8.4.39", @@ -2231,6 +2231,24 @@ "node": "^12.22.0 || ^14.17.0 || >=16.0.0" } }, + "node_modules/@happy-dom/jest-environment": { + "version": "16.6.0", + "resolved": "https://registry.npmjs.org/@happy-dom/jest-environment/-/jest-environment-16.6.0.tgz", + "integrity": "sha512-uf47TEf1eL2oiDf9aBPtb4OjR7hoCyHoGLr00W56KlrkV+KwskIcmf5b7dzlNtI9MBSbW33DK/BYQKYdGlF0Iw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@jest/environment": "^29.4.0", + "@jest/fake-timers": "^29.4.0", + "@jest/types": "^29.4.0", + "happy-dom": "^16.6.0", + "jest-mock": "^29.4.0", + "jest-util": "^29.4.0" + }, + "engines": { + "node": ">=18.0.0" + } + }, "node_modules/@humanwhocodes/config-array": { "version": "0.11.14", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz", @@ -3578,13 +3596,13 @@ } }, "node_modules/@testing-library/jest-dom": { - "version": "6.4.8", - "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-6.4.8.tgz", - "integrity": "sha512-JD0G+Zc38f5MBHA4NgxQMR5XtO5Jx9g86jqturNTt2WUfRmLDIY7iKkWHDCCTiDuFMre6nxAD5wHw9W5kI4rGw==", + "version": "6.6.3", + "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-6.6.3.tgz", + "integrity": "sha512-IteBhl4XqYNkM54f4ejhLRJiZNqcSCoXUOG2CPK7qbD322KjQozM4kHQOfkG2oln9b9HTYqs+Sae8vBATubxxA==", "dev": true, + "license": "MIT", "dependencies": { "@adobe/css-tools": "^4.4.0", - "@babel/runtime": "^7.9.2", "aria-query": "^5.0.0", "chalk": "^3.0.0", "css.escape": "^1.5.1", @@ -3672,10 +3690,11 @@ } }, "node_modules/@testing-library/react": { - "version": "16.0.0", - "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-16.0.0.tgz", - "integrity": "sha512-guuxUKRWQ+FgNX0h0NS0FIq3Q3uLtWVpBzcLOggmfMoUpgBnzBzvLLd4fbm6yS8ydJd94cIfY4yP9qUQjM2KwQ==", + "version": "16.1.0", + "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-16.1.0.tgz", + "integrity": "sha512-Q2ToPvg0KsVL0ohND9A3zLJWcOXXcO8IDu3fj11KhNt0UlCWyFyvnCIBkd12tidB2lkiVRG8VFqdhcqhqnAQtg==", "dev": true, + "license": "MIT", "dependencies": { "@babel/runtime": "^7.12.5" }, @@ -3684,10 +3703,10 @@ }, "peerDependencies": { "@testing-library/dom": "^10.0.0", - "@types/react": "^18.0.0", - "@types/react-dom": "^18.0.0", - "react": "^18.0.0", - "react-dom": "^18.0.0" + "@types/react": "^18.0.0 || ^19.0.0", + "@types/react-dom": "^18.0.0 || ^19.0.0", + "react": "^18.0.0 || ^19.0.0", + "react-dom": "^18.0.0 || ^19.0.0" }, "peerDependenciesMeta": { "@types/react": { @@ -3703,6 +3722,7 @@ "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.5.2.tgz", "integrity": "sha512-YAh82Wh4TIrxYLmfGcixwD18oIjyC1pFQC2Y01F2lzV2HTMiYrI0nze0FD0ocB//CKS/7jIUgae+adPqxK5yCQ==", "dev": true, + "license": "MIT", "engines": { "node": ">=12", "npm": ">=6" @@ -3711,15 +3731,6 @@ "@testing-library/dom": ">=7.21.4" } }, - "node_modules/@tootallnate/once": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz", - "integrity": "sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==", - "dev": true, - "engines": { - "node": ">= 10" - } - }, "node_modules/@trysound/sax": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz", @@ -3836,17 +3847,6 @@ "@types/istanbul-lib-report": "*" } }, - "node_modules/@types/jsdom": { - "version": "20.0.1", - "resolved": "https://registry.npmjs.org/@types/jsdom/-/jsdom-20.0.1.tgz", - "integrity": "sha512-d0r18sZPmMQr1eG35u12FZfhIXNrnsPU/g5wvRKCUf/tOGilKKwYMYGqh33BNR6ba+2gkHw1EUiHoN3mn7E5IQ==", - "dev": true, - "dependencies": { - "@types/node": "*", - "@types/tough-cookie": "*", - "parse5": "^7.0.0" - } - }, "node_modules/@types/json-schema": { "version": "7.0.15", "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz", @@ -3883,12 +3883,6 @@ "integrity": "sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw==", "dev": true }, - "node_modules/@types/tough-cookie": { - "version": "4.0.5", - "resolved": "https://registry.npmjs.org/@types/tough-cookie/-/tough-cookie-4.0.5.tgz", - "integrity": "sha512-/Ad8+nIOV7Rl++6f1BdKxFSMgmoqEoYbHRpPcx3JEfv8VRsQe9Z4mCXeJBzxs7mbHY/XOZZuXlRNfhpVPbs6ZA==", - "dev": true - }, "node_modules/@types/unist": { "version": "2.0.10", "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.10.tgz", @@ -4150,13 +4144,6 @@ "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==", "dev": true }, - "node_modules/abab": { - "version": "2.0.6", - "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz", - "integrity": "sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==", - "deprecated": "Use your platform's native atob() and btoa() methods instead", - "dev": true - }, "node_modules/acorn": { "version": "8.12.1", "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz", @@ -4169,16 +4156,6 @@ "node": ">=0.4.0" } }, - "node_modules/acorn-globals": { - "version": "7.0.1", - "resolved": "https://registry.npmjs.org/acorn-globals/-/acorn-globals-7.0.1.tgz", - "integrity": "sha512-umOSDSDrfHbTNPuNpC2NSnnA3LUrqpevPb4T9jRx4MagXNS0rs+gwiTcAvqCRmsD6utzsrzNt+ebm00SNWiC3Q==", - "dev": true, - "dependencies": { - "acorn": "^8.1.0", - "acorn-walk": "^8.0.2" - } - }, "node_modules/acorn-import-attributes": { "version": "1.9.5", "resolved": "https://registry.npmjs.org/acorn-import-attributes/-/acorn-import-attributes-1.9.5.tgz", @@ -4197,30 +4174,6 @@ "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0" } }, - "node_modules/acorn-walk": { - "version": "8.3.3", - "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.3.tgz", - "integrity": "sha512-MxXdReSRhGO7VlFe1bRG/oI7/mdLV9B9JJT0N8vZOhF7gFRR5l3M8W9G8JxmKV+JC5mGqJ0QvqfSOLsCPa4nUw==", - "dev": true, - "dependencies": { - "acorn": "^8.11.0" - }, - "engines": { - "node": ">=0.4.0" - } - }, - "node_modules/agent-base": { - "version": "6.0.2", - "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz", - "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==", - "dev": true, - "dependencies": { - "debug": "4" - }, - "engines": { - "node": ">= 6.0.0" - } - }, "node_modules/ajv": { "version": "6.12.6", "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", @@ -4526,12 +4479,6 @@ "node": ">=8" } }, - "node_modules/asynckit": { - "version": "0.4.0", - "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", - "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==", - "dev": true - }, "node_modules/autoprefixer": { "version": "10.4.19", "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.19.tgz", @@ -4607,6 +4554,7 @@ "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-29.7.0.tgz", "integrity": "sha512-BrvGY3xZSwEcCzKvKsCi2GgHqDqsYkOP4/by5xCgIwGXQxIEh+8ew3gmrE1y7XRR6LHZIj6yLYnUi/mm2KXKBg==", "dev": true, + "license": "MIT", "dependencies": { "@jest/transform": "^29.7.0", "@types/babel__core": "^7.1.14", @@ -5272,18 +5220,6 @@ "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==", "dev": true }, - "node_modules/combined-stream": { - "version": "1.0.8", - "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", - "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==", - "dev": true, - "dependencies": { - "delayed-stream": "~1.0.0" - }, - "engines": { - "node": ">= 0.8" - } - }, "node_modules/commander": { "version": "6.2.1", "resolved": "https://registry.npmjs.org/commander/-/commander-6.2.1.tgz", @@ -5644,30 +5580,6 @@ "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==", "dev": true }, - "node_modules/cssom": { - "version": "0.5.0", - "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.5.0.tgz", - "integrity": "sha512-iKuQcq+NdHqlAcwUY0o/HL69XQrUaQdMjmStJ8JFmUaiiQErlhrmuigkg/CU4E2J0IyUKUrMAgl36TvN67MqTw==", - "dev": true - }, - "node_modules/cssstyle": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-2.3.0.tgz", - "integrity": "sha512-AZL67abkUzIuvcHqk7c09cezpGNcxUxU4Ioi/05xHk4DQeTkWmGYftIE6ctU6AEt+Gn4n1lDStOtj7FKycP71A==", - "dev": true, - "dependencies": { - "cssom": "~0.3.6" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/cssstyle/node_modules/cssom": { - "version": "0.3.8", - "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.3.8.tgz", - "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==", - "dev": true - }, "node_modules/d3": { "version": "3.5.17", "resolved": "https://registry.npmjs.org/d3/-/d3-3.5.17.tgz", @@ -5680,20 +5592,6 @@ "integrity": "sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==", "dev": true }, - "node_modules/data-urls": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-3.0.2.tgz", - "integrity": "sha512-Jy/tj3ldjZJo63sVAvg6LHt2mHvl4V6AgRAmNDtLdm7faqtsx+aJG42rsyCo9JCoRVKwPFzKlIPx3DIibwSIaQ==", - "dev": true, - "dependencies": { - "abab": "^2.0.6", - "whatwg-mimetype": "^3.0.0", - "whatwg-url": "^11.0.0" - }, - "engines": { - "node": ">=12" - } - }, "node_modules/data-view-buffer": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.1.tgz", @@ -5762,12 +5660,6 @@ } } }, - "node_modules/decimal.js": { - "version": "10.4.3", - "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.4.3.tgz", - "integrity": "sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==", - "dev": true - }, "node_modules/dedent": { "version": "1.5.3", "resolved": "https://registry.npmjs.org/dedent/-/dedent-1.5.3.tgz", @@ -5863,15 +5755,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/delayed-stream": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", - "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==", - "dev": true, - "engines": { - "node": ">=0.4.0" - } - }, "node_modules/dequal": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz", @@ -5956,19 +5839,6 @@ } ] }, - "node_modules/domexception": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/domexception/-/domexception-4.0.0.tgz", - "integrity": "sha512-A2is4PLG+eeSfoTMA95/s4pvAoSo2mKtiM5jlHkAVewmiO8ISFTFKZjH7UAM1Atli/OT/7JHOrJRJiMKUZKYBw==", - "deprecated": "Use your platform's native DOMException instead", - "dev": true, - "dependencies": { - "webidl-conversions": "^7.0.0" - }, - "engines": { - "node": ">=12" - } - }, "node_modules/domhandler": { "version": "5.0.3", "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz", @@ -6289,27 +6159,6 @@ "node": ">=0.8.0" } }, - "node_modules/escodegen": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-2.1.0.tgz", - "integrity": "sha512-2NlIDTwUWJN0mRPQOdtQBzbUHvdGY2P1VXSyU83Q3xKxM7WHX2Ql8dKq782Q9TgQUNOLEzEYu9bzLNj1q88I5w==", - "dev": true, - "dependencies": { - "esprima": "^4.0.1", - "estraverse": "^5.2.0", - "esutils": "^2.0.2" - }, - "bin": { - "escodegen": "bin/escodegen.js", - "esgenerate": "bin/esgenerate.js" - }, - "engines": { - "node": ">=6.0" - }, - "optionalDependencies": { - "source-map": "~0.6.1" - } - }, "node_modules/eslint": { "version": "8.57.0", "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.57.0.tgz", @@ -7186,20 +7035,6 @@ "is-callable": "^1.1.3" } }, - "node_modules/form-data": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz", - "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==", - "dev": true, - "dependencies": { - "asynckit": "^0.4.0", - "combined-stream": "^1.0.8", - "mime-types": "^2.1.12" - }, - "engines": { - "node": ">= 6" - } - }, "node_modules/fraction.js": { "version": "4.3.7", "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz", @@ -7526,6 +7361,20 @@ "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==", "dev": true }, + "node_modules/happy-dom": { + "version": "16.6.0", + "resolved": "https://registry.npmjs.org/happy-dom/-/happy-dom-16.6.0.tgz", + "integrity": "sha512-Zz5S9sog8a3p8XYZbO+eI1QMOAvCNnIoyrH8A8MLX+X2mJrzADTy+kdETmc4q+uD9AGAvQYGn96qBAn2RAciKw==", + "dev": true, + "license": "MIT", + "dependencies": { + "webidl-conversions": "^7.0.0", + "whatwg-mimetype": "^3.0.0" + }, + "engines": { + "node": ">=18.0.0" + } + }, "node_modules/harmony-reflect": { "version": "1.6.2", "resolved": "https://registry.npmjs.org/harmony-reflect/-/harmony-reflect-1.6.2.tgz", @@ -7613,18 +7462,6 @@ "node": ">= 0.4" } }, - "node_modules/html-encoding-sniffer": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz", - "integrity": "sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA==", - "dev": true, - "dependencies": { - "whatwg-encoding": "^2.0.0" - }, - "engines": { - "node": ">=12" - } - }, "node_modules/html-escaper": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz", @@ -7643,33 +7480,6 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/http-proxy-agent": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-5.0.0.tgz", - "integrity": "sha512-n2hY8YdoRE1i7r6M0w9DIw5GgZN0G25P8zLCRQ8rjXtTU3vsNFBI/vWK/UIeE6g5MUUz6avwAPXmL6Fy9D/90w==", - "dev": true, - "dependencies": { - "@tootallnate/once": "2", - "agent-base": "6", - "debug": "4" - }, - "engines": { - "node": ">= 6" - } - }, - "node_modules/https-proxy-agent": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz", - "integrity": "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==", - "dev": true, - "dependencies": { - "agent-base": "6", - "debug": "4" - }, - "engines": { - "node": ">= 6" - } - }, "node_modules/human-signals": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz", @@ -7679,18 +7489,6 @@ "node": ">=10.17.0" } }, - "node_modules/iconv-lite": { - "version": "0.6.3", - "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz", - "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==", - "dev": true, - "dependencies": { - "safer-buffer": ">= 2.1.2 < 3.0.0" - }, - "engines": { - "node": ">=0.10.0" - } - }, "node_modules/icss-utils": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz", @@ -8179,12 +7977,6 @@ "node": ">=0.10.0" } }, - "node_modules/is-potential-custom-element-name": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz", - "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==", - "dev": true - }, "node_modules/is-regex": { "version": "1.1.4", "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz", @@ -8478,6 +8270,7 @@ "resolved": "https://registry.npmjs.org/jest/-/jest-29.7.0.tgz", "integrity": "sha512-NIy3oAFp9shda19hy4HK0HRTWKtPJmGdnvywu01nOqNC2vZg+Z+fvJDxpMQA88eb2I9EcafcdjYgsDthnYTvGw==", "dev": true, + "license": "MIT", "dependencies": { "@jest/core": "^29.7.0", "@jest/types": "^29.6.3", @@ -9161,33 +8954,6 @@ "node": ">=8" } }, - "node_modules/jest-environment-jsdom": { - "version": "29.7.0", - "resolved": "https://registry.npmjs.org/jest-environment-jsdom/-/jest-environment-jsdom-29.7.0.tgz", - "integrity": "sha512-k9iQbsf9OyOfdzWH8HDmrRT0gSIcX+FLNW7IQq94tFX0gynPwqDTW0Ho6iMVNjGz/nb+l/vW3dWM2bbLLpkbXA==", - "dev": true, - "dependencies": { - "@jest/environment": "^29.7.0", - "@jest/fake-timers": "^29.7.0", - "@jest/types": "^29.6.3", - "@types/jsdom": "^20.0.0", - "@types/node": "*", - "jest-mock": "^29.7.0", - "jest-util": "^29.7.0", - "jsdom": "^20.0.0" - }, - "engines": { - "node": "^14.15.0 || ^16.10.0 || >=18.0.0" - }, - "peerDependencies": { - "canvas": "^2.5.0" - }, - "peerDependenciesMeta": { - "canvas": { - "optional": true - } - } - }, "node_modules/jest-environment-node": { "version": "29.7.0", "resolved": "https://registry.npmjs.org/jest-environment-node/-/jest-environment-node-29.7.0.tgz", @@ -10415,51 +10181,6 @@ "js-yaml": "bin/js-yaml.js" } }, - "node_modules/jsdom": { - "version": "20.0.3", - "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-20.0.3.tgz", - "integrity": "sha512-SYhBvTh89tTfCD/CRdSOm13mOBa42iTaTyfyEWBdKcGdPxPtLFBXuHR8XHb33YNYaP+lLbmSvBTsnoesCNJEsQ==", - "dev": true, - "dependencies": { - "abab": "^2.0.6", - "acorn": "^8.8.1", - "acorn-globals": "^7.0.0", - "cssom": "^0.5.0", - "cssstyle": "^2.3.0", - "data-urls": "^3.0.2", - "decimal.js": "^10.4.2", - "domexception": "^4.0.0", - "escodegen": "^2.0.0", - "form-data": "^4.0.0", - "html-encoding-sniffer": "^3.0.0", - "http-proxy-agent": "^5.0.0", - "https-proxy-agent": "^5.0.1", - "is-potential-custom-element-name": "^1.0.1", - "nwsapi": "^2.2.2", - "parse5": "^7.1.1", - "saxes": "^6.0.0", - "symbol-tree": "^3.2.4", - "tough-cookie": "^4.1.2", - "w3c-xmlserializer": "^4.0.0", - "webidl-conversions": "^7.0.0", - "whatwg-encoding": "^2.0.0", - "whatwg-mimetype": "^3.0.0", - "whatwg-url": "^11.0.0", - "ws": "^8.11.0", - "xml-name-validator": "^4.0.0" - }, - "engines": { - "node": ">=14" - }, - "peerDependencies": { - "canvas": "^2.5.0" - }, - "peerDependenciesMeta": { - "canvas": { - "optional": true - } - } - }, "node_modules/jsesc": { "version": "2.5.2", "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz", @@ -11153,12 +10874,6 @@ "url": "https://github.com/fb55/nth-check?sponsor=1" } }, - "node_modules/nwsapi": { - "version": "2.2.12", - "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.12.tgz", - "integrity": "sha512-qXDmcVlZV4XRtKFzddidpfVP4oMSGhga+xdMc25mv8kaLUHtgzCDhUxkrN8exkGdTlLNaXj7CV3GtON7zuGZ+w==", - "dev": true - }, "node_modules/object-assign": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", @@ -11426,18 +11141,6 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/parse5": { - "version": "7.1.2", - "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.1.2.tgz", - "integrity": "sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==", - "dev": true, - "dependencies": { - "entities": "^4.4.0" - }, - "funding": { - "url": "https://github.com/inikulin/parse5?sponsor=1" - } - }, "node_modules/path-exists": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz", @@ -11931,12 +11634,6 @@ "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", "dev": true }, - "node_modules/psl": { - "version": "1.9.0", - "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz", - "integrity": "sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==", - "dev": true - }, "node_modules/punycode": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz", @@ -11971,12 +11668,6 @@ } ] }, - "node_modules/querystringify": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz", - "integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==", - "dev": true - }, "node_modules/queue-microtask": { "version": "1.2.3", "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz", @@ -12203,12 +11894,6 @@ "node": ">=0.10.0" } }, - "node_modules/requires-port": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz", - "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==", - "dev": true - }, "node_modules/resolve": { "version": "1.22.8", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz", @@ -12360,12 +12045,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/safer-buffer": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", - "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", - "dev": true - }, "node_modules/sass": { "version": "1.77.8", "resolved": "https://registry.npmjs.org/sass/-/sass-1.77.8.tgz", @@ -12423,18 +12102,6 @@ } } }, - "node_modules/saxes": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz", - "integrity": "sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==", - "dev": true, - "dependencies": { - "xmlchars": "^2.2.0" - }, - "engines": { - "node": ">=v12.22.7" - } - }, "node_modules/scheduler": { "version": "0.23.2", "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz", @@ -13443,12 +13110,6 @@ "node": ">= 10" } }, - "node_modules/symbol-tree": { - "version": "3.2.4", - "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz", - "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==", - "dev": true - }, "node_modules/table": { "version": "6.8.2", "resolved": "https://registry.npmjs.org/table/-/table-6.8.2.tgz", @@ -13657,33 +13318,6 @@ "node": ">=8.0" } }, - "node_modules/tough-cookie": { - "version": "4.1.4", - "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.4.tgz", - "integrity": "sha512-Loo5UUvLD9ScZ6jh8beX1T6sO1w2/MpCRpEP7V280GKMVUQ0Jzar2U3UJPsrdbziLEMMhu3Ujnq//rhiFuIeag==", - "dev": true, - "dependencies": { - "psl": "^1.1.33", - "punycode": "^2.1.1", - "universalify": "^0.2.0", - "url-parse": "^1.5.3" - }, - "engines": { - "node": ">=6" - } - }, - "node_modules/tr46": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/tr46/-/tr46-3.0.0.tgz", - "integrity": "sha512-l7FvfAHlcmulp8kr+flpQZmVwtu7nfRV7NZujtN0OqES8EL4O4e0qqzL0DC5gAvx/ZC/9lk6rhcUwYvkBnBnYA==", - "dev": true, - "dependencies": { - "punycode": "^2.1.1" - }, - "engines": { - "node": ">=12" - } - }, "node_modules/tsconfig-paths": { "version": "3.15.0", "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz", @@ -13921,15 +13555,6 @@ "url": "https://opencollective.com/unified" } }, - "node_modules/universalify": { - "version": "0.2.0", - "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.2.0.tgz", - "integrity": "sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==", - "dev": true, - "engines": { - "node": ">= 4.0.0" - } - }, "node_modules/update-browserslist-db": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.0.tgz", @@ -13969,16 +13594,6 @@ "punycode": "^2.1.0" } }, - "node_modules/url-parse": { - "version": "1.5.10", - "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.10.tgz", - "integrity": "sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==", - "dev": true, - "dependencies": { - "querystringify": "^2.1.1", - "requires-port": "^1.0.0" - } - }, "node_modules/util-deprecate": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", @@ -13999,18 +13614,6 @@ "node": ">=10.12.0" } }, - "node_modules/w3c-xmlserializer": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz", - "integrity": "sha512-d+BFHzbiCx6zGfz0HyQ6Rg69w9k19nviJspaj4yNscGjrHu94sVP+aRm75yEbCh+r2/yR+7q6hux9LVtbuTGBw==", - "dev": true, - "dependencies": { - "xml-name-validator": "^4.0.0" - }, - "engines": { - "node": ">=14" - } - }, "node_modules/walker": { "version": "1.0.8", "resolved": "https://registry.npmjs.org/walker/-/walker-1.0.8.tgz", @@ -14237,18 +13840,6 @@ "url": "https://opencollective.com/webpack" } }, - "node_modules/whatwg-encoding": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-2.0.0.tgz", - "integrity": "sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==", - "dev": true, - "dependencies": { - "iconv-lite": "0.6.3" - }, - "engines": { - "node": ">=12" - } - }, "node_modules/whatwg-mimetype": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-3.0.0.tgz", @@ -14258,19 +13849,6 @@ "node": ">=12" } }, - "node_modules/whatwg-url": { - "version": "11.0.0", - "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-11.0.0.tgz", - "integrity": "sha512-RKT8HExMpoYx4igMiVMY83lN6UeITKJlBQ+vR/8ZJ8OCdSiN3RwCq+9gH0+Xzj0+5IrM6i4j/6LuvzbZIQgEcQ==", - "dev": true, - "dependencies": { - "tr46": "^3.0.0", - "webidl-conversions": "^7.0.0" - }, - "engines": { - "node": ">=12" - } - }, "node_modules/which": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", @@ -14449,42 +14027,6 @@ "node": "^12.13.0 || ^14.15.0 || >=16.0.0" } }, - "node_modules/ws": { - "version": "8.18.0", - "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz", - "integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==", - "dev": true, - "engines": { - "node": ">=10.0.0" - }, - "peerDependencies": { - "bufferutil": "^4.0.1", - "utf-8-validate": ">=5.0.2" - }, - "peerDependenciesMeta": { - "bufferutil": { - "optional": true - }, - "utf-8-validate": { - "optional": true - } - } - }, - "node_modules/xml-name-validator": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-4.0.0.tgz", - "integrity": "sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==", - "dev": true, - "engines": { - "node": ">=12" - } - }, - "node_modules/xmlchars": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz", - "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==", - "dev": true - }, "node_modules/y18n": { "version": "5.0.8", "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz", diff --git a/package.json b/package.json index f75862b6..61b20962 100644 --- a/package.json +++ b/package.json @@ -76,10 +76,11 @@ "@babel/preset-env": "^7.24.7", "@babel/preset-react": "^7.24.7", "@babel/register": "^7.24.6", + "@happy-dom/jest-environment": "^16.6.0", "@stylistic/stylelint-config": "^1.0.1", "@svgr/webpack": "^8.1.0", - "@testing-library/jest-dom": "^6.4.6", - "@testing-library/react": "^16.0.0", + "@testing-library/jest-dom": "^6.6.3", + "@testing-library/react": "^16.1.0", "@testing-library/user-event": "^14.5.2", "@visionappscz/eslint-config-visionapps": "^1.7.0", "@visionappscz/stylelint-config": "^4.0.0", @@ -97,7 +98,6 @@ "eslint-plugin-react-hooks": "^4.6.2", "identity-obj-proxy": "^3.0.0", "jest": "^29.7.0", - "jest-environment-jsdom": "^29.7.0", "markdownlint-cli2": "^0.13.0", "mini-css-extract-plugin": "^2.9.0", "postcss": "^8.4.39", diff --git a/src/components/Grid/__tests__/Grid.test.jsx b/src/components/Grid/__tests__/Grid.test.jsx index 673bdaf7..f330722e 100644 --- a/src/components/Grid/__tests__/Grid.test.jsx +++ b/src/components/Grid/__tests__/Grid.test.jsx @@ -84,13 +84,19 @@ describe('rendering', () => { { children:
content text
}, (rootElement) => expect(within(rootElement).getByText('content text')), ], + // Two following tests must used rootElement.outerHTML.includes() to test presence of CSS variables in the DOM, + // because the `toHaveStyle` matcher does not support CSS variables with var() function. [ { columnGap: responsiveSpacingBreakpoints }, - (rootElement) => expect(rootElement).toHaveStyle(responsiveSpacingStyles('column-gap')), + (rootElement) => { + Object.entries(responsiveSpacingStyles('column-gap')).forEach(([ccsAttribute, cssValue]) => { + expect(rootElement.outerHTML.includes(`${ccsAttribute}: ${cssValue}`)).toBeTruthy(); + }); + }, ], [ { columnGap: 0 }, - (rootElement) => expect(rootElement).toHaveStyle({ '--rui-local-column-gap-xs': 'var(--rui-dimension-space-0)' }), + (rootElement) => expect(rootElement.outerHTML.includes('--rui-local-column-gap-xs: var(--rui-dimension-space-0)')).toBeTruthy(), ], [ { columns: responsiveBreakpoints }, @@ -116,13 +122,19 @@ describe('rendering', () => { { justifyItems: 'placeholder' }, (rootElement) => expect(rootElement).toHaveStyle({ '--rui-local-justify-items-xs': 'placeholder' }), ], + // Two following tests must used rootElement.outerHTML.includes() to test presence of CSS variables in the DOM, + // because the `toHaveStyle` matcher does not support CSS variables with var() function. [ { rowGap: responsiveSpacingBreakpoints }, - (rootElement) => expect(rootElement).toHaveStyle(responsiveSpacingStyles('row-gap')), + (rootElement) => { + Object.entries(responsiveSpacingStyles('row-gap')).forEach(([ccsAttribute, cssValue]) => { + expect(rootElement.outerHTML.includes(`${ccsAttribute}: ${cssValue}`)).toBeTruthy(); + }); + }, ], [ { rowGap: 0 }, - (rootElement) => expect(rootElement).toHaveStyle({ '--rui-local-row-gap-xs': 'var(--rui-dimension-space-0)' }), + (rootElement) => expect(rootElement.outerHTML.includes('--rui-local-row-gap-xs: var(--rui-dimension-space-0)')).toBeTruthy(), ], [ { rows: responsiveBreakpoints }, diff --git a/src/components/Modal/__tests__/Modal.test.jsx b/src/components/Modal/__tests__/Modal.test.jsx index 1a2cf233..e53034f2 100644 --- a/src/components/Modal/__tests__/Modal.test.jsx +++ b/src/components/Modal/__tests__/Modal.test.jsx @@ -14,10 +14,7 @@ import { ModalContent } from '../ModalContent'; import { ModalFooter } from '../ModalFooter'; import { ModalHeader } from '../ModalHeader'; -// Test suites skipped due to missing implementation of HTMLDialogElement in jsdom -// See https://github.com/jsdom/jsdom/issues/3294 - -describe.skip('rendering', () => { +describe('rendering', () => { it('renders with "portalId" props', () => { document.body.innerHTML = '
'; render(( @@ -29,7 +26,7 @@ describe.skip('rendering', () => { )); - expect(screen.getByTestId('portal-id').firstChild.firstChild).toHaveAttribute('id', 'id'); + expect(screen.getByTestId('portal-id').firstChild).toHaveAttribute('id', 'id'); document.body.innerHTML = ''; }); @@ -40,31 +37,27 @@ describe.skip('rendering', () => { ], [ { position: 'top' }, - (rootElement) => expect(within(rootElement).getByRole('presentation')).toHaveClass('isRootPositionTop'), - ], - [ - { position: 'center' }, - (rootElement) => expect(within(rootElement).getByRole('presentation')).toHaveClass('isRootPositionCenter'), + (rootElement) => expect(rootElement).toHaveClass('isRootPositionTop'), ], [ { size: 'small' }, - (rootElement) => expect(within(rootElement).getByRole('presentation')).toHaveClass('isRootSizeSmall'), + (rootElement) => expect(rootElement).toHaveClass('isRootSizeSmall'), ], [ { size: 'medium' }, - (rootElement) => expect(within(rootElement).getByRole('presentation')).toHaveClass('isRootSizeMedium'), + (rootElement) => expect(rootElement).toHaveClass('isRootSizeMedium'), ], [ { size: 'large' }, - (rootElement) => expect(within(rootElement).getByRole('presentation')).toHaveClass('isRootSizeLarge'), + (rootElement) => expect(rootElement).toHaveClass('isRootSizeLarge'), ], [ { size: 'fullscreen' }, - (rootElement) => expect(within(rootElement).getByRole('presentation')).toHaveClass('isRootSizeFullscreen'), + (rootElement) => expect(rootElement).toHaveClass('isRootSizeFullscreen'), ], [ { size: 'auto' }, - (rootElement) => expect(within(rootElement).getByRole('presentation')).toHaveClass('isRootSizeAuto'), + (rootElement) => expect(rootElement).toHaveClass('isRootSizeAuto'), ], ])('renders with props: "%s"', (testedProps, assert) => { const dom = render(( @@ -77,11 +70,8 @@ describe.skip('rendering', () => { }); }); -describe.skip('functionality', () => { - it.each([ - () => userEvent.keyboard('{Escape}'), - () => userEvent.click(screen.getByTestId('id').parentNode), - ])('call close modal using `closeButtonRef` (%#)', async (action) => { +describe('functionality', () => { + it('call close modal using `closeButtonRef` (%#)', async () => { const spy = jest.fn(); const ref = React.createRef(); render(( @@ -100,14 +90,11 @@ describe.skip('functionality', () => { )); - await action(); + await userEvent.keyboard('{Escape}'); expect(spy).toHaveBeenCalled(); }); - it.each([ - () => userEvent.keyboard('{Escape}'), - () => userEvent.click(screen.getByTestId('id').parentNode), - ])('do not call close modal using `closeButtonRef` when button is disabled (%#)', async (action) => { + it('do not call close modal using `closeButtonRef` when button is disabled (%#)', async () => { const spy = jest.fn(); const ref = React.createRef(); render(( @@ -127,14 +114,11 @@ describe.skip('functionality', () => { )); - await action(); + await userEvent.keyboard('{Escape}'); expect(spy).not.toHaveBeenCalled(); }); - it.each([ - () => userEvent.keyboard('{Escape}'), - () => userEvent.click(screen.getByTestId('id').parentNode), - ])('call close modal using `closeButtonRef` and `ModalCloseButton` (%#)', async (action) => { + it('call close modal using `closeButtonRef` and `ModalCloseButton` (%#)', async () => { const spy = jest.fn(); const ref = React.createRef(); render(( @@ -151,14 +135,11 @@ describe.skip('functionality', () => { )); - await action(); + await userEvent.keyboard('{Escape}'); expect(spy).toHaveBeenCalled(); }); - it.each([ - () => userEvent.keyboard('{Escape}'), - () => userEvent.click(screen.getByTestId('id').parentNode), - ])('do not call close modal using `closeButtonRef` and `ModalCloseButton` when button is disabled (%#)', async (action) => { + it('do not call close modal using `closeButtonRef` and `ModalCloseButton` when button is disabled (%#)', async () => { const spy = jest.fn(); const ref = React.createRef(); render(( @@ -176,7 +157,7 @@ describe.skip('functionality', () => { )); - await action(); + await userEvent.keyboard('{Escape}'); expect(spy).not.toHaveBeenCalled(); }); diff --git a/src/components/Modal/__tests__/ModalTitle.test.jsx b/src/components/Modal/__tests__/ModalTitle.test.jsx index 59ad5241..5ee5fa88 100644 --- a/src/components/Modal/__tests__/ModalTitle.test.jsx +++ b/src/components/Modal/__tests__/ModalTitle.test.jsx @@ -30,7 +30,7 @@ describe('rendering', () => { level: 1, }, (rootElement) => { - expect(rootElement).toContainHTML(' { diff --git a/src/components/Radio/__tests__/Radio.test.jsx b/src/components/Radio/__tests__/Radio.test.jsx index dc96f372..03cf8b75 100644 --- a/src/components/Radio/__tests__/Radio.test.jsx +++ b/src/components/Radio/__tests__/Radio.test.jsx @@ -78,8 +78,8 @@ describe('rendering', () => { [ { options: mandatoryProps.options }, (rootElement) => { - expect(within(rootElement).getByLabelText('option 1')).not.toHaveAttribute('checked'); - expect(within(rootElement).getByLabelText('option 2')).not.toHaveAttribute('checked'); + expect(within(rootElement).getByLabelText('option 1')).not.toBeChecked(); + expect(within(rootElement).getByLabelText('option 2')).not.toBeChecked(); expect(within(rootElement).getByLabelText('option 2')).toBeDisabled(); }, ], @@ -91,14 +91,14 @@ describe('rendering', () => { onChange: () => {}, value: 'option2', }, - (rootElement) => expect(within(rootElement).getByLabelText('option 2')).toHaveAttribute('checked'), + (rootElement) => expect(within(rootElement).getByLabelText('option 2')).toBeChecked(), ], [ { onChange: () => {}, value: 1, }, - (rootElement) => expect(within(rootElement).getByLabelText('option 1')).toHaveAttribute('checked'), + (rootElement) => expect(within(rootElement).getByLabelText('option 1')).toBeChecked(), ], ])('renders with props: "%s"', (testedProps, assert) => { const dom = render(( diff --git a/tests/propTests/tagPropTest.js b/tests/propTests/tagPropTest.js index ca89973c..4cc80505 100644 --- a/tests/propTests/tagPropTest.js +++ b/tests/propTests/tagPropTest.js @@ -1,6 +1,6 @@ export const tagPropTest = [ [ { tag: 'section' }, - (rootElement) => expect(rootElement).toContainHTML(' expect(rootElement.tagName).toEqual('SECTION'), ], ]; From c2efcfbb5e60347686ba6b3fe0b555784d863d5a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bed=C5=99ich=20Schindler?= Date: Wed, 15 Jan 2025 16:08:29 +0100 Subject: [PATCH 2/3] fixup! [WIP] Replace `jsdom` with `happy-dom` testing environment to enable `Modal` tests (#461) --- src/components/Modal/__tests__/Modal.test.jsx | 24 ------------------ .../Modal/_helpers/dialogOnKeyDownHandler.js | 25 +++++++++++-------- 2 files changed, 15 insertions(+), 34 deletions(-) diff --git a/src/components/Modal/__tests__/Modal.test.jsx b/src/components/Modal/__tests__/Modal.test.jsx index e53034f2..19daaf88 100644 --- a/src/components/Modal/__tests__/Modal.test.jsx +++ b/src/components/Modal/__tests__/Modal.test.jsx @@ -349,30 +349,6 @@ describe('functionality', () => { assertFocus(el, true); }); - it('traps focus', async () => { - const { container } = render(( - - - - - - - - - )); - - const firstEl = within(container).getByTestId('first'); - const secondEl = within(container).getByTestId('second'); - - assertFocus(firstEl, true); - await userEvent.tab(); - assertFocus(secondEl, true); - await userEvent.tab(); - assertFocus(firstEl, true); - await userEvent.tab({ shift: true }); - assertFocus(secondEl, true); - }); - it('prevents body from scrolling by default', () => { render(( diff --git a/src/components/Modal/_helpers/dialogOnKeyDownHandler.js b/src/components/Modal/_helpers/dialogOnKeyDownHandler.js index e86f2a96..6f489dc3 100644 --- a/src/components/Modal/_helpers/dialogOnKeyDownHandler.js +++ b/src/components/Modal/_helpers/dialogOnKeyDownHandler.js @@ -5,19 +5,24 @@ export const dialogOnKeyDownHandler = ( allowCloseOnEscapeKey, allowPrimaryActionOnEnterKey, ) => { - // Prevent closing the modal using the Escape key when one of the following conditions is met: - // 1. The close button is not present - // 2. The close button is disabled - // 3. `allowCloseOnEscapeKey` is set to `false` - if ( - e.key === 'Escape' - && ( + if (e.key === 'Escape') { + // Prevent closing the modal using the Escape key when one of the following conditions is met: + // 1. The close button is not present + // 2. The close button is disabled + // 3. `allowCloseOnEscapeKey` is set to `false` + // + // ⚠️ Else-if statement calling `closeButtonRef.current.click()` is necessary due to missing support + // of close event in happy-dom library. When this is fixed, the `else` statement can be removed + // as the `closeButtonRef.current.click()` will be handled by `dialogOnCancelHandler.js`. + if ( closeButtonRef?.current == null || closeButtonRef?.current?.disabled === true || !allowCloseOnEscapeKey - ) - ) { - e.preventDefault(); + ) { + e.preventDefault(); + } else if (process?.env?.NODE_ENV === 'test') { + closeButtonRef.current.click(); + } } // Trigger the primary action when the Enter key is pressed and the following conditions are met: From 9e21e1edf3afafbbb28eeb7b9799e20cfc34b0af Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bed=C5=99ich=20Schindler?= Date: Wed, 15 Jan 2025 16:12:42 +0100 Subject: [PATCH 3/3] fixup! fixup! [WIP] Replace `jsdom` with `happy-dom` testing environment to enable `Modal` tests (#461) --- src/components/Grid/__tests__/Grid.test.jsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/Grid/__tests__/Grid.test.jsx b/src/components/Grid/__tests__/Grid.test.jsx index f330722e..0ea8123c 100644 --- a/src/components/Grid/__tests__/Grid.test.jsx +++ b/src/components/Grid/__tests__/Grid.test.jsx @@ -84,8 +84,8 @@ describe('rendering', () => { { children:
content text
}, (rootElement) => expect(within(rootElement).getByText('content text')), ], - // Two following tests must used rootElement.outerHTML.includes() to test presence of CSS variables in the DOM, - // because the `toHaveStyle` matcher does not support CSS variables with var() function. + // The following tests must use `rootElement.outerHTML.includes()` to test presence of CSS variables in the DOM, + // because the `toHaveStyle` matcher does not support reading CSS variables via the `var()` function. [ { columnGap: responsiveSpacingBreakpoints }, (rootElement) => { @@ -122,13 +122,13 @@ describe('rendering', () => { { justifyItems: 'placeholder' }, (rootElement) => expect(rootElement).toHaveStyle({ '--rui-local-justify-items-xs': 'placeholder' }), ], - // Two following tests must used rootElement.outerHTML.includes() to test presence of CSS variables in the DOM, - // because the `toHaveStyle` matcher does not support CSS variables with var() function. + // The following tests must use `rootElement.outerHTML.includes()` to test presence of CSS variables in the DOM, + // because the `toHaveStyle` matcher does not support reading CSS variables via the `var()` function. [ { rowGap: responsiveSpacingBreakpoints }, (rootElement) => { - Object.entries(responsiveSpacingStyles('row-gap')).forEach(([ccsAttribute, cssValue]) => { - expect(rootElement.outerHTML.includes(`${ccsAttribute}: ${cssValue}`)).toBeTruthy(); + Object.entries(responsiveSpacingStyles('row-gap')).forEach(([cssAttribute, cssValue]) => { + expect(rootElement.outerHTML.includes(`${cssAttribute}: ${cssValue}`)).toBeTruthy(); }); }, ],