From 69e090e9a651818302ba0f26654c40077ee6e400 Mon Sep 17 00:00:00 2001 From: Syed Ali Abbas Zaidi <88369802+Syed-Ali-Abbas-Zaidi@users.noreply.github.com> Date: Tue, 30 Jan 2024 12:31:34 +0500 Subject: [PATCH] feat: migrate enzyme to react-unit-test-utils (#276) --- jest.config.js | 3 - package-lock.json | 322 +----------------- package.json | 5 +- src/ExperimentContext.test.jsx | 5 +- src/components/Banner.test.jsx | 10 +- src/components/NoticesWrapper/index.test.jsx | 12 +- src/components/ZendeskFab/index.test.jsx | 4 +- .../ActionButton/index.test.jsx | 6 +- .../BeginCourseButton.test.jsx | 13 +- .../CourseCardActions/ResumeButton.test.jsx | 13 +- .../SelectSessionButton.test.jsx | 13 +- .../CourseCardActions/UpgradeButton.test.jsx | 13 +- .../ViewCourseButton.test.jsx | 13 +- .../SelectSessionButton.test.jsx.snap | 11 +- .../CertificateBanner.test.jsx | 34 +- .../CourseCardBanners/CourseBanner.test.jsx | 44 +-- .../__snapshots__/index.test.jsx.snap | 2 + .../CourseCardBanners/CreditBanner/index.jsx | 2 +- .../CreditBanner/index.test.jsx | 26 +- .../views/ApprovedContent.test.jsx | 12 +- .../views/EligibleContent.test.jsx | 12 +- .../views/MustRequestContent.test.jsx | 14 +- .../views/PendingContent.test.jsx | 12 +- .../views/RejectedContent.test.jsx | 8 +- .../views/components/CreditContent.jsx | 3 +- .../views/components/CreditContent.test.jsx | 28 +- .../CreditRequestForm/index.test.jsx | 20 +- .../views/components/ProviderLink.test.jsx | 8 +- .../__snapshots__/CreditContent.test.jsx.snap | 3 + .../EntitlementBanner.test.jsx | 6 +- .../ProgramsList.test.jsx | 6 +- .../RelatedProgramsBanner/index.test.jsx | 4 +- .../CertificateBanner.test.jsx.snap | 2 +- .../CourseCardBanners/index.test.jsx | 6 +- .../__snapshots__/index.test.jsx.snap | 86 ++--- .../CourseCardDetails/index.test.jsx | 33 +- .../components/CourseCardImage.test.jsx | 12 +- .../components/CourseCardTitle.test.jsx | 18 +- .../RelatedProgramsBadge/index.test.jsx | 4 +- .../CourseCardImage.test.jsx.snap | 80 ++--- src/containers/CourseCard/index.test.jsx | 6 +- .../ActiveCourseFilters.test.jsx | 4 +- .../CourseFilterControls.test.jsx | 8 +- .../components/Checkbox.test.jsx | 4 +- .../components/FilterForm.test.jsx | 4 +- .../components/SortForm.test.jsx | 4 +- .../CourseList/NoCoursesView/index.test.jsx | 4 +- .../__snapshots__/index.test.jsx.snap | 142 ++++---- src/containers/CourseList/index.test.jsx | 12 +- .../Dashboard/DashboardLayout.test.jsx | 37 +- src/containers/Dashboard/LoadingView.test.jsx | 6 +- .../__snapshots__/index.test.jsx.snap | 11 +- src/containers/Dashboard/index.jsx | 2 +- src/containers/Dashboard/index.test.jsx | 16 +- .../EmailSettingsModal/index.test.jsx | 8 +- .../__snapshots__/index.test.jsx.snap | 2 +- .../EnterpriseDashboardModal/index.test.jsx | 6 +- .../LearnerDashboardHeader/BrandLogo.test.jsx | 10 +- .../CollapsedHeader/CollapseMenuBody.test.jsx | 8 +- .../CollapseMenuBody.test.jsx.snap | 60 ++-- .../__snapshots__/index.test.jsx.snap | 2 +- .../CollapsedHeader/index.test.jsx | 8 +- .../__snapshots__/index.test.jsx.snap | 2 +- .../ConfirmEmailBanner/index.test.jsx | 6 +- .../AuthenticatedUserDropdown.test.jsx | 8 +- .../AuthenticatedUserDropdown.test.jsx.snap | 68 ++-- .../__snapshots__/index.test.jsx.snap | 2 +- .../ExpandedHeader/index.test.jsx | 6 +- .../LearnerDashboardHeader/index.test.jsx | 12 +- .../__snapshots__/index.test.jsx.snap | 308 +++++++++-------- src/containers/MasqueradeBar/index.test.jsx | 14 +- .../components/ProgramCard.test.jsx | 4 +- .../RelatedProgramsModal/index.test.jsx | 6 +- .../SelectSessionModal/index.test.jsx | 8 +- .../components/ConfirmPane.test.jsx | 4 +- .../components/FinishedPane.test.jsx | 6 +- .../components/ReasonPane.test.jsx | 6 +- .../UnenrollConfirmModal/index.test.jsx | 10 +- .../LoadedSidebar/index.test.jsx | 8 +- .../NoCoursesSidebar/index.test.jsx | 8 +- .../WidgetFooter/index.test.jsx | 8 +- .../WidgetNavbar/index.test.jsx | 11 +- src/setupTest.jsx | 5 - .../LookingForChallengeWidget/index.test.jsx | 4 +- .../components/LoadedView.test.jsx | 6 +- .../components/LoadingView.test.jsx | 4 +- .../components/ProductCard.test.jsx | 10 +- .../components/ProductCardContainer.test.jsx | 12 +- .../components/ProductCardHeader.test.jsx | 12 +- .../ProductRecommendations/index.test.jsx | 16 +- .../PaintedDoorExperimentContext.test.jsx | 6 +- .../__snapshots__/index.test.jsx.snap | 20 +- .../PaintedDoorModal/index.test.jsx | 15 +- .../index.test.jsx | 32 +- .../RecommendationsPanel/LoadedView.test.jsx | 22 +- .../RecommendationsPanel/LoadingView.test.jsx | 4 +- .../RecommendationsPanel/index.test.jsx | 19 +- 97 files changed, 870 insertions(+), 1114 deletions(-) diff --git a/jest.config.js b/jest.config.js index e6b11169..d4578076 100644 --- a/jest.config.js +++ b/jest.config.js @@ -6,9 +6,6 @@ module.exports = createConfig('jest', { '/src/setupTest.jsx', ], modulePaths: ['/src/'], - snapshotSerializers: [ - 'enzyme-to-json/serializer', - ], coveragePathIgnorePatterns: [ 'src/segment.js', 'src/postcss.config.js', diff --git a/package-lock.json b/package-lock.json index 7745842a..23e8c504 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,7 +15,7 @@ "@edx/frontend-enterprise-hotjar": "^2.0.0", "@edx/frontend-platform": "^5.5.4", "@edx/paragon": "^20.44.0", - "@edx/react-unit-test-utils": "^1.7.0", + "@edx/react-unit-test-utils": "1.7.1", "@fortawesome/fontawesome-svg-core": "^1.2.36", "@fortawesome/free-brands-svg-icons": "^5.15.4", "@fortawesome/free-solid-svg-icons": "^5.15.4", @@ -29,8 +29,6 @@ "core-js": "3.16.2", "dompurify": "^2.3.1", "email-prop-type": "^3.0.1", - "enzyme": "^3.11.0", - "enzyme-to-json": "^3.6.2", "file-saver": "^2.0.5", "filesize": "^8.0.6", "font-awesome": "4.7.0", @@ -67,7 +65,6 @@ "@edx/reactifex": "^2.1.1", "@testing-library/jest-dom": "^5.14.1", "@testing-library/react": "^12.1.0", - "@wojtekmaj/enzyme-adapter-react-17": "0.8.0", "axios-mock-adapter": "^1.20.0", "copy-webpack-plugin": "^11.0.0", "fetch-mock": "^9.11.0", @@ -2715,9 +2712,9 @@ "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, "node_modules/@edx/react-unit-test-utils": { - "version": "1.7.0", - "resolved": "https://registry.npmjs.org/@edx/react-unit-test-utils/-/react-unit-test-utils-1.7.0.tgz", - "integrity": "sha512-wuUIelYGa9P5/n4+qDGevWH+cQS8iUOzTHpoc5yujqDED85i733U2Yt6cI+jSTAfQtCzPBn2pkGYdCLz5zL+hw==", + "version": "1.7.1", + "resolved": "https://registry.npmjs.org/@edx/react-unit-test-utils/-/react-unit-test-utils-1.7.1.tgz", + "integrity": "sha512-EEMoy0SIZOpJAsrr8BNxW+ZL13UzqCw0z5MFNO1AGgElsUbiXiVY/ReRkstLJjf4CFiXro6mFhtKMFmz1Wg2cQ==", "dependencies": { "@edx/browserslist-config": "^1.1.1", "@edx/frontend-platform": "4.6.0", @@ -6209,14 +6206,6 @@ "@types/node": "*" } }, - "node_modules/@types/cheerio": { - "version": "0.22.31", - "resolved": "https://registry.npmjs.org/@types/cheerio/-/cheerio-0.22.31.tgz", - "integrity": "sha512-Kt7Cdjjdi2XWSfrZ53v4Of0wG3ZcmaegFXjMmz9tfNrZSkzzo36G0AL1YqSdcIA78Etjt6E609pt5h1xnQkPUw==", - "dependencies": { - "@types/node": "*" - } - }, "node_modules/@types/connect": { "version": "3.4.36", "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.36.tgz", @@ -6751,46 +6740,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", @@ -7175,24 +7124,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==", - "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.flat": { "version": "1.3.1", "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.1.tgz", @@ -8349,42 +8280,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==", - "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==", - "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", @@ -9861,11 +9756,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==" - }, "node_modules/dns-equal": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz", @@ -10290,71 +10180,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==", - "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==", - "dependencies": { - "has": "^1.0.3", - "object-is": "^1.1.5" - }, - "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==", - "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==" - }, "node_modules/error-ex": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz", @@ -10423,11 +10248,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==" - }, "node_modules/es-get-iterator": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/es-get-iterator/-/es-get-iterator-1.1.3.tgz", @@ -12971,18 +12791,6 @@ "entities": "^3.0.1" } }, - "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==", - "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", @@ -13092,24 +12900,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==", - "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", @@ -14034,7 +13824,8 @@ "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==" + "integrity": "sha512-6Ybun0IkarhmEqxXCNw/C0bna6Zb/TkfUX9UbwJtK6ObwAVCxmAP308WWTHviM/zAqXk05cdhYsUsZeGQh99iw==", + "dev": true }, "node_modules/is-symbol": { "version": "1.0.4", @@ -17053,11 +16844,6 @@ "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==" - }, "node_modules/lodash.invokemap": { "version": "4.6.0", "resolved": "https://registry.npmjs.org/lodash.invokemap/-/lodash.invokemap-4.6.0.tgz", @@ -17066,7 +16852,8 @@ "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==" + "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==", + "dev": true }, "node_modules/lodash.ismatch": { "version": "4.4.0", @@ -17659,11 +17446,6 @@ "node": "*" } }, - "node_modules/moo": { - "version": "0.5.2", - "resolved": "https://registry.npmjs.org/moo/-/moo-0.5.2.tgz", - "integrity": "sha512-iSAJLHYKnX41mKcJKjqvnAN9sf0LMDTXDEvFv+ffuRR9a1MIuXLjMNL6EsnDHSkKLTWNqQQ5uo61P4EbU4NU+Q==" - }, "node_modules/mrmime": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-1.0.1.tgz", @@ -17745,32 +17527,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==", - "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==" - }, "node_modules/negotiator": { "version": "0.6.3", "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz", @@ -21074,29 +20830,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==", - "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==", - "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", @@ -21183,11 +20916,6 @@ } } }, - "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==" - }, "node_modules/picocolors": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", @@ -22382,31 +22110,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==", - "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==" - }, - "node_modules/randexp": { - "version": "0.4.6", - "resolved": "https://registry.npmjs.org/randexp/-/randexp-0.4.6.tgz", - "integrity": "sha512-80WNmd9DA0tmZrw9qQa62GPPWfuXJknrmVmLcxvq4uZBdYqb1wYoKTmnlGUchvVWe0XiLupYkBoXVOxz3C8DYQ==", - "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", @@ -23818,15 +23521,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==", - "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 1ddf0618..e2bbb1e0 100755 --- a/package.json +++ b/package.json @@ -32,7 +32,7 @@ "@edx/frontend-enterprise-hotjar": "^2.0.0", "@edx/frontend-platform": "^5.5.4", "@edx/paragon": "^20.44.0", - "@edx/react-unit-test-utils": "^1.7.0", + "@edx/react-unit-test-utils": "1.7.1", "@fortawesome/fontawesome-svg-core": "^1.2.36", "@fortawesome/free-brands-svg-icons": "^5.15.4", "@fortawesome/free-solid-svg-icons": "^5.15.4", @@ -46,8 +46,6 @@ "core-js": "3.16.2", "dompurify": "^2.3.1", "email-prop-type": "^3.0.1", - "enzyme": "^3.11.0", - "enzyme-to-json": "^3.6.2", "file-saver": "^2.0.5", "filesize": "^8.0.6", "font-awesome": "4.7.0", @@ -84,7 +82,6 @@ "@edx/reactifex": "^2.1.1", "@testing-library/jest-dom": "^5.14.1", "@testing-library/react": "^12.1.0", - "@wojtekmaj/enzyme-adapter-react-17": "0.8.0", "axios-mock-adapter": "^1.20.0", "copy-webpack-plugin": "^11.0.0", "fetch-mock": "^9.11.0", diff --git a/src/ExperimentContext.test.jsx b/src/ExperimentContext.test.jsx index c4fa7616..b0a83863 100644 --- a/src/ExperimentContext.test.jsx +++ b/src/ExperimentContext.test.jsx @@ -1,6 +1,5 @@ import React from 'react'; -import { mount } from 'enzyme'; -import { waitFor } from '@testing-library/react'; +import { waitFor, render } from '@testing-library/react'; import { useWindowSize } from '@edx/paragon'; import api from 'widgets/ProductRecommendations/api'; @@ -109,7 +108,7 @@ describe('experiments context', () => { state.mock(); - mount( + render( , diff --git a/src/components/Banner.test.jsx b/src/components/Banner.test.jsx index eca59dd3..60aac6d2 100644 --- a/src/components/Banner.test.jsx +++ b/src/components/Banner.test.jsx @@ -1,4 +1,4 @@ -import { shallow } from 'enzyme'; +import { shallow } from '@edx/react-unit-test-utils'; import { Alert } from '@edx/paragon'; @@ -11,17 +11,17 @@ describe('Banner', () => { describe('snapshot', () => { test('renders default banner', () => { const wrapper = shallow(); - expect(wrapper).toMatchSnapshot(); + expect(wrapper.snapshot).toMatchSnapshot(); }); test('renders with variants', () => { const wrapper = shallow(); - expect(wrapper).toMatchSnapshot(); + expect(wrapper.snapshot).toMatchSnapshot(); - expect(wrapper.find(Alert).prop('variant')).toEqual('success'); + expect(wrapper.instance.findByType(Alert)[0].props.variant).toEqual('success'); }); test('renders with custom class', () => { const wrapper = shallow(); - expect(wrapper).toMatchSnapshot(); + expect(wrapper.snapshot).toMatchSnapshot(); }); }); }); diff --git a/src/components/NoticesWrapper/index.test.jsx b/src/components/NoticesWrapper/index.test.jsx index f7f8b815..ea0906ed 100644 --- a/src/components/NoticesWrapper/index.test.jsx +++ b/src/components/NoticesWrapper/index.test.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import { shallow } from 'enzyme'; +import { shallow } from '@edx/react-unit-test-utils'; import useNoticesWrapperData from './hooks'; import NoticesWrapper from '.'; @@ -22,13 +22,15 @@ describe('NoticesWrapper component', () => { it('does not show children if redirected', () => { useNoticesWrapperData.mockReturnValueOnce({ isRedirected: true }); el = shallow({children}); - expect(el.children().length).toEqual(0); + expect(el.instance.children.length).toEqual(0); }); it('shows children if not redirected', () => { el = shallow({children}); - expect(el.children().length).toEqual(2); - expect(el.children().at(0).matchesElement(children[0])).toEqual(true); - expect(el.children().at(1).matchesElement(children[1])).toEqual(true); + expect(el.instance.children.length).toEqual(2); + expect(el.instance.children[0].type).toEqual(shallow(children[0]).type); + expect(el.instance.props).toEqual(shallow(children[0]).props); + expect(el.instance.children[1].type).toEqual(shallow(children[1]).type); + expect(el.instance.props).toEqual(shallow(children[1]).props); }); }); }); diff --git a/src/components/ZendeskFab/index.test.jsx b/src/components/ZendeskFab/index.test.jsx index 8c62a4fc..d57da5d4 100644 --- a/src/components/ZendeskFab/index.test.jsx +++ b/src/components/ZendeskFab/index.test.jsx @@ -1,4 +1,4 @@ -import { shallow } from 'enzyme'; +import { shallow } from '@edx/react-unit-test-utils'; import ZendeskFab from '.'; @@ -7,6 +7,6 @@ jest.mock('react-zendesk', () => 'Zendesk'); describe('ZendeskFab', () => { test('snapshot', () => { const wrapper = shallow(); - expect(wrapper).toMatchSnapshot(); + expect(wrapper.snapshot).toMatchSnapshot(); }); }); diff --git a/src/containers/CourseCard/components/CourseCardActions/ActionButton/index.test.jsx b/src/containers/CourseCard/components/CourseCardActions/ActionButton/index.test.jsx index d5eb07f3..f57db0c7 100644 --- a/src/containers/CourseCard/components/CourseCardActions/ActionButton/index.test.jsx +++ b/src/containers/CourseCard/components/CourseCardActions/ActionButton/index.test.jsx @@ -1,4 +1,4 @@ -import { shallow } from 'enzyme'; +import { shallow } from '@edx/react-unit-test-utils'; import ActionButton from '.'; @@ -14,12 +14,12 @@ describe('ActionButton', () => { test('is collapsed', () => { useIsCollapsed.mockReturnValueOnce(true); const wrapper = shallow(); - expect(wrapper).toMatchSnapshot(); + expect(wrapper.snapshot).toMatchSnapshot(); }); test('is not collapsed', () => { useIsCollapsed.mockReturnValueOnce(false); const wrapper = shallow(); - expect(wrapper).toMatchSnapshot(); + expect(wrapper.snapshot).toMatchSnapshot(); }); }); }); diff --git a/src/containers/CourseCard/components/CourseCardActions/BeginCourseButton.test.jsx b/src/containers/CourseCard/components/CourseCardActions/BeginCourseButton.test.jsx index fad653ee..f34a534c 100644 --- a/src/containers/CourseCard/components/CourseCardActions/BeginCourseButton.test.jsx +++ b/src/containers/CourseCard/components/CourseCardActions/BeginCourseButton.test.jsx @@ -1,6 +1,5 @@ -import { shallow } from 'enzyme'; +import { shallow } from '@edx/react-unit-test-utils'; -import { htmlProps } from 'data/constants/htmlKeys'; import { reduxHooks } from 'hooks'; import track from 'tracking'; import useActionDisabledState from '../hooks'; @@ -59,10 +58,10 @@ describe('BeginCourseButton', () => { wrapper = shallow(); }); test('snapshot', () => { - expect(wrapper).toMatchSnapshot(); + expect(wrapper.snapshot).toMatchSnapshot(); }); it('should be disabled', () => { - expect(wrapper.prop(htmlProps.disabled)).toEqual(true); + expect(wrapper.instance.props.disabled).toEqual(true); }); }); describe('enabled', () => { @@ -70,13 +69,13 @@ describe('BeginCourseButton', () => { wrapper = shallow(); }); test('snapshot', () => { - expect(wrapper).toMatchSnapshot(); + expect(wrapper.snapshot).toMatchSnapshot(); }); it('should be enabled', () => { - expect(wrapper.prop(htmlProps.disabled)).toEqual(false); + expect(wrapper.instance.props.disabled).toEqual(false); }); it('should track enter course clicked event on click, with exec ed param', () => { - expect(wrapper.prop(htmlProps.onClick)).toEqual(reduxHooks.useTrackCourseEvent( + expect(wrapper.instance.props.onClick).toEqual(reduxHooks.useTrackCourseEvent( track.course.enterCourseClicked, props.cardId, homeUrl + execEdPath(props.cardId), diff --git a/src/containers/CourseCard/components/CourseCardActions/ResumeButton.test.jsx b/src/containers/CourseCard/components/CourseCardActions/ResumeButton.test.jsx index 1f088c24..c4ca41e5 100644 --- a/src/containers/CourseCard/components/CourseCardActions/ResumeButton.test.jsx +++ b/src/containers/CourseCard/components/CourseCardActions/ResumeButton.test.jsx @@ -1,6 +1,5 @@ -import { shallow } from 'enzyme'; +import { shallow } from '@edx/react-unit-test-utils'; -import { htmlProps } from 'data/constants/htmlKeys'; import { reduxHooks } from 'hooks'; import track from 'tracking'; import useActionDisabledState from '../hooks'; @@ -57,10 +56,10 @@ describe('ResumeButton', () => { wrapper = shallow(); }); test('snapshot', () => { - expect(wrapper).toMatchSnapshot(); + expect(wrapper.snapshot).toMatchSnapshot(); }); it('should be disabled', () => { - expect(wrapper.prop(htmlProps.disabled)).toEqual(true); + expect(wrapper.instance.props.disabled).toEqual(true); }); }); describe('enabled', () => { @@ -68,13 +67,13 @@ describe('ResumeButton', () => { wrapper = shallow(); }); test('snapshot', () => { - expect(wrapper).toMatchSnapshot(); + expect(wrapper.snapshot).toMatchSnapshot(); }); it('should be enabled', () => { - expect(wrapper.prop(htmlProps.disabled)).toEqual(false); + expect(wrapper.instance.props.disabled).toEqual(false); }); it('should track enter course clicked event on click, with exec ed param', () => { - expect(wrapper.prop(htmlProps.onClick)).toEqual(reduxHooks.useTrackCourseEvent( + expect(wrapper.instance.props.onClick).toEqual(reduxHooks.useTrackCourseEvent( track.course.enterCourseClicked, props.cardId, resumeUrl + execEdPath(props.cardId), diff --git a/src/containers/CourseCard/components/CourseCardActions/SelectSessionButton.test.jsx b/src/containers/CourseCard/components/CourseCardActions/SelectSessionButton.test.jsx index e3e89aaf..54208747 100644 --- a/src/containers/CourseCard/components/CourseCardActions/SelectSessionButton.test.jsx +++ b/src/containers/CourseCard/components/CourseCardActions/SelectSessionButton.test.jsx @@ -1,7 +1,6 @@ -import { shallow } from 'enzyme'; +import { shallow } from '@edx/react-unit-test-utils'; import { reduxHooks } from 'hooks'; -import { htmlProps } from 'data/constants/htmlKeys'; import useActionDisabledState from '../hooks'; import SelectSessionButton from './SelectSessionButton'; @@ -19,17 +18,17 @@ let wrapper; describe('SelectSessionButton', () => { const props = { cardId: 'cardId' }; it('default render', () => { - expect(wrapper).toMatchSnapshot(); wrapper = shallow(); - expect(wrapper.prop(htmlProps.disabled)).toEqual(false); - expect(wrapper.prop(htmlProps.onClick).getMockName()).toEqual( + expect(wrapper.snapshot).toMatchSnapshot(); + expect(wrapper.instance.props.disabled).toEqual(false); + expect(wrapper.instance.props.onClick.getMockName()).toEqual( reduxHooks.useUpdateSelectSessionModalCallback().getMockName(), ); }); test('disabled states', () => { useActionDisabledState.mockReturnValueOnce({ disableSelectSession: true }); - expect(wrapper).toMatchSnapshot(); wrapper = shallow(); - expect(wrapper.prop(htmlProps.disabled)).toEqual(true); + expect(wrapper.snapshot).toMatchSnapshot(); + expect(wrapper.instance.props.disabled).toEqual(true); }); }); diff --git a/src/containers/CourseCard/components/CourseCardActions/UpgradeButton.test.jsx b/src/containers/CourseCard/components/CourseCardActions/UpgradeButton.test.jsx index 1476f72b..a539278c 100644 --- a/src/containers/CourseCard/components/CourseCardActions/UpgradeButton.test.jsx +++ b/src/containers/CourseCard/components/CourseCardActions/UpgradeButton.test.jsx @@ -1,8 +1,7 @@ -import { shallow } from 'enzyme'; +import { shallow } from '@edx/react-unit-test-utils'; import track from 'tracking'; import { reduxHooks } from 'hooks'; -import { htmlProps } from 'data/constants/htmlKeys'; import useActionDisabledState from '../hooks'; import UpgradeButton from './UpgradeButton'; @@ -32,9 +31,9 @@ describe('UpgradeButton', () => { describe('snapshot', () => { test('can upgrade', () => { const wrapper = shallow(); - expect(wrapper).toMatchSnapshot(); - expect(wrapper.prop(htmlProps.disabled)).toEqual(false); - expect(wrapper.prop(htmlProps.onClick)).toEqual(reduxHooks.useTrackCourseEvent( + expect(wrapper.snapshot).toMatchSnapshot(); + expect(wrapper.instance.props.disabled).toEqual(false); + expect(wrapper.instance.props.onClick).toEqual(reduxHooks.useTrackCourseEvent( track.course.upgradeClicked, props.cardId, upgradeUrl, @@ -43,8 +42,8 @@ describe('UpgradeButton', () => { test('cannot upgrade', () => { useActionDisabledState.mockReturnValueOnce({ disableUpgradeCourse: true }); const wrapper = shallow(); - expect(wrapper).toMatchSnapshot(); - expect(wrapper.prop(htmlProps.disabled)).toEqual(true); + expect(wrapper.snapshot).toMatchSnapshot(); + expect(wrapper.instance.props.disabled).toEqual(true); }); }); }); diff --git a/src/containers/CourseCard/components/CourseCardActions/ViewCourseButton.test.jsx b/src/containers/CourseCard/components/CourseCardActions/ViewCourseButton.test.jsx index 98ab4225..712f8103 100644 --- a/src/containers/CourseCard/components/CourseCardActions/ViewCourseButton.test.jsx +++ b/src/containers/CourseCard/components/CourseCardActions/ViewCourseButton.test.jsx @@ -1,7 +1,6 @@ -import { shallow } from 'enzyme'; +import { shallow } from '@edx/react-unit-test-utils'; import track from 'tracking'; -import { htmlProps } from 'data/constants/htmlKeys'; import { reduxHooks } from 'hooks'; import useActionDisabledState from '../hooks'; import ViewCourseButton from './ViewCourseButton'; @@ -29,18 +28,18 @@ const homeUrl = 'homeUrl'; describe('ViewCourseButton', () => { test('learner can view course', () => { const wrapper = shallow(); - expect(wrapper).toMatchSnapshot(); - expect(wrapper.prop(htmlProps.onClick)).toEqual(reduxHooks.useTrackCourseEvent( + expect(wrapper.snapshot).toMatchSnapshot(); + expect(wrapper.instance.props.onClick).toEqual(reduxHooks.useTrackCourseEvent( track.course.enterCourseClicked, defaultProps.cardId, homeUrl, )); - expect(wrapper.prop(htmlProps.disabled)).toEqual(false); + expect(wrapper.instance.props.disabled).toEqual(false); }); test('learner cannot view course', () => { useActionDisabledState.mockReturnValueOnce({ disableViewCourse: true }); const wrapper = shallow(); - expect(wrapper).toMatchSnapshot(); - expect(wrapper.prop(htmlProps.disabled)).toEqual(true); + expect(wrapper.snapshot).toMatchSnapshot(); + expect(wrapper.instance.props.disabled).toEqual(true); }); }); diff --git a/src/containers/CourseCard/components/CourseCardActions/__snapshots__/SelectSessionButton.test.jsx.snap b/src/containers/CourseCard/components/CourseCardActions/__snapshots__/SelectSessionButton.test.jsx.snap index e5fbe9f5..fb16bfe5 100644 --- a/src/containers/CourseCard/components/CourseCardActions/__snapshots__/SelectSessionButton.test.jsx.snap +++ b/src/containers/CourseCard/components/CourseCardActions/__snapshots__/SelectSessionButton.test.jsx.snap @@ -1,10 +1,17 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`SelectSessionButton default render 1`] = `undefined`; +exports[`SelectSessionButton default render 1`] = ` + + Select Session + +`; exports[`SelectSessionButton disabled states 1`] = ` Select Session diff --git a/src/containers/CourseCard/components/CourseCardBanners/CertificateBanner.test.jsx b/src/containers/CourseCard/components/CourseCardBanners/CertificateBanner.test.jsx index 68b8afcc..ce936292 100644 --- a/src/containers/CourseCard/components/CourseCardBanners/CertificateBanner.test.jsx +++ b/src/containers/CourseCard/components/CourseCardBanners/CertificateBanner.test.jsx @@ -1,4 +1,4 @@ -import { shallow } from 'enzyme'; +import { shallow } from '@edx/react-unit-test-utils'; import { reduxHooks } from 'hooks'; import CertificateBanner from './CertificateBanner'; @@ -61,7 +61,7 @@ describe('CertificateBanner', () => { isRestricted: true, }, }); - expect(wrapper).toMatchSnapshot(); + expect(wrapper.snapshot).toMatchSnapshot(); }); test('is restricted with support email', () => { const wrapper = createWrapper({ @@ -72,7 +72,7 @@ describe('CertificateBanner', () => { supportEmail: 'suport@email', }, }); - expect(wrapper).toMatchSnapshot(); + expect(wrapper.snapshot).toMatchSnapshot(); }); test('is restricted with billing email', () => { const wrapper = createWrapper({ @@ -83,7 +83,7 @@ describe('CertificateBanner', () => { billingEmail: 'billing@email', }, }); - expect(wrapper).toMatchSnapshot(); + expect(wrapper.snapshot).toMatchSnapshot(); }); test('is restricted and verified', () => { const wrapper = createWrapper({ @@ -94,7 +94,7 @@ describe('CertificateBanner', () => { isVerified: true, }, }); - expect(wrapper).toMatchSnapshot(); + expect(wrapper.snapshot).toMatchSnapshot(); }); test('is restricted and verified with support email', () => { const wrapper = createWrapper({ @@ -108,7 +108,7 @@ describe('CertificateBanner', () => { supportEmail: 'suport@email', }, }); - expect(wrapper).toMatchSnapshot(); + expect(wrapper.snapshot).toMatchSnapshot(); }); test('is restricted and verified with billing email', () => { const wrapper = createWrapper({ @@ -122,7 +122,7 @@ describe('CertificateBanner', () => { billingEmail: 'billing@email', }, }); - expect(wrapper).toMatchSnapshot(); + expect(wrapper.snapshot).toMatchSnapshot(); }); test('is restricted and verified with support and billing email', () => { const wrapper = createWrapper({ @@ -137,21 +137,21 @@ describe('CertificateBanner', () => { billingEmail: 'billing@email', }, }); - expect(wrapper).toMatchSnapshot(); + expect(wrapper.snapshot).toMatchSnapshot(); }); test('is passing and is downloadable', () => { const wrapper = createWrapper({ grade: { isPassing: true }, certificate: { isDownloadable: true }, }); - expect(wrapper).toMatchSnapshot(); + expect(wrapper.snapshot).toMatchSnapshot(); }); test('not passing and is downloadable', () => { const wrapper = createWrapper({ grade: { isPassing: false }, certificate: { isDownloadable: true }, }); - expect(wrapper).toMatchSnapshot(); + expect(wrapper.snapshot).toMatchSnapshot(); }); test('not passing and audit', () => { const wrapper = createWrapper({ @@ -159,17 +159,17 @@ describe('CertificateBanner', () => { isAudit: true, }, }); - expect(wrapper).toMatchSnapshot(); + expect(wrapper.snapshot).toMatchSnapshot(); }); test('not passing and has finished', () => { const wrapper = createWrapper({ courseRun: { isArchived: true }, }); - expect(wrapper).toMatchSnapshot(); + expect(wrapper.snapshot).toMatchSnapshot(); }); test('not passing and not audit and not finished', () => { const wrapper = createWrapper({}); - expect(wrapper).toMatchSnapshot(); + expect(wrapper.snapshot).toMatchSnapshot(); }); test('is passing and is earned but unavailable', () => { const wrapper = createWrapper({ @@ -180,7 +180,7 @@ describe('CertificateBanner', () => { isEarnedButUnavailable: true, }, }); - expect(wrapper).toMatchSnapshot(); + expect(wrapper.snapshot).toMatchSnapshot(); }); test('is passing and not downloadable render empty', () => { const wrapper = createWrapper({ @@ -188,7 +188,7 @@ describe('CertificateBanner', () => { isPassing: true, }, }); - expect(wrapper).toMatchSnapshot(); + expect(wrapper.snapshot).toMatchSnapshot(); }); }); describe('behavior', () => { @@ -202,7 +202,7 @@ describe('CertificateBanner', () => { billingEmail: 'billing@email', }, }); - const bannerMessage = wrapper.find('format-message-function').map(el => el.prop('message').defaultMessage).join('\n'); + const bannerMessage = wrapper.instance.findByType('format-message-function').map(el => el.props.message.defaultMessage).join('\n'); expect(bannerMessage).toEqual(messages.certRestricted.defaultMessage); expect(bannerMessage).toContain(messages.certRestricted.defaultMessage); }); @@ -219,7 +219,7 @@ describe('CertificateBanner', () => { billingEmail: 'billing@email', }, }); - const bannerMessage = wrapper.find('format-message-function').map(el => el.prop('message').defaultMessage).join('\n'); + const bannerMessage = wrapper.instance.findByType('format-message-function').map(el => el.props.message.defaultMessage).join('\n'); expect(bannerMessage).toContain(messages.certRestricted.defaultMessage); expect(bannerMessage).toContain(messages.certRefundContactBilling.defaultMessage); }); diff --git a/src/containers/CourseCard/components/CourseCardBanners/CourseBanner.test.jsx b/src/containers/CourseCard/components/CourseCardBanners/CourseBanner.test.jsx index 8b0504d6..fea85df8 100644 --- a/src/containers/CourseCard/components/CourseCardBanners/CourseBanner.test.jsx +++ b/src/containers/CourseCard/components/CourseCardBanners/CourseBanner.test.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import { shallow } from 'enzyme'; +import { shallow } from '@edx/react-unit-test-utils'; import { Hyperlink } from '@edx/paragon'; import { reduxHooks } from 'hooks'; @@ -70,11 +70,11 @@ describe('CourseBanner', () => { render({ enrollment: { isAuditAccessExpired: true, canUpgrade: true } }); }); test('snapshot: (auditAccessExpired, upgradeToAccess)', () => { - expect(el).toMatchSnapshot(); + expect(el.snapshot).toMatchSnapshot(); }); test('messages: (auditAccessExpired, upgradeToAccess)', () => { - expect(el.text()).toContain(messages.auditAccessExpired.defaultMessage); - expect(el.text()).toContain(messages.upgradeToAccess.defaultMessage); + expect(el.instance.children[0].children[0].el).toContain(messages.auditAccessExpired.defaultMessage); + expect(el.instance.children[0].children[2].el).toContain(messages.upgradeToAccess.defaultMessage); }); }); describe('audit access expired, cannot upgrade', () => { @@ -82,11 +82,11 @@ describe('CourseBanner', () => { render({ enrollment: { isAuditAccessExpired: true } }); }); test('snapshot: (auditAccessExpired, findAnotherCourse hyperlink)', () => { - expect(el).toMatchSnapshot(); + expect(el.snapshot).toMatchSnapshot(); }); test('messages: (auditAccessExpired, upgradeToAccess)', () => { - expect(el.text()).toContain(messages.auditAccessExpired.defaultMessage); - expect(el.find(Hyperlink).text()).toEqual(messages.findAnotherCourse.defaultMessage); + expect(el.instance.children[0].children[0].el).toContain(messages.auditAccessExpired.defaultMessage); + expect(el.instance.findByType(Hyperlink)[0].children[0].el).toEqual(messages.findAnotherCourse.defaultMessage); }); }); describe('course run active and cannot upgrade', () => { @@ -94,31 +94,31 @@ describe('CourseBanner', () => { render({ courseRun: { isActive: true } }); }); test('snapshot: (upgradseDeadlinePassed, exploreCourseDetails hyperlink)', () => { - expect(el).toMatchSnapshot(); + expect(el.snapshot).toMatchSnapshot(); }); test('messages: (upgradseDeadlinePassed, exploreCourseDetails hyperlink)', () => { - expect(el.text()).toContain(messages.upgradeDeadlinePassed.defaultMessage); - const link = el.find(Hyperlink); - expect(link.text()).toEqual(messages.exploreCourseDetails.defaultMessage); - expect(link.props().destination).toEqual(courseRunData.marketingUrl); + expect(el.instance.children[0].children[0].el).toContain(messages.upgradeDeadlinePassed.defaultMessage); + const link = el.instance.findByType(Hyperlink); + expect(link[0].children[0].el).toEqual(messages.exploreCourseDetails.defaultMessage); + expect(link[0].props.destination).toEqual(courseRunData.marketingUrl); }); }); test('no display if audit access not expired and (course is not active or can upgrade)', () => { render(); // isEmptyRender() isn't true because the minimal is - expect(el.html()).toEqual(''); + expect(el.instance.children).toEqual([]); render({ enrollment: { canUpgrade: true }, courseRun: { isActive: true } }); - expect(el.html()).toEqual(''); + expect(el.instance.children).toEqual([]); }); describe('unmet prerequisites', () => { beforeEach(() => { render({ enrollment: { coursewareAccess: { hasUnmetPrerequisites: true } } }); }); test('snapshot: unmetPrerequisites', () => { - expect(el).toMatchSnapshot(); + expect(el.snapshot).toMatchSnapshot(); }); test('messages: prerequisitesNotMet', () => { - expect(el.text()).toContain(messages.prerequisitesNotMet.defaultMessage); + expect(el.instance.children[0].children[0].el).toContain(messages.prerequisitesNotMet.defaultMessage); }); }); describe('too early', () => { @@ -126,17 +126,17 @@ describe('CourseBanner', () => { beforeEach(() => { render({ enrollment: { coursewareAccess: { isTooEarly: true } }, courseRun: { startDate: null } }); }); - test('snapshot', () => expect(el).toMatchSnapshot()); - test('messages', () => expect(el.text()).toEqual('')); + test('snapshot', () => expect(el.snapshot).toMatchSnapshot()); + test('messages', () => expect(el.instance.children).toEqual([])); }); describe('has start date', () => { beforeEach(() => { render({ enrollment: { coursewareAccess: { isTooEarly: true } } }); }); - test('snapshot', () => expect(el).toMatchSnapshot()); + test('snapshot', () => expect(el.snapshot).toMatchSnapshot()); test('messages: courseHasNotStarted', () => { - expect(el.text()).toContain( + expect(el.instance.children[0].children[0].el).toContain( formatMessage(messages.courseHasNotStarted, { startDate: courseRunData.startDate }), ); }); @@ -147,7 +147,7 @@ describe('CourseBanner', () => { render({ enrollment: { coursewareAccess: { isStaff: true } } }); }); test('snapshot: isStaff', () => { - expect(el).toMatchSnapshot(); + expect(el.snapshot).toMatchSnapshot(); }); }); test('snapshot: stacking banners', () => { @@ -160,6 +160,6 @@ describe('CourseBanner', () => { }, }, }); - expect(el).toMatchSnapshot(); + expect(el.snapshot).toMatchSnapshot(); }); }); diff --git a/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/__snapshots__/index.test.jsx.snap b/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/__snapshots__/index.test.jsx.snap index 96b1a629..d054531e 100644 --- a/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/__snapshots__/index.test.jsx.snap +++ b/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/__snapshots__/index.test.jsx.snap @@ -6,6 +6,7 @@ exports[`CreditBanner component render with error state snapshot 1`] = ` >

An error occurred with this transaction.

diff --git a/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/index.jsx b/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/index.jsx index a9a8a2f9..28bc038e 100644 --- a/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/index.jsx +++ b/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/index.jsx @@ -21,7 +21,7 @@ export const CreditBanner = ({ cardId }) => { return ( {error && ( -

+

{supportEmail ? formatMessage(messages.error, { supportEmailLink }) : formatMessage(messages.errorNoEmail)}

)} diff --git a/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/index.test.jsx b/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/index.test.jsx index 68f285bf..02d77818 100644 --- a/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/index.test.jsx +++ b/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/index.test.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import { shallow } from 'enzyme'; +import { shallow } from '@edx/react-unit-test-utils'; import { formatMessage } from 'testUtils'; import { MailtoLink } from '@edx/paragon'; @@ -44,20 +44,18 @@ describe('CreditBanner component', () => { el = shallow(); }); test('snapshot', () => { - expect(el).toMatchSnapshot(); + expect(el.snapshot).toMatchSnapshot(); }); it('passes danger variant to Banner parent', () => { - expect(el.find('Banner').props().variant).toEqual('danger'); + expect(el.instance.findByType('Banner')[0].props.variant).toEqual('danger'); }); it('includes credit-error-msg with support email link', () => { - expect(el.find('.credit-error-msg').containsMatchingElement( - formatMessage(messages.error, { - supportEmailLink: ({supportEmail}), - }), - )).toEqual(true); + expect(el.instance.findByTestId('credit-error-msg')[0].children[0].el).toEqual(shallow(formatMessage(messages.error, { + supportEmailLink: ({supportEmail}), + }))); }); it('loads ContentComponent with cardId', () => { - expect(el.find('ContentComponent').props().cardId).toEqual(cardId); + expect(el.instance.findByType('ContentComponent')[0].props.cardId).toEqual(cardId); }); }); @@ -70,12 +68,10 @@ describe('CreditBanner component', () => { el = shallow(); }); test('snapshot', () => { - expect(el).toMatchSnapshot(); + expect(el.snapshot).toMatchSnapshot(); }); it('includes credit-error-msg without support email link', () => { - expect(el.find('.credit-error-msg').containsMatchingElement( - formatMessage(messages.errorNoEmail), - )).toEqual(true); + expect(el.instance.findByTestId('credit-error-msg')[0].children[0].el).toEqual(formatMessage(messages.errorNoEmail)); }); }); @@ -89,10 +85,10 @@ describe('CreditBanner component', () => { el = shallow(); }); test('snapshot', () => { - expect(el).toMatchSnapshot(); + expect(el.snapshot).toMatchSnapshot(); }); it('loads ContentComponent with cardId', () => { - expect(el.find('ContentComponent').props().cardId).toEqual(cardId); + expect(el.instance.findByType('ContentComponent')[0].props.cardId).toEqual(cardId); }); }); }); diff --git a/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/ApprovedContent.test.jsx b/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/ApprovedContent.test.jsx index b8eda7fa..56635264 100644 --- a/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/ApprovedContent.test.jsx +++ b/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/ApprovedContent.test.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import { shallow } from 'enzyme'; +import { shallow } from '@edx/react-unit-test-utils'; import { formatMessage } from 'testUtils'; import { reduxHooks } from 'hooks'; @@ -38,19 +38,19 @@ describe('ApprovedContent component', () => { describe('rendered CreditContent component', () => { let component; beforeAll(() => { - component = el.find('CreditContent'); + component = el.instance.findByType('CreditContent'); }); test('action.href from credit.providerStatusUrl', () => { - expect(component.props().action.href).toEqual(credit.providerStatusUrl); + expect(component[0].props.action.href).toEqual(credit.providerStatusUrl); }); test('action.message is formatted viewCredit message', () => { - expect(component.props().action.message).toEqual(formatMessage(messages.viewCredit)); + expect(component[0].props.action.message).toEqual(formatMessage(messages.viewCredit)); }); test('action.disabled is false', () => { - expect(component.props().action.disabled).toEqual(false); + expect(component[0].props.action.disabled).toEqual(false); }); test('message is formatted approved message', () => { - expect(component.props().message).toEqual(formatMessage( + expect(component[0].props.message).toEqual(formatMessage( messages.approved, { congratulations: ({formatMessage(messages.congratulations)}), diff --git a/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/EligibleContent.test.jsx b/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/EligibleContent.test.jsx index 6dac70ac..bbdfd167 100644 --- a/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/EligibleContent.test.jsx +++ b/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/EligibleContent.test.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import { shallow } from 'enzyme'; +import { shallow } from '@edx/react-unit-test-utils'; import { reduxHooks } from 'hooks'; import { formatMessage } from 'testUtils'; @@ -36,7 +36,7 @@ const render = () => { el = shallow(); }; const loadComponent = () => { - component = el.find('CreditContent'); + component = el.instance.findByType('CreditContent'); }; describe('EligibleContent component', () => { beforeEach(() => { @@ -56,24 +56,24 @@ describe('EligibleContent component', () => { loadComponent(); }); test('action.onClick sends credit purchase track event', () => { - expect(component.props().action.onClick).toEqual( + expect(component[0].props.action.onClick).toEqual( track.credit.purchase(courseId), ); }); test('action.message is formatted getCredit message', () => { - expect(component.props().action.message).toEqual(formatMessage(messages.getCredit)); + expect(component[0].props.action.message).toEqual(formatMessage(messages.getCredit)); }); test('message is formatted eligible message if no provider', () => { reduxHooks.useCardCreditData.mockReturnValueOnce({}); render(); loadComponent(); - expect(component.props().message).toEqual(formatMessage( + expect(component[0].props.message).toEqual(formatMessage( messages.eligible, { getCredit: ({formatMessage(messages.getCredit)}) }, )); }); test('message is formatted eligible message if provider', () => { - expect(component.props().message).toEqual( + expect(component[0].props.message).toEqual( formatMessage(messages.eligibleFromProvider, { providerName: credit.providerName }), ); }); diff --git a/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/MustRequestContent.test.jsx b/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/MustRequestContent.test.jsx index 2642d520..9eb4200e 100644 --- a/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/MustRequestContent.test.jsx +++ b/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/MustRequestContent.test.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import { shallow } from 'enzyme'; +import { shallow } from '@edx/react-unit-test-utils'; import { formatMessage } from 'testUtils'; @@ -45,21 +45,21 @@ describe('MustRequestContent component', () => { describe('render', () => { describe('rendered CreditContent component', () => { beforeEach(() => { - component = el.find('CreditContent'); + component = el.instance.findByType('CreditContent'); }); test('action.onClick calls createCreditRequest from useCreditRequestData hook', () => { - expect(component.props().action.onClick).toEqual(createCreditRequest); + expect(component[0].props.action.onClick).toEqual(createCreditRequest); }); test('action.message is formatted requestCredit message', () => { - expect(component.props().action.message).toEqual( + expect(component[0].props.action.message).toEqual( formatMessage(messages.requestCredit), ); }); test('action.disabled is false', () => { - expect(component.props().action.disabled).toEqual(false); + expect(component[0].props.action.disabled).toEqual(false); }); test('message is formatted mustRequest message', () => { - expect(component.props().message).toEqual( + expect(component[0].props.message).toEqual( formatMessage(messages.mustRequest, { linkToProviderSite: , requestCredit: {formatMessage(messages.requestCredit)}, @@ -67,7 +67,7 @@ describe('MustRequestContent component', () => { ); }); test('requestData drawn from useCreditRequestData hook', () => { - expect(component.props().requestData).toEqual(requestData); + expect(component[0].props.requestData).toEqual(requestData); }); }); }); diff --git a/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/PendingContent.test.jsx b/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/PendingContent.test.jsx index 431d0a06..0711412e 100644 --- a/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/PendingContent.test.jsx +++ b/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/PendingContent.test.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import { shallow } from 'enzyme'; +import { shallow } from '@edx/react-unit-test-utils'; import { formatMessage } from 'testUtils'; import { reduxHooks } from 'hooks'; @@ -40,21 +40,21 @@ describe('PendingContent component', () => { describe('render', () => { describe('rendered CreditContent component', () => { beforeEach(() => { - component = el.find('CreditContent'); + component = el.instance.findByType('CreditContent'); }); test('action.href will go to provider status site', () => { - expect(component.props().action.href).toEqual(providerStatusUrl); + expect(component[0].props.action.href).toEqual(providerStatusUrl); }); test('action.message is formatted requestCredit message', () => { - expect(component.props().action.message).toEqual( + expect(component[0].props.action.message).toEqual( formatMessage(messages.viewDetails), ); }); test('action.disabled is false', () => { - expect(component.props().action.disabled).toEqual(false); + expect(component[0].props.action.disabled).toEqual(false); }); test('message is formatted pending message', () => { - expect(component.props().message).toEqual( + expect(component[0].props.message).toEqual( formatMessage(messages.received, { providerName }), ); }); diff --git a/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/RejectedContent.test.jsx b/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/RejectedContent.test.jsx index 400d0c14..b9aea8f1 100644 --- a/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/RejectedContent.test.jsx +++ b/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/RejectedContent.test.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import { shallow } from 'enzyme'; +import { shallow } from '@edx/react-unit-test-utils'; import { formatMessage } from 'testUtils'; import { reduxHooks } from 'hooks'; @@ -25,7 +25,7 @@ reduxHooks.useCardCreditData.mockReturnValue(credit); let el; let component; const render = () => { el = shallow(); }; -const loadComponent = () => { component = el.find('CreditContent'); }; +const loadComponent = () => { component = el.instance.findByType('CreditContent'); }; describe('RejectedContent component', () => { beforeEach(render); @@ -38,10 +38,10 @@ describe('RejectedContent component', () => { describe('rendered CreditContent component', () => { beforeAll(loadComponent); test('no action is passed', () => { - expect(component.props().action).toEqual(undefined); + expect(component[0].props.action).toEqual(undefined); }); test('message is formatted rejected message', () => { - expect(component.props().message).toEqual(formatMessage( + expect(component[0].props.message).toEqual(formatMessage( messages.rejected, { linkToProviderSite: , diff --git a/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/components/CreditContent.jsx b/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/components/CreditContent.jsx index 965ac4f5..0435a263 100644 --- a/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/components/CreditContent.jsx +++ b/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/components/CreditContent.jsx @@ -6,7 +6,7 @@ import CreditRequestForm from './CreditRequestForm'; export const CreditContent = ({ action, message, requestData }) => ( <> -
+
{message}
{action && ( @@ -21,6 +21,7 @@ export const CreditContent = ({ action, message, requestData }) => ( variant="outline-primary" className="border-gray-400" onClick={action.onClick} + data-testid="action-row-btn" > {action.message} diff --git a/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/components/CreditContent.test.jsx b/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/components/CreditContent.test.jsx index 285db247..d1d36a82 100644 --- a/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/components/CreditContent.test.jsx +++ b/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/components/CreditContent.test.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import { shallow } from 'enzyme'; +import { shallow } from '@edx/react-unit-test-utils'; import CreditContent from './CreditContent'; @@ -22,24 +22,24 @@ describe('CreditContent component', () => { el = shallow(); }); test('snapshot', () => { - expect(el).toMatchSnapshot(); + expect(el.snapshot).toMatchSnapshot(); }); it('loads href, onClick, and message into action row button', () => { - const buttonEl = el.find('ActionRow Button'); - expect(buttonEl.props().href).toEqual(action.href); - expect(buttonEl.props().onClick).toEqual(action.onClick); - expect(buttonEl.props().disabled).toEqual(action.disabled); - expect(buttonEl.text()).toEqual(action.message); + const buttonEl = el.instance.findByTestId('action-row-btn')[0]; + expect(buttonEl.props.href).toEqual(action.href); + expect(buttonEl.props.onClick).toEqual(action.onClick); + expect(buttonEl.props.disabled).toEqual(action.disabled); + expect(buttonEl.children[0].el).toEqual(action.message); }); it('loads message into credit-msg div', () => { - expect(el.find('div.credit-msg').text()).toEqual(message); + expect(el.instance.findByTestId('credit-msg')[0].children[0].el).toEqual(message); }); it('loads CreditRequestForm with passed requestData', () => { - expect(el.find('CreditRequestForm').props().requestData).toEqual(requestData); + expect(el.instance.findByType('CreditRequestForm')[0].props.requestData).toEqual(requestData); }); test('disables action button when action.disabled is true', () => { - el.setProps({ action: { ...action, disabled: true } }); - expect(el.find('ActionRow Button').props().disabled).toEqual(true); + el = shallow(); + expect(el.instance.findByTestId('action-row-btn')[0].props.disabled).toEqual(true); }); }); describe('without action', () => { @@ -47,13 +47,13 @@ describe('CreditContent component', () => { el = shallow(); }); test('snapshot', () => { - expect(el).toMatchSnapshot(); + expect(el.snapshot).toMatchSnapshot(); }); it('loads message into credit-msg div', () => { - expect(el.find('div.credit-msg').text()).toEqual(message); + expect(el.instance.findByTestId('credit-msg')[0].children[0].el).toEqual(message); }); it('loads CreditRequestForm with passed requestData', () => { - expect(el.find('CreditRequestForm').props().requestData).toEqual(requestData); + expect(el.instance.findByType('CreditRequestForm')[0].props.requestData).toEqual(requestData); }); }); }); diff --git a/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/components/CreditRequestForm/index.test.jsx b/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/components/CreditRequestForm/index.test.jsx index 288a0246..d955c88b 100644 --- a/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/components/CreditRequestForm/index.test.jsx +++ b/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/components/CreditRequestForm/index.test.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import { shallow } from 'enzyme'; +import { shallow } from '@edx/react-unit-test-utils'; import { keyStore } from 'utils'; @@ -46,19 +46,19 @@ describe('CreditRequestForm component', () => { shallowRender(requestData); }); test('snapshot', () => { - expect(el).toMatchSnapshot(); + expect(el.snapshot).toMatchSnapshot(); }); it('loads Form with requestData url', () => { - expect(el.find('Form').props().action).toEqual(requestData.url); + expect(el.instance.findByType('Form')[0].props.action).toEqual(requestData.url); }); it('loads a textarea form control for each requestData parameter', () => { - const controls = el.find('FormControl'); - expect(controls.at(0).props().name).toEqual(paramKeys.key1); - expect(controls.at(0).props().value).toEqual(requestData.parameters.key1); - expect(controls.at(1).props().name).toEqual(paramKeys.key2); - expect(controls.at(1).props().value).toEqual(requestData.parameters.key2); - expect(controls.at(2).props().name).toEqual(paramKeys.key3); - expect(controls.at(2).props().value).toEqual(requestData.parameters.key3); + const controls = el.instance.findByType('FormControl'); + expect(controls[0].props.name).toEqual(paramKeys.key1); + expect(controls[0].props.value).toEqual(requestData.parameters.key1); + expect(controls[1].props.name).toEqual(paramKeys.key2); + expect(controls[1].props.value).toEqual(requestData.parameters.key2); + expect(controls[2].props.name).toEqual(paramKeys.key3); + expect(controls[2].props.value).toEqual(requestData.parameters.key3); }); }); }); diff --git a/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/components/ProviderLink.test.jsx b/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/components/ProviderLink.test.jsx index 39f02628..5f598506 100644 --- a/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/components/ProviderLink.test.jsx +++ b/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/components/ProviderLink.test.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import { shallow } from 'enzyme'; +import { shallow } from '@edx/react-unit-test-utils'; import { reduxHooks } from 'hooks'; @@ -30,13 +30,13 @@ describe('ProviderLink component', () => { }); describe('render', () => { test('snapshot', () => { - expect(el).toMatchSnapshot(); + expect(el.snapshot).toMatchSnapshot(); }); it('passes credit.providerStatusUrl to the hyperlink href', () => { - expect(el.find('Hyperlink').props().href).toEqual(credit.providerStatusUrl); + expect(el.instance.findByType('Hyperlink')[0].props.href).toEqual(credit.providerStatusUrl); }); it('passes providerName for the link message', () => { - expect(el.find('Hyperlink').text()).toEqual(credit.providerName); + expect(el.instance.findByType('Hyperlink')[0].children[0].el).toEqual(credit.providerName); }); }); }); diff --git a/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/components/__snapshots__/CreditContent.test.jsx.snap b/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/components/__snapshots__/CreditContent.test.jsx.snap index f70bb8e1..2c0bca5c 100644 --- a/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/components/__snapshots__/CreditContent.test.jsx.snap +++ b/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/components/__snapshots__/CreditContent.test.jsx.snap @@ -4,6 +4,7 @@ exports[`CreditContent component render with action snapshot 1`] = `
test-message
@@ -13,6 +14,7 @@ exports[`CreditContent component render with action snapshot 1`] = ` - + provider-name + • + test-course-number + • access-message + • + + +
`; exports[`CourseCard Details component has change session button on entitlement course but no access message 1`] = ` - - provider-name - • - test-course-number - • - - + provider-name + • + test-course-number + • + + + `; diff --git a/src/containers/CourseCard/components/CourseCardDetails/index.test.jsx b/src/containers/CourseCard/components/CourseCardDetails/index.test.jsx index b5e45356..d92e0d26 100644 --- a/src/containers/CourseCard/components/CourseCardDetails/index.test.jsx +++ b/src/containers/CourseCard/components/CourseCardDetails/index.test.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import { shallow } from 'enzyme'; +import { render } from '@testing-library/react'; import CourseCardDetails from '.'; @@ -28,27 +28,44 @@ describe('CourseCard Details component', () => { ...defaultHooks, ...hookOverrides, }); - return shallow(); + return render(); + }; + + const fetchSeparators = (wrapper) => { + const elements = wrapper.container.querySelectorAll('*'); + let separatorsCount = 0; + + elements.forEach((element) => { + // Use a regular expression to find all occurrences of '•' in the text content + const separatorMatches = element.textContent.match(/•/g); + + // If matches are found, add the count to the total + if (separatorMatches) { + separatorsCount += separatorMatches.length; + } + }); + + return separatorsCount; }; test('has change session button on entitlement course', () => { const wrapper = createWrapper(); - expect(wrapper).toMatchSnapshot(); + expect(wrapper.container).toMatchSnapshot(); // it has 3 separator, 4 column - expect(wrapper.text().match(/•/g)).toHaveLength(3); + expect(fetchSeparators(wrapper)).toBe(3); }); test('has change session button on entitlement course but no access message', () => { const wrapper = createWrapper({ accessMessage: null }); - expect(wrapper).toMatchSnapshot(); + expect(wrapper.container).toMatchSnapshot(); // it has 2 separator, 3 column - expect(wrapper.text().match(/•/g)).toHaveLength(2); + expect(fetchSeparators(wrapper)).toBe(2); }); test('does not have change session button on regular course', () => { const wrapper = createWrapper({ isEntitlement: false }); - expect(wrapper).toMatchSnapshot(); + expect(wrapper.container).toMatchSnapshot(); // it has 2 separator, 3 column - expect(wrapper.text().match(/•/g)).toHaveLength(2); + expect(fetchSeparators(wrapper)).toBe(2); }); }); diff --git a/src/containers/CourseCard/components/CourseCardImage.test.jsx b/src/containers/CourseCard/components/CourseCardImage.test.jsx index 4075658d..278b20d0 100644 --- a/src/containers/CourseCard/components/CourseCardImage.test.jsx +++ b/src/containers/CourseCard/components/CourseCardImage.test.jsx @@ -1,4 +1,4 @@ -import { shallow } from 'enzyme'; +import { shallow } from '@edx/react-unit-test-utils'; import { reduxHooks } from 'hooks'; import track from 'tracking'; @@ -36,9 +36,9 @@ describe('CourseCardImage', () => { describe('snapshot', () => { test('renders clickable link course Image', () => { const wrapper = shallow(); - expect(wrapper).toMatchSnapshot(); - expect(wrapper.type()).toBe('a'); - expect(wrapper.prop('onClick')).toEqual( + expect(wrapper.snapshot).toMatchSnapshot(); + expect(wrapper.instance.type).toBe('a'); + expect(wrapper.instance.props.onClick).toEqual( reduxHooks.useTrackCourseEvent( track.course.courseImageClicked, props.cardId, @@ -49,8 +49,8 @@ describe('CourseCardImage', () => { test('renders disabled link', () => { useActionDisabledState.mockReturnValueOnce({ disableCourseTitle: true }); const wrapper = shallow(); - expect(wrapper).toMatchSnapshot(); - expect(wrapper.type()).toBe('div'); + expect(wrapper.snapshot).toMatchSnapshot(); + expect(wrapper.instance.type).toBe('div'); }); }); describe('behavior', () => { diff --git a/src/containers/CourseCard/components/CourseCardTitle.test.jsx b/src/containers/CourseCard/components/CourseCardTitle.test.jsx index 15e172b9..a71dd7e7 100644 --- a/src/containers/CourseCard/components/CourseCardTitle.test.jsx +++ b/src/containers/CourseCard/components/CourseCardTitle.test.jsx @@ -1,4 +1,4 @@ -import { shallow } from 'enzyme'; +import { shallow } from '@edx/react-unit-test-utils'; import { reduxHooks } from 'hooks'; import track from 'tracking'; @@ -34,10 +34,10 @@ describe('CourseCardTitle', () => { describe('snapshot', () => { test('renders clickable link course title', () => { const wrapper = shallow(); - expect(wrapper).toMatchSnapshot(); - const title = wrapper.find('.course-card-title'); - expect(title.type()).toBe('a'); - expect(title.prop('onClick')).toEqual( + expect(wrapper.snapshot).toMatchSnapshot(); + const title = wrapper.instance.findByTestId('CourseCardTitle'); + expect(title[0].type).toBe('a'); + expect(title[0].props.onClick).toEqual( reduxHooks.useTrackCourseEvent( track.course.courseTitleClicked, props.cardId, @@ -48,10 +48,10 @@ describe('CourseCardTitle', () => { test('renders disabled link', () => { useActionDisabledState.mockReturnValueOnce({ disableCourseTitle: true }); const wrapper = shallow(); - expect(wrapper).toMatchSnapshot(); - const title = wrapper.find('.course-card-title'); - expect(title.type()).toBe('span'); - expect(title.prop('onClick')).toBeUndefined(); + expect(wrapper.snapshot).toMatchSnapshot(); + const title = wrapper.instance.findByTestId('CourseCardTitle'); + expect(title[0].type).toBe('span'); + expect(title[0].props.onClick).toBeUndefined(); }); }); describe('behavior', () => { diff --git a/src/containers/CourseCard/components/RelatedProgramsBadge/index.test.jsx b/src/containers/CourseCard/components/RelatedProgramsBadge/index.test.jsx index 3382df12..09e3b9fe 100644 --- a/src/containers/CourseCard/components/RelatedProgramsBadge/index.test.jsx +++ b/src/containers/CourseCard/components/RelatedProgramsBadge/index.test.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import { shallow } from 'enzyme'; +import { shallow } from '@edx/react-unit-test-utils'; import useRelatedProgramsBadge from './hooks'; import RelatedProgramsBadge from '.'; @@ -25,6 +25,6 @@ describe('RelatedProgramsBadge component', () => { }); test('snapshot: 3 programs', () => { useRelatedProgramsBadge.mockReturnValueOnce(hookProps); - expect(shallow()).toMatchSnapshot(); + expect(shallow().snapshot).toMatchSnapshot(); }); }); diff --git a/src/containers/CourseCard/components/__snapshots__/CourseCardImage.test.jsx.snap b/src/containers/CourseCard/components/__snapshots__/CourseCardImage.test.jsx.snap index ada298ed..c6df32bc 100644 --- a/src/containers/CourseCard/components/__snapshots__/CourseCardImage.test.jsx.snap +++ b/src/containers/CourseCard/components/__snapshots__/CourseCardImage.test.jsx.snap @@ -15,27 +15,29 @@ exports[`CourseCardImage snapshot renders clickable link course Image 1`] = ` } tabIndex="-1" > - Course thumbnail - - - Verified - + ID Verified Ribbon/Badge - + + + Verified + + ID Verified Ribbon/Badge + + `; @@ -43,26 +45,28 @@ exports[`CourseCardImage snapshot renders disabled link 1`] = `
- Course thumbnail - - - Verified - + ID Verified Ribbon/Badge - + + + Verified + + ID Verified Ribbon/Badge + +
`; diff --git a/src/containers/CourseCard/index.test.jsx b/src/containers/CourseCard/index.test.jsx index f4aa821a..ffab80da 100644 --- a/src/containers/CourseCard/index.test.jsx +++ b/src/containers/CourseCard/index.test.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import { shallow } from 'enzyme'; +import { shallow } from '@edx/react-unit-test-utils'; import CourseCard from '.'; import hooks from './hooks'; @@ -20,10 +20,10 @@ const cardId = 'test-card-id'; describe('CourseCard component', () => { test('snapshot: collapsed', () => { hooks.useIsCollapsed.mockReturnValueOnce(true); - expect(shallow()).toMatchSnapshot(); + expect(shallow().snapshot).toMatchSnapshot(); }); test('snapshot: not collapsed', () => { hooks.useIsCollapsed.mockReturnValueOnce(false); - expect(shallow()).toMatchSnapshot(); + expect(shallow().snapshot).toMatchSnapshot(); }); }); diff --git a/src/containers/CourseFilterControls/ActiveCourseFilters.test.jsx b/src/containers/CourseFilterControls/ActiveCourseFilters.test.jsx index ebc7a467..e920613c 100644 --- a/src/containers/CourseFilterControls/ActiveCourseFilters.test.jsx +++ b/src/containers/CourseFilterControls/ActiveCourseFilters.test.jsx @@ -1,4 +1,4 @@ -import { shallow } from 'enzyme'; +import { shallow } from '@edx/react-unit-test-utils'; import { FilterKeys } from 'data/constants/app'; import ActiveCourseFilters from './ActiveCourseFilters'; @@ -15,7 +15,7 @@ describe('ActiveCourseFilters', () => { describe('snapshot', () => { test('renders', () => { const wrapper = shallow(); - expect(wrapper).toMatchSnapshot(); + expect(wrapper.snapshot).toMatchSnapshot(); }); }); }); diff --git a/src/containers/CourseFilterControls/CourseFilterControls.test.jsx b/src/containers/CourseFilterControls/CourseFilterControls.test.jsx index 21de9de7..a5e72177 100644 --- a/src/containers/CourseFilterControls/CourseFilterControls.test.jsx +++ b/src/containers/CourseFilterControls/CourseFilterControls.test.jsx @@ -1,4 +1,4 @@ -import { shallow } from 'enzyme'; +import { shallow } from '@edx/react-unit-test-utils'; import { breakpoints, useWindowSize } from '@edx/paragon'; @@ -44,21 +44,21 @@ describe('CourseFilterControls', () => { reduxHooks.useHasCourses.mockReturnValueOnce(false); useWindowSize.mockReturnValueOnce({ width: breakpoints.small.minWidth }); const wrapper = shallow(); - expect(wrapper).toMatchSnapshot(); + expect(wrapper.snapshot).toMatchSnapshot(); }); }); describe('mobile', () => { test('snapshot', () => { useWindowSize.mockReturnValueOnce({ width: breakpoints.small.minWidth - 1 }); const wrapper = shallow(); - expect(wrapper).toMatchSnapshot(); + expect(wrapper.snapshot).toMatchSnapshot(); }); }); describe('is not mobile', () => { test('snapshot', () => { useWindowSize.mockReturnValueOnce({ width: breakpoints.small.minWidth }); const wrapper = shallow(); - expect(wrapper).toMatchSnapshot(); + expect(wrapper.snapshot).toMatchSnapshot(); }); }); }); diff --git a/src/containers/CourseFilterControls/components/Checkbox.test.jsx b/src/containers/CourseFilterControls/components/Checkbox.test.jsx index c0356f96..de5eafa5 100644 --- a/src/containers/CourseFilterControls/components/Checkbox.test.jsx +++ b/src/containers/CourseFilterControls/components/Checkbox.test.jsx @@ -1,4 +1,4 @@ -import { shallow } from 'enzyme'; +import { shallow } from '@edx/react-unit-test-utils'; import { FilterKeys } from 'data/constants/app'; import Checkbox from './Checkbox'; @@ -8,7 +8,7 @@ describe('Checkbox', () => { Object.keys(FilterKeys).forEach((filterKey) => { it(`renders ${filterKey}`, () => { const wrapper = shallow(); - expect(wrapper).toMatchSnapshot(); + expect(wrapper.snapshot).toMatchSnapshot(); }); }); }); diff --git a/src/containers/CourseFilterControls/components/FilterForm.test.jsx b/src/containers/CourseFilterControls/components/FilterForm.test.jsx index 6ecd4f38..2905d3d0 100644 --- a/src/containers/CourseFilterControls/components/FilterForm.test.jsx +++ b/src/containers/CourseFilterControls/components/FilterForm.test.jsx @@ -1,4 +1,4 @@ -import { shallow } from 'enzyme'; +import { shallow } from '@edx/react-unit-test-utils'; import { FilterKeys } from 'data/constants/app'; import FilterForm, { filterOrder } from './FilterForm'; @@ -13,7 +13,7 @@ describe('FilterForm', () => { describe('snapshot', () => { test('renders', () => { const wrapper = shallow(); - expect(wrapper).toMatchSnapshot(); + expect(wrapper.snapshot).toMatchSnapshot(); }); }); diff --git a/src/containers/CourseFilterControls/components/SortForm.test.jsx b/src/containers/CourseFilterControls/components/SortForm.test.jsx index a6ed278e..598181f5 100644 --- a/src/containers/CourseFilterControls/components/SortForm.test.jsx +++ b/src/containers/CourseFilterControls/components/SortForm.test.jsx @@ -1,4 +1,4 @@ -import { shallow } from 'enzyme'; +import { shallow } from '@edx/react-unit-test-utils'; import { SortKeys } from 'data/constants/app'; import SortForm from './SortForm'; @@ -13,7 +13,7 @@ describe('SortForm', () => { describe('snapshot', () => { test('renders', () => { const wrapper = shallow(); - expect(wrapper).toMatchSnapshot(); + expect(wrapper.snapshot).toMatchSnapshot(); }); }); }); diff --git a/src/containers/CourseList/NoCoursesView/index.test.jsx b/src/containers/CourseList/NoCoursesView/index.test.jsx index 11a9708c..923fde28 100644 --- a/src/containers/CourseList/NoCoursesView/index.test.jsx +++ b/src/containers/CourseList/NoCoursesView/index.test.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import { shallow } from 'enzyme'; +import { shallow } from '@edx/react-unit-test-utils'; import EmptyCourse from '.'; @@ -13,6 +13,6 @@ jest.mock('hooks', () => ({ describe('NoCoursesView', () => { test('snapshot', () => { - expect(shallow()).toMatchSnapshot(); + expect(shallow().snapshot).toMatchSnapshot(); }); }); diff --git a/src/containers/CourseList/__snapshots__/index.test.jsx.snap b/src/containers/CourseList/__snapshots__/index.test.jsx.snap index 997bcc17..fe6523e3 100644 --- a/src/containers/CourseList/__snapshots__/index.test.jsx.snap +++ b/src/containers/CourseList/__snapshots__/index.test.jsx.snap @@ -18,34 +18,36 @@ exports[`CourseList collapsed with multiple courses and pages snapshot 1`] = ` -
- -
-
- - - - -
+ +
+ +
+
+ + + + +
+ `; @@ -67,9 +69,11 @@ exports[`CourseList no courses snapshot 1`] = ` -
+ +
+
`; @@ -91,9 +95,11 @@ exports[`CourseList no filters snapshot 1`] = `
-
+ +
+
`; @@ -117,16 +123,18 @@ exports[`CourseList with filters snapshot 1`] = ` />
-
- +
+ +
+
-
-
+
`; @@ -148,28 +156,30 @@ exports[`CourseList with multiple courses and pages snapshot 1`] = `
-
- - - - -
+ +
+ + + + +
+ `; diff --git a/src/containers/CourseList/index.test.jsx b/src/containers/CourseList/index.test.jsx index 4b798f03..86217223 100644 --- a/src/containers/CourseList/index.test.jsx +++ b/src/containers/CourseList/index.test.jsx @@ -1,4 +1,4 @@ -import { shallow } from 'enzyme'; +import { shallow } from '@edx/react-unit-test-utils'; import { reduxHooks } from 'hooks'; import { useCourseListData, useIsCollapsed } from './hooks'; @@ -42,13 +42,13 @@ describe('CourseList', () => { test('snapshot', () => { reduxHooks.useHasCourses.mockReturnValue(true); const wrapper = createWrapper(); - expect(wrapper).toMatchSnapshot(); + expect(wrapper.snapshot).toMatchSnapshot(); }); }); describe('no filters', () => { test('snapshot', () => { const wrapper = createWrapper(); - expect(wrapper).toMatchSnapshot(); + expect(wrapper.snapshot).toMatchSnapshot(); }); }); describe('with filters', () => { @@ -57,7 +57,7 @@ describe('CourseList', () => { filterOptions: { abitary: 'filter' }, showFilters: true, }); - expect(wrapper).toMatchSnapshot(); + expect(wrapper.snapshot).toMatchSnapshot(); }); }); describe('with multiple courses and pages', () => { @@ -66,7 +66,7 @@ describe('CourseList', () => { visibleList: [{ cardId: 'foo' }, { cardId: 'bar' }, { cardId: 'baz' }], numPages: 3, }); - expect(wrapper).toMatchSnapshot(); + expect(wrapper.snapshot).toMatchSnapshot(); }); }); describe('collapsed with multiple courses and pages', () => { @@ -77,7 +77,7 @@ describe('CourseList', () => { numPages: 3, showFilters: true, }); - expect(wrapper).toMatchSnapshot(); + expect(wrapper.snapshot).toMatchSnapshot(); }); }); }); diff --git a/src/containers/Dashboard/DashboardLayout.test.jsx b/src/containers/Dashboard/DashboardLayout.test.jsx index 28aa021a..2d5c595b 100644 --- a/src/containers/Dashboard/DashboardLayout.test.jsx +++ b/src/containers/Dashboard/DashboardLayout.test.jsx @@ -1,8 +1,7 @@ import React from 'react'; -import { shallow } from 'enzyme'; +import { shallow } from '@edx/react-unit-test-utils'; import { Col, Row } from '@edx/paragon'; -import WidgetFooter from 'containers/WidgetContainers/WidgetFooter'; import hooks from './hooks'; import DashboardLayout, { columnConfig } from './DashboardLayout'; @@ -32,43 +31,43 @@ describe('DashboardLayout', () => { const testColumns = () => { it('loads courseList and sidebar column layout', () => { - const columns = el.find(Row).find(Col); + const columns = el.instance.findByType(Row)[0].findByType(Col); Object.keys(columnConfig.sidebar).forEach(size => { - expect(columns.at(1).props()[size]).toEqual(columnConfig.sidebar[size]); + expect(columns[1].props[size]).toEqual(columnConfig.sidebar[size]); }); }); it('displays children in first column', () => { - const columns = el.find(Row).find(Col); - expect(columns.at(0).contains(children)).toEqual(true); + const columns = el.instance.findByType(Row)[0].findByType(Col); + expect(columns[0].children).not.toHaveLength(0); }); it('displays sidebar prop in second column', () => { - const columns = el.find(Row).find(Col); - expect(columns.at(1).find(props.sidebar)).toHaveLength(1); + const columns = el.instance.findByType(Row)[0].findByType(Col); + expect(columns[1].findByType(props.sidebar)).toHaveLength(1); }); it('displays a footer in the second row', () => { - const columns = el.find(Row).at(1).find(Col); - expect(columns.at(0).containsMatchingElement()).toBeTruthy(); + const columns = el.instance.findByType(Row)[1].findByType(Col); + expect(columns[0].children[0].type).toEqual('WidgetFooter'); }); }; const testSidebarLayout = () => { it('displays widthSidebar width for course list column', () => { - const columns = el.find(Row).find(Col); + const columns = el.instance.findByType(Row)[0].findByType(Col); Object.keys(columnConfig.courseList.withSidebar).forEach(size => { - expect(columns.at(0).props()[size]).toEqual(columnConfig.courseList.withSidebar[size]); + expect(columns[0].props[size]).toEqual(columnConfig.courseList.withSidebar[size]); }); }); }; const testNoSidebarLayout = () => { it('displays noSidebar width for course list column', () => { - const columns = el.find(Row).find(Col); + const columns = el.instance.findByType(Row)[0].findByType(Col); Object.keys(columnConfig.courseList.noSidebar).forEach(size => { - expect(columns.at(0).props()[size]).toEqual(columnConfig.courseList.noSidebar[size]); + expect(columns[0].props[size]).toEqual(columnConfig.courseList.noSidebar[size]); }); }); }; const testSnapshot = () => { test('snapshot', () => { - expect(el).toMatchSnapshot(); + expect(el.snapshot).toMatchSnapshot(); }); }; describe('collapsed', () => { @@ -86,17 +85,17 @@ describe('DashboardLayout', () => { testNoSidebarLayout(); }); it('does not show spacer component above widget sidebar', () => { - const columns = el.find(Col); - expect(columns.at(1).find('h2').length).toEqual(0); + const columns = el.instance.findByType(Col); + expect(columns[1].findByType('h2').length).toEqual(0); }); }); describe('not collapsed', () => { const testWidgetSpacing = () => { it('shows a blank (nbsp) h2 spacer component above widget sidebar', () => { - const columns = el.find(Col); + const columns = el.instance.findByType(Col); // nonbreaking space equivalent - expect(columns.at(1).find('h2').text()).toEqual('\xA0'); + expect(columns[1].findByType('h2')[0].children[0].el).toEqual('\xA0'); }); }; describe('sidebar showing', () => { diff --git a/src/containers/Dashboard/LoadingView.test.jsx b/src/containers/Dashboard/LoadingView.test.jsx index 38934a41..d853da24 100644 --- a/src/containers/Dashboard/LoadingView.test.jsx +++ b/src/containers/Dashboard/LoadingView.test.jsx @@ -1,4 +1,4 @@ -import { shallow } from 'enzyme'; +import { shallow } from '@edx/react-unit-test-utils'; import { Spinner } from '@edx/paragon'; import hooks from './hooks'; @@ -14,10 +14,10 @@ describe('LoadingView', () => { hooks.useDashboardMessages.mockReturnValueOnce({ spinnerScreenReaderText }); }); test('snapshot', () => { - expect(shallow()).toMatchSnapshot(); + expect(shallow().snapshot).toMatchSnapshot(); }); it('renders spinner component with associated screen reader text', () => { const wrapper = shallow(); - expect(wrapper.find(Spinner).props().screenReaderText).toEqual(spinnerScreenReaderText); + expect(wrapper.instance.findByType(Spinner)[0].props.screenReaderText).toEqual(spinnerScreenReaderText); }); }); diff --git a/src/containers/Dashboard/__snapshots__/index.test.jsx.snap b/src/containers/Dashboard/__snapshots__/index.test.jsx.snap index 9382482f..593d90ff 100644 --- a/src/containers/Dashboard/__snapshots__/index.test.jsx.snap +++ b/src/containers/Dashboard/__snapshots__/index.test.jsx.snap @@ -10,8 +10,11 @@ exports[`Dashboard snapshots courses loaded, show select session modal, no avail > test-page-title - + + +
@@ -51,8 +55,11 @@ exports[`Dashboard snapshots there are no courses, there ARE available dashboard > test-page-title - + + +
{ {(hasCourses && showSelectSessionModal) && } )} -
+
{initIsPending ? () : ( diff --git a/src/containers/Dashboard/index.test.jsx b/src/containers/Dashboard/index.test.jsx index 70122555..c8022058 100644 --- a/src/containers/Dashboard/index.test.jsx +++ b/src/containers/Dashboard/index.test.jsx @@ -1,4 +1,4 @@ -import { shallow } from 'enzyme'; +import { shallow } from '@edx/react-unit-test-utils'; import { reduxHooks } from 'hooks'; @@ -58,18 +58,18 @@ describe('Dashboard', () => { describe('snapshots', () => { const testTitle = () => { test('page title is displayed in sr-only h1 tag', () => { - const heading = wrapper.find('h1'); - expect(heading.props().className).toEqual('sr-only'); - expect(heading.text()).toEqual(pageTitle); + const heading = wrapper.instance.findByType('h1')[0]; + expect(heading.props.className).toEqual('sr-only'); + expect(heading.children[0].el).toEqual(pageTitle); }); }; const testSnapshot = () => { test('snapshot', () => { - expect(wrapper).toMatchSnapshot(); + expect(wrapper.snapshot).toMatchSnapshot(); }); }; const testContent = (el) => { - expect(wrapper.find('#dashboard-content').children()).toMatchObject(shallow(el)); + expect(wrapper.instance.findByTestId('dashboard-content')[0].children[0]).toMatchObject(shallow(el)); }; const renderString = (show) => (show ? 'renders' : 'does not render'); @@ -86,11 +86,11 @@ describe('Dashboard', () => { testContent(contentEl); }); it(`${renderString(showEnterpriseModal)} dashbaord modal`, () => { - expect(wrapper.find(EnterpriseDashboardModal).length) + expect(wrapper.instance.findByType(EnterpriseDashboardModal).length) .toEqual(showEnterpriseModal ? 1 : 0); }); it(`${renderString(showSelectSessionModal)} select session modal`, () => { - expect(wrapper.find(SelectSessionModal).length).toEqual(showSelectSessionModal ? 1 : 0); + expect(wrapper.instance.findByType(SelectSessionModal).length).toEqual(showSelectSessionModal ? 1 : 0); }); }; describe('courses still loading', () => { diff --git a/src/containers/EmailSettingsModal/index.test.jsx b/src/containers/EmailSettingsModal/index.test.jsx index 13d93013..e20082f6 100644 --- a/src/containers/EmailSettingsModal/index.test.jsx +++ b/src/containers/EmailSettingsModal/index.test.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import { shallow } from 'enzyme'; +import { shallow } from '@edx/react-unit-test-utils'; import hooks from './hooks'; import EmailSettingsModal from '.'; @@ -40,18 +40,18 @@ describe('EmailSettingsModal', () => { describe('render', () => { test('snapshot: emails disabled, show: false', () => { hooks.mockReturnValueOnce(hookProps); - expect(shallow()).toMatchSnapshot(); + expect(shallow().snapshot).toMatchSnapshot(); }); test('snapshot: emails disabled, show: true', () => { hooks.mockReturnValueOnce(hookProps); - expect(shallow()).toMatchSnapshot(); + expect(shallow().snapshot).toMatchSnapshot(); }); test('snapshot: emails enabled, show: true', () => { hooks.mockReturnValueOnce({ ...hookProps, isOptedOut: false, }); - expect(shallow()).toMatchSnapshot(); + expect(shallow().snapshot).toMatchSnapshot(); }); }); }); diff --git a/src/containers/EnterpriseDashboardModal/__snapshots__/index.test.jsx.snap b/src/containers/EnterpriseDashboardModal/__snapshots__/index.test.jsx.snap index c40b09ac..78a7ee3e 100644 --- a/src/containers/EnterpriseDashboardModal/__snapshots__/index.test.jsx.snap +++ b/src/containers/EnterpriseDashboardModal/__snapshots__/index.test.jsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`EnterpriseDashboard empty snapshot 1`] = `""`; +exports[`EnterpriseDashboard empty snapshot 1`] = `null`; exports[`EnterpriseDashboard snapshot 1`] = ` { }; useEnterpriseDashboardHook.mockReturnValueOnce({ ...hookData }); const el = shallow(); - expect(el).toMatchSnapshot(); + expect(el.snapshot).toMatchSnapshot(); }); test('empty snapshot', () => { useEnterpriseDashboardHook.mockReturnValueOnce({}); const el = shallow(); - expect(el).toMatchSnapshot(); + expect(el.snapshot).toMatchSnapshot(); }); }); diff --git a/src/containers/LearnerDashboardHeader/BrandLogo.test.jsx b/src/containers/LearnerDashboardHeader/BrandLogo.test.jsx index 94729a69..fad6ce36 100644 --- a/src/containers/LearnerDashboardHeader/BrandLogo.test.jsx +++ b/src/containers/LearnerDashboardHeader/BrandLogo.test.jsx @@ -1,4 +1,4 @@ -import { shallow } from 'enzyme'; +import { shallow } from '@edx/react-unit-test-utils'; import { reduxHooks } from 'hooks'; import BrandLogo from './BrandLogo'; @@ -15,14 +15,14 @@ describe('BrandLogo', () => { url: 'url', }); const wrapper = shallow(); - expect(wrapper).toMatchSnapshot(); - expect(wrapper.find('a').prop('href')).toEqual('url'); + expect(wrapper.snapshot).toMatchSnapshot(); + expect(wrapper.instance.findByType('a')[0].props.href).toEqual('url'); }); test('dashboard undefined', () => { reduxHooks.useEnterpriseDashboardData.mockReturnValueOnce(null); const wrapper = shallow(); - expect(wrapper).toMatchSnapshot(); - expect(wrapper.find('a').prop('href')).toEqual('/'); + expect(wrapper.snapshot).toMatchSnapshot(); + expect(wrapper.instance.findByType('a')[0].props.href).toEqual('/'); }); }); diff --git a/src/containers/LearnerDashboardHeader/CollapsedHeader/CollapseMenuBody.test.jsx b/src/containers/LearnerDashboardHeader/CollapsedHeader/CollapseMenuBody.test.jsx index 1f2426b6..2af8ae7e 100644 --- a/src/containers/LearnerDashboardHeader/CollapsedHeader/CollapseMenuBody.test.jsx +++ b/src/containers/LearnerDashboardHeader/CollapsedHeader/CollapseMenuBody.test.jsx @@ -1,4 +1,4 @@ -import { shallow } from 'enzyme'; +import { shallow } from '@edx/react-unit-test-utils'; import { AppContext } from '@edx/frontend-platform/react'; import CollapseMenuBody from './CollapseMenuBody'; @@ -29,12 +29,12 @@ jest.mock('../hooks', () => ({ describe('CollapseMenuBody', () => { test('render', () => { const wrapper = shallow(); - expect(wrapper).toMatchSnapshot(); + expect(wrapper.snapshot).toMatchSnapshot(); }); test('render empty if not open', () => { const wrapper = shallow(); - expect(wrapper).toMatchSnapshot(); + expect(wrapper.snapshot).toMatchSnapshot(); expect(wrapper.isEmptyRender()).toBe(true); }); @@ -42,7 +42,7 @@ describe('CollapseMenuBody', () => { const { authenticatedUser } = AppContext; AppContext.authenticatedUser = null; const wrapper = shallow(); - expect(wrapper).toMatchSnapshot(); + expect(wrapper.snapshot).toMatchSnapshot(); AppContext.authenticatedUser = authenticatedUser; }); }); diff --git a/src/containers/LearnerDashboardHeader/CollapsedHeader/__snapshots__/CollapseMenuBody.test.jsx.snap b/src/containers/LearnerDashboardHeader/CollapsedHeader/__snapshots__/CollapseMenuBody.test.jsx.snap index 7be3396a..87ed984d 100644 --- a/src/containers/LearnerDashboardHeader/CollapsedHeader/__snapshots__/CollapseMenuBody.test.jsx.snap +++ b/src/containers/LearnerDashboardHeader/CollapsedHeader/__snapshots__/CollapseMenuBody.test.jsx.snap @@ -36,38 +36,40 @@ exports[`CollapseMenuBody render 1`] = ` > Help - - - - + + + + + +
`; -exports[`CollapseMenuBody render empty if not open 1`] = `""`; +exports[`CollapseMenuBody render empty if not open 1`] = `false`; exports[`CollapseMenuBody render unauthenticated 1`] = `
diff --git a/src/containers/LearnerDashboardHeader/CollapsedHeader/index.test.jsx b/src/containers/LearnerDashboardHeader/CollapsedHeader/index.test.jsx index 54a5ece4..c21e98cc 100644 --- a/src/containers/LearnerDashboardHeader/CollapsedHeader/index.test.jsx +++ b/src/containers/LearnerDashboardHeader/CollapsedHeader/index.test.jsx @@ -1,4 +1,4 @@ -import { shallow } from 'enzyme'; +import { shallow } from '@edx/react-unit-test-utils'; import CollapsedHeader from '.'; @@ -18,13 +18,13 @@ jest.mock('../hooks', () => ({ describe('CollapsedHeader', () => { it('renders', () => { const wrapper = shallow(); - expect(wrapper).toMatchSnapshot(); + expect(wrapper.snapshot).toMatchSnapshot(); }); it('render nothing if not collapsed', () => { useIsCollapsed.mockReturnValueOnce(false); const wrapper = shallow(); - expect(wrapper).toMatchSnapshot(); + expect(wrapper.snapshot).toMatchSnapshot(); }); it('renders with isOpen true', () => { @@ -33,6 +33,6 @@ describe('CollapsedHeader', () => { toggleIsOpen: jest.fn().mockName('toggleIsOpen'), }); const wrapper = shallow(); - expect(wrapper).toMatchSnapshot(); + expect(wrapper.snapshot).toMatchSnapshot(); }); }); diff --git a/src/containers/LearnerDashboardHeader/ConfirmEmailBanner/__snapshots__/index.test.jsx.snap b/src/containers/LearnerDashboardHeader/ConfirmEmailBanner/__snapshots__/index.test.jsx.snap index f8bd95e1..520e9fc3 100644 --- a/src/containers/LearnerDashboardHeader/ConfirmEmailBanner/__snapshots__/index.test.jsx.snap +++ b/src/containers/LearnerDashboardHeader/ConfirmEmailBanner/__snapshots__/index.test.jsx.snap @@ -69,4 +69,4 @@ exports[`ConfirmEmailBanner snapshot Show on unverified 1`] = ` `; -exports[`ConfirmEmailBanner snapshot do not show on already verified 1`] = `""`; +exports[`ConfirmEmailBanner snapshot do not show on already verified 1`] = `null`; diff --git a/src/containers/LearnerDashboardHeader/ConfirmEmailBanner/index.test.jsx b/src/containers/LearnerDashboardHeader/ConfirmEmailBanner/index.test.jsx index 600266ec..958484c9 100644 --- a/src/containers/LearnerDashboardHeader/ConfirmEmailBanner/index.test.jsx +++ b/src/containers/LearnerDashboardHeader/ConfirmEmailBanner/index.test.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import { shallow } from 'enzyme'; +import { shallow } from '@edx/react-unit-test-utils'; import hooks from './hooks'; import ConfirmEmailBanner from '.'; @@ -24,12 +24,12 @@ describe('ConfirmEmailBanner', () => { test('do not show on already verified', () => { hooks.mockReturnValueOnce({ ...hookProps, isNeeded: false }); const el = shallow(); - expect(el).toMatchSnapshot(); + expect(el.snapshot).toMatchSnapshot(); }); test('Show on unverified', () => { hooks.mockReturnValueOnce({ ...hookProps }); const el = shallow(); - expect(el).toMatchSnapshot(); + expect(el.snapshot).toMatchSnapshot(); }); }); }); diff --git a/src/containers/LearnerDashboardHeader/ExpandedHeader/AuthenticatedUserDropdown.test.jsx b/src/containers/LearnerDashboardHeader/ExpandedHeader/AuthenticatedUserDropdown.test.jsx index c23daad0..e7452d35 100644 --- a/src/containers/LearnerDashboardHeader/ExpandedHeader/AuthenticatedUserDropdown.test.jsx +++ b/src/containers/LearnerDashboardHeader/ExpandedHeader/AuthenticatedUserDropdown.test.jsx @@ -1,4 +1,4 @@ -import { shallow } from 'enzyme'; +import { shallow } from '@edx/react-unit-test-utils'; import { reduxHooks } from 'hooks'; import { getConfig } from '@edx/frontend-platform'; @@ -61,7 +61,7 @@ describe('AuthenticatedUserDropdown', () => { const { authenticatedUser } = AppContext; AppContext.authenticatedUser = null; const wrapper = shallow(); - expect(wrapper).toMatchSnapshot(); + expect(wrapper.snapshot).toMatchSnapshot(); expect(wrapper.isEmptyRender()).toBe(true); AppContext.authenticatedUser = authenticatedUser; }); @@ -69,13 +69,13 @@ describe('AuthenticatedUserDropdown', () => { reduxHooks.useEnterpriseDashboardData.mockReturnValueOnce(defaultDashboardData); useIsCollapsed.mockReturnValueOnce(true); const wrapper = shallow(); - expect(wrapper).toMatchSnapshot(); + expect(wrapper.snapshot).toMatchSnapshot(); }); test('without enterprise dashboard and expanded', () => { reduxHooks.useEnterpriseDashboardData.mockReturnValueOnce(null); useIsCollapsed.mockReturnValueOnce(false); const wrapper = shallow(); - expect(wrapper).toMatchSnapshot(); + expect(wrapper.snapshot).toMatchSnapshot(); }); }); }); diff --git a/src/containers/LearnerDashboardHeader/ExpandedHeader/__snapshots__/AuthenticatedUserDropdown.test.jsx.snap b/src/containers/LearnerDashboardHeader/ExpandedHeader/__snapshots__/AuthenticatedUserDropdown.test.jsx.snap index a33caad8..eafdef3c 100644 --- a/src/containers/LearnerDashboardHeader/ExpandedHeader/__snapshots__/AuthenticatedUserDropdown.test.jsx.snap +++ b/src/containers/LearnerDashboardHeader/ExpandedHeader/__snapshots__/AuthenticatedUserDropdown.test.jsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`AuthenticatedUserDropdown snapshots no auth render empty 1`] = `""`; +exports[`AuthenticatedUserDropdown snapshots no auth render empty 1`] = `null`; exports[`AuthenticatedUserDropdown snapshots with enterprise dashboard 1`] = ` - - SWITCH DASHBOARD - - - Personal - - - label - - Dashboard - - + + + SWITCH DASHBOARD + + + Personal + + + label + + Dashboard + + + @@ -87,17 +89,19 @@ exports[`AuthenticatedUserDropdown snapshots without enterprise dashboard and ex - - SWITCH DASHBOARD - - - Personal - - + + + SWITCH DASHBOARD + + + Personal + + + diff --git a/src/containers/LearnerDashboardHeader/ExpandedHeader/__snapshots__/index.test.jsx.snap b/src/containers/LearnerDashboardHeader/ExpandedHeader/__snapshots__/index.test.jsx.snap index 99fc954d..d75303ff 100644 --- a/src/containers/LearnerDashboardHeader/ExpandedHeader/__snapshots__/index.test.jsx.snap +++ b/src/containers/LearnerDashboardHeader/ExpandedHeader/__snapshots__/index.test.jsx.snap @@ -52,4 +52,4 @@ exports[`ExpandedHeader render 1`] = ` `; -exports[`ExpandedHeader render empty if collapsed 1`] = `""`; +exports[`ExpandedHeader render empty if collapsed 1`] = `false`; diff --git a/src/containers/LearnerDashboardHeader/ExpandedHeader/index.test.jsx b/src/containers/LearnerDashboardHeader/ExpandedHeader/index.test.jsx index 7939c43a..5cbcd3fd 100644 --- a/src/containers/LearnerDashboardHeader/ExpandedHeader/index.test.jsx +++ b/src/containers/LearnerDashboardHeader/ExpandedHeader/index.test.jsx @@ -1,4 +1,4 @@ -import { shallow } from 'enzyme'; +import { shallow } from '@edx/react-unit-test-utils'; import ExpandedHeader from '.'; @@ -29,13 +29,13 @@ describe('ExpandedHeader', () => { test('render', () => { useIsCollapsed.mockReturnValueOnce(false); const wrapper = shallow(); - expect(wrapper).toMatchSnapshot(); + expect(wrapper.snapshot).toMatchSnapshot(); }); test('render empty if collapsed', () => { useIsCollapsed.mockReturnValueOnce(true); const wrapper = shallow(); - expect(wrapper).toMatchSnapshot(); + expect(wrapper.snapshot).toMatchSnapshot(); expect(wrapper.isEmptyRender()).toBe(true); }); }); diff --git a/src/containers/LearnerDashboardHeader/index.test.jsx b/src/containers/LearnerDashboardHeader/index.test.jsx index cbaf5555..a7335565 100644 --- a/src/containers/LearnerDashboardHeader/index.test.jsx +++ b/src/containers/LearnerDashboardHeader/index.test.jsx @@ -1,4 +1,4 @@ -import { shallow } from 'enzyme'; +import { shallow } from '@edx/react-unit-test-utils'; import LearnerDashboardHeader from '.'; jest.mock('containers/MasqueradeBar', () => 'MasqueradeBar'); @@ -9,10 +9,10 @@ jest.mock('./ExpandedHeader', () => 'ExpandedHeader'); describe('LearnerDashboardHeader', () => { test('render', () => { const wrapper = shallow(); - expect(wrapper).toMatchSnapshot(); - expect(wrapper.find('ConfirmEmailBanner')).toHaveLength(1); - expect(wrapper.find('MasqueradeBar')).toHaveLength(1); - expect(wrapper.find('CollapsedHeader')).toHaveLength(1); - expect(wrapper.find('ExpandedHeader')).toHaveLength(1); + expect(wrapper.snapshot).toMatchSnapshot(); + expect(wrapper.instance.findByType('ConfirmEmailBanner')).toHaveLength(1); + expect(wrapper.instance.findByType('MasqueradeBar')).toHaveLength(1); + expect(wrapper.instance.findByType('CollapsedHeader')).toHaveLength(1); + expect(wrapper.instance.findByType('ExpandedHeader')).toHaveLength(1); }); }); diff --git a/src/containers/MasqueradeBar/__snapshots__/index.test.jsx.snap b/src/containers/MasqueradeBar/__snapshots__/index.test.jsx.snap index 32bfb342..c8e26abe 100644 --- a/src/containers/MasqueradeBar/__snapshots__/index.test.jsx.snap +++ b/src/containers/MasqueradeBar/__snapshots__/index.test.jsx.snap @@ -7,39 +7,41 @@ exports[`MasqueradeBar snapshot can masquerade 1`] = `
- - - View as: - - - - - + + + View as: + + + + + + state="default" + type="submit" + variant="brand" + /> +
`; @@ -51,44 +53,46 @@ exports[`MasqueradeBar snapshot can masquerade with input 1`] = `
- - - View as: - - - - - + + + View as: + + + + + + state="default" + type="submit" + variant="brand" + /> +
`; -exports[`MasqueradeBar snapshot cannot masquerade 1`] = `""`; +exports[`MasqueradeBar snapshot cannot masquerade 1`] = `null`; exports[`MasqueradeBar snapshot is masquerading failed with error 1`] = `
- - - View as: - - - - - - + + + View as: + + + + + + + state="default" + type="submit" + variant="brand" + /> +
`; @@ -145,39 +151,41 @@ exports[`MasqueradeBar snapshot is masquerading pending 1`] = `
- - - View as: - - - - - + + + View as: + + + + + + state="pending" + type="submit" + variant="brand" + /> +
`; @@ -189,22 +197,24 @@ exports[`MasqueradeBar snapshot is masquerading with input 1`] = `
- - - Viewing as: - - - test - + + + + Viewing as: + + + test + +
`; diff --git a/src/containers/MasqueradeBar/index.test.jsx b/src/containers/MasqueradeBar/index.test.jsx index ab02a83e..f2643cc1 100644 --- a/src/containers/MasqueradeBar/index.test.jsx +++ b/src/containers/MasqueradeBar/index.test.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import { shallow } from 'enzyme'; +import { shallow } from '@edx/react-unit-test-utils'; import { formatMessage } from 'testUtils'; import MasqueradeBar from '.'; @@ -26,21 +26,21 @@ describe('MasqueradeBar', () => { describe('snapshot', () => { test('can masquerade', () => { hooks.useMasqueradeBarData.mockReturnValueOnce(masqueradeMockData); - expect(shallow()).toMatchSnapshot(); + expect(shallow().snapshot).toMatchSnapshot(); }); test('can masquerade with input', () => { hooks.useMasqueradeBarData.mockReturnValueOnce({ ...masqueradeMockData, masqueradeInput: 'test', }); - expect(shallow()).toMatchSnapshot(); + expect(shallow().snapshot).toMatchSnapshot(); }); test('cannot masquerade', () => { hooks.useMasqueradeBarData.mockReturnValueOnce({ ...masqueradeMockData, canMasquerade: false, }); - expect(shallow()).toMatchSnapshot(); + expect(shallow().snapshot).toMatchSnapshot(); }); test('is masquerading with input', () => { hooks.useMasqueradeBarData.mockReturnValueOnce({ @@ -48,7 +48,7 @@ describe('MasqueradeBar', () => { isMasquerading: true, masqueradeInput: 'test', }); - expect(shallow()).toMatchSnapshot(); + expect(shallow().snapshot).toMatchSnapshot(); }); test('is masquerading failed with error', () => { hooks.useMasqueradeBarData.mockReturnValueOnce({ @@ -56,14 +56,14 @@ describe('MasqueradeBar', () => { isMasqueradingFailed: true, masqueradeErrorMessage: 'test-error', }); - expect(shallow()).toMatchSnapshot(); + expect(shallow().snapshot).toMatchSnapshot(); }); test('is masquerading pending', () => { hooks.useMasqueradeBarData.mockReturnValueOnce({ ...masqueradeMockData, isMasqueradingPending: true, }); - expect(shallow()).toMatchSnapshot(); + expect(shallow().snapshot).toMatchSnapshot(); }); }); }); diff --git a/src/containers/RelatedProgramsModal/components/ProgramCard.test.jsx b/src/containers/RelatedProgramsModal/components/ProgramCard.test.jsx index 42a60a17..638c7f46 100644 --- a/src/containers/RelatedProgramsModal/components/ProgramCard.test.jsx +++ b/src/containers/RelatedProgramsModal/components/ProgramCard.test.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import { shallow } from 'enzyme'; +import { shallow } from '@edx/react-unit-test-utils'; import ProgramCard from './ProgramCard'; @@ -18,6 +18,6 @@ const props = { describe('RelatedProgramsModal ProgramCard', () => { test('snapshot', () => { - expect(shallow()).toMatchSnapshot(); + expect(shallow().snapshot).toMatchSnapshot(); }); }); diff --git a/src/containers/RelatedProgramsModal/index.test.jsx b/src/containers/RelatedProgramsModal/index.test.jsx index 92c127ce..0d43db2f 100644 --- a/src/containers/RelatedProgramsModal/index.test.jsx +++ b/src/containers/RelatedProgramsModal/index.test.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import { shallow } from 'enzyme'; +import { shallow } from '@edx/react-unit-test-utils'; import { reduxHooks } from 'hooks'; import RelatedProgramsModal from '.'; @@ -50,11 +50,11 @@ describe('RelatedProgramsModal', () => { expect(reduxHooks.useCardRelatedProgramsData).toHaveBeenCalledWith(cardId); }); test('snapshot: open', () => { - expect(shallow()).toMatchSnapshot(); + expect(shallow().snapshot).toMatchSnapshot(); }); test('snapshot: closed', () => { expect( - shallow(), + shallow().snapshot, ).toMatchSnapshot(); }); }); diff --git a/src/containers/SelectSessionModal/index.test.jsx b/src/containers/SelectSessionModal/index.test.jsx index cf6f98c6..19958d50 100644 --- a/src/containers/SelectSessionModal/index.test.jsx +++ b/src/containers/SelectSessionModal/index.test.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import { shallow } from 'enzyme'; +import { shallow } from '@edx/react-unit-test-utils'; import hooks from './hooks'; import SelectSessionModal from '.'; @@ -30,7 +30,7 @@ describe('SelectSessionModal', () => { hooks.mockReturnValueOnce({ ...hookReturn, }); - expect(shallow()).toMatchSnapshot(); + expect(shallow().snapshot).toMatchSnapshot(); }); test('modal with leave option ', () => { @@ -38,7 +38,7 @@ describe('SelectSessionModal', () => { ...hookReturn, availableSessions: [...availableSessions], }); - expect(shallow()).toMatchSnapshot(); + expect(shallow().snapshot).toMatchSnapshot(); }); test('modal without leave option ', () => { @@ -47,7 +47,7 @@ describe('SelectSessionModal', () => { availableSessions, showLeaveOption: false, }); - expect(shallow()).toMatchSnapshot(); + expect(shallow().snapshot).toMatchSnapshot(); }); }); }); diff --git a/src/containers/UnenrollConfirmModal/components/ConfirmPane.test.jsx b/src/containers/UnenrollConfirmModal/components/ConfirmPane.test.jsx index e9364a55..545d149d 100644 --- a/src/containers/UnenrollConfirmModal/components/ConfirmPane.test.jsx +++ b/src/containers/UnenrollConfirmModal/components/ConfirmPane.test.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import { shallow } from 'enzyme'; +import { shallow } from '@edx/react-unit-test-utils'; import { ConfirmPane } from './ConfirmPane'; @@ -9,6 +9,6 @@ describe('UnenrollConfirmModal ConfirmPane', () => { handleClose: jest.fn().mockName('props.handleClose'), handleConfirm: jest.fn().mockName('props.handleConfirm'), }; - expect(shallow()).toMatchSnapshot(); + expect(shallow().snapshot).toMatchSnapshot(); }); }); diff --git a/src/containers/UnenrollConfirmModal/components/FinishedPane.test.jsx b/src/containers/UnenrollConfirmModal/components/FinishedPane.test.jsx index ee743516..1ec5e35c 100644 --- a/src/containers/UnenrollConfirmModal/components/FinishedPane.test.jsx +++ b/src/containers/UnenrollConfirmModal/components/FinishedPane.test.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import { shallow } from 'enzyme'; +import { shallow } from '@edx/react-unit-test-utils'; import { FinishedPane } from './FinishedPane'; @@ -9,13 +9,13 @@ describe('UnenrollConfirmModal FinishedPane', () => { gaveReason: true, handleClose: jest.fn().mockName('props.handleClose'), }; - expect(shallow()).toMatchSnapshot(); + expect(shallow().snapshot).toMatchSnapshot(); }); test('snapshot: did not give reason', () => { const props = { gaveReason: false, handleClose: jest.fn().mockName('props.handleClose'), }; - expect(shallow()).toMatchSnapshot(); + expect(shallow().snapshot).toMatchSnapshot(); }); }); diff --git a/src/containers/UnenrollConfirmModal/components/ReasonPane.test.jsx b/src/containers/UnenrollConfirmModal/components/ReasonPane.test.jsx index 4c058955..df168ddb 100644 --- a/src/containers/UnenrollConfirmModal/components/ReasonPane.test.jsx +++ b/src/containers/UnenrollConfirmModal/components/ReasonPane.test.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import { shallow } from 'enzyme'; +import { shallow } from '@edx/react-unit-test-utils'; import { ReasonPane } from './ReasonPane'; @@ -18,9 +18,9 @@ describe('UnenrollConfirmModal ReasonPane', () => { }, }; test('snapshot', () => { - expect(shallow()).toMatchSnapshot(); + expect(shallow().snapshot).toMatchSnapshot(); }); test('snapshot: no reason provided', () => { - expect(shallow()).toMatchSnapshot(); + expect(shallow().snapshot).toMatchSnapshot(); }); }); diff --git a/src/containers/UnenrollConfirmModal/index.test.jsx b/src/containers/UnenrollConfirmModal/index.test.jsx index f1f87a2b..e0a470b1 100644 --- a/src/containers/UnenrollConfirmModal/index.test.jsx +++ b/src/containers/UnenrollConfirmModal/index.test.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import { shallow } from 'enzyme'; +import { shallow } from '@edx/react-unit-test-utils'; import { UnenrollConfirmModal } from '.'; @@ -40,11 +40,11 @@ describe('UnenrollConfirmModal component', () => { }); test('snapshot: modalStates.confirm', () => { hooks.useUnenrollData.mockReturnValueOnce(hookProps); - expect(shallow()).toMatchSnapshot(); + expect(shallow().snapshot).toMatchSnapshot(); }); test('snapshot: modalStates.finished, reason given', () => { hooks.useUnenrollData.mockReturnValueOnce({ ...hookProps, modalState: hooks.modalStates.finished }); - expect(shallow()).toMatchSnapshot(); + expect(shallow().snapshot).toMatchSnapshot(); }); test('snapshot: modalStates.finished, reason skipped', () => { hooks.useUnenrollData.mockReturnValueOnce({ @@ -52,10 +52,10 @@ describe('UnenrollConfirmModal component', () => { modalState: hooks.modalStates.finished, isSkipped: true, }); - expect(shallow()).toMatchSnapshot(); + expect(shallow().snapshot).toMatchSnapshot(); }); test('snapshot: modalStates.reason, should be fullscreen with no shadow', () => { hooks.useUnenrollData.mockReturnValueOnce({ ...hookProps, modalState: hooks.modalStates.reason }); - expect(shallow()).toMatchSnapshot(); + expect(shallow().snapshot).toMatchSnapshot(); }); }); diff --git a/src/containers/WidgetContainers/LoadedSidebar/index.test.jsx b/src/containers/WidgetContainers/LoadedSidebar/index.test.jsx index 2efbe9fe..aa822c86 100644 --- a/src/containers/WidgetContainers/LoadedSidebar/index.test.jsx +++ b/src/containers/WidgetContainers/LoadedSidebar/index.test.jsx @@ -1,4 +1,4 @@ -import { shallow } from 'enzyme'; +import { shallow } from '@edx/react-unit-test-utils'; import hooks from 'widgets/ProductRecommendations/hooks'; import { mockFooterRecommendationsHook } from 'widgets/ProductRecommendations/testData'; @@ -23,7 +23,7 @@ describe('WidgetSidebar', () => { const wrapper = shallow(); expect(props.setSidebarShowing).toHaveBeenCalledWith(true); - expect(wrapper).toMatchSnapshot(); + expect(wrapper.snapshot).toMatchSnapshot(); }); }); @@ -34,7 +34,7 @@ describe('WidgetSidebar', () => { const wrapper = shallow(); expect(props.setSidebarShowing).not.toHaveBeenCalled(); - expect(wrapper.type()).toBeNull(); + expect(wrapper.shallowWrapper).toBeNull(); }); test('is hidden when the has the treatment values', () => { @@ -44,6 +44,6 @@ describe('WidgetSidebar', () => { const wrapper = shallow(); expect(props.setSidebarShowing).not.toHaveBeenCalled(); - expect(wrapper.type()).toBeNull(); + expect(wrapper.shallowWrapper).toBeNull(); }); }); diff --git a/src/containers/WidgetContainers/NoCoursesSidebar/index.test.jsx b/src/containers/WidgetContainers/NoCoursesSidebar/index.test.jsx index 2efbe9fe..aa822c86 100644 --- a/src/containers/WidgetContainers/NoCoursesSidebar/index.test.jsx +++ b/src/containers/WidgetContainers/NoCoursesSidebar/index.test.jsx @@ -1,4 +1,4 @@ -import { shallow } from 'enzyme'; +import { shallow } from '@edx/react-unit-test-utils'; import hooks from 'widgets/ProductRecommendations/hooks'; import { mockFooterRecommendationsHook } from 'widgets/ProductRecommendations/testData'; @@ -23,7 +23,7 @@ describe('WidgetSidebar', () => { const wrapper = shallow(); expect(props.setSidebarShowing).toHaveBeenCalledWith(true); - expect(wrapper).toMatchSnapshot(); + expect(wrapper.snapshot).toMatchSnapshot(); }); }); @@ -34,7 +34,7 @@ describe('WidgetSidebar', () => { const wrapper = shallow(); expect(props.setSidebarShowing).not.toHaveBeenCalled(); - expect(wrapper.type()).toBeNull(); + expect(wrapper.shallowWrapper).toBeNull(); }); test('is hidden when the has the treatment values', () => { @@ -44,6 +44,6 @@ describe('WidgetSidebar', () => { const wrapper = shallow(); expect(props.setSidebarShowing).not.toHaveBeenCalled(); - expect(wrapper.type()).toBeNull(); + expect(wrapper.shallowWrapper).toBeNull(); }); }); diff --git a/src/containers/WidgetContainers/WidgetFooter/index.test.jsx b/src/containers/WidgetContainers/WidgetFooter/index.test.jsx index df2aedc6..de8e4d4d 100644 --- a/src/containers/WidgetContainers/WidgetFooter/index.test.jsx +++ b/src/containers/WidgetContainers/WidgetFooter/index.test.jsx @@ -1,4 +1,4 @@ -import { shallow } from 'enzyme'; +import { shallow } from '@edx/react-unit-test-utils'; import hooks from 'widgets/ProductRecommendations/hooks'; import { mockFooterRecommendationsHook } from 'widgets/ProductRecommendations/testData'; @@ -19,7 +19,7 @@ describe('WidgetFooter', () => { const wrapper = shallow(); expect(hooks.useActivateRecommendationsExperiment).toHaveBeenCalled(); - expect(wrapper).toMatchSnapshot(); + expect(wrapper.snapshot).toMatchSnapshot(); }); }); @@ -30,7 +30,7 @@ describe('WidgetFooter', () => { const wrapper = shallow(); expect(hooks.useActivateRecommendationsExperiment).toHaveBeenCalled(); - expect(wrapper.type()).toBeNull(); + expect(wrapper.shallowWrapper).toBeNull(); }); test('is hidden when the experiment has the control values', () => { @@ -40,6 +40,6 @@ describe('WidgetFooter', () => { const wrapper = shallow(); expect(hooks.useActivateRecommendationsExperiment).toHaveBeenCalled(); - expect(wrapper.type()).toBeNull(); + expect(wrapper.shallowWrapper).toBeNull(); }); }); diff --git a/src/containers/WidgetContainers/WidgetNavbar/index.test.jsx b/src/containers/WidgetContainers/WidgetNavbar/index.test.jsx index e2606a80..d36f3749 100644 --- a/src/containers/WidgetContainers/WidgetNavbar/index.test.jsx +++ b/src/containers/WidgetContainers/WidgetNavbar/index.test.jsx @@ -1,10 +1,9 @@ -import { shallow } from 'enzyme'; +import { shallow } from '@edx/react-unit-test-utils'; import { usePaintedDoorExperimentContext, } from '../../../widgets/RecommendationsPaintedDoorBtn/PaintedDoorExperimentContext'; import WidgetNavbar from './index'; import { EXPANDED_NAVBAR } from '../../../widgets/RecommendationsPaintedDoorBtn/constants'; -import RecommendationsPaintedDoorBtn from '../../../widgets/RecommendationsPaintedDoorBtn'; jest.mock('widgets/RecommendationsPaintedDoorBtn/PaintedDoorExperimentContext', () => ({ usePaintedDoorExperimentContext: jest.fn(), @@ -26,7 +25,7 @@ describe('WidgetNavbar', () => { const wrapper = shallow(); expect(usePaintedDoorExperimentContext).toHaveBeenCalled(); - expect(wrapper).toMatchSnapshot(); + expect(wrapper.snapshot).toMatchSnapshot(); }); }); @@ -35,7 +34,7 @@ describe('WidgetNavbar', () => { const wrapper = shallow(); expect(usePaintedDoorExperimentContext).toHaveBeenCalled(); - expect(wrapper.type()).toBe(RecommendationsPaintedDoorBtn); + expect(wrapper.instance.type).toBe('RecommendationsPaintedDoorBtn'); }); test('renders nothing if user in not in navbar variation', () => { @@ -47,7 +46,7 @@ describe('WidgetNavbar', () => { const wrapper = shallow(); expect(usePaintedDoorExperimentContext).toHaveBeenCalled(); - expect(wrapper.type()).toBeNull(); + expect(wrapper.shallowWrapper).toBeNull(); }); test('renders nothing if experiment is loading', () => { @@ -60,6 +59,6 @@ describe('WidgetNavbar', () => { const wrapper = shallow(); expect(usePaintedDoorExperimentContext).toHaveBeenCalled(); - expect(wrapper.type()).toBeNull(); + expect(wrapper.shallowWrapper).toBeNull(); }); }); diff --git a/src/setupTest.jsx b/src/setupTest.jsx index dc29e966..16f66841 100755 --- a/src/setupTest.jsx +++ b/src/setupTest.jsx @@ -2,11 +2,6 @@ import '@testing-library/jest-dom'; import '@testing-library/jest-dom/extend-expect'; -import Enzyme from 'enzyme'; -import Adapter from '@wojtekmaj/enzyme-adapter-react-17'; - -Enzyme.configure({ adapter: new Adapter() }); - jest.mock('react', () => ({ ...jest.requireActual('react'), useRef: jest.fn((val) => ({ current: val, useRef: true })), diff --git a/src/widgets/LookingForChallengeWidget/index.test.jsx b/src/widgets/LookingForChallengeWidget/index.test.jsx index ad507d06..9bebde9d 100644 --- a/src/widgets/LookingForChallengeWidget/index.test.jsx +++ b/src/widgets/LookingForChallengeWidget/index.test.jsx @@ -1,4 +1,4 @@ -import { shallow } from 'enzyme'; +import { shallow } from '@edx/react-unit-test-utils'; import LookingForChallengeWidget from '.'; @@ -18,7 +18,7 @@ describe('LookingForChallengeWidget', () => { describe('snapshots', () => { test('default', () => { const wrapper = shallow(); - expect(wrapper).toMatchSnapshot(); + expect(wrapper.snapshot).toMatchSnapshot(); }); }); }); diff --git a/src/widgets/ProductRecommendations/components/LoadedView.test.jsx b/src/widgets/ProductRecommendations/components/LoadedView.test.jsx index dc6c9fde..a538b900 100644 --- a/src/widgets/ProductRecommendations/components/LoadedView.test.jsx +++ b/src/widgets/ProductRecommendations/components/LoadedView.test.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import { shallow } from 'enzyme'; +import { shallow } from '@edx/react-unit-test-utils'; import { mockCrossProductCourses, mockOpenCourses } from '../testData'; import LoadedView from './LoadedView'; @@ -12,7 +12,7 @@ describe('ProductRecommendations LoadedView', () => { crossProductCourses={mockCrossProductCourses} openCourses={mockOpenCourses} />, - ), + ).snapshot, ).toMatchSnapshot(); }); describe('with less than 2 cross product courses', () => { @@ -24,7 +24,7 @@ describe('ProductRecommendations LoadedView', () => { />, ); - const productCardContainerProps = wrapper.find('ProductCardContainer').props(); + const productCardContainerProps = wrapper.instance.findByType('ProductCardContainer')[0].props; expect(productCardContainerProps.courseTypes.length).toEqual(1); expect(productCardContainerProps.courseTypes[0]).toEqual('Course'); diff --git a/src/widgets/ProductRecommendations/components/LoadingView.test.jsx b/src/widgets/ProductRecommendations/components/LoadingView.test.jsx index 3afc66c2..45229d77 100644 --- a/src/widgets/ProductRecommendations/components/LoadingView.test.jsx +++ b/src/widgets/ProductRecommendations/components/LoadingView.test.jsx @@ -1,10 +1,10 @@ import React from 'react'; -import { shallow } from 'enzyme'; +import { shallow } from '@edx/react-unit-test-utils'; import LoadingView from './LoadingView'; describe('ProductRecommendations LoadingView', () => { it('matches snapshot', () => { - expect(shallow()).toMatchSnapshot(); + expect(shallow().snapshot).toMatchSnapshot(); }); }); diff --git a/src/widgets/ProductRecommendations/components/ProductCard.test.jsx b/src/widgets/ProductRecommendations/components/ProductCard.test.jsx index 1eb2fad9..2b5a5a22 100644 --- a/src/widgets/ProductRecommendations/components/ProductCard.test.jsx +++ b/src/widgets/ProductRecommendations/components/ProductCard.test.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import { shallow } from 'enzyme'; +import { shallow } from '@edx/react-unit-test-utils'; import { mockCrossProductCourses, mockOpenCourses, mockFallbackOpenCourse } from '../testData'; import { trackProductCardClicked, trackCourseCardClicked } from '../optimizelyExperiment'; @@ -46,12 +46,12 @@ describe('ProductRecommendations ProductCard', () => { const fallbackOpenCourseProps = getProps(mockFallbackOpenCourse[0]); it('matches snapshot', () => { - expect(shallow()).toMatchSnapshot(); + expect(shallow().snapshot).toMatchSnapshot(); }); it('has the query string parameter attached to a fallback recommendations url', () => { const wrapper = shallow(); - const cardUrl = wrapper.find('Card').props().destination; + const cardUrl = wrapper.instance.findByType('Card')[0].props.destination; expect(cardUrl).toEqual('https://www.edx.org/course/some-course?linked_from=recommender'); }); @@ -60,7 +60,7 @@ describe('ProductRecommendations ProductCard', () => { const wrapper = shallow(); const { courseRunKey, title, url } = openCourseProps; - wrapper.simulate('click'); + wrapper.instance.props.onClick(); expect(trackCourseCardClicked).toHaveBeenCalledWith('1'); expect(discoveryCardClicked).toHaveBeenCalledWith(courseRunKey, title, `${url}&linked_from=recommender`); @@ -75,7 +75,7 @@ describe('ProductRecommendations ProductCard', () => { url, } = crossProductProps; - wrapper.simulate('click'); + wrapper.instance.props.onClick(); expect(trackProductCardClicked).toHaveBeenCalledWith('1'); expect(productCardClicked).toHaveBeenCalledWith(courseRunKey, title, courseType, `${url}&linked_from=recommender`); diff --git a/src/widgets/ProductRecommendations/components/ProductCardContainer.test.jsx b/src/widgets/ProductRecommendations/components/ProductCardContainer.test.jsx index 6dd141e3..6c6ae52b 100644 --- a/src/widgets/ProductRecommendations/components/ProductCardContainer.test.jsx +++ b/src/widgets/ProductRecommendations/components/ProductCardContainer.test.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import { shallow } from 'enzyme'; +import { shallow } from '@edx/react-unit-test-utils'; import { mockCrossProductCourses, mockOpenCourses } from '../testData'; import ProductCardContainer from './ProductCardContainer'; @@ -12,17 +12,17 @@ describe('ProductRecommendations ProductCardContainer', () => { }; it('matches snapshot', () => { - expect(shallow()).toMatchSnapshot(); + expect(shallow().snapshot).toMatchSnapshot(); }); describe('with finalCourseList containing cross product and open courses', () => { it('renders 3 ProductCardHeaders with the 3 different course types', () => { const wrapper = shallow(); - const productCardHeaders = wrapper.find('ProductCardHeader'); + const productCardHeaders = wrapper.instance.findByType('ProductCardHeader'); expect(productCardHeaders.length).toEqual(3); productCardHeaders.forEach((header, index) => { - expect(header.props().courseType).toEqual(props.courseTypes[index]); + expect(header.props.courseType).toEqual(props.courseTypes[index]); }); }); }); @@ -35,10 +35,10 @@ describe('ProductRecommendations ProductCardContainer', () => { }; const wrapper = shallow(); - const productCardHeaders = wrapper.find('ProductCardHeader'); + const productCardHeaders = wrapper.instance.findByType('ProductCardHeader'); expect(productCardHeaders.length).toEqual(1); - expect(productCardHeaders.at(0).props().courseType).toEqual(openCoursesProps.courseTypes[0]); + expect(productCardHeaders[0].props.courseType).toEqual(openCoursesProps.courseTypes[0]); }); }); }); diff --git a/src/widgets/ProductRecommendations/components/ProductCardHeader.test.jsx b/src/widgets/ProductRecommendations/components/ProductCardHeader.test.jsx index 96397219..4709cd8b 100644 --- a/src/widgets/ProductRecommendations/components/ProductCardHeader.test.jsx +++ b/src/widgets/ProductRecommendations/components/ProductCardHeader.test.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import { shallow } from 'enzyme'; +import { shallow } from '@edx/react-unit-test-utils'; import ProductCardHeader from './ProductCardHeader'; import { executiveEducation, bootCamp } from '../constants'; @@ -22,14 +22,14 @@ describe('ProductRecommendations ProductCardHeader', () => { const coursesType = 'Courses'; it('matches snapshot', () => { - expect(shallow()).toMatchSnapshot(); + expect(shallow().snapshot).toMatchSnapshot(); }); describe('with bootcamp courseType prop', () => { it('renders a bootcamp header', () => { const wrapper = shallow(); - expect(wrapper.find('h3').text()).toEqual(bootCamp); + expect(wrapper.instance.findByType('h3')[0].children[0].el).toEqual(bootCamp); }); }); @@ -37,16 +37,16 @@ describe('ProductRecommendations ProductCardHeader', () => { it('renders a courses header', () => { const wrapper = shallow(); - expect(wrapper.find('h3').text()).toEqual(coursesType); + expect(wrapper.instance.findByType('h3')[0].children[0].el).toEqual(coursesType); }); }); it('send outs experiment events when clicked', () => { const wrapper = shallow(); - const hyperLink = wrapper.find('Hyperlink'); + const hyperLink = wrapper.instance.findByType('Hyperlink')[0]; const execEdLink = 'http://localhost:18000/executive-education?linked_from=recommender'; - hyperLink.simulate('click'); + hyperLink.props.onClick(); expect(trackProductHeaderClicked).toHaveBeenCalledWith('1'); expect(recommendationsHeaderClicked).toHaveBeenCalledWith(executiveEducation, execEdLink); diff --git a/src/widgets/ProductRecommendations/index.test.jsx b/src/widgets/ProductRecommendations/index.test.jsx index 2e05df32..28f537ed 100644 --- a/src/widgets/ProductRecommendations/index.test.jsx +++ b/src/widgets/ProductRecommendations/index.test.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import { shallow } from 'enzyme'; +import { shallow } from '@edx/react-unit-test-utils'; import { reduxHooks } from 'hooks'; import hooks from './hooks'; import ProductRecommendations from './index'; @@ -45,7 +45,7 @@ describe('ProductRecommendations', () => { ...successfullLoadValues, }); - expect(shallow()).toMatchSnapshot(); + expect(shallow().snapshot).toMatchSnapshot(); }); it('renders the LoadingView if the request is pending', () => { @@ -55,7 +55,7 @@ describe('ProductRecommendations', () => { isLoading: true, }); - expect(shallow()).toMatchObject( + expect({ ...shallow().shallowWrapper, children: expect.any(Array) }).toMatchObject( shallow(), ); }); @@ -68,7 +68,7 @@ describe('ProductRecommendations', () => { const wrapper = shallow(); - expect(wrapper.type()).toBeNull(); + expect(wrapper.shallowWrapper).toBeNull(); }); it('renders nothing if the user is on the mobile view', () => { hooks.useIsMobile.mockReturnValueOnce(true); @@ -78,7 +78,7 @@ describe('ProductRecommendations', () => { const wrapper = shallow(); - expect(wrapper.type()).toBeNull(); + expect(wrapper.shallowWrapper).toBeNull(); }); it('renders NoCoursesView if the request is loaded, user has courses, and the response is empty', () => { @@ -91,7 +91,7 @@ describe('ProductRecommendations', () => { }, }); - expect(shallow()).toMatchObject( + expect({ ...shallow().shallowWrapper, children: expect.any(Array) }).toMatchObject( shallow(), ); }); @@ -103,7 +103,7 @@ describe('ProductRecommendations', () => { ...successfullLoadValues, }); - expect(shallow()).toMatchObject( + expect({ ...shallow().shallowWrapper, children: expect.any(Array) }).toMatchObject( shallow( { productRecommendations: mockAmplitudeResponse, }); - expect(shallow()).toMatchObject( + expect({ ...shallow().shallowWrapper, children: expect.any(Array) }).toMatchObject( shallow( { isLoading: false, }); - mount( + shallow( , @@ -136,7 +136,7 @@ describe('Painted door experiments context', () => { isLoading: false, }); - mount( + shallow( , diff --git a/src/widgets/RecommendationsPaintedDoorBtn/components/PaintedDoorModal/__snapshots__/index.test.jsx.snap b/src/widgets/RecommendationsPaintedDoorBtn/components/PaintedDoorModal/__snapshots__/index.test.jsx.snap index c3a4c830..86aabf3a 100644 --- a/src/widgets/RecommendationsPaintedDoorBtn/components/PaintedDoorModal/__snapshots__/index.test.jsx.snap +++ b/src/widgets/RecommendationsPaintedDoorBtn/components/PaintedDoorModal/__snapshots__/index.test.jsx.snap @@ -4,7 +4,7 @@ exports[`ModalView snapshot should renders default ModalView 1`] = `
- - Thank you for your interest! - +
@@ -31,22 +31,22 @@ exports[`ModalView snapshot should renders default ModalView 1`] = `

- + - Skip for now - - + Count me in! - + - - + +
`; diff --git a/src/widgets/RecommendationsPaintedDoorBtn/components/PaintedDoorModal/index.test.jsx b/src/widgets/RecommendationsPaintedDoorBtn/components/PaintedDoorModal/index.test.jsx index 51397b16..179ff998 100644 --- a/src/widgets/RecommendationsPaintedDoorBtn/components/PaintedDoorModal/index.test.jsx +++ b/src/widgets/RecommendationsPaintedDoorBtn/components/PaintedDoorModal/index.test.jsx @@ -1,4 +1,4 @@ -import { shallow } from 'enzyme'; +import { shallow } from '@edx/react-unit-test-utils'; import ModalView from '.'; @@ -6,6 +6,17 @@ jest.mock('../../track', () => ({ trackPaintedDoorRecommendationHomeSkipBtnClicked: jest.fn(), trackPaintedDoorRecommendationHomeInterestBtnClicked: jest.fn(), })); +jest.mock('@edx/paragon', () => ({ + ...jest.requireActual('@edx/paragon'), + ModalDialog: { + Body: 'ModalDialog.Body', + Header: 'ModalDialog.Header', + Title: 'ModalDialog.Title', + Footer: 'ModalDialog.Footer', + CloseButton: 'ModalDialog.CloseButton', + }, + ActionRow: 'ActionRow', +})); describe('ModalView', () => { const props = { @@ -16,7 +27,7 @@ describe('ModalView', () => { describe('snapshot', () => { test('should renders default ModalView', () => { const wrapper = shallow(); - expect(wrapper).toMatchSnapshot(); + expect(wrapper.snapshot).toMatchSnapshot(); }); }); }); diff --git a/src/widgets/RecommendationsPaintedDoorBtn/index.test.jsx b/src/widgets/RecommendationsPaintedDoorBtn/index.test.jsx index c399cdea..68a9ef1a 100644 --- a/src/widgets/RecommendationsPaintedDoorBtn/index.test.jsx +++ b/src/widgets/RecommendationsPaintedDoorBtn/index.test.jsx @@ -1,6 +1,6 @@ import React from 'react'; -import { mount, shallow } from 'enzyme'; -import { Button, ModalDialog } from '@edx/paragon'; +import { shallow } from '@edx/react-unit-test-utils'; +import { ModalDialog } from '@edx/paragon'; import RecommendationsPaintedDoorBtn from './index'; import { EXPANDED_NAVBAR, RECOMMENDATIONS_PANEL } from './constants'; import NavbarButton from './components/NavbarButton'; @@ -25,13 +25,13 @@ describe('RecommendationsPaintedDoorBtn', () => { }; it('matches snapshot', () => { - expect(shallow()).toMatchSnapshot(); + expect(shallow().snapshot).toMatchSnapshot(); }); it('renders painted door modal', () => { const wrapper = shallow(); - expect(wrapper.find(ModalDialog)).toBeTruthy(); + expect(wrapper.instance.findByType(ModalDialog)).toBeTruthy(); }); it('renders painted door navbar button', () => { @@ -41,8 +41,8 @@ describe('RecommendationsPaintedDoorBtn', () => { }; const wrapper = shallow(); - expect(wrapper.find(NavbarButton).exists()).toBe(true); - expect(wrapper.find(RecommendationsPanelButton).exists()).toBe(false); + expect(wrapper.instance.findByType(NavbarButton)).not.toHaveLength(0); + expect(wrapper.instance.findByType(RecommendationsPanelButton)).toHaveLength(0); }); it('renders painted door recommendations panel button', () => { @@ -52,8 +52,8 @@ describe('RecommendationsPaintedDoorBtn', () => { }; const wrapper = shallow(); - expect(wrapper.find(NavbarButton).exists()).toBe(false); - expect(wrapper.find(RecommendationsPanelButton).exists()).toBe(true); + expect(wrapper.instance.findByType(NavbarButton)).toHaveLength(0); + expect(wrapper.instance.findByType(RecommendationsPanelButton)).not.toHaveLength(0); }); it('test no button (null) rendered for invalid placement', () => { @@ -63,8 +63,8 @@ describe('RecommendationsPaintedDoorBtn', () => { }; const wrapper = shallow(); - expect(wrapper.find(NavbarButton).exists()).toBe(false); - expect(wrapper.find(RecommendationsPanelButton).exists()).toBe(false); + expect(wrapper.instance.findByType(NavbarButton)).toHaveLength(0); + expect(wrapper.instance.findByType(RecommendationsPanelButton)).toHaveLength(0); }); it('test track event is fired on navbar button click', () => { @@ -72,10 +72,10 @@ describe('RecommendationsPaintedDoorBtn', () => { ...props, placement: EXPANDED_NAVBAR, }; - const wrapper = mount(); - const navbarButton = wrapper.find(NavbarButton); + const wrapper = shallow(); + const navbarButton = wrapper.instance.findByType(NavbarButton)[0]; - navbarButton.find(Button).simulate('click'); + navbarButton.props.handleClick(); expect(trackPaintedDoorRecommendationHomeBtnClicked).toHaveBeenCalled(); }); @@ -85,10 +85,10 @@ describe('RecommendationsPaintedDoorBtn', () => { ...props, placement: RECOMMENDATIONS_PANEL, }; - const wrapper = mount(); - const navbarButton = wrapper.find(RecommendationsPanelButton); + const wrapper = shallow(); + const recommendationsPanelButton = wrapper.instance.findByType(RecommendationsPanelButton)[0]; - navbarButton.find(Button).simulate('click'); + recommendationsPanelButton.props.handleClick(); expect(trackPaintedDoorRecommendationHomeBtnClicked).toHaveBeenCalled(); }); diff --git a/src/widgets/RecommendationsPanel/LoadedView.test.jsx b/src/widgets/RecommendationsPanel/LoadedView.test.jsx index 3456ff94..8b0d25e3 100644 --- a/src/widgets/RecommendationsPanel/LoadedView.test.jsx +++ b/src/widgets/RecommendationsPanel/LoadedView.test.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import { shallow } from 'enzyme'; +import { shallow } from '@edx/react-unit-test-utils'; import { Button } from '@edx/paragon'; import LoadedView from './LoadedView'; @@ -40,21 +40,21 @@ describe('RecommendationsPanel LoadedView', () => { test('without personalize recommendation', () => { usePaintedDoorExperimentContext.mockReturnValueOnce(mockExperimentContext); const el = shallow(); - expect(el).toMatchSnapshot(); - expect(el.find('h3').text()).toEqual(messages.popularCoursesHeading.defaultMessage); + expect(el.snapshot).toMatchSnapshot(); + expect(el.instance.findByType('h3')[0].children[0].el).toEqual(messages.popularCoursesHeading.defaultMessage); }); test('with personalize recommendation', () => { usePaintedDoorExperimentContext.mockReturnValueOnce(mockExperimentContext); const el = shallow(); - expect(el).toMatchSnapshot(); - expect(el.find('h3').text()).toEqual(messages.recommendationsHeading.defaultMessage); + expect(el.snapshot).toMatchSnapshot(); + expect(el.instance.findByType('h3')[0].children[0].el).toEqual(messages.recommendationsHeading.defaultMessage); }); test('test painted door button is rendered if user is in variation', () => { usePaintedDoorExperimentContext.mockReturnValueOnce(mockExperimentContext); const wrapper = shallow(); - expect(wrapper.find(RecommendationsPaintedDoorBtn).exists()).toEqual(true); + expect(wrapper.instance.findByType(RecommendationsPaintedDoorBtn)).not.toHaveLength(0); }); test('test explore courses button is returned if user is not in variation', () => { @@ -64,8 +64,9 @@ describe('RecommendationsPanel LoadedView', () => { }; usePaintedDoorExperimentContext.mockReturnValueOnce(mockExperimentContext); const wrapper = shallow(); - expect(wrapper.find(RecommendationsPaintedDoorBtn).exists()).toEqual(false); - expect(wrapper.find(Button).text()).toEqual(messages.exploreCoursesButton.defaultMessage); + expect(wrapper.instance.findByType(RecommendationsPaintedDoorBtn)).toHaveLength(0); + expect(wrapper.instance.findByType(Button)[0].children[0].el) + .toEqual(messages.exploreCoursesButton.defaultMessage); }); test('test explore courses button is returned if experiment is loading', () => { @@ -76,8 +77,9 @@ describe('RecommendationsPanel LoadedView', () => { }; usePaintedDoorExperimentContext.mockReturnValueOnce(mockExperimentContext); const wrapper = shallow(); - expect(wrapper.find(RecommendationsPaintedDoorBtn).exists()).toEqual(false); - expect(wrapper.find(Button).text()).toEqual(messages.exploreCoursesButton.defaultMessage); + expect(wrapper.instance.findByType(RecommendationsPaintedDoorBtn)).toHaveLength(0); + expect(wrapper.instance.findByType(Button)[0].children[0].el) + .toEqual(messages.exploreCoursesButton.defaultMessage); }); }); }); diff --git a/src/widgets/RecommendationsPanel/LoadingView.test.jsx b/src/widgets/RecommendationsPanel/LoadingView.test.jsx index 1b68e3ab..41f267d7 100644 --- a/src/widgets/RecommendationsPanel/LoadingView.test.jsx +++ b/src/widgets/RecommendationsPanel/LoadingView.test.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import { shallow } from 'enzyme'; +import { shallow } from '@edx/react-unit-test-utils'; import { useDashboardMessages } from 'containers/Dashboard/hooks'; import LoadingView from './LoadingView'; @@ -14,6 +14,6 @@ useDashboardMessages.mockReturnValue(spinnerScreenReaderText); describe('RecommendationsPanel LoadingView', () => { test('snapshot', () => { - expect(shallow()).toMatchSnapshot(); + expect(shallow().snapshot).toMatchSnapshot(); }); }); diff --git a/src/widgets/RecommendationsPanel/index.test.jsx b/src/widgets/RecommendationsPanel/index.test.jsx index 39d9c4ee..b0806899 100644 --- a/src/widgets/RecommendationsPanel/index.test.jsx +++ b/src/widgets/RecommendationsPanel/index.test.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import { shallow } from 'enzyme'; +import { shallow } from '@edx/react-unit-test-utils'; import LookingForChallengeWidget from 'widgets/LookingForChallengeWidget'; import hooks from './hooks'; @@ -46,7 +46,8 @@ describe('RecommendationsPanel snapshot', () => { ...defaultValues, isLoading: true, }); - expect(shallow()).toMatchObject(shallow()); + expect({ ...shallow().shallowWrapper, children: expect.any(Array) }) + .toMatchObject(shallow()); }); it('displays LoadedView with courses if request is loaded', () => { hooks.useRecommendationPanelData.mockReturnValueOnce({ @@ -54,7 +55,7 @@ describe('RecommendationsPanel snapshot', () => { courses, isLoaded: true, }); - expect(shallow()).toMatchObject( + expect({ ...shallow().shallowWrapper, children: expect.any(Array) }).toMatchObject( shallow(), ); }); @@ -63,7 +64,7 @@ describe('RecommendationsPanel snapshot', () => { ...defaultValues, isFailed: true, }); - expect(shallow()).toMatchObject( + expect({ ...shallow().shallowWrapper, children: expect.any(Array) }).toMatchObject( shallow(), ); }); @@ -71,7 +72,7 @@ describe('RecommendationsPanel snapshot', () => { hooks.useRecommendationPanelData.mockReturnValueOnce({ ...defaultValues, }); - expect(shallow()).toMatchObject( + expect({ ...shallow().shallowWrapper, children: expect.any(Array) }).toMatchObject( shallow(), ); }); @@ -90,7 +91,7 @@ describe('RecommendationsPanel snapshot', () => { }); const wrapper = shallow(); - expect(wrapper.find(RecommendationsPaintedDoorBtn).exists()).toBe(true); + expect(wrapper.instance.findByType(RecommendationsPaintedDoorBtn)).not.toHaveLength(0); }); it('displays painted door btn if user is in variation and no flags are set (defaults)', () => { hooks.useRecommendationPanelData.mockReturnValueOnce({ @@ -104,7 +105,7 @@ describe('RecommendationsPanel snapshot', () => { }); const wrapper = shallow(); - expect(wrapper.find(RecommendationsPaintedDoorBtn).exists()).toBe(true); + expect(wrapper.instance.findByType(RecommendationsPaintedDoorBtn)).not.toHaveLength(0); }); it('renders only LookingForChallengeWidget if user is not in variation', () => { hooks.useRecommendationPanelData.mockReturnValueOnce({ @@ -117,7 +118,7 @@ describe('RecommendationsPanel snapshot', () => { experimentLoading: false, }); - expect(shallow()).toMatchObject( + expect({ ...shallow().shallowWrapper, children: expect.any(Array) }).toMatchObject( shallow(), ); }); @@ -132,7 +133,7 @@ describe('RecommendationsPanel snapshot', () => { experimentLoading: true, }); - expect(shallow()).toMatchObject( + expect({ ...shallow().shallowWrapper, children: expect.any(Array) }).toMatchObject( shallow(), ); });