run tests on apple platform

Author: Shane Osbourne

packages/special-pages/package.json

@@ -9,6 +9,7 @@
     "build.dev": "NODE_ENV=development node index.mjs",
     "test": "playwright test",
     "test.windows": "npm run test -- --project duckplayer-windows",
+    "test.apple": "npm run test -- --project duckplayer-apple",
     "test.headed": "npm run test -- --headed",
     "test.ui": "npm run test -- --ui",
     "pretest": "npm run build.dev",

packages/special-pages/pages/duckplayer/src/js/index.js

@@ -529,8 +529,10 @@ const Setting = {
      * Initializes the setting checkbox:
      * 1. Listens for (user) changes on the actual checkbox
      * 2. Listens for to clicks on the checkbox text
+     * @param {object} opts
+     * @param {string} opts.settingsUrl
      */
-    init: () => {
+    init: (opts) => {
         const checkbox = Setting.checkbox()
 
         checkbox.addEventListener('change', () => {
@@ -540,7 +542,7 @@ const Setting = {
         const settingsIcon = Setting.settingsIcon()
 
         // windows settings - we will need to alter for other platforms.
-        settingsIcon.setAttribute('href', 'duck://settings/duckplayer')
+        settingsIcon.setAttribute('href', opts.settingsUrl)
     }
 }
 
@@ -758,18 +760,41 @@ const MouseMove = {
  * Initializes all parts of the page on load.
  */
 document.addEventListener('DOMContentLoaded', () => {
-    Setting.init()
+    Setting.init({
+        settingsUrl: settingsUrl(import.meta.platform)
+    })
     Comms.init({
         platform: import.meta.platform,
         env: import.meta.env
     })
     VideoPlayer.init()
     Tooltip.init()
     PlayOnYouTube.init({
-        // todo(Shane): platform specific
-        base: 'duck://player/openInYoutube'
+        base: baseUrl(import.meta.platform)
     })
     MouseMove.init()
 })
 
+/**
+ * @param {ImportMeta['platform']} platform
+ */
+function baseUrl (platform) {
+    switch (platform) {
+    // this is different on Windows to allow the native side to intercept the navigation more easily
+    case 'windows': return 'duck://player/openInYoutube'
+    default: return 'https://www.youtube.com/watch'
+    }
+}
+
+/**
+ * @param {ImportMeta['platform']} platform
+ */
+function settingsUrl (platform) {
+    switch (platform) {
+    // this is different on Windows to allow the native side to intercept the navigation more easily
+    case 'windows': return 'duck://settings/duckplayer'
+    default: return 'about:preferences/duckplayer'
+    }
+}
+
 initStorage()

packages/special-pages/playwright.config.js

@@ -6,6 +6,11 @@ export default defineConfig({
             name: 'duckplayer-windows',
             testMatch: 'duckplayer.spec.js',
             use: { platform: 'windows' }
+        },
+        {
+            name: 'duckplayer-apple',
+            testMatch: 'duckplayer.spec.js',
+            use: { platform: 'apple' }
         }
         // Coming in a future PR
         // {

packages/special-pages/tests/page-objects/duck-player.js

@@ -37,18 +37,10 @@ export class DuckPlayerPage {
      */
     async openPage (urlParams) {
         const url = 'https://www.youtube-nocookie.com' + '?' + urlParams.toString()
-
-        switch (this.platform.name) {
-        case 'windows': {
-            await this.mocks.install()
-            await this.installYoutubeMocks()
-            // construct the final url
-            await this.page.goto(url)
-            break
-        }
-        default:
-            throw new Error('unreachable')
-        }
+        await this.mocks.install()
+        await this.installYoutubeMocks()
+        // construct the final url
+        await this.page.goto(url)
     }
 
     /**
@@ -175,29 +167,55 @@ export class DuckPlayerPage {
     }
 
     async opensSettingsInNewTab () {
-        // duck:// scheme will fail, but we can assert that it was tried and grab the URL
-        const failure = new Promise(resolve => {
-            this.page.context().on('requestfailed', f => {
-                resolve(f.url())
-            })
+        const newTab = new Promise(resolve => {
+            // on pages with about:preferences it will launch a new tab
+            this.page.context().on('page', resolve)
+
+            // on windows it will be a failed request
+            this.page.context().on('requestfailed', resolve)
         })
 
-        await this.page.locator('.open-settings').click()
+        const expected = {
+            windows: 'duck://settings/duckplayer',
+            apple: 'about:preferences/duckplayer'
+        }[this.platform.name]
+
+        const openSettings = this.page.locator('.open-settings')
+        expect(await openSettings.getAttribute('href')).toEqual(expected)
+        expect(await openSettings.getAttribute('target')).toEqual('_blank')
 
-        // this is for windows, we'll need to support more
-        expect(await failure).toEqual('duck://settings/duckplayer')
+        // click to ensure a new tab opens
+        await openSettings.click()
+
+        // ensure a new tab was opened (eg: that nothing in our JS stopped the regular click)
+        await newTab
     }
 
     async opensInYoutube () {
-        // duck:// scheme will fail, but we can assert that it was tried and grab the URL
-        const failure = new Promise(resolve => {
-            this.page.context().on('requestfailed', f => {
-                resolve(f.url())
+        switch (this.platform.name) {
+        // Windows uses a special URL handler to exit duck player
+        case 'windows': {
+            const failure = new Promise(resolve => {
+                this.page.context().on('requestfailed', f => {
+                    resolve(f.url())
+                })
             })
-        })
-        await this.page.getByRole('link', { name: 'Watch on YouTube' }).click()
-        // todo(Shane): platform specific
-        expect(await failure).toEqual('duck://player/openInYoutube?v=VIDEO_ID')
+            await this.page.getByRole('link', { name: 'Watch on YouTube' }).click()
+            expect(await failure).toEqual('duck://player/openInYoutube?v=VIDEO_ID')
+            break
+        }
+        // the default is just a regular link
+        default: {
+            const nextNavigation = new Promise(resolve => {
+                this.page.context().on('request', f => {
+                    resolve(f.url())
+                })
+            })
+            await this.page.getByRole('link', { name: 'Watch on YouTube' }).click()
+            expect(await nextNavigation).toEqual('https://www.youtube.com/watch?v=VIDEO_ID')
+            break
+        }
+        }
     }
 
     /**
@@ -270,7 +288,8 @@ export class DuckPlayerPage {
      */
     get basePath () {
         return {
-            windows: '../../build/windows/pages/duckplayer'
+            windows: '../../build/windows/pages/duckplayer',
+            apple: '../../Sources/ContentScopeScripts/dist/pages/duckplayer'
         }[this.platform.name]
     }