Mobile VRTs

packages/desktop-client/e2e/accounts.mobile.test.js

@@ -40,13 +40,13 @@ test.describe('Mobile Accounts', () => {
     const accountPage = await accountsPage.openNthAccount(0);
 
     await expect(accountPage.heading).toHaveText('Bank of America');
-    expect(await accountPage.getBalance()).toBeGreaterThan(0);
-
-    await expect(accountPage.noTransactionsFoundError).not.toBeVisible();
+    await expect(accountPage.transactionList).toBeVisible();
+    await expect(await accountPage.getBalance()).toBeGreaterThan(0);
+    await expect(accountPage.noTransactionsMessage).not.toBeVisible();
     await expect(page).toMatchThemeScreenshots();
 
     await accountPage.searchByText('nothing should be found');
-    await expect(accountPage.noTransactionsFoundError).toBeVisible();
+    await expect(accountPage.noTransactionsMessage).toBeVisible();
     await expect(accountPage.transactions).toHaveCount(0);
     await expect(page).toMatchThemeScreenshots();
 

packages/desktop-client/e2e/budget.mobile.test.js

@@ -51,42 +51,58 @@ test.describe('Mobile Budget [Envelope]', () => {
 
   test('checks that clicking the budgeted cell opens the budget menu modal', async () => {
     const budgetPage = await navigation.goToBudgetPage();
+    await expect(budgetPage.budgetTable).toBeVisible();
 
     await budgetPage.openBudgetMenu('Food');
 
+    const budgetMenuModal = page.getByTestId('envelope-budget-menu-modal');
+    await expect(budgetMenuModal).toBeVisible();
     await expect(page).toMatchThemeScreenshots();
   });
 
   test('checks that clicking spent cell redirects to the category transactions page', async () => {
     const budgetPage = await navigation.goToBudgetPage();
+    await expect(budgetPage.budgetTable).toBeVisible();
 
-    await budgetPage.openSpentPage('Food');
+    const accountPage = await budgetPage.openSpentPage('Food');
 
+    await expect(accountPage.transactionList).toBeVisible();
     await expect(page).toMatchThemeScreenshots();
   });
 
   test('checks that clicking the balance button opens the balance menu modal', async () => {
     const budgetPage = await navigation.goToBudgetPage();
+    await expect(budgetPage.budgetTable).toBeVisible();
 
     await budgetPage.openBalanceMenu('Food');
 
+    const balanceMenuModal = page.getByTestId('envelope-balance-menu-modal');
+    await expect(balanceMenuModal).toBeVisible();
     await expect(page).toMatchThemeScreenshots();
   });
 
   test('checks that clicking the month in the page header opens the month menu modal', async () => {
     const budgetPage = await navigation.goToBudgetPage();
+    await expect(budgetPage.budgetTable).toBeVisible();
 
     await budgetPage.openMonthMenu();
 
+    const monthMenuModal = page.getByTestId('envelope-budget-month-menu-modal');
+    await expect(monthMenuModal).toBeVisible();
     await expect(page).toMatchThemeScreenshots();
   });
 
   test('updates the budgeted amount', async () => {
     const budgetPage = await navigation.goToBudgetPage();
+    await expect(budgetPage.budgetTable).toBeVisible();
 
     // Set to 100.00
     await budgetPage.setBudget('Food', 10000);
 
+    const budgetedButton = await budgetPage.getBudgetedButton('Food');
+
+    await expect(budgetedButton).toHaveText('100.00');
+
     await expect(page).toMatchThemeScreenshots();
   });
 
@@ -95,6 +111,8 @@ test.describe('Mobile Budget [Envelope]', () => {
 
     await budgetPage.openEnvelopeBudgetSummaryMenu();
 
+    const summaryModal = page.getByTestId('envelope-budget-summary-modal');
+    await expect(summaryModal).toBeVisible();
     await expect(page).toMatchThemeScreenshots();
   });
 });
@@ -157,46 +175,58 @@ test.describe('Mobile Budget [Tracking]', () => {
     await setBudgetType('tracking');
 
     const budgetPage = await navigation.goToBudgetPage();
+    await expect(budgetPage.budgetTable).toBeVisible();
 
     await budgetPage.openBudgetMenu('Food');
 
+    const budgetMenuModal = page.getByTestId('tracking-budget-menu-modal');
+    await expect(budgetMenuModal).toBeVisible();
     await expect(page).toMatchThemeScreenshots();
   });
 
   test('checks that clicking spent cell redirects to the category transactions page', async () => {
     await setBudgetType('tracking');
 
     const budgetPage = await navigation.goToBudgetPage();
+    await expect(budgetPage.budgetTable).toBeVisible();
 
-    await budgetPage.openSpentPage('Food');
+    const accountPage = await budgetPage.openSpentPage('Food');
 
+    await expect(accountPage.transactionList).toBeVisible();
     await expect(page).toMatchThemeScreenshots();
   });
 
   test('checks that clicking the balance button opens the balance menu modal', async () => {
     await setBudgetType('tracking');
 
     const budgetPage = await navigation.goToBudgetPage();
+    await expect(budgetPage.budgetTable).toBeVisible();
 
     await budgetPage.openBalanceMenu('Food');
 
+    const balanceMenuModal = page.getByTestId('tracking-balance-menu-modal');
+    await expect(balanceMenuModal).toBeVisible();
     await expect(page).toMatchThemeScreenshots();
   });
 
   test('checks that clicking the month in the page header opens the month menu modal', async () => {
     await setBudgetType('tracking');
 
     const budgetPage = await navigation.goToBudgetPage();
+    await expect(budgetPage.budgetTable).toBeVisible();
 
     await budgetPage.openMonthMenu();
 
+    const monthMenuModal = page.getByTestId('tracking-budget-month-menu-modal');
+    await expect(monthMenuModal).toBeVisible();
     await expect(page).toMatchThemeScreenshots();
   });
 
   test('updates the budgeted amount', async () => {
     await setBudgetType('tracking');
 
     const budgetPage = await navigation.goToBudgetPage();
+    await expect(budgetPage.budgetTable).toBeVisible();
 
     // Set to 100.00
     await budgetPage.setBudget('Food', 10000);
@@ -212,9 +242,12 @@ test.describe('Mobile Budget [Tracking]', () => {
     await setBudgetType('tracking');
 
     const budgetPage = await navigation.goToBudgetPage();
+    await expect(budgetPage.budgetTable).toBeVisible();
 
     await budgetPage.openTrackingBudgetSummaryMenu();
 
+    const summaryModal = page.getByTestId('tracking-budget-summary-modal');
+    await expect(summaryModal).toBeVisible();
     await expect(page).toMatchThemeScreenshots();
   });
 });

packages/desktop-client/e2e/page-models/mobile-account-page.js

@@ -6,9 +6,9 @@ export class MobileAccountPage {
 
     this.heading = page.getByRole('heading');
     this.balance = page.getByTestId('transactions-balance');
-    this.noTransactionsFoundError = page.getByText('No transactions');
+    this.noTransactionsMessage = page.getByText('No transactions');
     this.searchBox = page.getByPlaceholder(/^Search/);
-    this.transactionList = page.getByLabel('transaction list');
+    this.transactionList = page.getByLabel('Transaction list');
     this.transactions = this.transactionList.getByRole('button');
     this.createTransactionButton = page.getByRole('button', {
       name: 'Add Transaction',

packages/desktop-client/e2e/page-models/mobile-budget-page.js

@@ -1,3 +1,4 @@
+import { MobileAccountPage } from './mobile-account-page';
 import { MobileNavigation } from './mobile-navigation';
 
 export class MobileBudgetPage {
@@ -8,35 +9,37 @@ export class MobileBudgetPage {
       .getByTestId('budget-groups')
       .getByTestId('category-name');
 
+    this.budgetTableHeader = page.getByTestId('budget-table-header');
+    this.budgetTable = page.getByTestId('budget-table');
     this.navigation = new MobileNavigation(page);
   }
 
   async toggleVisibleColumns() {
-    // await this.page.getByTestId('toggle-budget-table-columns').click();
-    const budgetTableHeader = this.page.getByTestId('budget-table-header');
-    const budgetedHeaderButton = budgetTableHeader
-      .getByRole('button', {
-        name: 'Budgeted',
-      })
-      .locator('visible=true');
+    const budgetedHeaderButton = this.budgetTableHeader.getByRole('button', {
+      name: 'Budgeted',
+    });
 
     if ((await budgetedHeaderButton.count()) > 0) {
       await budgetedHeaderButton.click();
       return;
     }
 
-    const spentHeaderButton = this.page
-      .getByRole('button', { name: 'Spent' })
-      .locator('visible=true');
-    await spentHeaderButton.click();
+    const spentHeaderButton = this.page.getByRole('button', { name: 'Spent' });
+
+    if ((await spentHeaderButton.count()) > 0) {
+      await spentHeaderButton.click();
+      return;
+    }
+
+    throw new Error('Budgeted/Spent columns could not be located');
   }
 
   async getBudgetedButton(categoryName) {
-    let budgetedButton = this.page
-      .getByTestId(`budgeted-${categoryName}-button`)
-      .locator('visible=true');
+    let budgetedButton = this.page.getByTestId(
+      `budgeted-${categoryName}-button`,
+    );
 
-    if ((await budgetedButton.count()) === 0) {
+    if (!(await budgetedButton.isVisible())) {
       await this.toggleVisibleColumns();
       budgetedButton = await this.getBudgetedButton(categoryName);
     }
@@ -58,11 +61,9 @@ export class MobileBudgetPage {
   }
 
   async getSpentButton(categoryName) {
-    let budgetedButton = this.page
-      .getByTestId(`spent-${categoryName}-button`)
-      .locator('visible=true');
+    let budgetedButton = this.page.getByTestId(`spent-${categoryName}-button`);
 
-    if ((await budgetedButton.count()) === 0) {
+    if (!(await budgetedButton.isVisible())) {
       await this.toggleVisibleColumns();
       budgetedButton = await this.getSpentButton(categoryName);
     }
@@ -73,6 +74,8 @@ export class MobileBudgetPage {
   async openSpentPage(categoryName) {
     const spentButton = await this.getSpentButton(categoryName);
     await spentButton.click();
+
+    return new MobileAccountPage(this.page);
   }
 
   async openBalanceMenu(categoryName) {
@@ -89,45 +92,44 @@ export class MobileBudgetPage {
 
   async openEnvelopeBudgetSummaryMenu() {
     const toBudgetButton = this.page.getByRole('button', { name: 'To Budget' });
-    const toBudgetButtonExists = (await toBudgetButton.count()) > 0;
-    if (toBudgetButtonExists) {
+
+    if ((await toBudgetButton.count()) > 0) {
       await toBudgetButton.click();
       return;
     }
 
     const overbudgetedButton = this.page.getByRole('button', {
       name: 'Overbudgeted',
     });
-    const overbudgetedButtonExists = (await overbudgetedButton.count()) > 0;
-    if (overbudgetedButtonExists) {
+
+    if ((await overbudgetedButton.count()) > 0) {
       await overbudgetedButton.click();
       return;
     }
   }
 
   async openTrackingBudgetSummaryMenu() {
     const savedButton = this.page.getByRole('button', { name: 'Saved' });
-    const savedButtonExists = (await savedButton.count()) > 0;
-    if (savedButtonExists) {
+
+    if ((await savedButton.count()) > 0) {
       await savedButton.click();
       return;
     }
 
     const projectedSavingsButton = this.page.getByRole('button', {
       name: 'Projected Savings',
     });
-    const projectedSavingsButtonExists =
-      (await projectedSavingsButton.count()) > 0;
-    if (projectedSavingsButtonExists) {
+
+    if ((await projectedSavingsButton.count()) > 0) {
       await projectedSavingsButton.click();
       return;
     }
 
     const overspentButton = this.page.getByRole('button', {
       name: 'Overspent',
     });
-    const overspentButtonExists = (await overspentButton.count()) > 0;
-    if (overspentButtonExists) {
+
+    if ((await overspentButton.count()) > 0) {
       await overspentButton.click();
       return;
     }

packages/desktop-client/src/components/mobile/budget/BudgetTable.jsx

@@ -1759,7 +1759,6 @@ function BudgetTableHeader({
                   ...buttonStyle,
                   width: columnWidth,
                 }}
-                data-testid="toggle-budget-table-columns"
               >
                 <View style={{ flex: 1, alignItems: 'flex-end' }}>
                   <View style={{ flexDirection: 'row', alignItems: 'center' }}>

packages/desktop-client/src/components/mobile/transactions/TransactionList.jsx

@@ -91,6 +91,7 @@ export function TransactionList({
   if (isLoading) {
     return (
       <View
+        aria-label="Loading..."
         style={{
           flex: 1,
           justifyContent: 'center',
@@ -107,7 +108,7 @@ export function TransactionList({
       {scrollProps.ListHeaderComponent}
       <ListBox
         {...scrollProps}
-        aria-label="transaction list"
+        aria-label="Transaction list"
         label=""
         loadMore={onLoadMore}
         selectionMode="none"