m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 01:39:44 +01:00
Code

Cleanup beforeunload handler after transaction is resolved (#7333)

Browse Source 
* Cleanup beforeunload handler after transaction is resolved

The notification window was updated to reject transactions upon close
in #6340. A handler that rejects the transaction was added to
`window.onbeforeunload`, and it was cleared in `actions.js` if it was
confirmed or rejected.

However, the `onbeforeunload` handler remained uncleared if the
transaction was resolved in another window. This results in the
transaction being rejected when the notification window closes, even
long after the transaction is submitted and confirmed. This has been
the cause of many problems with the Firefox e2e tests.

Instead the `onbeforeunload` handler is cleared in the
`componentWillUnmount` lifecycle function, alongside where it's set in
the first place. This ensures that it's correctly unset regardless
of how the transaction was resolved, and it better matches user
expectations.

* Fix indentation and remove redundant export

The `run-all.sh` Bash script now uses consistent indentation, and is
consistent about only re-exporting the Ganache arguments when they
change.

* Ensure transactions are completed before checking balance

Various intermittent e2e test failures appear to be caused by React
re-rendering the transaction list during the test, as the transaction
goes from pending to confirmed. To avoid this race condition, the
transaction is now explicitly looked for in the confirmed transaction
list in each of the tests using this pattern.

* Enable all e2e tests on Firefox

The remaining tests that were disabled on Firefox now work correctly.
Only a few timing adjustments were needed.

* Update Firefox used in CI

Firefox v70 is now used on CI instead of v68. This necessitated
rewriting the function where the extension ID was obtained because the
Firefox extensions page was redesigned.
This commit is contained in:
Mark Stacey 2019-10-31 13:27:22 -03:00 committed by GitHub
parent 19965985ad
commit fe28e0d134
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 96 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.circleci/scripts/firefox-install
View File

@ -4,7 +4,7 @@ set -e
set -u
set -o pipefail
FIREFOX_VERSION='68.0'
FIREFOX_VERSION='70.0'
FIREFOX_BINARY="firefox-${FIREFOX_VERSION}.tar.bz2"
FIREFOX_BINARY_URL="https://ftp.mozilla.org/pub/firefox/releases/${FIREFOX_VERSION}/linux-x86_64/en-US/${FIREFOX_BINARY}"
FIREFOX_PATH='/opt/firefox'

24
test/e2e/address-book.spec.js
View File

@ -210,13 +210,13 @@ describe('MetaMask', function () {
})
it('finds the transaction in the transactions list', async function () {
const transactions = await findElements(driver, By.css('.transaction-list-item'))
assert.equal(transactions.length, 1)
await driver.wait(async () => {
const confirmedTxes = await findElements(driver, By.css('.transaction-list__completed-transactions .transaction-list-item'))
return confirmedTxes.length === 1
}, 10000)
if (process.env.SELENIUM_BROWSER !== 'firefox') {
const txValues = await findElement(driver, By.css('.transaction-list-item__amount--primary'))
await driver.wait(until.elementTextMatches(txValues, /-1\s*ETH/), 10000)
}
const txValues = await findElement(driver, By.css('.transaction-list-item__amount--primary'))
await driver.wait(until.elementTextMatches(txValues, /-1\s*ETH/), 10000)
})
})
@ -251,13 +251,13 @@ describe('MetaMask', function () {
})
it('finds the transaction in the transactions list', async function () {
const transactions = await findElements(driver, By.css('.transaction-list-item'))
assert.equal(transactions.length, 2)
await driver.wait(async () => {
const confirmedTxes = await findElements(driver, By.css('.transaction-list__completed-transactions .transaction-list-item'))
return confirmedTxes.length === 2
}, 10000)
if (process.env.SELENIUM_BROWSER !== 'firefox') {
const txValues = await findElement(driver, By.css('.transaction-list-item__amount--primary'))
await driver.wait(until.elementTextMatches(txValues, /-2\s*ETH/), 10000)
}
const txValues = await findElement(driver, By.css('.transaction-list-item__amount--primary'))
await driver.wait(until.elementTextMatches(txValues, /-2\s*ETH/), 10000)
})
})
})

