From 8491e6d4711befe26761bdc9bc1d4695fb95188b Mon Sep 17 00:00:00 2001 From: Matt <54373384+matt-user@users.noreply.github.com> Date: Tue, 24 Oct 2023 16:36:02 -0400 Subject: [PATCH] test: tx list when wallet changes (#174) * test: fuel change accounts and tx list * fix: test * test: switch to account 1 --- packages/app/playwright/commons/fuelWallet.ts | 59 ++++++++++++- packages/app/playwright/commons/locator.ts | 8 +- packages/app/playwright/e2e/Bridge.test.ts | 86 +++++++++++-------- packages/app/playwright/e2e/utils/bridge.ts | 21 ++++- 4 files changed, 136 insertions(+), 38 deletions(-) diff --git a/packages/app/playwright/commons/fuelWallet.ts b/packages/app/playwright/commons/fuelWallet.ts index abca77a3..77e8eeaf 100644 --- a/packages/app/playwright/commons/fuelWallet.ts +++ b/packages/app/playwright/commons/fuelWallet.ts @@ -4,6 +4,7 @@ import { expect } from '../e2e/fixtures'; import { FUEL_MNEMONIC, FUEL_WALLET_PASSWORD } from '../mocks'; import { getButtonByText } from './button'; +import { getByAriaLabel } from './locator'; export async function walletSetup( context: BrowserContext, @@ -65,9 +66,65 @@ export async function walletSetup( await addButton.click({ timeout: 9000 }); } -export async function walletConnect(context: BrowserContext) { +export async function addAccount(context: BrowserContext) { + const walletPage = context.pages().find((page) => { + const url = page.url(); + return url.includes('/popup.html#/wallet'); + }); + + if (!walletPage) { + throw new Error('Wallet page could not be found.'); + } + + const accountsButton = getByAriaLabel(walletPage, 'Accounts'); + await accountsButton.click(); + const addAccountButton = getByAriaLabel(walletPage, 'Add account'); + await addAccountButton.click(); +} + +export async function switchAccount( + context: BrowserContext, + accountName: string +) { + const walletPage = context.pages().find((page) => { + const url = page.url(); + return url.includes('/popup.html#/wallet'); + }); + + if (!walletPage) { + throw new Error('Wallet page could not be found.'); + } + + const accountsButton = getByAriaLabel(walletPage, 'Accounts'); + await accountsButton.click(); + const accountButton = getByAriaLabel(walletPage, accountName, true); + await accountButton.click(); +} + +export async function walletConnect( + context: BrowserContext, + accountNames?: string[], + connectCurrentAccount: boolean = true +) { const walletPage = await getWalletPage(context); + if (!connectCurrentAccount) { + const disconnectCurrenctAccountButton = walletPage.getByRole('switch', { + checked: true, + }); + await disconnectCurrenctAccountButton.click(); + } + + await Promise.all( + accountNames.map(async (accountName) => { + const accountConnectionButton = getByAriaLabel( + walletPage, + accountName + ).getByRole('switch'); + await accountConnectionButton.click(); + }) + ); + const nextButton = getButtonByText(walletPage, 'Next'); await nextButton.click(); const connectButton = getButtonByText(walletPage, 'Connect'); diff --git a/packages/app/playwright/commons/locator.ts b/packages/app/playwright/commons/locator.ts index 213e7cbe..521fbdbe 100644 --- a/packages/app/playwright/commons/locator.ts +++ b/packages/app/playwright/commons/locator.ts @@ -1,7 +1,11 @@ import type { Page } from '@playwright/test'; -export function getByAriaLabel(page: Page, selector: string) { - return page.locator(`[aria-label*="${selector}"]`); +export function getByAriaLabel( + page: Page, + selector: string, + exact: boolean = false +) { + return page.getByLabel(selector, { exact }); } export async function waitAriaLabel(page: Page, selector: string) { diff --git a/packages/app/playwright/e2e/Bridge.test.ts b/packages/app/playwright/e2e/Bridge.test.ts index f79a03fd..b9e6dc66 100644 --- a/packages/app/playwright/e2e/Bridge.test.ts +++ b/packages/app/playwright/e2e/Bridge.test.ts @@ -16,6 +16,8 @@ import { walletApprove, walletConnect, hasText, + addAccount, + switchAccount, } from '../commons'; import { ETH_MNEMONIC, FUEL_MNEMONIC } from '../mocks'; @@ -28,6 +30,7 @@ import { goToBridgePage, goToTransactionsPage, hasDropdownSymbol, + proceedAnyways, } from './utils/bridge'; const { FUEL_PROVIDER_URL, VITE_ETH_ERC20, VITE_FUEL_FUNGIBLE_ASSET_ID } = @@ -41,6 +44,9 @@ test.describe('Bridge', () => { test.beforeEach(async ({ context, extensionId, page }) => { await walletSetup(context, extensionId, page); + await addAccount(context); + await addAccount(context); + await switchAccount(context, 'Account 1'); client = createPublicClient({ chain: foundry, transport: http(), @@ -83,8 +89,8 @@ test.describe('Bridge', () => { // Connect fuel const connectFuel = getByAriaLabel(page, 'Connect Fuel Wallet'); await connectFuel.click(); - await getByAriaLabel(page, 'Connect to Fuel Wallet').click(); - await walletConnect(context); + await getByAriaLabel(page, 'Connect to Fuel Wallet', true).click(); + await walletConnect(context, ['Account 2']); }); const INITIATE_DEPOSIT = @@ -109,7 +115,7 @@ test.describe('Bridge', () => { await hasDropdownSymbol(page, 'ETH'); const depositInput = page.locator('input'); await depositInput.fill(DEPOSIT_AMOUNT); - const depositButton = getByAriaLabel(page, 'Deposit'); + const depositButton = getByAriaLabel(page, 'Deposit', true); await depositButton.click(); }); @@ -255,21 +261,7 @@ test.describe('Bridge', () => { // For some reason we need this even if we wait for load state on the metamask notification page await page.waitForTimeout(3000); - let metamaskNotificationPage = context - .pages() - .find((p) => p.url().includes('notification')); - if (!metamaskNotificationPage) { - metamaskNotificationPage = await context.waitForEvent('page', { - predicate: (page) => page.url().includes('notification'), - }); - } - const proceedAnyways = metamaskNotificationPage.getByText( - 'I want to proceed anyway' - ); - const count = await proceedAnyways.count(); - if (count) { - await proceedAnyways.click(); - } + await proceedAnyways(context); // Timeout needed until https://github.com/Synthetixio/synpress/issues/795 is fixed await page.waitForTimeout(10000); @@ -370,7 +362,7 @@ test.describe('Bridge', () => { await test.step('Fill data and click on deposit', async () => { await hasDropdownSymbol(page, 'TKN'); // Deposit asset - const depositButton = getByAriaLabel(page, 'Deposit'); + const depositButton = getByAriaLabel(page, 'Deposit', true); const depositInput = page.locator('input'); await depositInput.fill(DEPOSIT_AMOUNT); @@ -552,21 +544,7 @@ test.describe('Bridge', () => { // For some reason we need this even if we wait for load state on the metamask notification page await page.waitForTimeout(3000); - let metamaskNotificationPage = context - .pages() - .find((p) => p.url().includes('notification')); - if (!metamaskNotificationPage) { - metamaskNotificationPage = await context.waitForEvent('page', { - predicate: (page) => page.url().includes('notification'), - }); - } - const proceedAnyways = metamaskNotificationPage.getByText( - 'I want to proceed anyway' - ); - const count = await proceedAnyways.count(); - if (count) { - await proceedAnyways.click(); - } + await proceedAnyways(context); // Timeout needed until https://github.com/Synthetixio/synpress/issues/795 is fixed await page.waitForTimeout(5000); @@ -640,5 +618,45 @@ test.describe('Bridge', () => { expect(addressAfterRefresh).toEqual(address); expect(balanceTextAfterRefresh).toEqual(balanceText); }); + + await test.step('Check if transaction list reacts correctly to fuel wallet changes', async () => { + await goToTransactionsPage(page); + + await test.step('Change to account 2 should show loading and empty feedback', async () => { + await switchAccount(context, 'Account 2'); + const loading = getByAriaLabel(page, 'Loading Bridge Transactions'); + await loading.innerText(); + const noActivity = page.getByText('No activity yet'); + await noActivity.innerText(); + const subText = page.getByText( + "When you make a transaction you'll see it here" + ); + await subText.innerText(); + }); + + await test.step('Change to account 3 should show connect, but not loading', async () => { + await switchAccount(context, 'Account 3'); + const loading = getByAriaLabel(page, 'Loading Bridge Transactions'); + expect(await loading.count()).toBe(0); + const notDetected = page.getByText('Wallet not detected'); + await notDetected.innerText(); + const subText = page.getByText( + 'Connect a wallet to see your transactions' + ); + await subText.innerText(); + const connectButton = getButtonByText(page, 'Connect Fuel Wallet'); + expect(await connectButton.count()).toBe(1); + }); + + await test.step('Change to account 1 should show loading and transactions', async () => { + await switchAccount(context, 'Account 1'); + const loading = getByAriaLabel(page, 'Loading Bridge Transactions'); + await loading.innerText(); + await checkTxItemDone(page, depositEthTxId); + await checkTxItemDone(page, depositERC20TxId); + await checkTxItemDone(page, withdrawEthTxId); + await checkTxItemDone(page, withdrawERC20TxId); + }); + }); }); }); diff --git a/packages/app/playwright/e2e/utils/bridge.ts b/packages/app/playwright/e2e/utils/bridge.ts index c8ecbdcd..b320160b 100644 --- a/packages/app/playwright/e2e/utils/bridge.ts +++ b/packages/app/playwright/e2e/utils/bridge.ts @@ -1,4 +1,5 @@ -import { expect, type Page } from '@playwright/test'; +import { expect } from '@playwright/test'; +import type { BrowserContext, Page } from '@playwright/test'; import { shortAddress } from '../../../src/systems/Core/utils'; import { getButtonByText, getByAriaLabel } from '../../commons'; @@ -43,3 +44,21 @@ export const checkTxItemDone = async (page: Page, txHash: string) => { const settledText = await settled.innerText(); expect(settledText).toBeTruthy(); }; + +export const proceedAnyways = async (context: BrowserContext) => { + let metamaskNotificationPage = context + .pages() + .find((p) => p.url().includes('notification')); + if (!metamaskNotificationPage) { + metamaskNotificationPage = await context.waitForEvent('page', { + predicate: (page) => page.url().includes('notification'), + }); + } + const proceedAnyways = metamaskNotificationPage.getByText( + 'I want to proceed anyway' + ); + const count = await proceedAnyways.count(); + if (count) { + await proceedAnyways.click(); + } +};