Duck Player Native tests

Author: mgurgel

injected/integration-test/duckplayer-native.spec.js

@@ -0,0 +1,30 @@
+import { test } from '@playwright/test';
+import { DuckPlayerNative } from './page-objects/duckplayer-native.js';
+
+test.describe('Duck Player Native messaging', () => {
+    test('Calls initial setup', async ({ page }, workerInfo) => {
+        const duckPlayer = DuckPlayerNative.create(page, workerInfo);
+
+        // Given the duckPlayerNative feature is enabled
+        await duckPlayer.withRemoteConfig();
+
+        // When I go to a YouTube page
+        await duckPlayer.gotoYouTubePage();
+
+        // Then Initial Setup should be called
+        await duckPlayer.didSendInitialHandshake();
+    });
+
+    test('Polls timestamp on YouTube', async ({ page }, workerInfo) => {
+        const duckPlayer = DuckPlayerNative.create(page, workerInfo);
+
+        // Given the duckPlayerNative feature is enabled
+        await duckPlayer.withRemoteConfig();
+
+        // When I go to a YouTube page
+        await duckPlayer.gotoYouTubePage();
+
+        // Then the current timestamp should be polled back to the browser
+        await duckPlayer.didSendCurrentTimestamp();
+    });
+});

injected/integration-test/page-objects/duckplayer-native.js

