Add Integration Tests

mascara/src/app/first-time/unique-image-screen.js

@@ -1,19 +1,19 @@
 import React, {Component, PropTypes} from 'react'
-import {connect} from 'react-redux';
+import {connect} from 'react-redux'
 import Identicon from '../../../../ui/app/components/identicon'
 import Breadcrumbs from './breadcrumbs'
 
 class UniqueImageScreen extends Component {
   static propTypes = {
     address: PropTypes.string,
-    next: PropTypes.func.isRequired
+    next: PropTypes.func.isRequired,
   }
 
-  render() {
+  render () {
     return (
       <div className="unique-image">
         <Identicon address={this.props.address} diameter={70} />
-        <div className="unique-image__title">You unique account image</div>
+        <div className="unique-image__title">Your unique account image</div>
         <div className="unique-image__body-text">
           This image was programmatically generated for you by your new account number.
         </div>
@@ -34,6 +34,6 @@ class UniqueImageScreen extends Component {
 
 export default connect(
   ({ metamask: { selectedAddress } }) => ({
-    address: selectedAddress
+    address: selectedAddress,
   })
 )(UniqueImageScreen)

package.json

@@ -134,6 +134,7 @@
     "react-select": "^1.0.0-rc.2",
     "react-simple-file-input": "^2.0.0",
     "react-tooltip-component": "^0.3.0",
+    "react-trigger-change": "^1.0.2",
     "readable-stream": "^2.3.3",
     "recompose": "^0.25.0",
     "redux": "^3.0.5",

test/integration/lib/mascara-first-time.js

@@ -1,6 +1,5 @@
 const PASSWORD = 'password123'
-
-window.testUtils = require('react-dom/test-utils')
+const reactTriggerChange = require('react-trigger-change')
 
 async function runFirstTimeUsageTest (assert, done) {
   await timeout(4000)
@@ -36,20 +35,20 @@ async function runFirstTimeUsageTest (assert, done) {
   const confBox = app.find('.first-time-flow__input')[1]
   pwBox.value = PASSWORD
   confBox.value = PASSWORD
-  $(pwBox).change()
-  $(confBox).change()
+  reactTriggerChange(pwBox)
+  reactTriggerChange(confBox)
 
 
   await timeout()
 
-  // create vault
+  // Create Password
   const createButton = app.find('button.first-time-flow__button')[0]
   createButton.click()
 
   await timeout(3000)
 
-  const created = app.find('h3')[0]
-  assert.equal(created.textContent, 'Vault Created', 'Vault created screen')
+  const created = app.find('.unique-image__title')[0]
+  assert.equal(created.textContent, 'Your unique account image', 'unique image screen')
 
   // Agree button
   const button = app.find('button')[0]
@@ -58,8 +57,50 @@ async function runFirstTimeUsageTest (assert, done) {
 
   await timeout(1000)
 
-  const detail = app.find('.account-detail-section')[0]
-  assert.ok(detail, 'Account detail section loaded.')
+  // Privacy Screen
+  const detail = app.find('.tou__title')[0]
+  assert.equal(detail.textContent, 'Privacy Notice', 'privacy notice screen')
+  app.find('button').click()
+
+  await timeout(1000)
+
+
+  // terms of service screen
+  const tou = app.find('.tou__title')[0]
+  assert.equal(tou.textContent, 'Terms of Use', 'terms of use screen')
+  app.find('.tou__body').scrollTop(100000)
+  await timeout(1000)
+
+  app.find('.first-time-flow__button').click()
+  await timeout(1000)
+
+  // secret backup phrase
+  const seedTitle = app.find('.backup-phrase__title')[0]
+  assert.equal(seedTitle.textContent, 'Secret Backup Phrase', 'seed phrase screen')
+  app.find('.backup-phrase__reveal-button').click()
+
+  await timeout(1000)
+  const seedPhrase = app.find('.backup-phrase__secret-words').text().split(' ')
+  app.find('.first-time-flow__button').click()
+
+  const selectPhrase = text => {
+    const option = $('.backup-phrase__confirm-seed-option')
+      .filter((i, d) => d.textContent === text)[0]
+
+    $(option).click()
+  }
+
+  await timeout(1000)
+
+  seedPhrase.forEach(sp => selectPhrase(sp))
+  app.find('.first-time-flow__button').click()
+  await timeout(1000)
+
+  // Deposit Ether Screen
+  const buyEthTitle = app.find('.buy-ether__title')[0]
+  assert.equal(buyEthTitle.textContent, 'Deposit Ether', 'deposit ether screen')
+  app.find('.buy-ether__do-it-later').click()
+  await timeout(1000)
 
   const sandwich = app.find('.sandwich-expando')[0]
   sandwich.click()

yarn.lock

@@ -375,7 +375,7 @@ async-eventemitter@^0.2.2:
   dependencies:
     async "^2.4.0"
 
-"async-eventemitter@github:ahultgren/async-eventemitter#fa06e39e56786ba541c180061dbf2c0a5bbf951c":
+async-eventemitter@ahultgren/async-eventemitter#fa06e39e56786ba541c180061dbf2c0a5bbf951c:
   version "0.2.3"
   resolved "https://codeload.github.com/ahultgren/async-eventemitter/tar.gz/fa06e39e56786ba541c180061dbf2c0a5bbf951c"
   dependencies:
@@ -7458,6 +7458,10 @@ react-transition-group@^1.2.0:
     prop-types "^15.5.6"
     warning "^3.0.0"
 
+react-trigger-change@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/react-trigger-change/-/react-trigger-change-1.0.2.tgz#af573398ecef2475362b84f8c08c07fea23914c3"
+
 "react@>= 0.12.0 < 16.0.0", react@^15.0.2:
   version "15.6.1"
   resolved "https://registry.yarnpkg.com/react/-/react-15.6.1.tgz#baa8434ec6780bde997cdc380b79cd33b96393df"