Andal.LND/frontend-app-authn
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: depreciate enzyme

Browse Source 
move unit test from enzyme to RTL

VAN-1792
This commit is contained in:
mubbsharanwar
2024-01-16 10:24:20 +05:00
committed by Mubbshar Anwar
parent b9b4492de9
commit 2ea9301c5e
7 changed files with 85 additions and 397 deletions
Download Patch File Download Diff File Expand all files Collapse all files

310
package-lock.json generated
View File

@@ -50,9 +50,7 @@
"@edx/browserslist-config": "^1.1.1",
"@edx/frontend-build": "13.0.8",
"@edx/reactifex": "1.1.0",
"@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
"babel-plugin-formatjs": "10.5.10",
"enzyme": "3.11.0",
"eslint-plugin-import": "2.28.0",
"glob": "7.2.3",
"history": "5.3.0",
@@ -6193,46 +6191,6 @@
}
}
},
"node_modules/@wojtekmaj/enzyme-adapter-react-17": {
"version": "0.8.0",
"resolved": "https://registry.npmjs.org/@wojtekmaj/enzyme-adapter-react-17/-/enzyme-adapter-react-17-0.8.0.tgz",
"integrity": "sha512-zeUGfQRziXW7R7skzNuJyi01ZwuKCH8WiBNnTgUJwdS/CURrJwAhWsfW7nG7E30ak8Pu3ZwD9PlK9skBfAoOBw==",
"dev": true,
"dependencies": {
"@wojtekmaj/enzyme-adapter-utils": "^0.2.0",
"enzyme-shallow-equal": "^1.0.0",
"has": "^1.0.0",
"prop-types": "^15.7.0",
"react-is": "^17.0.0",
"react-test-renderer": "^17.0.0"
},
"funding": {
"url": "https://github.com/wojtekmaj/enzyme-adapter-react-17?sponsor=1"
},
"peerDependencies": {
"enzyme": "^3.0.0",
"react": "^17.0.0-0",
"react-dom": "^17.0.0-0"
}
},
"node_modules/@wojtekmaj/enzyme-adapter-utils": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/@wojtekmaj/enzyme-adapter-utils/-/enzyme-adapter-utils-0.2.0.tgz",
"integrity": "sha512-ZvZm9kZxZEKAbw+M1/Q3iDuqQndVoN8uLnxZ8bzxm7KgGTBejrGRoJAp8f1EN8eoO3iAjBNEQnTDW/H4Ekb0FQ==",
"dev": true,
"dependencies": {
"function.prototype.name": "^1.1.0",
"has": "^1.0.0",
"object.fromentries": "^2.0.0",
"prop-types": "^15.7.0"
},
"funding": {
"url": "https://github.com/wojtekmaj/enzyme-adapter-utils?sponsor=1"
},
"peerDependencies": {
"react": "^17.0.0-0"
}
},
"node_modules/@xtuc/ieee754": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
@@ -6614,25 +6572,6 @@
"node": ">=0.10.0"
}
},
"node_modules/array.prototype.filter": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/array.prototype.filter/-/array.prototype.filter-1.0.2.tgz",
"integrity": "sha512-us+UrmGOilqttSOgoWZTpOvHu68vZT2YCjc/H4vhu56vzZpaDFBhB+Se2UwqWzMKbDv7Myq5M5pcZLAtUvTQdQ==",
"dev": true,
"dependencies": {
"call-bind": "^1.0.2",
"define-properties": "^1.1.4",
"es-abstract": "^1.20.4",
"es-array-method-boxes-properly": "^1.0.0",
"is-string": "^1.0.7"
},
"engines": {
"node": ">= 0.4"
},
"funding": {
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/array.prototype.findlastindex": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/array.prototype.findlastindex/-/array.prototype.findlastindex-1.2.2.tgz",
@@ -7615,44 +7554,6 @@
"node": ">=10"
}
},
"node_modules/cheerio": {
"version": "1.0.0-rc.12",
"resolved": "https://registry.npmjs.org/cheerio/-/cheerio-1.0.0-rc.12.tgz",
"integrity": "sha512-VqR8m68vM46BNnuZ5NtnGBKIE/DfN0cRIzg9n40EIq9NOv90ayxLBXA8fXC5gquFRGJSTRqBq25Jt2ECLR431Q==",
"dev": true,
"dependencies": {
"cheerio-select": "^2.1.0",
"dom-serializer": "^2.0.0",
"domhandler": "^5.0.3",
"domutils": "^3.0.1",
"htmlparser2": "^8.0.1",
"parse5": "^7.0.0",
"parse5-htmlparser2-tree-adapter": "^7.0.0"
},
"engines": {
"node": ">= 6"
},
"funding": {
"url": "https://github.com/cheeriojs/cheerio?sponsor=1"
}
},
"node_modules/cheerio-select": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/cheerio-select/-/cheerio-select-2.1.0.tgz",
"integrity": "sha512-9v9kG0LvzrlcungtnJtpGNxY+fzECQKhK4EGJX2vByejiMX84MFNQw4UxPJl3bFbTMw+Dfs37XaIkCwTZfLh4g==",
"dev": true,
"dependencies": {
"boolbase": "^1.0.0",
"css-select": "^5.1.0",
"css-what": "^6.1.0",
"domelementtype": "^2.3.0",
"domhandler": "^5.0.3",
"domutils": "^3.0.1"
},
"funding": {
"url": "https://github.com/sponsors/fb55"
}
},
"node_modules/chokidar": {
"version": "3.5.3",
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@@ -8743,12 +8644,6 @@
"node": ">=8"
}
},
"node_modules/discontinuous-range": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/discontinuous-range/-/discontinuous-range-1.0.0.tgz",
"integrity": "sha512-c68LpLbO+7kP/b1Hr1qs8/BJ09F5khZGTxqxZuhzxpmwJKOgRFHJWIb9/KmqnqHhLdO55aOxFH/EGBvUQbL/RQ==",
"dev": true
},
"node_modules/dns-equal": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz",
@@ -9013,52 +8908,6 @@
"node": ">=4"
}
},
"node_modules/enzyme": {
"version": "3.11.0",
"resolved": "https://registry.npmjs.org/enzyme/-/enzyme-3.11.0.tgz",
"integrity": "sha512-Dw8/Gs4vRjxY6/6i9wU0V+utmQO9kvh9XLnz3LIudviOnVYDEe2ec+0k+NQoMamn1VrjKgCUOWj5jG/5M5M0Qw==",
"dev": true,
"dependencies": {
"array.prototype.flat": "^1.2.3",
"cheerio": "^1.0.0-rc.3",
"enzyme-shallow-equal": "^1.0.1",
"function.prototype.name": "^1.1.2",
"has": "^1.0.3",
"html-element-map": "^1.2.0",
"is-boolean-object": "^1.0.1",
"is-callable": "^1.1.5",
"is-number-object": "^1.0.4",
"is-regex": "^1.0.5",
"is-string": "^1.0.5",
"is-subset": "^0.1.1",
"lodash.escape": "^4.0.1",
"lodash.isequal": "^4.5.0",
"object-inspect": "^1.7.0",
"object-is": "^1.0.2",
"object.assign": "^4.1.0",
"object.entries": "^1.1.1",
"object.values": "^1.1.1",
"raf": "^3.4.1",
"rst-selector-parser": "^2.2.3",
"string.prototype.trim": "^1.2.1"
},
"funding": {
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/enzyme-shallow-equal": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/enzyme-shallow-equal/-/enzyme-shallow-equal-1.0.5.tgz",
"integrity": "sha512-i6cwm7hN630JXenxxJFBKzgLC3hMTafFQXflvzHgPmDhOBhxUWDe8AeRv1qp2/uWJ2Y8z5yLWMzmAfkTOiOCZg==",
"dev": true,
"dependencies": {
"has": "^1.0.3",
"object-is": "^1.1.5"
},
"funding": {
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/error-ex": {
"version": "1.3.2",
"resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
@@ -9122,12 +8971,6 @@
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/es-array-method-boxes-properly": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/es-array-method-boxes-properly/-/es-array-method-boxes-properly-1.0.0.tgz",
"integrity": "sha512-wd6JXUmyHmt8T5a2xreUwKcGPq6f1f+WwIJkijUqiGcJz1qqnZgP6XIK+QyIWU5lT7imeNxUll48bziG+TSYcA==",
"dev": true
},
"node_modules/es-get-iterator": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/es-get-iterator/-/es-get-iterator-1.1.3.tgz",
@@ -11304,19 +11147,6 @@
"wbuf": "^1.1.0"
}
},
"node_modules/html-element-map": {
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/html-element-map/-/html-element-map-1.3.1.tgz",
"integrity": "sha512-6XMlxrAFX4UEEGxctfFnmrFaaZFNf9i5fNuV5wZ3WWQ4FVaNP1aX1LkX9j2mfEx1NpjeE/rL3nmgEn23GdFmrg==",
"dev": true,
"dependencies": {
"array.prototype.filter": "^1.0.0",
"call-bind": "^1.0.2"
},
"funding": {
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/html-encoding-sniffer": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-2.0.1.tgz",
@@ -11388,25 +11218,6 @@
"webpack": "^5.20.0"
}
},
"node_modules/htmlparser2": {
"version": "8.0.2",
"resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-8.0.2.tgz",
"integrity": "sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==",
"dev": true,
"funding": [
"https://github.com/fb55/htmlparser2?sponsor=1",
{
"type": "github",
"url": "https://github.com/sponsors/fb55"
}
],
"dependencies": {
"domelementtype": "^2.3.0",
"domhandler": "^5.0.3",
"domutils": "^3.0.1",
"entities": "^4.4.0"
}
},
"node_modules/http-deceiver": {
"version": "1.2.7",
"resolved": "https://registry.npmjs.org/http-deceiver/-/http-deceiver-1.2.7.tgz",
@@ -12253,12 +12064,6 @@
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/is-subset": {
"version": "0.1.1",
"resolved": "https://registry.npmjs.org/is-subset/-/is-subset-0.1.1.tgz",
"integrity": "sha512-6Ybun0IkarhmEqxXCNw/C0bna6Zb/TkfUX9UbwJtK6ObwAVCxmAP308WWTHviM/zAqXk05cdhYsUsZeGQh99iw==",
"dev": true
},
"node_modules/is-symbol": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.4.tgz",
@@ -15529,23 +15334,11 @@
"resolved": "https://registry.npmjs.org/lodash.flatten/-/lodash.flatten-4.4.0.tgz",
"integrity": "sha512-C5N2Z3DgnnKr0LOpv/hKCgKdb7ZZwafIrsesve6lmzvZIRZRGaZ/l6Q8+2W7NaT+ZwO3fFlSCzCzrDCFdJfZ4g=="
},
"node_modules/lodash.flattendeep": {
"version": "4.4.0",
"resolved": "https://registry.npmjs.org/lodash.flattendeep/-/lodash.flattendeep-4.4.0.tgz",
"integrity": "sha512-uHaJFihxmJcEX3kT4I23ABqKKalJ/zDrDg0lsFtc1h+3uw49SIJ5beyhx5ExVRti3AvKoOJngIj7xz3oylPdWQ==",
"dev": true
},
"node_modules/lodash.invokemap": {
"version": "4.6.0",
"resolved": "https://registry.npmjs.org/lodash.invokemap/-/lodash.invokemap-4.6.0.tgz",
"integrity": "sha512-CfkycNtMqgUlfjfdh2BhKO/ZXrP8ePOX5lEU/g0R3ItJcnuxWDwokMGKx1hWcfOikmyOVx6X9IwWnDGlgKl61w=="
},
"node_modules/lodash.isequal": {
"version": "4.5.0",
"resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
"integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==",
"dev": true
},
"node_modules/lodash.isplainobject": {
"version": "4.0.6",
"resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
@@ -15874,12 +15667,6 @@
"resolved": "https://registry.npmjs.org/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz",
"integrity": "sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A=="
},
"node_modules/moo": {
"version": "0.5.2",
"resolved": "https://registry.npmjs.org/moo/-/moo-0.5.2.tgz",
"integrity": "sha512-iSAJLHYKnX41mKcJKjqvnAN9sf0LMDTXDEvFv+ffuRR9a1MIuXLjMNL6EsnDHSkKLTWNqQQ5uo61P4EbU4NU+Q==",
"dev": true
},
"node_modules/mrmime": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/mrmime/-/mrmime-1.0.1.tgz",
@@ -15961,34 +15748,6 @@
"resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
"integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw=="
},
"node_modules/nearley": {
"version": "2.20.1",
"resolved": "https://registry.npmjs.org/nearley/-/nearley-2.20.1.tgz",
"integrity": "sha512-+Mc8UaAebFzgV+KpI5n7DasuuQCHA89dmwm7JXw3TV43ukfNQ9DnBH3Mdb2g/I4Fdxc26pwimBWvjIw0UAILSQ==",
"dev": true,
"dependencies": {
"commander": "^2.19.0",
"moo": "^0.5.0",
"railroad-diagrams": "^1.0.0",
"randexp": "0.4.6"
},
"bin": {
"nearley-railroad": "bin/nearley-railroad.js",
"nearley-test": "bin/nearley-test.js",
"nearley-unparse": "bin/nearley-unparse.js",
"nearleyc": "bin/nearleyc.js"
},
"funding": {
"type": "individual",
"url": "https://nearley.js.org/#give-to-nearley"
}
},
"node_modules/nearley/node_modules/commander": {
"version": "2.20.3",
"resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
"integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
"dev": true
},
"node_modules/negotiator": {
"version": "0.6.3",
"resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
@@ -16630,31 +16389,6 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/parse5": {
"version": "7.1.2",
"resolved": "https://registry.npmjs.org/parse5/-/parse5-7.1.2.tgz",
"integrity": "sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==",
"dev": true,
"dependencies": {
"entities": "^4.4.0"
},
"funding": {
"url": "https://github.com/inikulin/parse5?sponsor=1"
}
},
"node_modules/parse5-htmlparser2-tree-adapter": {
"version": "7.0.0",
"resolved": "https://registry.npmjs.org/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-7.0.0.tgz",
"integrity": "sha512-B77tOZrqqfUfnVcOrUvfdLbz4pu4RopLD/4vmu3HUPswwTA8OH0EMW9BlWR2B0RCoiZRAHEUu7IxeP1Pd1UU+g==",
"dev": true,
"dependencies": {
"domhandler": "^5.0.2",
"parse5": "^7.0.0"
},
"funding": {
"url": "https://github.com/inikulin/parse5?sponsor=1"
}
},
"node_modules/parseurl": {
"version": "1.3.3",
"resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
@@ -16722,12 +16456,6 @@
"node": ">=8"
}
},
"node_modules/performance-now": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
"integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==",
"dev": true
},
"node_modules/picocolors": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
@@ -17839,34 +17567,6 @@
"resolved": "https://registry.npmjs.org/queue-tick/-/queue-tick-1.0.1.tgz",
"integrity": "sha512-kJt5qhMxoszgU/62PLP1CJytzd2NKetjSRnyuj31fDd3Rlcz3fzlFdFLD1SItunPwyqEOkca6GbV612BWfaBag=="
},
"node_modules/raf": {
"version": "3.4.1",
"resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
"integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
"dev": true,
"dependencies": {
"performance-now": "^2.1.0"
}
},
"node_modules/railroad-diagrams": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/railroad-diagrams/-/railroad-diagrams-1.0.0.tgz",
"integrity": "sha512-cz93DjNeLY0idrCNOH6PviZGRN9GJhsdm9hpn1YCS879fj4W+x5IFJhhkRZcwVgMmFF7R82UA/7Oh+R8lLZg6A==",
"dev": true
},
"node_modules/randexp": {
"version": "0.4.6",
"resolved": "https://registry.npmjs.org/randexp/-/randexp-0.4.6.tgz",
"integrity": "sha512-80WNmd9DA0tmZrw9qQa62GPPWfuXJknrmVmLcxvq4uZBdYqb1wYoKTmnlGUchvVWe0XiLupYkBoXVOxz3C8DYQ==",
"dev": true,
"dependencies": {
"discontinuous-range": "1.0.0",
"ret": "~0.1.10"
},
"engines": {
"node": ">=0.12"
}
},
"node_modules/randombytes": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
@@ -19139,16 +18839,6 @@
"rimraf": "bin.js"
}
},
"node_modules/rst-selector-parser": {
"version": "2.2.3",
"resolved": "https://registry.npmjs.org/rst-selector-parser/-/rst-selector-parser-2.2.3.tgz",
"integrity": "sha512-nDG1rZeP6oFTLN6yNDV/uiAvs1+FS/KlrEwh7+y7dpuApDBy6bI2HTBcc0/V8lv9OTqfyD34eF7au2pm8aBbhA==",
"dev": true,
"dependencies": {
"lodash.flattendeep": "^4.4.0",
"nearley": "^2.7.10"
}
},
"node_modules/rsvp": {
"version": "4.8.5",
"resolved": "https://registry.npmjs.org/rsvp/-/rsvp-4.8.5.tgz",

2
package.json
View File

@@ -73,9 +73,7 @@
"@edx/browserslist-config": "^1.1.1",
"@edx/frontend-build": "13.0.8",
"@edx/reactifex": "1.1.0",
"@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
"babel-plugin-formatjs": "10.5.10",
"enzyme": "3.11.0",
"eslint-plugin-import": "2.28.0",
"glob": "7.2.3",
"history": "5.3.0",

20
src/base-container/components/default-layout/DefaultLayout.test.jsx
View File

@@ -1,50 +1,50 @@
import React from 'react';
import { IntlProvider } from '@edx/frontend-platform/i18n';
import { mount } from 'enzyme';
import { render, screen } from '@testing-library/react';
import { DefaultLargeLayout, DefaultMediumLayout, DefaultSmallLayout } from './index';
describe('Default Layout tests', () => {
it('should display the form passed as a child in SmallScreenLayout', () => {
const smallScreen = mount(
render(
<IntlProvider locale="en">
<div>
<DefaultSmallLayout />
<form>
<form aria-label="form">
<input type="text" />
</form>
</div>
</IntlProvider>,
);
expect(smallScreen.find('form').exists()).toEqual(true);
expect(screen.getByRole('form')).toBeDefined();
});
it('should display the form passed as a child in MediumScreenLayout', () => {
const mediumScreen = mount(
render(
<IntlProvider locale="en">
<div>
<DefaultMediumLayout />
<form>
<form aria-label="form">
<input type="text" />
</form>
</div>
</IntlProvider>,
);
expect(mediumScreen.find('form').exists()).toEqual(true);
expect(screen.getByRole('form')).toBeDefined();
});
it('should display the form passed as a child in LargeScreenLayout', () => {
const largeScreen = mount(
render(
<IntlProvider locale="en">
<div>
<DefaultLargeLayout />
<form>
<form aria-label="form">
<input type="text" />
</form>
</div>
</IntlProvider>,
);
expect(largeScreen.find('form').exists()).toEqual(true);
expect(screen.getByRole('form')).toBeDefined();
});
});

14
src/base-container/tests/BaseContainer.test.jsx
View File

@@ -1,7 +1,7 @@
import React from 'react';
import { IntlProvider } from '@edx/frontend-platform/i18n';
import { mount } from 'enzyme';
import { render } from '@testing-library/react';
import { Context as ResponsiveContext } from 'react-responsive';
import BaseContainer from '../index';
@@ -12,16 +12,16 @@ const LargeScreen = {
};
describe('Base component tests', () => {
it('should should default layout', () => {
const baseContainer = mount(
it('should show default layout', () => {
const { container } = render(
<IntlProvider locale="en">
<BaseContainer />
</IntlProvider>,
LargeScreen,
);
expect(baseContainer.find('.banner__image').exists()).toBeFalsy();
expect(baseContainer.find('.large-screen-svg-primary').exists()).toBeTruthy();
expect(container.querySelector('.banner__image')).toBeNull();
expect(container.querySelector('.large-screen-svg-primary')).toBeDefined();
});
it('[experiment] should show image layout for treatment group', () => {
@@ -31,13 +31,13 @@ describe('Base component tests', () => {
},
};
const baseContainer = mount(
const { container } = render(
<IntlProvider locale="en">
<BaseContainer />
</IntlProvider>,
LargeScreen,
);
expect(baseContainer.find('.banner__image').exists()).toBeTruthy();
expect(container.querySelector('.banner__image')).toBeDefined();
});
});

80
src/field-renderer/tests/FieldRenderer.test.jsx
View File

@@ -1,7 +1,7 @@
import React from 'react';
import { getConfig } from '@edx/frontend-platform';
import { mount } from 'enzyme';
import { fireEvent, render } from '@testing-library/react';
import FieldRenderer from '../FieldRenderer';
@@ -28,13 +28,14 @@ describe('FieldRendererTests', () => {
options: [['1997', '1997'], ['1998', '1998']],
};
const fieldRenderer = mount(<FieldRenderer value={value} fieldData={fieldData} onChangeHandler={changeHandler} />);
const field = fieldRenderer.find('select#yob-field');
field.simulate('change', { target: { value: 1997 } });
const { container } = render(<FieldRenderer value={value} fieldData={fieldData} onChangeHandler={changeHandler} />);
const input = container.querySelector('select#yob-field');
const label = container.querySelector('label');
fireEvent.change(input, { target: { value: 1997 } });
expect(field.type()).toEqual('select');
expect(fieldRenderer.find('label').text()).toEqual('Year of Birth');
expect(value).toEqual(1997);
expect(input.type).toEqual('select-one');
expect(label.textContent).toContain(fieldData.label);
expect(value).toEqual('1997');
});
it('should return null if no options are provided for select field', () => {
@@ -44,8 +45,8 @@ describe('FieldRendererTests', () => {
name: 'yob-field',
};
const fieldRenderer = mount(<FieldRenderer fieldData={fieldData} onChangeHandler={() => {}} />);
expect(fieldRenderer.html()).toBeNull();
const { container } = render(<FieldRenderer fieldData={fieldData} onChangeHandler={() => {}} />);
expect(container.innerHTML).toEqual('');
});
it('should render textarea field', () => {
@@ -55,12 +56,13 @@ describe('FieldRendererTests', () => {
name: 'goals-field',
};
const fieldRenderer = mount(<FieldRenderer value={value} fieldData={fieldData} onChangeHandler={changeHandler} />);
const field = fieldRenderer.find('#goals-field').last();
field.simulate('change', { target: { value: 'These are my goals.' } });
const { container } = render(<FieldRenderer value={value} fieldData={fieldData} onChangeHandler={changeHandler} />);
const input = container.querySelector('#goals-field');
const label = container.querySelector('label');
fireEvent.change(input, { target: { value: 'These are my goals.' } });
expect(field.type()).toEqual('textarea');
expect(fieldRenderer.find('label').text()).toEqual('Why do you want to join this platform?');
expect(input.type).toEqual(fieldData.type);
expect(label.textContent).toContain('Why do you want to join this platform?');
expect(value).toEqual('These are my goals.');
});
@@ -71,12 +73,13 @@ describe('FieldRendererTests', () => {
name: 'company-field',
};
const fieldRenderer = mount(<FieldRenderer value={value} fieldData={fieldData} onChangeHandler={changeHandler} />);
const field = fieldRenderer.find('#company-field').last();
field.simulate('change', { target: { value: 'ABC' } });
const { container } = render(<FieldRenderer value={value} fieldData={fieldData} onChangeHandler={changeHandler} />);
const input = container.querySelector('input#company-field');
const label = container.querySelector('label');
fireEvent.change(input, { target: { value: 'ABC' } });
expect(field.type()).toEqual('input');
expect(fieldRenderer.find('label').text()).toEqual('Company');
expect(input.type).toEqual(fieldData.type);
expect(label.textContent).toContain(fieldData.label);
expect(value).toEqual('ABC');
});
@@ -87,12 +90,13 @@ describe('FieldRendererTests', () => {
name: 'marketing-emails-opt-in-field',
};
const fieldRenderer = mount(<FieldRenderer value={value} fieldData={fieldData} onChangeHandler={changeHandler} />);
const field = fieldRenderer.find('input#marketing-emails-opt-in-field');
field.simulate('change', { target: { checked: true, type: 'checkbox' } });
const { container } = render(<FieldRenderer value={value} fieldData={fieldData} onChangeHandler={changeHandler} />);
const input = container.querySelector('input#marketing-emails-opt-in-field');
const label = container.querySelector('label');
fireEvent.click(input);
expect(field.prop('type')).toEqual('checkbox');
expect(fieldRenderer.find('label').text()).toEqual(fieldData.label);
expect(input.type).toEqual(fieldData.type);
expect(label.textContent).toContain(fieldData.label);
expect(value).toEqual(true);
});
@@ -101,8 +105,8 @@ describe('FieldRendererTests', () => {
type: 'unknown',
};
const fieldRenderer = mount(<FieldRenderer fieldData={fieldData} onChangeHandler={() => {}} />);
expect(fieldRenderer.html()).toBeNull();
const { container } = render(<FieldRenderer fieldData={fieldData} onChangeHandler={() => {}} />);
expect(container.innerHTML).toContain('');
});
it('should run onBlur and onFocus functions for a field if given', () => {
@@ -117,7 +121,7 @@ describe('FieldRendererTests', () => {
functionValue = `${e.target.name} focussed`;
};
const fieldRenderer = mount(
const { container } = render(
<FieldRenderer
handleFocus={onFocus}
handleBlur={onBlur}
@@ -126,19 +130,19 @@ describe('FieldRendererTests', () => {
onChangeHandler={changeHandler}
/>,
);
const field = fieldRenderer.find('#test-field').last();
const input = container.querySelector('#test-field');
field.simulate('focus');
fireEvent.focus(input);
expect(functionValue).toEqual('test-field focussed');
field.simulate('blur');
fireEvent.blur(input);
expect(functionValue).toEqual('test-field blurred');
});
it('should render error message for required text fields', () => {
const fieldData = { type: 'text', label: 'First Name', name: 'first-name-field' };
const fieldRenderer = mount(
const { container } = render(
<FieldRenderer
isRequired
fieldData={fieldData}
@@ -147,7 +151,7 @@ describe('FieldRendererTests', () => {
/>,
);
expect(fieldRenderer.find('.form-text-size').last().text()).toEqual('Enter your first name');
expect(container.querySelector(`#${fieldData.name}-error`).textContent).toEqual('Enter your first name');
});
it('should render error message for required select fields', () => {
@@ -155,7 +159,7 @@ describe('FieldRendererTests', () => {
type: 'select', label: 'Preference', name: 'preference-field', options: [['a', 'Opt 1'], ['b', 'Opt 2']],
};
const fieldRenderer = mount(
const { container } = render(
<FieldRenderer
isRequired
fieldData={fieldData}
@@ -164,13 +168,13 @@ describe('FieldRendererTests', () => {
/>,
);
expect(fieldRenderer.find('.form-text-size').last().text()).toEqual('Select your preference');
expect(container.querySelector(`#${fieldData.name}-error`).textContent).toEqual('Select your preference');
});
it('should render error message for required textarea fields', () => {
const fieldData = { type: 'textarea', label: 'Goals', name: 'goals-field' };
const fieldRenderer = mount(
const { container } = render(
<FieldRenderer
isRequired
fieldData={fieldData}
@@ -179,13 +183,13 @@ describe('FieldRendererTests', () => {
/>,
);
expect(fieldRenderer.find('.form-text-size').last().text()).toEqual('Tell us your goals');
expect(container.querySelector(`#${fieldData.name}-error`).textContent).toEqual('Tell us your goals');
});
it('should render error message for required checkbox fields', () => {
const fieldData = { type: 'checkbox', label: 'Honor Code', name: 'honor-code-field' };
const fieldRenderer = mount(
const { container } = render(
<FieldRenderer
isRequired
fieldData={fieldData}
@@ -194,6 +198,6 @@ describe('FieldRendererTests', () => {
/>,
);
expect(fieldRenderer.find('.form-text-size').last().text()).toEqual('You must agree to our Honor Code');
expect(container.querySelector(`#${fieldData.name}-error`).textContent).toEqual('You must agree to our Honor Code');
});
});

53
src/logistration/Logistration.test.jsx
View File

@@ -4,13 +4,12 @@ import { Provider } from 'react-redux';
import { getConfig, mergeConfig } from '@edx/frontend-platform';
import { sendPageEvent, sendTrackEvent } from '@edx/frontend-platform/analytics';
import { configure, injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
import { mount } from 'enzyme';
import { fireEvent, render, screen } from '@testing-library/react';
import { MemoryRouter } from 'react-router-dom';
import configureStore from 'redux-mock-store';
import Logistration from './Logistration';
import { clearThirdPartyAuthContextErrorMessage } from '../common-components/data/actions';
import { RenderInstitutionButton } from '../common-components/InstitutionLogistration';
import {
COMPLETE_STATE, LOGIN_PAGE, REGISTER_PAGE,
} from '../data/constants';
@@ -99,16 +98,16 @@ describe('Logistration', () => {
ALLOW_PUBLIC_ACCOUNT_CREATION: true,
});
const logistration = mount(reduxWrapper(<IntlLogistration />));
const { container } = render(reduxWrapper(<IntlLogistration />));
expect(logistration.find('#main-content').find('RegistrationPage').exists()).toBeTruthy();
expect(container.querySelector('RegistrationPage')).toBeDefined();
});
it('should render login page', () => {
const props = { selectedPage: LOGIN_PAGE };
const logistration = mount(reduxWrapper(<IntlLogistration {...props} />));
const { container } = render(reduxWrapper(<IntlLogistration {...props} />));
expect(logistration.find('#main-content').find('LoginPage').exists()).toBeTruthy();
expect(container.querySelector('LoginPage')).toBeDefined();
});
it('should render login/register headings when show registration links is disabled', () => {
@@ -117,18 +116,18 @@ describe('Logistration', () => {
});
let props = { selectedPage: LOGIN_PAGE };
let logistration = mount(reduxWrapper(<IntlLogistration {...props} />));
const { rerender } = render(reduxWrapper(<IntlLogistration {...props} />));
// verifying sign in heading
expect(logistration.find('#main-content').find('h3').text()).toEqual('Sign in');
expect(screen.getByRole('heading', { level: 3 }).textContent).toEqual('Sign in');
// register page is still accessible when SHOW_REGISTRATION_LINKS is false
// but it needs to be accessed directly
props = { selectedPage: REGISTER_PAGE };
logistration = mount(reduxWrapper(<IntlLogistration {...props} />));
rerender(reduxWrapper(<IntlLogistration {...props} />));
// verifying register heading
expect(logistration.find('#main-content').find('h3').text()).toEqual('Register');
expect(screen.getByRole('heading', { level: 3 }).textContent).toEqual('Register');
});
it('should render only login page when public account creation is disabled', () => {
@@ -152,14 +151,14 @@ describe('Logistration', () => {
});
const props = { selectedPage: LOGIN_PAGE };
const logistration = mount(reduxWrapper(<IntlLogistration {...props} />));
const { container } = render(reduxWrapper(<IntlLogistration {...props} />));
// verifying sign in heading for institution login false
expect(logistration.find('#main-content').find('h3').text()).toEqual('Sign in');
expect(screen.getByRole('heading', { level: 3 }).textContent).toEqual('Sign in');
// verifying tabs heading for institution login true
logistration.find(RenderInstitutionButton).simulate('click', { institutionLogin: true });
expect(logistration.find('#controlled-tab').exists()).toBeTruthy();
fireEvent.click(screen.getByRole('link'));
expect(container.querySelector('#controlled-tab')).toBeDefined();
});
it('should display institution login option when secondary providers are present', () => {
@@ -182,12 +181,12 @@ describe('Logistration', () => {
});
const props = { selectedPage: LOGIN_PAGE };
const logistration = mount(reduxWrapper(<IntlLogistration {...props} />));
expect(logistration.text().includes('Institution/campus credentials')).toBe(true);
render(reduxWrapper(<IntlLogistration {...props} />));
expect(screen.getByText('Institution/campus credentials')).toBeDefined();
// on clicking "Institution/campus credentials" button, it should display institution login page
logistration.find(RenderInstitutionButton).simulate('click', { institutionLogin: true });
expect(logistration.text().includes('Test University')).toBe(true);
fireEvent.click(screen.getByText('Institution/campus credentials'));
expect(screen.getByText('Test University')).toBeDefined();
mergeConfig({
DISABLE_ENTERPRISE_LOGIN: '',
@@ -213,8 +212,8 @@ describe('Logistration', () => {
});
const props = { selectedPage: LOGIN_PAGE };
const logistration = mount(reduxWrapper(<IntlLogistration {...props} />));
logistration.find(RenderInstitutionButton).simulate('click', { institutionLogin: true });
render(reduxWrapper(<IntlLogistration {...props} />));
fireEvent.click(screen.getByText('Institution/campus credentials'));
expect(sendTrackEvent).toHaveBeenCalledWith('edx.bi.institution_login_form.toggled', { category: 'user-engagement' });
expect(sendPageEvent).toHaveBeenCalledWith('login_and_registration', 'institution_login');
@@ -245,9 +244,9 @@ describe('Logistration', () => {
delete window.location;
window.location = { hostname: getConfig().SITE_NAME, href: getConfig().BASE_URL };
const root = mount(reduxWrapper(<IntlLogistration />));
root.find(RenderInstitutionButton).simulate('click', { institutionLogin: true });
expect(root.text().includes('Test University')).toBe(true);
render(reduxWrapper(<IntlLogistration />));
fireEvent.click(screen.getByText('Institution/campus credentials'));
expect(screen.getByText('Test University')).toBeDefined();
mergeConfig({
DISABLE_ENTERPRISE_LOGIN: '',
@@ -256,15 +255,15 @@ describe('Logistration', () => {
it('should fire action to backup registration form on tab click', () => {
store.dispatch = jest.fn(store.dispatch);
const logistration = mount(reduxWrapper(<IntlLogistration />));
logistration.find('a[data-rb-event-key="/login"]').simulate('click');
const { container } = render(reduxWrapper(<IntlLogistration />));
fireEvent.click(container.querySelector('a[data-rb-event-key="/login"]'));
expect(store.dispatch).toHaveBeenCalledWith(backupRegistrationForm());
});
it('should clear tpa context errorMessage tab click', () => {
store.dispatch = jest.fn(store.dispatch);
const logistration = mount(reduxWrapper(<IntlLogistration />));
logistration.find('a[data-rb-event-key="/login"]').simulate('click');
const { container } = render(reduxWrapper(<IntlLogistration />));
fireEvent.click(container.querySelector('a[data-rb-event-key="/login"]'));
expect(store.dispatch).toHaveBeenCalledWith(clearThirdPartyAuthContextErrorMessage());
});
});

3
src/setupTest.js
View File

@@ -3,10 +3,7 @@
import { getConfig } from '@edx/frontend-platform';
import { configure as configureLogging } from '@edx/frontend-platform/logging';
import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
import Enzyme from 'enzyme';
Enzyme.configure({ adapter: new Adapter() });
class MockLoggingService {
logInfo = jest.fn();