fix playwright tests with better mock separation

integration-tests/DashboardPage.js

@@ -2,7 +2,7 @@ import { expect } from '@playwright/test';
 import { forwardConsole, playTimeline } from './helpers';
 import { Mocks } from './Mocks';
 import { Nav } from './Nav';
-import { testDataStates } from '../shared/js/ui/views/tests/states-with-fixtures';
+import { testDataStates } from './utils/states-with-fixtures';
 import { mockBrowserApis } from '../shared/js/browser/utils/communication-mocks.mjs';
 import { Extension } from './Extension';
 import toggleReportScreen from '../schema/__fixtures__/toggle-report-screen.json';

integration-tests/android.spec-int.js

@@ -1,5 +1,5 @@
 import { test } from '@playwright/test';
-import { testDataStates } from '../shared/js/ui/views/tests/states-with-fixtures';
+import { testDataStates } from './utils/states-with-fixtures';
 import { DashboardPage } from './DashboardPage';
 import { toggleFlows } from './utils/common-flows';
 

integration-tests/browser.spec-int.js

@@ -1,5 +1,5 @@
 import { test } from '@playwright/test';
-import { testDataStates } from '../shared/js/ui/views/tests/states-with-fixtures';
+import { testDataStates } from './utils/states-with-fixtures';
 import { DashboardPage } from './DashboardPage';
 import { toggleFlows } from './utils/common-flows';
 import { forwardConsole } from './helpers';

integration-tests/helpers.js

