diff --git a/superset-frontend/package-lock.json b/superset-frontend/package-lock.json index 649cb31d2..02cc6e41c 100644 --- a/superset-frontend/package-lock.json +++ b/superset-frontend/package-lock.json @@ -12542,6 +12542,8 @@ }, "node_modules/@testing-library/jest-dom": { "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==", "license": "MIT", "dependencies": { "@adobe/css-tools": "^4.0.1", @@ -12582,6 +12584,7 @@ "version": "12.1.5", "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-12.1.5.tgz", "integrity": "sha512-OfTXCJUFgjd/digLUuPxa0+/3ZxsQmE7ub9kcbW/wi96Bh3o/p5vrETcBGfP17NWPGqeYYl5LTRpwyGoMC4ysg==", + "license": "MIT", "dependencies": { "@babel/runtime": "^7.12.5", "@testing-library/dom": "^8.0.0", @@ -16615,6 +16618,7 @@ }, "node_modules/array.prototype.filter": { "version": "1.0.3", + "dev": true, "license": "MIT", "dependencies": { "call-bind": "^1.0.2", @@ -16664,6 +16668,7 @@ }, "node_modules/array.prototype.flat": { "version": "1.3.2", + "dev": true, "license": "MIT", "dependencies": { "call-bind": "^1.0.2", @@ -16709,6 +16714,7 @@ }, "node_modules/arraybuffer.prototype.slice": { "version": "1.0.3", + "dev": true, "license": "MIT", "dependencies": { "array-buffer-byte-length": "^1.0.1", @@ -18648,6 +18654,7 @@ }, "node_modules/cheerio": { "version": "1.0.0-rc.12", + "dev": true, "license": "MIT", "dependencies": { "cheerio-select": "^2.1.0", @@ -18667,6 +18674,7 @@ }, "node_modules/cheerio-select": { "version": "2.1.0", + "dev": true, "license": "BSD-2-Clause", "dependencies": { "boolbase": "^1.0.0", @@ -20248,6 +20256,7 @@ }, "node_modules/css-select": { "version": "5.1.0", + "dev": true, "license": "BSD-2-Clause", "dependencies": { "boolbase": "^1.0.0", @@ -21988,6 +21997,7 @@ }, "node_modules/discontinuous-range": { "version": "1.0.0", + "dev": true, "license": "MIT" }, "node_modules/distributions": { @@ -22056,6 +22066,7 @@ }, "node_modules/dom-serializer": { "version": "2.0.0", + "dev": true, "license": "MIT", "dependencies": { "domelementtype": "^2.3.0", @@ -22085,6 +22096,7 @@ }, "node_modules/domhandler": { "version": "5.0.3", + "dev": true, "license": "BSD-2-Clause", "dependencies": { "domelementtype": "^2.3.0" @@ -22098,6 +22110,7 @@ }, "node_modules/domutils": { "version": "3.1.0", + "dev": true, "license": "BSD-2-Clause", "dependencies": { "dom-serializer": "^2.0.0", @@ -22441,6 +22454,7 @@ }, "node_modules/enzyme": { "version": "3.11.0", + "dev": true, "license": "MIT", "dependencies": { "array.prototype.flat": "^1.2.3", @@ -22528,6 +22542,7 @@ }, "node_modules/enzyme-shallow-equal": { "version": "1.0.5", + "dev": true, "license": "MIT", "dependencies": { "has": "^1.0.3", @@ -22554,6 +22569,7 @@ }, "node_modules/enzyme/node_modules/object-inspect": { "version": "1.12.3", + "dev": true, "license": "MIT", "funding": { "url": "https://github.com/sponsors/ljharb" @@ -22584,6 +22600,7 @@ }, "node_modules/es-abstract": { "version": "1.22.4", + "dev": true, "license": "MIT", "dependencies": { "array-buffer-byte-length": "^1.0.1", @@ -22637,6 +22654,7 @@ }, "node_modules/es-abstract/node_modules/object-inspect": { "version": "1.13.1", + "dev": true, "license": "MIT", "funding": { "url": "https://github.com/sponsors/ljharb" @@ -22644,6 +22662,7 @@ }, "node_modules/es-array-method-boxes-properly": { "version": "1.0.0", + "dev": true, "license": "MIT" }, "node_modules/es-define-property": { @@ -22719,6 +22738,7 @@ }, "node_modules/es-set-tostringtag": { "version": "2.0.2", + "dev": true, "license": "MIT", "dependencies": { "get-intrinsic": "^1.2.2", @@ -22731,6 +22751,7 @@ }, "node_modules/es-shim-unscopables": { "version": "1.0.2", + "dev": true, "license": "MIT", "dependencies": { "hasown": "^2.0.0" @@ -22738,6 +22759,7 @@ }, "node_modules/es-to-primitive": { "version": "1.2.1", + "dev": true, "license": "MIT", "dependencies": { "is-callable": "^1.1.4", @@ -25814,6 +25836,7 @@ }, "node_modules/function.prototype.name": { "version": "1.1.6", + "dev": true, "license": "MIT", "dependencies": { "call-bind": "^1.0.2", @@ -26177,6 +26200,7 @@ }, "node_modules/get-symbol-description": { "version": "1.0.2", + "dev": true, "license": "MIT", "dependencies": { "call-bind": "^1.0.5", @@ -26670,6 +26694,7 @@ }, "node_modules/globalthis": { "version": "1.0.3", + "dev": true, "license": "MIT", "dependencies": { "define-properties": "^1.1.3" @@ -27622,6 +27647,7 @@ }, "node_modules/html-element-map": { "version": "1.3.1", + "dev": true, "license": "MIT", "dependencies": { "array.prototype.filter": "^1.0.0", @@ -27757,6 +27783,7 @@ }, "node_modules/htmlparser2": { "version": "8.0.2", + "dev": true, "funding": [ "https://github.com/fb55/htmlparser2?sponsor=1", { @@ -28858,6 +28885,7 @@ }, "node_modules/is-negative-zero": { "version": "2.0.2", + "dev": true, "license": "MIT", "engines": { "node": ">= 0.4" @@ -29012,6 +29040,7 @@ }, "node_modules/is-subset": { "version": "0.1.1", + "dev": true, "license": "MIT" }, "node_modules/is-symbol": { @@ -29081,6 +29110,7 @@ }, "node_modules/is-weakref": { "version": "1.0.2", + "dev": true, "license": "MIT", "dependencies": { "call-bind": "^1.0.2" @@ -33515,10 +33545,12 @@ }, "node_modules/lodash.escape": { "version": "4.0.1", + "dev": true, "license": "MIT" }, "node_modules/lodash.flattendeep": { "version": "4.4.0", + "dev": true, "license": "MIT" }, "node_modules/lodash.get": { @@ -39379,6 +39411,7 @@ }, "node_modules/moo": { "version": "0.4.3", + "dev": true, "license": "BSD-3-Clause" }, "node_modules/mousetrap": { @@ -39548,6 +39581,7 @@ }, "node_modules/nearley": { "version": "2.18.0", + "dev": true, "license": "MIT", "dependencies": { "commander": "^2.19.0", @@ -41104,6 +41138,7 @@ }, "node_modules/object.entries": { "version": "1.1.6", + "dev": true, "license": "MIT", "dependencies": { "call-bind": "^1.0.2", @@ -41183,6 +41218,7 @@ }, "node_modules/object.values": { "version": "1.1.7", + "dev": true, "license": "MIT", "dependencies": { "call-bind": "^1.0.2", @@ -42086,6 +42122,7 @@ }, "node_modules/parse5-htmlparser2-tree-adapter": { "version": "7.0.0", + "dev": true, "license": "MIT", "dependencies": { "domhandler": "^5.0.2", @@ -42244,6 +42281,7 @@ }, "node_modules/performance-now": { "version": "2.1.0", + "dev": true, "license": "MIT" }, "node_modules/periscopic": { @@ -43690,6 +43728,7 @@ }, "node_modules/raf": { "version": "3.4.1", + "dev": true, "license": "MIT", "dependencies": { "performance-now": "^2.1.0" @@ -43697,6 +43736,7 @@ }, "node_modules/railroad-diagrams": { "version": "1.0.0", + "dev": true, "license": "CC0-1.0" }, "node_modules/ramda": { @@ -43706,6 +43746,7 @@ }, "node_modules/randexp": { "version": "0.4.6", + "dev": true, "license": "MIT", "dependencies": { "discontinuous-range": "1.0.0", @@ -47249,6 +47290,7 @@ }, "node_modules/ret": { "version": "0.1.15", + "dev": true, "license": "MIT", "engines": { "node": ">=0.12" @@ -47460,6 +47502,7 @@ }, "node_modules/rst-selector-parser": { "version": "2.2.3", + "dev": true, "license": "BSD-3-Clause", "dependencies": { "lodash.flattendeep": "^4.4.0", @@ -47544,6 +47587,7 @@ }, "node_modules/safe-array-concat": { "version": "1.1.0", + "dev": true, "license": "MIT", "dependencies": { "call-bind": "^1.0.5", @@ -47560,6 +47604,7 @@ }, "node_modules/safe-array-concat/node_modules/isarray": { "version": "2.0.5", + "dev": true, "license": "MIT" }, "node_modules/safe-buffer": { @@ -47576,6 +47621,7 @@ }, "node_modules/safe-regex-test": { "version": "1.0.3", + "dev": true, "license": "MIT", "dependencies": { "call-bind": "^1.0.6", @@ -47695,6 +47741,7 @@ }, "node_modules/semver": { "version": "5.7.2", + "dev": true, "license": "ISC", "bin": { "semver": "bin/semver" @@ -49219,6 +49266,7 @@ }, "node_modules/string.prototype.trim": { "version": "1.2.8", + "dev": true, "license": "MIT", "dependencies": { "call-bind": "^1.0.2", @@ -49234,6 +49282,7 @@ }, "node_modules/string.prototype.trimend": { "version": "1.0.7", + "dev": true, "license": "MIT", "dependencies": { "call-bind": "^1.0.2", @@ -49246,6 +49295,7 @@ }, "node_modules/string.prototype.trimstart": { "version": "1.0.7", + "dev": true, "license": "MIT", "dependencies": { "call-bind": "^1.0.2", @@ -50653,6 +50703,7 @@ }, "node_modules/typed-array-buffer": { "version": "1.0.1", + "dev": true, "license": "MIT", "dependencies": { "call-bind": "^1.0.6", @@ -50665,6 +50716,7 @@ }, "node_modules/typed-array-byte-length": { "version": "1.0.0", + "dev": true, "license": "MIT", "dependencies": { "call-bind": "^1.0.2", @@ -50681,6 +50733,7 @@ }, "node_modules/typed-array-byte-offset": { "version": "1.0.0", + "dev": true, "license": "MIT", "dependencies": { "available-typed-arrays": "^1.0.5", @@ -50698,6 +50751,7 @@ }, "node_modules/typed-array-length": { "version": "1.0.4", + "dev": true, "license": "MIT", "dependencies": { "call-bind": "^1.0.2", @@ -50776,6 +50830,7 @@ }, "node_modules/unbox-primitive": { "version": "1.0.2", + "dev": true, "license": "MIT", "dependencies": { "call-bind": "^1.0.2", @@ -55872,8 +55927,10 @@ "peerDependencies": { "@superset-ui/chart-controls": "*", "@superset-ui/core": "*", - "enzyme": "*", - "react": "^16.13.1" + "@testing-library/jest-dom": "^5.17.0", + "@testing-library/react": "^12.1.5", + "react": "^16.13.1", + "react-dom": "^16.13.1" } }, "plugins/legacy-plugin-chart-partition/node_modules/d3-hierarchy": { @@ -56510,7 +56567,6 @@ "dependencies": { "@react-icons/all-files": "^4.1.0", "@types/d3-array": "^2.9.0", - "@types/enzyme": "^3.10.18", "@types/react-table": "^7.7.20", "classnames": "^2.5.1", "d3-array": "^2.4.0", @@ -66354,7 +66410,6 @@ "requires": { "@react-icons/all-files": "^4.1.0", "@types/d3-array": "^2.9.0", - "@types/enzyme": "^3.10.18", "@types/react-table": "^7.7.20", "classnames": "^2.5.1", "d3-array": "^2.4.0", @@ -66718,6 +66773,8 @@ }, "@testing-library/jest-dom": { "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==", "requires": { "@adobe/css-tools": "^4.0.1", "@babel/runtime": "^7.9.2", @@ -69643,6 +69700,7 @@ }, "array.prototype.filter": { "version": "1.0.3", + "dev": true, "requires": { "call-bind": "^1.0.2", "define-properties": "^1.2.0", @@ -69674,6 +69732,7 @@ }, "array.prototype.flat": { "version": "1.3.2", + "dev": true, "requires": { "call-bind": "^1.0.2", "define-properties": "^1.2.0", @@ -69704,6 +69763,7 @@ }, "arraybuffer.prototype.slice": { "version": "1.0.3", + "dev": true, "requires": { "array-buffer-byte-length": "^1.0.1", "call-bind": "^1.0.5", @@ -70990,6 +71050,7 @@ }, "cheerio": { "version": "1.0.0-rc.12", + "dev": true, "requires": { "cheerio-select": "^2.1.0", "dom-serializer": "^2.0.0", @@ -71002,6 +71063,7 @@ }, "cheerio-select": { "version": "2.1.0", + "dev": true, "requires": { "boolbase": "^1.0.0", "css-select": "^5.1.0", @@ -72054,6 +72116,7 @@ }, "css-select": { "version": "5.1.0", + "dev": true, "requires": { "boolbase": "^1.0.0", "css-what": "^6.1.0", @@ -73214,7 +73277,8 @@ } }, "discontinuous-range": { - "version": "1.0.0" + "version": "1.0.0", + "dev": true }, "distributions": { "version": "2.2.0", @@ -73267,6 +73331,7 @@ }, "dom-serializer": { "version": "2.0.0", + "dev": true, "requires": { "domelementtype": "^2.3.0", "domhandler": "^5.0.2", @@ -73284,12 +73349,14 @@ }, "domhandler": { "version": "5.0.3", + "dev": true, "requires": { "domelementtype": "^2.3.0" } }, "domutils": { "version": "3.1.0", + "dev": true, "requires": { "dom-serializer": "^2.0.0", "domelementtype": "^2.3.0", @@ -73537,6 +73604,7 @@ }, "enzyme": { "version": "3.11.0", + "dev": true, "requires": { "array.prototype.flat": "^1.2.3", "cheerio": "^1.0.0-rc.3", @@ -73563,7 +73631,8 @@ }, "dependencies": { "object-inspect": { - "version": "1.12.3" + "version": "1.12.3", + "dev": true } } }, @@ -73605,6 +73674,7 @@ }, "enzyme-shallow-equal": { "version": "1.0.5", + "dev": true, "requires": { "has": "^1.0.3", "object-is": "^1.1.5" @@ -73637,6 +73707,7 @@ }, "es-abstract": { "version": "1.22.4", + "dev": true, "requires": { "array-buffer-byte-length": "^1.0.1", "arraybuffer.prototype.slice": "^1.0.3", @@ -73682,12 +73753,14 @@ }, "dependencies": { "object-inspect": { - "version": "1.13.1" + "version": "1.13.1", + "dev": true } } }, "es-array-method-boxes-properly": { - "version": "1.0.0" + "version": "1.0.0", + "dev": true }, "es-define-property": { "version": "1.0.0", @@ -73748,6 +73821,7 @@ }, "es-set-tostringtag": { "version": "2.0.2", + "dev": true, "requires": { "get-intrinsic": "^1.2.2", "has-tostringtag": "^1.0.0", @@ -73756,12 +73830,14 @@ }, "es-shim-unscopables": { "version": "1.0.2", + "dev": true, "requires": { "hasown": "^2.0.0" } }, "es-to-primitive": { "version": "1.2.1", + "dev": true, "requires": { "is-callable": "^1.1.4", "is-date-object": "^1.0.1", @@ -75788,6 +75864,7 @@ }, "function.prototype.name": { "version": "1.1.6", + "dev": true, "requires": { "call-bind": "^1.0.2", "define-properties": "^1.2.0", @@ -76014,6 +76091,7 @@ }, "get-symbol-description": { "version": "1.0.2", + "dev": true, "requires": { "call-bind": "^1.0.5", "es-errors": "^1.3.0", @@ -76341,6 +76419,7 @@ }, "globalthis": { "version": "1.0.3", + "dev": true, "requires": { "define-properties": "^1.1.3" } @@ -76952,6 +77031,7 @@ }, "html-element-map": { "version": "1.3.1", + "dev": true, "requires": { "array.prototype.filter": "^1.0.0", "call-bind": "^1.0.2" @@ -77028,6 +77108,7 @@ }, "htmlparser2": { "version": "8.0.2", + "dev": true, "requires": { "domelementtype": "^2.3.0", "domhandler": "^5.0.3", @@ -77691,7 +77772,8 @@ } }, "is-negative-zero": { - "version": "2.0.2" + "version": "2.0.2", + "dev": true }, "is-number": { "version": "3.0.0", @@ -77782,7 +77864,8 @@ } }, "is-subset": { - "version": "0.1.1" + "version": "0.1.1", + "dev": true }, "is-symbol": { "version": "1.0.4", @@ -77821,6 +77904,7 @@ }, "is-weakref": { "version": "1.0.2", + "dev": true, "requires": { "call-bind": "^1.0.2" } @@ -80762,10 +80846,12 @@ "dev": true }, "lodash.escape": { - "version": "4.0.1" + "version": "4.0.1", + "dev": true }, "lodash.flattendeep": { - "version": "4.4.0" + "version": "4.4.0", + "dev": true }, "lodash.get": { "version": "4.4.2" @@ -83931,7 +84017,8 @@ } }, "moo": { - "version": "0.4.3" + "version": "0.4.3", + "dev": true }, "mousetrap": { "version": "1.6.5" @@ -84044,6 +84131,7 @@ }, "nearley": { "version": "2.18.0", + "dev": true, "requires": { "commander": "^2.19.0", "moo": "^0.4.3", @@ -85089,6 +85177,7 @@ }, "object.entries": { "version": "1.1.6", + "dev": true, "requires": { "call-bind": "^1.0.2", "define-properties": "^1.1.4", @@ -85141,6 +85230,7 @@ }, "object.values": { "version": "1.1.7", + "dev": true, "requires": { "call-bind": "^1.0.2", "define-properties": "^1.2.0", @@ -85710,6 +85800,7 @@ }, "parse5-htmlparser2-tree-adapter": { "version": "7.0.0", + "dev": true, "requires": { "domhandler": "^5.0.2", "parse5": "^7.0.0" @@ -85809,7 +85900,8 @@ "dev": true }, "performance-now": { - "version": "2.1.0" + "version": "2.1.0", + "dev": true }, "periscopic": { "version": "3.1.0", @@ -86649,12 +86741,14 @@ }, "raf": { "version": "3.4.1", + "dev": true, "requires": { "performance-now": "^2.1.0" } }, "railroad-diagrams": { - "version": "1.0.0" + "version": "1.0.0", + "dev": true }, "ramda": { "version": "0.26.1", @@ -86662,6 +86756,7 @@ }, "randexp": { "version": "0.4.6", + "dev": true, "requires": { "discontinuous-range": "1.0.0", "ret": "~0.1.10" @@ -88903,7 +88998,8 @@ } }, "ret": { - "version": "0.1.15" + "version": "0.1.15", + "dev": true }, "retry": { "version": "0.13.1", @@ -89012,6 +89108,7 @@ }, "rst-selector-parser": { "version": "2.2.3", + "dev": true, "requires": { "lodash.flattendeep": "^4.4.0", "nearley": "^2.7.10" @@ -89058,6 +89155,7 @@ }, "safe-array-concat": { "version": "1.1.0", + "dev": true, "requires": { "call-bind": "^1.0.5", "get-intrinsic": "^1.2.2", @@ -89066,7 +89164,8 @@ }, "dependencies": { "isarray": { - "version": "2.0.5" + "version": "2.0.5", + "dev": true } } }, @@ -89082,6 +89181,7 @@ }, "safe-regex-test": { "version": "1.0.3", + "dev": true, "requires": { "call-bind": "^1.0.6", "es-errors": "^1.3.0", @@ -89164,7 +89264,8 @@ } }, "semver": { - "version": "5.7.2" + "version": "5.7.2", + "dev": true }, "semver-store": { "version": "0.3.0", @@ -90231,6 +90332,7 @@ }, "string.prototype.trim": { "version": "1.2.8", + "dev": true, "requires": { "call-bind": "^1.0.2", "define-properties": "^1.2.0", @@ -90239,6 +90341,7 @@ }, "string.prototype.trimend": { "version": "1.0.7", + "dev": true, "requires": { "call-bind": "^1.0.2", "define-properties": "^1.2.0", @@ -90247,6 +90350,7 @@ }, "string.prototype.trimstart": { "version": "1.0.7", + "dev": true, "requires": { "call-bind": "^1.0.2", "define-properties": "^1.2.0", @@ -91140,6 +91244,7 @@ }, "typed-array-buffer": { "version": "1.0.1", + "dev": true, "requires": { "call-bind": "^1.0.6", "es-errors": "^1.3.0", @@ -91148,6 +91253,7 @@ }, "typed-array-byte-length": { "version": "1.0.0", + "dev": true, "requires": { "call-bind": "^1.0.2", "for-each": "^0.3.3", @@ -91157,6 +91263,7 @@ }, "typed-array-byte-offset": { "version": "1.0.0", + "dev": true, "requires": { "available-typed-arrays": "^1.0.5", "call-bind": "^1.0.2", @@ -91167,6 +91274,7 @@ }, "typed-array-length": { "version": "1.0.4", + "dev": true, "requires": { "call-bind": "^1.0.2", "for-each": "^0.3.3", @@ -91208,6 +91316,7 @@ }, "unbox-primitive": { "version": "1.0.2", + "dev": true, "requires": { "call-bind": "^1.0.2", "has-bigints": "^1.0.2", diff --git a/superset-frontend/packages/superset-ui-core/test/chart-composition/tooltip/TooltipFrame.test.tsx b/superset-frontend/packages/superset-ui-core/test/chart-composition/tooltip/TooltipFrame.test.tsx index f46d09d53..5c1cde472 100644 --- a/superset-frontend/packages/superset-ui-core/test/chart-composition/tooltip/TooltipFrame.test.tsx +++ b/superset-frontend/packages/superset-ui-core/test/chart-composition/tooltip/TooltipFrame.test.tsx @@ -17,27 +17,28 @@ * under the License. */ -import { shallow } from 'enzyme'; +import '@testing-library/jest-dom'; import { TooltipFrame } from '@superset-ui/core'; +import { render, screen } from '@testing-library/react'; describe('TooltipFrame', () => { it('sets className', () => { - const wrapper = shallow( + const { container } = render( Hi! , ); - expect(wrapper.hasClass('test-class')).toEqual(true); + expect(screen.getByText('Hi!')).toBeInTheDocument(); + expect(container.querySelector('.test-class')).toBeInTheDocument(); }); it('renders', () => { - const wrapper = shallow( + const { container } = render( Hi! , ); - const span = wrapper.find('span'); - expect(span).toHaveLength(1); - expect(span.text()).toEqual('Hi!'); + expect(container.querySelectorAll('span')).toHaveLength(1); + expect(container.querySelector('span')).toHaveTextContent('Hi!'); }); }); diff --git a/superset-frontend/packages/superset-ui-core/test/chart-composition/tooltip/TooltipTable.test.tsx b/superset-frontend/packages/superset-ui-core/test/chart-composition/tooltip/TooltipTable.test.tsx index ebd3f0d07..7df4e8c5f 100644 --- a/superset-frontend/packages/superset-ui-core/test/chart-composition/tooltip/TooltipTable.test.tsx +++ b/superset-frontend/packages/superset-ui-core/test/chart-composition/tooltip/TooltipTable.test.tsx @@ -17,49 +17,53 @@ * under the License. */ -import { shallow } from 'enzyme'; +import '@testing-library/jest-dom'; +import { screen, render } from '@testing-library/react'; import { TooltipTable } from '@superset-ui/core'; +import { CSSProperties } from 'react'; describe('TooltipTable', () => { it('sets className', () => { - const wrapper = shallow(); - expect(wrapper.render().hasClass('test-class')).toEqual(true); + const { container } = render(); + expect(container.querySelector('[class="test-class"]')).toBeInTheDocument(); }); it('renders empty table', () => { - const wrapper = shallow(); - expect(wrapper.find('tbody')).toHaveLength(1); - expect(wrapper.find('tr')).toHaveLength(0); + const { container } = render(); + expect(container.querySelector('tbody')).toBeInTheDocument(); + expect(container.querySelector('tr')).not.toBeInTheDocument(); }); - it('renders table with content', () => { - const wrapper = shallow( - , - ); - expect(wrapper.find('tbody')).toHaveLength(1); - expect(wrapper.find('tr')).toHaveLength(3); - expect(wrapper.find('tr > td').first().text()).toEqual('Cersei'); + it('renders table with content', async () => { + const data = [ + { + key: 'Cersei', + keyColumn: 'Cersei', + keyStyle: { padding: '10' }, + valueColumn: 2, + valueStyle: { textAlign: 'right' } as CSSProperties, + }, + { + key: 'Jaime', + keyColumn: 'Jaime', + keyStyle: { padding: '10' }, + valueColumn: 1, + valueStyle: { textAlign: 'right' } as CSSProperties, + }, + { + key: 'Tyrion', + keyStyle: { padding: '10' }, + valueColumn: 2, + }, + ]; + + render(); + + for await (const { key, valueColumn } of data) { + const keyCell = await screen.findByText(key); + const valueCell = keyCell?.nextSibling as HTMLElement; + expect(keyCell).toBeInTheDocument(); + expect(valueCell?.textContent).toEqual(String(valueColumn)); + } }); }); diff --git a/superset-frontend/plugins/legacy-plugin-chart-partition/package.json b/superset-frontend/plugins/legacy-plugin-chart-partition/package.json index 47497e90e..0802eb23f 100644 --- a/superset-frontend/plugins/legacy-plugin-chart-partition/package.json +++ b/superset-frontend/plugins/legacy-plugin-chart-partition/package.json @@ -30,8 +30,10 @@ "peerDependencies": { "@superset-ui/chart-controls": "*", "@superset-ui/core": "*", - "enzyme": "*", - "react": "^16.13.1" + "@testing-library/jest-dom": "^5.17.0", + "@testing-library/react": "^12.1.5", + "react": "^16.13.1", + "react-dom": "^16.13.1" }, "publishConfig": { "access": "public" diff --git a/superset-frontend/plugins/legacy-plugin-chart-partition/test/OptionDescription.test.jsx b/superset-frontend/plugins/legacy-plugin-chart-partition/test/OptionDescription.test.jsx index 248d43e99..54aece391 100644 --- a/superset-frontend/plugins/legacy-plugin-chart-partition/test/OptionDescription.test.jsx +++ b/superset-frontend/plugins/legacy-plugin-chart-partition/test/OptionDescription.test.jsx @@ -16,9 +16,9 @@ * specific language governing permissions and limitations * under the License. */ -import { shallow } from 'enzyme'; - -import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls'; +import '@testing-library/jest-dom'; +import { screen, render, fireEvent, act } from '@testing-library/react'; +import { ThemeProvider, supersetTheme } from '@superset-ui/core'; import OptionDescription from '../src/OptionDescription'; const defaultProps = { @@ -28,20 +28,41 @@ const defaultProps = { }, }; -describe('OptionDescription', () => { - let wrapper; - let props; +beforeEach(() => { + jest.useFakeTimers(); +}); +afterEach(() => { + jest.useRealTimers(); +}); + +describe('OptionDescription', () => { beforeEach(() => { - props = { option: { ...defaultProps.option } }; - wrapper = shallow(); + const props = { option: { ...defaultProps.option } }; + render( + + + , + ); }); it('renders an InfoTooltipWithTrigger', () => { - expect(wrapper.find(InfoTooltipWithTrigger)).toHaveLength(1); + const tooltipTrigger = screen.getByLabelText('Show info tooltip'); + expect(tooltipTrigger).toBeInTheDocument(); + + // Perform delayed mouse hovering so tooltip could pop out + fireEvent.mouseOver(tooltipTrigger); + act(() => jest.runAllTimers()); + fireEvent.mouseOut(tooltipTrigger); + + const tooltip = screen.getByRole('tooltip'); + expect(tooltip).toBeInTheDocument(); + expect(tooltip).toHaveTextContent('Description for some option'); }); it('renders a span with the label', () => { - expect(wrapper.find('.option-label').text()).toBe('Some option'); + expect( + screen.getByText('Some option', { selector: 'span' }), + ).toBeInTheDocument(); }); }); diff --git a/superset-frontend/plugins/plugin-chart-table/package.json b/superset-frontend/plugins/plugin-chart-table/package.json index a56cd724b..9bf34bfa1 100644 --- a/superset-frontend/plugins/plugin-chart-table/package.json +++ b/superset-frontend/plugins/plugin-chart-table/package.json @@ -26,7 +26,6 @@ "dependencies": { "@react-icons/all-files": "^4.1.0", "@types/d3-array": "^2.9.0", - "@types/enzyme": "^3.10.18", "@types/react-table": "^7.7.20", "classnames": "^2.5.1", "d3-array": "^2.4.0", diff --git a/superset-frontend/plugins/plugin-chart-table/test/TableChart.test.tsx b/superset-frontend/plugins/plugin-chart-table/test/TableChart.test.tsx index df62ba4c1..b21a657b8 100644 --- a/superset-frontend/plugins/plugin-chart-table/test/TableChart.test.tsx +++ b/superset-frontend/plugins/plugin-chart-table/test/TableChart.test.tsx @@ -16,14 +16,14 @@ * specific language governing permissions and limitations * under the License. */ -import { CommonWrapper } from 'enzyme'; -import { render, screen } from '@testing-library/react'; import '@testing-library/jest-dom'; +import { render, screen } from '@testing-library/react'; +import { ThemeProvider, supersetTheme } from '@superset-ui/core'; import TableChart from '../src/TableChart'; import transformProps from '../src/transformProps'; import DateWithFormatter from '../src/utils/DateWithFormatter'; import testData from './testData'; -import { mount, ProviderWrapper } from './enzyme'; +import { ProviderWrapper } from './testHelpers'; describe('plugin-chart-table', () => { describe('transformProps', () => { @@ -178,39 +178,42 @@ describe('plugin-chart-table', () => { }); describe('TableChart', () => { - let wrap: CommonWrapper; // the ReactDataTable wrapper - let tree: Cheerio; - it('render basic data', () => { - wrap = mount( - , + render( + + , + , ); - tree = wrap.render(); // returns a CheerioWrapper with jQuery-like API - const cells = tree.find('td'); + const firstDataRow = screen.getAllByRole('rowgroup')[1]; + const cells = firstDataRow.querySelectorAll('td'); expect(cells).toHaveLength(12); - expect(cells.eq(0).text()).toEqual('2020-01-01 12:34:56'); - expect(cells.eq(1).text()).toEqual('Michael'); + expect(cells[0]).toHaveTextContent('2020-01-01 12:34:56'); + expect(cells[1]).toHaveTextContent('Michael'); // number is not in `metrics` list, so it should output raw value // (in real world Superset, this would mean the column is used in GROUP BY) - expect(cells.eq(2).text()).toEqual('2467063'); + expect(cells[2]).toHaveTextContent('2467063'); // should not render column with `.` in name as `undefined` - expect(cells.eq(3).text()).toEqual('foo'); - expect(cells.eq(6).text()).toEqual('2467'); - expect(cells.eq(8).text()).toEqual('N/A'); + expect(cells[3]).toHaveTextContent('foo'); + expect(cells[6]).toHaveTextContent('2467'); + expect(cells[8]).toHaveTextContent('N/A'); }); it('render advanced data', () => { - wrap = mount( - , + render( + + , + , ); - tree = wrap.render(); - // should successful rerender with new props - const cells = tree.find('td'); - expect(tree.find('th').eq(1).text()).toEqual('Sum of Num'); - expect(cells.eq(0).text()).toEqual('Michael'); - expect(cells.eq(2).text()).toEqual('12.346%'); - expect(cells.eq(4).text()).toEqual('2.47k'); + const secondColumnHeader = screen.getByText('Sum of Num'); + expect(secondColumnHeader).toBeInTheDocument(); + expect(secondColumnHeader?.getAttribute('data-column-name')).toEqual('1'); + + const firstDataRow = screen.getAllByRole('rowgroup')[1]; + const cells = firstDataRow.querySelectorAll('td'); + expect(cells[0]).toHaveTextContent('Michael'); + expect(cells[2]).toHaveTextContent('12.346%'); + expect(cells[4]).toHaveTextContent('2.47k'); }); it('render advanced data with currencies', () => { @@ -318,9 +321,12 @@ describe('plugin-chart-table', () => { }); it('render empty data', () => { - wrap.setProps({ ...transformProps(testData.empty), sticky: false }); - tree = wrap.render(); - expect(tree.text()).toContain('No records found'); + render( + + , + , + ); + expect(screen.getByText('No records found')).toBeInTheDocument(); }); it('render color with column color formatter', () => { diff --git a/superset-frontend/plugins/plugin-chart-table/test/enzyme.tsx b/superset-frontend/plugins/plugin-chart-table/test/testHelpers.tsx similarity index 60% rename from superset-frontend/plugins/plugin-chart-table/test/enzyme.tsx rename to superset-frontend/plugins/plugin-chart-table/test/testHelpers.tsx index 303fbcc03..95ee707ab 100644 --- a/superset-frontend/plugins/plugin-chart-table/test/enzyme.tsx +++ b/superset-frontend/plugins/plugin-chart-table/test/testHelpers.tsx @@ -16,8 +16,6 @@ * specific language governing permissions and limitations * under the License. */ -import { ReactElement } from 'react'; -import { shallow as enzymeShallow, mount as enzymeMount } from 'enzyme'; import { EmotionCacheProvider, createEmotionCache, @@ -29,12 +27,6 @@ const emotionCache = createEmotionCache({ key: 'test', }); -type optionsType = { - wrappingComponentProps?: any; - wrappingComponent?: ReactElement; - context?: any; -}; - export function ProviderWrapper(props: any) { const { children, theme = supersetTheme } = props; return ( @@ -43,25 +35,3 @@ export function ProviderWrapper(props: any) { ); } - -export function mount(component: ReactElement, options: optionsType = {}) { - return enzymeMount(component, { - ...options, - wrappingComponent: ProviderWrapper, - wrappingComponentProps: { - theme: supersetTheme, - ...options?.wrappingComponentProps, - }, - }); -} - -export function shallow(component: ReactElement, options: optionsType = {}) { - return enzymeShallow(component, { - ...options, - wrappingComponent: ProviderWrapper, - wrappingComponentProps: { - theme: supersetTheme, - ...options?.wrappingComponentProps, - }, - }).dive(); -} diff --git a/superset-frontend/src/components/FacePile/FacePile.test.tsx b/superset-frontend/src/components/FacePile/FacePile.test.tsx index ce8acdc1a..0cb0e143e 100644 --- a/superset-frontend/src/components/FacePile/FacePile.test.tsx +++ b/superset-frontend/src/components/FacePile/FacePile.test.tsx @@ -17,8 +17,7 @@ * under the License. */ import { Provider } from 'react-redux'; -import { styledMount as mount } from 'spec/helpers/theming'; -import { Avatar } from 'src/components'; +import { act, fireEvent, render, screen } from 'spec/helpers/testing-library'; import { store } from 'src/views/store'; import FacePile from '.'; import { getRandomColor } from './utils'; @@ -29,23 +28,43 @@ const users = [...new Array(10)].map((_, i) => ({ id: i, })); +beforeEach(() => { + jest.useFakeTimers(); +}); + +afterEach(() => { + jest.useRealTimers(); +}); + describe('FacePile', () => { - const wrapper = mount( - - - , - ); + let container: HTMLElement; + + beforeEach(() => { + ({ container } = render( + + + , + )); + }); it('is a valid element', () => { - expect(wrapper.find(FacePile)).toExist(); + const exposedFaces = screen.getAllByText(/U/); + expect(exposedFaces).toHaveLength(4); + const overflownFaces = screen.getByText('+6'); + expect(overflownFaces).toBeVisible(); + + // Display user info when hovering over one of exposed face in the pile. + fireEvent.mouseEnter(exposedFaces[0]); + act(() => jest.runAllTimers()); + expect(screen.getByRole('tooltip')).toHaveTextContent('user 0'); }); it('renders an Avatar', () => { - expect(wrapper.find(Avatar)).toExist(); + expect(container.querySelector('.ant-avatar')).toBeVisible(); }); it('hides overflow', () => { - expect(wrapper.find(Avatar).length).toBe(5); + expect(container.querySelectorAll('.ant-avatar')).toHaveLength(5); }); }); diff --git a/superset-frontend/src/explore/components/controls/SelectControl.jsx b/superset-frontend/src/explore/components/controls/SelectControl.jsx index e0f1ae5f0..b50d54c9a 100644 --- a/superset-frontend/src/explore/components/controls/SelectControl.jsx +++ b/superset-frontend/src/explore/components/controls/SelectControl.jsx @@ -87,6 +87,39 @@ const defaultProps = { valueKey: 'value', }; +export const innerGetOptions = props => { + const { choices, optionRenderer, valueKey } = props; + let options = []; + if (props.options) { + options = props.options.map(o => ({ + ...o, + value: o[valueKey], + label: o.label || o[valueKey], + customLabel: optionRenderer ? optionRenderer(o) : undefined, + })); + } else if (choices) { + // Accepts different formats of input + options = choices.map(c => { + if (Array.isArray(c)) { + const [value, label] = c.length > 1 ? c : [c[0], c[0]]; + return { + value, + label, + }; + } + if (Object.is(c)) { + return { + ...c, + value: c[valueKey], + label: c.label || c[valueKey], + }; + } + return { value: c, label: c }; + }); + } + return options; +}; + export default class SelectControl extends PureComponent { constructor(props) { super(props); @@ -127,36 +160,7 @@ export default class SelectControl extends PureComponent { } getOptions(props) { - const { choices, optionRenderer, valueKey } = props; - let options = []; - if (props.options) { - options = props.options.map(o => ({ - ...o, - value: o[valueKey], - label: o.label || o[valueKey], - customLabel: optionRenderer ? optionRenderer(o) : undefined, - })); - } else if (choices) { - // Accepts different formats of input - options = choices.map(c => { - if (Array.isArray(c)) { - const [value, label] = c.length > 1 ? c : [c[0], c[0]]; - return { - value, - label, - }; - } - if (Object.is(c)) { - return { - ...c, - value: c[valueKey], - label: c.label || c[valueKey], - }; - } - return { value: c, label: c }; - }); - } - return options; + return innerGetOptions(props); } handleFilterOptions(text, option) { diff --git a/superset-frontend/src/explore/components/controls/SelectControl.test.jsx b/superset-frontend/src/explore/components/controls/SelectControl.test.jsx index d86c334be..d90d54997 100644 --- a/superset-frontend/src/explore/components/controls/SelectControl.test.jsx +++ b/superset-frontend/src/explore/components/controls/SelectControl.test.jsx @@ -16,11 +16,18 @@ * specific language governing permissions and limitations * under the License. */ -import sinon from 'sinon'; -import { shallow } from 'enzyme'; -import { Select as SelectComponent } from 'src/components'; -import SelectControl from 'src/explore/components/controls/SelectControl'; -import { styledMount as mount } from 'spec/helpers/theming'; +import { + act, + createEvent, + fireEvent, + render, + screen, + within, +} from 'spec/helpers/testing-library'; +import SelectControl, { + innerGetOptions, +} from 'src/explore/components/controls/SelectControl'; +import userEvent from '@testing-library/user-event'; const defaultProps = { choices: [ @@ -30,139 +37,202 @@ const defaultProps = { ], name: 'row_limit', label: 'Row Limit', - valueKey: 'value', // shallow isn't passing SelectControl.defaultProps.valueKey through - onChange: sinon.spy(), + valueKey: 'value', + onChange: jest.fn(), }; +beforeEach(() => { + jest.useFakeTimers(); +}); + +afterEach(() => { + jest.useRealTimers(); +}); + const options = [ { value: '1 year ago', label: '1 year ago' }, { value: '1 week ago', label: '1 week ago' }, { value: 'today', label: 'today' }, ]; +const renderSelectControl = (props = {}) => { + const overrideProps = { + ...defaultProps, + ...props, + }; + const { container } = render(); + return container; +}; + describe('SelectControl', () => { - let wrapper; - - beforeEach(() => { - wrapper = shallow(); - }); - - it('calls props.onChange when select', () => { - const select = wrapper.instance(); - select.onChange(50); - expect(defaultProps.onChange.calledWith(50)).toBe(true); + it('calls props.onChange when select', async () => { + renderSelectControl(); + defaultProps.onChange(50); + expect(defaultProps.onChange).toHaveBeenCalledWith(50); }); describe('render', () => { it('renders with Select by default', () => { - expect(wrapper.find(SelectComponent)).toExist(); + renderSelectControl(); + const selectorWrapper = screen.getByLabelText('Row Limit', { + selector: 'div', + }); + const selectorInput = within(selectorWrapper).getByLabelText( + 'Row Limit', + { selector: 'input' }, + ); + expect(selectorWrapper).toBeInTheDocument(); + expect(selectorInput).toBeInTheDocument(); }); it('renders as mode multiple', () => { - wrapper.setProps({ multi: true }); - expect(wrapper.find(SelectComponent)).toExist(); - expect(wrapper.find(SelectComponent).prop('mode')).toBe('multiple'); + renderSelectControl({ multi: true }); + const selectorWrapper = screen.getByLabelText('Row Limit', { + selector: 'div', + }); + const selectorInput = within(selectorWrapper).getByLabelText( + 'Row Limit', + { selector: 'input' }, + ); + expect(selectorWrapper).toBeInTheDocument(); + expect(selectorInput).toBeInTheDocument(); + userEvent.click(selectorInput); + expect(screen.getByText('Select All (3)')).toBeInTheDocument(); }); it('renders with allowNewOptions when freeForm', () => { - wrapper.setProps({ freeForm: true }); - expect(wrapper.find(SelectComponent)).toExist(); - expect(wrapper.find(SelectComponent).prop('allowNewOptions')).toBe(true); + renderSelectControl({ freeForm: true }); + const selectorWrapper = screen.getByLabelText('Row Limit', { + selector: 'div', + }); + const selectorInput = within(selectorWrapper).getByLabelText( + 'Row Limit', + { selector: 'input' }, + ); + expect(selectorWrapper).toBeInTheDocument(); + expect(selectorInput).toBeInTheDocument(); + + // Expect a new option to be selectable. + userEvent.click(selectorInput); + userEvent.type(selectorInput, 'a new option'); + act(() => jest.runAllTimers()); + expect(within(selectorWrapper).getByRole('option')).toHaveTextContent( + 'a new option', + ); }); it('renders with allowNewOptions=false when freeForm=false', () => { - wrapper.setProps({ freeForm: false }); - expect(wrapper.find(SelectComponent)).toExist(); - expect(wrapper.find(SelectComponent).prop('allowNewOptions')).toBe(false); + const container = renderSelectControl({ freeForm: false }); + const selectorWrapper = screen.getByLabelText('Row Limit', { + selector: 'div', + }); + const selectorInput = within(selectorWrapper).getByLabelText( + 'Row Limit', + { selector: 'input' }, + ); + expect(selectorWrapper).toBeInTheDocument(); + expect(selectorInput).toBeInTheDocument(); + + // Expect no new option to be selectable. + userEvent.click(selectorInput); + userEvent.type(selectorInput, 'a new option'); + act(() => jest.advanceTimersByTime(300)); + + expect( + container.querySelector('[role="option"]'), + ).not.toBeInTheDocument(); + expect(within(selectorWrapper).getByText('No Data')).toBeInTheDocument(); }); it('renders with tokenSeparators', () => { - wrapper.setProps({ tokenSeparators: ['\n', '\t', ';'] }); - expect(wrapper.find(SelectComponent)).toExist(); - expect(wrapper.find(SelectComponent).prop('tokenSeparators')).toEqual( - expect.arrayContaining([expect.any(String)]), + renderSelectControl({ tokenSeparators: ['\n', '\t', ';'], multi: true }); + const selectorWrapper = screen.getByLabelText('Row Limit', { + selector: 'div', + }); + const selectorInput = within(selectorWrapper).getByLabelText( + 'Row Limit', + { selector: 'input' }, ); + expect(selectorWrapper).toBeInTheDocument(); + expect(selectorInput).toBeInTheDocument(); + + userEvent.click(selectorInput); + const paste = createEvent.paste(selectorInput, { + clipboardData: { + getData: () => '1 year ago;1 week ago', + }, + }); + fireEvent(selectorInput, paste); + const yearOption = screen.getByLabelText('1 year ago'); + expect(yearOption).toBeInTheDocument(); + expect(yearOption).toHaveAttribute('aria-selected', 'true'); + const weekOption = screen.getByText(/1 week ago/, { + selector: 'div', + }).parentNode; + expect(weekOption?.getAttribute('aria-selected')).toEqual('true'); }); describe('empty placeholder', () => { describe('withMulti', () => { it('does not show a placeholder if there are no choices', () => { - const withMulti = mount( - , - ); - expect(withMulti.html()).not.toContain('option(s'); + renderSelectControl({ + choices: [], + multi: true, + placeholder: 'add something', + }); + expect(screen.queryByRole('option')).not.toBeInTheDocument(); }); }); describe('withSingleChoice', () => { - it('does not show a placeholder if there are no choices', () => { - const singleChoice = mount( - , - ); - expect(singleChoice.html()).not.toContain('option(s'); - }); - }); - describe('default placeholder', () => { - it('does not show a placeholder if there are no options', () => { - const defaultPlaceholder = mount( - , - ); - expect(defaultPlaceholder.html()).not.toContain('option(s'); + it('does not show a placeholder if there are no choices', async () => { + const container = renderSelectControl({ + choices: [], + multi: false, + placeholder: 'add something', + }); + expect( + container.querySelector('[role="option"]'), + ).not.toBeInTheDocument(); }); }); describe('all choices selected', () => { it('does not show a placeholder', () => { - const allChoicesSelected = mount( - , - ); - expect(allChoicesSelected.html()).not.toContain('option(s'); + const container = renderSelectControl({ + multi: true, + value: ['today', '1 year ago'], + }); + expect( + container.querySelector('[role="option"]'), + ).not.toBeInTheDocument(); + expect(screen.queryByText('Select ...')).not.toBeInTheDocument(); }); }); }); describe('when select is multi', () => { it('does not render the placeholder when a selection has been made', () => { - wrapper = mount( - , - ); - expect(wrapper.html()).not.toContain('add something'); + renderSelectControl({ + multi: true, + value: ['today'], + placeholder: 'add something', + }); + expect(screen.queryByText('add something')).not.toBeInTheDocument(); }); }); describe('when select is single', () => { it('does not render the placeholder when a selection has been made', () => { - wrapper = mount( - , - ); - expect(wrapper.html()).not.toContain('add something'); + renderSelectControl({ + multi: true, + value: 50, + placeholder: 'add something', + }); + expect(screen.queryByText('add something')).not.toBeInTheDocument(); }); }); }); describe('getOptions', () => { it('returns the correct options', () => { - wrapper.setProps(defaultProps); - expect(wrapper.instance().getOptions(defaultProps)).toEqual(options); + expect(innerGetOptions(defaultProps)).toEqual(options); }); }); });