diff --git a/.circleci/config.yml b/.circleci/config.yml index 3aac53171..22d14476b 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -20,14 +20,6 @@ workflows: - test-deps: requires: - prep-deps-npm - - test-e2e-chrome: - requires: - - prep-deps-npm - - prep-build - - test-e2e-firefox: - requires: - - prep-deps-npm - - prep-build - test-e2e-beta-chrome: requires: - prep-deps-npm @@ -47,14 +39,6 @@ workflows: requires: - prep-deps-npm - prep-build - # - test-integration-mascara-chrome: - # requires: - # - prep-deps-npm - # - prep-scss - # - test-integration-mascara-firefox: - # requires: - # - prep-deps-npm - # - prep-scss - test-integration-flat-chrome: requires: - prep-deps-npm @@ -68,13 +52,9 @@ workflows: - test-lint - test-unit - test-mozilla-lint - - test-e2e-chrome - - test-e2e-firefox - test-e2e-beta-chrome - test-e2e-beta-firefox - test-e2e-beta-drizzle - # - test-integration-mascara-chrome - # - test-integration-mascara-firefox - test-integration-flat-chrome - test-integration-flat-firefox - job-screens: @@ -196,37 +176,6 @@ jobs: name: Test command: npx nsp check - test-e2e-chrome: - docker: - - image: circleci/node:8.11.3-browsers - steps: - - checkout - - attach_workspace: - at: . - - run: - name: test:e2e:chrome - command: npm run test:e2e:chrome - - store_artifacts: - path: test-artifacts - destination: test-artifacts - - test-e2e-firefox: - docker: - - image: circleci/node:8.11.3-browsers - steps: - - checkout - - run: - name: Install Firefox - command: ./.circleci/scripts/firefox-install - - attach_workspace: - at: . - - run: - name: test:e2e:firefox - command: npm run test:e2e:firefox - - store_artifacts: - path: test-artifacts - destination: test-artifacts - test-e2e-beta-drizzle: docker: - image: circleci/node:8.11.3-browsers @@ -293,9 +242,6 @@ jobs: - checkout - attach_workspace: at: . - # - store_artifacts: - # path: dist/mascara - # destination: builds/mascara - store_artifacts: path: dist/sourcemaps destination: builds/sourcemaps diff --git a/.eslintignore b/.eslintignore index 70f23dafd..0e50a2721 100644 --- a/.eslintignore +++ b/.eslintignore @@ -19,5 +19,3 @@ mascara/test/jquery-3.1.0.min.js test/integration/bundle.js test/integration/jquery-3.1.0.min.js test/integration/helpers.js -test/integration/lib/first-time.js - diff --git a/app/_locales/cs/messages.json b/app/_locales/cs/messages.json index fde553c9e..cac436b1b 100644 --- a/app/_locales/cs/messages.json +++ b/app/_locales/cs/messages.json @@ -942,8 +942,8 @@ "warning": { "message": "Varování" }, - "welcomeBeta": { - "message": "Vítejte v MetaMask Beta" + "welcome": { + "message": "Vítejte v MetaMask" }, "whatsThis": { "message": "Co to je?" diff --git a/app/_locales/de/messages.json b/app/_locales/de/messages.json index 9404a9824..71421a4d1 100644 --- a/app/_locales/de/messages.json +++ b/app/_locales/de/messages.json @@ -918,8 +918,8 @@ "warning": { "message": "Warnung" }, - "welcomeBeta": { - "message": "Willkommen zu MetaMask Beta" + "welcome": { + "message": "Willkommen zu MetaMask" }, "whatsThis": { "message": "Was ist das?" diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index 7a70937a3..14810782a 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -1357,8 +1357,8 @@ "welcomeBack": { "message": "Welcome Back!" }, - "welcomeBeta": { - "message": "Welcome to MetaMask Beta" + "welcome": { + "message": "Welcome to MetaMask" }, "whatsThis": { "message": "What's this?" diff --git a/app/_locales/es/messages.json b/app/_locales/es/messages.json index 55276e1ec..3043e2ac0 100644 --- a/app/_locales/es/messages.json +++ b/app/_locales/es/messages.json @@ -918,8 +918,8 @@ "warning": { "message": "Advertencia" }, - "welcomeBeta": { - "message": "Bienvenido a MetaMask Beta" + "welcome": { + "message": "Bienvenido a MetaMask" }, "whatsThis": { "message": "¿Qué es esto?" diff --git a/app/_locales/fr/messages.json b/app/_locales/fr/messages.json index 17306d0f2..3e89afcc9 100644 --- a/app/_locales/fr/messages.json +++ b/app/_locales/fr/messages.json @@ -1303,7 +1303,7 @@ "welcomeBack": { "message": "Bienvenue à nouveau !" }, - "welcomeBeta": { + "welcome": { "message": "Bienvenue dans la Beta de MetaMask" }, "whatsThis": { diff --git a/app/_locales/hn/messages.json b/app/_locales/hn/messages.json index 8e2281418..d9e74800c 100644 --- a/app/_locales/hn/messages.json +++ b/app/_locales/hn/messages.json @@ -849,7 +849,7 @@ "warning": { "message": "चेतावनी" }, - "welcomeBeta": { + "welcome": { "message": "मेटामास्क बीटा में आपका स्वागत है" }, "whatsThis": { diff --git a/app/_locales/ht/messages.json b/app/_locales/ht/messages.json index ff44af903..30ed2621f 100644 --- a/app/_locales/ht/messages.json +++ b/app/_locales/ht/messages.json @@ -1327,8 +1327,8 @@ "welcomeBack": { "message": "Bon Retou!" }, - "welcomeBeta": { - "message": "Byenveni nan MetaMask Beta" + "welcome": { + "message": "Byenveni nan MetaMask" }, "whatsThis": { "message": "Kisa sa ye?" diff --git a/app/_locales/it/messages.json b/app/_locales/it/messages.json index e97c28e42..70630f237 100644 --- a/app/_locales/it/messages.json +++ b/app/_locales/it/messages.json @@ -1309,7 +1309,7 @@ "welcomeBack": { "message": "Bentornato!" }, - "welcomeBeta": { + "welcome": { "message": "Benvenuto nella Beta di MetaMask" }, "whatsThis": { diff --git a/app/_locales/ja/messages.json b/app/_locales/ja/messages.json index 8ae363030..93b5447d7 100644 --- a/app/_locales/ja/messages.json +++ b/app/_locales/ja/messages.json @@ -793,7 +793,7 @@ "welcomeBack": { "message": "おかえりなさい!" }, - "welcomeBeta": { + "welcome": { "message": "MetaMask ベータ版へようこそ!" }, "whatsThis": { diff --git a/app/_locales/ko/messages.json b/app/_locales/ko/messages.json index af1c32615..cadb0da06 100644 --- a/app/_locales/ko/messages.json +++ b/app/_locales/ko/messages.json @@ -1273,7 +1273,7 @@ "welcomeBack": { "message": "환영합니다!" }, - "welcomeBeta": { + "welcome": { "message": "메타마스크 Beta에 오신 것을 환영합니다" }, "whatsThis": { diff --git a/app/_locales/nl/messages.json b/app/_locales/nl/messages.json index 5d9f1f3ab..3a041327b 100644 --- a/app/_locales/nl/messages.json +++ b/app/_locales/nl/messages.json @@ -849,8 +849,8 @@ "warning": { "message": "Waarschuwing" }, - "welcomeBeta": { - "message": "Welkom bij MetaMask Beta" + "welcome": { + "message": "Welkom bij MetaMask" }, "whatsThis": { "message": "Wat is dit?" diff --git a/app/_locales/pl/messages.json b/app/_locales/pl/messages.json index c6d797c34..ddd4131bb 100644 --- a/app/_locales/pl/messages.json +++ b/app/_locales/pl/messages.json @@ -1192,8 +1192,8 @@ "welcomeBack": { "message": "Witaj z powrotem!" }, - "welcomeBeta": { - "message": "Witaj w MetaMask Beta" + "welcome": { + "message": "Witaj w MetaMask" }, "whatsThis": { "message": "Co to jest?" @@ -1210,4 +1210,4 @@ "yourPrivateSeedPhrase": { "message": "Twoja prywatna fraza seed" } -} \ No newline at end of file +} diff --git a/app/_locales/pt/messages.json b/app/_locales/pt/messages.json index 8e07aaef5..4e3465936 100644 --- a/app/_locales/pt/messages.json +++ b/app/_locales/pt/messages.json @@ -849,8 +849,8 @@ "warning": { "message": "Aviso" }, - "welcomeBeta": { - "message": "Bem-vindo ao MetaMask Beta" + "welcome": { + "message": "Bem-vindo ao MetaMask" }, "whatsThis": { "message": "O que é isto?" diff --git a/app/_locales/ru/messages.json b/app/_locales/ru/messages.json index 917b2b615..8788d9d92 100644 --- a/app/_locales/ru/messages.json +++ b/app/_locales/ru/messages.json @@ -927,8 +927,8 @@ "warning": { "message": "Предупреждение" }, - "welcomeBeta": { - "message": "Добро пожаловать в MetaMask Beta" + "welcome": { + "message": "Добро пожаловать в MetaMask" }, "whatsThis": { "message": "Что это?" diff --git a/app/_locales/sl/messages.json b/app/_locales/sl/messages.json index ee9f67b97..7b8c7debd 100644 --- a/app/_locales/sl/messages.json +++ b/app/_locales/sl/messages.json @@ -1348,8 +1348,8 @@ "welcomeBack": { "message": "Dobrodošli nazaj!" }, - "welcomeBeta": { - "message": "Dobrodošli v MetaMask Beta" + "welcome": { + "message": "Dobrodošli v MetaMask" }, "whatsThis": { "message": "Kaj je to?" diff --git a/app/_locales/th/messages.json b/app/_locales/th/messages.json index 7fabe4eac..9fb2d6fb0 100644 --- a/app/_locales/th/messages.json +++ b/app/_locales/th/messages.json @@ -849,7 +849,7 @@ "warning": { "message": "คำเตือน" }, - "welcomeBeta": { + "welcome": { "message": "ยินดีต้อนรับสู่ MetaMask เบต้า" }, "whatsThis": { diff --git a/app/_locales/tml/messages.json b/app/_locales/tml/messages.json index 0643ce205..022754da5 100644 --- a/app/_locales/tml/messages.json +++ b/app/_locales/tml/messages.json @@ -942,7 +942,7 @@ "warning": { "message": "எச்சரிக்கை" }, - "welcomeBeta": { + "welcome": { "message": "மெட்டாமாஸ்க் பீட்டாவுக்கு வருக" }, "whatsThis": { diff --git a/app/_locales/tr/messages.json b/app/_locales/tr/messages.json index 1bb149eaa..66d5303d4 100644 --- a/app/_locales/tr/messages.json +++ b/app/_locales/tr/messages.json @@ -942,8 +942,8 @@ "warning": { "message": "Uyarı" }, - "welcomeBeta": { - "message": "MetaMask Beta'ya Hoşgeldiniz" + "welcome": { + "message": "MetaMask'ya Hoşgeldiniz" }, "whatsThis": { "message": "Bu nedir?" diff --git a/app/_locales/zh_CN/messages.json b/app/_locales/zh_CN/messages.json index 911ddf476..e253aeb88 100644 --- a/app/_locales/zh_CN/messages.json +++ b/app/_locales/zh_CN/messages.json @@ -978,7 +978,7 @@ "warning": { "message": "警告" }, - "welcomeBeta": { + "welcome": { "message": "欢迎使用 MetaMask 测试版" }, "whatsThis": { diff --git a/app/_locales/zh_TW/messages.json b/app/_locales/zh_TW/messages.json index 3b048fd91..de79f935f 100644 --- a/app/_locales/zh_TW/messages.json +++ b/app/_locales/zh_TW/messages.json @@ -933,8 +933,8 @@ "warning": { "message": "警告" }, - "welcomeBeta": { - "message": "歡迎到 MetaMask Beta" + "welcome": { + "message": "歡迎到 MetaMask" }, "whatsThis": { "message": "這是什麼？" diff --git a/app/images/logo/metamask-logo-horizontal-beta.svg b/app/images/logo/metamask-logo-horizontal-beta.svg deleted file mode 100644 index b1fa040ac..000000000 --- a/app/images/logo/metamask-logo-horizontal-beta.svg +++ /dev/null @@ -1,115 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/app/images/logo/metamask-logo-horizontal.svg b/app/images/logo/metamask-logo-horizontal.svg new file mode 100644 index 000000000..8e0bdb938 --- /dev/null +++ b/app/images/logo/metamask-logo-horizontal.svg @@ -0,0 +1,62 @@ + + + + metamask-logo-horizontal-beta + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/app/scripts/controllers/preferences.js b/app/scripts/controllers/preferences.js index ffb593b09..b21cdfb36 100644 --- a/app/scripts/controllers/preferences.js +++ b/app/scripts/controllers/preferences.js @@ -32,7 +32,10 @@ class PreferencesController { tokens: [], suggestedTokens: {}, useBlockie: false, - featureFlags: {}, + featureFlags: { + betaUI: true, + skipAnnounceBetaUI: true, + }, currentLocale: opts.initLangCode, identities: {}, lostIdentities: {}, diff --git a/app/scripts/ui.js b/app/scripts/ui.js index 444097f14..682a4aaac 100644 --- a/app/scripts/ui.js +++ b/app/scripts/ui.js @@ -1,6 +1,7 @@ const injectCss = require('inject-css') const OldMetaMaskUiCss = require('../../old-ui/css') const NewMetaMaskUiCss = require('../../ui/css') +const {getShouldUseNewUi} = require('../../ui/app/selectors') const startPopup = require('./popup-core') const PortStream = require('extension-port-stream') const { getEnvironmentType } = require('./lib/util') @@ -33,10 +34,6 @@ async function start () { return state } - // inject css - // const css = MetaMaskUiCss() - // injectCss(css) - // identify window type (popup, notification) const windowType = getEnvironmentType(window.location.href) global.METAMASK_UI_TYPE = windowType @@ -51,15 +48,9 @@ async function start () { startPopup({ container, connectionStream }, (err, store) => { if (err) return displayCriticalError(err) - // Code commented out until we begin auto adding users to NewUI - // const { isMascara, identities = {}, featureFlags = {} } = store.getState().metamask - // const firstTime = Object.keys(identities).length === 0 - const { isMascara, featureFlags = {} } = store.getState().metamask - let betaUIState = featureFlags.betaUI - - // Code commented out until we begin auto adding users to NewUI - // const useBetaCss = isMascara || firstTime || betaUIState - const useBetaCss = isMascara || betaUIState + const state = store.getState() + let betaUIState = Boolean(state.featureFlags && state.featureFlags.betaUI) + const useBetaCss = getShouldUseNewUi(state) let css = useBetaCss ? NewMetaMaskUiCss() : OldMetaMaskUiCss() let deleteInjectedCss = injectCss(css) diff --git a/development/genStates.js b/development/genStates.js index 0ac1059be..15e0863e8 100644 --- a/development/genStates.js +++ b/development/genStates.js @@ -2,7 +2,7 @@ const fs = require('fs') const path = require('path') const promisify = require('pify') const enLocaleMessages = require('../app/_locales/en/messages.json') - +const writeFile = promisify(fs.writeFile) start().catch(console.error) @@ -12,8 +12,7 @@ async function start () { const states = {} await Promise.all(stateFilesNames.map(async (stateFileName) => { const stateFilePath = path.join(__dirname, 'states', stateFileName) - const stateFileContent = await promisify(fs.readFile)(stateFilePath, 'utf8') - const state = JSON.parse(stateFileContent) + const state = require(stateFilePath) state.localeMessages = { en: enLocaleMessages, current: {} } @@ -22,5 +21,5 @@ async function start () { })) const generatedFileContent = `module.exports = ${JSON.stringify(states)}` const generatedFilePath = path.join(__dirname, 'states.js') - await promisify(fs.writeFile)(generatedFilePath, generatedFileContent) + await writeFile(generatedFilePath, generatedFileContent) } diff --git a/development/mock-dev.js b/development/mock-dev.js index 15f6ad4bf..1af10a131 100644 --- a/development/mock-dev.js +++ b/development/mock-dev.js @@ -42,7 +42,7 @@ if (routerPath) { queryString = qs.parse(routerPath.split('?')[1]) } -selectedView = queryString.view || 'first time' +selectedView = queryString.view || 'send new ui' const firstState = states[selectedView] updateQueryParams(selectedView) diff --git a/old-ui/app/components/app-bar.js b/old-ui/app/components/app-bar.js index fa8e499ed..c0da36615 100644 --- a/old-ui/app/components/app-bar.js +++ b/old-ui/app/components/app-bar.js @@ -422,7 +422,7 @@ module.exports = class AppBar extends Component { onClick: () => { dispatch(actions.setFeatureFlag('betaUI', true, 'BETA_UI_NOTIFICATION_MODAL')) }, - }, 'Try Beta!'), + }, 'Try New UI!'), ]) } diff --git a/test/e2e/beta/drizzle.spec.js b/test/e2e/beta/drizzle.spec.js index a9d72a9ba..e669dabcc 100644 --- a/test/e2e/beta/drizzle.spec.js +++ b/test/e2e/beta/drizzle.spec.js @@ -81,22 +81,6 @@ describe('MetaMask', function () { }) it('selects the new UI option', async () => { - try { - const overlay = await findElement(driver, By.css('.full-flex-height')) - await driver.wait(until.stalenessOf(overlay)) - } catch (e) {} - - let button - try { - button = await findElement(driver, By.xpath("//button[contains(text(), 'Try it now')]")) - } catch (e) { - await loadExtension(driver, extensionId) - await delay(largeDelayMs) - button = await findElement(driver, By.xpath("//button[contains(text(), 'Try it now')]")) - } - await button.click() - await delay(regularDelayMs) - // Close all other tabs const [tab0, tab1, tab2] = await driver.getAllWindowHandles() await driver.switchTo().window(tab0) diff --git a/test/e2e/beta/from-import-beta-ui.spec.js b/test/e2e/beta/from-import-beta-ui.spec.js index 77a61a73e..4273e7e39 100644 --- a/test/e2e/beta/from-import-beta-ui.spec.js +++ b/test/e2e/beta/from-import-beta-ui.spec.js @@ -12,11 +12,9 @@ const { } = require('../func') const { checkBrowserForConsoleErrors, - closeAllWindowHandlesExcept, verboseReportOnFailure, findElement, findElements, - loadExtension, } = require('./helpers') @@ -27,7 +25,6 @@ describe('Using MetaMask with an existing account', function () { const testSeedPhrase = 'phrase upgrade clock rough situate wedding elder clever doctor stamp excess tent' const testAddress = '0xE18035BF8712672935FDB4e5e431b1a0183d2DFC' const testPrivateKey2 = '14abe6f4aab7f9f626fe981c864d0adeb5685f289ac9270c27b8fd790b4235d6' - const tinyDelayMs = 500 const regularDelayMs = 1000 const largeDelayMs = regularDelayMs * 2 @@ -40,7 +37,7 @@ describe('Using MetaMask with an existing account', function () { const extensionPath = path.resolve('dist/chrome') driver = buildChromeWebDriver(extensionPath) extensionId = await getExtensionIdChrome(driver) - await driver.get(`chrome-extension://${extensionId}/popup.html`) + await driver.get(`chrome-extension://${extensionId}/home.html`) await delay(regularDelayMs) break } @@ -50,7 +47,7 @@ describe('Using MetaMask with an existing account', function () { await installWebExt(driver, extensionPath) await delay(regularDelayMs) extensionId = await getExtensionIdFirefox(driver) - await driver.get(`moz-extension://${extensionId}/popup.html`) + await driver.get(`moz-extension://${extensionId}/home.html`) await delay(regularDelayMs) break } @@ -75,69 +72,13 @@ describe('Using MetaMask with an existing account', function () { await driver.quit() }) - describe('New UI setup', async function () { - it('switches to first tab', async function () { - await delay(tinyDelayMs) - const [firstTab] = await driver.getAllWindowHandles() - await driver.switchTo().window(firstTab) - await delay(regularDelayMs) - }) - - it('selects the new UI option', async () => { - try { - const overlay = await findElement(driver, By.css('.full-flex-height')) - await driver.wait(until.stalenessOf(overlay)) - } catch (e) {} - - let button - try { - button = await findElement(driver, By.xpath("//button[contains(text(), 'Try it now')]")) - } catch (e) { - await loadExtension(driver, extensionId) - await delay(largeDelayMs) - button = await findElement(driver, By.xpath("//button[contains(text(), 'Try it now')]")) - } - await button.click() - await delay(regularDelayMs) - - // Close all other tabs - const [tab0, tab1, tab2] = await driver.getAllWindowHandles() - await driver.switchTo().window(tab0) - await delay(tinyDelayMs) - - let selectedUrl = await driver.getCurrentUrl() - await delay(tinyDelayMs) - if (tab0 && selectedUrl.match(/popup.html/)) { - await closeAllWindowHandlesExcept(driver, tab0) - } else if (tab1) { - await driver.switchTo().window(tab1) - selectedUrl = await driver.getCurrentUrl() - await delay(tinyDelayMs) - if (selectedUrl.match(/popup.html/)) { - await closeAllWindowHandlesExcept(driver, tab1) - } else if (tab2) { - await driver.switchTo().window(tab2) - selectedUrl = await driver.getCurrentUrl() - selectedUrl.match(/popup.html/) && await closeAllWindowHandlesExcept(driver, tab2) - } - } else { - throw new Error('popup.html not found') - } - await delay(regularDelayMs) - const [appTab] = await driver.getAllWindowHandles() - await driver.switchTo().window(appTab) - await delay(tinyDelayMs) - - await loadExtension(driver, extensionId) - await delay(regularDelayMs) - - const continueBtn = await findElement(driver, By.css('.welcome-screen__button')) - await continueBtn.click() - await delay(regularDelayMs) - }) - }) - describe('First time flow starting from an existing seed phrase', () => { + it('clicks the continue button on the welcome screen', async () => { + const welcomeScreenBtn = await findElement(driver, By.css('.welcome-screen__button')) + welcomeScreenBtn.click() + await delay(largeDelayMs) + }) + it('imports a seed phrase', async () => { const [seedPhrase] = await findElements(driver, By.xpath(`//a[contains(text(), 'Import with seed phrase')]`)) await seedPhrase.click() diff --git a/test/e2e/beta/helpers.js b/test/e2e/beta/helpers.js index 08416857e..5e3f45b2b 100644 --- a/test/e2e/beta/helpers.js +++ b/test/e2e/beta/helpers.js @@ -85,11 +85,22 @@ async function openNewPage (driver, url) { await delay(1000) } -async function waitUntilXWindowHandles (driver, x) { - const windowHandles = await driver.getAllWindowHandles() - if (windowHandles.length === x) return - await delay(1000) - return await waitUntilXWindowHandles(driver, x) +async function waitUntilXWindowHandles (driver, x, delayStep = 1000, timeout = 5000) { + let timeElapsed = 0 + async function _pollWindowHandles () { + const windowHandles = await driver.getAllWindowHandles() + if (windowHandles.length === x) { + return + } + await delay(delayStep) + timeElapsed += delayStep + if (timeElapsed > timeout) { + throw new Error('waitUntilXWindowHandles timed out polling window handles') + } else { + await _pollWindowHandles() + } + } + return await _pollWindowHandles() } async function switchToWindowWithTitle (driver, title, windowHandles) { diff --git a/test/e2e/beta/metamask-beta-responsive-ui.spec.js b/test/e2e/beta/metamask-beta-responsive-ui.spec.js index b93563b25..107f9aa6c 100644 --- a/test/e2e/beta/metamask-beta-responsive-ui.spec.js +++ b/test/e2e/beta/metamask-beta-responsive-ui.spec.js @@ -12,7 +12,6 @@ const { } = require('../func') const { checkBrowserForConsoleErrors, - closeAllWindowHandlesExcept, findElement, findElements, loadExtension, @@ -37,7 +36,7 @@ describe('MetaMask', function () { const extPath = path.resolve('dist/chrome') driver = buildChromeWebDriver(extPath, { responsive: true }) extensionId = await getExtensionIdChrome(driver) - await driver.get(`chrome-extension://${extensionId}/popup.html`) + await driver.get(`chrome-extension://${extensionId}/home.html`) break } case 'firefox': { @@ -46,7 +45,7 @@ describe('MetaMask', function () { await installWebExt(driver, extPath) await delay(700) extensionId = await getExtensionIdFirefox(driver) - await driver.get(`moz-extension://${extensionId}/popup.html`) + await driver.get(`moz-extension://${extensionId}/home.html`) } } }) @@ -69,69 +68,13 @@ describe('MetaMask', function () { await driver.quit() }) - describe('New UI setup', async function () { - it('switches to first tab', async function () { - await delay(tinyDelayMs) - const [firstTab] = await driver.getAllWindowHandles() - await driver.switchTo().window(firstTab) - await delay(regularDelayMs) - }) - - it('selects the new UI option', async () => { - try { - const overlay = await findElement(driver, By.css('.full-flex-height')) - await driver.wait(until.stalenessOf(overlay)) - } catch (e) {} - - let button - try { - button = await findElement(driver, By.xpath("//button[contains(text(), 'Try it now')]")) - } catch (e) { - await loadExtension(driver, extensionId) - await delay(largeDelayMs) - button = await findElement(driver, By.xpath("//button[contains(text(), 'Try it now')]")) - } - await button.click() - await delay(regularDelayMs) - - // Close all other tabs - const [tab0, tab1, tab2] = await driver.getAllWindowHandles() - await driver.switchTo().window(tab0) - await delay(tinyDelayMs) - - let selectedUrl = await driver.getCurrentUrl() - await delay(tinyDelayMs) - if (tab0 && selectedUrl.match(/popup.html/)) { - await closeAllWindowHandlesExcept(driver, tab0) - } else if (tab1) { - await driver.switchTo().window(tab1) - selectedUrl = await driver.getCurrentUrl() - await delay(tinyDelayMs) - if (selectedUrl.match(/popup.html/)) { - await closeAllWindowHandlesExcept(driver, tab1) - } else if (tab2) { - await driver.switchTo().window(tab2) - selectedUrl = await driver.getCurrentUrl() - selectedUrl.match(/popup.html/) && await closeAllWindowHandlesExcept(driver, tab2) - } - } else { - throw new Error('popup.html not found') - } - await delay(regularDelayMs) - const [appTab] = await driver.getAllWindowHandles() - await driver.switchTo().window(appTab) - await delay(tinyDelayMs) - - await loadExtension(driver, extensionId) - await delay(regularDelayMs) - - const continueBtn = await findElement(driver, By.css('.welcome-screen__button')) - await continueBtn.click() - await delay(regularDelayMs) - }) - }) - describe('Going through the first time flow', () => { + it('clicks the continue button on the welcome screen', async () => { + const welcomeScreenBtn = await findElement(driver, By.css('.welcome-screen__button')) + welcomeScreenBtn.click() + await delay(largeDelayMs) + }) + it('accepts a secure password', async () => { const passwordBox = await findElement(driver, By.css('.create-password #create-password')) const passwordBoxConfirm = await findElement(driver, By.css('.create-password #confirm-password')) diff --git a/test/e2e/beta/metamask-beta-ui.spec.js b/test/e2e/beta/metamask-beta-ui.spec.js index 0ef945f8d..9e96ceee6 100644 --- a/test/e2e/beta/metamask-beta-ui.spec.js +++ b/test/e2e/beta/metamask-beta-ui.spec.js @@ -42,7 +42,7 @@ describe('MetaMask', function () { const extPath = path.resolve('dist/chrome') driver = buildChromeWebDriver(extPath) extensionId = await getExtensionIdChrome(driver) - await driver.get(`chrome-extension://${extensionId}/popup.html`) + await driver.get(`chrome-extension://${extensionId}/home.html`) break } case 'firefox': { @@ -51,7 +51,7 @@ describe('MetaMask', function () { await installWebExt(driver, extPath) await delay(700) extensionId = await getExtensionIdFirefox(driver) - await driver.get(`moz-extension://${extensionId}/popup.html`) + await driver.get(`moz-extension://${extensionId}/home.html`) } } }) @@ -74,69 +74,13 @@ describe('MetaMask', function () { await driver.quit() }) - describe('New UI setup', async function () { - it('switches to first tab', async function () { - await delay(tinyDelayMs) - const [firstTab] = await driver.getAllWindowHandles() - await driver.switchTo().window(firstTab) - await delay(regularDelayMs) - }) - - it('selects the new UI option', async () => { - try { - const overlay = await findElement(driver, By.css('.full-flex-height')) - await driver.wait(until.stalenessOf(overlay)) - } catch (e) {} - - let button - try { - button = await findElement(driver, By.xpath("//button[contains(text(), 'Try it now')]")) - } catch (e) { - await loadExtension(driver, extensionId) - await delay(largeDelayMs) - button = await findElement(driver, By.xpath("//button[contains(text(), 'Try it now')]")) - } - await button.click() - await delay(regularDelayMs) - - // Close all other tabs - const [tab0, tab1, tab2] = await driver.getAllWindowHandles() - await driver.switchTo().window(tab0) - await delay(tinyDelayMs) - - let selectedUrl = await driver.getCurrentUrl() - await delay(tinyDelayMs) - if (tab0 && selectedUrl.match(/popup.html/)) { - await closeAllWindowHandlesExcept(driver, tab0) - } else if (tab1) { - await driver.switchTo().window(tab1) - selectedUrl = await driver.getCurrentUrl() - await delay(tinyDelayMs) - if (selectedUrl.match(/popup.html/)) { - await closeAllWindowHandlesExcept(driver, tab1) - } else if (tab2) { - await driver.switchTo().window(tab2) - selectedUrl = await driver.getCurrentUrl() - selectedUrl.match(/popup.html/) && await closeAllWindowHandlesExcept(driver, tab2) - } - } else { - throw new Error('popup.html not found') - } - await delay(regularDelayMs) - const [appTab] = await driver.getAllWindowHandles() - await driver.switchTo().window(appTab) - await delay(tinyDelayMs) - - await loadExtension(driver, extensionId) - await delay(regularDelayMs) - - const continueBtn = await findElement(driver, By.css('.welcome-screen__button')) - await continueBtn.click() - await delay(regularDelayMs) - }) - }) - describe('Going through the first time flow', () => { + it('clicks the continue button on the welcome screen', async () => { + const welcomeScreenBtn = await findElement(driver, By.css('.welcome-screen__button')) + welcomeScreenBtn.click() + await delay(largeDelayMs) + }) + it('accepts a secure password', async () => { const passwordBox = await findElement(driver, By.css('.create-password #create-password')) const passwordBoxConfirm = await findElement(driver, By.css('.create-password #confirm-password')) diff --git a/test/integration/lib/first-time.js b/test/integration/lib/first-time.js deleted file mode 100644 index 8cacd7f14..000000000 --- a/test/integration/lib/first-time.js +++ /dev/null @@ -1,117 +0,0 @@ -const reactTriggerChange = require('react-trigger-change') -const PASSWORD = 'password123' -const runMascaraFirstTimeTest = require('./mascara-first-time') -const { - timeout, - findAsync, -} = require('../../lib/util') - -QUnit.module('first time usage') - -QUnit.test('render init screen', (assert) => { - const done = assert.async() - runFirstTimeUsageTest(assert).then(done).catch((err) => { - assert.notOk(err, `Error was thrown: ${err.stack}`) - done() - }) -}) - -async function runFirstTimeUsageTest(assert, done) { - if (window.METAMASK_PLATFORM_TYPE === 'mascara') { - return runMascaraFirstTimeTest(assert, done) - } - - const selectState = $('select') - selectState.val('first time') - reactTriggerChange(selectState[0]) - - const app = $('#app-content') - - // Selects new ui - const tryNewUIButton = (await findAsync(app, 'button.negative'))[0] - tryNewUIButton.click() - await timeout() - - // recurse notices - while (true) { - const button = await findAsync(app, 'button') - if (button.html() === 'Accept') { - // still notices to accept - const termsPageRaw = await findAsync(app, '.markdown') - const termsPage = (await findAsync(app, '.markdown'))[0] - console.log('termsPageRaw', termsPageRaw) - termsPage.scrollTop = termsPage.scrollHeight - console.log('Clearing notice') - button.click() - } else { - // exit loop - console.log('No more notices...') - break - } - } - - // Scroll through terms - const title = (await findAsync(app, 'h1'))[0] - assert.equal(title.textContent, 'MetaMask', 'title screen') - - // enter password - const pwBox = (await findAsync(app, '#password-box'))[0] - const confBox = (await findAsync(app, '#password-box-confirm'))[0] - pwBox.value = PASSWORD - confBox.value = PASSWORD - - // create vault - const createButton = (await findAsync(app, 'button.primary'))[0] - createButton.click() - - await timeout() - const created = (await findAsync(app, 'h3'))[0] - assert.equal(created.textContent, 'Vault Created', 'Vault created screen') - - // Agree button - const button = (await findAsync(app, 'button'))[0] - assert.ok(button, 'button present') - button.click() - - const detail = (await findAsync(app, '.account-detail-section'))[0] - assert.ok(detail, 'Account detail section loaded.') - - const sandwich = (await findAsync(app, '.sandwich-expando'))[0] - sandwich.click() - - const menu = (await findAsync(app, '.menu-droppo'))[0] - const children = menu.children - const logout = children[2] - assert.ok(logout, 'Lock menu item found') - logout.click() - - const pwBox2 = (await findAsync(app, '#password-box'))[0] - pwBox2.value = PASSWORD - - const createButton2 = (await findAsync(app, 'button.primary'))[0] - createButton2.click() - - const detail2 = (await findAsync(app, '.account-detail-section'))[0] - assert.ok(detail2, 'Account detail section loaded again.') - - // open account settings dropdown - const qrButton = (await findAsync(app, '.fa.fa-ellipsis-h'))[0] - qrButton.click() - - // qr code item - const qrButton2 = (await findAsync(app, '.dropdown-menu-item'))[1] - qrButton2.click() - - const qrHeader = (await findAsync(app, '.qr-header'))[0] - const qrContainer = (await findAsync(app, '#qr-container'))[0] - assert.equal(qrHeader.textContent, 'Account 1', 'Should show account label.') - assert.ok(qrContainer, 'QR Container found') - - const networkMenu = (await findAsync(app, '.network-indicator'))[0] - networkMenu.click() - - const networkMenu2 = (await findAsync(app, '.network-indicator'))[0] - const children2 = networkMenu2.children - children2.length[3] - assert.ok(children2, 'All network options present') -} diff --git a/test/integration/lib/mascara-first-time.js b/test/integration/lib/mascara-first-time.js deleted file mode 100644 index 6756b83f9..000000000 --- a/test/integration/lib/mascara-first-time.js +++ /dev/null @@ -1,133 +0,0 @@ -const PASSWORD = 'password123' -const { - timeout, - findAsync, - queryAsync, -} = require('../../lib/util') - -async function runFirstTimeUsageTest (assert, done) { - await timeout(4000) - - const app = await queryAsync($, '#app-content') - - // Used to set values on TextField input component - const nativeInputValueSetter = Object.getOwnPropertyDescriptor( - window.HTMLInputElement.prototype, 'value' - ).set - - await skipNotices(app) - - const welcomeButton = (await findAsync(app, '.welcome-screen__button'))[0] - welcomeButton.click() - - // Scroll through terms - const title = (await findAsync(app, '.create-password__title')).text() - assert.equal(title, 'Create Password', 'create password screen') - - // enter password - const pwBox = (await findAsync(app, '#create-password'))[0] - const confBox = (await findAsync(app, '#confirm-password'))[0] - - nativeInputValueSetter.call(pwBox, PASSWORD) - pwBox.dispatchEvent(new Event('input', { bubbles: true})) - - nativeInputValueSetter.call(confBox, PASSWORD) - confBox.dispatchEvent(new Event('input', { bubbles: true})) - - // Create Password - const createButton = (await findAsync(app, 'button.first-time-flow__button'))[0] - createButton.click() - - const created = (await findAsync(app, '.unique-image__title'))[0] - assert.equal(created.textContent, 'Your unique account image', 'unique image screen') - - // Agree button - const button = (await findAsync(app, 'button'))[0] - assert.ok(button, 'button present') - button.click() - - await skipNotices(app) - - // secret backup phrase - const seedTitle = (await findAsync(app, '.backup-phrase__title'))[0] - assert.equal(seedTitle.textContent, 'Secret Backup Phrase', 'seed phrase screen') - ;(await findAsync(app, '.backup-phrase__reveal-button')).click() - const seedPhrase = (await findAsync(app, '.backup-phrase__secret-words')).text().split(' ') - ;(await findAsync(app, '.first-time-flow__button')).click() - - await timeout() - const selectPhrase = text => { - const option = $('.backup-phrase__confirm-seed-option') - .filter((i, d) => d.textContent === text)[0] - $(option).click() - } - - seedPhrase.forEach(sp => selectPhrase(sp)) - ;(await findAsync(app, '.first-time-flow__button')).click() - - // Deposit Ether Screen - const depositEthTitle = (await findAsync(app, '.page-container__title'))[0] - assert.equal(depositEthTitle.textContent, 'Deposit Ether', 'deposit ether screen') - ;(await findAsync(app, '.page-container__header-close')).click() - - const menu = (await findAsync(app, '.account-menu__icon'))[0] - menu.click() - - const lock = (await findAsync(app, '.account-menu__logout-button'))[0] - assert.ok(lock, 'Lock menu item found') - lock.click() - - await timeout(5000) - - const pwBox2 = (await findAsync(app, '#password'))[0] - pwBox2.focus() - await timeout(1000) - - nativeInputValueSetter.call(pwBox2, PASSWORD) - pwBox2.dispatchEvent(new Event('input', { bubbles: true})) - - const createButton2 = (await findAsync(app, 'button[type="submit"]'))[0] - createButton2.click() - - const detail2 = (await findAsync(app, '.wallet-view'))[0] - assert.ok(detail2, 'Account detail section loaded again.') - - // open account settings dropdown - const qrButton = (await findAsync(app, '.wallet-view__details-button'))[0] - qrButton.click() - - const qrHeader = (await findAsync(app, '.editable-label__value'))[0] - const qrContainer = (await findAsync(app, '.qr-wrapper'))[0] - assert.equal(qrHeader.textContent, 'Account 1', 'Should show account label.') - assert.ok(qrContainer, 'QR Container found') - - const networkMenu = (await findAsync(app, '.network-component'))[0] - networkMenu.click() - - const networkMenu2 = (await findAsync(app, '.network-indicator'))[0] - const children2 = networkMenu2.children - children2.length[3] - assert.ok(children2, 'All network options present') -} - -module.exports = runFirstTimeUsageTest - -async function skipNotices (app) { - while (true) { - const button = await findAsync(app, 'button') - if (button && button.html() === 'Accept') { - // still notices to accept - const termsPage = (await findAsync(app, '.markdown'))[0] - if (!termsPage) { - break - } - termsPage.scrollTop = termsPage.scrollHeight - await timeout() - button.click() - await timeout() - } else { - console.log('No more notices...') - break - } - } -} diff --git a/test/integration/lib/navigate-txs.js b/test/integration/lib/navigate-txs.js deleted file mode 100644 index 0679d6b00..000000000 --- a/test/integration/lib/navigate-txs.js +++ /dev/null @@ -1,87 +0,0 @@ -const reactTriggerChange = require('react-trigger-change') -const { - timeout, - queryAsync, -} = require('../../lib/util') - -QUnit.module('navigate txs') - -QUnit.test('successful navigate', (assert) => { - const done = assert.async() - runNavigateTxsFlowTest(assert) - .then(done) - .catch(err => { - assert.notOk(err, `Error was thrown: ${err.stack}`) - done() - }) -}) - -async function runNavigateTxsFlowTest (assert, done) { - const selectState = await queryAsync($, 'select') - - selectState.val('navigate txs') - reactTriggerChange(selectState[0]) - - // Confirm navigation buttons present - let navigateTxButtons = await queryAsync($, '.confirm-page-container-navigation__arrow') - assert.ok(navigateTxButtons[0], 'navigation button present') - assert.ok(navigateTxButtons[1], 'navigation button present') - assert.ok(navigateTxButtons[2], 'navigation button present') - assert.ok(navigateTxButtons[3], 'navigation button present') - - // Verify number of transactions present - let trxNum = await queryAsync($, '.confirm-page-container-navigation') - assert.equal(trxNum[0].innerText.includes('1'), true, 'starts on first') - - // Verify correct route - let summaryAction = await queryAsync($, '.confirm-page-container-summary__action') - assert.equal(summaryAction[0].innerText, 'CONTRACT DEPLOYMENT', 'correct route') - - // Click navigation button - navigateTxButtons[2].click() - await timeout(2000) - - // Verify transaction changed to num 2 and routed correctly - trxNum = await queryAsync($, '.confirm-page-container-navigation') - assert.equal(trxNum[0].innerText.includes('2'), true, 'changed transaction right') - summaryAction = await queryAsync($, '.confirm-page-container-summary__action') - // assert.equal(summaryAction[0].innerText, 'CONFIRM', 'correct route') - - // Click navigation button - navigateTxButtons = await queryAsync($, '.confirm-page-container-navigation__arrow') - navigateTxButtons[2].click() - - // Verify transation changed to num 3 and routed correctly - trxNum = await queryAsync($, '.confirm-page-container-navigation') - assert.equal(trxNum[0].innerText.includes('3'), true, 'changed transaction right') - summaryAction = await queryAsync($, '.confirm-page-container-summary__action') - assert.equal(summaryAction[0].innerText, 'CONFIRM', 'correct route') - - // Click navigation button - navigateTxButtons = await queryAsync($, '.confirm-page-container-navigation__arrow') - navigateTxButtons[2].click() - - // Verify transation changed to num 4 and routed correctly - trxNum = await queryAsync($, '.confirm-page-container-navigation') - assert.equal(trxNum[0].innerText.split('4').length, 3, '4 transactions present') - summaryAction = await queryAsync($, '.confirm-page-container-summary__action') - assert.equal(summaryAction[0].innerText, 'TRANSFER', 'correct route') - - // Verify left arrow is working correctly - navigateTxButtons = await queryAsync($, '.confirm-page-container-navigation__arrow') - navigateTxButtons[1].click() - trxNum = await queryAsync($, '.confirm-page-container-navigation') - assert.equal(trxNum[0].innerText.includes('3'), true, 'changed transaction left') - - // Verify navigate to last transaction is working correctly - navigateTxButtons = await queryAsync($, '.confirm-page-container-navigation__arrow') - navigateTxButtons[3].click() - trxNum = await queryAsync($, '.confirm-page-container-navigation') - assert.equal(trxNum[0].innerText.split('4').length, 3, 'navigate to last transaction') - - // Verify navigate to first transaction is working correctly - navigateTxButtons = await queryAsync($, '.confirm-page-container-navigation__arrow') - navigateTxButtons[0].click() - trxNum = await queryAsync($, '.confirm-page-container-navigation') - assert.equal(trxNum[0].innerText.includes('1'), true, 'navigate to first transaction') -} diff --git a/ui/app/components/app-header/app-header.component.js b/ui/app/components/app-header/app-header.component.js index c82dc1de9..83ec4809d 100644 --- a/ui/app/components/app-header/app-header.component.js +++ b/ui/app/components/app-header/app-header.component.js @@ -108,7 +108,7 @@ export default class AppHeader extends PureComponent { >