diff options
| -rw-r--r-- | package-lock.json | 168 | ||||
| -rw-r--r-- | package.json | 1 | ||||
| -rw-r--r-- | test/screens/new.spec.js | 122 |
3 files changed, 246 insertions, 45 deletions
diff --git a/package-lock.json b/package-lock.json index f0f76919a..bc16f4780 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6674,6 +6674,12 @@ "which": "1.3.0" } }, + "find-index": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/find-index/-/find-index-0.1.1.tgz", + "integrity": "sha1-Z101iyyjiS15Whq0cjL4tuLg3eQ=", + "dev": true + }, "find-up": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/find-up/-/find-up-1.1.2.tgz", @@ -8232,6 +8238,12 @@ "assert-plus": "1.0.0" } }, + "gifencoder": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/gifencoder/-/gifencoder-1.1.0.tgz", + "integrity": "sha512-MVh++nximxsp8NaNRfS1+MmCviZ4wi7HhuvX8eHrfNn//1mqi8Eb03tKs6Z+lIIcSEySJ6PmS1VPZ+HdtEMlfg==", + "dev": true + }, "gl-mat4": { "version": "1.1.4", "resolved": "https://registry.npmjs.org/gl-mat4/-/gl-mat4-1.1.4.tgz", @@ -8351,6 +8363,15 @@ "object.defaults": "1.1.0" } }, + "glob2base": { + "version": "0.0.12", + "resolved": "https://registry.npmjs.org/glob2base/-/glob2base-0.0.12.tgz", + "integrity": "sha1-nUGbPijxLoOjYhZKJ3BVkiycDVY=", + "dev": true, + "requires": { + "find-index": "0.1.1" + } + }, "global": { "version": "4.3.2", "resolved": "https://registry.npmjs.org/global/-/global-4.3.2.tgz", @@ -10104,6 +10125,12 @@ "integrity": "sha1-rI9DbyI5td+2bV8NOpBKh6xnzF4=", "dev": true }, + "image-size": { + "version": "0.6.2", + "resolved": "https://registry.npmjs.org/image-size/-/image-size-0.6.2.tgz", + "integrity": "sha512-pH3vDzpczdsKHdZ9xxR3O46unSjisgVx0IImay7Zz2EdhRVbCkj+nthx9OuuWEhakx9FAO+fNVGrF0rZ2oMOvw==", + "dev": true + }, "immediate": { "version": "3.2.3", "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.2.3.tgz", @@ -16691,6 +16718,147 @@ "integrity": "sha512-2qHaIQr2VLRFoxe2nASzsV6ef4yOOH+Fi9FBOVH6cqeSgUnoyySPZkxzLuzd+RYOQTRpROA0ztTMqxROKSb/nA==", "dev": true }, + "png-file-stream": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/png-file-stream/-/png-file-stream-1.0.0.tgz", + "integrity": "sha1-4IPQ/lbgl6XL0NNBoThzeQUsrTU=", + "dev": true, + "requires": { + "glob-stream": "3.1.18", + "png-js": "0.1.1", + "through2": "0.2.3" + }, + "dependencies": { + "glob": { + "version": "4.5.3", + "resolved": "https://registry.npmjs.org/glob/-/glob-4.5.3.tgz", + "integrity": "sha1-xstz0yJsHv7wTePFbQEvAzd+4V8=", + "dev": true, + "requires": { + "inflight": "1.0.6", + "inherits": "2.0.3", + "minimatch": "2.0.10", + "once": "1.4.0" + } + }, + "glob-stream": { + "version": "3.1.18", + "resolved": "https://registry.npmjs.org/glob-stream/-/glob-stream-3.1.18.tgz", + "integrity": "sha1-kXCl8St5Awb9/lmPMT+PeVT9FDs=", + "dev": true, + "requires": { + "glob": "4.5.3", + "glob2base": "0.0.12", + "minimatch": "2.0.10", + "ordered-read-streams": "0.1.0", + "through2": "0.6.5", + "unique-stream": "1.0.0" + }, + "dependencies": { + "through2": { + "version": "0.6.5", + "resolved": "https://registry.npmjs.org/through2/-/through2-0.6.5.tgz", + "integrity": "sha1-QaucZ7KdVyCQcUEOHXp6lozTrUg=", + "dev": true, + "requires": { + "readable-stream": "1.0.34", + "xtend": "4.0.1" + } + } + } + }, + "isarray": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz", + "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=", + "dev": true + }, + "minimatch": { + "version": "2.0.10", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-2.0.10.tgz", + "integrity": "sha1-jQh8OcazjAAbl/ynzm0OHoCvusc=", + "dev": true, + "requires": { + "brace-expansion": "1.1.8" + } + }, + "object-keys": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-0.4.0.tgz", + "integrity": "sha1-KKaq50KN0sOpLz2V8hM13SBOAzY=", + "dev": true + }, + "ordered-read-streams": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/ordered-read-streams/-/ordered-read-streams-0.1.0.tgz", + "integrity": "sha1-/VZamvjrRHO6abbtijQ1LLVS8SY=", + "dev": true + }, + "readable-stream": { + "version": "1.0.34", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz", + "integrity": "sha1-Elgg40vIQtLyqq+v5MKRbuMsFXw=", + "dev": true, + "requires": { + "core-util-is": "1.0.2", + "inherits": "2.0.3", + "isarray": "0.0.1", + "string_decoder": "0.10.31" + } + }, + "string_decoder": { + "version": "0.10.31", + "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz", + "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=", + "dev": true + }, + "through2": { + "version": "0.2.3", + "resolved": "https://registry.npmjs.org/through2/-/through2-0.2.3.tgz", + "integrity": "sha1-6zKE2k6jEbbMis42U3SKUqvyWj8=", + "dev": true, + "requires": { + "readable-stream": "1.1.14", + "xtend": "2.1.2" + }, + "dependencies": { + "readable-stream": { + "version": "1.1.14", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.14.tgz", + "integrity": "sha1-fPTFTvZI44EwhMY23SB54WbAgdk=", + "dev": true, + "requires": { + "core-util-is": "1.0.2", + "inherits": "2.0.3", + "isarray": "0.0.1", + "string_decoder": "0.10.31" + } + }, + "xtend": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/xtend/-/xtend-2.1.2.tgz", + "integrity": "sha1-bv7MKk2tjmlixJAbM3znuoe10os=", + "dev": true, + "requires": { + "object-keys": "0.4.0" + } + } + } + }, + "unique-stream": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/unique-stream/-/unique-stream-1.0.0.tgz", + "integrity": "sha1-1ZpKdUJ0R9mqbJHnAmP40mpLEEs=", + "dev": true + } + } + }, + "png-js": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/png-js/-/png-js-0.1.1.tgz", + "integrity": "sha1-HMfCEjA6yr50Jj7DrHgAlYAkLZM=", + "dev": true + }, "pojo-migrator": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/pojo-migrator/-/pojo-migrator-2.1.0.tgz", diff --git a/package.json b/package.json index 16c2d735d..5b24a0fd6 100644 --- a/package.json +++ b/package.json @@ -263,6 +263,7 @@ "react-test-renderer": "^15.6.2", "react-testutils-additions": "^15.2.0", "redux-test-utils": "^0.2.2", + "rimraf": "^2.6.2", "selenium-webdriver": "^3.5.0", "sinon": "^5.0.0", "stylelint-config-standard": "^18.2.0", diff --git a/test/screens/new.spec.js b/test/screens/new.spec.js index c5a8ef859..f17781d7a 100644 --- a/test/screens/new.spec.js +++ b/test/screens/new.spec.js @@ -2,6 +2,7 @@ const path = require('path') const fs = require('fs') const pify = require('pify') const mkdirp = require('mkdirp') +const rimraf = require('rimraf') const webdriver = require('selenium-webdriver') const endOfStream = require('end-of-stream') const GIFEncoder = require('gifencoder') @@ -15,84 +16,111 @@ captureAllScreens().catch(console.error) async function captureAllScreens() { let screenshotCount = 0 + // common names + let button + let tabs + let element + + await cleanScreenShotDir() + // setup selenium and install extension const extPath = path.resolve('dist/chrome') const driver = buildWebDriver(extPath) await driver.get('chrome://extensions-frame') const elems = await driver.findElements(By.css('.extension-list-item-wrapper')) const extensionId = await elems[1].getAttribute('id') - await driver.get(`chrome-extension://${extensionId}/popup.html`) + await driver.get(`chrome-extension://${extensionId}/home.html`) await delay(500) - const tabs = await driver.getAllWindowHandles() + tabs = await driver.getAllWindowHandles() await driver.switchTo().window(tabs[0]) await delay(300) - // common names - let button - await captureScreenShot('start-old') // click try new ui await driver.findElement(By.css('#app-content > div > div.app-primary.from-right > div > div.flex-row.flex-center.flex-grow > p')).click() - await captureScreenShot('start-new') - await delay(300) - await captureScreenShot('start-new2') await delay(300) - await captureScreenShot('start-new3') + + // close metamask homepage and extra home.html + tabs = await driver.getAllWindowHandles() + await driver.switchTo().window(tabs[2]) + driver.close() + await driver.switchTo().window(tabs[1]) + driver.close() + await driver.switchTo().window(tabs[0]) await delay(300) - await captureScreenShot('start-new4') + await captureScreenShot('welcome-new-ui') + + // setup account + await delay(1000) + await driver.findElement(By.css('body')).click() await delay(300) - await captureScreenShot('start-new5') + await captureScreenShot('welcome') - // exit early for dev - await generateGif() - await driver.quit() - return + await driver.findElement(By.css('button')).click() + await captureScreenShot('create password') + + const passwordBox = await driver.findElement(By.css('input[type=password]:nth-of-type(1)')) + const passwordBoxConfirm = await driver.findElement(By.css('input[type=password]:nth-of-type(2)')) + passwordBox.sendKeys('123456789') + passwordBoxConfirm.sendKeys('123456789') + await delay(500) + await captureScreenShot('choose-password-filled') + await driver.findElement(By.css('button')).click() + await delay(500) + await captureScreenShot('unique account image') - await captureScreenShot('privacy') + await driver.findElement(By.css('button')).click() + await delay(500) + await captureScreenShot('privacy note') - const privacy = await driver.findElement(By.css('.terms-header')).getText() - driver.findElement(By.css('button')).click() + await driver.findElement(By.css('button')).click() await delay(300) await captureScreenShot('terms') await delay(300) - const terms = await driver.findElement(By.css('.terms-header')).getText() - await delay(300) - const element = driver.findElement(By.linkText('Attributions')) + element = driver.findElement(By.linkText('Attributions')) await driver.executeScript('arguments[0].scrollIntoView(true)', element) await delay(300) - button = await driver.findElement(By.css('button')) - const buttonEnabled = await button.isEnabled() - await delay(500) await captureScreenShot('terms-scrolled') - await button.click() + await driver.findElement(By.css('button')).click() await delay(300) - await captureScreenShot('choose-password') + await captureScreenShot('secret backup phrase') - const passwordBox = await driver.findElement(By.id('password-box')) - const passwordBoxConfirm = await driver.findElement(By.id('password-box-confirm')) - button = driver.findElement(By.css('button')) - passwordBox.sendKeys('123456789') - passwordBoxConfirm.sendKeys('123456789') - await delay(500) - await captureScreenShot('choose-password-filled') + await driver.findElement(By.css('button')).click() + await delay(300) + await captureScreenShot('secret backup phrase') - await button.click() - await delay(700) - this.seedPhase = await driver.findElement(By.css('.twelve-word-phrase')).getText() - await captureScreenShot('seed phrase') + await driver.findElement(By.css('.backup-phrase__reveal-button')).click() + await delay(300) + await captureScreenShot('secret backup phrase - reveal') - const continueAfterSeedPhrase = await driver.findElement(By.css('button')) - await continueAfterSeedPhrase.click() + await driver.findElement(By.css('button')).click() await delay(300) - await captureScreenShot('main screen') + await captureScreenShot('confirm secret backup phrase') - await driver.findElement(By.css('.sandwich-expando')).click() - await delay(500) - await captureScreenShot('menu') + // finish up + console.log('building gif...') + await generateGif() + await driver.quit() + return + + // + // await button.click() + // await delay(700) + // this.seedPhase = await driver.findElement(By.css('.twelve-word-phrase')).getText() + // await captureScreenShot('seed phrase') + // + // const continueAfterSeedPhrase = await driver.findElement(By.css('button')) + // await continueAfterSeedPhrase.click() + // await delay(300) + // await captureScreenShot('main screen') + // + // await driver.findElement(By.css('.sandwich-expando')).click() + // await delay(500) + // await captureScreenShot('menu') // await driver.findElement(By.css('#app-content > div > div:nth-child(3) > span > div > li:nth-child(3)')).click() // await captureScreenShot('main screen') @@ -119,8 +147,12 @@ async function captureAllScreens() { // cleanup await driver.quit() + async function cleanScreenShotDir() { + await pify(rimraf)(`./test-artifacts/screens/`) + } + async function captureScreenShot(label) { - const shotIndex = screenshotCount + const shotIndex = screenshotCount.toString().padStart(4, '0') screenshotCount++ const artifactDir = `./test-artifacts/screens/` await pify(mkdirp)(artifactDir) @@ -138,7 +170,7 @@ async function captureAllScreens() { // read all pngs into gif const encoder = new GIFEncoder(size.width, size.height) const stream = pngFileStream('./test-artifacts/screens/*.png') - .pipe(encoder.createWriteStream({ repeat: -1, delay: 500, quality: 10 })) + .pipe(encoder.createWriteStream({ repeat: -1, delay: 1000, quality: 10 })) .pipe(fs.createWriteStream('./test-artifacts/screens/walkthrough.gif')) // wait for end |