[TypeScript] Convert playwright config and tests to TS (#4217)

* Convert playwright config and tests to TS

* Release notes

* Update VRT

* Dummy commit

* Delete js snapshots

* Fix call to expect

* Move extended expect and test to fixtures

* Fix wrong commit

* Fix typecheck error

* Update VRT

* Dummy commit to run GH actions

* Delete mobile budget test JS

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

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

@@ -1,12 +1,13 @@
-import { test, expect } from '@playwright/test';
+import { type Page } from '@playwright/test';
 
+import { expect, test } from './fixtures';
 import { ConfigurationPage } from './page-models/configuration-page';
 import { MobileNavigation } from './page-models/mobile-navigation';
 
 test.describe('Mobile Accounts', () => {
-  let page;
-  let navigation;
-  let configurationPage;
+  let page: Page;
+  let navigation: MobileNavigation;
+  let configurationPage: ConfigurationPage;
 
   test.beforeEach(async ({ browser }) => {
     page = await browser.newPage();

packages/desktop-client/e2e/accounts.test.ts

@@ -1,15 +1,17 @@
 import { join } from 'path';
 
-import { test, expect } from '@playwright/test';
+import { type Page } from '@playwright/test';
 
+import { expect, test } from './fixtures';
+import { type AccountPage } from './page-models/account-page';
 import { ConfigurationPage } from './page-models/configuration-page';
 import { Navigation } from './page-models/navigation';
 
 test.describe('Accounts', () => {
-  let page;
-  let navigation;
-  let configurationPage;
-  let accountPage;
+  let page: Page;
+  let navigation: Navigation;
+  let configurationPage: ConfigurationPage;
+  let accountPage: AccountPage;
 
   test.beforeEach(async ({ browser }) => {
     page = await browser.newPage();

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

@@ -1,40 +1,58 @@
-import { test, expect } from '@playwright/test';
+import { type Page } from '@playwright/test';
 
 import { amountToCurrency, currencyToAmount } from 'loot-core/shared/util';
 import * as monthUtils from 'loot-core/src/shared/months';
 
+import { expect, test } from './fixtures';
 import { ConfigurationPage } from './page-models/configuration-page';
+import { type MobileBudgetPage } from './page-models/mobile-budget-page';
 import { MobileNavigation } from './page-models/mobile-navigation';
 
-const copyLastMonthBudget = async (budgetPage, categoryName) => {
+const copyLastMonthBudget = async (
+  budgetPage: MobileBudgetPage,
+  categoryName: string,
+) => {
   const budgetMenuModal = await budgetPage.openBudgetMenu(categoryName);
   await budgetMenuModal.copyLastMonthBudget();
   await budgetMenuModal.close();
 };
 
-const setTo3MonthAverage = async (budgetPage, categoryName) => {
+const setTo3MonthAverage = async (
+  budgetPage: MobileBudgetPage,
+  categoryName: string,
+) => {
   const budgetMenuModal = await budgetPage.openBudgetMenu(categoryName);
   await budgetMenuModal.setTo3MonthAverage();
   await budgetMenuModal.close();
 };
 
-const setTo6MonthAverage = async (budgetPage, categoryName) => {
+const setTo6MonthAverage = async (
+  budgetPage: MobileBudgetPage,
+  categoryName: string,
+) => {
   const budgetMenuModal = await budgetPage.openBudgetMenu(categoryName);
   await budgetMenuModal.setTo6MonthAverage();
   await budgetMenuModal.close();
 };
 
-const setToYearlyAverage = async (budgetPage, categoryName) => {
+const setToYearlyAverage = async (
+  budgetPage: MobileBudgetPage,
+  categoryName: string,
+) => {
   const budgetMenuModal = await budgetPage.openBudgetMenu(categoryName);
   await budgetMenuModal.setToYearlyAverage();
   await budgetMenuModal.close();
 };
 
 async function setBudgetAverage(
-  budgetPage,
-  categoryName,
-  numberOfMonths,
-  setBudgetAverageFn,
+  budgetPage: MobileBudgetPage,
+  categoryName: string,
+  numberOfMonths: number,
+  setBudgetAverageFn: (
+    budgetPage: MobileBudgetPage,
+    categoryName: string,
+    numberOfMonths: number,
+  ) => Promise<void>,
 ) {
   let totalSpent = 0;
 
@@ -42,7 +60,7 @@ async function setBudgetAverage(
     await budgetPage.goToPreviousMonth();
     const spentButton = await budgetPage.getButtonForSpent(categoryName);
     const spent = await spentButton.textContent();
-    totalSpent += currencyToAmount(spent);
+    totalSpent += currencyToAmount(spent) ?? 0;
   }
 
   // Calculate average amount
@@ -58,14 +76,14 @@ async function setBudgetAverage(
   return averageSpent;
 }
 
-const budgetTypes = ['Envelope', 'Tracking'];
+const budgetTypes = ['Envelope', 'Tracking'] as const;
 
 budgetTypes.forEach(budgetType => {
   test.describe(`Mobile Budget [${budgetType}]`, () => {
-    let page;
-    let navigation;
-    let configurationPage;
-    let previousGlobalIsTesting;
+    let page: Page;
+    let navigation: MobileNavigation;
+    let configurationPage: ConfigurationPage;
+    let previousGlobalIsTesting: boolean;
 
     test.beforeAll(() => {
       // TODO: Hack, properly mock the currentMonth function
@@ -270,11 +288,13 @@ budgetTypes.forEach(budgetType => {
       await expect(page).toMatchThemeScreenshots();
     });
 
-    [
-      [3, setTo3MonthAverage],
-      [6, setTo6MonthAverage],
-      [12, setToYearlyAverage],
-    ].forEach(([numberOfMonths, setBudgetAverageFn]) => {
+    (
+      [
+        [3, setTo3MonthAverage],
+        [6, setTo6MonthAverage],
+        [12, setToYearlyAverage],
+      ] as const
+    ).forEach(([numberOfMonths, setBudgetAverageFn]) => {
       test(`set budget to ${numberOfMonths} month average`, async () => {
         const budgetPage = await navigation.goToBudgetPage();