This repository has no description
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159import test from 'node:test';import assert from 'node:assert/strict';import puppeteer from 'puppeteer-core';
test('custom width leaves notification avatar columns narrow', async () => { const browser = await puppeteer.launch({ executablePath: process.env.CHROME_PATH || '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome', headless: true, }); try { const page = await browser.newPage(); await page.setViewport({ width: 1600, height: 1000 }); await page.setContent(`<div id="root"><main><div class="css-g5y9jx"><div><div><div> <div></div><div><div> <div></div><div></div><div></div><div></div> <div id="feed" style="max-width:600px;margin:auto"><div><div> <div id="notification" style="display:flex"> <div id="avatar" style="width:48px;flex-shrink:0"><div></div><div>Avatar</div></div> <div id="text" style="flex:1;min-width:0;overflow-wrap:anywhere">Notification text should have room to wrap normally.</div> </div> </div></div></div> </div></div> </div></div></div></div></main></div>`); await page.addScriptTag({ path: 'extension/shared/feed-width.js' }); await page.evaluate(() => window.BskyPlusFeedWidth.setWidth(1000)); await page.waitForFunction(() => document.getElementById('feed').getBoundingClientRect().width === 1000 && !document.documentElement.hasAttribute('data-bskyplus-feed-width-animating')); const layout = await page.evaluate(() => Object.fromEntries( ['feed', 'avatar', 'text'].map(id => [id, document.getElementById(id).getBoundingClientRect().width]))); assert.equal(layout.feed, 1000); assert.equal(layout.avatar, 48, 'Avatar column must retain its own width'); assert.ok(layout.text > 900, 'Notification text must retain the remaining row width'); } finally { await browser.close(); }});
test('widened text-only posts use the full column while embeds stay contained', async () => { const browser = await puppeteer.launch({ executablePath: process.env.CHROME_PATH || '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome', headless: true, }); try { const page = await browser.newPage(); await page.setViewport({ width: 1600, height: 1000 }); await page.setContent(` <div id="feed" style="max-width:600px;margin:auto"> <div data-testid="contentHider-post" style="display:flex;flex-direction:column"> <div id="textWrapper" style="display:flex;margin-bottom:2px"> <div data-testid="postText" style="flex:1 1 0%">A text-only post that should fill the feed.</div> </div> </div> <div data-testid="contentHider-post" style="display:flex;flex-direction:column"> <div style="display:flex;margin-bottom:2px"><div data-testid="postText">A post with media.</div></div> <div id="media" style="padding-bottom:4px"><img id="mediaImage" alt="Sample image" style="width:100%;height:200px"></div> </div> <div data-testid="contentHider-post" style="display:flex;flex-direction:column"> <div id="videoWrapper" style="padding-bottom:4px"><video id="postVideo" style="width:100%;height:200px"></video></div> </div> <div data-testid="contentHider-post" style="display:flex;flex-direction:column"> <div id="quote" style="padding-bottom:4px"> <div data-testid="userAvatarImage"><img alt="Quoted author" style="width:16px;height:16px"></div> A text-only quote card. </div> </div> </div> `); await page.addStyleTag({ path: 'extension/shared/features.css' }); await page.addScriptTag({ path: 'extension/shared/feed-width.js' }); await page.evaluate(() => window.BskyPlusFeedWidth.setWidth(1000)); await page.waitForFunction(() => document.getElementById('feed').getBoundingClientRect().width === 1000 && !document.documentElement.hasAttribute('data-bskyplus-feed-width-animating'));
const widths = await page.evaluate(() => { const post = document.createElement('div'); post.setAttribute('data-testid', 'contentHider-post'); post.style.cssText = 'display:flex;flex-direction:column'; const wrapper = document.createElement('div'); wrapper.id = 'newTextWrapper'; wrapper.style.marginBottom = '2px'; const text = document.createElement('div'); text.setAttribute('data-testid', 'postText'); text.textContent = 'A newly loaded text-only post.'; wrapper.appendChild(text); post.appendChild(wrapper); document.getElementById('feed').appendChild(post);
return Object.fromEntries(['textWrapper', 'newTextWrapper', 'media', 'mediaImage', 'videoWrapper', 'postVideo', 'quote'].map(id => [ id, document.getElementById(id).getBoundingClientRect().width ])); }); assert.deepEqual(widths, { textWrapper: 1000, newTextWrapper: 1000, media: 600, mediaImage: 600, videoWrapper: 600, postVideo: 600, quote: 1000 }); } finally { await browser.close(); }});
test('live width changes animate the feed, borders, and sidebars unless motion is reduced', async () => { const browser = await puppeteer.launch({ executablePath: process.env.CHROME_PATH || '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome', headless: true, }); try { const page = await browser.newPage(); await page.setViewport({ width: 1600, height: 1000 }); await page.setContent(` <nav id="left" role="navigation" style="position:fixed;left:0;top:0;width:200px"></nav> <div id="right" style="position:fixed;left:50%;width:280px;transform:translateX(300px)"></div> <div id="borders" style="width:602px"></div> <div id="feed" style="max-width:600px;margin:auto"></div> `); await page.addScriptTag({ path: 'extension/shared/feed-width.js' }); await page.evaluate(() => window.BskyPlusFeedWidth.setWidth(900)); await page.waitForFunction(() => document.getElementById('feed').getAnimations() .some(animation => animation.transitionProperty === 'max-width'));
const active = await page.evaluate(() => { const isTransitioning = (id, property) => document.getElementById(id).getAnimations() .some(animation => animation.transitionProperty === property); return { feed: isTransitioning('feed', 'max-width'), borders: isTransitioning('borders', 'width'), left: isTransitioning('left', 'margin-left'), right: isTransitioning('right', 'margin-left') }; }); assert.deepEqual(active, { feed: true, borders: true, left: true, right: true }); const duration = await page.$eval('#feed', feed => feed.getAnimations() .find(animation => animation.transitionProperty === 'max-width').effect.getTiming().duration); assert.equal(duration, 800);
await page.waitForFunction(() => Math.round(document.getElementById('feed').getBoundingClientRect().width) === 900 && !document.documentElement.hasAttribute('data-bskyplus-feed-width-animating')); await page.emulateMediaFeatures([{ name: 'prefers-reduced-motion', value: 'reduce' }]); const reducedMotion = await page.evaluate(() => { window.BskyPlusFeedWidth.setWidth(700); const feed = document.getElementById('feed'); return { width: feed.getBoundingClientRect().width, animations: feed.getAnimations().length }; }); assert.deepEqual(reducedMotion, { width: 700, animations: 0 }); } finally { await browser.close(); }});