diff --git a/.gitignore b/.gitignore index de86d75543..b6267817f0 100644 --- a/.gitignore +++ b/.gitignore @@ -33,3 +33,4 @@ lerna-debug.log packages/**/package-lock.json packages/**/.cache *.tgz +!/packages/*/cypress/ diff --git a/package-lock.json b/package-lock.json index 87c975020c..eea80b2f9c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -57,6 +57,8 @@ "@patternfly/react-core": "^5.0.0", "@patternfly/react-icons": "^5.0.0", "@patternfly/react-table": "^5.0.0", + "@simonsmith/cypress-image-snapshot": "^8.0.2", + "@swc/core": "^1.3.74", "@testing-library/dom": "^8.18.1", "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^14.0.0", @@ -102,6 +104,7 @@ "resolve-url-loader": "^5.0.0", "sass": "^1.55.0", "style-to-object": "^0.3.0", + "swc-loader": "^0.2.3", "ts-jest": "^29.1.1", "typescript": "^4.8.4", "whatwg-fetch": "^3.6.2" @@ -9119,9 +9122,9 @@ } }, "node_modules/@patternfly/patternfly": { - "version": "4.224.5", - "resolved": "https://registry.npmjs.org/@patternfly/patternfly/-/patternfly-4.224.5.tgz", - "integrity": "sha512-io0huj+LCP5FgDZJDaLv1snxktTYs8iCFz/W1VDRneYoebNHLmGfQdF7Yn8bS6PF7qmN6oJKEBlq3AjmmE8vdA==", + "version": "5.0.2", + "resolved": "https://registry.npmjs.org/@patternfly/patternfly/-/patternfly-5.0.2.tgz", + "integrity": "sha512-PB8+MLdYVgF1hIOxGmnVsZG+YHUX3RePe5W1oMS4gS00EmSgw1cobr1Qbpy/BqqS8/R9DRN4hZ2FKDT0d5tkFQ==", "dev": true }, "node_modules/@patternfly/quickstarts": { @@ -9777,6 +9780,91 @@ "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" }, + "node_modules/@simonsmith/cypress-image-snapshot": { + "version": "8.0.2", + "resolved": "https://registry.npmjs.org/@simonsmith/cypress-image-snapshot/-/cypress-image-snapshot-8.0.2.tgz", + "integrity": "sha512-HWcOwgEk9epYcNuW8msdY7kpHydT7WUWajJiEtAqPT7nFgMaytmdLfM6tjHWqAsyj3+VSWQ4g0rEVr8wQ+M50A==", + "dev": true, + "dependencies": { + "@types/jest-image-snapshot": "^6.1.0", + "chalk": "^4.1.2", + "jest-image-snapshot": "^6.1.0", + "just-extend": "^6.2.0" + }, + "peerDependencies": { + "cypress": ">10.0.0" + } + }, + "node_modules/@simonsmith/cypress-image-snapshot/node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/@simonsmith/cypress-image-snapshot/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/@simonsmith/cypress-image-snapshot/node_modules/color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "dependencies": { + "color-name": "~1.1.4" + }, + "engines": { + "node": ">=7.0.0" + } + }, + "node_modules/@simonsmith/cypress-image-snapshot/node_modules/color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true + }, + "node_modules/@simonsmith/cypress-image-snapshot/node_modules/has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/@simonsmith/cypress-image-snapshot/node_modules/supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "dependencies": { + "has-flag": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/@sinclair/typebox": { "version": "0.27.8", "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.27.8.tgz", @@ -12786,10 +12874,44 @@ "url": "https://www.patreon.com/athan" } }, + "node_modules/@swc/core": { + "version": "1.3.74", + "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.3.74.tgz", + "integrity": "sha512-P+MIExOTdWlfq8Heb1/NhBAke6UTckd4cRDuJoFcFMGBRvgoCMNWhnfP3FRRXPLI7GGg27dRZS+xHiqYyQmSrA==", + "dev": true, + "hasInstallScript": true, + "engines": { + "node": ">=10" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/swc" + }, + "optionalDependencies": { + "@swc/core-darwin-arm64": "1.3.74", + "@swc/core-darwin-x64": "1.3.74", + "@swc/core-linux-arm-gnueabihf": "1.3.74", + "@swc/core-linux-arm64-gnu": "1.3.74", + "@swc/core-linux-arm64-musl": "1.3.74", + "@swc/core-linux-x64-gnu": "1.3.74", + "@swc/core-linux-x64-musl": "1.3.74", + "@swc/core-win32-arm64-msvc": "1.3.74", + "@swc/core-win32-ia32-msvc": "1.3.74", + "@swc/core-win32-x64-msvc": "1.3.74" + }, + "peerDependencies": { + "@swc/helpers": "^0.5.0" + }, + "peerDependenciesMeta": { + "@swc/helpers": { + "optional": true + } + } + }, "node_modules/@swc/core-darwin-arm64": { - "version": "1.3.73", - "resolved": "https://registry.npmjs.org/@swc/core-darwin-arm64/-/core-darwin-arm64-1.3.73.tgz", - "integrity": "sha512-RwCDCDg3gmgt+p/Kc48o3PdLBSCoFQKLb8QgC7F32Ql9wjVMS3fzy2i6NZ+MnbEnYGQtTcqLbxEDtpV3eMsEHw==", + "version": "1.3.74", + "resolved": "https://registry.npmjs.org/@swc/core-darwin-arm64/-/core-darwin-arm64-1.3.74.tgz", + "integrity": "sha512-2rMV4QxM583jXcREfo0MhV3Oj5pgRSfSh/kVrB1twL2rQxOrbzkAPT/8flmygdVoL4f2F7o1EY5lKlYxEBiIKQ==", "cpu": [ "arm64" ], @@ -12803,9 +12925,9 @@ } }, "node_modules/@swc/core-darwin-x64": { - "version": "1.3.73", - "resolved": "https://registry.npmjs.org/@swc/core-darwin-x64/-/core-darwin-x64-1.3.73.tgz", - "integrity": "sha512-cHmAWvCVRc7LTdv4LO4mZZXfW3E9NT/KNnLNG/PgWP9QK1bSQ7hUDVKsx70ygR4ONwfhqUuglakzu+xDfNoW+A==", + "version": "1.3.74", + "resolved": "https://registry.npmjs.org/@swc/core-darwin-x64/-/core-darwin-x64-1.3.74.tgz", + "integrity": "sha512-KKEGE1wXneYXe15fWDRM8/oekd/Q4yAuccA0vWY/7i6nOSPqWYcSDR0nRtR030ltDxWt0rk/eCTmNkrOWrKs3A==", "cpu": [ "x64" ], @@ -12819,9 +12941,9 @@ } }, "node_modules/@swc/core-linux-arm-gnueabihf": { - "version": "1.3.73", - "resolved": "https://registry.npmjs.org/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.3.73.tgz", - "integrity": "sha512-EmJALh7KUJhcdr7uUQg7wTpdcX5k1Xjspgy3QMg8j2dwb4DsnFgrnArsFNXHBB1Dj7LlQSoyxQ5mBcJtUtCb8A==", + "version": "1.3.74", + "resolved": "https://registry.npmjs.org/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.3.74.tgz", + "integrity": "sha512-HehH5DR6r/5fIVu7tu8ZqgrHkhSCQNewf1ztFQJgcmaQWn+H4AJERBjwkjosqh4TvUJucZv8vyRTvrFeBXaCSA==", "cpu": [ "arm" ], @@ -12835,9 +12957,9 @@ } }, "node_modules/@swc/core-linux-arm64-gnu": { - "version": "1.3.73", - "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.3.73.tgz", - "integrity": "sha512-RK6jTm8ppvglh42YOq/k2AqpHS9uYP5h5FNMmA9OI8lupCCS8HMtexbwqw+Xd0MGmSrsJiURw3Z6az8cEObrag==", + "version": "1.3.74", + "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.3.74.tgz", + "integrity": "sha512-+xkbCRz/wczgdknoV4NwYxbRI2dD7x/qkIFcVM2buzLCq8oWLweuV8+aL4pRqu0qDh7ZSb1jcaVTUIsySCJznA==", "cpu": [ "arm64" ], @@ -12851,9 +12973,9 @@ } }, "node_modules/@swc/core-linux-arm64-musl": { - "version": "1.3.73", - "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.3.73.tgz", - "integrity": "sha512-hhS6yfgZLKPVAklGjKlbyf9InAhDGj3u+jbZkjStrOgtYNBCk5tbkROZP9ib5enN9m9Oosl5gM5v6oTw27TbUw==", + "version": "1.3.74", + "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.3.74.tgz", + "integrity": "sha512-maKFZSCD3tQznzPV7T3V+TtiWZFEFM8YrnSS5fQNNb+K9J65sL+170uTb3M7H4cFkG+9Sm5k5yCrCIutlvV48g==", "cpu": [ "arm64" ], @@ -12867,9 +12989,9 @@ } }, "node_modules/@swc/core-linux-x64-gnu": { - "version": "1.3.73", - "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.3.73.tgz", - "integrity": "sha512-ZGcY63EtFW5OLz1tsKhqhymzvoto329c0oRS9ptzMO66eUrjsHxTt5uPixrI24F6y+bn+qFqsgIw3nwMV8jTPw==", + "version": "1.3.74", + "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.3.74.tgz", + "integrity": "sha512-LEXpcShF6DLTWJSiBhMSYZkLQ27UvaQ24fCFhoIV/R3dhYaUpHmIyLPPBNC82T03lB3ONUFVwrRw6fxDJ/f00A==", "cpu": [ "x64" ], @@ -12883,9 +13005,9 @@ } }, "node_modules/@swc/core-linux-x64-musl": { - "version": "1.3.73", - "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.3.73.tgz", - "integrity": "sha512-DMz2W0PnzMXAhbMPGArQUBVayyzzzuivvJyJkyFaMPiIwaI+QG+UvLgjSM7NmG/9Eq9hX2zZ1zdaalVKXyyCHQ==", + "version": "1.3.74", + "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.3.74.tgz", + "integrity": "sha512-sxsFctbFMZEFmDE7CmYljG0dMumH8XBTwwtGr8s6z0fYAzXBGNq2AFPcmEh2np9rPWkt7pE1m0ByESD+dMkbxQ==", "cpu": [ "x64" ], @@ -12899,9 +13021,9 @@ } }, "node_modules/@swc/core-win32-arm64-msvc": { - "version": "1.3.73", - "resolved": "https://registry.npmjs.org/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.3.73.tgz", - "integrity": "sha512-yHB1jG3c4/5An//nA9+War6oiNrM/NUz6ivDPbrBfbJHtU/iPfgdAvxfm5/xpOFx4U18JJHnOt853sDyXJwi/A==", + "version": "1.3.74", + "resolved": "https://registry.npmjs.org/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.3.74.tgz", + "integrity": "sha512-F7hY9/BjFCozA4YPFYFH5FGCyWwa44vIXHqG66F5cDwXDGFn8ZtBsYIsiPfUYcx0AeAo1ojnVWKPxokZhYNYqA==", "cpu": [ "arm64" ], @@ -12915,9 +13037,9 @@ } }, "node_modules/@swc/core-win32-ia32-msvc": { - "version": "1.3.73", - "resolved": "https://registry.npmjs.org/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.3.73.tgz", - "integrity": "sha512-cA61i4VPTrABAZ8LDvNVqwcO1VLEDO+71iWettvhyk7p6/H/lXG4VQVyHcncmfrAUzDQalXVbgZm6MA3hpqhFQ==", + "version": "1.3.74", + "resolved": "https://registry.npmjs.org/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.3.74.tgz", + "integrity": "sha512-qBAsiD1AlIdqED6wy3UNRHyAys9pWMUidX0LJ6mj24r/vfrzzTBAUrLJe5m7bzE+F1Rgi001avYJeEW1DLEJ+Q==", "cpu": [ "ia32" ], @@ -12931,9 +13053,9 @@ } }, "node_modules/@swc/core-win32-x64-msvc": { - "version": "1.3.73", - "resolved": "https://registry.npmjs.org/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.3.73.tgz", - "integrity": "sha512-QwTO9IlIpEr2GsJvW8qNVvQXTzT1ASqf8C8aZDLtVwHKdreTMjlrNMRYw1883DVLRuHMs5RLP4IA2A47Oexp1Q==", + "version": "1.3.74", + "resolved": "https://registry.npmjs.org/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.3.74.tgz", + "integrity": "sha512-S3YAvvLprTnPRwQuy9Dkwubb5SRLpVK3JJsqYDbGfgj8PGQyKHZcVJ5X3nfFsoWLy3j9B/3Os2nawprRSzeC5A==", "cpu": [ "x64" ], @@ -12947,9 +13069,12 @@ } }, "node_modules/@swc/helpers": { - "version": "0.4.11", - "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.4.11.tgz", - "integrity": "sha512-rEUrBSGIoSFuYxwBYtlUFMlE2CwGhmW+w9355/5oduSw8e5h2+Tj4UrAGNNgP9915++wj5vkQo0UuOBqOAq4nw==", + "version": "0.5.1", + "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.1.tgz", + "integrity": "sha512-sJ902EfIzn1Fa+qYmjdQqh8tPsoxyBz+8yBKC2HKUxyezKJFwPGOn7pv4WY6QuQW//ySQi5lJjA/ZT9sNWWNTg==", + "dev": true, + "optional": true, + "peer": true, "dependencies": { "tslib": "^2.4.0" } @@ -13568,6 +13693,17 @@ "pretty-format": "^27.0.0" } }, + "node_modules/@types/jest-image-snapshot": { + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/@types/jest-image-snapshot/-/jest-image-snapshot-6.2.0.tgz", + "integrity": "sha512-LG8r7GzYJE9sETkSe4z6k1lVyab0nnln6wGcNXOat8Kny3opvjqw1A5cIKf4mWdsTPuIuCtdMO+KmQLPFZ14Yw==", + "dev": true, + "dependencies": { + "@types/jest": "*", + "@types/pixelmatch": "*", + "ssim.js": "^3.1.1" + } + }, "node_modules/@types/jsdom": { "version": "20.0.1", "resolved": "https://registry.npmjs.org/@types/jsdom/-/jsdom-20.0.1.tgz", @@ -13684,6 +13820,15 @@ "resolved": "https://registry.npmjs.org/@types/parse5/-/parse5-6.0.3.tgz", "integrity": "sha512-SuT16Q1K51EAVPz1K29DJ/sXjhSQ0zjvsypYJ6tlwVsRV9jwW5Adq2ch8Dq8kDBCkYnELS7N7VNCSB5nC56t/g==" }, + "node_modules/@types/pixelmatch": { + "version": "5.2.4", + "resolved": "https://registry.npmjs.org/@types/pixelmatch/-/pixelmatch-5.2.4.tgz", + "integrity": "sha512-HDaSHIAv9kwpMN7zlmwfTv6gax0PiporJOipcrGsVNF3Ba+kryOZc0Pio5pn6NhisgWr7TaajlPEKTbTAypIBQ==", + "dev": true, + "dependencies": { + "@types/node": "*" + } + }, "node_modules/@types/prettier": { "version": "2.7.3", "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.7.3.tgz", @@ -22777,6 +22922,15 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/get-stdin": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-5.0.1.tgz", + "integrity": "sha512-jZV7n6jGE3Gt7fgSTJoz91Ak5MuTLwMwkoYdjxuJ/AmjIsE1UC03y/IWkZCQGEvVNS9qoRNwy5BCqxImv0FVeA==", + "dev": true, + "engines": { + "node": ">=0.12.0" + } + }, "node_modules/get-stream": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz", @@ -23153,6 +23307,12 @@ "node": ">=8" } }, + "node_modules/glur": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/glur/-/glur-1.1.2.tgz", + "integrity": "sha512-l+8esYHTKOx2G/Aao4lEQ0bnHWg4fWtJbVoZZT9Knxi01pB8C80BR85nONLFwkkQoFRCmXY+BUcGZN3yZ2QsRA==", + "dev": true + }, "node_modules/gopd": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz", @@ -27478,6 +27638,112 @@ "url": "https://github.com/chalk/supports-color?sponsor=1" } }, + "node_modules/jest-image-snapshot": { + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/jest-image-snapshot/-/jest-image-snapshot-6.2.0.tgz", + "integrity": "sha512-9mTHBKiiSIZ26csbLmjKyN+SrVypM93S5y+jULCvn6YItgepvcrJIKGNeSyt9d2EZiutOroLs/UjtrWiBzpHbA==", + "dev": true, + "dependencies": { + "chalk": "^4.0.0", + "get-stdin": "^5.0.1", + "glur": "^1.1.2", + "lodash": "^4.17.4", + "pixelmatch": "^5.1.0", + "pngjs": "^3.4.0", + "rimraf": "^2.6.2", + "ssim.js": "^3.1.1" + }, + "engines": { + "node": "^14.15.0 || ^16.10.0 || >=18.0.0" + }, + "peerDependencies": { + "jest": ">=20 <=29" + }, + "peerDependenciesMeta": { + "jest": { + "optional": true + } + } + }, + "node_modules/jest-image-snapshot/node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/jest-image-snapshot/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/jest-image-snapshot/node_modules/color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "dependencies": { + "color-name": "~1.1.4" + }, + "engines": { + "node": ">=7.0.0" + } + }, + "node_modules/jest-image-snapshot/node_modules/color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true + }, + "node_modules/jest-image-snapshot/node_modules/has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/jest-image-snapshot/node_modules/pngjs": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-3.4.0.tgz", + "integrity": "sha512-NCrCHhWmnQklfH4MtJMRjZ2a8c80qXeMlQMv2uVp9ISJMTt562SbGd6n2oq0PaPgKm7Z6pL9E2UlLIhC+SHL3w==", + "dev": true, + "engines": { + "node": ">=4.0.0" + } + }, + "node_modules/jest-image-snapshot/node_modules/supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "dependencies": { + "has-flag": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/jest-leak-detector": { "version": "29.6.2", "resolved": "https://registry.npmjs.org/jest-leak-detector/-/jest-leak-detector-29.6.2.tgz", @@ -29200,6 +29466,12 @@ "integrity": "sha512-OYTthRfSh55WOItVqwpefPtNt2VdKsq5AnAK6apdtR6yCH8pr0CmSr710J0Mf+WdQy7K/OzMy7K2MgAfdQURDw==", "dev": true }, + "node_modules/just-extend": { + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/just-extend/-/just-extend-6.2.0.tgz", + "integrity": "sha512-cYofQu2Xpom82S6qD778jBDpwvvy39s1l/hrYij2u9AMdQcGRpaBu6kY4mVhuno5kJVi1DAz4aiphA2WI1/OAw==", + "dev": true + }, "node_modules/jwa": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/jwa/-/jwa-2.0.0.tgz", @@ -32322,6 +32594,14 @@ "escalade": "^3.1.1" } }, + "node_modules/next/node_modules/@swc/helpers": { + "version": "0.4.11", + "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.4.11.tgz", + "integrity": "sha512-rEUrBSGIoSFuYxwBYtlUFMlE2CwGhmW+w9355/5oduSw8e5h2+Tj4UrAGNNgP9915++wj5vkQo0UuOBqOAq4nw==", + "dependencies": { + "tslib": "^2.4.0" + } + }, "node_modules/next/node_modules/postcss": { "version": "8.4.14", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.14.tgz", @@ -39464,6 +39744,12 @@ "node": ">=0.10.0" } }, + "node_modules/ssim.js": { + "version": "3.5.0", + "resolved": "https://registry.npmjs.org/ssim.js/-/ssim.js-3.5.0.tgz", + "integrity": "sha512-Aj6Jl2z6oDmgYFFbQqK7fght19bXdOxY7Tj03nF+03M9gCBAjeIiO8/PlEGMfKDwYpw4q6iBqVq2YuREorGg/g==", + "dev": true + }, "node_modules/ssri": { "version": "9.0.1", "resolved": "https://registry.npmjs.org/ssri/-/ssri-9.0.1.tgz", @@ -40023,6 +40309,16 @@ "upper-case": "^1.1.1" } }, + "node_modules/swc-loader": { + "version": "0.2.3", + "resolved": "https://registry.npmjs.org/swc-loader/-/swc-loader-0.2.3.tgz", + "integrity": "sha512-D1p6XXURfSPleZZA/Lipb3A8pZ17fP4NObZvFCDjK/OKljroqDpPmsBdTraWhVBqUNpcWBQY1imWdoPScRlQ7A==", + "dev": true, + "peerDependencies": { + "@swc/core": "^1.2.147", + "webpack": ">=2" + } + }, "node_modules/symbol-observable": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz", @@ -43760,7 +44056,7 @@ }, "devDependencies": { "@cypress/webpack-dev-server": "^1.8.4", - "@patternfly/patternfly": "^4.217.0", + "@patternfly/patternfly": "^5.0.0", "@types/react": "^18.0.0", "css-loader": "^6.7.1", "cypress": "^12.17.3", @@ -44231,51 +44527,6 @@ "webpack-dev-server": "^4.11.1" } }, - "packages/demo/node_modules/@swc/core": { - "version": "1.3.73", - "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.3.73.tgz", - "integrity": "sha512-ihjj/mAQKnXakFdFPlIJOjAvfLLc2f7t9u3k5Vsv8o30utD4/4mw1SAEL9vsPYM14XrMJa6PUNegw6hNxX1D2g==", - "dev": true, - "hasInstallScript": true, - "engines": { - "node": ">=10" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/swc" - }, - "optionalDependencies": { - "@swc/core-darwin-arm64": "1.3.73", - "@swc/core-darwin-x64": "1.3.73", - "@swc/core-linux-arm-gnueabihf": "1.3.73", - "@swc/core-linux-arm64-gnu": "1.3.73", - "@swc/core-linux-arm64-musl": "1.3.73", - "@swc/core-linux-x64-gnu": "1.3.73", - "@swc/core-linux-x64-musl": "1.3.73", - "@swc/core-win32-arm64-msvc": "1.3.73", - "@swc/core-win32-ia32-msvc": "1.3.73", - "@swc/core-win32-x64-msvc": "1.3.73" - }, - "peerDependencies": { - "@swc/helpers": "^0.5.0" - }, - "peerDependenciesMeta": { - "@swc/helpers": { - "optional": true - } - } - }, - "packages/demo/node_modules/@swc/helpers": { - "version": "0.5.1", - "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.1.tgz", - "integrity": "sha512-sJ902EfIzn1Fa+qYmjdQqh8tPsoxyBz+8yBKC2HKUxyezKJFwPGOn7pv4WY6QuQW//ySQi5lJjA/ZT9sNWWNTg==", - "dev": true, - "optional": true, - "peer": true, - "dependencies": { - "tslib": "^2.4.0" - } - }, "packages/demo/node_modules/css-loader": { "version": "5.2.7", "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-5.2.7.tgz", @@ -44365,16 +44616,6 @@ "node": ">=10" } }, - "packages/demo/node_modules/swc-loader": { - "version": "0.2.3", - "resolved": "https://registry.npmjs.org/swc-loader/-/swc-loader-0.2.3.tgz", - "integrity": "sha512-D1p6XXURfSPleZZA/Lipb3A8pZ17fP4NObZvFCDjK/OKljroqDpPmsBdTraWhVBqUNpcWBQY1imWdoPScRlQ7A==", - "dev": true, - "peerDependencies": { - "@swc/core": "^1.2.147", - "webpack": ">=2" - } - }, "packages/demo/node_modules/yallist": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", @@ -51743,9 +51984,9 @@ } }, "@patternfly/patternfly": { - "version": "4.224.5", - "resolved": "https://registry.npmjs.org/@patternfly/patternfly/-/patternfly-4.224.5.tgz", - "integrity": "sha512-io0huj+LCP5FgDZJDaLv1snxktTYs8iCFz/W1VDRneYoebNHLmGfQdF7Yn8bS6PF7qmN6oJKEBlq3AjmmE8vdA==", + "version": "5.0.2", + "resolved": "https://registry.npmjs.org/@patternfly/patternfly/-/patternfly-5.0.2.tgz", + "integrity": "sha512-PB8+MLdYVgF1hIOxGmnVsZG+YHUX3RePe5W1oMS4gS00EmSgw1cobr1Qbpy/BqqS8/R9DRN4hZ2FKDT0d5tkFQ==", "dev": true }, "@patternfly/quickstarts": { @@ -51939,7 +52180,7 @@ "version": "file:packages/components", "requires": { "@cypress/webpack-dev-server": "^1.8.4", - "@patternfly/patternfly": "^4.217.0", + "@patternfly/patternfly": "^5.0.0", "@redhat-cloud-services/frontend-components-utilities": "^3.2.25", "@redhat-cloud-services/types": "^0.0.24", "@scalprum/core": "^0.5.1", @@ -52319,35 +52560,6 @@ "webpack-dev-server": "^4.11.1" }, "dependencies": { - "@swc/core": { - "version": "1.3.73", - "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.3.73.tgz", - "integrity": "sha512-ihjj/mAQKnXakFdFPlIJOjAvfLLc2f7t9u3k5Vsv8o30utD4/4mw1SAEL9vsPYM14XrMJa6PUNegw6hNxX1D2g==", - "dev": true, - "requires": { - "@swc/core-darwin-arm64": "1.3.73", - "@swc/core-darwin-x64": "1.3.73", - "@swc/core-linux-arm-gnueabihf": "1.3.73", - "@swc/core-linux-arm64-gnu": "1.3.73", - "@swc/core-linux-arm64-musl": "1.3.73", - "@swc/core-linux-x64-gnu": "1.3.73", - "@swc/core-linux-x64-musl": "1.3.73", - "@swc/core-win32-arm64-msvc": "1.3.73", - "@swc/core-win32-ia32-msvc": "1.3.73", - "@swc/core-win32-x64-msvc": "1.3.73" - } - }, - "@swc/helpers": { - "version": "0.5.1", - "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.1.tgz", - "integrity": "sha512-sJ902EfIzn1Fa+qYmjdQqh8tPsoxyBz+8yBKC2HKUxyezKJFwPGOn7pv4WY6QuQW//ySQi5lJjA/ZT9sNWWNTg==", - "dev": true, - "optional": true, - "peer": true, - "requires": { - "tslib": "^2.4.0" - } - }, "css-loader": { "version": "5.2.7", "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-5.2.7.tgz", @@ -52394,13 +52606,6 @@ "lru-cache": "^6.0.0" } }, - "swc-loader": { - "version": "0.2.3", - "resolved": "https://registry.npmjs.org/swc-loader/-/swc-loader-0.2.3.tgz", - "integrity": "sha512-D1p6XXURfSPleZZA/Lipb3A8pZ17fP4NObZvFCDjK/OKljroqDpPmsBdTraWhVBqUNpcWBQY1imWdoPScRlQ7A==", - "dev": true, - "requires": {} - }, "yallist": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", @@ -52981,6 +53186,69 @@ } } }, + "@simonsmith/cypress-image-snapshot": { + "version": "8.0.2", + "resolved": "https://registry.npmjs.org/@simonsmith/cypress-image-snapshot/-/cypress-image-snapshot-8.0.2.tgz", + "integrity": "sha512-HWcOwgEk9epYcNuW8msdY7kpHydT7WUWajJiEtAqPT7nFgMaytmdLfM6tjHWqAsyj3+VSWQ4g0rEVr8wQ+M50A==", + "dev": true, + "requires": { + "@types/jest-image-snapshot": "^6.1.0", + "chalk": "^4.1.2", + "jest-image-snapshot": "^6.1.0", + "just-extend": "^6.2.0" + }, + "dependencies": { + "ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "requires": { + "color-convert": "^2.0.1" + } + }, + "chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + }, + "color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "requires": { + "color-name": "~1.1.4" + } + }, + "color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true + }, + "has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true + }, + "supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "requires": { + "has-flag": "^4.0.0" + } + } + } + }, "@sinclair/typebox": { "version": "0.27.8", "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.27.8.tgz", @@ -54068,80 +54336,101 @@ "@stdlib/utils-global": "^0.0.x" } }, + "@swc/core": { + "version": "1.3.74", + "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.3.74.tgz", + "integrity": "sha512-P+MIExOTdWlfq8Heb1/NhBAke6UTckd4cRDuJoFcFMGBRvgoCMNWhnfP3FRRXPLI7GGg27dRZS+xHiqYyQmSrA==", + "dev": true, + "requires": { + "@swc/core-darwin-arm64": "1.3.74", + "@swc/core-darwin-x64": "1.3.74", + "@swc/core-linux-arm-gnueabihf": "1.3.74", + "@swc/core-linux-arm64-gnu": "1.3.74", + "@swc/core-linux-arm64-musl": "1.3.74", + "@swc/core-linux-x64-gnu": "1.3.74", + "@swc/core-linux-x64-musl": "1.3.74", + "@swc/core-win32-arm64-msvc": "1.3.74", + "@swc/core-win32-ia32-msvc": "1.3.74", + "@swc/core-win32-x64-msvc": "1.3.74" + } + }, "@swc/core-darwin-arm64": { - "version": "1.3.73", - "resolved": "https://registry.npmjs.org/@swc/core-darwin-arm64/-/core-darwin-arm64-1.3.73.tgz", - "integrity": "sha512-RwCDCDg3gmgt+p/Kc48o3PdLBSCoFQKLb8QgC7F32Ql9wjVMS3fzy2i6NZ+MnbEnYGQtTcqLbxEDtpV3eMsEHw==", + "version": "1.3.74", + "resolved": "https://registry.npmjs.org/@swc/core-darwin-arm64/-/core-darwin-arm64-1.3.74.tgz", + "integrity": "sha512-2rMV4QxM583jXcREfo0MhV3Oj5pgRSfSh/kVrB1twL2rQxOrbzkAPT/8flmygdVoL4f2F7o1EY5lKlYxEBiIKQ==", "dev": true, "optional": true }, "@swc/core-darwin-x64": { - "version": "1.3.73", - "resolved": "https://registry.npmjs.org/@swc/core-darwin-x64/-/core-darwin-x64-1.3.73.tgz", - "integrity": "sha512-cHmAWvCVRc7LTdv4LO4mZZXfW3E9NT/KNnLNG/PgWP9QK1bSQ7hUDVKsx70ygR4ONwfhqUuglakzu+xDfNoW+A==", + "version": "1.3.74", + "resolved": "https://registry.npmjs.org/@swc/core-darwin-x64/-/core-darwin-x64-1.3.74.tgz", + "integrity": "sha512-KKEGE1wXneYXe15fWDRM8/oekd/Q4yAuccA0vWY/7i6nOSPqWYcSDR0nRtR030ltDxWt0rk/eCTmNkrOWrKs3A==", "dev": true, "optional": true }, "@swc/core-linux-arm-gnueabihf": { - "version": "1.3.73", - "resolved": "https://registry.npmjs.org/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.3.73.tgz", - "integrity": "sha512-EmJALh7KUJhcdr7uUQg7wTpdcX5k1Xjspgy3QMg8j2dwb4DsnFgrnArsFNXHBB1Dj7LlQSoyxQ5mBcJtUtCb8A==", + "version": "1.3.74", + "resolved": "https://registry.npmjs.org/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.3.74.tgz", + "integrity": "sha512-HehH5DR6r/5fIVu7tu8ZqgrHkhSCQNewf1ztFQJgcmaQWn+H4AJERBjwkjosqh4TvUJucZv8vyRTvrFeBXaCSA==", "dev": true, "optional": true }, "@swc/core-linux-arm64-gnu": { - "version": "1.3.73", - "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.3.73.tgz", - "integrity": "sha512-RK6jTm8ppvglh42YOq/k2AqpHS9uYP5h5FNMmA9OI8lupCCS8HMtexbwqw+Xd0MGmSrsJiURw3Z6az8cEObrag==", + "version": "1.3.74", + "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.3.74.tgz", + "integrity": "sha512-+xkbCRz/wczgdknoV4NwYxbRI2dD7x/qkIFcVM2buzLCq8oWLweuV8+aL4pRqu0qDh7ZSb1jcaVTUIsySCJznA==", "dev": true, "optional": true }, "@swc/core-linux-arm64-musl": { - "version": "1.3.73", - "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.3.73.tgz", - "integrity": "sha512-hhS6yfgZLKPVAklGjKlbyf9InAhDGj3u+jbZkjStrOgtYNBCk5tbkROZP9ib5enN9m9Oosl5gM5v6oTw27TbUw==", + "version": "1.3.74", + "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.3.74.tgz", + "integrity": "sha512-maKFZSCD3tQznzPV7T3V+TtiWZFEFM8YrnSS5fQNNb+K9J65sL+170uTb3M7H4cFkG+9Sm5k5yCrCIutlvV48g==", "dev": true, "optional": true }, "@swc/core-linux-x64-gnu": { - "version": "1.3.73", - "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.3.73.tgz", - "integrity": "sha512-ZGcY63EtFW5OLz1tsKhqhymzvoto329c0oRS9ptzMO66eUrjsHxTt5uPixrI24F6y+bn+qFqsgIw3nwMV8jTPw==", + "version": "1.3.74", + "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.3.74.tgz", + "integrity": "sha512-LEXpcShF6DLTWJSiBhMSYZkLQ27UvaQ24fCFhoIV/R3dhYaUpHmIyLPPBNC82T03lB3ONUFVwrRw6fxDJ/f00A==", "dev": true, "optional": true }, "@swc/core-linux-x64-musl": { - "version": "1.3.73", - "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.3.73.tgz", - "integrity": "sha512-DMz2W0PnzMXAhbMPGArQUBVayyzzzuivvJyJkyFaMPiIwaI+QG+UvLgjSM7NmG/9Eq9hX2zZ1zdaalVKXyyCHQ==", + "version": "1.3.74", + "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.3.74.tgz", + "integrity": "sha512-sxsFctbFMZEFmDE7CmYljG0dMumH8XBTwwtGr8s6z0fYAzXBGNq2AFPcmEh2np9rPWkt7pE1m0ByESD+dMkbxQ==", "dev": true, "optional": true }, "@swc/core-win32-arm64-msvc": { - "version": "1.3.73", - "resolved": "https://registry.npmjs.org/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.3.73.tgz", - "integrity": "sha512-yHB1jG3c4/5An//nA9+War6oiNrM/NUz6ivDPbrBfbJHtU/iPfgdAvxfm5/xpOFx4U18JJHnOt853sDyXJwi/A==", + "version": "1.3.74", + "resolved": "https://registry.npmjs.org/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.3.74.tgz", + "integrity": "sha512-F7hY9/BjFCozA4YPFYFH5FGCyWwa44vIXHqG66F5cDwXDGFn8ZtBsYIsiPfUYcx0AeAo1ojnVWKPxokZhYNYqA==", "dev": true, "optional": true }, "@swc/core-win32-ia32-msvc": { - "version": "1.3.73", - "resolved": "https://registry.npmjs.org/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.3.73.tgz", - "integrity": "sha512-cA61i4VPTrABAZ8LDvNVqwcO1VLEDO+71iWettvhyk7p6/H/lXG4VQVyHcncmfrAUzDQalXVbgZm6MA3hpqhFQ==", + "version": "1.3.74", + "resolved": "https://registry.npmjs.org/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.3.74.tgz", + "integrity": "sha512-qBAsiD1AlIdqED6wy3UNRHyAys9pWMUidX0LJ6mj24r/vfrzzTBAUrLJe5m7bzE+F1Rgi001avYJeEW1DLEJ+Q==", "dev": true, "optional": true }, "@swc/core-win32-x64-msvc": { - "version": "1.3.73", - "resolved": "https://registry.npmjs.org/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.3.73.tgz", - "integrity": "sha512-QwTO9IlIpEr2GsJvW8qNVvQXTzT1ASqf8C8aZDLtVwHKdreTMjlrNMRYw1883DVLRuHMs5RLP4IA2A47Oexp1Q==", + "version": "1.3.74", + "resolved": "https://registry.npmjs.org/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.3.74.tgz", + "integrity": "sha512-S3YAvvLprTnPRwQuy9Dkwubb5SRLpVK3JJsqYDbGfgj8PGQyKHZcVJ5X3nfFsoWLy3j9B/3Os2nawprRSzeC5A==", "dev": true, "optional": true }, "@swc/helpers": { - "version": "0.4.11", - "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.4.11.tgz", - "integrity": "sha512-rEUrBSGIoSFuYxwBYtlUFMlE2CwGhmW+w9355/5oduSw8e5h2+Tj4UrAGNNgP9915++wj5vkQo0UuOBqOAq4nw==", + "version": "0.5.1", + "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.1.tgz", + "integrity": "sha512-sJ902EfIzn1Fa+qYmjdQqh8tPsoxyBz+8yBKC2HKUxyezKJFwPGOn7pv4WY6QuQW//ySQi5lJjA/ZT9sNWWNTg==", + "dev": true, + "optional": true, + "peer": true, "requires": { "tslib": "^2.4.0" } @@ -54677,6 +54966,17 @@ "pretty-format": "^27.0.0" } }, + "@types/jest-image-snapshot": { + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/@types/jest-image-snapshot/-/jest-image-snapshot-6.2.0.tgz", + "integrity": "sha512-LG8r7GzYJE9sETkSe4z6k1lVyab0nnln6wGcNXOat8Kny3opvjqw1A5cIKf4mWdsTPuIuCtdMO+KmQLPFZ14Yw==", + "dev": true, + "requires": { + "@types/jest": "*", + "@types/pixelmatch": "*", + "ssim.js": "^3.1.1" + } + }, "@types/jsdom": { "version": "20.0.1", "resolved": "https://registry.npmjs.org/@types/jsdom/-/jsdom-20.0.1.tgz", @@ -54793,6 +55093,15 @@ "resolved": "https://registry.npmjs.org/@types/parse5/-/parse5-6.0.3.tgz", "integrity": "sha512-SuT16Q1K51EAVPz1K29DJ/sXjhSQ0zjvsypYJ6tlwVsRV9jwW5Adq2ch8Dq8kDBCkYnELS7N7VNCSB5nC56t/g==" }, + "@types/pixelmatch": { + "version": "5.2.4", + "resolved": "https://registry.npmjs.org/@types/pixelmatch/-/pixelmatch-5.2.4.tgz", + "integrity": "sha512-HDaSHIAv9kwpMN7zlmwfTv6gax0PiporJOipcrGsVNF3Ba+kryOZc0Pio5pn6NhisgWr7TaajlPEKTbTAypIBQ==", + "dev": true, + "requires": { + "@types/node": "*" + } + }, "@types/prettier": { "version": "2.7.3", "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.7.3.tgz", @@ -62223,6 +62532,12 @@ "integrity": "sha512-g/Q1aTSDOxFpchXC4i8ZWvxA1lnPqx/JHqcpIw0/LX9T8x/GBbi6YnlN5nhaKIFkT8oFsscUKgDJYxfwfS6QsQ==", "dev": true }, + "get-stdin": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-5.0.1.tgz", + "integrity": "sha512-jZV7n6jGE3Gt7fgSTJoz91Ak5MuTLwMwkoYdjxuJ/AmjIsE1UC03y/IWkZCQGEvVNS9qoRNwy5BCqxImv0FVeA==", + "dev": true + }, "get-stream": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz", @@ -62516,6 +62831,12 @@ } } }, + "glur": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/glur/-/glur-1.1.2.tgz", + "integrity": "sha512-l+8esYHTKOx2G/Aao4lEQ0bnHWg4fWtJbVoZZT9Knxi01pB8C80BR85nONLFwkkQoFRCmXY+BUcGZN3yZ2QsRA==", + "dev": true + }, "gopd": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz", @@ -65742,6 +66063,79 @@ } } }, + "jest-image-snapshot": { + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/jest-image-snapshot/-/jest-image-snapshot-6.2.0.tgz", + "integrity": "sha512-9mTHBKiiSIZ26csbLmjKyN+SrVypM93S5y+jULCvn6YItgepvcrJIKGNeSyt9d2EZiutOroLs/UjtrWiBzpHbA==", + "dev": true, + "requires": { + "chalk": "^4.0.0", + "get-stdin": "^5.0.1", + "glur": "^1.1.2", + "lodash": "^4.17.4", + "pixelmatch": "^5.1.0", + "pngjs": "^3.4.0", + "rimraf": "^2.6.2", + "ssim.js": "^3.1.1" + }, + "dependencies": { + "ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "requires": { + "color-convert": "^2.0.1" + } + }, + "chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + }, + "color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "requires": { + "color-name": "~1.1.4" + } + }, + "color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true + }, + "has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true + }, + "pngjs": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-3.4.0.tgz", + "integrity": "sha512-NCrCHhWmnQklfH4MtJMRjZ2a8c80qXeMlQMv2uVp9ISJMTt562SbGd6n2oq0PaPgKm7Z6pL9E2UlLIhC+SHL3w==", + "dev": true + }, + "supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "requires": { + "has-flag": "^4.0.0" + } + } + } + }, "jest-leak-detector": { "version": "29.6.2", "resolved": "https://registry.npmjs.org/jest-leak-detector/-/jest-leak-detector-29.6.2.tgz", @@ -67087,6 +67481,12 @@ "integrity": "sha512-OYTthRfSh55WOItVqwpefPtNt2VdKsq5AnAK6apdtR6yCH8pr0CmSr710J0Mf+WdQy7K/OzMy7K2MgAfdQURDw==", "dev": true }, + "just-extend": { + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/just-extend/-/just-extend-6.2.0.tgz", + "integrity": "sha512-cYofQu2Xpom82S6qD778jBDpwvvy39s1l/hrYij2u9AMdQcGRpaBu6kY4mVhuno5kJVi1DAz4aiphA2WI1/OAw==", + "dev": true + }, "jwa": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/jwa/-/jwa-2.0.0.tgz", @@ -69366,6 +69766,14 @@ "use-sync-external-store": "1.2.0" }, "dependencies": { + "@swc/helpers": { + "version": "0.4.11", + "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.4.11.tgz", + "integrity": "sha512-rEUrBSGIoSFuYxwBYtlUFMlE2CwGhmW+w9355/5oduSw8e5h2+Tj4UrAGNNgP9915++wj5vkQo0UuOBqOAq4nw==", + "requires": { + "tslib": "^2.4.0" + } + }, "postcss": { "version": "8.4.14", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.14.tgz", @@ -74887,6 +75295,12 @@ "tweetnacl": "~0.14.0" } }, + "ssim.js": { + "version": "3.5.0", + "resolved": "https://registry.npmjs.org/ssim.js/-/ssim.js-3.5.0.tgz", + "integrity": "sha512-Aj6Jl2z6oDmgYFFbQqK7fght19bXdOxY7Tj03nF+03M9gCBAjeIiO8/PlEGMfKDwYpw4q6iBqVq2YuREorGg/g==", + "dev": true + }, "ssri": { "version": "9.0.1", "resolved": "https://registry.npmjs.org/ssri/-/ssri-9.0.1.tgz", @@ -75306,6 +75720,13 @@ "upper-case": "^1.1.1" } }, + "swc-loader": { + "version": "0.2.3", + "resolved": "https://registry.npmjs.org/swc-loader/-/swc-loader-0.2.3.tgz", + "integrity": "sha512-D1p6XXURfSPleZZA/Lipb3A8pZ17fP4NObZvFCDjK/OKljroqDpPmsBdTraWhVBqUNpcWBQY1imWdoPScRlQ7A==", + "dev": true, + "requires": {} + }, "symbol-observable": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz", diff --git a/package.json b/package.json index e5400c1dbe..56a55b28ee 100644 --- a/package.json +++ b/package.json @@ -65,6 +65,8 @@ "@patternfly/react-core": "^5.0.0", "@patternfly/react-icons": "^5.0.0", "@patternfly/react-table": "^5.0.0", + "@simonsmith/cypress-image-snapshot": "^8.0.2", + "@swc/core": "^1.3.74", "@testing-library/dom": "^8.18.1", "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^14.0.0", @@ -110,6 +112,7 @@ "resolve-url-loader": "^5.0.0", "sass": "^1.55.0", "style-to-object": "^0.3.0", + "swc-loader": "^0.2.3", "ts-jest": "^29.1.1", "typescript": "^4.8.4", "whatwg-fetch": "^3.6.2" diff --git a/packages/advisor-components/.gitignore b/packages/advisor-components/.gitignore index cc2257b939..0fe05c9743 100644 --- a/packages/advisor-components/.gitignore +++ b/packages/advisor-components/.gitignore @@ -24,6 +24,7 @@ !cypress !cypress/* !.eslintrc +!cypress.config.js # Incremental ts info tsconfig.tsbuildinfo diff --git a/packages/advisor-components/README.md b/packages/advisor-components/README.md index 0c4f33530a..38cd525464 100644 --- a/packages/advisor-components/README.md +++ b/packages/advisor-components/README.md @@ -20,12 +20,12 @@ This package is dependent on [@redhat-cloud-services/frontend-components](https: Run cypress component tests in terminal: ```bash -npx cypress run-ct +npx cypress run --component ``` Run cypress components tests in the interactive (window) mode: ```bash -npx cypress open-ct +npx cypress open --component ``` ## Documentation Links diff --git a/packages/advisor-components/cypress.config.js b/packages/advisor-components/cypress.config.js new file mode 100644 index 0000000000..98b05f9ea7 --- /dev/null +++ b/packages/advisor-components/cypress.config.js @@ -0,0 +1,34 @@ +const { defineConfig } = require('cypress') +const { addMatchImageSnapshotPlugin } = require('@simonsmith/cypress-image-snapshot/plugin'); + +/** @type {import('cypress').defineConfig} */ +module.exports = defineConfig({ + component: { + specPattern: "src/**/*.spec.ct.{js,ts,jsx,tsx}", + viewportHeight: 660, + viewportWidth: 1000, + video: false, + devServer: { + framework: 'react', + bundler: 'webpack', + webpackConfig: require('./cypress/cypress.webpack.config') + }, + setupNodeEvents(on, config) { + addMatchImageSnapshotPlugin(on, config); + on('before:browser:launch', (browser, launchOptions) => { + if (browser.name === 'chrome' && browser.isHeadless) { + launchOptions.args.push('--window-size=1280,720'); + + // force screen to be non-retina + launchOptions.args.push('--force-device-scale-factor=1'); + } + + if (browser.name === 'electron' && browser.isHeadless) { + // fullPage screenshot size is 1280x720 + launchOptions.preferences.width = 1280; + launchOptions.preferences.height = 720; + } + }); + }, + } +}) diff --git a/packages/advisor-components/cypress.json b/packages/advisor-components/cypress.json deleted file mode 100644 index b4a81e524e..0000000000 --- a/packages/advisor-components/cypress.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "component": { - "componentFolder": "src/", - "testFiles": "**/*.spec.ct.{js,ts,jsx,tsx}", - "viewportHeight": 660, - "viewportWidth": 1000 - }, - "video": false -} diff --git a/packages/advisor-components/cypress/cypress.webpack.config.js b/packages/advisor-components/cypress/cypress.webpack.config.js index 1bcf9de240..6019761260 100644 --- a/packages/advisor-components/cypress/cypress.webpack.config.js +++ b/packages/advisor-components/cypress/cypress.webpack.config.js @@ -1,29 +1,62 @@ +/* eslint-disable @typescript-eslint/no-var-requires */ const path = require('path'); +const { createJoinFunction, createJoinImplementation, asGenerator, defaultJoinGenerator } = require('resolve-url-loader'); +const MiniCssExtractPlugin = require('mini-css-extract-plugin'); + +// call default generator then pair different variations of uri with each base +const myGenerator = asGenerator((item, ...rest) => { + const defaultTuples = [...defaultJoinGenerator(item, ...rest)]; + if (item.uri.includes('./assets')) { + return defaultTuples.map(([base]) => { + if (base.includes('@patternfly/patternfly')) { + return [base, path.relative(base, path.resolve(__dirname, '../node_modules/@patternfly/patternfly', item.uri))]; + } + }); + } + return defaultTuples; +}); module.exports = { - entry: '../src/index.ts', module: { rules: [ { - test: /\.tsx?$/, - use: 'ts-loader', - exclude: /node_modules/, - }, - { - test: /\.jsx?$/, + test: /\.(js|ts)x?$/, exclude: /node_modules/, use: { - loader: 'babel-loader', - } + loader: 'swc-loader', + options: { + jsc: { + parser: { + syntax: 'typescript', + tsx: true, + }, + }, + }, + }, }, { test: /\.s?[ac]ss$/, - use: ['style-loader', 'css-loader', 'sass-loader'], + use: [ + MiniCssExtractPlugin.loader, + 'css-loader', + { + loader: 'resolve-url-loader', + options: { + join: createJoinFunction('myJoinFn', createJoinImplementation(myGenerator)), + }, + }, + { + loader: 'sass-loader', + options: { + sourceMap: true, + }, + }, + ], }, { - test: /\.(png|svg|jpg|jpeg)/, - type: 'asset/resource' - } + test: /\.(jpe?g|svg|png|gif|ico|eot|ttf|woff2?)(\?v=\d+\.\d+\.\d+)?$/i, + type: 'asset/resource', + }, ], }, resolve: { @@ -37,6 +70,22 @@ module.exports = { }, output: { filename: 'bundle.js', + hashFunction: 'xxhash64', path: path.resolve(__dirname, 'dist'), }, + cache: { + type: 'filesystem', + buildDependencies: { + config: [__filename], + }, + cacheDirectory: path.resolve(__dirname, '../.cypress-cache'), + }, + stats: { + errorDetails: true, + }, + plugins: [ + new MiniCssExtractPlugin({ + filename: '[name].[fullhash].css', + }), + ], }; diff --git a/packages/advisor-components/cypress/snapshots/src/ReportDetails/ReportDetails.spec.ct.js/report details kba loaded -- renders component and matches screenshot.snap.png b/packages/advisor-components/cypress/snapshots/src/ReportDetails/ReportDetails.spec.ct.js/report details kba loaded -- renders component and matches screenshot.snap.png new file mode 100644 index 0000000000..eb38b6639f Binary files /dev/null and b/packages/advisor-components/cypress/snapshots/src/ReportDetails/ReportDetails.spec.ct.js/report details kba loaded -- renders component and matches screenshot.snap.png differ diff --git a/packages/advisor-components/cypress/support/component-index.html b/packages/advisor-components/cypress/support/component-index.html new file mode 100644 index 0000000000..ac6e79fd83 --- /dev/null +++ b/packages/advisor-components/cypress/support/component-index.html @@ -0,0 +1,12 @@ + + + + + + + Components App + + +
+ + \ No newline at end of file diff --git a/packages/advisor-components/cypress/support/component.js b/packages/advisor-components/cypress/support/component.js new file mode 100644 index 0000000000..7b8f19e24d --- /dev/null +++ b/packages/advisor-components/cypress/support/component.js @@ -0,0 +1,46 @@ +/* eslint-disable @typescript-eslint/no-namespace */ +/* eslint-disable @typescript-eslint/no-var-requires */ +/* eslint-disable prettier/prettier */ +// *********************************************************** +// This example support/component.ts is processed and +// loaded automatically before your test files. +// +// This is a great place to put global configuration and +// behavior that modifies Cypress. +// +// You can change the location of this file or turn off +// automatically serving support files with the +// 'supportFile' configuration option. +// +// You can read more here: +// https://on.cypress.io/configuration +// *********************************************************** + +// Import commands.js using ES2015 syntax: +import './commands' +import '@patternfly/patternfly/patternfly.css'; +import '@patternfly/patternfly/patternfly-addons.css'; + +// Alternatively you can use CommonJS syntax: +// require('./commands') + +import { mount } from 'cypress/react' +const { addMatchImageSnapshotCommand, } = require('@simonsmith/cypress-image-snapshot/command'); + +// configure the matcher to be less precise to adjust between the headless and normal browser rendering differences +addMatchImageSnapshotCommand({ + failureThreshold: 0.03, // threshold for entire image + failureThresholdType: 'percent', // percent of image or number of pixels + customDiffConfig: { threshold: 0.1 }, // threshold for each pixel + capture: 'viewport', // capture viewport in screenshot +}); + +// Augment the Cypress namespace to include type definitions for +// your custom command. +// Alternatively, can be defined in cypress/support/component.d.ts +// with a at the top of your spec. + +Cypress.Commands.add('mount', mount) + +// Example use: +// cy.mount() diff --git a/packages/advisor-components/cypress/support/index.js b/packages/advisor-components/cypress/support/index.js deleted file mode 100644 index 821160d88f..0000000000 --- a/packages/advisor-components/cypress/support/index.js +++ /dev/null @@ -1,22 +0,0 @@ -// *********************************************************** -// This example support/index.js is processed and -// loaded automatically before your test files. -// -// This is a great place to put global configuration and -// behavior that modifies Cypress. -// -// You can change the location of this file or turn off -// automatically serving support files with the -// 'supportFile' configuration option. -// -// You can read more here: -// https://on.cypress.io/configuration -// *********************************************************** - -// Import commands.js using ES2015 syntax: -import './commands'; -import '@patternfly/patternfly/patternfly.scss'; -import '@frsource/cypress-plugin-visual-regression-diff'; - -// Alternatively you can use CommonJS syntax: -// require('./commands') diff --git a/packages/advisor-components/package.json b/packages/advisor-components/package.json index fc9001bfb2..9bd2388eed 100644 --- a/packages/advisor-components/package.json +++ b/packages/advisor-components/package.json @@ -14,8 +14,8 @@ "build:css": "node ../../scripts/build-styles.js", "build:packages": "node ../../scripts/build-packages.js --forceTypes", "start": "concurrently \"npm run build:esm -- --watch\" \"npm run build:js -- --watch\" \"npm run build:css -- --watch\"", - "test:ct": "cypress run-ct", - "test:openct": "cypress open-ct" + "test:ct": "cypress run --component", + "test:openct": "cypress open --component" }, "repository": { "type": "git", diff --git a/packages/advisor-components/src/ReportDetails/ReportDetails.spec.ct.js b/packages/advisor-components/src/ReportDetails/ReportDetails.spec.ct.js index 8a682b9b02..5d09f0675c 100644 --- a/packages/advisor-components/src/ReportDetails/ReportDetails.spec.ct.js +++ b/packages/advisor-components/src/ReportDetails/ReportDetails.spec.ct.js @@ -18,7 +18,7 @@ describe('report details: kba loaded', () => { }); it('renders component and matches screenshot', () => { - cy.get(ROOT).matchImage({ + cy.get(ROOT).matchImageSnapshot({ maxDiffThreshold: 0.5, }); }); @@ -29,7 +29,7 @@ describe('report details: kba loaded', () => { }); it('each header has an icon', () => { - cy.get('.pf-v5-c-card__header > .ins-c-report-details__icon').should('have.length', HEADERS.length); + cy.get('.pf-v5-c-card__header-main > .ins-c-report-details__icon').should('have.length', HEADERS.length); }); it('links have an icon', () => { diff --git a/packages/components/.gitignore b/packages/components/.gitignore index 83be8ee31d..0a7589af2d 100644 --- a/packages/components/.gitignore +++ b/packages/components/.gitignore @@ -20,6 +20,8 @@ !tsconfig.json !pre-publish.js !tsconfig.* +!cypress.config.js +!cypress/support/component.js # Incremental ts info tsconfig.tsbuildinfo diff --git a/packages/components/.npmignore b/packages/components/.npmignore index bac11bec76..d685433004 100644 --- a/packages/components/.npmignore +++ b/packages/components/.npmignore @@ -8,3 +8,5 @@ doc/ config/ tsconfig.json pre-publish.js +.cypress-cache/ +cypress/ diff --git a/packages/components/babel.config.js b/packages/components/babel.config.js index f3679aa9b9..e69de29bb2 100644 --- a/packages/components/babel.config.js +++ b/packages/components/babel.config.js @@ -1,3 +0,0 @@ -module.exports = { - extends: '../../babel.config.js' -}; diff --git a/packages/components/cypress.config.js b/packages/components/cypress.config.js new file mode 100644 index 0000000000..644f8f890b --- /dev/null +++ b/packages/components/cypress.config.js @@ -0,0 +1,16 @@ +const { defineConfig } = require('cypress') + +/** @type {import('cypress').defineConfig} */ +module.exports = defineConfig({ + component: { + specPattern: "src/**/*.spec.ct.{js,ts,jsx,tsx}", + viewportHeight: 660, + viewportWidth: 1000, + video: false, + devServer: { + framework: 'react', + bundler: 'webpack', + webpackConfig: require('./cypress/cypress.webpack.config') + } + } +}) diff --git a/packages/components/cypress.json b/packages/components/cypress.json deleted file mode 100644 index b4a81e524e..0000000000 --- a/packages/components/cypress.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "component": { - "componentFolder": "src/", - "testFiles": "**/*.spec.ct.{js,ts,jsx,tsx}", - "viewportHeight": 660, - "viewportWidth": 1000 - }, - "video": false -} diff --git a/packages/components/cypress/cypress.webpack.config.js b/packages/components/cypress/cypress.webpack.config.js index 43a1ebb3bc..5a03605164 100644 --- a/packages/components/cypress/cypress.webpack.config.js +++ b/packages/components/cypress/cypress.webpack.config.js @@ -1,57 +1,89 @@ +/* eslint-disable @typescript-eslint/no-var-requires */ const path = require('path'); +const { createJoinFunction, createJoinImplementation, asGenerator, defaultJoinGenerator } = require('resolve-url-loader'); +const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const searchIgnoredStyles = require('@redhat-cloud-services/frontend-components-config-utilities/search-ignored-styles'); // call default generator then pair different variations of uri with each base - +const myGenerator = asGenerator((item, ...rest) => { + const defaultTuples = [...defaultJoinGenerator(item, ...rest)]; + if (item.uri.includes('./assets')) { + return defaultTuples.map(([base]) => { + if (base.includes('@patternfly/patternfly')) { + return [base, path.relative(base, path.resolve(__dirname, '../node_modules/@patternfly/patternfly', item.uri))]; + } + }); + } + return defaultTuples; +}); module.exports = { - entry: '../src/index.ts', - resolve: { - ...searchIgnoredStyles(path.resolve(__dirname, '../')), - }, module: { rules: [ { - test: /\.tsx?$/, - use: 'ts-loader', - exclude: /node_modules/ - }, - { - test: /\.jsx?$/, + test: /\.(js|ts)x?$/, exclude: /node_modules/, - use: 'babel-loader', + use: { + loader: 'swc-loader', + options: { + jsc: { + parser: { + syntax: 'typescript', + tsx: true, + }, + }, + }, + }, }, { test: /\.s?[ac]ss$/, use: [ - 'style-loader', + MiniCssExtractPlugin.loader, + 'css-loader', { - loader: 'css-loader', + loader: 'resolve-url-loader', options: { - url :false - } - }, { + join: createJoinFunction('myJoinFn', createJoinImplementation(myGenerator)), + }, + }, + { loader: 'sass-loader', options: { - sourceMap: true - } - } + sourceMap: true, + }, + }, ], }, { test: /\.(jpe?g|svg|png|gif|ico|eot|ttf|woff2?)(\?v=\d+\.\d+\.\d+)?$/i, type: 'asset/resource', }, - ] + ], }, resolve: { - extensions: ['.tsx', '.ts', '.js'] + extensions: ['.tsx', '.ts', '.js'], + alias: { + // ...searchIgnoredStyles(path.resolve(__dirname, '../')), + }, }, output: { filename: 'bundle.js', + hashFunction: 'xxhash64', path: path.resolve(__dirname, 'dist'), }, + cache: { + type: 'filesystem', + buildDependencies: { + config: [__filename], + }, + cacheDirectory: path.resolve(__dirname, '../.cypress-cache'), + }, stats: { - errorDetails: true - } + errorDetails: true, + }, + plugins: [ + new MiniCssExtractPlugin({ + filename: '[name].[fullhash].css', + }), + ], }; diff --git a/packages/components/cypress/plugins/index.js b/packages/components/cypress/plugins/index.js index 05d0cb7387..e69de29bb2 100644 --- a/packages/components/cypress/plugins/index.js +++ b/packages/components/cypress/plugins/index.js @@ -1,30 +0,0 @@ -/// -// *********************************************************** -// This example plugins/index.js can be used to load plugins -// -// You can change the location of this file or turn off loading -// the plugins file with the 'pluginsFile' configuration option. -// -// You can read more here: -// https://on.cypress.io/plugins-guide -// *********************************************************** - -// This function is called when a project is opened or re-opened (e.g. due to -// the project's config changing) - -/** - * @type {Cypress.PluginConfig} - */ -// eslint-disable-next-line no-unused-vars -module.exports = (on, config) => { - // `on` is used to hook into various events Cypress emits - // `config` is the resolved Cypress config - if (config.testingType === 'component') { - const { startDevServer } = require('@cypress/webpack-dev-server'); - - // Your project's Webpack configuration - const webpackConfig = require('../cypress.webpack.config.js') - - on('dev-server:start', (options) => startDevServer({options, webpackConfig})); - } -} diff --git a/packages/components/cypress/support/index.js b/packages/components/cypress/support/index.js deleted file mode 100644 index 688de3ca73..0000000000 --- a/packages/components/cypress/support/index.js +++ /dev/null @@ -1,21 +0,0 @@ -// *********************************************************** -// This example support/index.js is processed and -// loaded automatically before your test files. -// -// This is a great place to put global configuration and -// behavior that modifies Cypress. -// -// You can change the location of this file or turn off -// automatically serving support files with the -// 'supportFile' configuration option. -// -// You can read more here: -// https://on.cypress.io/configuration -// *********************************************************** - -// Import commands.js using ES2015 syntax: -import './commands' -import '@patternfly/patternfly/patternfly.css'; - -// Alternatively you can use CommonJS syntax: -// require('./commands') diff --git a/packages/components/package.json b/packages/components/package.json index ec7bbd4745..8ea39a7112 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -19,8 +19,8 @@ "start": "concurrently \"npm run build:esm -- --watch\" \"npm run build:js -- --watch\" \"npm run build:css -- --watch\" \"npm run build:packages\"", "build:esm": "tsc --module es2015 --target es5", "build:js": "tsc -p tsconfig.cjs.json", - "test:ct": "cypress run-ct", - "test:openct": "cypress open-ct", + "test:ct": "cypress run --component", + "test:openct": "cypress open --component", "transform:css": "node ../../scripts/transform-scss.js" }, "repository": { @@ -54,7 +54,7 @@ "@redhat-cloud-services/types": "^0.0.24" }, "devDependencies": { - "@patternfly/patternfly": "^4.217.0", + "@patternfly/patternfly": "^5.0.0", "node-sass-package-importer": "^5.3.2", "@types/react": "^18.0.0", "@cypress/webpack-dev-server": "^1.8.4", diff --git a/packages/components/src/Breadcrumbs/Breadcrumbs.spec.ct.js b/packages/components/src/Breadcrumbs/Breadcrumbs.spec.ct.js index 79df702418..0211456e06 100644 --- a/packages/components/src/Breadcrumbs/Breadcrumbs.spec.ct.js +++ b/packages/components/src/Breadcrumbs/Breadcrumbs.spec.ct.js @@ -1,5 +1,4 @@ import React from 'react'; -import { mount } from '@cypress/react'; import { Breadcrumbs } from '..'; @@ -10,18 +9,18 @@ describe('Breadcrumbs component', () => { ]; it('renders without any items', () => { - mount(); + cy.mount(); cy.get('.ins-c-breadcrumbs'); }); it('renders multiple items correctly', () => { - mount(); + cy.mount(); cy.get('.pf-v5-c-breadcrumb__list').children().should('have.length', 3); }); it('fires callback when an item is clicked', () => { const onNavigateSpy = cy.spy().as('onNavigateSpy'); - mount(); + cy.mount(); cy.get('.pf-v5-c-breadcrumb__list > li[data-key="1"] > a').click(); cy.get('@onNavigateSpy').should('have.been.calledWithMatch', Cypress.sinon.match.object, 'second', 1); }); diff --git a/packages/components/src/BulkSelect/BulkSelect.spec.ct.js b/packages/components/src/BulkSelect/BulkSelect.spec.ct.js index 42cc1a4a44..1de19780b6 100644 --- a/packages/components/src/BulkSelect/BulkSelect.spec.ct.js +++ b/packages/components/src/BulkSelect/BulkSelect.spec.ct.js @@ -1,5 +1,4 @@ import React from 'react'; -import { mount } from '@cypress/react'; import { BulkSelect } from '..'; @@ -20,35 +19,36 @@ describe('BulkSelect component', () => { }; it('renders checked component without data', () => { - mount(); + cy.mount(); cy.get('.ins-c-bulk-select').find('>input').should('be.checked'); }); it('renders component with data', () => { - mount(); - cy.get('#toggle-checkbox-text').should('contain.text', '100'); - cy.get('.pf-v5-c-dropdown__toggle-button').click(); - cy.get('.pf-v5-c-dropdown__menu').find('>li>button').should('have.length', 2); + cy.mount(); + cy.get('#toggle-checkbox').should('contain.text', '100'); + cy.get('.pf-v5-c-menu-toggle').click(); + // PF has one extra hidden button element + cy.get('.pf-v5-c-menu__list').find('>li>button').should('have.length', 3); }); it('cannot be expanded or checked when disabled', () => { - mount(); - cy.get('.pf-v5-c-dropdown__toggle-button').click({ force: true }); - cy.get('.pf-v5-c-dropdown__menu').should('not.exist'); - cy.get('#toggle-checkbox').check({ force: true }); - cy.get('#toggle-checkbox').should('not.be.checked'); + cy.mount(); + cy.get('.pf-v5-c-menu-toggle').click({ force: true }); + cy.get('.pf-v5-c-menu__list').should('not.exist'); + cy.get('input[name="toggle-checkbox"]').check({ force: true }); + cy.get('input[name="toggle-checkbox"]').should('not.be.checked'); }); it('buttons (do not) respond to being clicked', () => { config.items[0].onClick = cy.spy().as('enabledSpy'); config.items[1].onClick = cy.spy().as('disabledSpy'); config.onClick = cy.spy().as('checkboxSpy'); - mount(); - cy.get('.pf-v5-c-dropdown__toggle-button').click(); - cy.get('.pf-v5-c-dropdown__menu').find('>li>button').eq(0).click(); - cy.get('.pf-v5-c-dropdown__toggle-button').click(); - cy.get('.pf-v5-c-dropdown__menu').find('>li>button').eq(1).click({ force: true }); - cy.get('#toggle-checkbox').check(); + cy.mount(); + cy.get('.pf-v5-c-menu-toggle').click(); + cy.get('.pf-v5-c-menu__list').find('>li>button').eq(1).click(); + cy.get('.pf-v5-c-menu-toggle').click(); + cy.get('.pf-v5-c-menu__list').find('>li>button').eq(2).click({ force: true }); + cy.get('input[name="toggle-checkbox"]').check(); cy.get('@enabledSpy').should('have.been.called'); cy.get('@disabledSpy').should('not.have.been.called'); cy.get('@checkboxSpy').should('have.been.called'); diff --git a/packages/components/src/BulkSelect/BulkSelect.tsx b/packages/components/src/BulkSelect/BulkSelect.tsx index d25605f212..2a1f61264d 100644 --- a/packages/components/src/BulkSelect/BulkSelect.tsx +++ b/packages/components/src/BulkSelect/BulkSelect.tsx @@ -70,7 +70,14 @@ const BulkSelect: React.FunctionComponent = ({ ouiaId={ouiaFinalId} ouiaSafe={ouiaSafe} toggle={(toggleRef) => ( - setIsOpen((prev) => !prev)}> + setIsOpen((prev) => !prev)} + > {hasError ? (