diff --git a/.eslintrc.js b/.eslintrc.js index 64750fcb0..8ebc22793 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -2,20 +2,10 @@ module.exports = { extends: [ '@redhat-cloud-services/eslint-config-redhat-cloud-services', 'plugin:cypress/recommended', + 'plugin:testing-library/react', + 'plugin:jest-dom/recommended', ], globals: { - insights: 'readonly', - shallow: 'readonly', - render: 'readonly', - mount: 'readonly', IS_DEV: 'readonly', }, - rules: { - 'sort-imports': [ - 'error', - { - ignoreDeclarationSort: true, - }, - ], - }, }; diff --git a/config/setupTests.js b/config/setupTests.js index c304b0552..171ad2339 100644 --- a/config/setupTests.js +++ b/config/setupTests.js @@ -1,20 +1,3 @@ -/* eslint-disable camelcase */ -import { configure, mount, render, shallow } from 'enzyme'; -import Adapter from '@wojtekmaj/enzyme-adapter-react-17'; -import React from 'react'; -import 'whatwg-fetch'; -jest.mock('react', () => ({ - ...jest.requireActual('react'), - useLayoutEffect: jest.requireActual('react').useEffect, -})); - -jest.mock('react-router-dom', () => ({ - ...jest.requireActual('react-router-dom'), - useParams: () => ({ - inventoryId: '07c86de4-dadd-4681-8e6c-fe0baaaef479', - }), -})); - jest.mock('@redhat-cloud-services/frontend-components/useChrome', () => ({ __esModule: true, default: () => ({ @@ -47,8 +30,6 @@ jest.mock('@redhat-cloud-services/frontend-components/useChrome', () => ({ }), })); -configure({ adapter: new Adapter() }); - global.insights = { chrome: { auth: { @@ -77,8 +58,4 @@ global.insights = { }, }; -global.shallow = shallow; -global.render = render; -global.mount = mount; -global.React = React; global.IS_DEV = true; diff --git a/package-lock.json b/package-lock.json index abd151f3a..e528b4fad 100644 --- a/package-lock.json +++ b/package-lock.json @@ -59,11 +59,10 @@ "@semantic-release/changelog": "^6.0.1", "@semantic-release/git": "^10.0.1", "@stoplight/prism-cli": "^4.10.5", - "@testing-library/jest-dom": "^5.16.5", - "@testing-library/react": "^12.1.2", - "@testing-library/react-hooks": "^7.0.2", + "@testing-library/jest-dom": "^5.17.0", + "@testing-library/react": "^12.1.5", + "@testing-library/react-hooks": "^8.0.1", "@testing-library/user-event": "^14.5.1", - "@wojtekmaj/enzyme-adapter-react-17": "^0.6.5", "abortcontroller-polyfill": "^1.7.3", "axios-mock-adapter": "^1.20.0", "babel-eslint": "^10.1.0", @@ -71,11 +70,11 @@ "babel-plugin-istanbul": "^6.1.1", "babel-plugin-transform-imports": "^2.0.0", "cypress": "^11.2.0", - "enzyme": "^3.11.0", - "enzyme-to-json": "^3.6.2", "eslint": "^8.43.0", "eslint-config-recommended": "^4.1.0", "eslint-plugin-cypress": "^2.12.1", + "eslint-plugin-jest-dom": "^5.1.0", + "eslint-plugin-testing-library": "^6.0.1", "fetch-mock": "^9.11.0", "husky": "^8.0.3", "identity-obj-proxy": "^3.0.0", @@ -6038,9 +6037,9 @@ } }, "node_modules/@testing-library/jest-dom": { - "version": "5.16.5", - "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.16.5.tgz", - "integrity": "sha512-N5ixQ2qKpi5OLYfwQmUb/5mSV9LneAcaUfp32pn4yCnpb8r/Yz0pXFPck21dIicKmi+ta5WRAknkZCfA8refMA==", + "version": "5.17.0", + "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.17.0.tgz", + "integrity": "sha512-ynmNeT7asXyH3aSVv4vvX4Rb+0qjOhdNHnO/3vuZNqPmhDpV/+rCSGwQ7bLcmU2cJ4dvoheIO85LQj0IbJHEtg==", "dev": true, "dependencies": { "@adobe/css-tools": "^4.0.1", @@ -6136,43 +6135,45 @@ } }, "node_modules/@testing-library/react": { - "version": "12.1.2", - "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-12.1.2.tgz", - "integrity": "sha512-ihQiEOklNyHIpo2Y8FREkyD1QAea054U0MVbwH1m8N9TxeFz+KoJ9LkqoKqJlzx2JDm56DVwaJ1r36JYxZM05g==", + "version": "12.1.5", + "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-12.1.5.tgz", + "integrity": "sha512-OfTXCJUFgjd/digLUuPxa0+/3ZxsQmE7ub9kcbW/wi96Bh3o/p5vrETcBGfP17NWPGqeYYl5LTRpwyGoMC4ysg==", "dev": true, "dependencies": { "@babel/runtime": "^7.12.5", - "@testing-library/dom": "^8.0.0" + "@testing-library/dom": "^8.0.0", + "@types/react-dom": "<18.0.0" }, "engines": { "node": ">=12" }, "peerDependencies": { - "react": "*", - "react-dom": "*" + "react": "<18.0.0", + "react-dom": "<18.0.0" } }, "node_modules/@testing-library/react-hooks": { - "version": "7.0.2", - "resolved": "https://registry.npmjs.org/@testing-library/react-hooks/-/react-hooks-7.0.2.tgz", - "integrity": "sha512-dYxpz8u9m4q1TuzfcUApqi8iFfR6R0FaMbr2hjZJy1uC8z+bO/K4v8Gs9eogGKYQop7QsrBTFkv/BCF7MzD2Cg==", + "version": "8.0.1", + "resolved": "https://registry.npmjs.org/@testing-library/react-hooks/-/react-hooks-8.0.1.tgz", + "integrity": "sha512-Aqhl2IVmLt8IovEVarNDFuJDVWVvhnr9/GCU6UUnrYXwgDFF9h2L2o2P9KBni1AST5sT6riAyoukFLyjQUgD/g==", "dev": true, "dependencies": { "@babel/runtime": "^7.12.5", - "@types/react": ">=16.9.0", - "@types/react-dom": ">=16.9.0", - "@types/react-test-renderer": ">=16.9.0", "react-error-boundary": "^3.1.0" }, "engines": { "node": ">=12" }, "peerDependencies": { - "react": ">=16.9.0", - "react-dom": ">=16.9.0", - "react-test-renderer": ">=16.9.0" + "@types/react": "^16.9.0 || ^17.0.0", + "react": "^16.9.0 || ^17.0.0", + "react-dom": "^16.9.0 || ^17.0.0", + "react-test-renderer": "^16.9.0 || ^17.0.0" }, "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, "react-dom": { "optional": true }, @@ -6293,15 +6294,6 @@ "@types/node": "*" } }, - "node_modules/@types/cheerio": { - "version": "0.22.30", - "resolved": "https://registry.npmjs.org/@types/cheerio/-/cheerio-0.22.30.tgz", - "integrity": "sha512-t7ZVArWZlq3dFa9Yt33qFBQIK4CQd1Q3UJp0V+UhP6vgLWLM6Qug7vZuRSGXg45zXeB1Fm5X2vmBkEX58LV2Tw==", - "dev": true, - "dependencies": { - "@types/node": "*" - } - }, "node_modules/@types/connect": { "version": "3.4.35", "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.35.tgz", @@ -6790,15 +6782,6 @@ "redux": "^4.0.0" } }, - "node_modules/@types/react-test-renderer": { - "version": "17.0.1", - "resolved": "https://registry.npmjs.org/@types/react-test-renderer/-/react-test-renderer-17.0.1.tgz", - "integrity": "sha512-3Fi2O6Zzq/f3QR9dRnlnHso9bMl7weKCviFmfF6B4LS1Uat6Hkm15k0ZAQuDz+UBq6B3+g+NM6IT2nr5QgPzCw==", - "dev": true, - "dependencies": { - "@types/react": "*" - } - }, "node_modules/@types/retry": { "version": "0.12.0", "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.0.tgz", @@ -6810,6 +6793,12 @@ "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz", "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==" }, + "node_modules/@types/semver": { + "version": "7.5.2", + "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.2.tgz", + "integrity": "sha512-7aqorHYgdNO4DM36stTiGO3DvKoex9TQRwsJU6vMaFGyqpBA1MNZkz+PG3gaNUPpTAOYhT1WR7M1JyA3fbS9Cw==", + "dev": true + }, "node_modules/@types/serve-index": { "version": "1.9.1", "resolved": "https://registry.npmjs.org/@types/serve-index/-/serve-index-1.9.1.tgz", @@ -6990,6 +6979,147 @@ "@types/node": "*" } }, + "node_modules/@typescript-eslint/scope-manager": { + "version": "5.62.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.62.0.tgz", + "integrity": "sha512-VXuvVvZeQCQb5Zgf4HAxc04q5j+WrNAtNh9OwCsCgpKqESMTu3tF/jhZ3xG6T4NZwWl65Bg8KuS2uEvhSfLl0w==", + "dev": true, + "dependencies": { + "@typescript-eslint/types": "5.62.0", + "@typescript-eslint/visitor-keys": "5.62.0" + }, + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + } + }, + "node_modules/@typescript-eslint/types": { + "version": "5.62.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.62.0.tgz", + "integrity": "sha512-87NVngcbVXUahrRTqIK27gD2t5Cu1yuCXxbLcFtCzZGlfyVWWh8mLHkoxzjsB6DDNnvdL+fW8MiwPEJyGJQDgQ==", + "dev": true, + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + } + }, + "node_modules/@typescript-eslint/typescript-estree": { + "version": "5.62.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.62.0.tgz", + "integrity": "sha512-CmcQ6uY7b9y694lKdRB8FEel7JbU/40iSAPomu++SjLMntB+2Leay2LO6i8VnJk58MtE9/nQSFIH6jpyRWyYzA==", + "dev": true, + "dependencies": { + "@typescript-eslint/types": "5.62.0", + "@typescript-eslint/visitor-keys": "5.62.0", + "debug": "^4.3.4", + "globby": "^11.1.0", + "is-glob": "^4.0.3", + "semver": "^7.3.7", + "tsutils": "^3.21.0" + }, + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } + } + }, + "node_modules/@typescript-eslint/typescript-estree/node_modules/array-union": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz", + "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/@typescript-eslint/typescript-estree/node_modules/globby": { + "version": "11.1.0", + "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz", + "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==", + "dev": true, + "dependencies": { + "array-union": "^2.1.0", + "dir-glob": "^3.0.1", + "fast-glob": "^3.2.9", + "ignore": "^5.2.0", + "merge2": "^1.4.1", + "slash": "^3.0.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/@typescript-eslint/utils": { + "version": "5.62.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.62.0.tgz", + "integrity": "sha512-n8oxjeb5aIbPFEtmQxQYOLI0i9n5ySBEY/ZEHHZqKQSFnxio1rv6dthascc9dLuwrL0RC5mPCxB7vnAVGAYWAQ==", + "dev": true, + "dependencies": { + "@eslint-community/eslint-utils": "^4.2.0", + "@types/json-schema": "^7.0.9", + "@types/semver": "^7.3.12", + "@typescript-eslint/scope-manager": "5.62.0", + "@typescript-eslint/types": "5.62.0", + "@typescript-eslint/typescript-estree": "5.62.0", + "eslint-scope": "^5.1.1", + "semver": "^7.3.7" + }, + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + }, + "peerDependencies": { + "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0" + } + }, + "node_modules/@typescript-eslint/visitor-keys": { + "version": "5.62.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.62.0.tgz", + "integrity": "sha512-07ny+LHRzQXepkGg6w0mFY41fVUNBrL2Roj/++7V1txKugfjm/Ci/qSND03r2RhlJhJYMcTn9AhhSSqQp0Ysyw==", + "dev": true, + "dependencies": { + "@typescript-eslint/types": "5.62.0", + "eslint-visitor-keys": "^3.3.0" + }, + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + } + }, + "node_modules/@typescript-eslint/visitor-keys/node_modules/eslint-visitor-keys": { + "version": "3.4.3", + "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz", + "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==", + "dev": true, + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + }, + "funding": { + "url": "https://opencollective.com/eslint" + } + }, "node_modules/@unleash/proxy-client-react": { "version": "3.5.0", "resolved": "https://registry.npmjs.org/@unleash/proxy-client-react/-/proxy-client-react-3.5.0.tgz", @@ -7173,43 +7303,6 @@ } } }, - "node_modules/@wojtekmaj/enzyme-adapter-react-17": { - "version": "0.6.5", - "resolved": "https://registry.npmjs.org/@wojtekmaj/enzyme-adapter-react-17/-/enzyme-adapter-react-17-0.6.5.tgz", - "integrity": "sha512-ChIObUiXXYUiqzXPqOai+p6KF5dlbItpDDYsftUOQiAiygbMDlLeJIjynC6ZrJIa2U2MpRp4YJmtR2GQyIHjgA==", - "dev": true, - "dependencies": { - "@wojtekmaj/enzyme-adapter-utils": "^0.1.1", - "enzyme-shallow-equal": "^1.0.0", - "has": "^1.0.0", - "object.assign": "^4.1.0", - "object.values": "^1.1.0", - "prop-types": "^15.7.0", - "react-is": "^17.0.2", - "react-test-renderer": "^17.0.0" - }, - "peerDependencies": { - "enzyme": "^3.0.0", - "react": "^17.0.0-0", - "react-dom": "^17.0.0-0" - } - }, - "node_modules/@wojtekmaj/enzyme-adapter-utils": { - "version": "0.1.1", - "resolved": "https://registry.npmjs.org/@wojtekmaj/enzyme-adapter-utils/-/enzyme-adapter-utils-0.1.1.tgz", - "integrity": "sha512-bNPWtN/d8huKOkC6j1E3EkSamnRrHHT7YuR6f9JppAQqtoAm3v4/vERe4J14jQKmHLCyEBHXrlgb7H6l817hVg==", - "dev": true, - "dependencies": { - "function.prototype.name": "^1.1.0", - "has": "^1.0.0", - "object.assign": "^4.1.0", - "object.fromentries": "^2.0.0", - "prop-types": "^15.7.0" - }, - "peerDependencies": { - "react": "^17.0.0-0" - } - }, "node_modules/@xtuc/ieee754": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz", @@ -7595,25 +7688,6 @@ "node": ">=0.10.0" } }, - "node_modules/array.prototype.filter": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/array.prototype.filter/-/array.prototype.filter-1.0.0.tgz", - "integrity": "sha512-TfO1gz+tLm+Bswq0FBOXPqAchtCr2Rn48T8dLJoRFl8NoEosjZmzptmuo1X8aZBzZcqsR1W8U761tjACJtngTQ==", - "dev": true, - "dependencies": { - "call-bind": "^1.0.2", - "define-properties": "^1.1.3", - "es-abstract": "^1.18.0", - "es-array-method-boxes-properly": "^1.0.0", - "is-string": "^1.0.5" - }, - "engines": { - "node": ">= 0.4" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, "node_modules/array.prototype.flat": { "version": "1.3.1", "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.1.tgz", @@ -8840,43 +8914,6 @@ "node": ">= 0.8.0" } }, - "node_modules/cheerio": { - "version": "1.0.0-rc.10", - "resolved": "https://registry.npmjs.org/cheerio/-/cheerio-1.0.0-rc.10.tgz", - "integrity": "sha512-g0J0q/O6mW8z5zxQ3A8E8J1hUgp4SMOvEoW/x84OwyHKe/Zccz83PVT4y5Crcr530FV6NgmKI1qvGTKVl9XXVw==", - "dev": true, - "dependencies": { - "cheerio-select": "^1.5.0", - "dom-serializer": "^1.3.2", - "domhandler": "^4.2.0", - "htmlparser2": "^6.1.0", - "parse5": "^6.0.1", - "parse5-htmlparser2-tree-adapter": "^6.0.1", - "tslib": "^2.2.0" - }, - "engines": { - "node": ">= 6" - }, - "funding": { - "url": "https://github.com/cheeriojs/cheerio?sponsor=1" - } - }, - "node_modules/cheerio-select": { - "version": "1.5.0", - "resolved": "https://registry.npmjs.org/cheerio-select/-/cheerio-select-1.5.0.tgz", - "integrity": "sha512-qocaHPv5ypefh6YNxvnbABM07KMxExbtbfuJoIie3iZXX1ERwYmJcIiRrr9H05ucQP1k28dav8rpdDgjQd8drg==", - "dev": true, - "dependencies": { - "css-select": "^4.1.3", - "css-what": "^5.0.1", - "domelementtype": "^2.2.0", - "domhandler": "^4.2.0", - "domutils": "^2.7.0" - }, - "funding": { - "url": "https://github.com/sponsors/fb55" - } - }, "node_modules/chokidar": { "version": "3.5.3", "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz", @@ -10637,12 +10674,6 @@ "node": ">=8" } }, - "node_modules/discontinuous-range": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/discontinuous-range/-/discontinuous-range-1.0.0.tgz", - "integrity": "sha1-44Mx8IRLukm5qctxx3FYWqsbxlo=", - "dev": true - }, "node_modules/dns-equal": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz", @@ -10978,75 +11009,6 @@ "node": ">=4" } }, - "node_modules/enzyme": { - "version": "3.11.0", - "resolved": "https://registry.npmjs.org/enzyme/-/enzyme-3.11.0.tgz", - "integrity": "sha512-Dw8/Gs4vRjxY6/6i9wU0V+utmQO9kvh9XLnz3LIudviOnVYDEe2ec+0k+NQoMamn1VrjKgCUOWj5jG/5M5M0Qw==", - "dev": true, - "dependencies": { - "array.prototype.flat": "^1.2.3", - "cheerio": "^1.0.0-rc.3", - "enzyme-shallow-equal": "^1.0.1", - "function.prototype.name": "^1.1.2", - "has": "^1.0.3", - "html-element-map": "^1.2.0", - "is-boolean-object": "^1.0.1", - "is-callable": "^1.1.5", - "is-number-object": "^1.0.4", - "is-regex": "^1.0.5", - "is-string": "^1.0.5", - "is-subset": "^0.1.1", - "lodash.escape": "^4.0.1", - "lodash.isequal": "^4.5.0", - "object-inspect": "^1.7.0", - "object-is": "^1.0.2", - "object.assign": "^4.1.0", - "object.entries": "^1.1.1", - "object.values": "^1.1.1", - "raf": "^3.4.1", - "rst-selector-parser": "^2.2.3", - "string.prototype.trim": "^1.2.1" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, - "node_modules/enzyme-shallow-equal": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/enzyme-shallow-equal/-/enzyme-shallow-equal-1.0.4.tgz", - "integrity": "sha512-MttIwB8kKxypwHvRynuC3ahyNc+cFbR8mjVIltnmzQ0uKGqmsfO4bfBuLxb0beLNPhjblUEYvEbsg+VSygvF1Q==", - "dev": true, - "dependencies": { - "has": "^1.0.3", - "object-is": "^1.1.2" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, - "node_modules/enzyme-to-json": { - "version": "3.6.2", - "resolved": "https://registry.npmjs.org/enzyme-to-json/-/enzyme-to-json-3.6.2.tgz", - "integrity": "sha512-Ynm6Z6R6iwQ0g2g1YToz6DWhxVnt8Dy1ijR2zynRKxTyBGA8rCDXU3rs2Qc4OKvUvc2Qoe1bcFK6bnPs20TrTg==", - "dev": true, - "dependencies": { - "@types/cheerio": "^0.22.22", - "lodash": "^4.17.21", - "react-is": "^16.12.0" - }, - "engines": { - "node": ">=6.0.0" - }, - "peerDependencies": { - "enzyme": "^3.4.0" - } - }, - "node_modules/enzyme-to-json/node_modules/react-is": { - "version": "16.13.1", - "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", - "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", - "dev": true - }, "node_modules/errno": { "version": "0.1.8", "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz", @@ -11125,12 +11087,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/es-array-method-boxes-properly": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/es-array-method-boxes-properly/-/es-array-method-boxes-properly-1.0.0.tgz", - "integrity": "sha512-wd6JXUmyHmt8T5a2xreUwKcGPq6f1f+WwIJkijUqiGcJz1qqnZgP6XIK+QyIWU5lT7imeNxUll48bziG+TSYcA==", - "dev": true - }, "node_modules/es-get-iterator": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/es-get-iterator/-/es-get-iterator-1.1.3.tgz", @@ -13662,6 +13618,30 @@ "semver": "bin/semver.js" } }, + "node_modules/eslint-plugin-jest-dom": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/eslint-plugin-jest-dom/-/eslint-plugin-jest-dom-5.1.0.tgz", + "integrity": "sha512-JIXZp+E/h/aGlP/rQc4tuOejiHlZXg65qw8JAJMIJA5VsdjOkss/SYcRSqBrQuEOytEM8JvngUjcz31d1RrCrA==", + "dev": true, + "dependencies": { + "@babel/runtime": "^7.16.3", + "requireindex": "^1.2.0" + }, + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0", + "npm": ">=6", + "yarn": ">=1" + }, + "peerDependencies": { + "@testing-library/dom": "^8.0.0 || ^9.0.0", + "eslint": "^6.8.0 || ^7.0.0 || ^8.0.0" + }, + "peerDependenciesMeta": { + "@testing-library/dom": { + "optional": true + } + } + }, "node_modules/eslint-plugin-prettier": { "version": "3.4.1", "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-3.4.1.tgz", @@ -13765,6 +13745,22 @@ "node": ">=4.0.0" } }, + "node_modules/eslint-plugin-testing-library": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/eslint-plugin-testing-library/-/eslint-plugin-testing-library-6.0.1.tgz", + "integrity": "sha512-CEYtjpcF3hAaQtYsTZqciR7s5z+T0LCMTwJeW+pz6kBnGtc866wAKmhaiK2Gsjc2jWNP7Gt6zhNr2DE1ZW4e+g==", + "dev": true, + "dependencies": { + "@typescript-eslint/utils": "^5.58.0" + }, + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0", + "npm": ">=6" + }, + "peerDependencies": { + "eslint": "^7.5.0 || ^8.0.0" + } + }, "node_modules/eslint-rule-composer": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/eslint-rule-composer/-/eslint-rule-composer-0.3.0.tgz", @@ -15883,19 +15879,6 @@ "safe-buffer": "~5.1.0" } }, - "node_modules/html-element-map": { - "version": "1.3.1", - "resolved": "https://registry.npmjs.org/html-element-map/-/html-element-map-1.3.1.tgz", - "integrity": "sha512-6XMlxrAFX4UEEGxctfFnmrFaaZFNf9i5fNuV5wZ3WWQ4FVaNP1aX1LkX9j2mfEx1NpjeE/rL3nmgEn23GdFmrg==", - "dev": true, - "dependencies": { - "array.prototype.filter": "^1.0.0", - "call-bind": "^1.0.2" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, "node_modules/html-encoding-sniffer": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-2.0.1.tgz", @@ -19734,12 +19717,6 @@ "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168=", "dev": true }, - "node_modules/lodash.escape": { - "version": "4.0.1", - "resolved": "https://registry.npmjs.org/lodash.escape/-/lodash.escape-4.0.1.tgz", - "integrity": "sha1-yQRGkMIeBClL6qUXcS/e0fqI3pg=", - "dev": true - }, "node_modules/lodash.escaperegexp": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/lodash.escaperegexp/-/lodash.escaperegexp-4.1.2.tgz", @@ -20575,12 +20552,6 @@ "node": "*" } }, - "node_modules/moo": { - "version": "0.5.1", - "resolved": "https://registry.npmjs.org/moo/-/moo-0.5.1.tgz", - "integrity": "sha512-I1mnb5xn4fO80BH9BLcF0yLypy2UKl+Cb01Fu0hJRkJjlCRtxZMWkTdAtDd5ZqCOxtCkhmRwyI57vWT+1iZ67w==", - "dev": true - }, "node_modules/ms": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", @@ -20627,34 +20598,6 @@ "integrity": "sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=", "dev": true }, - "node_modules/nearley": { - "version": "2.20.1", - "resolved": "https://registry.npmjs.org/nearley/-/nearley-2.20.1.tgz", - "integrity": "sha512-+Mc8UaAebFzgV+KpI5n7DasuuQCHA89dmwm7JXw3TV43ukfNQ9DnBH3Mdb2g/I4Fdxc26pwimBWvjIw0UAILSQ==", - "dev": true, - "dependencies": { - "commander": "^2.19.0", - "moo": "^0.5.0", - "railroad-diagrams": "^1.0.0", - "randexp": "0.4.6" - }, - "bin": { - "nearley-railroad": "bin/nearley-railroad.js", - "nearley-test": "bin/nearley-test.js", - "nearley-unparse": "bin/nearley-unparse.js", - "nearleyc": "bin/nearleyc.js" - }, - "funding": { - "type": "individual", - "url": "https://nearley.js.org/#give-to-nearley" - } - }, - "node_modules/nearley/node_modules/commander": { - "version": "2.20.3", - "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz", - "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==", - "dev": true - }, "node_modules/negotiator": { "version": "0.6.3", "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz", @@ -24323,15 +24266,6 @@ "integrity": "sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==", "dev": true }, - "node_modules/parse5-htmlparser2-tree-adapter": { - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-6.0.1.tgz", - "integrity": "sha512-qPuWvbLgvDGilKc5BoicRovlT4MtYT6JfJyBOMDsKoiT+GiuP5qyrPCnR9HcPECIJJmZh5jRndyNThnhhb/vlA==", - "dev": true, - "dependencies": { - "parse5": "^6.0.1" - } - }, "node_modules/parseurl": { "version": "1.3.3", "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz", @@ -25435,34 +25369,6 @@ "node": ">=8" } }, - "node_modules/raf": { - "version": "3.4.1", - "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz", - "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==", - "dev": true, - "dependencies": { - "performance-now": "^2.1.0" - } - }, - "node_modules/railroad-diagrams": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/railroad-diagrams/-/railroad-diagrams-1.0.0.tgz", - "integrity": "sha1-635iZ1SN3t+4mcG5Dlc3RVnN234=", - "dev": true - }, - "node_modules/randexp": { - "version": "0.4.6", - "resolved": "https://registry.npmjs.org/randexp/-/randexp-0.4.6.tgz", - "integrity": "sha512-80WNmd9DA0tmZrw9qQa62GPPWfuXJknrmVmLcxvq4uZBdYqb1wYoKTmnlGUchvVWe0XiLupYkBoXVOxz3C8DYQ==", - "dev": true, - "dependencies": { - "discontinuous-range": "1.0.0", - "ret": "~0.1.10" - }, - "engines": { - "node": ">=0.12" - } - }, "node_modules/randombytes": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz", @@ -25717,6 +25623,8 @@ "resolved": "https://registry.npmjs.org/react-shallow-renderer/-/react-shallow-renderer-16.14.1.tgz", "integrity": "sha512-rkIMcQi01/+kxiTE9D3fdS959U1g7gs+/rborw++42m1O9FAQiNI/UNRZExVUoAOprn4umcXf+pFRou8i4zuBg==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "object-assign": "^4.1.1", "react-is": "^16.12.0 || ^17.0.0" @@ -25730,6 +25638,8 @@ "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-17.0.2.tgz", "integrity": "sha512-yaQ9cB89c17PUb0x6UfWRs7kQCorVdHlutU1boVPEsB8IDZH6n9tHxMacc3y0JoXOJUsZb/t/Mb8FUWMKaM7iQ==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "object-assign": "^4.1.1", "react-is": "^17.0.2", @@ -26236,6 +26146,15 @@ "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==", "dev": true }, + "node_modules/requireindex": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/requireindex/-/requireindex-1.2.0.tgz", + "integrity": "sha512-L9jEkOi3ASd9PYit2cwRfyppc9NoABujTP8/5gFcbERmo5jUoAKovIC3fsF17pkTnGsrByysqX+Kxd2OTNI1ww==", + "dev": true, + "engines": { + "node": ">=0.10.5" + } + }, "node_modules/requires-port": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz", @@ -26325,15 +26244,6 @@ "node": ">=8" } }, - "node_modules/ret": { - "version": "0.1.15", - "resolved": "https://registry.npmjs.org/ret/-/ret-0.1.15.tgz", - "integrity": "sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg==", - "dev": true, - "engines": { - "node": ">=0.12" - } - }, "node_modules/retry": { "version": "0.13.1", "resolved": "https://registry.npmjs.org/retry/-/retry-0.13.1.tgz", @@ -26370,16 +26280,6 @@ "rimraf": "bin.js" } }, - "node_modules/rst-selector-parser": { - "version": "2.2.3", - "resolved": "https://registry.npmjs.org/rst-selector-parser/-/rst-selector-parser-2.2.3.tgz", - "integrity": "sha1-gbIw6i/MYGbInjRy3nlChdmwPZE=", - "dev": true, - "dependencies": { - "lodash.flattendeep": "^4.4.0", - "nearley": "^2.7.10" - } - }, "node_modules/run-async": { "version": "2.4.1", "resolved": "https://registry.npmjs.org/run-async/-/run-async-2.4.1.tgz", @@ -28695,6 +28595,27 @@ "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz", "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==" }, + "node_modules/tsutils": { + "version": "3.21.0", + "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz", + "integrity": "sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==", + "dev": true, + "dependencies": { + "tslib": "^1.8.1" + }, + "engines": { + "node": ">= 6" + }, + "peerDependencies": { + "typescript": ">=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta" + } + }, + "node_modules/tsutils/node_modules/tslib": { + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", + "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==", + "dev": true + }, "node_modules/tunnel-agent": { "version": "0.6.0", "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz", diff --git a/package.json b/package.json index 853a96c4d..5b363c0fc 100644 --- a/package.json +++ b/package.json @@ -121,11 +121,10 @@ "@semantic-release/changelog": "^6.0.1", "@semantic-release/git": "^10.0.1", "@stoplight/prism-cli": "^4.10.5", - "@testing-library/jest-dom": "^5.16.5", - "@testing-library/react": "^12.1.2", - "@testing-library/react-hooks": "^7.0.2", + "@testing-library/jest-dom": "^5.17.0", + "@testing-library/react": "^12.1.5", + "@testing-library/react-hooks": "^8.0.1", "@testing-library/user-event": "^14.5.1", - "@wojtekmaj/enzyme-adapter-react-17": "^0.6.5", "abortcontroller-polyfill": "^1.7.3", "axios-mock-adapter": "^1.20.0", "babel-eslint": "^10.1.0", @@ -133,11 +132,11 @@ "babel-plugin-istanbul": "^6.1.1", "babel-plugin-transform-imports": "^2.0.0", "cypress": "^11.2.0", - "enzyme": "^3.11.0", - "enzyme-to-json": "^3.6.2", "eslint": "^8.43.0", "eslint-config-recommended": "^4.1.0", "eslint-plugin-cypress": "^2.12.1", + "eslint-plugin-jest-dom": "^5.1.0", + "eslint-plugin-testing-library": "^6.0.1", "fetch-mock": "^9.11.0", "husky": "^8.0.3", "identity-obj-proxy": "^3.0.0", diff --git a/src/Utilities/DeleteModal.test.js b/src/Utilities/DeleteModal.test.js index e0365e184..ebd09aaff 100644 --- a/src/Utilities/DeleteModal.test.js +++ b/src/Utilities/DeleteModal.test.js @@ -1,48 +1,27 @@ /* eslint-disable camelcase */ import React from 'react'; -import { mount, shallow } from 'enzyme'; -import toJson from 'enzyme-to-json'; import DeleteModal from './DeleteModal'; +import { render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; -describe('EntityTable', () => { +describe('DeleteModal', () => { describe('DOM', () => { - it('should render correctly', () => { - const wrapper = shallow(); - expect(toJson(wrapper)).toMatchSnapshot(); - }); - - it('should render correctly with one system', () => { - const wrapper = shallow( - - ); - expect(toJson(wrapper)).toMatchSnapshot(); - }); - it('should render correctly with one system', () => { - const wrapper = shallow( + const view = render( ); - expect(toJson(wrapper)).toMatchSnapshot(); - }); - it('should render correctly with multiple systems - count 1', () => { - const wrapper = shallow( - + screen.getByText( + /something will be removed from all localhost:5000 applications and services/i ); - expect(toJson(wrapper)).toMatchSnapshot(); + expect(view.baseElement).toMatchSnapshot(); }); - it('should render correctly with multiple systems - count 2', () => { - const wrapper = shallow( + it('should render correctly with multiple systems', () => { + const view = render( { isModalOpen /> ); - expect(toJson(wrapper)).toMatchSnapshot(); + + screen.getByText( + /2 systems will be removed from all localhost:5000 applications and services/i + ); + expect(view.baseElement).toMatchSnapshot(); }); }); describe('API', () => { - it('should NOT call close on X click', () => { - const onClose = jest.fn(); - const wrapper = mount( - - ); - wrapper - .find('.ins-c-inventory__table--remove button') - .first() - .simulate('click'); - expect(onClose).not.toHaveBeenCalled(); + afterEach(() => { + jest.clearAllMocks(); }); - it('should call close on X click', () => { + it('should call close on X click', async () => { const onClose = jest.fn(); - const wrapper = mount( + render( { handleModalToggle={onClose} /> ); - wrapper - .find('.ins-c-inventory__table--remove button') - .first() - .simulate('click'); + + await userEvent.click( + screen.getByRole('button', { + name: /close/i, + }) + ); expect(onClose).toHaveBeenCalled(); }); - it('should call close on cancel click', () => { + it('should call close on cancel click', async () => { const onClose = jest.fn(); - const wrapper = mount( + render( { handleModalToggle={onClose} /> ); - wrapper.find('.pf-c-modal-box__body button').last().simulate('click'); + + await userEvent.click( + screen.getByRole('button', { + name: /cancel/i, + }) + ); expect(onClose).toHaveBeenCalled(); }); - it('should call onConfirm', () => { + it('should call onConfirm', async () => { const onConfirm = jest.fn(); - const wrapper = mount( + render( { onConfirm={onConfirm} /> ); - wrapper - .find('.pf-c-modal-box__body button.pf-m-danger') - .first() - .simulate('click'); - expect(onConfirm).toHaveBeenCalled(); - }); - it('should NOT call onConfirm', () => { - const onConfirm = jest.fn(); - const wrapper = mount( - + await userEvent.click( + screen.getByRole('button', { + name: /remove/i, + }) ); - wrapper - .find('.pf-c-modal-box__body button.pf-m-danger') - .first() - .simulate('click'); - expect(onConfirm).not.toHaveBeenCalled(); + expect(onConfirm).toHaveBeenCalled(); }); }); }); diff --git a/src/Utilities/InsightsDisconnected.js b/src/Utilities/InsightsDisconnected.js index 3e8a3a8f2..6ee73525d 100644 --- a/src/Utilities/InsightsDisconnected.js +++ b/src/Utilities/InsightsDisconnected.js @@ -18,7 +18,10 @@ const InsightsDisconnected = () => ( } > - + diff --git a/src/Utilities/OperatingSystemFormatter.js b/src/Utilities/OperatingSystemFormatter.js index 2a4b63e04..4a076f7b1 100644 --- a/src/Utilities/OperatingSystemFormatter.js +++ b/src/Utilities/OperatingSystemFormatter.js @@ -13,13 +13,17 @@ const OperatingSystemFormatter = ({ operatingSystem }) => { null; return ( - + {operatingSystem.name} {version} ); } - return {operatingSystem?.name || 'Not available'}; + return ( + + {operatingSystem?.name || 'Not available'} + + ); }; OperatingSystemFormatter.propTypes = { diff --git a/src/Utilities/OperatingSystemFormatter.test.js b/src/Utilities/OperatingSystemFormatter.test.js index 8e63a73e8..db14fef1c 100644 --- a/src/Utilities/OperatingSystemFormatter.test.js +++ b/src/Utilities/OperatingSystemFormatter.test.js @@ -1,7 +1,6 @@ -/* eslint-disable camelcase */ +import '@testing-library/jest-dom'; +import { render, screen } from '@testing-library/react'; import React from 'react'; -import { mount } from 'enzyme'; - import OperatingSystemFormatter from './OperatingSystemFormatter'; describe('OperatingSystemFormatter', () => { @@ -14,11 +13,11 @@ describe('OperatingSystemFormatter', () => { minor: 4, }; - const wrapper = mount( - - ); + render(); - expect(wrapper.text()).toEqual('RHEL 7.4'); + expect(screen.getByLabelText('Formatted OS version')).toHaveTextContent( + 'RHEL 7.4' + ); }); it('should render correctly with Centos and version', () => { @@ -28,11 +27,11 @@ describe('OperatingSystemFormatter', () => { minor: 4, }; - const wrapper = mount( - - ); + render(); - expect(wrapper.text()).toEqual('CentOS Linux 7.4'); + expect(screen.getByLabelText('Formatted OS version')).toHaveTextContent( + 'CentOS Linux 7.4' + ); }); it('should render correctly with RHEL and no version', () => { @@ -42,11 +41,11 @@ describe('OperatingSystemFormatter', () => { minor: null, }; - const wrapper = mount( - - ); + render(); - expect(wrapper.text()).toEqual('RHEL '); + expect(screen.getByLabelText('Formatted OS version')).toHaveTextContent( + 'RHEL' + ); }); it('should render correctly with RHEL and minor version set to 0', () => { @@ -56,11 +55,11 @@ describe('OperatingSystemFormatter', () => { minor: 0, }; - const wrapper = mount( - - ); + render(); - expect(wrapper.text()).toEqual('RHEL 7.0'); + expect(screen.getByLabelText('Formatted OS version')).toHaveTextContent( + 'RHEL 7.0' + ); }); it('should render with different system', () => { @@ -68,11 +67,11 @@ describe('OperatingSystemFormatter', () => { name: 'Windows', }; - const wrapper = mount( - - ); + render(); - expect(wrapper.text()).toEqual('Windows'); + expect(screen.getByLabelText('Formatted OS version')).toHaveTextContent( + 'Windows' + ); }); it('should not render OS major minor version with different CentOS type system', () => { @@ -82,11 +81,11 @@ describe('OperatingSystemFormatter', () => { minor: 4, }; - const wrapper = mount( - - ); + render(); - expect(wrapper.text()).toEqual('CentOS Stream'); + expect(screen.getByLabelText('Formatted OS version')).toHaveTextContent( + 'CentOS Stream' + ); }); it('missing name', () => { @@ -94,20 +93,20 @@ describe('OperatingSystemFormatter', () => { name: null, }; - const wrapper = mount( - - ); + render(); - expect(wrapper.text()).toEqual('Not available'); + expect(screen.getByLabelText('Formatted OS version')).toHaveTextContent( + 'Not available' + ); }); it('missing operating system', () => { operatingSystem = {}; - const wrapper = mount( - - ); + render(); - expect(wrapper.text()).toEqual('Not available'); + expect(screen.getByLabelText('Formatted OS version')).toHaveTextContent( + 'Not available' + ); }); }); diff --git a/src/Utilities/TagWithDialog.test.js b/src/Utilities/TagWithDialog.test.js index 3e125a245..790b12c4b 100644 --- a/src/Utilities/TagWithDialog.test.js +++ b/src/Utilities/TagWithDialog.test.js @@ -1,10 +1,11 @@ /* eslint-disable react/display-name */ +import '@testing-library/jest-dom'; +import { render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; import React from 'react'; -import TagWithDialog from './TagWithDialog'; -import { mount } from 'enzyme'; import configureStore from 'redux-mock-store'; import { createPromise as promiseMiddleware } from 'redux-promise-middleware'; -import toJson from 'enzyme-to-json'; +import TagWithDialog from './TagWithDialog'; jest.mock('../store/actions', () => { const actions = jest.requireActual('../store/actions'); @@ -28,30 +29,42 @@ describe('EntityTable', () => { describe('DOM', () => { it('should render with count', () => { const store = mockStore({}); - const wrapper = mount(); + const view = render(); + expect( - toJson(wrapper.find('TagWithDialog').first(), { mode: 'shallow' }) - ).toMatchSnapshot(); + screen.getByRole('button', { + name: '10', + }) + ).toBeVisible(); + expect(view.asFragment()).toMatchSnapshot(); }); }); describe('API', () => { - it('should NOT call actions', () => { + it('should NOT call actions', async () => { const store = mockStore({}); - const wrapper = mount(); - wrapper.find('button').first().simulate('click'); + render(); + + await userEvent.click( + screen.getByRole('button', { + name: '10', + }) + ); const actions = store.getActions(); expect(actions.length).toBe(0); }); - it('should call actions', () => { + it('should call actions', async () => { const store = mockStore({}); - const wrapper = mount( - + render(); + + await userEvent.click( + screen.getByRole('button', { + name: '10', + }) ); - wrapper.find('button').first().simulate('click'); const actions = store.getActions(); - expect(actions.length).toBe(2); + expect(actions.length).toBe(3); }); }); }); diff --git a/src/Utilities/TagsModal.test.js b/src/Utilities/TagsModal.test.js index a60003196..fa5ffb1c4 100644 --- a/src/Utilities/TagsModal.test.js +++ b/src/Utilities/TagsModal.test.js @@ -1,14 +1,14 @@ /* eslint-disable no-import-assign */ +import '@testing-library/jest-dom'; +import { render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import debounce from 'lodash/debounce'; import React from 'react'; -import { mount } from 'enzyme'; +import { Provider } from 'react-redux'; import configureStore from 'redux-mock-store'; import { createPromise as promiseMiddleware } from 'redux-promise-middleware'; -import { Provider } from 'react-redux'; -import toJson from 'enzyme-to-json'; -import TagsModal from './TagsModal'; -import debounce from 'lodash/debounce'; - import * as api from '../api/api'; +import TagsModal from './TagsModal'; jest.mock('lodash/debounce'); describe('TagsModal', () => { @@ -26,15 +26,39 @@ describe('TagsModal', () => { }); describe('DOM', () => { it('should render loading state correctly', () => { - const store = mockStore({}); - const wrapper = mount( + const store = mockStore({ + entities: { + showTagDialog: true, + tagModalLoaded: false, + activeSystemTag: { + tagsLoaded: false, + }, + }, + }); + render( ); + + // TODO: improve skeleton accessibility to query skeleton rows directly + expect(screen.getAllByRole('row')).toHaveLength(11); // including header + expect(screen.getByLabelText('Loading')).toBeVisible(); + expect( + screen.getByRole('columnheader', { + name: /name/i, + }) + ).toBeVisible(); + expect( + screen.getByRole('columnheader', { + name: /value/i, + }) + ).toBeVisible(); expect( - toJson(wrapper.find('TagsModal'), { mode: 'shallow' }) - ).toMatchSnapshot(); + screen.getByRole('columnheader', { + name: /tag source/i, + }) + ).toBeVisible(); }); it('should render activeSystemTag', () => { @@ -56,17 +80,39 @@ describe('TagsModal', () => { }, }, }); - const wrapper = mount( + render( ); + + expect( + screen.getByRole('columnheader', { + name: /name/i, + }) + ).toBeVisible(); expect( - toJson(wrapper.find('TagsModal'), { mode: 'shallow' }) - ).toMatchSnapshot(); + screen.getByRole('columnheader', { + name: /value/i, + }) + ).toBeVisible(); + expect( + screen.getByRole('columnheader', { + name: /tag source/i, + }) + ).toBeVisible(); + + expect(screen.getAllByRole('cell')).toHaveLength(4); + screen + .getAllByRole('cell') + .forEach((cell, index) => + expect(cell).toHaveTextContent( + ['', 'some', 'test', 'something'][index] + ) + ); }); - it('should render alltags', () => { + it('should render all tags', () => { const store = mockStore({ entities: { ...initialState.entities, @@ -91,14 +137,23 @@ describe('TagsModal', () => { ], }, }); - const wrapper = mount( + render( ); + + expect(screen.getByText(/all tags in inventory \(50\)/i)).toBeVisible(); + expect( + screen.getByRole('button', { + name: /apply tags/i, + }) + ).toBeDisabled(); expect( - toJson(wrapper.find('TagsModal'), { mode: 'shallow' }) - ).toMatchSnapshot(); + screen.getByRole('button', { + name: /cancel/i, + }) + ).toBeEnabled(); }); }); @@ -108,7 +163,7 @@ describe('TagsModal', () => { api.getAllTags = jest.fn().mockImplementation(() => Promise.resolve()); }); - it('should NOT call onApply select correct tag', () => { + it('should call onApply select correct tag', async () => { const onApply = jest.fn(); const store = mockStore({ entities: { @@ -134,73 +189,26 @@ describe('TagsModal', () => { ], }, }); - const wrapper = mount( + render( - + ); - wrapper - .find('tbody tr .pf-c-table__check input') - .first() - .simulate('change', { - target: { - value: 'checked', - }, - }); - wrapper - .find('.pf-c-modal-box__footer .pf-c-button.pf-m-primary') - .first() - .simulate('click'); - expect(onApply).not.toHaveBeenCalled(); - }); - it('should call onApply select correct tag', () => { - const onApply = jest.fn(); - const store = mockStore({ - entities: { - ...initialState.entities, - allTagsLoaded: true, - allTagsTotal: 50, - allTagsPagination: { - page: 1, - perPage: 10, - }, - allTags: [ - { - tags: [ - { - tag: { - key: 'some', - value: 'test', - namespace: 'something', - }, - }, - ], - }, - ], - }, - }); - const wrapper = mount( - - - + await userEvent.click( + screen.getByRole('checkbox', { + name: /select row 0/i, + }) ); - wrapper - .find('tbody tr .pf-c-table__check input') - .first() - .simulate('change', { - target: { - value: 'checked', - }, - }); - wrapper - .find('.pf-c-modal-box__footer .pf-c-button.pf-m-primary') - .first() - .simulate('click'); - expect(onApply).toHaveBeenCalled(); + await userEvent.click( + screen.getByRole('button', { + name: /apply tags/i, + }) + ); + expect(onApply).toHaveBeenCalledTimes(1); }); - it('should toggle modal', () => { + it('should toggle modal', async () => { const store = mockStore({ entities: { ...initialState.entities, @@ -225,12 +233,17 @@ describe('TagsModal', () => { ], }, }); - const wrapper = mount( + render( ); - wrapper.find('.pf-c-button.pf-m-plain').first().simulate('click'); + + await userEvent.click( + screen.getByRole('button', { + name: /close/i, + }) + ); const actions = store.getActions(); expect(actions[0]).toMatchObject({ payload: { isOpen: false }, @@ -238,7 +251,7 @@ describe('TagsModal', () => { }); }); - it('should fetch additional tags when all tags shown', () => { + it('should fetch additional tags when all tags shown', async () => { const store = mockStore({ entities: { ...initialState.entities, @@ -263,15 +276,18 @@ describe('TagsModal', () => { ], }, }); - const wrapper = mount( + render( ); - wrapper - .find('.pf-c-pagination__nav button[data-action="next"]') - .first() - .simulate('click'); + + expect( + screen.getAllByRole('button', { name: /go to next page/i }) + ).toHaveLength(2); + await userEvent.click( + screen.getAllByRole('button', { name: /go to next page/i })[0] + ); const actions = store.getActions(); expect(actions[0]).toMatchObject({ type: 'ALL_TAGS_PENDING' }); }); diff --git a/src/Utilities/TestingUtilities.js b/src/Utilities/TestingUtilities.js index 3c7eca98f..e123bde83 100644 --- a/src/Utilities/TestingUtilities.js +++ b/src/Utilities/TestingUtilities.js @@ -1,9 +1,37 @@ +import PropTypes from 'prop-types'; import React from 'react'; -import { MemoryRouter } from 'react-router-dom'; -export const mountWithRouter = (Component, initialEntries) => { - const wrapper = mount( - {Component} +import { Provider } from 'react-redux'; +import { MemoryRouter, Route, Routes } from 'react-router-dom'; +import configureStore from 'redux-mock-store'; + +const mockStore = configureStore(); + +export const TestWrapper = ({ + children, + routerProps = { initialEntries: ['/'] }, + path, + store = mockStore(), +}) => { + return ( + + + {path ? ( + + + + ) : ( + children + )} + + ); +}; - return wrapper; +TestWrapper.propTypes = { + children: PropTypes.any.isRequired, + routerProps: PropTypes.shape({ + initialEntries: PropTypes.arrayOf(PropTypes.string), + }), + path: PropTypes.string, + store: PropTypes.any, }; diff --git a/src/Utilities/__snapshots__/DeleteModal.test.js.snap b/src/Utilities/__snapshots__/DeleteModal.test.js.snap index 97a343b3b..20419e976 100644 --- a/src/Utilities/__snapshots__/DeleteModal.test.js.snap +++ b/src/Utilities/__snapshots__/DeleteModal.test.js.snap @@ -1,500 +1,401 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`EntityTable DOM should render correctly 1`] = ` -} - aria-describedby="" - aria-label="" - aria-labelledby="" - className="ins-c-inventory__table--remove sentry-mask data-hj-suppress" - hasNoBodyWrapper={false} - isOpen={false} - onClose={[Function]} - ouiaId="inventory-delete-modal" - ouiaSafe={true} - showClose={true} - title="Remove from inventory" - titleIconVariant={null} - titleLabel="" - variant="small" +exports[`DeleteModal DOM should render correctly with multiple systems 1`] = ` + - - - - -