53 lines
5.4 KiB
JavaScript
53 lines
5.4 KiB
JavaScript
const {test,expect}=require('@playwright/test');
|
|
const {openClassic,showPlayingFixture}=require('./helpers/classic-fixture');
|
|
const {mkdirSync,readFileSync}=require('node:fs');
|
|
const {differentPixels}=require('./helpers/png-diff');
|
|
const out='/home/josh/deliverables/ytplayer-done13';mkdirSync(out,{recursive:true});
|
|
const before=process.env.CAPTURE_BEFORE==='1';
|
|
const screens=['home','search','playlist','queue','history','saved','downloads','channel','settings','settings-detail','now-playing','lyrics','chapters','lyric-search','service','modal','empty-queue','empty-saved','empty-downloads'];
|
|
async function scene(page,layout,screen){
|
|
await openClassic(page,{populated:true,standalone:page.viewportSize().width<900});await showPlayingFixture(page);
|
|
await page.evaluate(({layout,screen})=>{
|
|
data.settings.layout=layout;applyAppearance();
|
|
const videos=data.playlists[0].videos;
|
|
API.cacheList=async()=>({ok:true,items:screen==='empty-saved'?[]:videos.map(v=>({...v,size:84000000})),total:screen==='empty-saved'?0:1008000000});
|
|
Downloads.configure({slots:()=>4,files:async()=>[],playlists:()=>data.playlists,jobs:()=>!['downloads','settings-detail'].includes(screen)?[]:['active','queued','paused','failed'].map((status,i)=>({...videos[i],status,error:status==='failed'?'ERROR: [youtube] Video unavailable':null,progress:status==='active'?{received:24000000,total:84000000}:null})),action:()=>{}});
|
|
channelData={name:'Preview fixtures',url:'https://www.youtube.com/@preview',key:'preview',results:videos,loading:false};
|
|
searchResults=screen==='home'?[]:videos; searchAttempted=screen!=='home';
|
|
if(screen==='empty-queue'){queue=[];data.queue=[];}
|
|
view=screen==='home'?{type:'search'}:screen==='playlist'?{type:'playlist',id:'studio'}:{type:screen.replace('empty-','')};
|
|
if(screen==='home'){current=null;els.playerPane.classList.add('empty');els.placeholder.classList.remove('hidden');}
|
|
if(['now-playing','lyrics','chapters','lyric-search','service','modal'].includes(screen))view={type:'playlist',id:'studio'};
|
|
if(screen==='settings-detail')view={type:'settings'};
|
|
render();renderUpNext();
|
|
if(screen!=='home')showMiniBar();
|
|
if(['lyrics','chapters','lyric-search'].includes(screen)){
|
|
$('notesPanel').classList.remove('hidden');
|
|
const tab=screen==='lyrics'?'lyrics':screen==='chapters'?'markers':'search';
|
|
document.querySelectorAll('.notes-tab').forEach(b=>b.classList.toggle('active',b.dataset.tab===tab));
|
|
['lyrics','markers','search'].forEach(t=>$(t+'Pane').classList.toggle('hidden',t!==tab));
|
|
$('lyricsList').innerHTML='<div class="lyr-line"><span class="lyr-text">Because You are God</span></div><div class="lyr-line active"><span class="lyr-text">You can do anything<br>You can do anything</span></div><div class="lyr-line"><span class="lyr-text">Your grace is enough</span></div>';
|
|
$('chapterList').innerHTML='<button class="marker-row"><span>0:00</span><b>Opening verse</b></button><button class="marker-row"><span>1:24</span><b>Chorus</b></button>';
|
|
}
|
|
if(screen==='service'){data.settings.serviceLyrics=true;enterServiceMode(data.playlists[0]);$('serviceLyrics').classList.remove('hidden');$('serviceLyricsList').innerHTML='<div class="sl-line">Because You are God</div><div class="sl-line active">You can do anything</div>';}
|
|
if(screen==='modal')showModal('Add to playlist',document.createTextNode('Keep this song in your Sunday setlist.'),[{label:'Cancel',onClick:closeModal},{label:'Add',primary:true,onClick:closeModal}]);
|
|
},{layout,screen});
|
|
if(screen==='settings-detail')await page.getByRole('button',{name:/Downloads & storage/}).click();
|
|
await page.addStyleTag({content:'*,*::before,*::after{animation:none!important;transition:none!important;caret-color:transparent!important}'});
|
|
await page.evaluate(async()=>{ await document.fonts.ready; await Promise.all([...document.images].map(img=>{img.loading='eager';return img.decode().catch(()=>{});})); if(document.activeElement instanceof HTMLElement)document.activeElement.blur(); });await page.waitForTimeout(300);
|
|
}
|
|
for(const width of [390,1440])for(const screen of screens)for(const layout of before?['classic','glass-stage']:['classic','glass-stage','bento-hub'])test(`${layout} ${width} ${screen}`,async({page},info)=>{
|
|
await page.setViewportSize({width,height:844});await scene(page,layout,screen);
|
|
const name=`${layout}-${width}-${screen}-${info.project.name}.png`;
|
|
const buffer=await page.screenshot({path:`${out}/${before?'before':'after'}-${name}`});
|
|
if(before)return;
|
|
if(layout!=='bento-hub'){expect(differentPixels(readFileSync(`${out}/before-${name}`),buffer)).toBeLessThanOrEqual(40);return;}
|
|
expect(await page.evaluate(()=>document.documentElement.scrollWidth<=innerWidth)).toBe(true);
|
|
expect(await page.locator('#sectionRail').evaluate(el=>el.parentElement===document.body)).toBe(true);
|
|
if(!['service','modal'].includes(screen)&&width===390){const tabs=page.locator('#bottomNav button');for(const b of await tabs.all()){if(await b.isVisible()){const r=await b.boundingBox();expect(r.height).toBeGreaterThanOrEqual(44);}}}
|
|
});
|
|
for(const width of [390,1440])test(`reference ${width}`,async({page},info)=>{
|
|
await page.setViewportSize({width,height:844});await page.route('**/__bento-reference',r=>r.fulfill({contentType:'text/html',body:readFileSync('docs/mockups/bento-hub/index.html','utf8')}));await page.goto('/__bento-reference');await page.evaluate(()=>document.fonts.ready);
|
|
await page.screenshot({path:`${out}/reference-${width}-${info.project.name}.png`,fullPage:true});
|
|
});
|