@@ -0,0 +1,175 @@
+import { readFileSync } from 'fs';
+import { expect } from '@playwright/test';
+import { perPlatform } from '../type-helpers.mjs';
+import { ResultsCollector } from './results-collector.js';
+
+/**
+ * @import { PageType} from '../../src/features/duck-player-native.js'
+ */
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const configFiles = /** @type {const} */ (['native.json']);
+
+export class DuckPlayerNative {
+    /** @type {Partial<Record<PageType, string>>} */
+    pages = {
+        YOUTUBE: '/duckplayer-native/pages/player.html',
+    };
+
+    /**
+     * @param {import("@playwright/test").Page} page
+     * @param {import("../type-helpers.mjs").Build} build
+     * @param {import("@duckduckgo/messaging/lib/test-utils.mjs").PlatformInfo} platform
+     */
+    constructor(page, build, platform) {
+        this.page = page;
+        this.build = build;
+        this.platform = platform;
+        this.collector = new ResultsCollector(page, build, platform);
+        this.collector.withMockResponse({
+            initialSetup: {
+                locale: 'en',
+            },
+            onCurrentTimestamp: {},
+        });
+        this.collector.withUserPreferences({
+            messageSecret: 'ABC',
+            javascriptInterface: 'javascriptInterface',
+            messageCallback: 'messageCallback',
+        });
+        page.on('console', (msg) => {
+            console.log(msg.type(), msg.text());
+        });
+    }
+
+    async reducedMotion() {
+        await this.page.emulateMedia({ reducedMotion: 'reduce' });
+    }
+
+    /**
+     * @param {object} [params]
+     * @param {"default" | "incremental-dom"} [params.variant]
+     * @param {string} [params.videoID]
+     */
+    async gotoYouTubePage(params = {}) {
+        await this.gotoPage('YOUTUBE', params);
+    }
+
+    async gotoNoCookiePage() {
+        await this.gotoPage('NOCOOKIE', {});
+    }
+
+    async gotoSERP() {
+        await this.gotoPage('SERP', {});
+    }
+
+    /**
+     * @param {PageType} pageType
+     * @param {object} [params]
+     * @param {"default" | "incremental-dom"} [params.variant]
+     * @param {string} [params.videoID]
+     */
+    async gotoPage(pageType, params = {}) {
+        await this.pageTypeIs(pageType);
+
+        const { variant = 'default', videoID = '123' } = params;
+        const urlParams = new URLSearchParams([
+            ['v', videoID],
+            ['variant', variant],
+            ['pageType', pageType],
+        ]);
+
+        const page = this.pages[pageType];
+
+        await this.page.goto(page + '?' + urlParams.toString());
+    }
+
+    /**
+     * @param {object} [params]
+     * @param {configFiles[number]} [params.json="native"] - default is settings for localhost
+     * @param {string} [params.locale] - optional locale
+     */
+    async withRemoteConfig(params = {}) {
+        const { json = 'native.json', locale = 'en' } = params;
+
+        await this.collector.setup({ config: loadConfig(json), locale });
+    }
+
+    /**
+     * @param {PageType} pageType
+     * @return {Promise<void>}
+     */
+    async pageTypeIs(pageType) {
+        const initialSetupResponse = {
+            locale: 'en',
+            pageType,
+        };
+
+        await this.collector.updateMockResponse({
+            initialSetup: initialSetupResponse,
+        });
+    }
+
+    async didSendInitialHandshake() {
+        const messages = await this.collector.waitForMessage('initialSetup');
+        expect(messages).toMatchObject([
+            {
+                payload: {
+                    context: this.collector.messagingContextName,
+                    featureName: 'duckPlayerNative',
+                    method: 'initialSetup',
+                    params: {},
+                },
+            },
+        ]);
+    }
+
+    async didSendCurrentTimestamp() {
+        const messages = await this.collector.waitForMessage('onCurrentTimestamp');
+        expect(messages).toMatchObject([
+            {
+                payload: {
+                    context: this.collector.messagingContextName,
+                    featureName: 'duckPlayerNative',
+                    method: 'onCurrentTimestamp',
+                    params: { timestamp: 0 },
+                },
+            },
+        ]);
+    }
+
+    /**
+     * Helper for creating an instance per platform
+     * @param {import("@playwright/test").Page} page
+     * @param {import("@playwright/test").TestInfo} testInfo
+     */
+    static create(page, testInfo) {
+        // Read the configuration object to determine which platform we're testing against
+        const { platformInfo, build } = perPlatform(testInfo.project.use);
+        return new DuckPlayerNative(page, build, platformInfo);
+    }
+
+    /**
+     * @return {Promise<string>}
+     */
+    requestWillFail() {
+        return new Promise((resolve, reject) => {
+            // on windows it will be a failed request
+            const timer = setTimeout(() => {
+                reject(new Error('timed out'));
+            }, 5000);
+            this.page.on('framenavigated', (req) => {
+                clearTimeout(timer);
+                resolve(req.url());
+            });
+        });
+    }
+}
+
+/**
+ * @param {configFiles[number]} name
+ * @return {Record<string, any>}
+ */
+function loadConfig(name) {
+    return JSON.parse(readFileSync(`./integration-test/test-pages/duckplayer-native/config/${name}`, 'utf8'));
+}

…test-pages/duckplayer/config/native.json …ges/duckplayer-native/config/native.jsoninjected/integration-test/test-pages/duckplayer/config/native.json renamed to injected/integration-test/test-pages/duckplayer-native/config/native.json injected/integration-test/test-pages/duckplayer/config/native.json renamed to injected/integration-test/test-pages/duckplayer-native/config/native.json

@@ -162,7 +162,7 @@
 
         await import("/build/contentScope.js").catch(console.error)
 
-        const settingsFile = '/duckplayer/config/native.json';
+        const settingsFile = '/duckplayer-native/config/native.json';
         const settings = await fetch(settingsFile).then(x => x.json())
         console.log('Settings', settings);
 

…ages/duckplayer/pages/player-native.html …ages/duckplayer-native/pages/player.htmlinjected/integration-test/test-pages/duckplayer/pages/player-native.html renamed to injected/integration-test/test-pages/duckplayer-native/pages/player.html injected/integration-test/test-pages/duckplayer/pages/player-native.html renamed to injected/integration-test/test-pages/duckplayer-native/pages/player.html

