mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
00341cd3b3
* Initial implementation of new SrpInput component This new version of the SrpInput component uses a separate field for each word of the SRP. Only one field can be revealed at a time, making it less likely that it gets accidentally revealed to somebody. * Fix copy mistakes * Move container div from 'create vault' to 'srp-input', and setup grid layout * Increase size of title * Remove hard-coded width in Storybook to allow testing different viewport sizes * Improve layout * Improve margins * Update dropdown text * Expand SRP input section * Remove unused localized messages * Update dropdown option names in unit tests * Replace checkbox with show/hide toggle * Remove unused localized message * Fix 'data-testid' prop name * Fix e2e test imports using paste * Use 'ActionableMessage' component for error message * Convert error popover to actionable message * Add tip about pasting the SRP * Remove invalid prop The "info" style of `ActionableMessage` is the default, so no type is required. * Use more readable test convenience methods The method `toBeInTheDocument()` is now used over `not.toBeNull()` to improve the readability of tests. Likewise, the convenience method `.clear` is now used to clear fields rather than manually entering the key combination to clear a field. * Fix misspelled word
254 lines
8.6 KiB
JavaScript
254 lines
8.6 KiB
JavaScript
const { strict: assert } = require('assert');
|
|
const { convertToHexValue, withFixtures, tinyDelayMs } = require('../helpers');
|
|
const enLocaleMessages = require('../../../app/_locales/en/messages.json');
|
|
|
|
describe('Metamask Responsive UI', function () {
|
|
it('Creating a new wallet', async function () {
|
|
const driverOptions = { responsive: true };
|
|
|
|
await withFixtures(
|
|
{
|
|
fixtures: 'onboarding',
|
|
driverOptions,
|
|
title: this.test.title,
|
|
failOnConsoleError: false,
|
|
},
|
|
async ({ driver }) => {
|
|
await driver.navigate();
|
|
|
|
async function clickWordAndWait(word) {
|
|
await driver.clickElement(
|
|
`[data-testid="seed-phrase-sorted"] [data-testid="draggable-seed-${word}"]`,
|
|
);
|
|
await driver.delay(tinyDelayMs);
|
|
}
|
|
|
|
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',
|
|
});
|
|
}
|
|
|
|
// assert balance
|
|
const balance = await driver.findElement(
|
|
'[data-testid="wallet-balance"]',
|
|
);
|
|
assert.ok(/^0\sETH$/u.test(await balance.getText()));
|
|
},
|
|
);
|
|
});
|
|
|
|
it('Importing existing wallet from lock page', async function () {
|
|
const driverOptions = { responsive: true };
|
|
const testSeedPhrase =
|
|
'phrase upgrade clock rough situate wedding elder clever doctor stamp excess tent';
|
|
|
|
await withFixtures(
|
|
{
|
|
fixtures: 'imported-account',
|
|
driverOptions,
|
|
title: this.test.title,
|
|
failOnConsoleError: false,
|
|
},
|
|
async ({ driver }) => {
|
|
await driver.navigate();
|
|
|
|
// Import Secret Recovery Phrase
|
|
const restoreSeedLink = await driver.findClickableElement(
|
|
'.unlock-page__link--import',
|
|
);
|
|
assert.equal(
|
|
await restoreSeedLink.getText(),
|
|
'import using Secret Recovery Phrase',
|
|
);
|
|
await restoreSeedLink.click();
|
|
|
|
await driver.pasteIntoField(
|
|
'[data-testid="import-srp__srp-word-0"]',
|
|
testSeedPhrase,
|
|
);
|
|
|
|
await driver.fill('#password', 'correct horse battery staple');
|
|
await driver.fill('#confirm-password', 'correct horse battery staple');
|
|
await driver.press('#confirm-password', driver.Key.ENTER);
|
|
|
|
// balance renders
|
|
await driver.waitForSelector({
|
|
css: '[data-testid="eth-overview__primary-currency"]',
|
|
text: '1000 ETH',
|
|
});
|
|
},
|
|
);
|
|
});
|
|
|
|
it('Send Transaction from responsive window', async function () {
|
|
const driverOptions = { responsive: true };
|
|
const ganacheOptions = {
|
|
accounts: [
|
|
{
|
|
secretKey:
|
|
'0x7C9529A67102755B7E6102D6D950AC5D5863C98713805CEC576B945B15B71EAC',
|
|
balance: convertToHexValue(25000000000000000000),
|
|
},
|
|
],
|
|
};
|
|
await withFixtures(
|
|
{
|
|
fixtures: 'imported-account',
|
|
driverOptions,
|
|
ganacheOptions,
|
|
title: this.test.title,
|
|
},
|
|
async ({ driver }) => {
|
|
await driver.navigate();
|
|
await driver.fill('#password', 'correct horse battery staple');
|
|
await driver.press('#password', driver.Key.ENTER);
|
|
|
|
// Send ETH from inside MetaMask
|
|
// starts to send a transaction
|
|
await driver.clickElement('[data-testid="eth-overview-send"]');
|
|
|
|
await driver.fill(
|
|
'input[placeholder="Search, public address (0x), or ENS"]',
|
|
'0x2f318C334780961FB129D2a6c30D0763d9a5C970',
|
|
);
|
|
|
|
const inputAmount = await driver.fill('.unit-input__input', '1');
|
|
|
|
const inputValue = await inputAmount.getProperty('value');
|
|
assert.equal(inputValue, '1');
|
|
|
|
// confirming transcation
|
|
await driver.clickElement({ text: 'Next', tag: 'button' });
|
|
await driver.clickElement({ text: 'Confirm', tag: 'button' });
|
|
|
|
// finds the transaction in the transactions list
|
|
await driver.clickElement('[data-testid="home__activity-tab"]');
|
|
await driver.wait(async () => {
|
|
const confirmedTxes = await driver.findElements(
|
|
'.transaction-list__completed-transactions .transaction-list-item',
|
|
);
|
|
return confirmedTxes.length === 1;
|
|
}, 10000);
|
|
|
|
await driver.waitForSelector(
|
|
{
|
|
css: '.transaction-list-item__primary-currency',
|
|
text: '-1 ETH',
|
|
},
|
|
{ timeout: 10000 },
|
|
);
|
|
},
|
|
);
|
|
});
|
|
});
|