83 lines
4.5 KiB
JavaScript
83 lines
4.5 KiB
JavaScript
// Run against `bun run dev`. Installed Chrome, isolated fixture, no note APIs.
|
|
import assert from "node:assert/strict";
|
|
import { readFile } from "node:fs/promises";
|
|
import { chromium } from "@playwright/test";
|
|
const origin = process.env.EDGE_EVER_BROWSER_TEST_URL ?? "http://127.0.0.1:5173";
|
|
const fixture = `${origin}/@fs${process.cwd()}/tests/browser/poster-previews.html`;
|
|
const manifest = JSON.parse(await readFile(new URL("../apps/web/src/assets/poster-template-previews/manifest.json", import.meta.url)));
|
|
const browser = await chromium.launch({ channel: "chrome", headless: true });
|
|
const firstReady = page => page.waitForFunction(() => {
|
|
const cards = [...document.querySelectorAll("[data-poster-template]")].slice(0, 6);
|
|
return cards.length === 6 && cards.every(card => card.querySelector("img")?.naturalWidth > 0);
|
|
}, null, { timeout: 10_000 });
|
|
try {
|
|
const page = await browser.newPage();
|
|
const errors = [];
|
|
page.on("pageerror", error => errors.push(String(error)));
|
|
await page.addInitScript(() => {
|
|
window.canvasAttempts = 0;
|
|
const forbidden = () => { window.canvasAttempts++; throw new Error("Gallery tried to render a canvas"); };
|
|
HTMLCanvasElement.prototype.getContext = forbidden;
|
|
HTMLCanvasElement.prototype.toBlob = forbidden;
|
|
URL.createObjectURL = forbidden;
|
|
});
|
|
const fontRequests = [];
|
|
await page.route("**/*", route => {
|
|
if (["font", "xhr"].includes(route.request().resourceType())) {
|
|
fontRequests.push(route.request().url());
|
|
return route.abort();
|
|
}
|
|
return route.continue();
|
|
});
|
|
await page.goto(fixture);
|
|
await page.waitForFunction(() => window.posterPreviewTest);
|
|
await firstReady(page);
|
|
const firstSources = await page.locator('[data-poster-template] img').evaluateAll(images => images.map(image => image.getAttribute('src')));
|
|
assert(firstSources.every(source => source.includes('.zh.webp') && !source.startsWith('blob:')));
|
|
assert.equal(await page.getByText('载入版式…', { exact: true }).count(), 0);
|
|
await page.screenshot({ path: "/tmp/edgeever-static-poster-previews.png" });
|
|
console.log("PASS: visible static previews load with canvas disabled and fonts blocked");
|
|
|
|
await page.getByRole('button', { name: 'All templates', exact: true }).click();
|
|
assert.equal(await page.locator('[data-poster-template]').count(), manifest.templates.length);
|
|
// Scroll each real card into view so lazy image loading is exercised too.
|
|
for (const template of manifest.templates) {
|
|
const image = page.locator(`[data-poster-template="${template.id}"] img`);
|
|
await image.scrollIntoViewIfNeeded();
|
|
await image.evaluate(image => image.decode());
|
|
}
|
|
console.log(`PASS: all ${manifest.templates.length} Chinese thumbnails decode`);
|
|
|
|
await page.evaluate(() => window.posterPreviewTest.mount(false));
|
|
await firstReady(page);
|
|
for (const template of manifest.templates) {
|
|
const image = page.locator(`[data-poster-template="${template.id}"] img`);
|
|
await image.scrollIntoViewIfNeeded();
|
|
await image.evaluate(image => image.decode());
|
|
assert((await image.getAttribute('src')).includes('.en.webp'));
|
|
}
|
|
console.log(`PASS: all ${manifest.templates.length} English thumbnails decode`);
|
|
|
|
const selected = page.locator('[data-poster-template="folio"]');
|
|
await selected.focus();
|
|
await page.keyboard.press('Enter');
|
|
assert.deepEqual(await page.evaluate(() => window.posterPreviewTest.applied), ['folio']);
|
|
await page.getByRole('textbox').fill('Minimal');
|
|
assert.equal(await page.locator('[data-poster-template]').count(), 1);
|
|
assert.equal(await page.locator('[data-poster-template]').getAttribute('data-poster-template'), 'minimal');
|
|
console.log("PASS: search and keyboard template selection still work");
|
|
|
|
await page.evaluate(() => window.posterPreviewTest.mount(true, undefined, false));
|
|
await page.locator('[data-poster-template]').first().waitFor({ state: 'detached' });
|
|
await page.evaluate(() => window.posterPreviewTest.mount(true, 'wechat'));
|
|
await firstReady(page);
|
|
assert.equal(await page.locator('[data-poster-template]').count(), manifest.templates.filter(template => template.recommended).length);
|
|
assert.equal(await page.evaluate(() => window.canvasAttempts), 0);
|
|
// CSS may request UI text fonts; none of the gallery's design fonts are loaded.
|
|
assert.equal(fontRequests.filter(url => /poster-fonts|fontsource|jsdelivr|fonts\.googleapis/.test(url)).length, 0);
|
|
assert.deepEqual(errors, []);
|
|
console.log("PASS: reopening/platform changes use static images; zero canvas renders or design-font requests");
|
|
} finally {
|
|
await browser.close();
|
|
}
|