Skip to content

Commit

Permalink
test: add e2e tests for navigation (#25652) (#25735)
Browse files Browse the repository at this point in the history
Reverts #25725

---------

Co-authored-by: seaona <54408225+seaona@users.noreply.github.com>
  • Loading branch information
pnarayanaswamy and seaona authored Jul 12, 2024
1 parent 6be2d95 commit b585a99
Show file tree
Hide file tree
Showing 3 changed files with 216 additions and 0 deletions.
210 changes: 210 additions & 0 deletions test/e2e/tests/confirmations/navigation.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,210 @@
import { strict as assert } from 'assert';
import { Suite } from 'mocha';
import {
DAPP_HOST_ADDRESS,
WINDOW_TITLES,
openDapp,
unlockWallet,
regularDelayMs,
} from '../../helpers';
import { Driver } from '../../webdriver/driver';
import { withRedesignConfirmationFixtures } from './helpers';

describe('Navigation Signature - Different signature types', function (this: Suite) {
if (!process.env.ENABLE_CONFIRMATION_REDESIGN) {
return;
}

it('initiates and queues multiple signatures and confirms', async function () {
await withRedesignConfirmationFixtures(
this.test?.fullTitle(),
async ({ driver }: { driver: Driver }) => {
await unlockWallet(driver);
await openDapp(driver);
await queueSignatures(driver);

await verifySignTypedData(driver);
await driver.clickElement(
'[data-testid="confirm-nav__next-confirmation"]',
);

// Verify Sign Typed Data v3 confirmation is displayed
await verifySignedTypeV3Confirmation(driver);

await driver.clickElement(
'[data-testid="confirm-nav__next-confirmation"]',
);

// Verify Sign Typed Data v4 confirmation is displayed
await verifySignedTypeV4Confirmation(driver);

await driver.clickElement(
'[data-testid="confirm-nav__previous-confirmation"]',
);

// Verify Sign Typed Data v3 confirmation is displayed
await verifySignedTypeV3Confirmation(driver);

await driver.clickElement(
'[data-testid="confirm-nav__previous-confirmation"]',
);
// Verify Sign Typed Data v3 confirmation is displayed
await verifySignTypedData(driver);
},
);
});

it('initiates and queues a mix of signatures and transactions and navigates', async function () {
await withRedesignConfirmationFixtures(
this.test?.fullTitle(),
async ({ driver }: { driver: Driver }) => {
await unlockWallet(driver);
await openDapp(driver);
await queueSignaturesAndTransactions(driver);

await verifySignTypedData(driver);

await driver.clickElement(
'[data-testid="confirm-nav__next-confirmation"]',
);

// Verify Transaction Sending ETH is displayed
await verifyTransaction(driver, 'SENDING ETH');

await driver.clickElement('[data-testid="next-page"]');

// Verify Sign Typed Data v3 confirmation is displayed
await verifySignedTypeV3Confirmation(driver);

await driver.clickElement(
'[data-testid="confirm-nav__previous-confirmation"]',
);

// Verify Sign Typed Data v3 confirmation is displayed
await verifyTransaction(driver, 'SENDING ETH');

await driver.clickElement('[data-testid="previous-page"]');

// Verify Sign Typed Data v3 confirmation is displayed
await verifySignTypedData(driver);
},
);
});

it('initiates multiple signatures and rejects all', async function () {
await withRedesignConfirmationFixtures(
this.test?.fullTitle(),
async ({ driver }: { driver: Driver }) => {
await unlockWallet(driver);
await openDapp(driver);
await queueSignatures(driver);
await driver.delay(regularDelayMs);

await driver.clickElement('[data-testid="confirm-nav__reject-all"]');

await driver.waitUntilXWindowHandles(2);
await driver.switchToWindowWithTitle(WINDOW_TITLES.TestDApp);

await verifyRejectionResults(driver, '#signTypedDataResult');
await verifyRejectionResults(driver, '#signTypedDataV3Result');
await verifyRejectionResults(driver, '#signTypedDataV4Result');
},
);
});
});

async function verifySignTypedData(driver: Driver) {
const origin = await driver.findElement({ text: DAPP_HOST_ADDRESS });
const message = await driver.findElement({ text: 'Hi, Alice!' });

// Verify Sign Typed Data confirmation is displayed
assert.ok(origin, 'origin');
assert.ok(message, 'message');
}

async function verifyRejectionResults(driver: Driver, verifyResultId: string) {
const rejectionResult = await driver.findElement(verifyResultId);
assert.equal(
await rejectionResult.getText(),
'Error: User rejected the request.',
);
}

async function verifySignedTypeV3Confirmation(driver: Driver) {
const origin = await driver.findElement({ text: DAPP_HOST_ADDRESS });
const fromAddress = driver.findElement({
css: '.name__value',
text: '0xCD2a3...DD826',
});
const toAddress = driver.findElement({
css: '.name__value',
text: '0xbBbBB...bBBbB',
});
const contents = driver.findElement({ text: 'Hello, Bob!' });

assert.ok(await origin, 'origin');
assert.ok(await fromAddress, 'fromAddress');
assert.ok(await toAddress, 'toAddress');
assert.ok(await contents, 'contents');
}

async function verifySignedTypeV4Confirmation(driver: Driver) {
verifySignedTypeV3Confirmation(driver);
const attachment = driver.findElement({ text: '0x' });
assert.ok(await attachment, 'attachment');
}

async function queueSignatures(driver: Driver) {
await driver.clickElement('#signTypedData');
await driver.waitUntilXWindowHandles(3);
await driver.switchToWindowWithTitle(WINDOW_TITLES.TestDApp);
await driver.delay(2000); // Delay needed due to a race condition
// To be fixed in https://github.com/MetaMask/metamask-extension/issues/25251

await driver.clickElement('#signTypedDataV3');
await driver.waitUntilXWindowHandles(3);
await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog);
await driver.delay(2000);

await driver.waitUntilXWindowHandles(3);
await driver.switchToWindowWithTitle(WINDOW_TITLES.TestDApp);

await driver.clickElement('#signTypedDataV4');
await driver.waitUntilXWindowHandles(3);
await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog);
await driver.delay(2000);
}

