Add withFixtures helper and simple-send test (MetaMask#7862)

The `withFixtures` helper will instantiate ganache, a web driver, and
a fixture server initialized with the given set of fixtures. It is
meant to facilitating writing small, isolated e2e tests.

The first example test has been added: simple-send. It ensures that the
user can send 1 ETH to another account.

These new e2e tests will run during the normal e2e test run.

Closes MetaMask#6548

test/e2e/helpers.js

@@ -1,9 +1,40 @@
+const path = require('path')
+const Ganache = require('./ganache')
+const FixtureServer = require('./fixture-server')
+const { buildWebDriver } = require('./webdriver')
+
 const tinyDelayMs = 200
 const regularDelayMs = tinyDelayMs * 2
 const largeDelayMs = regularDelayMs * 2
 
+async function withFixtures (options, callback) {
+  const { fixtures, ganacheOptions, driverOptions } = options
+  const fixtureServer = new FixtureServer()
+  const ganacheServer = new Ganache()
+
+  let webDriver
+  try {
+    await ganacheServer.start(ganacheOptions)
+    await fixtureServer.start()
+    await fixtureServer.loadState(path.join(__dirname, 'fixtures', fixtures))
+    const { driver } = await buildWebDriver(driverOptions)
+    webDriver = driver
+
+    await callback({
+      driver,
+    })
+  } finally {
+    await fixtureServer.stop()
+    await ganacheServer.quit()
+    if (webDriver) {
+      await webDriver.quit()
+    }
+  }
+}
+
 module.exports = {
   tinyDelayMs,
   regularDelayMs,
   largeDelayMs,
+  withFixtures,
 }

test/e2e/run-all.sh

@@ -7,6 +7,8 @@ set -o pipefail
 
 export PATH="$PATH:./node_modules/.bin"
 
+mocha --no-timeouts test/e2e/tests/*.spec.js
+
 concurrently --kill-others \
   --names 'dapp,e2e' \
   --prefix '[{time}][{name}]' \

test/e2e/tests/simple-send.spec.js

@@ -0,0 +1,28 @@
+const { By, Key } = require('selenium-webdriver')
+const { withFixtures } = require('../helpers')
+
+describe('MetaMask Browser Extension', function () {
+  it('can send a simple transaction from one account to another', async () => {
+    const ganacheOptions = {
+      accounts: [
+        {
+          secretKey: '0x7C9529A67102755B7E6102D6D950AC5D5863C98713805CEC576B945B15B71EAC',
+          balance: 25000000000000000000,
+        },
+      ],
+    }
+    await withFixtures({ fixtures: 'imported-account', ganacheOptions }, async ({ driver }) => {
+      const passwordField = await driver.findElement(By.css('#password'))
+      await passwordField.sendKeys('correct horse battery staple')
+      await passwordField.sendKeys(Key.ENTER)
+      await driver.clickElement(By.css('[data-testid="transaction-view-send"]'))
+      const recipientAddressField = await driver.findElement(By.css('[data-testid="ens-input"]'))
+      await recipientAddressField.sendKeys('0x985c30949c92df7a0bd42e0f3e3d539ece98db24')
+      const amountField = await driver.findElement(By.css('.unit-input__input'))
+      await amountField.sendKeys('1')
+      await driver.clickElement(By.css('[data-testid="page-container-footer-next"]'))
+      await driver.clickElement(By.css('[data-testid="page-container-footer-next"]'))
+      await driver.findElement(By.css('.transaction-list-item'))
+    })
+  })
+})

ui/app/components/app/transaction-view-balance/transaction-view-balance.component.js

@@ -121,6 +121,7 @@ export default class TransactionViewBalance extends PureComponent {
             })
             history.push(SEND_ROUTE)
           }}
+          data-testid="transaction-view-send"
         >
           {t('send')}
         </Button>

ui/app/components/ui/page-container/page-container-footer/page-container-footer.component.js

@@ -43,6 +43,7 @@ export default class PageContainerFooter extends Component {
               large={buttonSizeLarge}
               className="page-container__footer-button"
               onClick={e => onCancel(e)}
+              data-testid="page-container-footer-cancel"
             >
               {cancelText || this.context.t('cancel')}
             </Button>
@@ -54,6 +55,7 @@ export default class PageContainerFooter extends Component {
             className="page-container__footer-button"
             disabled={disabled}
             onClick={e => onSubmit(e)}
+            data-testid="page-container-footer-next"
           >
             {submitText || this.context.t('next')}
           </Button>

ui/app/pages/send/send-content/add-recipient/ens-input.component.js

@@ -184,6 +184,7 @@ export default class EnsInput extends Component {
             onPaste={this.onPaste}
             value={selectedAddress || input}
             autoFocus
+            data-testid="ens-input"
           />
           <div
             className={c('ens-input__wrapper__action-icon', {