Use Glass Stage icons for playlist and offline controls
This commit is contained in:
@@ -44,3 +44,40 @@ for (const layout of ['glass-stage', 'classic']) for (const width of [390, 1440]
|
||||
await before.close();
|
||||
});
|
||||
}
|
||||
|
||||
const beforeIcons = execFileSync('git', ['show', '79a3c28:frontend/glass-controls.js'], { encoding: 'utf8' });
|
||||
async function sidebarFixture(page, layout) {
|
||||
await openClassic(page, { populated: true, settings: { autoPreload: false } });
|
||||
await page.addStyleTag({ content: '*,*::before,*::after{animation:none!important;transition:none!important;caret-color:transparent!important}' });
|
||||
await page.evaluate(layout => {
|
||||
data.settings.layout = layout; applyAppearance();
|
||||
data.playlists[0].videos.forEach(v => cachedIds.add(v.id));
|
||||
view = { type: 'playlist', id: 'studio' }; render(); openSidebar();
|
||||
}, layout);
|
||||
await page.evaluate(async () => { await document.fonts.ready; await new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(resolve))); });
|
||||
}
|
||||
for (const layout of ['glass-stage', 'classic']) for (const width of [390, 1440]) {
|
||||
test(`${layout} playlist sidebar icons at ${width}`, async ({ page, context }) => {
|
||||
await page.setViewportSize({ width, height: 900 });
|
||||
const before = await context.newPage(); await before.setViewportSize({ width, height: 900 });
|
||||
await before.route('**/glass-controls.js', route => route.fulfill({ contentType: 'text/javascript', body: beforeIcons }));
|
||||
await sidebarFixture(before, layout);
|
||||
const baseline = await before.screenshot({ path: `/tmp/ytplayer-done8-B-before-${layout}-${width}.png` });
|
||||
await sidebarFixture(page, layout);
|
||||
const result = await page.screenshot({ path: `/tmp/ytplayer-done8-B-after-${layout}-${width}.png` });
|
||||
const badge = page.locator('.sidebar .pl-offline-badge.all').first();
|
||||
if (layout === 'classic') {
|
||||
expect(differentPixels(baseline, result)).toBeLessThanOrEqual(32);
|
||||
await expect(badge).toHaveText('⬇');
|
||||
} else {
|
||||
await expect(badge.locator('svg')).toHaveCount(1);
|
||||
expect(await badge.locator('svg').evaluate(el => getComputedStyle(el).strokeWidth)).toBe('1.9px');
|
||||
await expect(page.locator('.home-pl-play svg').first()).toHaveCount(1);
|
||||
await expect(page.locator('#listActions .la-primary svg')).toHaveCount(1);
|
||||
await page.evaluate(() => { data.settings.layout = 'classic'; applyAppearance(); });
|
||||
await expect(badge).toHaveText('⬇');
|
||||
await expect(page.locator('.glass-control-icon')).toHaveCount(0);
|
||||
}
|
||||
await before.close();
|
||||
});
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user