Update

package.json

@@ -16,6 +16,7 @@
     "test:unit": "METAMASK_ENV=test mocha --exit --compilers js:babel-core/register --require test/helper.js --recursive \"test/unit/**/*.js\"",
     "test:single": "METAMASK_ENV=test mocha --require test/helper.js",
     "test:integration": "npm run test:flat && npm run test:mascara",
+    "test:e2e": "METAMASK_ENV=test mocha test/e2e/metamask.spec --recursive || true",
     "test:coverage": "nyc npm run test:unit && npm run test:coveralls-upload",
     "test:coveralls-upload": "if [ $COVERALLS_REPO_TOKEN ]; then nyc report --reporter=text-lcov | coveralls; fi",
     "test:flat": "npm run test:flat:build && karma start test/flat.conf.js",
@@ -188,7 +189,7 @@
     "gulp-zip": "^4.0.0",
     "gulp-eslint": "^4.0.0",
     "isomorphic-fetch": "^2.2.1",
-    "jsdom": "^11.1.0",
+    "jsdom": "^11.2.0",
     "jsdom-global": "^3.0.2",
     "jshint-stylish": "~2.2.1",
     "karma": "^1.7.1",
@@ -211,6 +212,7 @@
     "react-test-renderer": "^15.6.2",
     "react-testutils-additions": "^15.2.0",
     "sinon": "^4.0.0",
+    "selenium-webdriver": "^3.5.0",
     "tape": "^4.5.1",
     "testem": "^1.10.3",
     "uglifyify": "^4.0.2",

test/e2e/func.js

@@ -0,0 +1,17 @@
+const webdriver = require('selenium-webdriver')
+
+exports.delay = function delay (time) {
+  return new Promise(resolve => setTimeout(resolve, time))
+}
+
+
+exports.buildWebDriver = function buildWebDriver (extPath) {
+  return new webdriver.Builder()
+    .withCapabilities({
+      chromeOptions: {
+        args: [`load-extension=${extPath}`],
+      },
+    })
+    .forBrowser('chrome')
+    .build()
+}

test/e2e/metamask.spec.js

@@ -0,0 +1,124 @@
+const path = require('path')
+const assert = require('assert')
+const webdriver = require('selenium-webdriver')
+const By = webdriver.By
+const { delay, buildWebDriver } = require('./func')
+
+describe('Metamask popup page', function () {
+  let driver
+  this.seedPhase
+  this.accountAddress
+  this.timeout(0)
+
+  before(async function () {
+    const extPath = path.resolve('dist/chrome')
+    driver = buildWebDriver(extPath)
+    await driver.get('chrome://extensions-frame')
+    const elems = await driver.findElements(By.xpath(
+      '//*[@id="jepnlelaaflcpibhckpebdcijgfdfleo"]'
+    ))
+    const extensionId = await elems[0].getAttribute('id')
+    await driver.get(`chrome-extension://${extensionId}/popup.html`)
+    await delay(500)
+  })
+
+  after(async function () {
+    await driver.quit()
+  })
+
+  describe('#onboarding', () => {
+    it('should open Metamask.io', async function () {
+      const tabs = await driver.getAllWindowHandles()
+      await driver.switchTo().window(tabs[0])
+      await delay(300)
+    })
+
+    it('should match title', async () => {
+      const title = await driver.getTitle()
+      assert.equal(title, 'MetaMask Plugin', 'title matches MetaMask Plugin')
+    })
+
+    it('should show privacy notice', async () => {
+      const privacy = await driver.findElement(By.className(
+        'terms-header'
+      )).getText()
+      assert.equal(privacy, 'PRIVACY NOTICE', 'shows privacy notice')
+      driver.findElement(By.css(
+        'button'
+      )).click()
+    })
+
+    it('should show terms of use', async () => {
+      await delay(300)
+      const terms = await driver.findElement(By.className(
+        'terms-header'
+      )).getText()
+      assert.equal(terms, 'TERMS OF USE', 'shows terms of use')
+    })
+
+    it('should be unable to continue without scolling throught the terms of use', async () => {
+      const button = await driver.findElement(By.css(
+        'button'
+      )).isEnabled()
+      assert.equal(button, false, 'disabled continue button')
+      const element = driver.findElement(By.linkText(
+        'Attributions'
+      ))
+      await driver.executeScript('arguments[0].scrollIntoView(true)', element)
+    })
+
+    it('should be able to continue when scrolled to the bottom of terms of use', async () => {
+      const button = await driver.findElement(By.css('button'))
+      const buttonEnabled = await button.isEnabled()
+      await delay(500)
+      assert.equal(buttonEnabled, true, 'enabled continue button')
+      await button.click()
+    })
+
+    it('should accept password with length of eight', async () => {
+      await delay(300)
+      const passwordBox = await driver.findElement(By.id('password-box'))
+      const passwordBoxConfirm = driver.findElement(By.id('password-box-confirm'))
+      const button = driver.findElement(By.css('button'))
+
+      passwordBox.sendKeys('12345678')
+      passwordBoxConfirm.sendKeys('12345678')
+      await delay(300)
+      await button.click()
+    })
+
+    it('should show value was created and seed phrase', async () => {
+      await delay(700)
+      this.seedPhase = await driver.findElement(By.className('twelve-word-phrase')).getText()
+      const continueAfterSeedPhrase = await driver.findElement(By.css('button'))
+      await continueAfterSeedPhrase.click()
+    })
+
+    it('should show lock account', async () => {
+      await delay(300)
+      await driver.findElement(By.className('sandwich-expando')).click()
+      await delay(500)
+      await driver.findElement(By.xpath('//*[@id="app-content"]/div/div[3]/span/div/li[2]')).click()
+    })
+
+    it('should accept account password after lock', async () => {
+      await delay(500)
+      await driver.findElement(By.id('password-box')).sendKeys('12345678')
+      await driver.findElement(By.css('button')).click()
+      await delay(500)
+    })
+
+    it('should show QR code', async () => {
+      await delay(300)
+      await driver.findElement(By.className('fa-ellipsis-h')).click()
+      await driver.findElement(By.xpath('//*[@id="app-content"]/div/div[4]/div/div/div[1]/flex-column/div[1]/div/span/i/div/div/li[2]')).click()
+      await delay(300)
+    })
+
+    it('should show the account address', async () => {
+      this.accountAddress = await driver.findElement(By.className('ellip-address')).getText()
+      await driver.findElement(By.className('fa-arrow-left')).click()
+      await delay(500)
+    })
+  })
+})