Fix VRT

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

@@ -12,6 +12,18 @@ budgetTypes.forEach(budgetType => {
     let page;
     let navigation;
     let configurationPage;
+    let previousGlobalIsTesting;
+
+    test.beforeAll(() => {
+      // TODO: Hack, properly mock the currentMonth function
+      previousGlobalIsTesting = global.IS_TESTING;
+      global.IS_TESTING = true;
+    });
+
+    test.afterAll(() => {
+      // TODO: Hack, properly mock the currentMonth function
+      global.IS_TESTING = previousGlobalIsTesting;
+    });
 
     test.beforeEach(async ({ browser }) => {
       page = await browser.newPage();
@@ -38,6 +50,9 @@ budgetTypes.forEach(budgetType => {
 
     test('loads the budget page with budgeted amounts', async () => {
       const budgetPage = await navigation.goToBudgetPage();
+      await expect(budgetPage.budgetTable).toBeVisible({
+        timeout: 10000,
+      });
 
       await expect(budgetPage.categoryNames).toHaveText([
         'Food',
@@ -62,75 +77,118 @@ budgetTypes.forEach(budgetType => {
 
     test('checks that clicking the budgeted cell opens the budget menu modal', async () => {
       const budgetPage = await navigation.goToBudgetPage();
-      await expect(budgetPage.budgetTable).toBeVisible();
+      await expect(budgetPage.budgetTable).toBeVisible({
+        timeout: 10000,
+      });
+
+      const categoryName = 'Food';
+      await budgetPage.openBudgetMenu(categoryName);
 
-      await budgetPage.openBudgetMenu('Food');
+      const budgetMenuModal = page.getByRole('dialog');
+      const budgetMenuModalTitle = budgetMenuModal.getByLabel('Modal title');
 
-      const budgetMenuModal = page.getByTestId('envelope-budget-menu-modal');
-      await expect(budgetMenuModal).toHaveTitle('Food');
+      await expect(budgetMenuModalTitle).toHaveText(categoryName);
       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 expect(budgetPage.budgetTable).toBeVisible({
+        timeout: 10000,
+      });
 
-      const accountPage = await budgetPage.openSpentPage('Food');
+      const categoryName = 'Food';
+      const accountPage = await budgetPage.openSpentPage(categoryName);
 
-      await expect(accountPage.heading).toHaveText('Food');
+      await expect(accountPage.heading).toContainText(categoryName);
       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 expect(budgetPage.budgetTable).toBeVisible({
+        timeout: 10000,
+      });
 
-      await budgetPage.openBalanceMenu('Food');
+      const categoryName = 'Food';
+      await budgetPage.openBalanceMenu(categoryName);
 
-      const balanceMenuModal = page.getByTestId('envelope-balance-menu-modal');
-      await expect(balanceMenuModal).toHaveTitle('Food');
+      const balanceMenuModal = page.getByRole('dialog');
+      const balanceMenuModalTitle = balanceMenuModal.getByLabel('Modal title');
+
+      await expect(balanceMenuModalTitle).toHaveText(categoryName);
       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 expect(budgetPage.budgetTable).toBeVisible({
+        timeout: 10000,
+      });
 
       await budgetPage.openMonthMenu();
-
-      const monthMenuModal = page.getByTestId(
-        'envelope-budget-month-menu-modal',
-      );
-
       const currentMonth = monthUtils.currentMonth();
-      const monthTitle = monthUtils.format(currentMonth, 'MMMM ‘yy');
+      const displayMonth = monthUtils.format(currentMonth, 'MMMM ‘yy');
+
+      const monthMenuModal = page.getByRole('dialog');
+      const monthMenuModalTitle = monthMenuModal.getByLabel('Modal title');
 
-      await expect(monthMenuModal).toHaveTitle(monthTitle);
+      await expect(monthMenuModalTitle).toHaveText(displayMonth);
       await expect(page).toMatchThemeScreenshots();
     });
 
     test('updates the budgeted amount', async () => {
       const budgetPage = await navigation.goToBudgetPage();
-      await expect(budgetPage.budgetTable).toBeVisible();
+      await expect(budgetPage.budgetTable).toBeVisible({
+        timeout: 10000,
+      });
+
+      const categoryName = 'Food';
 
       // Set to 100.00
-      await budgetPage.setBudget('Food', 10000);
+      await budgetPage.setBudget(categoryName, 10000);
 
-      const budgetedButton = await budgetPage.getBudgetedButton('Food');
+      const budgetedButton = await budgetPage.getBudgetedButton(categoryName);
 
       await expect(budgetedButton).toHaveText('100.00');
       await expect(page).toMatchThemeScreenshots();
     });
 
-    test('checks that clicking the To Budget/Overbudgeted amount opens the budget summary menu modal', async () => {
-      const budgetPage = await navigation.goToBudgetPage();
+    if (budgetType === 'Envelope') {
+      test('checks that clicking the To Budget/Overbudgeted amount opens the budget summary menu modal', async () => {
+        const budgetPage = await navigation.goToBudgetPage();
 
-      await budgetPage.openEnvelopeBudgetSummaryMenu();
+        await expect(budgetPage.budgetTable).toBeVisible({
+          timeout: 10000,
+        });
 
-      const summaryModal = page.getByTestId('envelope-budget-summary-modal');
-      await expect(summaryModal).toHaveTitle('Budget Summary');
-      await expect(page).toMatchThemeScreenshots();
-    });
+        await budgetPage.openEnvelopeBudgetSummaryMenu();
+
+        const summaryModal = page.getByRole('dialog');
+        const summaryModalTitle = summaryModal.getByLabel('Modal title');
+
+        await expect(summaryModalTitle).toHaveText('Budget Summary');
+        await expect(page).toMatchThemeScreenshots();
+      });
+    }
+
+    if (budgetType === 'Tracking') {
+      test('checks that clicking the Saved/Projected Savings/Overspent amount opens the budget summary menu modal', async () => {
+        const budgetPage = await navigation.goToBudgetPage();
+
+        await expect(budgetPage.budgetTable).toBeVisible({
+          timeout: 10000,
+        });
+
+        await budgetPage.openTrackingBudgetSummaryMenu();
+
+        const summaryModal = page.getByRole('dialog');
+        const summaryModalTitle = summaryModal.getByLabel('Modal title');
+
+        await expect(summaryModalTitle).toHaveText('Budget Summary');
+        await expect(page).toMatchThemeScreenshots();
+      });
+    }
   });
 });

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

@@ -9,24 +9,51 @@ export class MobileBudgetPage {
       .getByTestId('category-name');
 
     this.heading = page.getByRole('heading');
+    this.selectedBudgetMonthButton = this.heading.getByLabel(
+      'Selected budget month',
+    );
+
     this.budgetTableHeader = page.getByTestId('budget-table-header');
-    this.budgetTable = page.getByTestId('budget-table');
-  }
 
-  async toggleVisibleColumns() {
-    const budgetedHeaderButton = this.budgetTableHeader.getByRole('button', {
+    this.toBudgetButton = this.budgetTableHeader.getByRole('button', {
+      name: 'To Budget',
+    });
+    this.overbudgetedButton = this.budgetTableHeader.getByRole('button', {
+      name: 'Overbudgeted',
+    });
+
+    this.savedButton = this.budgetTableHeader.getByRole('button', {
+      name: 'Saved',
+    });
+    this.projectedSavingsButton = this.budgetTableHeader.getByRole('button', {
+      name: 'Projected Savings',
+    });
+    this.overspentButton = this.budgetTableHeader.getByRole('button', {
+      name: 'Overspent',
+    });
+
+    this.budgetedHeaderButton = this.budgetTableHeader.getByRole('button', {
       name: 'Budgeted',
     });
+    this.spentHeaderButton = this.page.getByRole('button', { name: 'Spent' });
+
+    this.budgetTable = page.getByTestId('budget-table');
+    this.budgetType =
+      this.getEnvelopeBudgetSummaryButton({
+        throwIfNotFound: false,
+      }) !== null
+        ? 'Envelope'
+        : 'Tracking';
+  }
 
-    if (await budgetedHeaderButton.isVisible()) {
-      await budgetedHeaderButton.click();
+  async toggleVisibleColumns() {
+    if (await this.budgetedHeaderButton.isVisible()) {
+      await this.budgetedHeaderButton.click();
       return;
     }
 
-    const spentHeaderButton = this.page.getByRole('button', { name: 'Spent' });
-
-    if (await spentHeaderButton.isVisible()) {
-      await spentHeaderButton.click();
+    if (await this.spentHeaderButton.isVisible()) {
+      await this.spentHeaderButton.click();
       return;
     }
 
@@ -101,60 +128,56 @@ export class MobileBudgetPage {
   }
 
   async openMonthMenu() {
-    const monthButton = this.page.getByTestId('page-header-month-button');
-    await monthButton.click();
+    await this.selectedBudgetMonthButton.click();
   }
 
-  async openEnvelopeBudgetSummaryMenu() {
-    const toBudgetButton = this.page.getByRole('button', { name: 'To Budget' });
-
-    if (await toBudgetButton.isVisible()) {
-      await toBudgetButton.click();
-      return;
+  async getEnvelopeBudgetSummaryButton({ throwIfNotFound = true } = {}) {
+    if (await this.toBudgetButton.isVisible()) {
+      return this.toBudgetButton;
     }
 
-    const overbudgetedButton = this.page.getByRole('button', {
-      name: 'Overbudgeted',
-    });
+    if (await this.overbudgetedButton.isVisible()) {
+      return this.overbudgetedButton;
+    }
 
-    if (await overbudgetedButton.isVisible()) {
-      await overbudgetedButton.click();
-      return;
+    if (!throwIfNotFound) {
+      return null;
     }
 
     throw new Error(
       'To Budget/Overbudgeted button could not be located on the page',
     );
   }
 
-  async openTrackingBudgetSummaryMenu() {
-    const savedButton = this.page.getByRole('button', { name: 'Saved' });
+  async openEnvelopeBudgetSummaryMenu() {
+    const budgetSummaryButton = await this.getEnvelopeBudgetSummaryButton();
+    await budgetSummaryButton.click();
+  }
 
-    if ((await savedButton.count()) > 0) {
-      await savedButton.click();
-      return;
+  async getTrackingBudgetSummaryButton({ throwIfNotFound = true } = {}) {
+    if (await this.savedButton.isVisible()) {
+      return this.savedButton;
     }
 
-    const projectedSavingsButton = this.page.getByRole('button', {
-      name: 'Projected Savings',
-    });
-
-    if ((await projectedSavingsButton.count()) > 0) {
-      await projectedSavingsButton.click();
-      return;
+    if (await this.projectedSavingsButton.isVisible()) {
+      return this.projectedSavingsButton;
     }
 
-    const overspentButton = this.page.getByRole('button', {
-      name: 'Overspent',
-    });
+    if (await this.overspentButton.isVisible()) {
+      return this.overspentButton;
+    }
 
-    if ((await overspentButton.count()) > 0) {
-      await overspentButton.click();
-      return;
+    if (!throwIfNotFound) {
+      return null;
     }
 
     throw new Error(
       'Saved/Projected Savings/Overspent button could not be located on the page',
     );
   }
+
+  async openTrackingBudgetSummaryMenu() {
+    const budgetSummaryButton = await this.getTrackingBudgetSummaryButton();
+    await budgetSummaryButton.click();
+  }
 }

packages/desktop-client/src/components/common/Modal.tsx

@@ -418,6 +418,7 @@ export function ModalTitle({
       {shrinkOnOverflow ? (
         <AutoTextSize
           as={Text}
+          aria-label="Modal title"
           minFontSizePx={15}
           maxFontSizePx={25}
           onClick={onTitleClick}
@@ -433,6 +434,7 @@ export function ModalTitle({
         </AutoTextSize>
       ) : (
         <TextOneLine
+          aria-label="Modal title"
           onClick={onTitleClick}
           style={{
             fontSize: 25,

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

@@ -1981,7 +1981,7 @@ function MonthSelector({
         onPress={() => {
           onOpenMonthMenu?.(month);
         }}
-        data-testid="page-header-month-button"
+        aria-label="Selected budget month"
       >
         <Text style={styles.underlinedText}>
           {monthUtils.format(month, 'MMMM ‘yy')}