1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
metamask-extension/test/e2e/tests/metamask-responsive-ui.spec.js
Mark Stacey 429451de23
Extract "create vault" form to separate component (#13461)
The form used for creating a vault on the "Import" page of onboarding
and on the "Restore vault" page is nearly identical, yet the
implementation is totally separate. It has now been extracted to a
separate component, consolidating the two implementations.

There is a "terms of use" checkbox on the import page that isn't on the
restore vault page, so that part has been made optional. The "submit"
button text differs between the two uses as well, so that is
customizable.

There are slight styling differences between the old and new versions
of this form. The fonts and spacing are all using our new standard
design system guidelines, and we're using our standard checkbox now as
well. The spacing and font sizes were chosen somewhat arbitrarily by me
to resemble the old styles, so please feel free to suggest changes if
you think they can be improved upon.

There are some slight copy changes to the "Restore vault" page as well;
the placeholder text and the label for the "Secret Recovery Phrase"
field now matches the "Import" page copy.
2022-02-03 10:36:43 -03:30

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.fill(
'input[placeholder="Enter your Secret Recovery Phrase"]',
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 },
);
},
);
});
});