427 lines
16 KiB
JavaScript
427 lines
16 KiB
JavaScript
/** 回归缺口：刷新时列宽、响应式结构和动态列不能猜测；同样五行内容替换骨架不应改变相邻卡片位置。 */
|
|
import assert from "node:assert/strict";
|
|
import { test } from "node:test";
|
|
import {
|
|
backendOrigin,
|
|
eventually,
|
|
login,
|
|
scenario,
|
|
} from "./helpers/console-browser.mjs";
|
|
|
|
// 通过外部 HTTP 延迟实际列表，首屏不得先猜测表头；成功后的刷新则保留原表与数据。
|
|
for (const width of [390, 1440]) {
|
|
test(
|
|
`host columns wait for their schema and survive refresh at ${width}px`,
|
|
{ timeout: 30000 },
|
|
(t) =>
|
|
scenario(t, {}, async (page) => {
|
|
await page.setViewportSize({ width, height: 900 });
|
|
await page.emulateMedia({ reducedMotion: "reduce" });
|
|
let release;
|
|
let held = new Promise((resolve) => {
|
|
release = resolve;
|
|
});
|
|
let reads = 0;
|
|
let fail = false;
|
|
await page.route(
|
|
(url) =>
|
|
url.origin === backendOrigin &&
|
|
/^\/console\/v1\/mf_cloud\/7[0-9]{2}(?:\/flow)?$/.test(
|
|
url.pathname,
|
|
),
|
|
(route) =>
|
|
route.fulfill({
|
|
json: {
|
|
status: 200,
|
|
msg: "",
|
|
data: {
|
|
image: { name: "Ubuntu 24.04" },
|
|
total: 100,
|
|
used: 20,
|
|
leave: 80,
|
|
},
|
|
},
|
|
}),
|
|
);
|
|
await page.route(
|
|
`${backendOrigin}/console/v1/home/host?*`,
|
|
async (route) => {
|
|
reads++;
|
|
await held;
|
|
return route.fulfill({
|
|
json: {
|
|
status: fail ? 400 : 200,
|
|
msg: fail ? "本地列配置读取失败" : "",
|
|
data: {
|
|
count: 20,
|
|
list: Array.from({ length: 20 }, (_, index) => ({
|
|
id: 701 + index,
|
|
name: `audit-host-${701 + index}`,
|
|
product_name: "本地验收云服务器",
|
|
module: "mf_cloud",
|
|
status: "Unpaid",
|
|
self_defined_field: { 101: "青岛" },
|
|
})),
|
|
select_field: ["name", "product_name", "status"],
|
|
self_defined_field: [
|
|
{ id: 101, field_name: "部署区域", field_type: "text" },
|
|
],
|
|
},
|
|
},
|
|
});
|
|
},
|
|
);
|
|
try {
|
|
await login(page, "/cloud-servers?m=73");
|
|
await page.locator(".host-list-page").waitFor();
|
|
await page.locator("#__nuxt-loader").waitFor({ state: "detached" });
|
|
assert.equal(await page.locator(".list-table table").count(), 0);
|
|
await page.locator(".list-table .list-empty-title").waitFor();
|
|
assert.equal(
|
|
await page.locator(".list-table").getAttribute("aria-busy"),
|
|
"true",
|
|
);
|
|
release();
|
|
await page.getByText("audit-host-701", { exact: true }).waitFor();
|
|
const table = page.locator(".list-table table");
|
|
const headers = () => table.locator("th").allTextContents();
|
|
const accepted = await headers();
|
|
assert.ok(accepted.includes("部署区域"));
|
|
assert.ok(accepted.includes("名称"));
|
|
for (const absent of [
|
|
"IP",
|
|
"地域",
|
|
"计费方式",
|
|
"自动续费",
|
|
"基础信息",
|
|
])
|
|
assert.equal(accepted.includes(absent), false);
|
|
const identity = await table.elementHandle();
|
|
held = new Promise((resolve) => {
|
|
release = resolve;
|
|
});
|
|
await page.getByRole("button", { name: "搜索", exact: true }).click();
|
|
await eventually(
|
|
() => reads,
|
|
(count) => count === 2,
|
|
"Refresh reaches HTTP boundary",
|
|
);
|
|
assert.equal(
|
|
await identity.evaluate(
|
|
(element) =>
|
|
element === document.querySelector(".list-table table"),
|
|
),
|
|
true,
|
|
);
|
|
assert.deepEqual(await headers(), accepted);
|
|
assert.equal(
|
|
await page.getByText("audit-host-701", { exact: true }).isVisible(),
|
|
true,
|
|
);
|
|
release();
|
|
await page.locator(".p-datatable-mask").waitFor({ state: "hidden" });
|
|
await page.evaluate(() =>
|
|
window.scrollTo({ top: 500, behavior: "instant" }),
|
|
);
|
|
const savedScroll = await page.evaluate(() => scrollY);
|
|
assert.ok(savedScroll > 300);
|
|
// 真实站内链接离页再返回，复用行缓存但重新取得列元数据；失败不能永久停留在加载态。
|
|
await page
|
|
.locator('nav a[href="/security/ssh-keys"]')
|
|
.evaluate((element) => element.click());
|
|
await page.waitForURL((url) => url.pathname === "/security/ssh-keys");
|
|
fail = true;
|
|
await page.goBack();
|
|
await page
|
|
.getByRole("button", { name: "重新加载", exact: true })
|
|
.waitFor();
|
|
assert.equal(await page.locator(".list-table table").count(), 0);
|
|
assert.equal(
|
|
await page.locator(".list-table").getAttribute("aria-busy"),
|
|
"false",
|
|
);
|
|
assert.equal(
|
|
await page.locator(".host-list-foot").getAttribute("inert"),
|
|
"",
|
|
);
|
|
fail = false;
|
|
await page
|
|
.getByRole("button", { name: "重新加载", exact: true })
|
|
.click();
|
|
await page.getByText("audit-host-701", { exact: true }).waitFor();
|
|
assert.deepEqual(await headers(), accepted);
|
|
await eventually(
|
|
() => page.evaluate(() => scrollY),
|
|
(position) => Math.abs(position - savedScroll) <= 1,
|
|
"Returning after metadata retry restores the saved list position",
|
|
);
|
|
return {
|
|
width,
|
|
speculativeTable: false,
|
|
refreshRetainsTable: true,
|
|
metadataFailureCanRetry: true,
|
|
};
|
|
} finally {
|
|
release();
|
|
}
|
|
}),
|
|
);
|
|
}
|
|
|
|
for (const routePath of ["/cloud-servers", "/cloud-servers?m=74"]) {
|
|
test(
|
|
`empty host response without select_field resolves columns at ${routePath}`,
|
|
{ timeout: 30000 },
|
|
(t) =>
|
|
scenario(t, {}, async (page) => {
|
|
await page.route(
|
|
`${backendOrigin}/console/v1/${routePath.includes("?") ? "home/host" : "host"}?*`,
|
|
(route) =>
|
|
route.fulfill({
|
|
json: {
|
|
status: 200,
|
|
msg: "",
|
|
data: { list: [], count: 0, server_page: "classified-v1" },
|
|
},
|
|
}),
|
|
);
|
|
await login(page, routePath);
|
|
await page.locator(".list-table table").waitFor();
|
|
await page.locator(".list-table .list-empty-title").waitFor();
|
|
assert.equal(
|
|
await page.locator(".list-table").getAttribute("aria-busy"),
|
|
"false",
|
|
);
|
|
const headers = await page.locator(".list-table th").allTextContents();
|
|
assert.ok(headers.includes("IP"));
|
|
assert.equal(headers.includes("计费方式"), routePath.includes("?"));
|
|
return {
|
|
routePath,
|
|
emptySchemaResolved: true,
|
|
legacyColumnsRetained: true,
|
|
};
|
|
}),
|
|
);
|
|
}
|
|
|
|
for (const [routePath, endpoint, loadedText] of [
|
|
["/security/ssh-keys", "ssh_key", "audit-01"],
|
|
["/orders", "order", "本地订单布局验收"],
|
|
])
|
|
for (const width of [390, 640, 768, 1440]) {
|
|
test(
|
|
`${routePath} refresh preserves its responsive layout while data loads at ${width}px`,
|
|
{ timeout: 30000 },
|
|
(t) =>
|
|
scenario(t, {}, async (page) => {
|
|
await page.setViewportSize({ width, height: 900 });
|
|
await page.emulateMedia({ reducedMotion: "reduce" });
|
|
if (endpoint === "order")
|
|
await page.route(`${backendOrigin}/console/v1/order?*`, (route) =>
|
|
route.fulfill({
|
|
json: {
|
|
status: 200,
|
|
msg: "",
|
|
data: {
|
|
count: 1,
|
|
list: [
|
|
{
|
|
id: 7,
|
|
create_time: 1730000000,
|
|
type: "new",
|
|
name: loadedText,
|
|
gateway_name: "本地支付方式",
|
|
status: "Unpaid",
|
|
amount: "20.00",
|
|
},
|
|
],
|
|
},
|
|
},
|
|
}),
|
|
);
|
|
await login(page, routePath);
|
|
await page.getByText(loadedText, { exact: true }).waitFor();
|
|
let release;
|
|
const held = new Promise((resolve) => {
|
|
release = resolve;
|
|
});
|
|
await page.route(
|
|
`${backendOrigin}/console/v1/${endpoint}?*`,
|
|
async (route) => {
|
|
await held;
|
|
return route.fallback();
|
|
},
|
|
);
|
|
const geometry = () =>
|
|
page.locator(".list-table").evaluate((panel) => {
|
|
const table = panel.querySelector("table");
|
|
const header = table.querySelector("thead");
|
|
return {
|
|
panelMinHeight: getComputedStyle(panel).minHeight,
|
|
panelHeight: panel.getBoundingClientRect().height,
|
|
tableWidth: table.getBoundingClientRect().width,
|
|
tableMinWidth: getComputedStyle(table).minWidth,
|
|
tableDisplay: getComputedStyle(table).display,
|
|
headerDisplay: getComputedStyle(header).display,
|
|
columns: [...header.querySelectorAll("th")].map((cell) => ({
|
|
title: cell.textContent.trim(),
|
|
left: cell.getBoundingClientRect().left,
|
|
width: cell.getBoundingClientRect().width,
|
|
})),
|
|
viewport: innerWidth,
|
|
documentWidth: document.documentElement.scrollWidth,
|
|
};
|
|
});
|
|
let loading;
|
|
try {
|
|
// 真正刷新已登录的深链接；响应挂起时读取用户能看见的加载布局。
|
|
await page.reload();
|
|
await page.locator(".p-datatable-mask").waitFor();
|
|
await page.locator("#__nuxt-loader").waitFor({ state: "detached" });
|
|
loading = await geometry();
|
|
} finally {
|
|
release();
|
|
}
|
|
await page.getByText(loadedText, { exact: true }).waitFor();
|
|
await page
|
|
.locator(".p-datatable-mask")
|
|
.waitFor({ state: "detached" });
|
|
const ready = await geometry();
|
|
t.diagnostic(JSON.stringify({ width, loading, ready }));
|
|
for (const dimension of [
|
|
"panelMinHeight",
|
|
"tableDisplay",
|
|
"headerDisplay",
|
|
])
|
|
assert.equal(
|
|
loading[dimension],
|
|
ready[dimension],
|
|
`Loading must not switch ${dimension} before the same table receives data`,
|
|
);
|
|
if (width < 640) {
|
|
assert.ok(
|
|
loading.tableWidth <= width,
|
|
"The loading card must fit the phone",
|
|
);
|
|
assert.equal(loading.headerDisplay, "none");
|
|
} else {
|
|
assert.equal(loading.columns.length, ready.columns.length);
|
|
for (let index = 0; index < loading.columns.length; index++) {
|
|
const before = loading.columns[index];
|
|
const after = ready.columns[index];
|
|
assert.equal(before.title, after.title);
|
|
for (const dimension of ["left", "width"])
|
|
assert.ok(
|
|
Math.abs(before[dimension] - after[dimension]) <= 1,
|
|
`${before.title} ${dimension} changed: ${before[dimension]} -> ${after[dimension]}`,
|
|
);
|
|
}
|
|
}
|
|
assert.equal(loading.documentWidth, loading.viewport);
|
|
assert.equal(ready.documentWidth, ready.viewport);
|
|
// 再次查询复用已显示的数据，不能恢复视口高度占位或另一套表格模式。
|
|
if (endpoint === "ssh_key")
|
|
await page
|
|
.getByRole("button", { name: "搜索", exact: true })
|
|
.click();
|
|
else
|
|
await page
|
|
.getByRole("textbox", { name: "搜索订单", exact: true })
|
|
.press("Enter");
|
|
await eventually(
|
|
() => page.locator(".p-datatable-mask").count(),
|
|
(count) => count === 0,
|
|
"Refreshing a populated table completes",
|
|
);
|
|
return {
|
|
routePath,
|
|
width,
|
|
loadingLayoutMatchesReady: true,
|
|
phoneFits: width >= 640 || loading.tableWidth <= width,
|
|
};
|
|
}),
|
|
);
|
|
}
|
|
|
|
for (const width of [1440, 390]) {
|
|
test(
|
|
`home list reserves its rendered row geometry at ${width}px`,
|
|
{ timeout: 30000 },
|
|
(t) =>
|
|
scenario(t, {}, async (page) => {
|
|
await page.setViewportSize({ width, height: 900 });
|
|
await page.emulateMedia({ reducedMotion: "reduce" });
|
|
let release;
|
|
const held = new Promise((resolve) => {
|
|
release = resolve;
|
|
});
|
|
await page.route(`${backendOrigin}/console/v1/**`, async (route) => {
|
|
const path = new URL(route.request().url()).pathname;
|
|
if (![/\/ticket$/, /\/announcement$/].some((end) => end.test(path)))
|
|
return route.fallback();
|
|
await held;
|
|
return route.fulfill({
|
|
json: {
|
|
status: 200,
|
|
msg: "",
|
|
data: {
|
|
count: 5,
|
|
list: Array.from({ length: 5 }, (_, index) => ({
|
|
id: index + 1,
|
|
title: `本地布局验收 ${index + 1}`,
|
|
create_time: 1730000000,
|
|
post_time: 1730000000,
|
|
status: "待回复",
|
|
color: "#0284c7",
|
|
})),
|
|
},
|
|
},
|
|
});
|
|
});
|
|
const geometry = () =>
|
|
page.locator(".home-tickets, .home-notices").evaluateAll((cards) =>
|
|
cards.map((card) => {
|
|
const box = card.getBoundingClientRect();
|
|
return {
|
|
card: card.classList.contains("home-tickets")
|
|
? "tickets"
|
|
: "notices",
|
|
top: box.top + scrollY,
|
|
height: box.height,
|
|
};
|
|
}),
|
|
);
|
|
let before;
|
|
try {
|
|
await login(page, "/");
|
|
await page
|
|
.locator(".home-tickets .home-row-skeleton")
|
|
.first()
|
|
.waitFor();
|
|
await page.evaluate(() => document.fonts.ready);
|
|
// 只比较本次控制的两个响应，避免混入其他独立面板的正常数据替换。
|
|
await page.waitForFunction(
|
|
() =>
|
|
!document.querySelector(
|
|
".home-servers .home-row-skeleton, .home-expiring .home-row-skeleton, .home-referral .p-skeleton",
|
|
),
|
|
);
|
|
before = await geometry();
|
|
} finally {
|
|
release();
|
|
}
|
|
await page.locator(".home-notices .notice-row").last().waitFor();
|
|
await page.locator(".home-tickets .home-row").last().waitFor();
|
|
const after = await geometry();
|
|
for (let index = 0; index < before.length; index++) {
|
|
for (const dimension of ["height", "top"])
|
|
assert.ok(
|
|
Math.abs(before[index][dimension] - after[index][dimension]) <= 1,
|
|
`${before[index].card} ${dimension} changed: ${before[index][dimension]} -> ${after[index][dimension]}`,
|
|
);
|
|
}
|
|
return { width, sameRowGeometryAfterData: true };
|
|
}),
|
|
);
|
|
}
|