async function queueSignaturesAndTransactions(driver: Driver) {
await driver.clickElement('#signTypedData');
await driver.waitUntilXWindowHandles(3);
await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog);
await driver.delay(2000); // Delay needed due to a race condition
// To be fixed in https://github.com/MetaMask/metamask-extension/issues/25251

await driver.waitUntilXWindowHandles(3);
await driver.switchToWindowWithTitle(WINDOW_TITLES.TestDApp);

await driver.clickElement('#sendButton');
await driver.waitUntilXWindowHandles(3);
await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog);
await driver.delay(2000);

await driver.waitUntilXWindowHandles(3);
await driver.switchToWindowWithTitle(WINDOW_TITLES.TestDApp);

await driver.clickElement('#signTypedDataV3');
await driver.waitUntilXWindowHandles(3);
await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog);
await driver.delay(2000);
}

async function verifyTransaction(
driver: Driver,
expectedTransactionType: string,
) {
const transactionType = await driver.findElement(
'.confirm-page-container-summary__action__name',
);
assert.equal(await transactionType.getText(), expectedTransactionType);
}
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ exports[`ConfirmNav should match snapshot 1`] = `
<button
aria-label="Previous Confirmation"
class="mm-box mm-button-icon mm-button-icon--size-sm confirm_nav__left_btn mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-alternative mm-box--background-color-background-alternative mm-box--rounded-full"
data-testid="confirm-nav__previous-confirmation"
>
<span
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
Expand All @@ -28,6 +29,7 @@ exports[`ConfirmNav should match snapshot 1`] = `
<button
aria-label="Next Confirmation"
class="mm-box mm-button-icon mm-button-icon--size-sm confirm_nav__right_btn mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-alternative mm-box--background-color-background-alternative mm-box--rounded-full"
data-testid="confirm-nav__next-confirmation"
>
<span
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
Expand All @@ -37,6 +39,7 @@ exports[`ConfirmNav should match snapshot 1`] = `
</div>
<button
class="mm-box mm-text mm-button-base mm-button-base--size-md confirm_nav__reject_all mm-button-primary mm-text--body-md-medium mm-text--font-weight-normal mm-box--padding-0 mm-box--padding-right-3 mm-box--padding-left-3 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-xl"
data-testid="confirm-nav__reject-all"
type="secondary"
>
<span
Expand Down
3 changes: 3 additions & 0 deletions ui/pages/confirmations/components/confirm/nav/nav.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,7 @@ const Nav = () => {
<Box alignItems={AlignItems.center} display={Display.Flex}>
<ButtonIcon
ariaLabel="Previous Confirmation"
data-testid="confirm-nav__previous-confirmation"
backgroundColor={BackgroundColor.backgroundAlternative}
borderRadius={BorderRadius.full}
className="confirm_nav__left_btn"
Expand All @@ -119,6 +120,7 @@ const Nav = () => {
</Text>
<ButtonIcon
ariaLabel="Next Confirmation"
data-testid="confirm-nav__next-confirmation"
backgroundColor={BackgroundColor.backgroundAlternative}
borderRadius={BorderRadius.full}
className="confirm_nav__right_btn"
Expand All @@ -134,6 +136,7 @@ const Nav = () => {
<Button
borderRadius={BorderRadius.XL}
className="confirm_nav__reject_all"
data-testid="confirm-nav__reject-all"
fontWeight={FontWeight.Normal}
onClick={onRejectAll}
paddingLeft={3}
Expand Down

0 comments on commit b585a99

Please sign in to comment.