xsl/juzi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(h5): center score stack, lock profile scroll and gate turn guidance

Browse Source
This commit is contained in:
xsl
2026-10-12 23:48:11 +08:00
parent 2a49ebdab2
commit 6f83f58a09
17 changed files with 1396 additions and 969 deletions
Download Patch File Download Diff File Expand all files Collapse all files
h5/test/profile-interaction.mjs
+48 -2
View File
@@ -33,7 +33,7 @@ try {
await page.route('**/*', route => {
const req = route.request();
if (req.method() !== 'GET') { blockedWrites.push(new URL(req.url()).pathname); return route.abort(); }
if (/\.woff2?(\?|$)/.test(req.url())) return route.abort();
if (!process.env.H5_PROFILE_FONTS && /\.woff2?(\?|$)/.test(req.url())) return route.abort();
if (req.url().endsWith('/api/auth/session')) return route.fulfill({ json: { ok: true, user } });
return route.continue();
});
@@ -66,6 +66,7 @@ try {
await page.waitForTimeout(250);
}
await enter();
if (process.env.H5_PROFILE_FONTS) await page.evaluate(() => document.fonts.ready);
let blank = await values();
assert.equal(blank.birth, ''); assert.equal(blank.gender, ''); assert.equal(blank.region, ''); assert.equal(blank.skin, 0);
await pick('#pick-birth', [62, 10]); // current year minus 37, November
@@ -133,11 +134,56 @@ try {
const size = await geometry(); assert(Math.abs(await offset() + 3 * size.width) < 2, 'resize keeps selection aligned at ' + width);
assert(await page.evaluate(() => document.documentElement.scrollWidth <= window.innerWidth), 'no horizontal page overflow');
}
for (const [width, height] of [[320, 568], [375, 667], [375, 726], [390, 664], [414, 896], [480, 726], [375, 440]]) {
await page.setViewportSize({ width, height }); await page.waitForTimeout(400);
const layout = await page.evaluate(() => {
const profile = document.querySelector('#s-profile'), submit = document.querySelector('.btn-submit');
const skin = document.querySelector('.skin-card').getBoundingClientRect();
const image = document.querySelector('.skin-item img').getBoundingClientRect();
const desc = document.querySelector('.skin-desc').getBoundingClientRect();
const viewport = document.querySelector('#skin-carousel').getBoundingClientRect();
const textBottom = Math.max(...[...document.querySelectorAll('.skin-desc')].map(el => {
const range = document.createRange(); range.selectNodeContents(el);
return Math.max(range.getBoundingClientRect().bottom, el.getBoundingClientRect().bottom);
}));
return { overflow: getComputedStyle(profile).overflowY, touch: getComputedStyle(profile).touchAction,
client: profile.clientHeight, scroll: profile.scrollHeight, top: profile.scrollTop,
submit: submit.getBoundingClientRect().bottom, image: image.height, desc: desc.bottom, skin: skin.bottom, textBottom, viewportBottom: viewport.bottom };
});
assert.equal(layout.overflow, 'hidden'); assert.equal(layout.touch, 'none');
assert(layout.scroll <= layout.client + 1 && layout.submit <= height, 'all profile controls fit without clipping/scroll: ' + JSON.stringify({ width, height, ...layout }));
assert(layout.image > 25 && layout.desc <= layout.skin, 'short screens retain skin illustration and description');
assert(layout.textBottom <= layout.viewportBottom + 1, 'all five skin descriptions fit inside the clipped carousel: ' + JSON.stringify({ width, height, ...layout }));
if (process.env.H5_ARTIFACT_DIR) {
fs.mkdirSync(process.env.H5_ARTIFACT_DIR, { recursive: true });
await page.screenshot({ path: path.join(process.env.H5_ARTIFACT_DIR, 'profile-fixed-' + width + '-' + height + '.png') });
}
const point = await geometry();
await touch('touchStart', point.x, point.y);
await touch('touchMove', point.x + 2, point.y + 70);
await touch('touchEnd', 0, 0);
await page.mouse.wheel(0, 300); await page.waitForTimeout(100);
assert.equal(await page.locator('#s-profile').evaluate(el => el.scrollTop), 0, 'touch/wheel cannot pull the page down');
assert.equal(await page.evaluate(() => document.documentElement.scrollTop), 0);
await dragBy(-70); assert.equal((await values()).skin, 4, 'horizontal swipe still works after vertical gesture');
await dragBy(70); assert.equal((await values()).skin, 3);
}
// The screen's scroll lock must not prevent the separate picker from moving.
await page.click('#pick-birth'); await page.waitForTimeout(400);
assert.equal(await page.locator('.ms-mobile-select.ms-show').evaluate(el => !!el.closest('#s-profile')), false);
const wheel = page.locator('.ms-mobile-select.ms-show .ms-wheel').first(), wheelBox = await wheel.boundingBox();
const wheelValue = await page.evaluate(() => window.__pickers['#pick-birth'].getCurValue());
const wx = wheelBox.x + wheelBox.width / 2, wy = wheelBox.y + wheelBox.height / 2;
await touch('touchStart', wx, wy);
await touch('touchMove', wx, wy - 40); await touch('touchMove', wx, wy - 80);
await touch('touchEnd', 0, 0); await page.waitForTimeout(300);
assert.notDeepEqual(await page.evaluate(() => window.__pickers['#pick-birth'].getCurValue()), wheelValue, 'birth wheel still responds to real vertical touch');
await page.click('.ms-mobile-select.ms-show .ms-cancel'); await page.waitForTimeout(300);
await enter(); assert.equal((await values()).skin, 3, 'skin selection also survives reload');
await page.click('[data-action="submit-profile"]');
await page.waitForSelector('#p-photoguide.show');
assert.deepEqual(errors, []); assert.deepEqual(blockedWrites, [], 'no backend writes or paid requests');
console.log('PASS: actual profile defaults/wheels/reload/account isolation; real mobile touch follows finger/snap/flick/edges/cancel/vertical scroll; arrows/dots/keyboard; three responsive widths; submission; no JS errors/backend writes');
console.log('PASS: actual profile defaults/wheels/reload/account isolation; real mobile finger-follow/snap/flick/edges/cancel; fixed profile/no vertical movement/controls fit in seven viewport sizes; real birth-wheel vertical touch still works; arrows/dots/keyboard/submission; no JS errors/backend writes');
} finally {
if (browser) await browser.close();
if (child && child.exitCode == null) { const stopped = once(child, 'exit'); child.kill(); await stopped; }