177 lines
15 KiB
JavaScript
177 lines
15 KiB
JavaScript
import assert from "node:assert/strict";
|
||
import fs from "node:fs/promises";
|
||
import path from "node:path";
|
||
import os from "node:os";
|
||
import { fileURLToPath } from "node:url";
|
||
import { chromium } from "playwright";
|
||
|
||
// Real extension toast on live YouTube, with controlled progress messages.
|
||
// Settings use their real active-job renderer and the existing browser-API fixture.
|
||
const root = path.dirname(path.dirname(fileURLToPath(import.meta.url)));
|
||
const artifacts = path.join(root, "test-artifacts");
|
||
await fs.mkdir(artifacts, { recursive: true });
|
||
const profile = await fs.mkdtemp(path.join(os.tmpdir(), "ytdl-motion-test-"));
|
||
const context = await chromium.launchPersistentContext(profile, {
|
||
headless: true, viewport: { width: 1280, height: 900 }, reducedMotion: "no-preference",
|
||
executablePath: "C:/Program Files (x86)/Microsoft/Edge/Application/msedge.exe",
|
||
ignoreDefaultArgs: ["--disable-extensions"], args: ["--enable-unsafe-extension-debugging", "--mute-audio"],
|
||
});
|
||
try {
|
||
const cdp = await context.browser().newBrowserCDPSession();
|
||
await cdp.send("Extensions.loadUnpacked", { path: path.join(root, "extension") });
|
||
const worker = context.serviceWorkers()[0] || await context.waitForEvent("serviceworker");
|
||
const page = await context.newPage();
|
||
await page.goto("https://www.youtube.com/results?search_query=subnautica+shorts", { waitUntil: "domcontentloaded", timeout: 60000 });
|
||
const consent = page.getByRole("button", { name: /Reject all|Отклонить все/i }).first();
|
||
if (await consent.isVisible()) await consent.click();
|
||
await page.waitForTimeout(700);
|
||
const tabId = await worker.evaluate(async url => (await chrome.tabs.query({})).find(tab => tab.url === url).id, page.url());
|
||
await context.route("https://ui.ytdl.test/**", async route => {
|
||
const name = new URL(route.request().url()).pathname.slice(1);
|
||
if (!["downloader.html", "styles.css", "downloader.js", "onboarding.js", "ui-connection.js", "theme-init.js", "shared.js", "session.js"].includes(name)) return route.abort();
|
||
await route.fulfill({ body: await fs.readFile(path.join(root, "extension", name)), contentType: name.endsWith(".html") ? "text/html" : name.endsWith(".css") ? "text/css" : "application/javascript" });
|
||
});
|
||
const menu = await context.newPage();
|
||
await menu.addInitScript({ path: path.join(root, "tests/ui-fixture.js") });
|
||
const errors = []; menu.on("pageerror", error => errors.push(error.message));
|
||
await menu.goto("https://ui.ytdl.test/downloader.html?theme=dark");
|
||
await menu.locator('#helper-panel[data-state="running"]').waitFor();
|
||
const jobId = "motion-preview";
|
||
const emit = async (values = {}) => {
|
||
const job = { id: jobId, title: "Проверка анимации прогресса", status: "running", stage: "downloading", track: "video", percent: 25, downloaded: 123.4 * 1048576, total: 850 * 1048576, speed: 41.5 * 1048576, ...values };
|
||
await worker.evaluate(async ({ tabId, job }) => { await chrome.tabs.sendMessage(tabId, { type: "JOB_PROGRESS", job }).catch(() => {}); }, { tabId, job });
|
||
await menu.evaluate(job => window.__emitJob(job), job);
|
||
await page.locator(`#ytdl-notifications [data-id="${jobId}"]`).waitFor();
|
||
};
|
||
const toastFill = page.locator(`#ytdl-notifications [data-id="${jobId}"] .fill`);
|
||
const historyFill = menu.locator(`[data-job-id="${jobId}"] .progress-fill`);
|
||
const toastTransfer = page.locator(`#ytdl-notifications [data-id="${jobId}"] .transfer`);
|
||
const historyTransfer = menu.locator(`[data-job-id="${jobId}"] .job-transfer`);
|
||
async function checkSize(values, expected, expectedHistory = expected) {
|
||
await emit(values);
|
||
await page.waitForFunction(({ id, text }) => document.querySelector('#ytdl-notifications').shadowRoot.querySelector(`[data-id="${id}"] .transfer`).textContent === text, { id: jobId, text: expected });
|
||
for (const [label, text] of [[toastTransfer, expected], ...(values.status && values.status !== "running" ? [] : [[historyTransfer, expectedHistory]])]) {
|
||
assert.equal(await label.textContent(), text);
|
||
assert.equal(await label.evaluate(node => node.hidden), !text);
|
||
if (text) assert.equal(await label.evaluate(node => node.scrollWidth <= node.clientWidth), true, "Byte count must fit without truncation");
|
||
}
|
||
}
|
||
async function sample(fill, indeterminate) {
|
||
await fill.page().bringToFront();
|
||
return fill.evaluate(async (node, waiting) => {
|
||
const frame = () => new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(resolve)));
|
||
await frame();
|
||
void getComputedStyle(node, '::after').animationName;
|
||
const scope = node.getRootNode();
|
||
// Chrome exposes pseudo-element animations through the ShadowRoot timeline.
|
||
const animation = scope.getAnimations().find(item => item.effect?.target === node && item instanceof CSSAnimation);
|
||
if (!animation) throw new Error("Running progress must actually animate: " + JSON.stringify({
|
||
node: node.outerHTML, reduced: matchMedia('(prefers-reduced-motion: reduce)').matches,
|
||
pseudo: { animation: getComputedStyle(node, '::after').animationName, duration:getComputedStyle(node, '::after').animationDuration, content: getComputedStyle(node, '::after').content },
|
||
animations: node.getAnimations({subtree:true}).map(item => ({name:item.animationName,type:item.constructor.name,css:item instanceof CSSAnimation})),
|
||
frames: [...(node.getRootNode().querySelector('style')?.sheet?.cssRules || [])].filter(rule=>rule.type===CSSRule.KEYFRAMES_RULE).map(rule=>rule.name),
|
||
rootAnimations: node.getRootNode().getAnimations?.().map(item=>({name:item.animationName,target:item.effect?.target?.className})),
|
||
geometry:node.getBoundingClientRect().toJSON(),visibility:document.visibilityState,
|
||
}));
|
||
animation.pause();
|
||
const duration = animation.effect.getTiming().duration;
|
||
const track = node.parentElement, positions = [];
|
||
for (const phase of [0, .125, .25, .375, .5, .625, .75, .875, .999]) {
|
||
animation.currentTime = duration * phase; await frame();
|
||
const bar = node.getBoundingClientRect(), bounds = track.getBoundingClientRect();
|
||
if (waiting && (bar.left < bounds.left - .2 || bar.right > bounds.right + .2)) throw new Error("Waiting segment escaped the track");
|
||
// A pseudo-element painted outside its fill also intercepts this hit test.
|
||
// Probe the unfilled track, rather than merely checking CSS property names.
|
||
for (let x = bounds.left + 2; x < bounds.right - 2; x += 2) {
|
||
if (x >= bar.left - 1 && x <= bar.right + 1) continue;
|
||
const hit = scope.elementFromPoint(x, bounds.top + bounds.height / 2);
|
||
if (hit === node) throw new Error("Moving highlight leaked into the unfilled track");
|
||
}
|
||
positions.push({ phase, left: bar.left - bounds.left, right: bar.right - bounds.left, trackWidth: bounds.width });
|
||
}
|
||
if (waiting) {
|
||
const travel = Math.max(...positions.map(item => item.left)) - Math.min(...positions.map(item => item.left));
|
||
if (travel < positions[0].trackWidth * .5) throw new Error("Waiting animation barely moves");
|
||
for (let i = 1; i < 5; i++) if (positions[i].left < positions[i - 1].left - .2) throw new Error("Waiting motion changes direction too early");
|
||
for (let i = 5; i < positions.length; i++) if (positions[i].left > positions[i - 1].left + .2) throw new Error("Waiting motion does not return smoothly");
|
||
}
|
||
animation.currentTime = duration * (waiting ? .5 : .75); await frame();
|
||
return positions;
|
||
}, indeterminate);
|
||
}
|
||
const results = [];
|
||
await emit();
|
||
await page.waitForTimeout(400);
|
||
await page.evaluate(id => {
|
||
const toast = document.querySelector('#ytdl-notifications').shadowRoot.querySelector(`[data-id="${id}"]`);
|
||
window.__unchangedReadoutMutations = [];
|
||
window.__readoutObserver = new MutationObserver(records => window.__unchangedReadoutMutations.push(...records.map(record => record.target.parentElement?.className || record.target.className)));
|
||
for (const selector of ['.title', '.stage', '.icon', '.label', '.action']) window.__readoutObserver.observe(toast.querySelector(selector), { childList: true, characterData: true, subtree: true });
|
||
}, jobId);
|
||
await menu.evaluate(() => {
|
||
window.__cardMoves = 0;
|
||
window.__cardObserver = new MutationObserver(records => { window.__cardMoves += records.length; });
|
||
window.__cardObserver.observe(document.querySelector('#active-jobs'), { childList: true });
|
||
});
|
||
for (let index = 0; index < 10; index++) await emit({ downloaded: (124 + index) * 1048576 });
|
||
const unchangedReadoutMutations = await page.evaluate(() => {
|
||
window.__readoutObserver.disconnect();
|
||
return window.__unchangedReadoutMutations;
|
||
});
|
||
assert.deepEqual(unchangedReadoutMutations, [], 'Unchanged progress labels must not be rebuilt for each byte-count event');
|
||
assert.equal(await menu.evaluate(() => { window.__cardObserver.disconnect(); return window.__cardMoves; }), 0, 'A progress update must not detach and reinsert the active card');
|
||
const readout = page.locator(`#ytdl-notifications [data-id="${jobId}"] .label`);
|
||
await readout.evaluate(node => { window.__progressLabelTextNode = node.firstChild; });
|
||
await emit({ percent: 26, speed: 4.2 * 1048576 });
|
||
assert.equal(await readout.textContent(), '26% · 4.2 МБ/с');
|
||
assert.equal(await readout.evaluate(node => node.firstChild === window.__progressLabelTextNode), true, 'Changing measurements must update the existing text node');
|
||
await emit({ speed: 0 });
|
||
assert.equal(await readout.textContent(), '25% · 0.0 МБ/с', 'An actual zero-speed measurement must remain visible');
|
||
for (const width of [1280, 360]) {
|
||
await page.setViewportSize({ width, height: 900 }); await menu.setViewportSize({ width: Math.min(width, 520), height: 900 });
|
||
await checkSize({ downloaded: 0 }, "Скачано 0,0 МБ из 850,0 МБ");
|
||
await checkSize({}, "Скачано 123,4 МБ из 850,0 МБ");
|
||
await checkSize({ track: "audio", downloaded: 12.8 * 1048576, total: 24.4 * 1048576 }, "Скачано 12,8 МБ из 24,4 МБ");
|
||
await checkSize({ downloaded: 12.8 * 1048576, total: 0 }, "Скачано 12,8 МБ");
|
||
await checkSize({ downloaded: null, total: null }, "");
|
||
await checkSize({ stage: "encoding", engine: "nvenc" }, "");
|
||
assert.equal(await page.locator(`#ytdl-notifications [data-id="${jobId}"] .stage`).textContent(), "Перекодирование · NVIDIA NVENC");
|
||
await checkSize({ stage: "remuxing", engine: "copy", percent: 35, processedSeconds: 84, durationSeconds: 240, written: 1234.5 * 1048576, speed: "120x", eta: 1 }, "Обработано 1:24 из 4:00 · Записано 1 234,5 МБ", "Обработано 1:24 из 4:00 · Записано 1 234,5 МБ · осталось ≈ 1 с");
|
||
assert.equal(await page.locator(`#ytdl-notifications [data-id="${jobId}"] .stage`).textContent(), "Подготовка файла · без перекодирования");
|
||
await checkSize({ stage: "audio", engine: "cpu", percent: 35, processedSeconds: 84, durationSeconds: 240, written: 1234.5 * 1048576, speed: "48x" }, "Обработано 1:24 из 4:00 · Записано 1 234,5 МБ");
|
||
assert.equal(await page.locator(`#ytdl-notifications [data-id="${jobId}"] .stage`).textContent(), "Обработка аудио · CPU");
|
||
await checkSize({ stage: "finalizing", engine: "copy", percent: 99, processedSeconds: 240, durationSeconds: 240, written: 1234.5 * 1048576, speed: "", eta: null, message: "Финализация файла" }, "Обработано 4:00 из 4:00 · Записано 1 234,5 МБ");
|
||
assert.equal(await page.locator(`#ytdl-notifications [data-id="${jobId}"] .stage`).textContent(), "Финализация файла");
|
||
await checkSize({ stage: "merging", percent: 35, processedSeconds: 84, durationSeconds: 240, written: 1234.5 * 1048576, speed: "38.6x", eta: 4.1 }, "Обработано 1:24 из 4:00 · Записано 1 234,5 МБ", "Обработано 1:24 из 4:00 · Записано 1 234,5 МБ · осталось ≈ 5 с");
|
||
await page.locator(`#ytdl-notifications [data-id="${jobId}"]`).screenshot({ path: path.join(artifacts, `progress-merging-${width}.png`) });
|
||
await checkSize({ stage: "saving", copied: 256 * 1048576, total: 1024 * 1048576, percent: 25, speed: null }, "Сохранено 256,0 МБ из 1 024,0 МБ");
|
||
await emit(); await page.waitForTimeout(400);
|
||
results.push({ width, state: "25%", toast: await sample(toastFill, false), history: await sample(historyFill, false) });
|
||
await emit({ percent: 90 }); await page.waitForTimeout(350);
|
||
// Enter waiting from a wide filled bar to catch an unwanted width transition.
|
||
await emit({ percent: null, stage: "preparing" });
|
||
results.push({ width, state: "waiting", toast: await sample(toastFill, true), history: await sample(historyFill, true) });
|
||
await page.locator(`#ytdl-notifications [data-id="${jobId}"]`).screenshot({ path: path.join(artifacts, `progress-waiting-${width}.png`) });
|
||
await emit({ percent: 25 }); await page.waitForTimeout(350);
|
||
results.push({ width, state: "resumed", toast: await sample(toastFill, false), history: await sample(historyFill, false) });
|
||
await page.locator(`#ytdl-notifications [data-id="${jobId}"]`).screenshot({ path: path.join(artifacts, `progress-downloading-${width}.png`) });
|
||
}
|
||
for (const status of ["complete", "error", "cancelled"]) {
|
||
await checkSize({ status, stage: status, percent: status === "complete" ? 100 : 25, result: status === "complete" ? { filename: "Проверка.mp4", size: 1024.5 * 1048576 } : undefined }, status === "complete" ? "Размер файла: 1 024,5 МБ" : "");
|
||
await page.waitForTimeout(350);
|
||
assert.equal(await historyFill.count(), 0, `${status}: terminal jobs move out of settings`);
|
||
assert.equal(await toastFill.evaluate(node => node.getRootNode().getAnimations().filter(item => item.effect?.target === node && item instanceof CSSAnimation).length), 0, `${status}: moving effects must stop`);
|
||
}
|
||
await page.emulateMedia({ reducedMotion: "reduce" }); await menu.emulateMedia({ reducedMotion: "reduce" });
|
||
for (const percent of [25, null]) {
|
||
await emit({ percent }); await page.waitForTimeout(30);
|
||
for (const fill of [toastFill, historyFill]) assert.equal(await fill.evaluate(node => node.getRootNode().getAnimations().filter(item => item.effect?.target === node).length), 0, "Reduced motion must disable moving effects");
|
||
}
|
||
assert.deepEqual(errors, []);
|
||
await fs.writeFile(path.join(artifacts, "progress-motion-result.json"), JSON.stringify({ version: JSON.parse(await fs.readFile(path.join(root, "extension/manifest.json"))).version, actualYouTubeToast: true, stages: results, terminalEffectsStopped: true, reducedMotion: true }, null, 2));
|
||
console.log("Progress motion passed: actual Edge/YouTube toast, stable readouts and history cards, zero-speed display, highlight clipping, bounded waiting motion, resume, narrow layout, terminal states and reduced motion.");
|
||
} finally {
|
||
await context.close();
|
||
if (path.dirname(path.resolve(profile)) === path.resolve(os.tmpdir()) && path.basename(profile).startsWith("ytdl-motion-test-")) await fs.rm(profile, { recursive: true, force: true });
|
||
}
|