From dac83f6188a26849c2dd73ca3bb5618b144764a0 Mon Sep 17 00:00:00 2001 From: Mark Stacey Date: Fri, 10 Jan 2020 10:43:53 -0400 Subject: [PATCH] Make account details modal close button easier to click (#7797) The account details close button is difficult to click from the e2e tests because it has a size of zero. The actual icon is added via CSS as an `::after` pseudo-element. The CSS has been adjusted to give the icon a size, and it the markup is now a `button` rather than a `div`. --- test/e2e/ethereum-on.spec.js | 3 ++- test/e2e/from-import-ui.spec.js | 6 ++++-- test/e2e/incremental-security.spec.js | 3 ++- test/e2e/metamask-ui.spec.js | 3 ++- test/e2e/permissions.spec.js | 3 ++- test/e2e/signature-request.spec.js | 3 ++- .../account-modal-container.component.js | 2 +- ui/app/css/itcss/components/modal.scss | 9 ++++++--- 8 files changed, 21 insertions(+), 11 deletions(-) diff --git a/test/e2e/ethereum-on.spec.js b/test/e2e/ethereum-on.spec.js index 04c60a81b..1dc2b2fc9 100644 --- a/test/e2e/ethereum-on.spec.js +++ b/test/e2e/ethereum-on.spec.js @@ -112,7 +112,8 @@ describe('MetaMask', function () { publicAddress = await addressInput.getAttribute('value') const accountModal = await driver.findElement(By.css('span .modal')) - await driver.executeScript("document.querySelector('.account-modal-close').click()") + const accountModalClose = await driver.findElement(By.css('.account-modal-close')) + await accountModalClose.click() await driver.wait(until.stalenessOf(accountModal)) await delay(regularDelayMs) diff --git a/test/e2e/from-import-ui.spec.js b/test/e2e/from-import-ui.spec.js index a04697dc3..a10d6ac33 100644 --- a/test/e2e/from-import-ui.spec.js +++ b/test/e2e/from-import-ui.spec.js @@ -118,7 +118,8 @@ describe('Using MetaMask with an existing account', function () { const [address] = await findElements(driver, By.css('input.qr-ellip-address')) assert.equal(await address.getAttribute('value'), testAddress) - await driver.executeScript("document.querySelector('.account-modal-close').click()") + const accountModalClose = await driver.findElement(By.css('.account-modal-close')) + await accountModalClose.click() await delay(largeDelayMs) }) @@ -128,7 +129,8 @@ describe('Using MetaMask with an existing account', function () { const detailModal = await driver.findElement(By.css('span .modal')) await delay(regularDelayMs) - await driver.executeScript("document.querySelector('.account-modal-close').click()") + const accountModalClose = await driver.findElement(By.css('.account-modal-close')) + await accountModalClose.click() await driver.wait(until.stalenessOf(detailModal)) await delay(regularDelayMs) }) diff --git a/test/e2e/incremental-security.spec.js b/test/e2e/incremental-security.spec.js index 549373a6b..9aa69e578 100644 --- a/test/e2e/incremental-security.spec.js +++ b/test/e2e/incremental-security.spec.js @@ -117,7 +117,8 @@ describe('MetaMask', function () { const accountModal = await driver.findElement(By.css('span .modal')) - await driver.executeScript("document.querySelector('.account-modal-close').click()") + const accountModalClose = await driver.findElement(By.css('.account-modal-close')) + await accountModalClose.click() await driver.wait(until.stalenessOf(accountModal)) await delay(regularDelayMs) diff --git a/test/e2e/metamask-ui.spec.js b/test/e2e/metamask-ui.spec.js index 60c7167dc..9c6cd742b 100644 --- a/test/e2e/metamask-ui.spec.js +++ b/test/e2e/metamask-ui.spec.js @@ -148,7 +148,8 @@ describe('MetaMask', function () { const accountModal = await driver.findElement(By.css('span .modal')) - await driver.executeScript("document.querySelector('.account-modal-close').click()") + const accountModalClose = await driver.findElement(By.css('.account-modal-close')) + await accountModalClose.click() await driver.wait(until.stalenessOf(accountModal)) await delay(regularDelayMs) diff --git a/test/e2e/permissions.spec.js b/test/e2e/permissions.spec.js index 0f03b6621..0d8ec3781 100644 --- a/test/e2e/permissions.spec.js +++ b/test/e2e/permissions.spec.js @@ -113,7 +113,8 @@ describe('MetaMask', function () { publicAddress = await addressInput.getAttribute('value') const accountModal = await driver.findElement(By.css('span .modal')) - await driver.executeScript("document.querySelector('.account-modal-close').click()") + const accountModalClose = await driver.findElement(By.css('.account-modal-close')) + await accountModalClose.click() await driver.wait(until.stalenessOf(accountModal)) await delay(regularDelayMs) diff --git a/test/e2e/signature-request.spec.js b/test/e2e/signature-request.spec.js index 6fd03b5a7..a71f1c003 100644 --- a/test/e2e/signature-request.spec.js +++ b/test/e2e/signature-request.spec.js @@ -145,7 +145,8 @@ describe('MetaMask', function () { const newPublicAddress = await addressInput.getAttribute('value') const accountModal = await driver.findElement(By.css('span .modal')) - await driver.executeScript("document.querySelector('.account-modal-close').click()") + const accountModalClose = await driver.findElement(By.css('.account-modal-close')) + await accountModalClose.click() await driver.wait(until.stalenessOf(accountModal)) await delay(regularDelayMs) diff --git a/ui/app/components/app/modals/account-modal-container/account-modal-container.component.js b/ui/app/components/app/modals/account-modal-container/account-modal-container.component.js index ed28f5fd1..0a1fc3fe2 100644 --- a/ui/app/components/app/modals/account-modal-container/account-modal-container.component.js +++ b/ui/app/components/app/modals/account-modal-container/account-modal-container.component.js @@ -26,7 +26,7 @@ export default function AccountModalContainer (props, context) { {' ' + context.t('back')} )} -
+
diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss index 0bd017f6b..20b517678 100644 --- a/ui/app/css/itcss/components/modal.scss +++ b/ui/app/css/itcss/components/modal.scss @@ -61,14 +61,17 @@ } } -.account-modal-close::after { - content: '\00D7'; +.account-modal-close { font-size: 40px; + background-color: transparent; color: $dusty-gray; position: absolute; top: 10px; right: 12px; - cursor: pointer; +} + +.account-modal-close::after { + content: '\00D7'; } .account-modal-container .identicon {