Add test for view transitions

2 files changed, 52 insertions, 6 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
new file mode 100644
index 0000000000..318909a24f
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/test/e2e/mocked/forced-motion.spec.ts
@@ -0,0 +1,45 @@
+import { expect, test } from '@playwright/test';
+import { Page } from 'playwright';
+
+import { RoutesObjectModel } from '../route-object-models';
+import { MockedTestUtils, startMockedApp } from './mocked-utils';
+
+let page: Page;
+let util: MockedTestUtils;
+let routes: RoutesObjectModel;
+
+test.describe('Transitions and animations', () => {
+  test.skip(process.platform !== 'linux');
+
+  test.beforeAll(async () => {
+    ({ page, util } = await startMockedApp());
+    await page.emulateMedia({ reducedMotion: null });
+    routes = new RoutesObjectModel(page, util);
+
+    await routes.main.waitForRoute();
+  });
+
+  test.afterAll(async () => {
+    await page.close();
+  });
+
+  test('Should navigate with transitions', async () => {
+    await expectToTakeTime(() => routes.main.gotoSettings(), 450);
+    await expectToTakeTime(() => routes.vpnSettings.goBack(), 450);
+
+    await expectToTakeTime(async () => {
+      await util.ipc.account.device.notify({
+        type: 'logged out',
+        deviceState: { type: 'logged out' },
+      });
+      await routes.login.waitForRoute();
+    }, 450);
+  });
+});
+
+async function expectToTakeTime(action: () => Promise<void> | void, minimumDuration: number) {
+  const startTime = Date.now();
+  await action();
+  const duration = Date.now() - startTime;
+  expect(duration).toBeGreaterThan(minimumDuration);
+}
diff --git a/desktop/packages/mullvad-vpn/test/e2e/route-object-models/vpn-settings/vpn-settings-route-object-model.ts b/desktop/packages/mullvad-vpn/test/e2e/route-object-models/vpn-settings/vpn-settings-route-object-model.ts
index 0ce99295d2..fc55c702f4 100644
--- a/desktop/packages/mullvad-vpn/test/e2e/route-object-models/vpn-settings/vpn-settings-route-object-model.ts
+++ b/desktop/packages/mullvad-vpn/test/e2e/route-object-models/vpn-settings/vpn-settings-route-object-model.ts
@@ -2,16 +2,17 @@ import { Page } from 'playwright';
 
 import { RoutePath } from '../../../../src/shared/routes';
 import { TestUtils } from '../../utils';
+import { NavigationObjectModel } from '../navigation';
 import { createSelectors } from './selectors';
 
-export class VpnSettingsRouteObjectModel {
-  readonly page: Page;
-  readonly utils: TestUtils;
+export class VpnSettingsRouteObjectModel extends NavigationObjectModel {
   readonly selectors: ReturnType<typeof createSelectors>;
 
-  constructor(page: Page, utils: TestUtils) {
-    this.page = page;
-    this.utils = utils;
+  constructor(
+    public readonly page: Page,
+    public readonly utils: TestUtils,
+  ) {
+    super(page, utils);
     this.selectors = createSelectors(page);
   }