From c00d2c9b96105f711b8d1dbf4755e90412ea7c54 Mon Sep 17 00:00:00 2001 From: Kyr <40792129+khudym@users.noreply.github.com> Date: Thu, 12 Oct 2023 16:26:08 +0300 Subject: [PATCH 01/12] test: migrate tests to react-testing-library (#2581) * refactor: move enzyme to react testing library * feat: rewriting tests from Enzyme to RTL * refactor: update tests 2 * refactor: rewrite tests using react testing library * refactor: rewrite test using react testing library 2part * refactor: refactor after review part 1 * refactor: replace fireEvent with userEvent where it is possible * fix: fix console errors --------- Co-authored-by: monteri Co-authored-by: PKulkoRaccoonGang Co-authored-by: Kyrylo Hudym-Levkovych --- package-lock.json | 317 --------- package.json | 5 +- src/Alert/Alert.test.jsx | 23 +- src/Annotation/Annotation.test.jsx | 18 +- src/Annotation/index.jsx | 2 + src/AvatarButton/AvatarButton.test.jsx | 2 +- src/Breadcrumb/Breadcrumb.test.jsx | 88 ++- src/Breadcrumb/index.jsx | 8 +- src/Bubble/Bubble.test.tsx | 33 +- src/Button/Button.test.jsx | 54 +- src/Button/deprecated/Button.test.jsx | 39 +- src/Card/CardBody.jsx | 4 +- src/Card/CardDivider.jsx | 4 +- src/Card/CardStatus.jsx | 2 + src/Card/tests/CardBody.test.jsx | 19 +- src/Card/tests/CardContext.test.jsx | 14 +- src/Card/tests/CardDivider.test.jsx | 14 +- src/Card/tests/CardFooter.test.jsx | 29 +- src/Card/tests/CardHeader.test.jsx | 17 +- src/Card/tests/CardImageCap.test.jsx | 1 - src/Card/tests/CardSection.test.jsx | 17 +- src/Card/tests/CardStatus.test.jsx | 20 +- src/CheckBox/CheckBox.test.jsx | 109 ++-- src/CheckBoxGroup/CheckBoxGroup.test.jsx | 12 +- src/Chip/Chip.test.jsx | 45 +- src/Chip/__snapshots__/Chip.test.jsx.snap | 2 + src/Chip/index.tsx | 1 + src/ChipCarousel/ChipCarousel.test.jsx | 38 +- src/ChipCarousel/index.tsx | 5 +- src/Collapsible/Collapsible.test.jsx | 179 ++--- .../__snapshots__/Collapsible.test.jsx.snap | 8 + src/ColorPicker/ColorPicker.test.jsx | 15 +- src/Container/Container.test.jsx | 40 +- src/DataTable/BulkActions.jsx | 4 +- src/DataTable/CollapsibleButtonGroup.jsx | 3 +- src/DataTable/EmptyTable.jsx | 4 +- src/DataTable/ExpandRow.jsx | 4 +- src/DataTable/RowStatus.jsx | 2 +- src/DataTable/Table.jsx | 7 +- src/DataTable/TableActions.jsx | 1 + src/DataTable/TableControlBar.jsx | 2 +- src/DataTable/TableFooter.jsx | 2 +- src/DataTable/TableHeaderCell.jsx | 6 +- .../filters/tests/CheckboxFilter.test.jsx | 69 +- .../filters/tests/DropdownFilter.test.jsx | 54 +- .../tests/MultiSelectDropdownFilter.test.jsx | 85 +-- .../filters/tests/TextFilter.test.jsx | 21 +- .../selection/BaseSelectionStatus.jsx | 10 +- src/DataTable/selection/ControlledSelect.jsx | 3 +- .../selection/ControlledSelectHeader.jsx | 3 +- .../selection/ControlledSelectionStatus.jsx | 3 +- .../selection/tests/ControlledSelect.test.jsx | 32 +- .../tests/ControlledSelectHeader.test.jsx | 38 +- .../tests/ControlledSelectionStatus.test.jsx | 78 ++- .../selection/tests/SelectionStatus.test.jsx | 76 ++- src/DataTable/tests/ActionDisplay.test.jsx | 50 +- src/DataTable/tests/BulkActions.test.jsx | 206 +++--- src/DataTable/tests/CardView.test.jsx | 1 - src/DataTable/tests/DataTable.test.jsx | 149 ++--- src/DataTable/tests/DataViewToggle.test.jsx | 2 - src/DataTable/tests/DropdownFilters.test.jsx | 71 +- src/DataTable/tests/EmptyTable.test.jsx | 38 +- src/DataTable/tests/ExpandAll.test.jsx | 30 +- src/DataTable/tests/ExpandRow.test.jsx | 33 +- src/DataTable/tests/FilterStatus.test.jsx | 43 +- src/DataTable/tests/RowStatus.test.jsx | 21 +- src/DataTable/tests/SmartStatus.test.jsx | 46 +- src/DataTable/tests/Table.test.jsx | 38 +- src/DataTable/tests/TableActions.test.jsx | 192 +++--- src/DataTable/tests/TableCell.test.jsx | 32 +- src/DataTable/tests/TableFooter.test.jsx | 41 +- src/DataTable/tests/TableHeaderCell.test.jsx | 66 +- src/DataTable/tests/TableHeaderRow.test.jsx | 24 +- src/DataTable/tests/TablePagination.test.jsx | 49 +- src/DataTable/tests/TableRow.test.jsx | 56 +- src/Dropdown/Dropdown.test.jsx | 67 +- src/Dropdown/deprecated/Dropdown.test.jsx | 248 +++---- .../__snapshots__/Dropdown.test.jsx.snap | 68 +- src/Dropzone/GenericError.jsx | 3 +- src/Dropzone/UploadProgress.jsx | 2 + src/Dropzone/tests/DefaultContent.test.jsx | 1 - src/Dropzone/tests/DragError.test.jsx | 9 +- src/Dropzone/tests/Dropzone.test.jsx | 1 - src/Dropzone/tests/GenericError.test.jsx | 27 +- src/Dropzone/tests/UploadProgress.test.jsx | 33 +- src/Fieldset/Fieldset.test.jsx | 110 ++-- src/Fieldset/index.jsx | 1 + src/Form/tests/FormCheckbox.test.jsx | 131 ++-- src/Form/tests/FormCheckboxSet.test.jsx | 212 +++--- src/Form/tests/FormControl.test.jsx | 24 +- .../tests/FormControlDecoratorGroup.test.jsx | 48 +- src/Form/tests/FormControlFeedback.test.jsx | 42 +- src/Form/tests/FormGroup.test.jsx | 70 +- src/Form/tests/FormRadioSet.test.jsx | 120 ++-- src/Form/tests/FormSwitch.test.jsx | 35 +- src/Form/tests/FormText.test.jsx | 29 +- src/Form/tests/fieldUtils.test.jsx | 114 ++-- src/Form/tests/useCheckboxSetValues.test.jsx | 82 +-- src/Hyperlink/Hyperlink.test.jsx | 60 +- src/Hyperlink/index.jsx | 1 + src/Icon/Icon.test.jsx | 60 +- src/IconButton/IconButton.test.jsx | 73 ++- .../IconButtonToggle.test.jsx | 3 - src/Input/input.test.jsx | 15 +- src/InputText/InputText.test.jsx | 76 ++- src/Layout/Layout.test.jsx | 28 +- src/ListBox/ListBox.test.jsx | 224 ++++--- src/ListBoxOption/ListBoxOption.test.jsx | 155 +++-- src/MailtoLink/MailtoLink.test.jsx | 28 +- src/Menu/Menu.test.jsx | 112 ++-- src/Menu/MenuItem.test.jsx | 36 +- src/Menu/SelectMenu.test.jsx | 190 ++++-- src/Modal/AlertModal.jsx | 8 +- src/Modal/Modal.test.jsx | 277 -------- src/Modal/ModalCloseButton.test.jsx | 29 - src/Modal/ModalLayer.jsx | 11 +- src/Modal/ModalLayer.test.jsx | 100 --- src/Modal/ModalPopup.jsx | 1 + src/Modal/ModalPopup.test.jsx | 143 ---- src/Modal/index.jsx | 13 +- src/Modal/{ => tests}/AlertModal.test.jsx | 74 ++- src/Modal/tests/Modal.test.jsx | 261 ++++++++ src/Modal/tests/ModalCloseButton.test.jsx | 41 ++ src/Modal/tests/ModalDialog.test.jsx | 132 ++-- src/Modal/tests/ModalLayer.test.jsx | 102 +++ src/Modal/tests/ModalPopup.test.jsx | 156 +++++ src/Modal/{ => tests}/PopperElement.test.jsx | 29 +- src/Modal/{ => tests}/Portal.test.jsx | 24 +- src/PageBanner/PageBanner.test.jsx | 56 +- src/PageBanner/index.jsx | 3 +- src/Pagination/Pagination.test.jsx | 250 ++++--- src/Pagination/index.jsx | 6 +- src/Popover/Popover.test.jsx | 40 +- src/ProductTour/Checkpoint.test.jsx | 17 +- src/ProductTour/ProductTour.test.jsx | 141 ++-- src/ProgressBar/index.jsx | 2 +- src/ProgressBar/tests/ProgressBar.test.jsx | 59 +- .../RadioButtonGroup.test.jsx | 204 ++---- src/Scrollable/Scrollable.test.jsx | 6 +- src/SearchField/SearchField.test.jsx | 210 +++--- src/SearchField/SearchFieldAdvanced.jsx | 2 + .../__snapshots__/SearchField.test.jsx.snap | 61 +- .../tests/SelectableBox.test.jsx | 118 ++-- .../tests/SelectableBoxSet.test.jsx | 60 +- .../SelectableBoxSet.test.jsx.snap | 111 ++-- src/Sheet/Sheet.test.jsx | 10 +- src/Sheet/SheetContainer.jsx | 1 + src/Sheet/SheetContainer.test.jsx | 31 +- src/Spinner/Spinner.test.jsx | 17 +- .../__snapshots__/Spinner.test.jsx.snap | 19 +- src/Stack/Stack.test.jsx | 30 +- src/StatusAlert/StatusAlert.test.jsx | 164 ++--- src/Stepper/StepperHeaderStep.jsx | 3 +- src/Stepper/tests/Stepper.test.jsx | 181 +++--- src/Sticky/Sticky.test.jsx | 31 +- src/Table/Table.test.jsx | 290 ++++----- src/Table/index.jsx | 9 +- src/Tabs/Tabs.test.jsx | 88 ++- src/Tabs/deprecated/Tabs.test.jsx | 39 +- src/Toast/Toast.test.jsx | 69 +- src/Tooltip/Tooltip.test.jsx | 14 +- .../TransitionReplace.test.jsx | 132 ++-- src/Truncate/Truncate.test.jsx | 23 +- .../ValidationFormGroup.test.jsx | 19 +- .../ValidationFormGroup.test.jsx.snap | 5 + src/ValidationFormGroup/index.jsx | 2 +- .../ValidationMessage.test.jsx | 51 +- src/ValidationMessage/index.jsx | 1 + src/asInput/asInput.test.jsx | 611 +++++++++--------- src/asInput/index.jsx | 2 +- .../tests/useIndexOfLastVisibleChild.test.jsx | 10 +- src/hooks/tests/useToggle.test.jsx | 106 +-- src/hooks/tests/useWindowSize.test.jsx | 22 +- src/setupTest.js | 5 +- 174 files changed, 5206 insertions(+), 4943 deletions(-) delete mode 100644 src/Modal/Modal.test.jsx delete mode 100644 src/Modal/ModalCloseButton.test.jsx delete mode 100644 src/Modal/ModalLayer.test.jsx delete mode 100644 src/Modal/ModalPopup.test.jsx rename src/Modal/{ => tests}/AlertModal.test.jsx (53%) create mode 100644 src/Modal/tests/Modal.test.jsx create mode 100644 src/Modal/tests/ModalCloseButton.test.jsx create mode 100644 src/Modal/tests/ModalLayer.test.jsx create mode 100644 src/Modal/tests/ModalPopup.test.jsx rename src/Modal/{ => tests}/PopperElement.test.jsx (55%) rename src/Modal/{ => tests}/Portal.test.jsx (80%) diff --git a/package-lock.json b/package-lock.json index 021db1cbce..82e76fc866 100644 --- a/package-lock.json +++ b/package-lock.json @@ -68,7 +68,6 @@ "@testing-library/react": "^12.1.4", "@testing-library/react-hooks": "^8.0.1", "@testing-library/user-event": "^13.5.0", - "@types/enzyme": "^3.10.12", "@types/jest": "^27.5.0", "@types/react": "17.0.0", "@types/react-dom": "17.0.11", @@ -76,13 +75,11 @@ "@types/uuid": "^9.0.0", "@typescript-eslint/eslint-plugin": "^5.22.0", "@typescript-eslint/parser": "^5.22.0", - "@wojtekmaj/enzyme-adapter-react-17": "^0.6.7", "axios": "^0.27.2", "axios-mock-adapter": "^1.21.1", "babel-jest": "^28.1.2", "babel-loader": "^8.2.4", "commander": "^9.3.0", - "enzyme": "^3.9.0", "eslint": "8.18.0", "eslint-config-airbnb": "19.0.4", "eslint-config-airbnb-typescript": "^17.0.0", @@ -7712,14 +7709,6 @@ "@types/responselike": "^1.0.0" } }, - "node_modules/@types/cheerio": { - "version": "0.22.31", - "dev": true, - "license": "MIT", - "dependencies": { - "@types/node": "*" - } - }, "node_modules/@types/codemirror": { "version": "5.60.7", "dev": true, @@ -7794,15 +7783,6 @@ "dev": true, "license": "MIT" }, - "node_modules/@types/enzyme": { - "version": "3.10.12", - "dev": true, - "license": "MIT", - "dependencies": { - "@types/cheerio": "*", - "@types/react": "*" - } - }, "node_modules/@types/eslint": { "version": "8.21.2", "license": "MIT", @@ -9026,38 +9006,6 @@ } } }, - "node_modules/@wojtekmaj/enzyme-adapter-react-17": { - "version": "0.6.7", - "dev": true, - "license": "MIT", - "dependencies": { - "@wojtekmaj/enzyme-adapter-utils": "^0.1.4", - "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" - }, - "peerDependencies": { - "enzyme": "^3.0.0", - "react": "^17.0.0-0", - "react-dom": "^17.0.0-0" - } - }, - "node_modules/@wojtekmaj/enzyme-adapter-utils": { - "version": "0.1.4", - "dev": true, - "license": "MIT", - "dependencies": { - "function.prototype.name": "^1.1.0", - "has": "^1.0.0", - "object.fromentries": "^2.0.0", - "prop-types": "^15.7.0" - }, - "peerDependencies": { - "react": "^17.0.0-0" - } - }, "node_modules/@xobotyi/scrollbar-width": { "version": "1.9.5", "dev": true, @@ -9540,24 +9488,6 @@ "node": ">=0.10.0" } }, - "node_modules/array.prototype.filter": { - "version": "1.0.2", - "dev": true, - "license": "MIT", - "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", "license": "MIT", @@ -14260,21 +14190,6 @@ "node": ">=8" } }, - "node_modules/css-select": { - "version": "5.1.0", - "dev": true, - "license": "BSD-2-Clause", - "dependencies": { - "boolbase": "^1.0.0", - "css-what": "^6.1.0", - "domhandler": "^5.0.2", - "domutils": "^3.0.1", - "nth-check": "^2.0.1" - }, - "funding": { - "url": "https://github.com/sponsors/fb55" - } - }, "node_modules/css-tree": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz", @@ -15082,11 +14997,6 @@ "node": ">=8" } }, - "node_modules/discontinuous-range": { - "version": "1.0.0", - "dev": true, - "license": "MIT" - }, "node_modules/dns-equal": { "version": "1.0.0", "devOptional": true, @@ -15141,19 +15051,6 @@ "component-xor": "0.0.4" } }, - "node_modules/dom-serializer": { - "version": "2.0.0", - "dev": true, - "license": "MIT", - "dependencies": { - "domelementtype": "^2.3.0", - "domhandler": "^5.0.2", - "entities": "^4.2.0" - }, - "funding": { - "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1" - } - }, "node_modules/domelementtype": { "version": "2.3.0", "funding": [ @@ -15175,33 +15072,6 @@ "node": ">=12" } }, - "node_modules/domhandler": { - "version": "5.0.3", - "dev": true, - "license": "BSD-2-Clause", - "dependencies": { - "domelementtype": "^2.3.0" - }, - "engines": { - "node": ">= 4" - }, - "funding": { - "url": "https://github.com/fb55/domhandler?sponsor=1" - } - }, - "node_modules/domutils": { - "version": "3.0.1", - "dev": true, - "license": "BSD-2-Clause", - "dependencies": { - "dom-serializer": "^2.0.0", - "domelementtype": "^2.3.0", - "domhandler": "^5.0.1" - }, - "funding": { - "url": "https://github.com/fb55/domutils?sponsor=1" - } - }, "node_modules/dot-case": { "version": "3.0.4", "license": "MIT", @@ -15580,50 +15450,6 @@ "node": ">=4" } }, - "node_modules/enzyme": { - "version": "3.11.0", - "dev": true, - "license": "MIT", - "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", - "dev": true, - "license": "MIT", - "dependencies": { - "has": "^1.0.3", - "object-is": "^1.1.5" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, "node_modules/eol": { "version": "0.9.1", "license": "MIT" @@ -15688,11 +15514,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/es-array-method-boxes-properly": { - "version": "1.0.0", - "dev": true, - "license": "MIT" - }, "node_modules/es-get-iterator": { "version": "1.1.3", "license": "MIT", @@ -20664,18 +20485,6 @@ "wbuf": "^1.1.0" } }, - "node_modules/html-element-map": { - "version": "1.3.1", - "dev": true, - "license": "MIT", - "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": "3.0.0", "dev": true, @@ -20956,24 +20765,6 @@ "strip-ansi": "^6.0.1" } }, - "node_modules/htmlparser2": { - "version": "8.0.1", - "dev": true, - "funding": [ - "https://github.com/fb55/htmlparser2?sponsor=1", - { - "type": "github", - "url": "https://github.com/sponsors/fb55" - } - ], - "license": "MIT", - "dependencies": { - "domelementtype": "^2.3.0", - "domhandler": "^5.0.2", - "domutils": "^3.0.1", - "entities": "^4.3.0" - } - }, "node_modules/http-cache-semantics": { "version": "4.1.1", "license": "BSD-2-Clause" @@ -22162,11 +21953,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/is-subset": { - "version": "0.1.1", - "dev": true, - "license": "MIT" - }, "node_modules/is-symbol": { "version": "1.0.4", "license": "MIT", @@ -24954,11 +24740,6 @@ "version": "4.2.0", "license": "MIT" }, - "node_modules/lodash.escape": { - "version": "4.0.1", - "dev": true, - "license": "MIT" - }, "node_modules/lodash.escaperegexp": { "version": "4.1.2", "dev": true, @@ -24984,11 +24765,6 @@ "version": "4.5.0", "license": "MIT" }, - "node_modules/lodash.isequal": { - "version": "4.5.0", - "dev": true, - "license": "MIT" - }, "node_modules/lodash.ismatch": { "version": "4.4.0", "dev": true, @@ -25816,11 +25592,6 @@ "node": "*" } }, - "node_modules/moo": { - "version": "0.5.2", - "dev": true, - "license": "BSD-3-Clause" - }, "node_modules/mrmime": { "version": "1.0.1", "dev": true, @@ -25999,32 +25770,6 @@ "dev": true, "license": "MIT" }, - "node_modules/nearley": { - "version": "2.20.1", - "dev": true, - "license": "MIT", - "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", - "dev": true, - "license": "MIT" - }, "node_modules/negotiator": { "version": "0.6.3", "license": "MIT", @@ -29805,29 +29550,6 @@ "parse-path": "^7.0.0" } }, - "node_modules/parse5": { - "version": "7.1.2", - "dev": true, - "license": "MIT", - "dependencies": { - "entities": "^4.4.0" - }, - "funding": { - "url": "https://github.com/inikulin/parse5?sponsor=1" - } - }, - "node_modules/parse5-htmlparser2-tree-adapter": { - "version": "7.0.0", - "dev": true, - "license": "MIT", - "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", "license": "MIT", @@ -30014,11 +29736,6 @@ "url": "https://github.com/sponsors/Borewit" } }, - "node_modules/performance-now": { - "version": "2.1.0", - "dev": true, - "license": "MIT" - }, "node_modules/physical-cpu-count": { "version": "2.0.0", "license": "ISC" @@ -31496,31 +31213,6 @@ "node": ">=8" } }, - "node_modules/raf": { - "version": "3.4.1", - "dev": true, - "license": "MIT", - "dependencies": { - "performance-now": "^2.1.0" - } - }, - "node_modules/railroad-diagrams": { - "version": "1.0.0", - "dev": true, - "license": "CC0-1.0" - }, - "node_modules/randexp": { - "version": "0.4.6", - "dev": true, - "license": "MIT", - "dependencies": { - "discontinuous-range": "1.0.0", - "ret": "~0.1.10" - }, - "engines": { - "node": ">=0.12" - } - }, "node_modules/randombytes": { "version": "2.1.0", "license": "MIT", @@ -33400,15 +33092,6 @@ "url": "https://github.com/sponsors/isaacs" } }, - "node_modules/rst-selector-parser": { - "version": "2.2.3", - "dev": true, - "license": "BSD-3-Clause", - "dependencies": { - "lodash.flattendeep": "^4.4.0", - "nearley": "^2.7.10" - } - }, "node_modules/rsvp": { "version": "4.8.5", "dev": true, diff --git a/package.json b/package.json index e504dfcb22..a72e74374e 100644 --- a/package.json +++ b/package.json @@ -103,7 +103,6 @@ "@testing-library/react": "^12.1.4", "@testing-library/react-hooks": "^8.0.1", "@testing-library/user-event": "^13.5.0", - "@types/enzyme": "^3.10.12", "@types/jest": "^27.5.0", "@types/react": "17.0.0", "@types/react-dom": "17.0.11", @@ -111,13 +110,11 @@ "@types/uuid": "^9.0.0", "@typescript-eslint/eslint-plugin": "^5.22.0", "@typescript-eslint/parser": "^5.22.0", - "@wojtekmaj/enzyme-adapter-react-17": "^0.6.7", "axios": "^0.27.2", "axios-mock-adapter": "^1.21.1", "babel-jest": "^28.1.2", "babel-loader": "^8.2.4", "commander": "^9.3.0", - "enzyme": "^3.9.0", "eslint": "8.18.0", "eslint-config-airbnb": "19.0.4", "eslint-config-airbnb-typescript": "^17.0.0", @@ -150,7 +147,7 @@ "^icons/index.js$": "babel-jest", "^.+\\.tsx?$": "ts-jest" }, - "setupFiles": [ + "setupFilesAfterEnv": [ "./src/setupTest.js" ], "moduleNameMapper": { diff --git a/src/Alert/Alert.test.jsx b/src/Alert/Alert.test.jsx index 76af95f281..ec974b378b 100644 --- a/src/Alert/Alert.test.jsx +++ b/src/Alert/Alert.test.jsx @@ -1,12 +1,13 @@ import React from 'react'; -import { mount } from 'enzyme'; import { IntlProvider } from 'react-intl'; import renderer, { act } from 'react-test-renderer'; +import { render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; import { Context as ResponsiveContext } from 'react-responsive'; import { Info } from '../../icons'; import breakpoints from '../utils/breakpoints'; import Button from '../Button'; -import Alert from './index'; +import Alert from '.'; // eslint-disable-next-line react/prop-types function AlertWrapper({ children, ...props }) { @@ -38,12 +39,11 @@ describe('', () => { )).toJSON(); expect(tree).toMatchSnapshot(); }); - it('handles dismissible onClose', () => { + it('handles dismissible onClose', async () => { const mockOnClose = jest.fn(); - const wrapper = mount(( - Alert - )); - wrapper.find('.btn').simulate('click'); + render(Alert); + const button = screen.getByRole('button'); + await userEvent.click(button); expect(mockOnClose).toHaveBeenCalledTimes(1); }); it('renders with button prop', () => { @@ -52,12 +52,11 @@ describe('', () => { )).toJSON(); expect(tree).toMatchSnapshot(); }); - it('handles button onClick', () => { + it('handles button onClick', async () => { const mockOnClick = jest.fn(); - const wrapper = mount(( - Hello]}>Alert - )); - wrapper.find('.btn').simulate('click'); + render(Hello]}>Alert); + const button = screen.getByRole('button'); + await userEvent.click(button); expect(mockOnClick).toHaveBeenCalledTimes(1); }); it('renders with button and dismissible props', () => { diff --git a/src/Annotation/Annotation.test.jsx b/src/Annotation/Annotation.test.jsx index 23dac1afe5..9d0bd229b7 100644 --- a/src/Annotation/Annotation.test.jsx +++ b/src/Annotation/Annotation.test.jsx @@ -1,7 +1,7 @@ import React from 'react'; import renderer from 'react-test-renderer'; -import { mount } from 'enzyme'; -import Annotation from './index'; +import { render, screen } from '@testing-library/react'; +import Annotation from '.'; const VARIANTS = ['error', 'success', 'warning', 'light', 'dark']; const ARROW_PLACEMENTS = ['top', 'right', 'bottom', 'left']; @@ -34,9 +34,17 @@ describe('Annotation', () => { test.each(classNameTestData)( 'renders with correct className for variant: %s, with arrow placement: %s', (variant, arrowPlacement, expectedClassName) => { - const wrapper = mount(Test text); - const annotation = wrapper.find('.pgn__annotation'); - expect(annotation.hasClass(expectedClassName)).toEqual(true); + render( + + Test text + , + ); + const annotation = screen.getByTestId('annotation'); + expect(annotation.className).toContain(expectedClassName); }, ); }); diff --git a/src/Annotation/index.jsx b/src/Annotation/index.jsx index 05c1043c60..32daf07abf 100644 --- a/src/Annotation/index.jsx +++ b/src/Annotation/index.jsx @@ -7,6 +7,7 @@ const Annotation = React.forwardRef(({ variant, children, arrowPlacement, + ...props }, ref) => ( {children} diff --git a/src/AvatarButton/AvatarButton.test.jsx b/src/AvatarButton/AvatarButton.test.jsx index 4437d8d2e7..4c743dd99f 100644 --- a/src/AvatarButton/AvatarButton.test.jsx +++ b/src/AvatarButton/AvatarButton.test.jsx @@ -1,6 +1,6 @@ import React from 'react'; import renderer from 'react-test-renderer'; -import AvatarButton from './index'; +import AvatarButton from '.'; describe('AvatarButton', () => { it('renders in all sizes', () => { diff --git a/src/Breadcrumb/Breadcrumb.test.jsx b/src/Breadcrumb/Breadcrumb.test.jsx index 5072e64e44..2b8c93b8f8 100644 --- a/src/Breadcrumb/Breadcrumb.test.jsx +++ b/src/Breadcrumb/Breadcrumb.test.jsx @@ -1,7 +1,8 @@ import React from 'react'; -import { mount } from 'enzyme'; +import { render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; -import Breadcrumb from './index'; +import Breadcrumb from '.'; const baseProps = { links: [ @@ -21,70 +22,61 @@ const baseProps = { }; describe('', () => { - let wrapper; - it('renders with just links', () => { - wrapper = mount(); - - const list = wrapper.find('ol li'); - expect(list.length).toEqual(5); - expect(list.find('a').length).toEqual(3); + render(); + expect(screen.queryAllByRole('list').length).toBe(1); + expect(screen.queryAllByRole('listitem').length).toBe(baseProps.links.length); }); it('renders with links and active label', () => { const label = 'Current Page'; - wrapper = mount(); + render(); + const list = screen.queryAllByRole('list'); + const listItems = screen.queryAllByRole('listitem'); - const list = wrapper.find('ol li'); - expect(list.length).toEqual(7); - expect(list.find('a').length).toEqual(3); - expect(list.last().text()).toEqual(label); + expect(list.length).toBe(1); + expect(listItems.length).toBe(baseProps.links.length + 1); + expect(listItems[listItems.length - 1].textContent).toBe(label); }); it('renders custom spacer', () => { - wrapper = mount(/} - />); - - const list = wrapper.find('ol li'); - expect(list.length).toEqual(5); - expect(list.find('a').length).toEqual(3); - expect(list.find('.custom-spacer').length).toEqual(2); + render( + /} />, + ); + const listItems = screen.queryAllByRole('listitem'); + expect(listItems.length).toBe(baseProps.links.length); + expect(screen.getAllByRole('presentation').length).toBe(2); }); it('fires the passed in click handler', () => { const clickHandler = jest.fn(); - wrapper = mount(); - - const list = wrapper.find('ol li'); - expect(list.length).toEqual(5); + render(); - const links = list.find('a'); - expect(links.length).toEqual(3); + const listItems = screen.queryAllByRole('listitem'); + const links = screen.queryAllByRole('link'); + expect(listItems.length).toBe(baseProps.links.length); - links.first().simulate('click'); + userEvent.click(links[0]); expect(clickHandler).toHaveBeenCalled(); }); it('renders in mobile view', () => { - wrapper = mount(); - - const list = wrapper.find('ol'); - const listElements = list.find('li'); - expect(listElements.length).toEqual(2); - expect(list.hasClass('is-mobile')).toEqual(true); + render(); + const list = screen.getByRole('list'); + const listItems = screen.getAllByRole('listitem'); + expect(listItems.length).toBe(1); + expect(list.className).toContain('is-mobile'); }); it('renders links as custom elements', () => { - wrapper = mount(); + render(); + const list = screen.getByRole('list'); - const list = wrapper.find('ol'); - const anchors = list.find('a'); - expect(anchors.length).toEqual(0); + const anchors = list.querySelectorAll('a'); + expect(anchors.length).toBe(0); - const customLinks = list.find('div'); - expect(customLinks.length).toEqual(3); + const customLinks = list.querySelectorAll('div'); + expect(customLinks.length).toBe(3); }); it('passes down link props to link elements', () => { @@ -95,13 +87,11 @@ describe('', () => { target: '_blank', }; - wrapper = mount(); - - const list = wrapper.find('ol'); - const renderedLink = list.find('a').first(); + render(); - expect(renderedLink.hasClass('my-link')).toEqual(true); - expect(renderedLink.prop('target')).toEqual('_blank'); - expect(renderedLink.prop('href')).toEqual('/link-1'); + const links = screen.getByRole('link'); + expect(links.className).toContain('my-link'); + expect(links.getAttribute('target')).toBe('_blank'); + expect(links.getAttribute('href')).toBe('/link-1'); }); }); diff --git a/src/Breadcrumb/index.jsx b/src/Breadcrumb/index.jsx index 41cc7fd23d..0e3f0e38c5 100644 --- a/src/Breadcrumb/index.jsx +++ b/src/Breadcrumb/index.jsx @@ -8,13 +8,17 @@ import Icon from '../Icon'; function Breadcrumb({ links, activeLabel, spacer, clickHandler, - variant, isMobile, ariaLabel, linkAs, + variant, isMobile, ariaLabel, linkAs, ...props }) { const linkCount = links.length; const displayLinks = isMobile ? [links[linkCount - 1]] : links; return ( -