diff --git a/test/e2e/tests/add-hide-token.spec.js b/test/e2e/tests/add-hide-token.spec.js index eb18355dc56b..e86b5d1c870e 100644 --- a/test/e2e/tests/add-hide-token.spec.js +++ b/test/e2e/tests/add-hide-token.spec.js @@ -8,7 +8,7 @@ const { } = require('../helpers'); const FixtureBuilder = require('../fixture-builder'); -describe('Hide token', function () { +describe('Add hide token', function () { it('hides the token when clicked', async function () { await withFixtures( { @@ -60,14 +60,16 @@ describe('Hide token', function () { await driver.clickElement('[data-testid="asset-options__hide"]'); // wait for confirm hide modal to be visible - const confirmHideModal = await driver.findVisibleElement('span .modal'); + const confirmHideModal = + '[data-testid="hide-token-confirmation-modal"]'; + await driver.findVisibleElement(confirmHideModal); await driver.clickElement( '[data-testid="hide-token-confirmation__hide"]', ); // wait for confirm hide modal to be removed from DOM. - await confirmHideModal.waitForElementState('hidden'); + await driver.waitForElementNotPresent(confirmHideModal); assets = await driver.findElements('.multichain-token-list-item'); assert.equal(assets.length, 1); diff --git a/test/e2e/tests/custom-rpc-history.spec.js b/test/e2e/tests/custom-rpc-history.spec.js index f05bb77a1f26..ce8ed34185b5 100644 --- a/test/e2e/tests/custom-rpc-history.spec.js +++ b/test/e2e/tests/custom-rpc-history.spec.js @@ -8,7 +8,7 @@ const { } = require('../helpers'); const FixtureBuilder = require('../fixture-builder'); -describe('Stores custom RPC history', function () { +describe('Custom RPC history', function () { it(`creates first custom RPC entry`, async function () { const port = 8546; const chainId = 1338; @@ -268,47 +268,52 @@ describe('Stores custom RPC history', function () { await unlockWallet(driver); await driver.waitForElementNotPresent('.loading-overlay'); + // Click add network from network options await driver.clickElement('[data-testid="network-display"]'); - await driver.clickElement({ text: 'Add network', tag: 'button' }); - + // Open network settings page await driver.findElement('.add-network__networks-container'); - + // Click Add network manually to trigger form await driver.clickElement({ text: 'Add a network manually', tag: 'h6', }); - - // // cancel new custom rpc + // cancel new custom rpc await driver.clickElement( '.networks-tab__add-network-form-footer button.btn-secondary', ); - + // find custom network http://127.0.0.1:8545/2 + const networkItemClassName = '.networks-tab__networks-list-name'; + const customNetworkName = 'http://127.0.0.1:8545/2'; const networkListItems = await driver.findClickableElements( - '.networks-tab__networks-list-name', + networkItemClassName, ); const lastNetworkListItem = networkListItems[networkListItems.length - 1]; await lastNetworkListItem.click(); - await driver.waitForSelector({ css: '.form-field .form-field__input:nth-of-type(1)', - value: 'http://127.0.0.1:8545/2', + value: customNetworkName, }); - - await driver.clickElement('.btn-danger'); - - // wait for confirm delete modal to be visible - await driver.findVisibleElement('span .modal'); - - await driver.clickElement( - '.button.btn-danger-primary.modal-container__footer-button', + // delete custom network in a modal + await driver.clickElement('.networks-tab__network-form .btn-danger'); + await driver.findVisibleElement( + '[data-testid="confirm-delete-network-modal"]', ); + await driver.clickElement({ text: 'Delete', tag: 'button' }); + await driver.waitForElementNotPresent( + '[data-testid="confirm-delete-network-modal"]', + ); + // There's a short slot to process deleting the network, + // hence there's a need to wait for the element to be removed to guarantee the action is executed completely + await driver.waitForElementNotPresent({ + tag: 'div', + text: customNetworkName, + }); - await driver.waitForElementNotPresent('span .modal'); - + // custom network http://127.0.0.1:8545/2 is removed from network list const newNetworkListItems = await driver.findElements( - '.networks-tab__networks-list-name', + networkItemClassName, ); assert.equal(networkListItems.length - 1, newNetworkListItems.length); diff --git a/test/e2e/tests/import-flow.spec.js b/test/e2e/tests/import-flow.spec.js index 03745977a1f3..bca7398e079c 100644 --- a/test/e2e/tests/import-flow.spec.js +++ b/test/e2e/tests/import-flow.spec.js @@ -67,15 +67,19 @@ describe('Import flow @no-mmi', function () { await driver.findVisibleElement('.qr-code__wrapper'); // shows a QR code for the account - await driver.findVisibleElement('.mm-modal'); + await driver.findVisibleElement( + '[data-testid="account-details-modal"]', + ); // shows the correct account address await driver.findElement({ css: '.multichain-address-copy-button', text: '0x0Cc52...7afD3', }); - await driver.clickElement('.mm-modal button[aria-label="Close"]'); - + await driver.clickElement('button[aria-label="Close"]'); + await driver.waitForElementNotPresent( + '[data-testid="account-details-modal"]', + ); // logs out of the account await driver.clickElement( '[data-testid="account-options-menu-button"]', diff --git a/test/e2e/tests/incremental-security.spec.js b/test/e2e/tests/incremental-security.spec.js index 7c7346c52561..bc0b83c6fc55 100644 --- a/test/e2e/tests/incremental-security.spec.js +++ b/test/e2e/tests/incremental-security.spec.js @@ -19,6 +19,7 @@ describe('Incremental Security', function () { }, ], }; + it('Back up Secret Recovery Phrase from backup reminder @no-mmi', async function () { await withFixtures( { @@ -80,11 +81,15 @@ describe('Incremental Security', function () { const publicAddress = await address.getText(); // wait for account modal to be visible - const accountModal = await driver.findVisibleElement('.mm-modal'); - await driver.clickElement('.mm-modal button[aria-label="Close"]'); + await driver.findVisibleElement( + '[data-testid="account-details-modal"]', + ); + await driver.clickElement('button[aria-label="Close"]'); // wait for account modal to be removed from DOM - await accountModal.waitForElementState('hidden'); + await driver.waitForElementNotPresent( + '[data-testid="account-details-modal"]', + ); // send to current account from dapp with different provider const windowHandles = await driver.getAllWindowHandles(); @@ -128,8 +133,11 @@ describe('Incremental Security', function () { await driver.clickElement('[data-testid="secure-wallet-recommended"]'); await driver.fill('[placeholder="Password"]', WALLET_PASSWORD); + await driver.clickElement({ text: 'Confirm', tag: 'button' }); - await driver.waitForElementNotPresent('.mm-modal-overlay'); + await driver.waitForElementNotPresent( + '[data-testid="reveal-srp-modal"]', + ); const recoveryPhraseRevealButton = await driver.findClickableElement( '[data-testid="recovery-phrase-reveal"]', diff --git a/test/e2e/tests/onboarding.spec.js b/test/e2e/tests/onboarding.spec.js index 173ff72ff072..d65bb26551af 100644 --- a/test/e2e/tests/onboarding.spec.js +++ b/test/e2e/tests/onboarding.spec.js @@ -281,6 +281,7 @@ describe('MetaMask onboarding @no-mmi', function () { tag: 'button', }); + await driver.waitForSelector('[data-testid="add-network-modal"]'); const [ networkNameField, networkUrlField, @@ -293,7 +294,9 @@ describe('MetaMask onboarding @no-mmi', function () { await currencySymbolField.sendKeys(currencySymbol); await driver.clickElement({ text: 'Save', tag: 'button' }); - await driver.waitForElementNotPresent('span .modal'); + await driver.waitForElementNotPresent( + '[data-testid="add-network-modal"]', + ); await driver.clickElement({ text: 'Done', tag: 'button' }); // After login, check that notification message for added network is displayed diff --git a/test/e2e/tests/send-eth.spec.js b/test/e2e/tests/send-eth.spec.js index 4d8a52cbf075..23ab2861a315 100644 --- a/test/e2e/tests/send-eth.spec.js +++ b/test/e2e/tests/send-eth.spec.js @@ -209,14 +209,16 @@ describe('Send ETH', function () { await openActionMenuAndStartSendFlow(driver); // choose to scan via QR code await driver.clickElement('[data-testid="ens-qr-scan-button"]'); - await driver.findVisibleElement('.modal'); + await driver.findVisibleElement('[data-testid="qr-scanner-modal"]'); // cancel action will close the dialog and shut down camera initialization await driver.waitForSelector({ css: '.qr-scanner__error', text: "We couldn't access your camera. Please give it another try.", }); await driver.clickElement({ text: 'Cancel', tag: 'button' }); - await driver.waitForElementNotPresent('.modal'); + await driver.waitForElementNotPresent( + '[data-testid="qr-scanner-modal"]', + ); }, ); }); diff --git a/test/e2e/webdriver/driver.js b/test/e2e/webdriver/driver.js index 6326debb2f77..0400832411b2 100644 --- a/test/e2e/webdriver/driver.js +++ b/test/e2e/webdriver/driver.js @@ -79,17 +79,22 @@ function wrapElementWithAPI(element, driver) { try { await element.originalClick(); } catch (e) { - if ( - e.name === 'ElementClickInterceptedError' && - e.message.includes('
') - ) { - // Wait for the loading overlay to disappear and try again - await driver.wait( - until.elementIsNotPresent(By.css('.loading-overlay')), - ); + if (e.name === 'ElementClickInterceptedError') { + if (e.message.includes('
')) { + // Wait for the loading overlay to disappear and try again + await driver.wait( + until.elementIsNotPresent(By.css('.loading-overlay')), + ); + } + if (e.message.includes('
')) { + // Wait for the modal to disappear and try again + await driver.wait( + until.elementIsNotPresent(By.css('.modal__backdrop')), + ); + } await element.originalClick(); } else { - throw e; // If the error is not related to the loading overlay, throw it + throw e; // If the error is not related to the loading overlay or modal backdrop, throw it } } }; diff --git a/ui/components/app/modal/modal.component.js b/ui/components/app/modal/modal.component.js index 18af8f98588c..29257c0591e9 100644 --- a/ui/components/app/modal/modal.component.js +++ b/ui/components/app/modal/modal.component.js @@ -16,6 +16,7 @@ export default class Modal extends PureComponent { children: PropTypes.node, contentClass: PropTypes.string, containerClass: PropTypes.string, + testId: PropTypes.string, // Header text headerText: PropTypes.string, onClose: PropTypes.func, @@ -51,10 +52,14 @@ export default class Modal extends PureComponent { contentClass, containerClass, hideFooter, + testId, } = this.props; return ( -
+
{headerText && (
{headerText}
diff --git a/ui/components/app/modals/confirm-delete-network/__snapshots__/confirm-delete-network.test.js.snap b/ui/components/app/modals/confirm-delete-network/__snapshots__/confirm-delete-network.test.js.snap index 4f7cf9c922a1..e1566f6decb6 100644 --- a/ui/components/app/modals/confirm-delete-network/__snapshots__/confirm-delete-network.test.js.snap +++ b/ui/components/app/modals/confirm-delete-network/__snapshots__/confirm-delete-network.test.js.snap @@ -4,6 +4,7 @@ exports[`Confirm Delete Network should match snapshot 1`] = `
undefined, onHide: () => undefined, keyboard: true, @@ -177,7 +179,7 @@ class FadeModal extends Component { } const { willHide } = this.state; - const { modalStyle } = this.props; + const { modalStyle, testId } = this.props; const backdropStyle = { animationName: willHide ? animation.hideBackdropAnimation @@ -211,7 +213,7 @@ class FadeModal extends Component { return ( -
+
(this.content = el)} diff --git a/ui/components/app/modals/hide-token-confirmation-modal/__snapshots__/hide-token-confirmation-modal.test.js.snap b/ui/components/app/modals/hide-token-confirmation-modal/__snapshots__/hide-token-confirmation-modal.test.js.snap index 16ef9005c5a5..83cfdf3723cc 100644 --- a/ui/components/app/modals/hide-token-confirmation-modal/__snapshots__/hide-token-confirmation-modal.test.js.snap +++ b/ui/components/app/modals/hide-token-confirmation-modal/__snapshots__/hide-token-confirmation-modal.test.js.snap @@ -3,86 +3,82 @@ exports[`Hide Token Confirmation Modal should match snapshot 1`] = `
+ Hide token? +
+
- Hide token? -
-
-
- + + - - - - -
+ /> +
-
- TKN -
-
+
+ TKN +
+
+ You can add this token back in the future by going to “Import token” in your accounts options menu. +
+
+
-
+ - -
+ Hide +
diff --git a/ui/components/app/modals/hide-token-confirmation-modal/hide-token-confirmation-modal.js b/ui/components/app/modals/hide-token-confirmation-modal/hide-token-confirmation-modal.js index ef1a962d09ca..ea10f513d846 100644 --- a/ui/components/app/modals/hide-token-confirmation-modal/hide-token-confirmation-modal.js +++ b/ui/components/app/modals/hide-token-confirmation-modal/hide-token-confirmation-modal.js @@ -51,42 +51,40 @@ class HideTokenConfirmationModal extends Component { const { symbol, address, image } = token; return ( -
-
-
- {this.context.t('hideTokenPrompt')} -
- -
{symbol}
-
- {this.context.t('readdToken')} -
-
- - -
+
+
+ {this.context.t('hideTokenPrompt')} +
+ +
{symbol}
+
+ {this.context.t('readdToken')} +
+
+ +
); diff --git a/ui/components/app/modals/modal.js b/ui/components/app/modals/modal.js index 88db123ca2dd..a461fd7bd70f 100644 --- a/ui/components/app/modals/modal.js +++ b/ui/components/app/modals/modal.js @@ -113,6 +113,7 @@ const custodyConfirmModalStyle = { const MODALS = { ONBOARDING_ADD_NETWORK: { contents: , + testId: 'add-network-modal', ...accountModalStyle, }, NEW_ACCOUNT: { @@ -144,6 +145,7 @@ const MODALS = { HIDE_TOKEN_CONFIRMATION: { contents: , + testId: 'hide-token-confirmation-modal', mobileModalStyle: { width: '95%', top: getEnvironmentType() === ENVIRONMENT_TYPE_POPUP ? '52vh' : '36.5vh', @@ -264,6 +266,7 @@ const MODALS = { QR_SCANNER: { contents: , + testId: 'qr-scanner-modal', mobileModalStyle: { ...modalContainerMobileStyle, }, @@ -423,7 +426,7 @@ class Modal extends Component { render() { const modal = MODALS[this.props.modalState.name || 'DEFAULT']; - const { contents: children, disableBackdropClick = false } = modal; + const { contents: children, disableBackdropClick = false, testId } = modal; const modalStyle = modal[isMobileView() ? 'mobileModalStyle' : 'laptopModalStyle']; const contentStyle = modal.contentStyle || {}; @@ -451,6 +454,7 @@ class Modal extends Component { contentStyle={contentStyle} backdropStyle={BACKDROPSTYLE} closeOnClick={!disableBackdropClick} + testId={testId} > {children} diff --git a/ui/components/app/reveal-SRP-modal/reveal-SRP-modal.js b/ui/components/app/reveal-SRP-modal/reveal-SRP-modal.js index dabdf2e062d4..eeac838563c3 100644 --- a/ui/components/app/reveal-SRP-modal/reveal-SRP-modal.js +++ b/ui/components/app/reveal-SRP-modal/reveal-SRP-modal.js @@ -36,7 +36,7 @@ export default function RevealSRPModal({ ); return ( - + {t('revealSeedWords')} diff --git a/ui/components/multichain/account-details/account-details-display.js b/ui/components/multichain/account-details/account-details-display.js index a3a6b9b0154e..dd86398c79af 100644 --- a/ui/components/multichain/account-details/account-details-display.js +++ b/ui/components/multichain/account-details/account-details-display.js @@ -2,7 +2,7 @@ import React, { useContext } from 'react'; import PropTypes from 'prop-types'; import { useDispatch, useSelector } from 'react-redux'; -import QrView from '../../ui/qr-code'; +import QrCodeView from '../../ui/qr-code-view'; import EditableLabel from '../../ui/editable-label/editable-label'; import { setAccountLabel } from '../../../store/actions'; @@ -70,7 +70,7 @@ export const AccountDetailsDisplay = ({ }} accounts={accounts} /> - + {exportPrivateKeyFeatureEnabled ? ( { return ( <> {/* This is the Modal that says "Show private key" on top and has a few states */} - + { alignItems={AlignItems.center} flexDirection={FlexDirection.Column} > - + diff --git a/ui/components/ui/qr-code-view/index.js b/ui/components/ui/qr-code-view/index.js new file mode 100644 index 000000000000..595b88011d6f --- /dev/null +++ b/ui/components/ui/qr-code-view/index.js @@ -0,0 +1 @@ +export { default } from './qr-code-view'; diff --git a/ui/components/ui/qr-code/index.scss b/ui/components/ui/qr-code-view/index.scss similarity index 100% rename from ui/components/ui/qr-code/index.scss rename to ui/components/ui/qr-code-view/index.scss diff --git a/ui/components/ui/qr-code/qr-code.js b/ui/components/ui/qr-code-view/qr-code-view.js similarity index 97% rename from ui/components/ui/qr-code/qr-code.js rename to ui/components/ui/qr-code-view/qr-code-view.js index 7a9a7d6beffd..c10458e33bc9 100644 --- a/ui/components/ui/qr-code/qr-code.js +++ b/ui/components/ui/qr-code-view/qr-code-view.js @@ -4,7 +4,7 @@ import qrCode from 'qrcode-generator'; import { connect } from 'react-redux'; import { isHexPrefixed } from 'ethereumjs-util'; import { toChecksumHexAddress } from '../../../../shared/modules/hexstring-utils'; -import { AddressCopyButton } from '../../multichain/address-copy-button'; +import { AddressCopyButton } from '../../multichain'; import Box from '../box/box'; import { MetaMetricsContext } from '../../../contexts/metametrics'; import { diff --git a/ui/components/ui/qr-code/qr-code.stories.js b/ui/components/ui/qr-code-view/qr-code-view.stories.js similarity index 100% rename from ui/components/ui/qr-code/qr-code.stories.js rename to ui/components/ui/qr-code-view/qr-code-view.stories.js diff --git a/ui/components/ui/qr-code/index.js b/ui/components/ui/qr-code/index.js deleted file mode 100644 index 632ac037fc4b..000000000000 --- a/ui/components/ui/qr-code/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './qr-code'; diff --git a/ui/components/ui/ui-components.scss b/ui/components/ui/ui-components.scss index bf42cc2160bb..9039e2ecfced 100644 --- a/ui/components/ui/ui-components.scss +++ b/ui/components/ui/ui-components.scss @@ -36,7 +36,7 @@ @import 'page-container/index'; @import 'popover/index'; @import 'pulse-loader/index'; -@import 'qr-code/index'; +@import 'qr-code-view/index'; @import 'radio-group/index'; @import 'review-spending-cap/index'; @import 'sender-to-recipient/index';