test(web): cover desktop login columns

This commit is contained in:
2026-07-21 13:09:37 +08:00
parent 075d007358
commit 3d24d78bca
3 changed files with 22 additions and 3 deletions

View File

@@ -33,6 +33,10 @@ const collectLoginMetrics = async () => page.evaluate(() => {
}
})
const getColumnCount = (columns) => columns === 'none'
? 0
: columns.split(' ').filter(Boolean).length
const collectMetrics = async () => page.evaluate(() => {
const statusbar = document.querySelector('.statusbar')
const statusName = document.querySelector('.status-name')
@@ -118,15 +122,15 @@ const collectMetrics = async () => page.evaluate(() => {
await page.goto(`http://127.0.0.1:${port}/`, { waitUntil: 'networkidle' })
await page.screenshot({ path: 'test-results/login-react-acro.png', fullPage: true })
const desktopLoginMetrics = await collectLoginMetrics()
const desktopColumnCount = getColumnCount(desktopLoginMetrics.columns)
if (desktopLoginMetrics.overflowX) failures.push('login must not overflow horizontally')
if (desktopLoginMetrics.title !== '森林AI') failures.push(`unexpected title ${desktopLoginMetrics.title}`)
if (desktopColumnCount !== 2) failures.push(`desktop login must use two columns, got ${desktopLoginMetrics.columns}`)
await page.setViewportSize({ width: 390, height: 844 })
await page.screenshot({ path: 'test-results/login-react-acro-mobile.png', fullPage: true })
const mobileLoginMetrics = await collectLoginMetrics()
const mobileColumnCount = mobileLoginMetrics.columns === 'none'
? 0
: mobileLoginMetrics.columns.split(' ').filter(Boolean).length
const mobileColumnCount = getColumnCount(mobileLoginMetrics.columns)
if (mobileLoginMetrics.overflowX) failures.push('mobile login must not overflow horizontally')
if (mobileLoginMetrics.width > 390) failures.push(`mobile login card must fit viewport, got ${mobileLoginMetrics.width}`)
if (mobileColumnCount !== 1) failures.push(`mobile login must use one column, got ${mobileLoginMetrics.columns}`)

View File

@@ -126,6 +126,16 @@
font-weight: 600;
}
.login-footer-links {
align-self: end;
flex-wrap: wrap;
margin-top: 72px;
}
.login-footer-links .arco-typography {
white-space: nowrap;
}
.login-form-panel {
display: grid;
align-content: center;

View File

@@ -39,6 +39,11 @@ export function LoginPage({ onLogin }: { onLogin: (input: { server: string; emai
</div>
<Text className="login-slogan"> · </Text>
<Text type="secondary"> · · AI </Text>
<Space className="login-footer-links" size={24}>
<Text type="secondary">v1.0.0</Text>
<Text type="secondary"></Text>
<Text type="secondary"></Text>
</Space>
</div>
<div className="login-form-panel">