(VRT) darkmode visual regression tests (#1860)

packages/desktop-client/playwright.config.js

 import { expect, defineConfig } from '@playwright/test';
 
-// Disable screenshot assertions in regular e2e tests;
-// only enable them when doing VRT tests
-if (!process.env.VRT) {
-  expect.extend({
-    toHaveScreenshot() {
+expect.extend({
+  async toMatchThemeScreenshots(locator) {
+    // Disable screenshot assertions in regular e2e tests;
+    // only enable them when doing VRT tests
+    if (!process.env.VRT) {
       return {
         message: () => 'passed',
         pass: true,
       };
-    },
-  });
-}
+    }
+
+    const config = {
+      // eslint-disable-next-line rulesdir/typography
+      mask: [locator.locator('[data-vrt-mask="true"]')],
+    };
+
+    // Check lightmode
+    const lightmode = await expect(locator).toHaveScreenshot(config);
+
+    if (lightmode && !lightmode.pass) {
+      return lightmode;
+    }
+
+    // Switch to darkmode and check
+    await locator.evaluate(() => window.Actual.setTheme('dark'));
+    const darkmode = await expect(locator).toHaveScreenshot(config);
+
+    // Assert on
+    if (darkmode && !darkmode.pass) {
+      return darkmode;
+    }
+
+    // Switch back to lightmode
+    await locator.evaluate(() => window.Actual.setTheme('light'));
+    return {
+      message: () => 'pass',
+      pass: true,
+    };
+  },
+});
 
 // eslint-disable-next-line import/no-unused-modules
 export default defineConfig({

packages/desktop-client/src/browser-preload.browser.js

@@ -128,6 +128,8 @@ global.Actual = {
   getServerSocket: async () => {
     return worker;
   },
+
+  setTheme: () => {},
 };
 
 document.addEventListener('keydown', e => {

packages/desktop-client/src/global-events.js

@@ -14,6 +14,10 @@ export function handleGlobalEvents(actions, store) {
     // to update.
   });
 
+  global.Actual.setTheme = theme => {
+    actions.saveGlobalPrefs({ theme });
+  };
+
   listen('server-error', info => {
     actions.addGenericErrorNotification();
   });

packages/desktop-electron/preload.js

@@ -54,4 +54,6 @@ contextBridge.exposeInMainWorld('Actual', {
   getServerSocket: () => {
     return socketPromise;
   },
+
+  setTheme: () => {},
 });

upcoming-release-notes/1860.md

+---
+category: Maintenance
+authors: [MatissJanis]
+---
+
+Added darkmode VRT (screenshot) tests