Add and use setReducedMotion util function in tests

3 files changed, 15 insertions, 4 deletions

diff --git a/desktop/packages/mullvad-vpn/test/e2e/mocked/forced-motion.spec.ts b/desktop/packages/mullvad-vpn/test/e2e/mocked/forced-motion.spec.ts
index 103f61653b..2307483b2b 100644
--- a/desktop/packages/mullvad-vpn/test/e2e/mocked/forced-motion.spec.ts
+++ b/desktop/packages/mullvad-vpn/test/e2e/mocked/forced-motion.spec.ts
@@ -13,8 +13,8 @@ test.describe('Transitions and animations', () => {
 
   test.beforeAll(async () => {
     ({ page, util } = await startMockedApp());
-    await page.emulateMedia({ reducedMotion: null });
     routes = new RoutesObjectModel(page, util);
+    await util.setReducedMotion('no-preference');
 
     await routes.main.waitForRoute();
   });
diff --git a/desktop/packages/mullvad-vpn/test/e2e/mocked/user-interface-settings/user-interface-settings.spec.ts b/desktop/packages/mullvad-vpn/test/e2e/mocked/user-interface-settings/user-interface-settings.spec.ts
index 97c970d0e8..4e1686d097 100644
--- a/desktop/packages/mullvad-vpn/test/e2e/mocked/user-interface-settings/user-interface-settings.spec.ts
+++ b/desktop/packages/mullvad-vpn/test/e2e/mocked/user-interface-settings/user-interface-settings.spec.ts
@@ -126,7 +126,7 @@ test.describe('User interface settings', () => {
   test.describe('Animate map setting', () => {
     test.describe('With reduced motion', () => {
       test.beforeEach(async () => {
-        await page.emulateMedia({ reducedMotion: 'reduce' });
+        await util.setReducedMotion('reduce');
       });
 
       test('Should not display animate map setting', async () => {
@@ -137,7 +137,7 @@ test.describe('User interface settings', () => {
 
     test.describe('Without reduced motion', () => {
       test.beforeEach(async () => {
-        await page.emulateMedia({ reducedMotion: 'no-preference' });
+        await util.setReducedMotion('no-preference');
       });
 
       test('Should display animate map setting', async () => {
diff --git a/desktop/packages/mullvad-vpn/test/e2e/utils.ts b/desktop/packages/mullvad-vpn/test/e2e/utils.ts
index ff851bd2bd..89cfebe4f2 100644
--- a/desktop/packages/mullvad-vpn/test/e2e/utils.ts
+++ b/desktop/packages/mullvad-vpn/test/e2e/utils.ts
@@ -19,16 +19,19 @@ export interface TestUtils {
   getCurrentRoute: () => Promise<string | null>;
   expectRoute: (route: string) => Promise<void>;
   expectRouteChange: (trigger: TriggerFn) => Promise<void>;
+  setReducedMotion: (value: ReducedMotionValue) => Promise<void>;
 }
 
 type LaunchOptions = NonNullable<Parameters<typeof electron.launch>[0]>;
 
+type ReducedMotionValue = 'no-preference' | 'reduce';
+
 export const startApp = async (options: LaunchOptions): Promise<StartAppResponse> => {
   const app = await launch(options);
   const page = await app.firstWindow();
 
   if (!forceMotion) {
-    await page.emulateMedia({ reducedMotion: 'reduce' });
+    await setReducedMotion(page, 'reduce');
   }
 
   await promiseTimeout(page.waitForEvent('load'));
@@ -41,6 +44,7 @@ export const startApp = async (options: LaunchOptions): Promise<StartAppResponse
     getCurrentRoute: () => getCurrentRoute(page),
     expectRoute: (route: string) => expectRoute(page, route),
     expectRouteChange: (trigger: TriggerFn) => expectRouteChange(page, trigger),
+    setReducedMotion: (value: ReducedMotionValue) => setReducedMotion(page, value),
   };
 
   return { app, page, util };
@@ -83,6 +87,13 @@ async function expectRouteChange(page: Page, trigger: TriggerFn) {
   await expect.poll(() => getCurrentRoute(page)).not.toMatchPath(initialRoute);
 }
 
+async function setReducedMotion(page: Page, value: ReducedMotionValue) {
+  await page.emulateMedia({ reducedMotion: value });
+
+  const query = `(prefers-reduced-motion: ${value})`;
+  await page.evaluate((q) => window.matchMedia(q).matches, query);
+}
+
 const getStyleProperty = (locator: Locator, property: string) => {
   return locator.evaluate(
     (el, { property }) => {