diff --git a/package-lock.json b/package-lock.json index d6a9a0b7e3..a5852b0cbc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -50,9 +50,7 @@ "@edx/browserslist-config": "^1.1.1", "@edx/frontend-build": "13.0.8", "@edx/reactifex": "1.1.0", - "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0", "babel-plugin-formatjs": "10.5.10", - "enzyme": "3.11.0", "eslint-plugin-import": "2.28.0", "glob": "7.2.3", "history": "5.3.0", @@ -6193,46 +6191,6 @@ } } }, - "node_modules/@wojtekmaj/enzyme-adapter-react-17": { - "version": "0.8.0", - "resolved": "https://registry.npmjs.org/@wojtekmaj/enzyme-adapter-react-17/-/enzyme-adapter-react-17-0.8.0.tgz", - "integrity": "sha512-zeUGfQRziXW7R7skzNuJyi01ZwuKCH8WiBNnTgUJwdS/CURrJwAhWsfW7nG7E30ak8Pu3ZwD9PlK9skBfAoOBw==", - "dev": true, - "dependencies": { - "@wojtekmaj/enzyme-adapter-utils": "^0.2.0", - "enzyme-shallow-equal": "^1.0.0", - "has": "^1.0.0", - "prop-types": "^15.7.0", - "react-is": "^17.0.0", - "react-test-renderer": "^17.0.0" - }, - "funding": { - "url": "https://github.com/wojtekmaj/enzyme-adapter-react-17?sponsor=1" - }, - "peerDependencies": { - "enzyme": "^3.0.0", - "react": "^17.0.0-0", - "react-dom": "^17.0.0-0" - } - }, - "node_modules/@wojtekmaj/enzyme-adapter-utils": { - "version": "0.2.0", - "resolved": "https://registry.npmjs.org/@wojtekmaj/enzyme-adapter-utils/-/enzyme-adapter-utils-0.2.0.tgz", - "integrity": "sha512-ZvZm9kZxZEKAbw+M1/Q3iDuqQndVoN8uLnxZ8bzxm7KgGTBejrGRoJAp8f1EN8eoO3iAjBNEQnTDW/H4Ekb0FQ==", - "dev": true, - "dependencies": { - "function.prototype.name": "^1.1.0", - "has": "^1.0.0", - "object.fromentries": "^2.0.0", - "prop-types": "^15.7.0" - }, - "funding": { - "url": "https://github.com/wojtekmaj/enzyme-adapter-utils?sponsor=1" - }, - "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", @@ -6614,25 +6572,6 @@ "node": ">=0.10.0" } }, - "node_modules/array.prototype.filter": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/array.prototype.filter/-/array.prototype.filter-1.0.2.tgz", - "integrity": "sha512-us+UrmGOilqttSOgoWZTpOvHu68vZT2YCjc/H4vhu56vzZpaDFBhB+Se2UwqWzMKbDv7Myq5M5pcZLAtUvTQdQ==", - "dev": true, - "dependencies": { - "call-bind": "^1.0.2", - "define-properties": "^1.1.4", - "es-abstract": "^1.20.4", - "es-array-method-boxes-properly": "^1.0.0", - "is-string": "^1.0.7" - }, - "engines": { - "node": ">= 0.4" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, "node_modules/array.prototype.findlastindex": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/array.prototype.findlastindex/-/array.prototype.findlastindex-1.2.2.tgz", @@ -7615,44 +7554,6 @@ "node": ">=10" } }, - "node_modules/cheerio": { - "version": "1.0.0-rc.12", - "resolved": "https://registry.npmjs.org/cheerio/-/cheerio-1.0.0-rc.12.tgz", - "integrity": "sha512-VqR8m68vM46BNnuZ5NtnGBKIE/DfN0cRIzg9n40EIq9NOv90ayxLBXA8fXC5gquFRGJSTRqBq25Jt2ECLR431Q==", - "dev": true, - "dependencies": { - "cheerio-select": "^2.1.0", - "dom-serializer": "^2.0.0", - "domhandler": "^5.0.3", - "domutils": "^3.0.1", - "htmlparser2": "^8.0.1", - "parse5": "^7.0.0", - "parse5-htmlparser2-tree-adapter": "^7.0.0" - }, - "engines": { - "node": ">= 6" - }, - "funding": { - "url": "https://github.com/cheeriojs/cheerio?sponsor=1" - } - }, - "node_modules/cheerio-select": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/cheerio-select/-/cheerio-select-2.1.0.tgz", - "integrity": "sha512-9v9kG0LvzrlcungtnJtpGNxY+fzECQKhK4EGJX2vByejiMX84MFNQw4UxPJl3bFbTMw+Dfs37XaIkCwTZfLh4g==", - "dev": true, - "dependencies": { - "boolbase": "^1.0.0", - "css-select": "^5.1.0", - "css-what": "^6.1.0", - "domelementtype": "^2.3.0", - "domhandler": "^5.0.3", - "domutils": "^3.0.1" - }, - "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", @@ -8743,12 +8644,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": "sha512-c68LpLbO+7kP/b1Hr1qs8/BJ09F5khZGTxqxZuhzxpmwJKOgRFHJWIb9/KmqnqHhLdO55aOxFH/EGBvUQbL/RQ==", - "dev": true - }, "node_modules/dns-equal": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz", @@ -9013,52 +8908,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.5", - "resolved": "https://registry.npmjs.org/enzyme-shallow-equal/-/enzyme-shallow-equal-1.0.5.tgz", - "integrity": "sha512-i6cwm7hN630JXenxxJFBKzgLC3hMTafFQXflvzHgPmDhOBhxUWDe8AeRv1qp2/uWJ2Y8z5yLWMzmAfkTOiOCZg==", - "dev": true, - "dependencies": { - "has": "^1.0.3", - "object-is": "^1.1.5" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, "node_modules/error-ex": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz", @@ -9122,12 +8971,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", @@ -11304,19 +11147,6 @@ "wbuf": "^1.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", @@ -11388,25 +11218,6 @@ "webpack": "^5.20.0" } }, - "node_modules/htmlparser2": { - "version": "8.0.2", - "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-8.0.2.tgz", - "integrity": "sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==", - "dev": true, - "funding": [ - "https://github.com/fb55/htmlparser2?sponsor=1", - { - "type": "github", - "url": "https://github.com/sponsors/fb55" - } - ], - "dependencies": { - "domelementtype": "^2.3.0", - "domhandler": "^5.0.3", - "domutils": "^3.0.1", - "entities": "^4.4.0" - } - }, "node_modules/http-deceiver": { "version": "1.2.7", "resolved": "https://registry.npmjs.org/http-deceiver/-/http-deceiver-1.2.7.tgz", @@ -12253,12 +12064,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/is-subset": { - "version": "0.1.1", - "resolved": "https://registry.npmjs.org/is-subset/-/is-subset-0.1.1.tgz", - "integrity": "sha512-6Ybun0IkarhmEqxXCNw/C0bna6Zb/TkfUX9UbwJtK6ObwAVCxmAP308WWTHviM/zAqXk05cdhYsUsZeGQh99iw==", - "dev": true - }, "node_modules/is-symbol": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.4.tgz", @@ -15529,23 +15334,11 @@ "resolved": "https://registry.npmjs.org/lodash.flatten/-/lodash.flatten-4.4.0.tgz", "integrity": "sha512-C5N2Z3DgnnKr0LOpv/hKCgKdb7ZZwafIrsesve6lmzvZIRZRGaZ/l6Q8+2W7NaT+ZwO3fFlSCzCzrDCFdJfZ4g==" }, - "node_modules/lodash.flattendeep": { - "version": "4.4.0", - "resolved": "https://registry.npmjs.org/lodash.flattendeep/-/lodash.flattendeep-4.4.0.tgz", - "integrity": "sha512-uHaJFihxmJcEX3kT4I23ABqKKalJ/zDrDg0lsFtc1h+3uw49SIJ5beyhx5ExVRti3AvKoOJngIj7xz3oylPdWQ==", - "dev": true - }, "node_modules/lodash.invokemap": { "version": "4.6.0", "resolved": "https://registry.npmjs.org/lodash.invokemap/-/lodash.invokemap-4.6.0.tgz", "integrity": "sha512-CfkycNtMqgUlfjfdh2BhKO/ZXrP8ePOX5lEU/g0R3ItJcnuxWDwokMGKx1hWcfOikmyOVx6X9IwWnDGlgKl61w==" }, - "node_modules/lodash.isequal": { - "version": "4.5.0", - "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz", - "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==", - "dev": true - }, "node_modules/lodash.isplainobject": { "version": "4.0.6", "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz", @@ -15874,12 +15667,6 @@ "resolved": "https://registry.npmjs.org/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz", "integrity": "sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==" }, - "node_modules/moo": { - "version": "0.5.2", - "resolved": "https://registry.npmjs.org/moo/-/moo-0.5.2.tgz", - "integrity": "sha512-iSAJLHYKnX41mKcJKjqvnAN9sf0LMDTXDEvFv+ffuRR9a1MIuXLjMNL6EsnDHSkKLTWNqQQ5uo61P4EbU4NU+Q==", - "dev": true - }, "node_modules/mrmime": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-1.0.1.tgz", @@ -15961,34 +15748,6 @@ "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz", "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==" }, - "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", @@ -16630,31 +16389,6 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/parse5": { - "version": "7.1.2", - "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.1.2.tgz", - "integrity": "sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==", - "dev": true, - "dependencies": { - "entities": "^4.4.0" - }, - "funding": { - "url": "https://github.com/inikulin/parse5?sponsor=1" - } - }, - "node_modules/parse5-htmlparser2-tree-adapter": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-7.0.0.tgz", - "integrity": "sha512-B77tOZrqqfUfnVcOrUvfdLbz4pu4RopLD/4vmu3HUPswwTA8OH0EMW9BlWR2B0RCoiZRAHEUu7IxeP1Pd1UU+g==", - "dev": true, - "dependencies": { - "domhandler": "^5.0.2", - "parse5": "^7.0.0" - }, - "funding": { - "url": "https://github.com/inikulin/parse5?sponsor=1" - } - }, "node_modules/parseurl": { "version": "1.3.3", "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz", @@ -16722,12 +16456,6 @@ "node": ">=8" } }, - "node_modules/performance-now": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz", - "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==", - "dev": true - }, "node_modules/picocolors": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", @@ -17839,34 +17567,6 @@ "resolved": "https://registry.npmjs.org/queue-tick/-/queue-tick-1.0.1.tgz", "integrity": "sha512-kJt5qhMxoszgU/62PLP1CJytzd2NKetjSRnyuj31fDd3Rlcz3fzlFdFLD1SItunPwyqEOkca6GbV612BWfaBag==" }, - "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": "sha512-cz93DjNeLY0idrCNOH6PviZGRN9GJhsdm9hpn1YCS879fj4W+x5IFJhhkRZcwVgMmFF7R82UA/7Oh+R8lLZg6A==", - "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", @@ -19139,16 +18839,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": "sha512-nDG1rZeP6oFTLN6yNDV/uiAvs1+FS/KlrEwh7+y7dpuApDBy6bI2HTBcc0/V8lv9OTqfyD34eF7au2pm8aBbhA==", - "dev": true, - "dependencies": { - "lodash.flattendeep": "^4.4.0", - "nearley": "^2.7.10" - } - }, "node_modules/rsvp": { "version": "4.8.5", "resolved": "https://registry.npmjs.org/rsvp/-/rsvp-4.8.5.tgz", diff --git a/package.json b/package.json index 53d918b662..3a71aa8ea1 100644 --- a/package.json +++ b/package.json @@ -73,9 +73,7 @@ "@edx/browserslist-config": "^1.1.1", "@edx/frontend-build": "13.0.8", "@edx/reactifex": "1.1.0", - "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0", "babel-plugin-formatjs": "10.5.10", - "enzyme": "3.11.0", "eslint-plugin-import": "2.28.0", "glob": "7.2.3", "history": "5.3.0", diff --git a/src/base-container/components/default-layout/DefaultLayout.test.jsx b/src/base-container/components/default-layout/DefaultLayout.test.jsx index 3f6956d746..02f65f8098 100644 --- a/src/base-container/components/default-layout/DefaultLayout.test.jsx +++ b/src/base-container/components/default-layout/DefaultLayout.test.jsx @@ -1,50 +1,50 @@ import React from 'react'; import { IntlProvider } from '@edx/frontend-platform/i18n'; -import { mount } from 'enzyme'; +import { render, screen } from '@testing-library/react'; import { DefaultLargeLayout, DefaultMediumLayout, DefaultSmallLayout } from './index'; describe('Default Layout tests', () => { it('should display the form passed as a child in SmallScreenLayout', () => { - const smallScreen = mount( + render(
-
+
, ); - expect(smallScreen.find('form').exists()).toEqual(true); + expect(screen.getByRole('form')).toBeDefined(); }); it('should display the form passed as a child in MediumScreenLayout', () => { - const mediumScreen = mount( + render(
-
+
, ); - expect(mediumScreen.find('form').exists()).toEqual(true); + expect(screen.getByRole('form')).toBeDefined(); }); it('should display the form passed as a child in LargeScreenLayout', () => { - const largeScreen = mount( + render(
-
+
, ); - expect(largeScreen.find('form').exists()).toEqual(true); + expect(screen.getByRole('form')).toBeDefined(); }); }); diff --git a/src/base-container/tests/BaseContainer.test.jsx b/src/base-container/tests/BaseContainer.test.jsx index 49b2a6664e..b00826f91e 100644 --- a/src/base-container/tests/BaseContainer.test.jsx +++ b/src/base-container/tests/BaseContainer.test.jsx @@ -1,7 +1,7 @@ import React from 'react'; import { IntlProvider } from '@edx/frontend-platform/i18n'; -import { mount } from 'enzyme'; +import { render } from '@testing-library/react'; import { Context as ResponsiveContext } from 'react-responsive'; import BaseContainer from '../index'; @@ -12,16 +12,16 @@ const LargeScreen = { }; describe('Base component tests', () => { - it('should should default layout', () => { - const baseContainer = mount( + it('should show default layout', () => { + const { container } = render( , LargeScreen, ); - expect(baseContainer.find('.banner__image').exists()).toBeFalsy(); - expect(baseContainer.find('.large-screen-svg-primary').exists()).toBeTruthy(); + expect(container.querySelector('.banner__image')).toBeNull(); + expect(container.querySelector('.large-screen-svg-primary')).toBeDefined(); }); it('[experiment] should show image layout for treatment group', () => { @@ -31,13 +31,13 @@ describe('Base component tests', () => { }, }; - const baseContainer = mount( + const { container } = render( , LargeScreen, ); - expect(baseContainer.find('.banner__image').exists()).toBeTruthy(); + expect(container.querySelector('.banner__image')).toBeDefined(); }); }); diff --git a/src/field-renderer/tests/FieldRenderer.test.jsx b/src/field-renderer/tests/FieldRenderer.test.jsx index 2bad91ff7a..3d8797eec4 100644 --- a/src/field-renderer/tests/FieldRenderer.test.jsx +++ b/src/field-renderer/tests/FieldRenderer.test.jsx @@ -1,7 +1,7 @@ import React from 'react'; import { getConfig } from '@edx/frontend-platform'; -import { mount } from 'enzyme'; +import { fireEvent, render } from '@testing-library/react'; import FieldRenderer from '../FieldRenderer'; @@ -28,13 +28,14 @@ describe('FieldRendererTests', () => { options: [['1997', '1997'], ['1998', '1998']], }; - const fieldRenderer = mount(); - const field = fieldRenderer.find('select#yob-field'); - field.simulate('change', { target: { value: 1997 } }); + const { container } = render(); + const input = container.querySelector('select#yob-field'); + const label = container.querySelector('label'); + fireEvent.change(input, { target: { value: 1997 } }); - expect(field.type()).toEqual('select'); - expect(fieldRenderer.find('label').text()).toEqual('Year of Birth'); - expect(value).toEqual(1997); + expect(input.type).toEqual('select-one'); + expect(label.textContent).toContain(fieldData.label); + expect(value).toEqual('1997'); }); it('should return null if no options are provided for select field', () => { @@ -44,8 +45,8 @@ describe('FieldRendererTests', () => { name: 'yob-field', }; - const fieldRenderer = mount( {}} />); - expect(fieldRenderer.html()).toBeNull(); + const { container } = render( {}} />); + expect(container.innerHTML).toEqual(''); }); it('should render textarea field', () => { @@ -55,12 +56,13 @@ describe('FieldRendererTests', () => { name: 'goals-field', }; - const fieldRenderer = mount(); - const field = fieldRenderer.find('#goals-field').last(); - field.simulate('change', { target: { value: 'These are my goals.' } }); + const { container } = render(); + const input = container.querySelector('#goals-field'); + const label = container.querySelector('label'); + fireEvent.change(input, { target: { value: 'These are my goals.' } }); - expect(field.type()).toEqual('textarea'); - expect(fieldRenderer.find('label').text()).toEqual('Why do you want to join this platform?'); + expect(input.type).toEqual(fieldData.type); + expect(label.textContent).toContain('Why do you want to join this platform?'); expect(value).toEqual('These are my goals.'); }); @@ -71,12 +73,13 @@ describe('FieldRendererTests', () => { name: 'company-field', }; - const fieldRenderer = mount(); - const field = fieldRenderer.find('#company-field').last(); - field.simulate('change', { target: { value: 'ABC' } }); + const { container } = render(); + const input = container.querySelector('input#company-field'); + const label = container.querySelector('label'); + fireEvent.change(input, { target: { value: 'ABC' } }); - expect(field.type()).toEqual('input'); - expect(fieldRenderer.find('label').text()).toEqual('Company'); + expect(input.type).toEqual(fieldData.type); + expect(label.textContent).toContain(fieldData.label); expect(value).toEqual('ABC'); }); @@ -87,12 +90,13 @@ describe('FieldRendererTests', () => { name: 'marketing-emails-opt-in-field', }; - const fieldRenderer = mount(); - const field = fieldRenderer.find('input#marketing-emails-opt-in-field'); - field.simulate('change', { target: { checked: true, type: 'checkbox' } }); + const { container } = render(); + const input = container.querySelector('input#marketing-emails-opt-in-field'); + const label = container.querySelector('label'); + fireEvent.click(input); - expect(field.prop('type')).toEqual('checkbox'); - expect(fieldRenderer.find('label').text()).toEqual(fieldData.label); + expect(input.type).toEqual(fieldData.type); + expect(label.textContent).toContain(fieldData.label); expect(value).toEqual(true); }); @@ -101,8 +105,8 @@ describe('FieldRendererTests', () => { type: 'unknown', }; - const fieldRenderer = mount( {}} />); - expect(fieldRenderer.html()).toBeNull(); + const { container } = render( {}} />); + expect(container.innerHTML).toContain(''); }); it('should run onBlur and onFocus functions for a field if given', () => { @@ -117,7 +121,7 @@ describe('FieldRendererTests', () => { functionValue = `${e.target.name} focussed`; }; - const fieldRenderer = mount( + const { container } = render( { onChangeHandler={changeHandler} />, ); - const field = fieldRenderer.find('#test-field').last(); + const input = container.querySelector('#test-field'); - field.simulate('focus'); + fireEvent.focus(input); expect(functionValue).toEqual('test-field focussed'); - field.simulate('blur'); + fireEvent.blur(input); expect(functionValue).toEqual('test-field blurred'); }); it('should render error message for required text fields', () => { const fieldData = { type: 'text', label: 'First Name', name: 'first-name-field' }; - const fieldRenderer = mount( + const { container } = render( { />, ); - expect(fieldRenderer.find('.form-text-size').last().text()).toEqual('Enter your first name'); + expect(container.querySelector(`#${fieldData.name}-error`).textContent).toEqual('Enter your first name'); }); it('should render error message for required select fields', () => { @@ -155,7 +159,7 @@ describe('FieldRendererTests', () => { type: 'select', label: 'Preference', name: 'preference-field', options: [['a', 'Opt 1'], ['b', 'Opt 2']], }; - const fieldRenderer = mount( + const { container } = render( { />, ); - expect(fieldRenderer.find('.form-text-size').last().text()).toEqual('Select your preference'); + expect(container.querySelector(`#${fieldData.name}-error`).textContent).toEqual('Select your preference'); }); it('should render error message for required textarea fields', () => { const fieldData = { type: 'textarea', label: 'Goals', name: 'goals-field' }; - const fieldRenderer = mount( + const { container } = render( { />, ); - expect(fieldRenderer.find('.form-text-size').last().text()).toEqual('Tell us your goals'); + expect(container.querySelector(`#${fieldData.name}-error`).textContent).toEqual('Tell us your goals'); }); it('should render error message for required checkbox fields', () => { const fieldData = { type: 'checkbox', label: 'Honor Code', name: 'honor-code-field' }; - const fieldRenderer = mount( + const { container } = render( { />, ); - expect(fieldRenderer.find('.form-text-size').last().text()).toEqual('You must agree to our Honor Code'); + expect(container.querySelector(`#${fieldData.name}-error`).textContent).toEqual('You must agree to our Honor Code'); }); }); diff --git a/src/logistration/Logistration.test.jsx b/src/logistration/Logistration.test.jsx index b63735f64c..b5259c1173 100644 --- a/src/logistration/Logistration.test.jsx +++ b/src/logistration/Logistration.test.jsx @@ -4,13 +4,12 @@ import { Provider } from 'react-redux'; import { getConfig, mergeConfig } from '@edx/frontend-platform'; import { sendPageEvent, sendTrackEvent } from '@edx/frontend-platform/analytics'; import { configure, injectIntl, IntlProvider } from '@edx/frontend-platform/i18n'; -import { mount } from 'enzyme'; +import { fireEvent, render, screen } from '@testing-library/react'; import { MemoryRouter } from 'react-router-dom'; import configureStore from 'redux-mock-store'; import Logistration from './Logistration'; import { clearThirdPartyAuthContextErrorMessage } from '../common-components/data/actions'; -import { RenderInstitutionButton } from '../common-components/InstitutionLogistration'; import { COMPLETE_STATE, LOGIN_PAGE, REGISTER_PAGE, } from '../data/constants'; @@ -99,16 +98,16 @@ describe('Logistration', () => { ALLOW_PUBLIC_ACCOUNT_CREATION: true, }); - const logistration = mount(reduxWrapper()); + const { container } = render(reduxWrapper()); - expect(logistration.find('#main-content').find('RegistrationPage').exists()).toBeTruthy(); + expect(container.querySelector('RegistrationPage')).toBeDefined(); }); it('should render login page', () => { const props = { selectedPage: LOGIN_PAGE }; - const logistration = mount(reduxWrapper()); + const { container } = render(reduxWrapper()); - expect(logistration.find('#main-content').find('LoginPage').exists()).toBeTruthy(); + expect(container.querySelector('LoginPage')).toBeDefined(); }); it('should render login/register headings when show registration links is disabled', () => { @@ -117,18 +116,18 @@ describe('Logistration', () => { }); let props = { selectedPage: LOGIN_PAGE }; - let logistration = mount(reduxWrapper()); + const { rerender } = render(reduxWrapper()); // verifying sign in heading - expect(logistration.find('#main-content').find('h3').text()).toEqual('Sign in'); + expect(screen.getByRole('heading', { level: 3 }).textContent).toEqual('Sign in'); // register page is still accessible when SHOW_REGISTRATION_LINKS is false // but it needs to be accessed directly props = { selectedPage: REGISTER_PAGE }; - logistration = mount(reduxWrapper()); + rerender(reduxWrapper()); // verifying register heading - expect(logistration.find('#main-content').find('h3').text()).toEqual('Register'); + expect(screen.getByRole('heading', { level: 3 }).textContent).toEqual('Register'); }); it('should render only login page when public account creation is disabled', () => { @@ -152,14 +151,14 @@ describe('Logistration', () => { }); const props = { selectedPage: LOGIN_PAGE }; - const logistration = mount(reduxWrapper()); + const { container } = render(reduxWrapper()); // verifying sign in heading for institution login false - expect(logistration.find('#main-content').find('h3').text()).toEqual('Sign in'); + expect(screen.getByRole('heading', { level: 3 }).textContent).toEqual('Sign in'); // verifying tabs heading for institution login true - logistration.find(RenderInstitutionButton).simulate('click', { institutionLogin: true }); - expect(logistration.find('#controlled-tab').exists()).toBeTruthy(); + fireEvent.click(screen.getByRole('link')); + expect(container.querySelector('#controlled-tab')).toBeDefined(); }); it('should display institution login option when secondary providers are present', () => { @@ -182,12 +181,12 @@ describe('Logistration', () => { }); const props = { selectedPage: LOGIN_PAGE }; - const logistration = mount(reduxWrapper()); - expect(logistration.text().includes('Institution/campus credentials')).toBe(true); + render(reduxWrapper()); + expect(screen.getByText('Institution/campus credentials')).toBeDefined(); // on clicking "Institution/campus credentials" button, it should display institution login page - logistration.find(RenderInstitutionButton).simulate('click', { institutionLogin: true }); - expect(logistration.text().includes('Test University')).toBe(true); + fireEvent.click(screen.getByText('Institution/campus credentials')); + expect(screen.getByText('Test University')).toBeDefined(); mergeConfig({ DISABLE_ENTERPRISE_LOGIN: '', @@ -213,8 +212,8 @@ describe('Logistration', () => { }); const props = { selectedPage: LOGIN_PAGE }; - const logistration = mount(reduxWrapper()); - logistration.find(RenderInstitutionButton).simulate('click', { institutionLogin: true }); + render(reduxWrapper()); + fireEvent.click(screen.getByText('Institution/campus credentials')); expect(sendTrackEvent).toHaveBeenCalledWith('edx.bi.institution_login_form.toggled', { category: 'user-engagement' }); expect(sendPageEvent).toHaveBeenCalledWith('login_and_registration', 'institution_login'); @@ -245,9 +244,9 @@ describe('Logistration', () => { delete window.location; window.location = { hostname: getConfig().SITE_NAME, href: getConfig().BASE_URL }; - const root = mount(reduxWrapper()); - root.find(RenderInstitutionButton).simulate('click', { institutionLogin: true }); - expect(root.text().includes('Test University')).toBe(true); + render(reduxWrapper()); + fireEvent.click(screen.getByText('Institution/campus credentials')); + expect(screen.getByText('Test University')).toBeDefined(); mergeConfig({ DISABLE_ENTERPRISE_LOGIN: '', @@ -256,15 +255,15 @@ describe('Logistration', () => { it('should fire action to backup registration form on tab click', () => { store.dispatch = jest.fn(store.dispatch); - const logistration = mount(reduxWrapper()); - logistration.find('a[data-rb-event-key="/login"]').simulate('click'); + const { container } = render(reduxWrapper()); + fireEvent.click(container.querySelector('a[data-rb-event-key="/login"]')); expect(store.dispatch).toHaveBeenCalledWith(backupRegistrationForm()); }); it('should clear tpa context errorMessage tab click', () => { store.dispatch = jest.fn(store.dispatch); - const logistration = mount(reduxWrapper()); - logistration.find('a[data-rb-event-key="/login"]').simulate('click'); + const { container } = render(reduxWrapper()); + fireEvent.click(container.querySelector('a[data-rb-event-key="/login"]')); expect(store.dispatch).toHaveBeenCalledWith(clearThirdPartyAuthContextErrorMessage()); }); }); diff --git a/src/setupTest.js b/src/setupTest.js index 505ec19d04..eabcdc328c 100755 --- a/src/setupTest.js +++ b/src/setupTest.js @@ -3,10 +3,7 @@ import { getConfig } from '@edx/frontend-platform'; import { configure as configureLogging } from '@edx/frontend-platform/logging'; -import Adapter from '@wojtekmaj/enzyme-adapter-react-17'; -import Enzyme from 'enzyme'; -Enzyme.configure({ adapter: new Adapter() }); class MockLoggingService { logInfo = jest.fn();