测试A05重设密码页自适应结构
This commit is contained in:
@@ -29,8 +29,8 @@ $sliderPendingCopy = ConvertFrom-Utf8Base64 '5ruR5Yqo6aqM6K+B5b6F5o6l5Y+j5o6l5YW
|
||||
if (-not ($pages.pages.path -contains 'pages/auth/a05-reset-password')) { throw 'A-05 route must remain declared in pages.json' }
|
||||
Assert-NotContains -Content $page -Unexpected 'ModulePage' -Message 'A-05 must not remain a ModulePage shell'
|
||||
foreach ($required in @(
|
||||
'a01-red-hall-ink-backdrop-v1.png',
|
||||
'brand-seal.png',
|
||||
'<AuthPageShell',
|
||||
'import AuthPageShell from "@/components/AuthPageShell.vue";',
|
||||
'a01-vnext-divider-v1.png',
|
||||
'a01-scroll-primary-v3.png',
|
||||
'a01-scroll-toast-v3.png',
|
||||
@@ -52,9 +52,9 @@ foreach ($required in @(
|
||||
'if (!/^\d{6}$/.test(verificationCode.value))',
|
||||
'if (!password.value)',
|
||||
'if (password.value !== confirmPassword.value)',
|
||||
'width: 184rpx;',
|
||||
'height: 221rpx;',
|
||||
'border-image-slice: 58 280 fill;'
|
||||
'border-image-slice: 58 280 fill;',
|
||||
'top: calc(var(--status-bar-height, 0px) + 24rpx);',
|
||||
'max-height: calc(var(--app-viewport-height) - 40px);'
|
||||
)) {
|
||||
Assert-Contains -Content $page -Expected $required -Message "Missing A-05 reset-password contract: $required"
|
||||
}
|
||||
@@ -64,7 +64,9 @@ Assert-Contains -Content $page -Expected $getCodeCopy -Message 'A-05 must expose
|
||||
Assert-Contains -Content $page -Expected $loginCopy -Message 'A-05 must provide the A01 return path'
|
||||
Assert-Contains -Content $page -Expected $sliderPendingCopy -Message 'A-05 must defer the real slider to the interface stage'
|
||||
Assert-NotContains -Content $catalog -Unexpected 'a05:' -Message 'A-05 must not remain in the temporary page catalog'
|
||||
Assert-NotContains -Content $page -Unexpected 'auth-design-scenery-v1.png' -Message 'A-05 must use the selected red-hall ink backdrop'
|
||||
foreach ($forbidden in @('class="page-canvas"', 'class="page-backdrop"', 'mode="scaleToFill"', '1665rpx', 'a01-red-hall-ink-backdrop-v1.png')) {
|
||||
Assert-NotContains -Content $page -Unexpected $forbidden -Message "A05 retains rejected page coordinates: $forbidden"
|
||||
}
|
||||
foreach ($obsoleteVisual in @(
|
||||
'a01-primary-button.png',
|
||||
'a01-secondary-button.png',
|
||||
@@ -96,4 +98,19 @@ foreach ($forbidden in @(
|
||||
if ($page -match $forbidden) { throw "A-05 retains forbidden CSS visual construction: $forbidden" }
|
||||
}
|
||||
|
||||
$contentRule = [regex]::Match($page, '(?ms)^\.reset-content\s*\{(?<Body>.*?)^\}')
|
||||
if (-not $contentRule.Success) { throw 'A05 reset content rule is missing.' }
|
||||
foreach ($required in @('display: flex;', 'flex: 1;', 'flex-direction: column;', 'max-width: 480px;', 'margin: 0 auto;')) {
|
||||
Assert-Contains -Content $contentRule.Groups['Body'].Value -Expected $required -Message "A05 reset content must use document flow: $required"
|
||||
}
|
||||
|
||||
$headingRule = [regex]::Match($page, '(?ms)^\.page-heading\s*\{(?<Body>.*?)^\}')
|
||||
if (-not $headingRule.Success) { throw 'A05 page heading rule is missing.' }
|
||||
Assert-Contains -Content $headingRule.Groups['Body'].Value -Expected 'grid-template-columns: minmax(0, 1fr);' -Message 'A05 heading must center against the full content width.'
|
||||
foreach ($selector in @('page-title', 'page-subtitle', 'reset-divider')) {
|
||||
$rule = [regex]::Match($page, "(?ms)^\.$selector\s*\{(?<Body>.*?)^\}")
|
||||
if (-not $rule.Success) { throw "A05 heading child rule is missing: $selector" }
|
||||
Assert-Contains -Content $rule.Groups['Body'].Value -Expected 'grid-column: 1;' -Message "A05 heading child must remain in the full-width grid column: $selector"
|
||||
}
|
||||
|
||||
Write-Output 'A05-RESET-PASSWORD-CONTRACT PASS'
|
||||
|
||||
@@ -78,16 +78,42 @@ const run = async () => {
|
||||
await valueOf(send, "document.querySelector('.forgot-password').click()")
|
||||
await waitFor(send, "location.href.includes('/pages/auth/a05-reset-password')", 'A01 forgot-password entry did not open A05')
|
||||
|
||||
for (const size of [{ width: 320, height: 568 }, { width: 360, height: 640 }, { width: 360, height: 800 }, { width: 412, height: 915 }]) {
|
||||
for (const size of [
|
||||
{ width: 320, height: 568 },
|
||||
{ width: 360, height: 616 },
|
||||
{ width: 360, height: 640 },
|
||||
{ width: 360, height: 800 },
|
||||
{ width: 412, height: 915 },
|
||||
{ width: 480, height: 1040 }
|
||||
]) {
|
||||
await send('Emulation.setDeviceMetricsOverride', { ...size, deviceScaleFactor: 1, mobile: true })
|
||||
await navigate(send, a05Url, '.reset-submit')
|
||||
const metrics = await valueOf(send, `({
|
||||
width: document.documentElement.scrollWidth,
|
||||
pageClientHeight: document.querySelector('.auth-page').clientHeight,
|
||||
pageScrollHeight: document.querySelector('.auth-page').scrollHeight
|
||||
})`)
|
||||
await waitFor(send, "document.querySelector('.auth-shell__header-image img')?.naturalWidth === 824", `A05 header did not load at ${size.width}x${size.height}`)
|
||||
const metrics = await valueOf(send, `(() => {
|
||||
const header = document.querySelector('.auth-shell__header')
|
||||
const headerImage = document.querySelector('.auth-shell__header-image img')
|
||||
const paper = document.querySelector('.auth-shell__paper')
|
||||
const title = document.querySelector('.page-title')
|
||||
const loginEntry = document.querySelector('.login-entry')
|
||||
return {
|
||||
width: document.documentElement.scrollWidth,
|
||||
documentScrollHeight: Math.max(document.documentElement.scrollHeight, document.body.scrollHeight),
|
||||
headerBottom: header?.getBoundingClientRect().bottom,
|
||||
headerImageWidth: headerImage?.getBoundingClientRect().width,
|
||||
headerImageHeight: headerImage?.getBoundingClientRect().height,
|
||||
headerNaturalWidth: headerImage?.naturalWidth,
|
||||
headerNaturalHeight: headerImage?.naturalHeight,
|
||||
paperTop: paper?.getBoundingClientRect().top,
|
||||
titleCenter: title ? title.getBoundingClientRect().left + title.getBoundingClientRect().width / 2 : null,
|
||||
loginEntryBottom: loginEntry?.getBoundingClientRect().bottom + window.scrollY
|
||||
}
|
||||
})()`)
|
||||
assert(metrics.width <= size.width + 1, `A05 has horizontal overflow at ${size.width}x${size.height}`)
|
||||
if (size.width === 320) assert(metrics.pageScrollHeight > metrics.pageClientHeight, 'A05 must scroll naturally at 320x568')
|
||||
assert.deepStrictEqual([metrics.headerNaturalWidth, metrics.headerNaturalHeight], [824, 340], `A05 header asset changed at ${size.width}x${size.height}`)
|
||||
assert(Math.abs(metrics.headerImageHeight / metrics.headerImageWidth - 340 / 824) < 0.01, `A05 header is distorted at ${size.width}x${size.height}`)
|
||||
assert(metrics.paperTop >= metrics.headerBottom - 1, `A05 paper overlaps its header at ${size.width}x${size.height}`)
|
||||
assert(Math.abs(metrics.titleCenter - size.width / 2) <= 1, `A05 title is not centered at ${size.width}x${size.height}: ${metrics.titleCenter}`)
|
||||
assert(metrics.loginEntryBottom <= metrics.documentScrollHeight + 1, `A05 last action is unreachable at ${size.width}x${size.height}`)
|
||||
}
|
||||
|
||||
await valueOf(send, "document.querySelector('.get-code').click()")
|
||||
|
||||
Reference in New Issue
Block a user