(VRT) darkmode visual regression tests (#1860)

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

@@ -2,7 +2,6 @@ import { test, expect } from '@playwright/test';
 
 import { ConfigurationPage } from './page-models/configuration-page';
 import { Navigation } from './page-models/navigation';
-import screenshotConfig from './screenshot.config';
 
 test.describe('Accounts', () => {
   let page;
@@ -35,7 +34,7 @@ test.describe('Accounts', () => {
     await expect(transaction.category).toHaveText('Starting Balances');
     await expect(transaction.debit).toHaveText('');
     await expect(transaction.credit).toHaveText('100.00');
-    await expect(page).toHaveScreenshot(screenshotConfig(page));
+    await expect(page).toMatchThemeScreenshots();
   });
 
   test('closes an account', async () => {
@@ -45,10 +44,10 @@ test.describe('Accounts', () => {
 
     const modal = await accountPage.clickCloseAccount();
     await modal.selectTransferAccount('Vanguard 401k');
-    await expect(page).toHaveScreenshot(screenshotConfig(page));
+    await expect(page).toMatchThemeScreenshots();
     await modal.closeAccount();
 
     await expect(accountPage.accountName).toHaveText('Closed: Roth IRA');
-    await expect(page).toHaveScreenshot(screenshotConfig(page));
+    await expect(page).toMatchThemeScreenshots();
   });
 });

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

 import { test, expect } from '@playwright/test';
 
 import { ConfigurationPage } from './page-models/configuration-page';
-import screenshotConfig from './screenshot.config';
 
 test.describe('Budget', () => {
   let page;
@@ -34,7 +33,7 @@ test.describe('Budget', () => {
     await expect(summary.getByText(/^Overspent in /)).toBeVisible();
     await expect(summary.getByText('Budgeted')).toBeVisible();
     await expect(summary.getByText('For Next Month')).toBeVisible();
-    await expect(page).toHaveScreenshot(screenshotConfig(page));
+    await expect(page).toMatchThemeScreenshots();
   });
 
   test('transfer funds to another category', async () => {
@@ -47,7 +46,7 @@ test.describe('Budget', () => {
     expect(await budgetPage.getBalanceForRow(2)).toEqual(
       currentFundsA + currentFundsB,
     );
-    await expect(page).toHaveScreenshot(screenshotConfig(page));
+    await expect(page).toMatchThemeScreenshots();
   });
 
   test('budget table is rendered', async () => {

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

@@ -2,7 +2,6 @@ import { test, expect } from '@playwright/test';
 
 import { ConfigurationPage } from './page-models/configuration-page';
 import { MobileNavigation } from './page-models/mobile-navigation';
-import screenshotConfig from './screenshot.config';
 
 test.describe('Mobile', () => {
   let page;
@@ -44,7 +43,7 @@ test.describe('Mobile', () => {
       'Water',
       'Power',
     ]);
-    await expect(page).toHaveScreenshot(screenshotConfig(page));
+    await expect(page).toMatchThemeScreenshots();
   });
 
   test('opens the accounts page and asserts on balances', async () => {
@@ -54,7 +53,7 @@ test.describe('Mobile', () => {
 
     await expect(account.name).toHaveText('Ally Savings');
     await expect(account.balance).toHaveText('7,653.00');
-    await expect(page).toHaveScreenshot(screenshotConfig(page));
+    await expect(page).toMatchThemeScreenshots();
   });
 
   test('opens individual account page and checks that filtering is working', async () => {
@@ -65,21 +64,21 @@ test.describe('Mobile', () => {
     expect(await accountPage.getBalance()).toBeGreaterThan(0);
 
     await expect(accountPage.noTransactionsFoundError).not.toBeVisible();
-    await expect(page).toHaveScreenshot(screenshotConfig(page));
+    await expect(page).toMatchThemeScreenshots();
 
     await accountPage.searchByText('nothing should be found');
     await expect(accountPage.noTransactionsFoundError).toBeVisible();
     await expect(accountPage.transactions).toHaveCount(0);
-    await expect(page).toHaveScreenshot(screenshotConfig(page));
+    await expect(page).toMatchThemeScreenshots();
 
     await accountPage.searchByText('Kroger');
     await expect(accountPage.transactions).not.toHaveCount(0);
-    await expect(page).toHaveScreenshot(screenshotConfig(page));
+    await expect(page).toMatchThemeScreenshots();
   });
 
   test('creates a transaction via footer button', async () => {
     const transactionEntryPage = await navigation.goToTransactionEntryPage();
-    await expect(page).toHaveScreenshot(screenshotConfig(page));
+    await expect(page).toMatchThemeScreenshots();
 
     await expect(transactionEntryPage.header).toHaveText('New Transaction');
 
@@ -96,14 +95,14 @@ test.describe('Mobile', () => {
       page.getByTestId('account-field'),
       'Ally Savings',
     );
-    await expect(page).toHaveScreenshot(screenshotConfig(page));
+    await expect(page).toMatchThemeScreenshots();
 
     const accountPage = await transactionEntryPage.createTransaction();
 
     await expect(accountPage.transactions.nth(0)).toHaveText(
       'KrogerClothing-12.34',
     );
-    await expect(page).toHaveScreenshot(screenshotConfig(page));
+    await expect(page).toMatchThemeScreenshots();
   });
 
   test('creates a transaction from `/accounts/:id` page', async () => {
@@ -112,7 +111,7 @@ test.describe('Mobile', () => {
     const transactionEntryPage = await accountPage.clickCreateTransaction();
 
     await expect(transactionEntryPage.header).toHaveText('New Transaction');
-    await expect(page).toHaveScreenshot(screenshotConfig(page));
+    await expect(page).toMatchThemeScreenshots();
 
     await transactionEntryPage.amountField.fill('12.34');
     await transactionEntryPage.fillField(
@@ -133,7 +132,7 @@ test.describe('Mobile', () => {
 
   test('checks that settings page can be opened', async () => {
     const settingsPage = await navigation.goToSettingsPage();
-    await expect(page).toHaveScreenshot(screenshotConfig(page));
+    await expect(page).toMatchThemeScreenshots();
 
     const downloadPromise = page.waitForEvent('download');
 
@@ -144,6 +143,6 @@ test.describe('Mobile', () => {
     expect(await download.suggestedFilename()).toMatch(
       /^\d{4}-\d{2}-\d{2}-.*.zip$/,
     );
-    await expect(page).toHaveScreenshot(screenshotConfig(page));
+    await expect(page).toMatchThemeScreenshots();
   });
 });