使用实际生成脚本与离线示例数据。可拖动、收起、查看历史点；不会连接交易所。切换选项会重置预览。
+ + + + + +`; + +await mkdir(output, { recursive: true }); +await writeFile(new URL('index.html', output), html); +await writeFile(new URL('manifest.json', output), JSON.stringify({ + kind: 'offline-example-data-preview', generatedAt: new Date().toISOString(), + artifacts: artifacts.map(({ name, version, sha256 }) => ({ name, version, sha256 })), +}, null, 2) + '\n'); +console.log(fileURLToPath(new URL('index.html', output))); diff --git a/e2e/binance-orderbook/helpers/verify-data-panels-preview.mjs b/e2e/binance-orderbook/helpers/verify-data-panels-preview.mjs new file mode 100644 index 00000000..ae35bbf8 --- /dev/null +++ b/e2e/binance-orderbook/helpers/verify-data-panels-preview.mjs @@ -0,0 +1,79 @@ +import assert from 'node:assert/strict'; +import { createHash } from 'node:crypto'; +import { readFile, writeFile } from 'node:fs/promises'; +import { fileURLToPath } from 'node:url'; +import { chromium, expect } from '@playwright/test'; + +const output = new URL('../../../output/data-panels-preview/', import.meta.url); +const manifest = JSON.parse(await readFile(new URL('manifest.json', output), 'utf8')); +for (const artifact of manifest.artifacts) { + const source = await readFile(new URL(`../../../scripts/${artifact.name}.user.js`, import.meta.url), 'utf8'); + assert.equal(createHash('sha256').update(source).digest('hex'), artifact.sha256, `Stale preview artifact: ${artifact.name}`); +} +const cases = [ + { name: 'desktop-zh-light', locale: 'zh-CN', theme: 'light', viewport: { width: 1600, height: 1200 } }, + { name: 'desktop-en-dark', locale: 'en', theme: 'dark', viewport: { width: 1600, height: 1200 } }, + { name: 'mobile-zh-light', locale: 'zh-CN', theme: 'light', viewport: { width: 390, height: 844 } }, + { name: 'mobile-en-dark', locale: 'en', theme: 'dark', viewport: { width: 320, height: 900 } }, +]; +const checks = []; +const browser = await chromium.launch({ headless: true }); +try { + for (const scenario of cases) { + const context = await browser.newContext({ viewport: scenario.viewport }); + await context.setOffline(true); + const page = await context.newPage(); + const errors = []; + const externalRequests = []; + page.on('pageerror', error => errors.push(error.message)); + page.on('request', request => { if (/^https?:/.test(request.url())) externalRequests.push(request.url()); }); + await page.goto(new URL('index.html', output).href); + const frame = page.frameLocator('#preview-frame'); + await expect(frame.locator('#jh-binance-cmc-data-panel-footer a')).toHaveText('CMC data-api'); + if (scenario.locale !== 'zh-CN') await page.locator('#locale').selectOption(scenario.locale); + if (scenario.theme !== 'light') await page.locator('#theme').selectOption(scenario.theme); + await expect(frame.locator('#jh-binance-trading-data-panel .td-title')).toHaveText(scenario.locale === 'zh-CN' ? '交易数据' : 'Trading data'); + await expect(frame.locator('#jh-binance-cmc-data-panel .cmc-title')).toHaveText(scenario.locale === 'zh-CN' ? 'CMC 数据' : 'CMC data'); + await expect(frame.locator('#jh-binance-trading-data-panel')).toHaveCSS('background-color', scenario.theme === 'dark' ? 'rgb(30, 35, 41)' : 'rgb(255, 255, 255)'); + await expect(frame.locator('[data-role="current-funding"]')).toHaveText('0.00378%'); + await expect(frame.locator('[data-metric="funding"] .td-last-value')).toHaveText('0.000029%'); + await expect(frame.locator('[data-role="funding-period"]')).toHaveText(scenario.locale === 'zh-CN' ? '当前 · 4小时' : 'Current · 4h'); + if (scenario.viewport.width < 500) await frame.locator('[data-metric="funding"]').scrollIntoViewIfNeeded(); + const readings = await page.locator('#preview-frame').evaluate(element => { + const document = element.contentDocument; + return { + viewport: { width: element.contentWindow.innerWidth, height: element.contentWindow.innerHeight }, + versions: element.contentWindow.previewEvidence.versions, + panels: ['jh-binance-trading-data-panel', 'jh-binance-cmc-data-panel'].map(id => { + const panel = document.getElementById(id); + const body = document.getElementById(`${id}-body`); + const { x, y, width, height } = panel.getBoundingClientRect(); + return { + id, x, y, width, height, bodyWidth: body.clientWidth, bodyScrollWidth: body.scrollWidth, + minFont: Math.min(...[...panel.querySelectorAll('small')].filter(node => node.getClientRects().length).map(node => parseFloat(element.contentWindow.getComputedStyle(node).fontSize))), + }; + }), + }; + }); + const [trading, cmc] = readings.panels; + const overlap = Math.max(0, Math.min(trading.x + trading.width, cmc.x + cmc.width) - Math.max(trading.x, cmc.x)) + * Math.max(0, Math.min(trading.y + trading.height, cmc.y + cmc.height) - Math.max(trading.y, cmc.y)); + assert.equal(overlap, 0); + for (const panel of readings.panels) { + assert.ok(panel.minFont >= 11, `${panel.id} annotation font is below 11px`); + assert.ok(panel.bodyScrollWidth <= panel.bodyWidth, `${panel.id} has horizontal overflow`); + assert.ok(panel.x >= 0 && panel.x + panel.width <= readings.viewport.width, `${panel.id} exceeds viewport width`); + assert.ok(panel.y >= 0 && panel.y + panel.height <= readings.viewport.height, `${panel.id} exceeds viewport height`); + } + assert.deepEqual(errors, []); + assert.deepEqual(externalRequests, []); + assert.deepEqual(readings.versions, manifest.artifacts); + await page.screenshot({ path: fileURLToPath(new URL(`${scenario.name}.png`, output)), fullPage: true }); + checks.push({ ...scenario, ...readings, overlap, errors, externalRequests: externalRequests.length }); + await context.close(); + } +} finally { + await browser.close(); +} +await writeFile(new URL('browser-checks.json', output), JSON.stringify(checks, null, 2) + '\n'); +console.log(JSON.stringify(checks.map(({ name, overlap, errors, externalRequests }) => ({ name, overlap, errors, externalRequests })))); diff --git a/e2e/binance-orderbook/specs/data-panel-position.pw.js b/e2e/binance-orderbook/specs/data-panel-position.pw.js index 5fbda2fb..9db5eaaf 100644 --- a/e2e/binance-orderbook/specs/data-panel-position.pw.js +++ b/e2e/binance-orderbook/specs/data-panel-position.pw.js @@ -1,173 +1,15 @@ -import assert from 'node:assert/strict'; -import { fileURLToPath } from 'node:url'; import { test, expect, reloadPageWithCoverage } from '../test.js'; -import { cmcDetail, tradingDataset } from '../../../test/helpers/data-media-migration-host.js'; +import { + DATA_PANEL_NOW as NOW, DATA_PANELS as PANELS, POSITION_AUDIT_KEY as AUDIT_KEY, + CMC_HEADERS, createDataPanelsFixture as createFixture, installDataPanels as installPanels, +} from '../helpers/data-panels-host.js'; -const ORIGIN = 'https://www.binance.com'; -const FIXTURE_URL = `${ORIGIN}/zh-CN/futures/BTCUSDT`; -const NOW = Date.UTC(2026, 9, 9, 0, 0, 0); -const AUDIT_KEY = '__data_panel_fixture_position_writes__'; const LARGE = { width: 1600, height: 1200 }; const SMALL = { width: 640, height: 420 }; const INITIAL = { - trading: { left: 1250, top: 700 }, - cmc: { left: 930, top: 620 }, + trading: { left: 1080, top: 700 }, + cmc: { left: 530, top: 620 }, }; -const PANELS = [ - { - name: 'trading', id: 'jh-binance-trading-data-panel', - key: 'jh_binance_trading_data_pos', artifact: 'binance-trading-data', - }, - { - name: 'cmc', id: 'jh-binance-cmc-data-panel', - key: 'jh_binance_cmc_data_pos', artifact: 'binance-coinmarketcap-data', - }, -]; -const CMC_HEADERS = { - Accept: 'application/json, text/plain, */*', - 'Cache-Control': 'no-cache', - Pragma: 'no-cache', -}; - -/** Exercise the current successful requestJson boundary; unmodeled requests fail. */ -async function createFixture(context) { - const requests = []; - const gmRequests = []; - const errors = []; - const dataset = tradingDataset(NOW); - const map = { data: [{ id: 1, symbol: 'BTC', slug: 'bitcoin', is_active: 1 }] }; - - await context.exposeBinding('__dataPanelFixtureCmcResponse', (_source, request) => { - assert.deepEqual(Object.keys(request).sort(), ['headers', 'method', 'timeout', 'url']); - assert.equal(request.method, 'GET'); - assert.equal(request.timeout, 20_000); - assert.deepEqual(request.headers, CMC_HEADERS); - gmRequests.push(request); - const url = new URL(request.url); - let body; - if (url.origin === 'https://api.coinmarketcap.com' && url.pathname === '/data-api/v1/cryptocurrency/map') { - assert.deepEqual(Object.fromEntries(url.searchParams), { - symbol: 'BTC', listing_status: 'active', _: String(NOW), - }); - body = map; - } else if (url.origin === 'https://api.coinmarketcap.com' && url.pathname === '/data-api/v3/cryptocurrency/detail') { - assert.deepEqual(Object.fromEntries(url.searchParams), { - id: '1', convertId: '2781', languageCode: 'zh', _: String(NOW), - }); - body = { data: cmcDetail() }; - } else if (url.origin === 'https://dapi.coinmarketcap.com' && url.pathname === '/dex-stats/v3/dexer/crypto-holder/show_holders') { - assert.deepEqual(Object.fromEntries(url.searchParams), { cryptoId: '1', _: String(NOW) }); - body = { data: { showFlag: true, count: 10_000 } }; - } else { - assert.fail(`Unmodeled CMC request: ${url.origin}${url.pathname}`); - } - return { status: 200, responseText: JSON.stringify(body) }; - }); - - await context.addInitScript(({ origin, keys, auditKey }) => { - if (location.origin !== origin) return; - const nativeSetItem = Storage.prototype.setItem; - if (localStorage.getItem(auditKey) === null) { - nativeSetItem.call(localStorage, auditKey, '[]'); - } - window.dataPanelFixture = { resizeEvents: 0, gmCompletions: [], pointerEvents: [] }; - window.addEventListener('resize', () => { window.dataPanelFixture.resizeEvents += 1; }); - document.addEventListener('mousemove', event => { - window.dataPanelFixture.pointerEvents.push({ - buttons: event.buttons, x: event.clientX, y: event.clientY, trusted: event.isTrusted, - }); - }, { capture: true }); - - // Keep actual browser persistence and retain evidence after real tab teardown. - Storage.prototype.setItem = function (key, value) { - nativeSetItem.call(this, key, value); - if (this !== localStorage || !keys.includes(key)) return; - const writes = JSON.parse(localStorage.getItem(auditKey)); - writes.push({ key, value: JSON.parse(value) }); - nativeSetItem.call(localStorage, auditKey, JSON.stringify(writes)); - }; - - // The source adapter consumes these callbacks and the status/responseText pair. - window.GM_xmlhttpRequest = options => { - for (const name of ['onload', 'onerror', 'ontimeout']) { - if (typeof options[name] !== 'function') throw new Error(`Missing GM callback: ${name}`); - } - const request = { - method: options.method, url: options.url, - timeout: options.timeout, headers: options.headers, - }; - window.__dataPanelFixtureCmcResponse(request).then(response => { - window.dataPanelFixture.gmCompletions.push({ url: options.url, response }); - options.onload(response); - }); - }; - }, { origin: ORIGIN, keys: PANELS.map(panel => panel.key), auditKey: AUDIT_KEY }); - - await context.route('**/*', async route => { - const request = route.request(); - const url = new URL(request.url()); - assert.equal(request.method(), 'GET'); - if (url.href === FIXTURE_URL && request.isNavigationRequest()) { - await route.fulfill({ - contentType: 'text/html; charset=utf-8', - body: '