(VRT) darkmode visual regression tests (#1860)

packages/desktop-client/e2e/schedules.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('Schedules', () => {
   let page;
@@ -28,7 +27,7 @@ test.describe('Schedules', () => {
   });
 
   test('checks the page visuals', async () => {
-    await expect(page).toHaveScreenshot(screenshotConfig(page));
+    await expect(page).toMatchThemeScreenshots();
   });
 
   test('creates a new schedule, posts the transaction and later completes it', async () => {
@@ -43,11 +42,11 @@ test.describe('Schedules', () => {
     await expect(schedule.account).toHaveText('HSBC');
     await expect(schedule.amount).toHaveText('~25.00');
     await expect(schedule.status).toHaveText('Due');
-    await expect(page).toHaveScreenshot(screenshotConfig(page));
+    await expect(page).toMatchThemeScreenshots();
 
     await schedulesPage.postNthSchedule(2);
     await expect(schedulesPage.getNthSchedule(2).status).toHaveText('Paid');
-    await expect(page).toHaveScreenshot(screenshotConfig(page));
+    await expect(page).toMatchThemeScreenshots();
 
     // Go to transactions page
     const accountPage = await navigation.goToAccountPage('HSBC');
@@ -77,7 +76,7 @@ test.describe('Schedules', () => {
     await expect(schedulesPage.getNthScheduleRow(4)).toHaveText(
       'Show completed schedules',
     );
-    await expect(page).toHaveScreenshot(screenshotConfig(page));
+    await expect(page).toMatchThemeScreenshots();
 
     // Schedules search shouldn't shrink with many schedules
     for (let i = 0; i < 15; i++) {
@@ -87,6 +86,6 @@ test.describe('Schedules', () => {
         amount: 0,
       });
     }
-    await expect(page).toHaveScreenshot(screenshotConfig(page));
+    await expect(page).toMatchThemeScreenshots();
   });
 });

packages/desktop-client/e2e/screenshot.config.js

-export default function screenshotConfig(page) {
-  return {
-    // eslint-disable-next-line rulesdir/typography
-    mask: [page.locator('[data-vrt-mask="true"]')],
-  };
-}

packages/desktop-client/e2e/settings.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('Settings', () => {
   let page;
@@ -28,7 +27,7 @@ test.describe('Settings', () => {
   });
 
   test('checks the page visuals', async () => {
-    await expect(page).toHaveScreenshot(screenshotConfig(page));
+    await expect(page).toMatchThemeScreenshots();
   });
 
   test('downloads the export of the budget', async () => {

packages/desktop-client/e2e/transactions.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('Transactions', () => {
   let page;
@@ -28,7 +27,7 @@ test.describe('Transactions', () => {
   });
 
   test('checks the page visuals', async () => {
-    await expect(page).toHaveScreenshot(screenshotConfig(page));
+    await expect(page).toMatchThemeScreenshots();
   });
 
   test.describe('filters transactions', () => {
@@ -39,12 +38,12 @@ test.describe('Transactions', () => {
 
     test('by date', async () => {
       const filterTooltip = await accountPage.filterBy('Date');
-      await expect(filterTooltip.page).toHaveScreenshot(screenshotConfig(page));
+      await expect(filterTooltip.page).toMatchThemeScreenshots();
 
       // Open datepicker
       await page.keyboard.press('Space');
       const datepicker = page.getByTestId('date-select-tooltip');
-      await expect(datepicker).toHaveScreenshot(screenshotConfig(page));
+      await expect(datepicker).toMatchThemeScreenshots();
 
       // Select "is xxxxx"
       await datepicker.getByRole('button', { name: '20' }).click();
@@ -52,16 +51,16 @@ test.describe('Transactions', () => {
 
       // Assert that there are no transactions
       await expect(accountPage.transactionTable).toHaveText('No transactions');
-      await expect(page).toHaveScreenshot(screenshotConfig(page));
+      await expect(page).toMatchThemeScreenshots();
     });
 
     test('by category', async () => {
       const filterTooltip = await accountPage.filterBy('Category');
-      await expect(filterTooltip.page).toHaveScreenshot(screenshotConfig(page));
+      await expect(filterTooltip.page).toMatchThemeScreenshots();
 
       // Type in the autocomplete box
       const autocomplete = page.getByTestId('autocomplete');
-      await expect(autocomplete).toHaveScreenshot(screenshotConfig(page));
+      await expect(autocomplete).toMatchThemeScreenshots();
 
       // Select the active item
       await page.getByRole('button', { name: 'Clothing' }).click();
@@ -83,7 +82,7 @@ test.describe('Transactions', () => {
       await expect(accountPage.getNthTransaction(4).category).toHaveText(
         'Clothing',
       );
-      await expect(page).toHaveScreenshot(screenshotConfig(page));
+      await expect(page).toMatchThemeScreenshots();
     });
   });
 
@@ -101,7 +100,7 @@ test.describe('Transactions', () => {
     await expect(transaction.category).toHaveText('Food');
     await expect(transaction.debit).toHaveText('12.34');
     await expect(transaction.credit).toHaveText('');
-    await expect(page).toHaveScreenshot(screenshotConfig(page));
+    await expect(page).toMatchThemeScreenshots();
   });
 
   test('creates a split test transaction', async () => {
@@ -140,6 +139,6 @@ test.describe('Transactions', () => {
     await expect(thirdTransaction.category).toHaveText('Categorize');
     await expect(thirdTransaction.debit).toHaveText('111.11');
     await expect(thirdTransaction.credit).toHaveText('');
-    await expect(page).toHaveScreenshot(screenshotConfig(page));
+    await expect(page).toMatchThemeScreenshots();
   });
 });