From 5f112735509911ccd3a0e44afc48acd4691259a3 Mon Sep 17 00:00:00 2001 From: Thomas Huang Date: Wed, 19 Aug 2020 21:13:59 -0700 Subject: [PATCH] Add react-testing-library/react (#9249) * Add react-testing-library Adds react-testing-library as a dependency, creates a wrapper function with Provider store/I18n context support, and implements it in unconnected-account-alert. * Refactor renderWithProvider store to extra param, instead of component prop store --- package.json | 1 + test/lib/render-helpers.js | 16 ++ .../tests/unconnected-account-alert.test.js | 158 ++++++++++++++++++ yarn.lock | 119 ++++++++++++- 4 files changed, 289 insertions(+), 5 deletions(-) create mode 100644 ui/app/components/app/alerts/unconnected-account-alert/tests/unconnected-account-alert.test.js diff --git a/package.json b/package.json index fc470803d..f7efb8c73 100644 --- a/package.json +++ b/package.json @@ -189,6 +189,7 @@ "@storybook/core": "^5.3.14", "@storybook/react": "^5.3.14", "@storybook/storybook-deployer": "^2.8.6", + "@testing-library/react": "^10.4.8", "@testing-library/react-hooks": "^3.2.1", "addons-linter": "1.14.0", "babel-eslint": "^10.1.0", diff --git a/test/lib/render-helpers.js b/test/lib/render-helpers.js index c0ac849ea..9264dd9a0 100644 --- a/test/lib/render-helpers.js +++ b/test/lib/render-helpers.js @@ -1,7 +1,10 @@ import React from 'react' +import { Provider } from 'react-redux' +import { render } from '@testing-library/react' import { mount } from 'enzyme' import { MemoryRouter } from 'react-router-dom' import PropTypes from 'prop-types' +import { LegacyI18nProvider } from '../../ui/app/contexts/i18n' export function mountWithStore (component, store) { const context = { @@ -46,3 +49,16 @@ export function mountWithRouter (component, store = {}, pathname = '/') { return mount(, createContext()) } + +export function renderWithProvider (component, store) { + + const Wrapper = () => ( + + + { component } + + + ) + + return render() +} diff --git a/ui/app/components/app/alerts/unconnected-account-alert/tests/unconnected-account-alert.test.js b/ui/app/components/app/alerts/unconnected-account-alert/tests/unconnected-account-alert.test.js new file mode 100644 index 000000000..ff85ed553 --- /dev/null +++ b/ui/app/components/app/alerts/unconnected-account-alert/tests/unconnected-account-alert.test.js @@ -0,0 +1,158 @@ +import assert from 'assert' +import React from 'react' + +import sinon from 'sinon' +import thunk from 'redux-thunk' + +import { fireEvent } from '@testing-library/react' +import configureMockStore from 'redux-mock-store' + +import { renderWithProvider } from '../../../../../../../test/lib/render-helpers' + +import * as actions from '../../../../../store/actions' +import UnconnectedAccountAlert from '..' + +describe('Unconnected Account Alert', function () { + + const network = '123' + + const selectedAddress = '0xec1adf982415d2ef5ec55899b9bfb8bc0f29251b' + + const identities = { + '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc': { + address: '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc', + name: 'Account 1', + }, + '0xec1adf982415d2ef5ec55899b9bfb8bc0f29251b': { + address: '0xec1adf982415d2ef5ec55899b9bfb8bc0f29251b', + name: 'Account 2', + }, + } + + const accounts = { + '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc': { + address: '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc', + balance: '0x0', + }, + '0xec1adf982415d2ef5ec55899b9bfb8bc0f29251b': { + address: '0xec1adf982415d2ef5ec55899b9bfb8bc0f29251b', + balance: '0x0', + }, + } + + const cachedBalances = { + '123': { + '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc': '0x0', + '0xec1adf982415d2ef5ec55899b9bfb8bc0f29251b': '0x0', + }, + } + + const keyrings = [ + { + type: 'HD Key Tree', + accounts: [ + '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc', + '0xec1adf982415d2ef5ec55899b9bfb8bc0f29251b', + ], + }, + ] + + const mockState = { + metamask: { + network, + selectedAddress, + identities, + accounts, + cachedBalances, + keyrings, + permissionsHistory: { + 'https://test.dapp': { + eth_accounts: { + accounts: { + '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc': 1596681857076, + }, + }, + }, + }, + domains: { + 'https://test.dapp': { + permissions: [ + { + caveats: [ + { + name: 'primaryAccountOnly', + type: 'limitResponseLength', + value: 1, + }, + { + name: 'exposedAccounts', + type: 'filterResponse', + value: [ + '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc', + ], + }, + ], + invoker: 'https://test.dapp', + parentCapability: 'eth_accounts', + }, + ], + }, + }, + }, + activeTab: { + origin: 'https://test.dapp', + }, + unconnectedAccount: { + state: 'OPEN', + }, + } + + afterEach(function () { + sinon.restore() + }) + + it('checks that checkbox is checked', function () { + + const store = configureMockStore()(mockState) + + const { getByRole } = renderWithProvider(, store) + + const dontShowCheckbox = getByRole('checkbox') + + assert.equal(dontShowCheckbox.checked, false) + fireEvent.click(dontShowCheckbox) + assert.equal(dontShowCheckbox.checked, true) + }) + + it('clicks dismiss button and calls dismissAlert action', function () { + const store = configureMockStore()(mockState) + + const { getByText } = renderWithProvider(, store) + + const dismissButton = getByText(/dismiss/u) + fireEvent.click(dismissButton) + + assert.equal(store.getActions()[0].type, 'unconnectedAccount/dismissAlert') + }) + + it('clicks Dont Show checkbox and dismiss to call disable alert request action', async function () { + sinon.stub(actions, 'setAlertEnabledness').returns(() => Promise.resolve()) + + const store = configureMockStore([thunk])(mockState) + + const { getByText, getByRole } = renderWithProvider(, store) + + const dismissButton = getByText(/dismiss/u) + const dontShowCheckbox = getByRole('checkbox') + + fireEvent.click(dontShowCheckbox) + fireEvent.click(dismissButton) + + setImmediate(() => { + assert.equal(store.getActions()[0].type, 'unconnectedAccount/disableAlertRequested') + assert.equal(store.getActions()[1].type, 'unconnectedAccount/disableAlertSucceeded') + }) + + }) + +}) diff --git a/yarn.lock b/yarn.lock index 2683bd446..b7398dd72 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1018,6 +1018,14 @@ pirates "^4.0.0" source-map-support "^0.5.9" +"@babel/runtime-corejs3@^7.10.2": + version "7.11.2" + resolved "https://registry.yarnpkg.com/@babel/runtime-corejs3/-/runtime-corejs3-7.11.2.tgz#02c3029743150188edeb66541195f54600278419" + integrity sha512-qh5IR+8VgFz83VBa6OkaET6uN/mJOhHONuy3m1sgF0CV6mXdPSEBdA7e1eUbVvyNtANjMbg22JUv71BaDXLY6A== + dependencies: + core-js-pure "^3.0.0" + regenerator-runtime "^0.13.4" + "@babel/runtime@7.3.4": version "7.3.4" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.3.4.tgz#73d12ba819e365fcf7fd152aed56d6df97d21c83" @@ -1032,6 +1040,13 @@ dependencies: regenerator-runtime "^0.13.4" +"@babel/runtime@^7.10.2", "@babel/runtime@^7.10.3": + version "7.11.2" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.11.2.tgz#f549c13c754cc40b87644b9fa9f09a6a95fe0736" + integrity sha512-TeWkU52so0mPtDcaCTxNBI/IHiz0pZgr8VEFqXFtZWpYD08ZB6FaSwVAS8MKRQAP3bYKiVjwysOJgMFY28o6Tw== + dependencies: + regenerator-runtime "^0.13.4" + "@babel/template@^7.1.0", "@babel/template@^7.10.4", "@babel/template@^7.4.4", "@babel/template@^7.7.4": version "7.10.4" resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.10.4.tgz#3251996c4200ebc71d1a8fc405fba940f36ba278" @@ -1638,6 +1653,16 @@ resolved "https://registry.yarnpkg.com/@istanbuljs/schema/-/schema-0.1.2.tgz#26520bf09abe4a5644cd5414e37125a8954241dd" integrity sha512-tsAQNx32a8CoFhjhijUIhI4kccIAgmGhy8LZMZgGfmXcpMbPRUqn5LWmgRttILi6yeGmBJd2xsPkFMs0PzgPCw== +"@jest/types@^25.5.0": + version "25.5.0" + resolved "https://registry.yarnpkg.com/@jest/types/-/types-25.5.0.tgz#4d6a4793f7b9599fc3680877b856a97dbccf2a9d" + integrity sha512-OXD0RgQ86Tu3MazKo8bnrkDRaDXXMGUqd+kTtLtK1Zb7CRzQcaSRPPPV37SvYTdevXEBVxe0HXylEjs8ibkmCw== + dependencies: + "@types/istanbul-lib-coverage" "^2.0.0" + "@types/istanbul-reports" "^1.1.1" + "@types/yargs" "^15.0.0" + chalk "^3.0.0" + "@material-ui/core@^4.11.0": version "4.11.0" resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-4.11.0.tgz#b69b26e4553c9e53f2bfaf1053e216a0af9be15a" @@ -2503,6 +2528,17 @@ dependencies: defer-to-connect "^1.0.1" +"@testing-library/dom@^7.17.1": + version "7.22.2" + resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-7.22.2.tgz#6deaa828500993cc94bdd62875c251b5b5b70d69" + integrity sha512-taxURh+4Lwr//uC1Eghat95aMnTlI4G4ETosnZK0wliwHWdutLDVKIvHXAOYdXGdzrBAy1wNhSGmNBbZ72ml4g== + dependencies: + "@babel/runtime" "^7.10.3" + "@types/aria-query" "^4.2.0" + aria-query "^4.2.2" + dom-accessibility-api "^0.5.0" + pretty-format "^25.5.0" + "@testing-library/react-hooks@^3.2.1": version "3.2.1" resolved "https://registry.yarnpkg.com/@testing-library/react-hooks/-/react-hooks-3.2.1.tgz#19b6caa048ef15faa69d439c469033873ea01294" @@ -2511,6 +2547,19 @@ "@babel/runtime" "^7.5.4" "@types/testing-library__react-hooks" "^3.0.0" +"@testing-library/react@^10.4.8": + version "10.4.8" + resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-10.4.8.tgz#5eb730291b8fd81cdb2d8877770d060b044ae4a4" + integrity sha512-clgpFR6QHiRRcdhFfAKDhH8UXpNASyfkkANhtCsCVBnai+O+mK1rGtMES+Apc7ql5Wyxu7j8dcLiC4pV5VblHA== + dependencies: + "@babel/runtime" "^7.10.3" + "@testing-library/dom" "^7.17.1" + +"@types/aria-query@^4.2.0": + version "4.2.0" + resolved "https://registry.yarnpkg.com/@types/aria-query/-/aria-query-4.2.0.tgz#14264692a9d6e2fa4db3df5e56e94b5e25647ac0" + integrity sha512-iIgQNzCm0v7QMhhe4Jjn9uRh+I6GoPmt03CbEtwx3ao8/EfoQcmgtqH4vQ5Db/lxiIGaWDv6nwvunuh0RyX0+A== + "@types/bignumber.js@^5.0.0": version "5.0.0" resolved "https://registry.yarnpkg.com/@types/bignumber.js/-/bignumber.js-5.0.0.tgz#d9f1a378509f3010a3255e9cc822ad0eeb4ab969" @@ -2559,6 +2608,26 @@ resolved "https://registry.yarnpkg.com/@types/is-function/-/is-function-1.0.0.tgz#1b0b819b1636c7baf0d6785d030d12edf70c3e83" integrity sha512-iTs9HReBu7evG77Q4EC8hZnqRt57irBDkK9nvmHroiOIVwYMQc4IvYvdRgwKfYepunIY7Oh/dBuuld+Gj9uo6w== +"@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0": + version "2.0.3" + resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.3.tgz#4ba8ddb720221f432e443bd5f9117fd22cfd4762" + integrity sha512-sz7iLqvVUg1gIedBOvlkxPlc8/uVzyS5OwGz1cKjXzkl3FpL3al0crU8YGU1WoHkxn0Wxbw5tyi6hvzJKNzFsw== + +"@types/istanbul-lib-report@*": + version "3.0.0" + resolved "https://registry.yarnpkg.com/@types/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz#c14c24f18ea8190c118ee7562b7ff99a36552686" + integrity sha512-plGgXAPfVKFoYfa9NpYDAkseG+g6Jr294RqeqcqDixSbU34MZVJRi/P+7Y8GDpzkEwLaGZZOpKIEmeVZNtKsrg== + dependencies: + "@types/istanbul-lib-coverage" "*" + +"@types/istanbul-reports@^1.1.1": + version "1.1.2" + resolved "https://registry.yarnpkg.com/@types/istanbul-reports/-/istanbul-reports-1.1.2.tgz#e875cc689e47bce549ec81f3df5e6f6f11cfaeb2" + integrity sha512-P/W9yOX/3oPZSpaYOCQzGqgCQRXn0FFO/V8bWrCQs+wLmvVVxk6CRBXALEvNs9OHIatlnlFokfhuDo2ug01ciw== + dependencies: + "@types/istanbul-lib-coverage" "*" + "@types/istanbul-lib-report" "*" + "@types/json-schema@^7.0.4": version "7.0.5" resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.5.tgz#dcce4430e64b443ba8945f0290fb564ad5bac6dd" @@ -2731,6 +2800,18 @@ resolved "https://registry.yarnpkg.com/@types/webpack-env/-/webpack-env-1.15.0.tgz#bd9956d5044b1fb43e869a9ba9148862ff98d9fd" integrity sha512-TfcyNecCz8Z9/s90gBOBniyzZrTru8u2Vp0VZODq4KEBaQu8bfXvu7o/KUOecMpzjbFPUA7aqgSq628Iue5BQg== +"@types/yargs-parser@*": + version "15.0.0" + resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-15.0.0.tgz#cb3f9f741869e20cce330ffbeb9271590483882d" + integrity sha512-FA/BWv8t8ZWJ+gEOnLLd8ygxH/2UFbAvgEonyfN6yWGLKc7zVjbpl2Y4CTjid9h2RfgPP6SEt6uHwEOply00yw== + +"@types/yargs@^15.0.0": + version "15.0.5" + resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-15.0.5.tgz#947e9a6561483bdee9adffc983e91a6902af8b79" + integrity sha512-Dk/IDOPtOgubt/IaevIUbTgV7doaKkoorvOyYM2CMwuDyP89bekI7H4xLIwunNYiK9jhCkmc6pUrJk3cj2AB9w== + dependencies: + "@types/yargs-parser" "*" + "@web3-js/scrypt-shim@^0.1.0": version "0.1.0" resolved "https://registry.yarnpkg.com/@web3-js/scrypt-shim/-/scrypt-shim-0.1.0.tgz#0bf7529ab6788311d3e07586f7d89107c3bea2cc" @@ -3664,6 +3745,14 @@ argsarray@0.0.1: resolved "https://registry.yarnpkg.com/argsarray/-/argsarray-0.0.1.tgz#6e7207b4ecdb39b0af88303fa5ae22bda8df61cb" integrity sha1-bnIHtOzbObCviDA/pa4ivajfYcs= +aria-query@^4.2.2: + version "4.2.2" + resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-4.2.2.tgz#0d2ca6c9aceb56b8977e9fed6aed7e15bbd2f83b" + integrity sha512-o/HelwhuKpTj/frsOsbNLNgnNGVIFsVP/SW2BSF14gVl7kAfMOJ6/8wUAUvG1R1NHKrfG+2sHZTu0yauT1qBrA== + dependencies: + "@babel/runtime" "^7.10.2" + "@babel/runtime-corejs3" "^7.10.2" + arr-diff@^1.0.1: version "1.1.0" resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-1.1.0.tgz#687c32758163588fef7de7b36fabe495eb1a399a" @@ -7302,6 +7391,11 @@ core-js-pure@3.1.3, core-js-pure@^3.0.1: resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.1.3.tgz#4c90752d5b9471f641514f3728f51c1e0783d0b5" integrity sha512-k3JWTrcQBKqjkjI0bkfXS0lbpWPxYuHWfMMjC1VDmzU4Q58IwSbuXSo99YO/hUHlw/EB4AlfA2PVxOGkrIq6dA== +core-js-pure@^3.0.0: + version "3.6.5" + resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.6.5.tgz#c79e75f5e38dbc85a662d91eea52b8256d53b813" + integrity sha512-lacdXOimsiD0QyNf9BC/mxivNJ/ybBGJXQFKzRekp1WTHoVUWsUHEn+2T8GJAzzIhyOuXA+gOxCVN3l+5PLPUA== + core-js@^1.0.0: version "1.2.7" resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636" @@ -8781,6 +8875,11 @@ doctrine@^3.0.0: dependencies: esutils "^2.0.2" +dom-accessibility-api@^0.5.0: + version "0.5.0" + resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.5.0.tgz#fddffd04e178796e241436c3f21be2f89c91afac" + integrity sha512-eCVf9n4Ni5UQAFc2+fqfMPHdtiX7DA0rLakXgNBZfXNJzEbNo3MQIYd+zdYpFBqAaGYVrkd8leNSLGPrG4ODmA== + dom-converter@^0.2: version "0.2.0" resolved "https://registry.yarnpkg.com/dom-converter/-/dom-converter-0.2.0.tgz#6721a9daee2e293682955b6afe416771627bb768" @@ -21086,6 +21185,16 @@ pretty-error@^2.1.1: renderkid "^2.0.1" utila "~0.4" +pretty-format@^25.5.0: + version "25.5.0" + resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-25.5.0.tgz#7873c1d774f682c34b8d48b6743a2bf2ac55791a" + integrity sha512-kbo/kq2LQ/A/is0PQwsEHM7Ca6//bGPPvU6UnsdDRSKTWxT/ru/xb88v4BJf6a69H+uTytOEsTusT9ksd/1iWQ== + dependencies: + "@jest/types" "^25.5.0" + ansi-regex "^5.0.0" + ansi-styles "^4.0.0" + react-is "^16.12.0" + pretty-hrtime@^1.0.0, pretty-hrtime@^1.0.3: version "1.0.3" resolved "https://registry.yarnpkg.com/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1" @@ -22095,16 +22204,16 @@ react-is@^16.10.2, react-is@^16.6.0, react-is@^16.8.6, react-is@^16.9.0: resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.12.0.tgz#2cc0fe0fba742d97fd527c42a13bec4eeb06241c" integrity sha512-rPCkf/mWBtKc97aLL9/txD8DZdemK0vkA3JMLShjlJB3Pj3s+lpf1KaBzMfQrAmhMQB0n1cU/SUGgKKBCe837Q== +react-is@^16.12.0, react-is@^16.8.0: + version "16.13.1" + resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" + integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== + react-is@^16.7.0, react-is@^16.8.1: version "16.8.6" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16" integrity sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA== -react-is@^16.8.0: - version "16.13.1" - resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" - integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== - react-lifecycles-compat@^3.0.4: version "3.0.4" resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"