@@ -1,5 +1,11 @@
-import { mockAndroidApis, mockDataProvider, webkitMockApis, windowsMockApis } from '../shared/js/browser/utils/communication-mocks.mjs';
-import toggleReportScreen from '../schema/__fixtures__/toggle-report-screen.json';
+import {
+    mockAndroidApis,
+    sharedMockDataProvider,
+    webkitMockApis,
+    windowsMockApis,
+} from '../shared/js/browser/utils/communication-mocks.mjs';
+import { readFileSync } from 'node:fs';
+const toggleReportScreen = JSON.parse(readFileSync('./schema/__fixtures__/toggle-report-screen.json', 'utf8'));
 
 /**
  * @param {import('@playwright/test').Page} page
@@ -26,12 +32,12 @@ export async function playTimeline(page, state, platform) {
     }
     if (platform.name === 'windows') {
         messages.windowsViewModel = state.toWindowsViewModel();
-        messages.GetToggleReportOptions = state.toWindowsToggleReportOptions();
+        messages.GetToggleReportOptions = state.toWindowsToggleReportOptions(toggleReportScreen);
     }
     if (platform.name === 'ios' || platform.name === 'macos') {
         messages.privacyDashboardGetToggleReportOptions = toggleReportScreen;
     }
-    await page.evaluate(mockDataProvider, { state, platform, messages });
+    await page.evaluate(sharedMockDataProvider, { state, platform, messages });
     return messages;
 }
 

integration-tests/ios.spec-int.js

@@ -1,5 +1,5 @@
 import { test } from '@playwright/test';
-import { testDataStates } from '../shared/js/ui/views/tests/states-with-fixtures';
+import { testDataStates } from './utils/states-with-fixtures';
 import { DashboardPage } from './DashboardPage';
 import { toggleFlows } from './utils/common-flows';
 

integration-tests/macos.spec-int.js

@@ -1,5 +1,5 @@
 import { test } from '@playwright/test';
-import { testDataStates } from '../shared/js/ui/views/tests/states-with-fixtures';
+import { testDataStates } from './utils/states-with-fixtures';
 import { DashboardPage } from './DashboardPage';
 import { settingPermissions, toggleFlows } from './utils/common-flows';
 

integration-tests/utils/common-flows.js

@@ -1,5 +1,5 @@
 import { test } from '@playwright/test';
-import { testDataStates } from '../../shared/js/ui/views/tests/states-with-fixtures';
+import { testDataStates } from './states-with-fixtures';
 
 /**
  * @typedef {import("../../shared/js/ui/views/tests/generate-data.mjs").MockData} MockData

integration-tests/utils/states-with-fixtures.js

@@ -0,0 +1,7 @@
+import { createDataStates } from '../../shared/js/ui/views/tests/generate-data.mjs';
+import { readFileSync } from 'node:fs';
+
+const google = JSON.parse(readFileSync('./schema/__fixtures__/request-data-google.json', 'utf8'));
+const cnn = JSON.parse(readFileSync('./schema/__fixtures__/request-data-cnn.json', 'utf8'));
+
+export const testDataStates = createDataStates(google, cnn);

integration-tests/windows.spec-int.js

@@ -1,5 +1,5 @@
 import { test } from '@playwright/test';
-import { testDataStates } from '../shared/js/ui/views/tests/states-with-fixtures';
+import { testDataStates } from './utils/states-with-fixtures';
 import { DashboardPage } from './DashboardPage';
 import { settingPermissions, toggleFlows } from './utils/common-flows';
 

package.json

@@ -42,7 +42,7 @@
         "@duckduckgo/eslint-config": "github:duckduckgo/eslint-config#v0.1.0",
         "@formatjs/intl-locale": "^3.0.7",
         "@material/ripple": "^14.0.0",
-        "@playwright/test": "^1.45.3",
+        "@playwright/test": "^1.50.1",
         "@types/chrome": "^0.0.203",
         "@types/eslint__js": "^8.42.3",
         "@types/node": "22.10.7",

playwright.config.ts

@@ -97,7 +97,7 @@ const config: PlaywrightTestConfig = {
 
     /* Run your local dev server before starting the tests */
     webServer: {
-        command: 'npm run serve',
+        command: 'npm run build.debug && npm run serve',
         port: 3220,
         reuseExistingServer: true,
         ignoreHTTPSErrors: true,

shared/js/browser/communication.js

@@ -4,7 +4,7 @@ import * as iosComms from './ios-communication.js';
 import * as androidComms from './android-communication.js';
 import * as windowsComms from './windows-communication.js';
 import * as macosComms from './macos-communication.js';
-import { installDebuggerMocks } from './utils/communication-mocks.mjs';
+import { installBrowserMocks } from './utils/browser-mocks.mjs';
 
 let defaultComms;
 
@@ -33,17 +33,20 @@ if (isIOS()) {
 if (!defaultComms) throw new Error('unsupported environment');
 
 let debug = false;
+let postInstall;
 
-// in test environments, install mocks and deliver initial data
+// in preview environments, install mocks and deliver initial data
+// NOTE: we DO NOT run this when Playwright is running, since it handles its own data mocks
 // eslint-disable-next-line no-unused-labels, no-labels
 $TEST: (() => {
     if (typeof window.__ddg_integration_test === 'undefined') {
-        installDebuggerMocks(platform).catch(console.error);
+        postInstall = installBrowserMocks(platform);
         debug = true;
     }
 })();
 
 defaultComms.setup(debug);
+postInstall?.();
 
 export { platform };
 

shared/js/browser/utils/browser-mocks.mjs

@@ -0,0 +1,75 @@
+import toggleReportScreen from '../../../../schema/__fixtures__/toggle-report-screen.json';
+import { createDataStates } from '../../ui/views/tests/generate-data.mjs';
+import google from '../../../../schema/__fixtures__/request-data-google.json';
+import cnn from '../../../../schema/__fixtures__/request-data-cnn.json';
+import { mockAndroidApis, mockBrowserApis, sharedMockDataProvider, webkitMockApis, windowsMockApis } from './communication-mocks.mjs';
+
+/**
+ * @param {import('../../ui/platform-features.mjs').Platform} platform
+ */
+export function installBrowserMocks(platform) {
+    console.log('installing...');
+    if (window.__playwright) {
+        console.log('installing... NOE');
+        return () => console.log('❌ mocked already there');
+    }
+    if (platform.name === 'windows') {
+        windowsMockApis();
+    } else if (platform.name === 'ios' || platform.name === 'macos') {
+        webkitMockApis({
+            messages: {
+                privacyDashboardGetToggleReportOptions: toggleReportScreen,
+            },
+        });
+    } else if (platform.name === 'android') {
+        mockAndroidApis({
+            messages: {
+                getToggleReportOptions: toggleReportScreen,
+            },
+        });
+    } else if (platform.name === 'browser') {
+        mockBrowserApis();
+    }
+
+    const testDataStates = createDataStates(/** @type {any} */ (google), /** @type {any} */ (cnn));
+    const stateFromUrl = new URLSearchParams(window.location.search).get('state');
+
+    let mock;
+    if (stateFromUrl && stateFromUrl in testDataStates) {
+        mock = testDataStates[stateFromUrl];
+    } else {
+        mock = testDataStates.protectionsOn_blocked;
+        console.warn('state not found, falling back to default. state: ', 'protectionsOn_blocked', stateFromUrl);
+    }
+
+    console.groupCollapsed(`${platform.name} open for more Dashboard States`);
+    const urls = Object.keys(testDataStates).map((key) => {
+        const clone = new URL(location.href);
+        clone.searchParams.set('state', key);
+        return clone.href;
+    });
+    for (const url of urls) {
+        console.log(url);
+    }
+    console.groupEnd();
+
+    const messages = {};
+
+    if (platform.name === 'browser') {
+        messages.getBurnOptions = mock.toBurnOptions();
+        messages.getPrivacyDashboardData = mock.toExtensionDashboardData();
+        messages.getToggleReportOptions = toggleReportScreen;
+        messages.getBreakageFormOptions = toggleReportScreen;
+    }
+    if (platform.name === 'windows') {
+        messages.windowsViewModel = mock.toWindowsViewModel();
+        messages.GetToggleReportOptions = mock.toWindowsToggleReportOptions(toggleReportScreen);
+    }
+
+    return () =>
+        sharedMockDataProvider({
+            state: mock,
+            platform,
+            messages,
+        });
+}