diff --git a/test/e2e/tests/from-import-ui.spec.js b/test/e2e/tests/from-import-ui.spec.js index 5c0e0c8ee..a83a9bbbb 100644 --- a/test/e2e/tests/from-import-ui.spec.js +++ b/test/e2e/tests/from-import-ui.spec.js @@ -27,38 +27,72 @@ describe('Metamask Import UI', function () { async ({ driver }) => { await driver.navigate(); - // clicks the continue button on the welcome screen - await driver.findElement('.welcome-page__header'); - await driver.clickElement({ - text: enLocaleMessages.getStarted.message, - tag: 'button', - }); + if (process.env.ONBOARDING_V2 === '1') { + // welcome + await driver.clickElement('[data-testid="onboarding-import-wallet"]'); - // clicks the "Import Wallet" option - await driver.clickElement({ text: 'Import wallet', tag: 'button' }); + // metrics + await driver.clickElement('[data-testid="metametrics-no-thanks"]'); - // clicks the "No thanks" option on the metametrics opt-in screen - await driver.clickElement('.btn-secondary'); + // import with recovery phrase + await driver.fill('[data-testid="import-srp-text"]', testSeedPhrase); + await driver.clickElement('[data-testid="import-srp-confirm"]'); - // Import Secret Recovery Phrase - await driver.fill( - 'input[placeholder="Paste Secret Recovery Phrase from clipboard"]', - testSeedPhrase, - ); + // create password + await driver.fill( + '[data-testid="create-password-new"]', + 'correct horse battery staple', + ); + await driver.fill( + '[data-testid="create-password-confirm"]', + 'correct horse battery staple', + ); + await driver.clickElement('[data-testid="create-password-terms"]'); + await driver.clickElement('[data-testid="create-password-import"]'); - await driver.fill('#password', 'correct horse battery staple'); - await driver.fill('#confirm-password', 'correct horse battery staple'); + // complete + await driver.clickElement('[data-testid="onboarding-complete-done"]'); - await driver.clickElement('.first-time-flow__terms'); + // pin extension + await driver.clickElement('[data-testid="pin-extension-next"]'); + await driver.clickElement('[data-testid="pin-extension-done"]'); + } else { + // clicks the continue button on the welcome screen + await driver.findElement('.welcome-page__header'); + await driver.clickElement({ + text: enLocaleMessages.getStarted.message, + tag: 'button', + }); - await driver.clickElement({ text: 'Import', tag: 'button' }); + // clicks the "Import Wallet" option + await driver.clickElement({ text: 'Import wallet', tag: 'button' }); - // clicks through the success screen - await driver.findElement({ text: 'Congratulations', tag: 'div' }); - await driver.clickElement({ - text: enLocaleMessages.endOfFlowMessage10.message, - tag: 'button', - }); + // clicks the "No thanks" option on the metametrics opt-in screen + await driver.clickElement('.btn-secondary'); + + // Import Secret Recovery Phrase + await driver.fill( + 'input[placeholder="Paste Secret Recovery Phrase from clipboard"]', + testSeedPhrase, + ); + + await driver.fill('#password', 'correct horse battery staple'); + await driver.fill( + '#confirm-password', + 'correct horse battery staple', + ); + + await driver.clickElement('.first-time-flow__terms'); + + await driver.clickElement({ text: 'Import', tag: 'button' }); + + // clicks through the success screen + await driver.findElement({ text: 'Congratulations', tag: 'div' }); + await driver.clickElement({ + text: enLocaleMessages.endOfFlowMessage10.message, + tag: 'button', + }); + } // Show account information await driver.clickElement( diff --git a/test/e2e/tests/metamask-responsive-ui.spec.js b/test/e2e/tests/metamask-responsive-ui.spec.js index e512ce9f4..adb5ad644 100644 --- a/test/e2e/tests/metamask-responsive-ui.spec.js +++ b/test/e2e/tests/metamask-responsive-ui.spec.js @@ -16,50 +16,6 @@ describe('Metamask Responsive UI', function () { async ({ driver }) => { await driver.navigate(); - // clicks the continue button on the welcome screen - await driver.findElement('.welcome-page__header'); - await driver.clickElement({ - text: enLocaleMessages.getStarted.message, - tag: 'button', - }); - await driver.delay(tinyDelayMs); - - // clicks the "Create New Wallet" option - await driver.clickElement({ text: 'Create a Wallet', tag: 'button' }); - - // clicks the "I Agree" option on the metametrics opt-in screen - await driver.clickElement('.btn-primary'); - - // accepts a secure password - await driver.fill( - '.first-time-flow__form #create-password', - 'correct horse battery staple', - ); - await driver.fill( - '.first-time-flow__form #confirm-password', - 'correct horse battery staple', - ); - await driver.clickElement('.first-time-flow__checkbox'); - await driver.clickElement('.first-time-flow__form button'); - - // renders the Secret Recovery Phrase intro screen - await driver.clickElement('.seed-phrase-intro__left button'); - - // reveals the Secret Recovery Phrase - await driver.clickElement( - '.reveal-seed-phrase__secret-blocker .reveal-seed-phrase__reveal-button', - ); - const revealedSeedPhrase = await driver.findElement( - '.reveal-seed-phrase__secret-words', - ); - const seedPhrase = await revealedSeedPhrase.getText(); - assert.equal(seedPhrase.split(' ').length, 12); - - await driver.clickElement({ - text: enLocaleMessages.next.message, - tag: 'button', - }); - async function clickWordAndWait(word) { await driver.clickElement( `[data-testid="seed-phrase-sorted"] [data-testid="draggable-seed-${word}"]`, @@ -67,26 +23,126 @@ describe('Metamask Responsive UI', function () { await driver.delay(tinyDelayMs); } - // can retype the Secret Recovery Phrase - const words = seedPhrase.split(' '); - for (const word of words) { - await clickWordAndWait(word); + if (process.env.ONBOARDING_V2 === '1') { + // welcome + await driver.clickElement('[data-testid="onboarding-create-wallet"]'); + + // metrics + await driver.clickElement('[data-testid="metametrics-no-thanks"]'); + + // create password + await driver.fill( + '[data-testid="create-password-new"]', + 'correct horse battery staple', + ); + await driver.fill( + '[data-testid="create-password-confirm"]', + 'correct horse battery staple', + ); + await driver.clickElement('[data-testid="create-password-terms"]'); + await driver.clickElement('[data-testid="create-password-wallet"]'); + + // secure wallet + await driver.clickElement( + '[data-testid="secure-wallet-recommended"]', + ); + + // review + await driver.clickElement('[data-testid="recovery-phrase-reveal"]'); + const chipTwo = await ( + await driver.findElement('[data-testid="recovery-phrase-chip-2"]') + ).getText(); + const chipThree = await ( + await driver.findElement('[data-testid="recovery-phrase-chip-3"]') + ).getText(); + const chipSeven = await ( + await driver.findElement('[data-testid="recovery-phrase-chip-7"]') + ).getText(); + await driver.clickElement('[data-testid="recovery-phrase-next"]'); + + // confirm + await driver.fill('[data-testid="recovery-phrase-input-2"]', chipTwo); + await driver.fill( + '[data-testid="recovery-phrase-input-3"]', + chipThree, + ); + await driver.fill( + '[data-testid="recovery-phrase-input-7"]', + chipSeven, + ); + await driver.clickElement('[data-testid="recovery-phrase-confirm"]'); + + // complete + await driver.clickElement('[data-testid="onboarding-complete-done"]'); + + // pin extension + await driver.clickElement('[data-testid="pin-extension-next"]'); + await driver.clickElement('[data-testid="pin-extension-done"]'); + } else { + // clicks the continue button on the welcome screen + await driver.findElement('.welcome-page__header'); + await driver.clickElement({ + text: enLocaleMessages.getStarted.message, + tag: 'button', + }); + await driver.delay(tinyDelayMs); + + // clicks the "Create New Wallet" option + await driver.clickElement({ text: 'Create a Wallet', tag: 'button' }); + + // clicks the "I Agree" option on the metametrics opt-in screen + await driver.clickElement('.btn-primary'); + + // accepts a secure password + await driver.fill( + '.first-time-flow__form #create-password', + 'correct horse battery staple', + ); + await driver.fill( + '.first-time-flow__form #confirm-password', + 'correct horse battery staple', + ); + await driver.clickElement('.first-time-flow__checkbox'); + await driver.clickElement('.first-time-flow__form button'); + + // renders the Secret Recovery Phrase intro screen + await driver.clickElement('.seed-phrase-intro__left button'); + + // reveals the Secret Recovery Phrase + await driver.clickElement( + '.reveal-seed-phrase__secret-blocker .reveal-seed-phrase__reveal-button', + ); + const revealedSeedPhrase = await driver.findElement( + '.reveal-seed-phrase__secret-words', + ); + const seedPhrase = await revealedSeedPhrase.getText(); + assert.equal(seedPhrase.split(' ').length, 12); + + await driver.clickElement({ + text: enLocaleMessages.next.message, + tag: 'button', + }); + + // can retype the Secret Recovery Phrase + const words = seedPhrase.split(' '); + for (const word of words) { + await clickWordAndWait(word); + } + await driver.clickElement({ text: 'Confirm', tag: 'button' }); + + // clicks through the success screen + await driver.findElement({ text: 'Congratulations', tag: 'div' }); + await driver.clickElement({ + text: enLocaleMessages.endOfFlowMessage10.message, + tag: 'button', + }); } - await driver.clickElement({ text: 'Confirm', tag: 'button' }); - // clicks through the success screen - await driver.findElement({ text: 'Congratulations', tag: 'div' }); - await driver.clickElement({ - text: enLocaleMessages.endOfFlowMessage10.message, - tag: 'button', - }); - - // Show account information - // balance renders - await driver.waitForSelector({ - css: '[data-testid="eth-overview__primary-currency"]', - text: '0 ETH', - }); + // assert balance + const balance = await driver.findElement( + '[data-testid="wallet-balance"]', + ); + assert.ok(/^0\sETH$/u.test(await balance.getText())); }, ); }); diff --git a/ui/components/ui/chip/chip-with-input.js b/ui/components/ui/chip/chip-with-input.js index c6fad92d9..8a5e30cc9 100644 --- a/ui/components/ui/chip/chip-with-input.js +++ b/ui/components/ui/chip/chip-with-input.js @@ -5,6 +5,7 @@ import { COLORS } from '../../../helpers/constants/design-system'; import Chip from '.'; export function ChipWithInput({ + dataTestId, className, borderColor = COLORS.UI1, inputValue, @@ -17,6 +18,7 @@ export function ChipWithInput({ > {setInputValue && ( { @@ -30,6 +32,7 @@ export function ChipWithInput({ } ChipWithInput.propTypes = { + dataTestId: PropTypes.string, borderColor: PropTypes.oneOf(Object.values(COLORS)), className: PropTypes.string, inputValue: PropTypes.string, diff --git a/ui/components/ui/chip/chip.js b/ui/components/ui/chip/chip.js index 6311ea72e..45157fd51 100644 --- a/ui/components/ui/chip/chip.js +++ b/ui/components/ui/chip/chip.js @@ -6,6 +6,7 @@ import Typography from '../typography'; import { COLORS, TYPOGRAPHY } from '../../../helpers/constants/design-system'; export default function Chip({ + dataTestId, className, children, borderColor = COLORS.UI1, @@ -25,6 +26,7 @@ export default function Chip({ return (
)} {error && ( @@ -111,6 +113,7 @@ export default function FormField({ } FormField.propTypes = { + dataTestId: PropTypes.string, titleText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]), titleUnit: PropTypes.string, tooltipText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]), diff --git a/ui/pages/onboarding-flow/create-password/create-password.js b/ui/pages/onboarding-flow/create-password/create-password.js index 66471c67f..fcdbca69a 100644 --- a/ui/pages/onboarding-flow/create-password/create-password.js +++ b/ui/pages/onboarding-flow/create-password/create-password.js @@ -131,6 +131,7 @@ export default function CreatePassword({ >