6
test/e2e/from-import-ui.spec.js
View File

@ -226,8 +226,10 @@ describe('Using MetaMask with an existing account', function () {
})
it('finds the transaction in the transactions list', async function () {
const transactions = await findElements(driver, By.css('.transaction-list-item'))
assert.equal(transactions.length, 1)
await driver.wait(async () => {
const confirmedTxes = await findElements(driver, By.css('.transaction-list__completed-transactions .transaction-list-item'))
return confirmedTxes.length === 1
}, 10000)
const txValues = await findElements(driver, By.css('.transaction-list-item__amount--primary'))
assert.equal(txValues.length, 1)

2
test/e2e/func.js
View File

@ -91,7 +91,7 @@ async function getExtensionIdChrome (driver) {
async function getExtensionIdFirefox (driver) {
await driver.get('about:debugging#addons')
const extensionId = await driver.findElement(By.css('dd.addon-target-info-content:nth-child(6) > span:nth-child(1)')).getText()
const extensionId = await driver.wait(webdriver.until.elementLocated(By.xpath('//dl/div[contains(., \'Internal UUID\')]/dd')), 1000).getText()
return extensionId
}

12
test/e2e/metamask-responsive-ui.spec.js
View File

@ -231,13 +231,13 @@ describe('MetaMask', function () {
})
it('finds the transaction in the transactions list', async function () {
const transactions = await findElements(driver, By.css('.transaction-list-item'))
assert.equal(transactions.length, 1)
await driver.wait(async () => {
const confirmedTxes = await findElements(driver, By.css('.transaction-list__completed-transactions .transaction-list-item'))
return confirmedTxes.length === 1
}, 10000)
if (process.env.SELENIUM_BROWSER !== 'firefox') {
const txValues = await findElement(driver, By.css('.transaction-list-item__amount--primary'))
await driver.wait(until.elementTextMatches(txValues, /-1\s*ETH/), 10000)
}
const txValues = await findElement(driver, By.css('.transaction-list-item__amount--primary'))
await driver.wait(until.elementTextMatches(txValues, /-1\s*ETH/), 10000)
})
})
})

97
test/e2e/metamask-ui.spec.js
View File