@@ -37,7 +37,11 @@ export default defineConfig({
         },
         {
             name: 'ios',
-            testMatch: ['integration-test/duckplayer-mobile.spec.js', 'integration-test/duckplayer-mobile-drawer.spec.js'],
+            testMatch: [
+                'integration-test/duckplayer-mobile.spec.js',
+                'integration-test/duckplayer-mobile-drawer.spec.js',
+                'integration-test/duckplayer-native.spec.js',
+            ],
             use: { injectName: 'apple-isolated', platform: 'ios', ...devices['iPhone 13'] },
         },
         {

injected/integration-test/test-pages/duckplayer-native/pages/thumbnail-dark.jpg

@@ -5,9 +5,14 @@ import { mockTransport } from './duckplayer-native/mock-transport.js';
 import { DuckPlayerNative } from './duckplayer-native/duckplayer-native.js';
 import { Environment } from './duckplayer-native/environment.js';
 
+/**
+ * @typedef {'UNKNOWN'|'YOUTUBE'|'NOCOOKIE'|'SERP'} PageType
+ */
+
 /**
  * @typedef InitialSettings - The initial payload used to communicate render-blocking information
  * @property {string} locale - UI locale
+ * @property {PageType} pageType - The type of page that has been loaded
  */
 
 export class DuckPlayerNativeFeature extends ContentFeature {

injected/integration-test/test-pages/duckplayer-native/pages/thumbnail-light.jpg

@@ -63,26 +63,34 @@ export class DuckPlayerNative {
 
         this.logger.log('INITIAL SETUP', initialSetup);
 
-        this.setupMessaging();
-        this.setupErrorDetection();
-        this.setupTimestampPolling();
+        switch (initialSetup.pageType) {
+            case 'YOUTUBE': {
+                this.messages.onMediaControl(this.mediaControlHandler.bind(this));
+                this.messages.onMuteAudio(this.muteAudioHandler.bind(this));
+                this.setupTimestampPolling();
+                break;
+            }
+            case 'NOCOOKIE': {
+                this.setupTimestampPolling();
+                this.setupErrorDetection();
+                break;
+            }
+            case 'SERP': {
+                this.messages.onSerpNotify(this.serpNotifyHandler.bind(this));
+                break;
+            }
+            case 'UNKNOWN':
+            default: {
+                this.logger.log('Unknown page. Not doing anything.');
+            }
+        }
 
         // TODO: Question - when/how does the native side call the teardown handler?
         return async () => {
             return await Promise.all(this.sideEffects.map((destroy) => destroy()));
         };
     }
 
-    /**
-     * Set up messaging event listeners
-     */
-    setupMessaging() {
-        this.messages.onMediaControl(this.mediaControlHandler.bind(this));
-        this.messages.onMuteAudio(this.muteAudioHandler.bind(this));
-        this.messages.onSerpNotify(this.serpNotifyHandler.bind(this));
-        // this.messages.onCurrentTimestamp(this.currentTimestampHandler.bind(this));
-    }
-
     setupErrorDetection() {
         this.logger.log('Setting up error detection');
         const errorContainer = this.settings.selectors?.errorContainer;

injected/playwright.config.js

@@ -6,7 +6,16 @@ const logger = new Logger({
     shouldLog: () => true,
 });
 
-export class TestTransport {
+const url = new URL(window.location.href);
+
+class TestTransport {
+    getInitialSetupData() {
+        const locale = url.searchParams.get('locale') || 'en';
+        const pageType = url.searchParams.get('pageType') || 'UNKNOWN';
+
+        return { locale, pageType };
+    }
+
     notify(_msg) {
         logger.log('Notifying', _msg.method);
 
@@ -28,7 +37,7 @@ export class TestTransport {
         const msg = /** @type {any} */ (_msg);
         switch (msg.method) {
             case constants.MSG_NAME_INITIAL_SETUP: {
-                return Promise.resolve({ locale: 'en' });
+                return Promise.resolve(this.getInitialSetupData());
             }
             default:
                 return Promise.resolve(null);