Skip to content

Commit daf41f4

Browse files
shakyShaneShane Osbourne
shakyShane
and
Shane Osbourne
authored
DuckPlayer: Overlays (#417)
* feat: duck player overlays * run top-level playwright tests in CI * ignore newer tests * more cleanup * added missing tests * adding more test cases * ci tweaks * selecting feature to enable * some docs updates * send correct data for open in duck player * send correct data for open in duck player * PR prep * include all features * drop the favicon * new remote config format * split entry point * fix type includes * fix type includes * PR feedback --------- Co-authored-by: Shane Osbourne <[email protected]>
1 parent db8015b commit daf41f4

39 files changed

+2898
-70
lines changed

‎.github/workflows/tests.yml

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,6 @@ jobs:
5454
${{ runner.os }}-node-
5555
- name: Install dependencies
5656
run: |
57-
sudo apt-get install xvfb
5857
npm install
5958
npm run build
6059
- name: Cache docs output
@@ -65,6 +64,13 @@ jobs:
6564
key: docs-output-${{ github.run_id }}
6665
- name: Install Playwright Browsers
6766
run: npx playwright install --with-deps
67+
- run: npm run playwright
68+
- uses: actions/upload-artifact@v2
69+
if: always()
70+
with:
71+
name: playwright-report
72+
path: playwright-report/
73+
retention-days: 5
6874
- run: npm run test-int-x
6975
- name: Build docs
7076
run: npm run docs

‎integration-test/config.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ export default {
55
'**/*.js',
66
'!test-pages/**/*.js',
77
'!pages/**/*.js',
8+
'!playwright/**/*.js',
89
'!extension/**/*.js'
910
],
1011
random: false

‎integration-test/playwright/duckplayer.spec.js

Lines changed: 226 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,226 @@
1+
import { test } from '@playwright/test'
2+
import { DuckplayerOverlays } from './page-objects/duckplayer-overlays.js'
3+
4+
test.describe('Duck Player Thumbnail Overlays on YouTube.com', () => {
5+
test('Overlays show on thumbnails when enabled', async ({ page }, workerInfo) => {
6+
const overlays = DuckplayerOverlays.create(page, workerInfo)
7+
8+
// Given the "overlays" feature is enabled
9+
await overlays.overlaysEnabled()
10+
await overlays.gotoThumbsPage()
11+
12+
// When I hover any video thumbnail
13+
await overlays.hoverAThumbnail()
14+
15+
// Then our overlay shows
16+
await overlays.isVisible()
17+
})
18+
test('Overlays don\'t show on thumbnails when disabled', async ({ page }, workerInfo) => {
19+
const overlays = DuckplayerOverlays.create(page, workerInfo)
20+
21+
// Given the "overlays" feature is disabled
22+
await overlays.overlaysDisabled()
23+
await overlays.gotoThumbsPage()
24+
25+
// Then our overlays never show
26+
await overlays.overlaysDontShow()
27+
})
28+
test('Overlays link to Duck Player', async ({ page }, workerInfo) => {
29+
const overlays = DuckplayerOverlays.create(page, workerInfo)
30+
31+
// Given the "overlays" feature is enabled
32+
await overlays.overlaysEnabled()
33+
await overlays.gotoThumbsPage()
34+
35+
// When I click the DDG overlay
36+
await overlays.clickDDGOverlay()
37+
38+
// Then our player loads for the correct video
39+
await overlays.playerLoadsForCorrectVideo()
40+
})
41+
test('Overlays dont show when user setting is "enabled"', async ({ page }, workerInfo) => {
42+
const overlays = DuckplayerOverlays.create(page, workerInfo)
43+
44+
// Given the "overlays" feature is enabled
45+
await overlays.overlaysEnabled()
46+
await overlays.userSettingIs('enabled')
47+
await overlays.gotoThumbsPage()
48+
await overlays.overlaysDontShow()
49+
})
50+
test('Overlays dont show when user setting is "disabled"', async ({ page }, workerInfo) => {
51+
const overlays = DuckplayerOverlays.create(page, workerInfo)
52+
53+
// Given the "overlays" feature is enabled
54+
await overlays.overlaysEnabled()
55+
await overlays.userSettingIs('disabled')
56+
await overlays.gotoThumbsPage()
57+
await overlays.overlaysDontShow()
58+
})
59+
test('Overlays appear when updated settings arrive', async ({ page }, workerInfo) => {
60+
const overlays = DuckplayerOverlays.create(page, workerInfo)
61+
62+
// Given the "overlays" feature is enabled
63+
await overlays.overlaysEnabled()
64+
await overlays.userSettingIs('disabled')
65+
await overlays.gotoThumbsPage()
66+
67+
// Nothing shown initially
68+
await overlays.overlaysDontShow()
69+
70+
// now receive an update
71+
await overlays.userChangedSettingTo('always ask')
72+
73+
// overlays act as normal
74+
await overlays.hoverAThumbnail()
75+
await overlays.isVisible()
76+
})
77+
test('Overlays disappear when updated settings arrive', async ({ page }, workerInfo) => {
78+
const overlays = DuckplayerOverlays.create(page, workerInfo)
79+
80+
// Given the "overlays" feature is enabled
81+
await overlays.overlaysEnabled()
82+
await overlays.userSettingIs('always ask')
83+
await overlays.gotoThumbsPage()
84+
85+
// overlays act as normal initially
86+
await overlays.hoverAThumbnail()
87+
await overlays.isVisible()
88+
89+
// now receive an update
90+
await overlays.userChangedSettingTo('disabled')
91+
92+
// overlays should be removed
93+
await overlays.overlaysDontShow()
94+
})
95+
})
96+
97+
test.describe('Duck Player Overlays on Video Player in YouTube.com', () => {
98+
test('Overlay blocks video from playing', async ({ page }, workerInfo) => {
99+
const overlays = DuckplayerOverlays.create(page, workerInfo)
100+
101+
// Given overlays feature is enabled
102+
await overlays.overlaysEnabled()
103+
104+
// And my setting is 'always ask'
105+
await overlays.userSettingIs('always ask')
106+
await overlays.gotoPlayerPage()
107+
108+
// Then then the overlay shows and blocks the video from playing
109+
await overlays.overlayBlocksVideo()
110+
})
111+
test('Overlay is removed when new settings arrive', async ({ page }, workerInfo) => {
112+
const overlays = DuckplayerOverlays.create(page, workerInfo)
113+
114+
// Given overlays feature is enabled
115+
await overlays.overlaysEnabled()
116+
117+
// And my setting is 'always ask'
118+
await overlays.userSettingIs('always ask')
119+
await overlays.gotoPlayerPage()
120+
121+
// then the overlay shows and blocks the video from playing
122+
await overlays.overlayBlocksVideo()
123+
124+
// When the user changes settings though
125+
await overlays.userChangedSettingTo('disabled')
126+
127+
// No small overlays
128+
await overlays.overlaysDontShow()
129+
// // No video overlay
130+
await overlays.videoOverlayDoesntShow()
131+
})
132+
test('Small overlay is displayed on video', async ({ page }, workerInfo) => {
133+
const overlays = DuckplayerOverlays.create(page, workerInfo)
134+
135+
// Given overlays feature is enabled
136+
await overlays.overlaysEnabled()
137+
138+
// And my setting is 'always ask'
139+
await overlays.userSettingIs('always ask remembered')
140+
await overlays.gotoPlayerPage()
141+
142+
// Then then the overlay shows and blocks the video from playing
143+
await overlays.smallOverlayShows()
144+
})
145+
test('Small overlay is shown when setting is \'enabled\'', async ({ page }, workerInfo) => {
146+
const overlays = DuckplayerOverlays.create(page, workerInfo)
147+
148+
// Given overlays feature is enabled
149+
await overlays.overlaysEnabled()
150+
151+
// And my setting is 'always ask'
152+
await overlays.userSettingIs('enabled')
153+
await overlays.gotoPlayerPage()
154+
155+
// Then the overlay shows and blocks the video from playing
156+
await overlays.smallOverlayShows()
157+
})
158+
test('Overlays are not shown when setting is \'disabled\'', async ({ page }, workerInfo) => {
159+
const overlays = DuckplayerOverlays.create(page, workerInfo)
160+
161+
// Given overlays feature is enabled
162+
await overlays.overlaysEnabled()
163+
164+
// And my setting is 'always ask'
165+
await overlays.userSettingIs('disabled')
166+
await overlays.gotoPlayerPage()
167+
168+
// No small overlays
169+
await overlays.overlaysDontShow()
170+
// No video overlay
171+
await overlays.videoOverlayDoesntShow()
172+
})
173+
test('Selecting \'watch in duck player\'', async ({ page }, workerInfo) => {
174+
const overlays = DuckplayerOverlays.create(page, workerInfo)
175+
176+
// Given overlays feature is enabled
177+
await overlays.overlaysEnabled()
178+
179+
// And my setting is 'always ask'
180+
await overlays.userSettingIs('always ask')
181+
await overlays.gotoPlayerPage()
182+
183+
await overlays.watchInDuckPlayer()
184+
await overlays.userSettingWasUpdatedTo('always ask') // not updated
185+
})
186+
test('Selecting \'watch in duck player\' + remember', async ({ page }, workerInfo) => {
187+
const overlays = DuckplayerOverlays.create(page, workerInfo)
188+
189+
// Given overlays feature is enabled
190+
await overlays.overlaysEnabled()
191+
192+
// And my setting is 'always ask'
193+
await overlays.userSettingIs('always ask')
194+
await overlays.gotoPlayerPage()
195+
196+
await overlays.rememberMyChoice()
197+
await overlays.watchInDuckPlayer()
198+
await overlays.userSettingWasUpdatedTo('enabled') // updated
199+
})
200+
test('Selecting \'watch here\'', async ({ page }, workerInfo) => {
201+
const overlays = DuckplayerOverlays.create(page, workerInfo)
202+
203+
// Given overlays feature is enabled
204+
await overlays.overlaysEnabled()
205+
206+
// And my setting is 'always ask'
207+
await overlays.userSettingIs('always ask')
208+
await overlays.gotoPlayerPage()
209+
210+
await overlays.watchHere()
211+
})
212+
test('Selecting \'watch here\' + remember', async ({ page }, workerInfo) => {
213+
const overlays = DuckplayerOverlays.create(page, workerInfo)
214+
215+
// Given overlays feature is enabled
216+
await overlays.overlaysEnabled()
217+
218+
// And my setting is 'always ask'
219+
await overlays.userSettingIs('always ask')
220+
await overlays.gotoPlayerPage()
221+
222+
await overlays.rememberMyChoice()
223+
await overlays.watchHere()
224+
await overlays.userSettingWasUpdatedTo('always ask remembered') // updated
225+
})
226+
})

0 commit comments

Comments
 (0)