@ -289,13 +289,13 @@ describe('MetaMask', function () {
})
it('finds the transaction in the transactions list', async function () {
const transactions = await findElements(driver, By.css('.transaction-list-item'))
assert.equal(transactions.length, 1)
await driver.wait(async () => {
const confirmedTxes = await findElements(driver, By.css('.transaction-list__completed-transactions .transaction-list-item'))
return confirmedTxes.length === 1
}, 10000)
if (process.env.SELENIUM_BROWSER !== 'firefox') {
const txValues = await findElement(driver, By.css('.transaction-list-item__amount--primary'))
await driver.wait(until.elementTextMatches(txValues, /-1\s*ETH/), 10000)
}
const txValues = await findElement(driver, By.css('.transaction-list-item__amount--primary'))
await driver.wait(until.elementTextMatches(txValues, /-1\s*ETH/), 10000)
})
})
@ -332,13 +332,13 @@ describe('MetaMask', function () {
})
it('finds the transaction in the transactions list', async function () {
const transactions = await findElements(driver, By.css('.transaction-list-item'))
assert.equal(transactions.length, 2)
await driver.wait(async () => {
const confirmedTxes = await findElements(driver, By.css('.transaction-list__completed-transactions .transaction-list-item'))
return confirmedTxes.length === 2
}, 10000)
if (process.env.SELENIUM_BROWSER !== 'firefox') {
const txValues = await findElement(driver, By.css('.transaction-list-item__amount--primary'))
await driver.wait(until.elementTextMatches(txValues, /-1\s*ETH/), 10000)
}
const txValues = await findElement(driver, By.css('.transaction-list-item__amount--primary'))
await driver.wait(until.elementTextMatches(txValues, /-1\s*ETH/), 10000)
})
})
@ -385,13 +385,13 @@ describe('MetaMask', function () {
})
it('finds the transaction in the transactions list', async function () {
const transactions = await findElements(driver, By.css('.transaction-list-item'))
assert.equal(transactions.length, 3)
await driver.wait(async () => {
const confirmedTxes = await findElements(driver, By.css('.transaction-list__completed-transactions .transaction-list-item'))
return confirmedTxes.length === 3
}, 10000)
if (process.env.SELENIUM_BROWSER !== 'firefox') {
const txValues = await findElement(driver, By.css('.transaction-list-item__amount--primary'))
await driver.wait(until.elementTextMatches(txValues, /-1\s*ETH/), 10000)
}
const txValues = await findElement(driver, By.css('.transaction-list-item__amount--primary'))
await driver.wait(until.elementTextMatches(txValues, /-1\s*ETH/), 10000)
})
})
@ -838,12 +838,10 @@ describe('MetaMask', function () {
it('renders the correct ETH balance', async () => {
const balance = await findElement(driver, By.css('.transaction-view-balance__primary-balance'))
await delay(regularDelayMs)
if (process.env.SELENIUM_BROWSER !== 'firefox') {
await driver.wait(until.elementTextMatches(balance, /^87.*\s*ETH.*$/), 10000)
const tokenAmount = await balance.getText()
assert.ok(/^87.*\s*ETH.*$/.test(tokenAmount))
await delay(regularDelayMs)
}
await driver.wait(until.elementTextMatches(balance, /^87.*\s*ETH.*$/), 10000)
const tokenAmount = await balance.getText()
assert.ok(/^87.*\s*ETH.*$/.test(tokenAmount))
await delay(regularDelayMs)
})
})
@ -1002,22 +1000,15 @@ describe('MetaMask', function () {
})
it('finds the transaction in the transactions list', async function () {
const transactions = await findElements(driver, By.css('.transaction-list-item'))
assert.equal(transactions.length, 1)
const txValues = await findElements(driver, By.css('.transaction-list-item__amount--primary'))
assert.equal(txValues.length, 1)
// test cancelled on firefox until https://github.com/mozilla/geckodriver/issues/906 is resolved,
// or possibly until we use latest version of firefox in the tests
if (process.env.SELENIUM_BROWSER !== 'firefox') {
await driver.wait(until.elementTextMatches(txValues[0], /-1\s*TST/), 10000)
}
await driver.wait(async () => {
const confirmedTxes = await findElements(driver, By.css('.transaction-list__completed-transactions .transaction-list-item'))
return confirmedTxes.length === 1
}, 10000)
const txValues = await findElements(driver, By.css('.transaction-list-item__amount--primary'))
assert.equal(txValues.length, 1)
await driver.wait(until.elementTextMatches(txValues[0], /-1\s*TST/), 10000)
const txStatuses = await findElements(driver, By.css('.transaction-list-item__action'))
await driver.wait(until.elementTextMatches(txStatuses[0], /Sent\sToken/i), 10000)
})
@ -1104,7 +1095,6 @@ describe('MetaMask', function () {
return confirmedTxes.length === 2
}, 10000)
await delay(regularDelayMs)
const txValues = await findElements(driver, By.css('.transaction-list-item__amount--primary'))
await driver.wait(until.elementTextMatches(txValues[0], /-1.5\s*TST/))
const txStatuses = await findElements(driver, By.css('.transaction-list-item__action'))
@ -1115,14 +1105,10 @@ describe('MetaMask', function () {
const tokenListItems = await findElements(driver, By.css('.token-list-item'))
await tokenListItems[0].click()
await delay(regularDelayMs)
await delay(1000)
// test cancelled on firefox until https://github.com/mozilla/geckodriver/issues/906 is resolved,
// or possibly until we use latest version of firefox in the tests
if (process.env.SELENIUM_BROWSER !== 'firefox') {
const tokenBalanceAmount = await findElements(driver, By.css('.transaction-view-balance__primary-balance'))
await driver.wait(until.elementTextMatches(tokenBalanceAmount[0], /7.500\s*TST/), 10000)
}
const tokenBalanceAmount = await findElements(driver, By.css('.transaction-view-balance__primary-balance'))
await driver.wait(until.elementTextMatches(tokenBalanceAmount[0], /7.500\s*TST/), 10000)
})
})
@ -1141,9 +1127,6 @@ describe('MetaMask', function () {
const transferTokens = await findElement(driver, By.xpath(`//button[contains(text(), 'Approve Tokens')]`))
await transferTokens.click()
if (process.env.SELENIUM_BROWSER !== 'firefox') {
await closeAllWindowHandlesExcept(driver, [extension, dapp])
}
await driver.switchTo().window(extension)
await delay(regularDelayMs)
@ -1232,10 +1215,6 @@ describe('MetaMask', function () {
})
it('finds the transaction in the transactions list', async function () {
if (process.env.SELENIUM_BROWSER === 'firefox') {
this.skip()
}
await driver.wait(async () => {
const confirmedTxes = await findElements(driver, By.css('.transaction-list__completed-transactions .transaction-list-item'))
return confirmedTxes.length === 3
@ -1249,12 +1228,6 @@ describe('MetaMask', function () {
})
describe('Tranfers a custom token from dapp when no gas value is specified', () => {
before(function () {
if (process.env.SELENIUM_BROWSER === 'firefox') {
this.skip()
}
})
it('transfers an already created token, without specifying gas', async () => {
const windowHandles = await driver.getAllWindowHandles()
const extension = windowHandles[0]
@ -1267,7 +1240,6 @@ describe('MetaMask', function () {
const transferTokens = await findElement(driver, By.xpath(`//button[contains(text(), 'Transfer Tokens Without Gas')]`))
await transferTokens.click()
await closeAllWindowHandlesExcept(driver, [extension, dapp])
await driver.switchTo().window(extension)
await delay(regularDelayMs)
@ -1304,12 +1276,6 @@ describe('MetaMask', function () {
})
describe('Approves a custom token from dapp when no gas value is specified', () => {
before(function () {
if (process.env.SELENIUM_BROWSER === 'firefox') {
this.skip()
}
})
it('approves an already created token', async () => {
const windowHandles = await driver.getAllWindowHandles()
const extension = windowHandles[0]
@ -1323,7 +1289,6 @@ describe('MetaMask', function () {
const transferTokens = await findElement(driver, By.xpath(`//button[contains(text(), 'Approve Tokens Without Gas')]`))
await transferTokens.click()
await closeAllWindowHandlesExcept(driver, extension)
await driver.switchTo().window(extension)
await delay(regularDelayMs)
@ -1346,7 +1311,7 @@ describe('MetaMask', function () {
})
it('submits the transaction', async function () {
await delay(regularDelayMs)
await delay(1000)
const confirmButton = await findElement(driver, By.xpath(`//button[contains(text(), 'Confirm')]`))
await confirmButton.click()
await delay(regularDelayMs)

33
test/e2e/run-all.sh
View File

@ -37,7 +37,6 @@ concurrently --kill-others \
'yarn ganache:start' \
'sleep 5 && mocha test/e2e/from-import-ui.spec'
export GANACHE_ARGS="${BASE_GANACHE_ARGS} --deterministic --account=0x53CB0AB5226EEBF4D872113D98332C1555DC304443BEE1CF759D15798D3C55A9,25000000000000000000"
concurrently --kill-others \
--names 'ganache,e2e' \
--prefix '[{time}][{name}]' \
@ -45,14 +44,13 @@ concurrently --kill-others \
'npm run ganache:start' \
'sleep 5 && mocha test/e2e/send-edit.spec'
concurrently --kill-others \
--names 'ganache,dapp,e2e' \
--prefix '[{time}][{name}]' \
--success first \
'yarn ganache:start' \
'yarn dapp' \
'sleep 5 && mocha test/e2e/ethereum-on.spec'
concurrently --kill-others \
--names 'ganache,dapp,e2e' \
--prefix '[{time}][{name}]' \
--success first \
'yarn ganache:start' \
'yarn dapp' \
'sleep 5 && mocha test/e2e/ethereum-on.spec'
export GANACHE_ARGS="${BASE_GANACHE_ARGS} --deterministic --account=0x250F458997A364988956409A164BA4E16F0F99F916ACDD73ADCD3A1DE30CF8D1,0 --account=0x53CB0AB5226EEBF4D872113D98332C1555DC304443BEE1CF759D15798D3C55A9,25000000000000000000"
concurrently --kill-others \
@ -73,12 +71,11 @@ concurrently --kill-others \
'sleep 5 && mocha test/e2e/address-book.spec'
export GANACHE_ARGS="${BASE_GANACHE_ARGS} --deterministic --account=0x53CB0AB5226EEBF4D872113D98332C1555DC304443BEE1CF759D15798D3C55A9,25000000000000000000"
concurrently --kill-others \
--names 'ganache,dapp,e2e' \
--prefix '[{time}][{name}]' \
--success first \
'node test/e2e/mock-3box/server.js' \
'yarn ganache:start' \
'yarn dapp' \
'sleep 5 && mocha test/e2e/threebox.spec'
concurrently --kill-others \
--names 'ganache,dapp,e2e' \
--prefix '[{time}][{name}]' \
--success first \
'node test/e2e/mock-3box/server.js' \
'yarn ganache:start' \
'yarn dapp' \
'sleep 5 && mocha test/e2e/threebox.spec'

6
test/e2e/send-edit.spec.js
View File

@ -218,8 +218,10 @@ describe('Using MetaMask with an existing account', function () {
})
it('finds the transaction in the transactions list', async function () {
const transactions = await findElements(driver, By.css('.transaction-list-item'))
assert.equal(transactions.length, 1)
await driver.wait(async () => {
const confirmedTxes = await findElements(driver, By.css('.transaction-list__completed-transactions .transaction-list-item'))
return confirmedTxes.length === 1
}, 10000)
const txValues = await findElements(driver, By.css('.transaction-list-item__amount--primary'))
assert.equal(txValues.length, 1)

9
ui/app/components/app/signature-request.js
View File

@ -107,7 +107,7 @@ SignatureRequest.prototype.componentDidMount = function () {
const { clearConfirmTransaction, cancel } = this.props
const { metricsEvent } = this.context
if (getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_NOTIFICATION) {
window.onbeforeunload = event => {
this._onBeforeUnload = event => {
metricsEvent({
eventOpts: {
category: 'Transactions',
@ -118,6 +118,13 @@ SignatureRequest.prototype.componentDidMount = function () {
clearConfirmTransaction()
cancel(event)
}
window.addEventListener('beforeunload', this._onBeforeUnload)
}
}
SignatureRequest.prototype.componentWillUnmount = function () {
if (getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_NOTIFICATION) {
window.removeEventListener('beforeunload', this._onBeforeUnload)
}
}

9
ui/app/pages/confirm-transaction-base/confirm-transaction-base.component.js
View File

@ -581,7 +581,7 @@ export default class ConfirmTransactionBase extends Component {
})
if (getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_NOTIFICATION) {
window.onbeforeunload = () => {
this._onBeforeUnload = () => {
metricsEvent({
eventOpts: {
category: 'Transactions',
@ -594,11 +594,18 @@ export default class ConfirmTransactionBase extends Component {
})
cancelTransaction({ id })
}
window.addEventListener('beforeunload', this._onBeforeUnload)
}
getNextNonce()
}
componentWillUnmount () {
if (getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_NOTIFICATION) {
window.removeEventListener('beforeunload', this._onBeforeUnload)
}
}
render () {
const {
isTxReprice,

7
ui/app/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js
View File

@ -50,7 +50,7 @@ export default class ImportWithSeedPhrase extends PureComponent {
}
componentWillMount () {
window.onbeforeunload = () => this.context.metricsEvent({
this._onBeforeUnload = () => this.context.metricsEvent({
eventOpts: {
category: 'Onboarding',
action: 'Import Seed Phrase',
@ -61,6 +61,11 @@ export default class ImportWithSeedPhrase extends PureComponent {
errorMessage: this.state.seedPhraseError,
},
})
window.addEventListener('beforeunload', this._onBeforeUnload)
}
componentWillUnmount () {
window.removeEventListener('beforeunload', this._onBeforeUnload)
}
handleSeedPhraseChange (seedPhrase) {

12
ui/app/store/actions.js
View File

@ -856,8 +856,6 @@ function signMsg (msgData) {
log.debug('action - signMsg')
return (dispatch) => {
dispatch(actions.showLoadingIndication())
window.onbeforeunload = null
return new Promise((resolve, reject) => {
log.debug(`actions calling background.signMessage`)
background.signMessage(msgData, (err, newState) => {
@ -884,7 +882,6 @@ function signPersonalMsg (msgData) {
log.debug('action - signPersonalMsg')
return (dispatch) => {
dispatch(actions.showLoadingIndication())
window.onbeforeunload = null
return new Promise((resolve, reject) => {
log.debug(`actions calling background.signPersonalMessage`)
background.signPersonalMessage(msgData, (err, newState) => {
@ -911,7 +908,6 @@ function signTypedMsg (msgData) {
log.debug('action - signTypedMsg')
return (dispatch) => {
dispatch(actions.showLoadingIndication())
window.onbeforeunload = null
return new Promise((resolve, reject) => {
log.debug(`actions calling background.signTypedMessage`)
background.signTypedMessage(msgData, (err, newState) => {
@ -1124,7 +1120,6 @@ function sendTx (txData) {
log.info(`actions - sendTx: ${JSON.stringify(txData.txParams)}`)
return (dispatch, getState) => {
log.debug(`actions calling background.approveTransaction`)
window.onbeforeunload = null
background.approveTransaction(txData.id, (err) => {
if (err) {
dispatch(actions.txError(err))
@ -1201,7 +1196,6 @@ function updateAndApproveTx (txData) {
return (dispatch) => {
log.debug(`actions calling background.updateAndApproveTx`)
dispatch(actions.showLoadingIndication())
window.onbeforeunload = null
return new Promise((resolve, reject) => {
background.updateAndApproveTransaction(txData, err => {
dispatch(actions.updateTransactionParams(txData.id, txData.txParams))
@ -1260,7 +1254,6 @@ function txError (err) {
function cancelMsg (msgData) {
return (dispatch) => {
dispatch(actions.showLoadingIndication())
window.onbeforeunload = null
return new Promise((resolve, reject) => {
log.debug(`background.cancelMessage`)
background.cancelMessage(msgData.id, (err, newState) => {
@ -1283,7 +1276,6 @@ function cancelMsg (msgData) {
function cancelPersonalMsg (msgData) {
return (dispatch) => {
dispatch(actions.showLoadingIndication())
window.onbeforeunload = null
return new Promise((resolve, reject) => {
const id = msgData.id
background.cancelPersonalMessage(id, (err, newState) => {
@ -1306,7 +1298,6 @@ function cancelPersonalMsg (msgData) {
function cancelTypedMsg (msgData) {
return (dispatch) => {
dispatch(actions.showLoadingIndication())
window.onbeforeunload = null
return new Promise((resolve, reject) => {
const id = msgData.id
background.cancelTypedMessage(id, (err, newState) => {
@ -1330,7 +1321,6 @@ function cancelTx (txData) {
return (dispatch) => {
log.debug(`background.cancelTransaction`)
dispatch(actions.showLoadingIndication())
window.onbeforeunload = null
return new Promise((resolve, reject) => {
background.cancelTransaction(txData.id, err => {
if (err) {
@ -1360,7 +1350,6 @@ function cancelTx (txData) {
*/
function cancelTxs (txDataList) {
return async (dispatch) => {
window.onbeforeunload = null
dispatch(actions.showLoadingIndication())
const txIds = txDataList.map(({id}) => id)
const cancellations = txIds.map((id) => new Promise((resolve, reject) => {
@ -1744,7 +1733,6 @@ function addTokens (tokens) {
function removeSuggestedTokens () {
return (dispatch) => {
dispatch(actions.showLoadingIndication())
window.onbeforeunload = null
return new Promise((resolve) => {
background.removeSuggestedTokens((err, suggestedTokens) => {
dispatch(actions.hideLoadingIndication())