Tests

Author: mgurgel

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

@@ -28,3 +28,19 @@ test.describe('Duck Player Native messaging', () => {
         await duckPlayer.didSendCurrentTimestamp();
     });
 });
+
+test.describe('Duck Player Native thumbnail overlay', () => {
+    test('Shows overlay on YouTube player page', 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();
+        await duckPlayer.sendOnMediaControl();
+
+        // Then I should see the thumbnail overlay in the page
+        await duckPlayer.didShowThumbnailOverlay();
+    });
+});

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

@@ -76,7 +76,6 @@ export class DuckPlayerNative {
         const urlParams = new URLSearchParams([
             ['v', videoID],
             ['variant', variant],
-            ['pageType', pageType],
         ]);
 
         const page = this.pages[pageType];
@@ -110,6 +109,66 @@ export class DuckPlayerNative {
         });
     }
 
+    /**
+     * @param {string} name
+     * @param {Record<string, any>} payload
+     */
+    async simulateSubscriptionMessage(name, payload) {
+        await this.collector.simulateSubscriptionMessage('duckPlayerNative', name, payload);
+    }
+
+    /**
+     * 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());
+            });
+        });
+    }
+
+    /* Subscriptions */
+
+    /**
+     * @param {object} options
+     */
+    async sendOnMediaControl(options = { pause: true }) {
+        await this.simulateSubscriptionMessage('onMediaControl', options);
+    }
+
+    /**
+     * @param {object} options
+     */
+    async sendOnSerpNotify(options = {}) {
+        await this.simulateSubscriptionMessage('onSerpNotify', options);
+    }
+
+    /**
+     * @param {object} options
+     */
+    async sendOnMuteAudio(options = { mute: true }) {
+        await this.simulateSubscriptionMessage('onMuteAudio', options);
+    }
+
+    /* Messaging assertions */
+
     async didSendInitialHandshake() {
         const messages = await this.collector.waitForMessage('initialSetup');
         expect(messages).toMatchObject([
@@ -138,31 +197,14 @@ export class DuckPlayerNative {
         ]);
     }
 
-    /**
-     * 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);
+    /* Thumbnail Overlay assertions */
+
+    async didShowThumbnailOverlay() {
+        await this.page.locator('ddg-video-thumbnail-overlay-mobile').waitFor({ state: 'visible', timeout: 1000 });
     }
 
-    /**
-     * @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());
-            });
-        });
+    async didShowLogoInOverlay() {
+        await this.page.locator('ddg-video-thumbnail-overlay-mobile .logo').waitFor({ state: 'visible', timeout: 1000 });
     }
 }
 

injected/integration-test/test-pages/duckplayer-native/pages/player.html

@@ -184,10 +184,6 @@
                 featureSettings: settings.features,
             }
         }))
-
-        setTimeout(() => {
-            document.dispatchEvent(new CustomEvent('initialSetup', { detail: {} }));
-        })
     })();
 </script>
 

injected/src/features.js

@@ -33,8 +33,8 @@ const otherFeatures = /** @type {const} */ ([
 /** @typedef {baseFeatures[number]|otherFeatures[number]} FeatureName */
 /** @type {Record<string, FeatureName[]>} */
 export const platformSupport = {
-    apple: ['webCompat', 'duckPlayerNative', ...baseFeatures],
-    'apple-isolated': ['duckPlayerNative', 'brokerProtection', 'performanceMetrics', 'clickToLoad', 'messageBridge', 'favicon'],
+    apple: ['webCompat', ...baseFeatures],
+    'apple-isolated': ['duckPlayer', 'duckPlayerNative', 'brokerProtection', 'performanceMetrics', 'clickToLoad', 'messageBridge', 'favicon'],
     android: [...baseFeatures, 'webCompat', 'breakageReporting', 'duckPlayer', 'messageBridge'],
     'android-broker-protection': ['brokerProtection'],
     'android-autofill-password-import': ['autofillPasswordImport'],

injected/src/features/duck-player-native.js

@@ -28,9 +28,7 @@ export class DuckPlayerNativeFeature extends ContentFeature {
         /**
          * @type {import("@duckduckgo/privacy-configuration/schema/features/duckplayer-native.js").DuckPlayerNativeSettings}
          */
-        // TODO: Why isn't this working?
-        // const settings = this.getFeatureSetting('settings');
-        const settings = args?.featureSettings?.duckPlayerNative?.settings || args?.featureSettings?.duckPlayerNative;
+        const settings = this.getFeatureSetting('settings') || args?.featureSettings?.duckPlayerNative?.settings || args?.featureSettings?.duckPlayerNative; // TODO: Why doesn't it work with just getFeatureSettings?
         console.log('DUCK PLAYER NATIVE SELECTORS', settings?.selectors);
 
         const locale = args?.locale || args?.language || 'en';

injected/src/features/duckplayer-native/custom-error/custom-error.js

@@ -3,7 +3,7 @@ import { Logger } from '../util';
 import { createPolicy, html } from '../../../dom-utils.js';
 import { customElementsDefine, customElementsGet } from '../../../captured-globals.js';
 
-/** @typedef {import('../error-detection').YouTubeError} YouTubeError */
+/** @import {YouTubeError} from '../error-detection' */
 
 /**
  * The custom element that we use to present our UI elements

injected/src/features/duckplayer-native/error-detection.js

@@ -1,9 +1,11 @@
 import { Logger } from './util';
 
-/** @typedef {"age-restricted" | "sign-in-required" | "no-embed" | "unknown"} YouTubeError */
-
-/** @typedef {(error: YouTubeError) => void} ErrorDetectionCallback */
-/** @typedef {import('./duckplayer-native').DuckPlayerNativeSettings['selectors']} DuckPlayerNativeSelectors */
+/**
+ * @import {DuckPlayerNativeSettings} from './duckplayer-native'
+ * @typedef {"age-restricted" | "sign-in-required" | "no-embed" | "unknown"} YouTubeError
+ * @typedef {DuckPlayerNativeSettings['selectors']} DuckPlayerNativeSelectors
+ * @typedef {(error: YouTubeError) => void} ErrorDetectionCallback
+ */
 
 /**
  * @typedef {object} ErrorDetectionSettings

injected/src/features/duckplayer-native/messages.js

@@ -11,7 +11,7 @@ import * as constants from './constants.js';
  */
 
 /**
- * @typedef {import("@duckduckgo/messaging").Messaging} Messaging
+ * @import {Messaging} from '@duckduckgo/messaging'
  *
  * A wrapper for all communications.
  *