fix: keep first work preview full height during teacher welcomes
This commit is contained in:
1 parent
fe1a3775c5
commit
d12d214d7f
8 files changed
+187
-34
No files matched your search
@@ -117,11 +117,15 @@ test('empty work shows a local hint without opening the teacher or polling', asy
|
||||
await page.screenshot({ path: test.info().outputPath('empty-work-hint.png') });
|
||||
});
|
||||
|
||||
for (const width of [375, 768, 1280]) {
|
||||
test(`all teacher introductions fit at ${width}px and keep the native preview clear`, async ({ page }) => {
|
||||
await page.setViewportSize({ width, height: 800 });
|
||||
await page.goto(baseUrl + '?agents=3&welcomes');
|
||||
for (const size of [{ width: 375, height: 800 }, { width: 768, height: 800 }, { width: 1280, height: 800 }, { width: 1440, height: 900 }]) {
|
||||
test(`teacher introductions pause on Work and restore on chat at ${size.width}px`, async ({ page }) => {
|
||||
await page.setViewportSize(size);
|
||||
await page.goto(baseUrl + '?agents=3&welcomes&chat=1');
|
||||
const tabs = page.getByRole('tablist', { name: '当前工作' });
|
||||
const chatTab = tabs.getByRole('tab', { name: '操作对话' });
|
||||
const workTab = tabs.getByRole('tab', { name: '作品', exact: true });
|
||||
const group = page.getByTestId('teacher-welcomes');
|
||||
await expect(chatTab).toHaveAttribute('aria-selected', 'true');
|
||||
await expect(group.locator('.teacher-welcome-card')).toHaveCount(3);
|
||||
await expect(group).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)');
|
||||
await expect(group).toHaveCSS('box-shadow', 'none');
|
||||
@@ -132,14 +136,41 @@ for (const width of [375, 768, 1280]) {
|
||||
await expect(card).toBeInViewport({ ratio: 1 });
|
||||
expect(await card.evaluate(el => el.scrollWidth <= el.clientWidth)).toBe(true);
|
||||
}
|
||||
await expect.poll(async () => {
|
||||
const [bubble, viewport] = await Promise.all([group.boundingBox(), page.getByTestId('agent-browser-viewport').boundingBox()]);
|
||||
return !!bubble && !!viewport && viewport.y >= bubble.y + bubble.height;
|
||||
}).toBe(true);
|
||||
await page.screenshot({ path: test.info().outputPath(`teacher-introductions-${width}.png`) });
|
||||
await page.screenshot({ path: test.info().outputPath(`teacher-introductions-${size.width}.png`) });
|
||||
|
||||
const expectFullPreview = async () => {
|
||||
await expect(workTab).toHaveAttribute('aria-selected', 'true');
|
||||
await expect(group).toHaveCount(0);
|
||||
await expect(page.locator('#coding-consultation-dock')).toHaveCount(0);
|
||||
await expect(page.getByTestId('agent-browser-panel')).toHaveCSS('margin-top', '0px');
|
||||
await expect.poll(async () => {
|
||||
const [work, viewport] = await Promise.all([
|
||||
page.getByTestId('work-view').boundingBox(), page.getByTestId('agent-browser-viewport').boundingBox(),
|
||||
]);
|
||||
// The full native viewport keeps only the work view's 20px padding
|
||||
// and the panel's 1px border at both ends, with no welcome clearance.
|
||||
return !!work && !!viewport && Math.abs(viewport.y - work.y - 21) <= 1
|
||||
&& Math.abs(work.y + work.height - viewport.y - viewport.height - 21) <= 1;
|
||||
}).toBe(true);
|
||||
expect(await page.evaluate(() => document.documentElement.scrollWidth <= innerWidth)).toBe(true);
|
||||
};
|
||||
|
||||
for (let visit = 0; visit < 2; visit += 1) {
|
||||
await workTab.click();
|
||||
await expectFullPreview();
|
||||
if (visit === 0) await page.screenshot({ path: test.info().outputPath(`first-work-with-welcomes-paused-${size.width}.png`) });
|
||||
await chatTab.click();
|
||||
await expect(group.locator('.teacher-welcome-card')).toHaveCount(3);
|
||||
await expect(group).toBeInViewport({ ratio: 1 });
|
||||
}
|
||||
|
||||
await group.getByRole('button', { name: '收起全部老师介绍(智能体2)' }).click();
|
||||
await expect(group).toHaveCount(0);
|
||||
await expect(page.locator('#coding-consultation-dock')).toHaveCount(0);
|
||||
await workTab.click();
|
||||
await expectFullPreview();
|
||||
await chatTab.click();
|
||||
await expect(group).toHaveCount(0);
|
||||
await page.reload();
|
||||
await expect(group.locator('.teacher-welcome-card')).toHaveCount(3);
|
||||
await group.getByRole('button', { name: '和智能体3聊聊' }).click({ position: { x: 8, y: 8 } });
|
||||
@@ -153,7 +184,7 @@ for (const width of [375, 768, 1280]) {
|
||||
test('many teacher introductions remain scrollable and honor reduced motion', async ({ page }) => {
|
||||
await page.setViewportSize({ width: 520, height: 600 });
|
||||
await page.emulateMedia({ reducedMotion: 'reduce' });
|
||||
await page.goto(baseUrl + '?agents=8&welcomes');
|
||||
await page.goto(baseUrl + '?agents=8&welcomes&chat=1');
|
||||
const group = page.getByTestId('teacher-welcomes');
|
||||
await expect(group).toBeInViewport({ ratio: 1 });
|
||||
await expect(group.locator('.teacher-welcome-card')).toHaveCount(8);
|
||||
|
||||
Reference in new issue
Block a user