334 lines
12 KiB
TypeScript
334 lines
12 KiB
TypeScript
import { test, expect } from '../fixtures/base';
|
|
import { ClassroomPage } from '../pages/classroom.page';
|
|
import { createSettingsStorage } from '../fixtures/test-data/settings';
|
|
import { defaultTheme } from '../fixtures/test-data/scene-content';
|
|
|
|
const TEST_STAGE_ID = 'e2e-test-stage';
|
|
|
|
const SETTINGS_STORAGE = createSettingsStorage({ sidebarCollapsed: false });
|
|
|
|
/** Seed the canonical document store with a stage + 3 scenes. */
|
|
async function seedDatabase(page: import('@playwright/test').Page) {
|
|
// Inject settings before navigating so it's available immediately on load
|
|
await page.addInitScript((settings) => {
|
|
localStorage.setItem('maic:account:settings-storage', settings);
|
|
localStorage.setItem('locale', 'en-US');
|
|
}, SETTINGS_STORAGE);
|
|
|
|
// Establish the app origin before using IndexedDB. The learner home route is
|
|
// intentionally not responsible for opening either persistence backend.
|
|
await page.goto('/', { waitUntil: 'networkidle' });
|
|
|
|
const seedStageData = () =>
|
|
page.evaluate(
|
|
({ stageId, theme }) => {
|
|
return new Promise<void>((resolve, reject) => {
|
|
const request = indexedDB.open('maic-documents', 1);
|
|
|
|
request.onupgradeneeded = () => {
|
|
const db = request.result;
|
|
if (!db.objectStoreNames.contains('stages')) {
|
|
db.createObjectStore('stages', { keyPath: 'id' });
|
|
}
|
|
if (!db.objectStoreNames.contains('scenes')) {
|
|
const scenes = db.createObjectStore('scenes', {
|
|
keyPath: ['stageId', 'id'],
|
|
});
|
|
scenes.createIndex('by-stage', 'stageId');
|
|
}
|
|
if (!db.objectStoreNames.contains('outlines')) {
|
|
db.createObjectStore('outlines', { keyPath: 'stageId' });
|
|
}
|
|
};
|
|
|
|
request.onsuccess = (event) => {
|
|
const db = (event.target as IDBOpenDBRequest).result;
|
|
try {
|
|
const tx = db.transaction(['stages', 'scenes', 'outlines'], 'readwrite');
|
|
const now = Date.now();
|
|
|
|
tx.objectStore('stages').put({
|
|
id: stageId,
|
|
name: '光合作用',
|
|
description: '',
|
|
language: 'zh-CN',
|
|
style: 'professional',
|
|
createdAt: now,
|
|
updatedAt: now,
|
|
dslVersion: '0.1.0',
|
|
});
|
|
|
|
// Scene content uses SlideContent shape: { type: 'slide', canvas: Slide }
|
|
const makeSlideContent = (title: string, elId: string) => ({
|
|
type: 'slide',
|
|
canvas: {
|
|
id: `slide-${elId}`,
|
|
viewportSize: 1000,
|
|
viewportRatio: 0.5625,
|
|
theme,
|
|
elements: [
|
|
{
|
|
type: 'text',
|
|
id: `el-${elId}`,
|
|
content: title,
|
|
left: 50,
|
|
top: 50,
|
|
width: 900,
|
|
height: 100,
|
|
},
|
|
],
|
|
},
|
|
});
|
|
|
|
const scenes = [
|
|
{
|
|
id: 'scene-0',
|
|
stageId,
|
|
type: 'slide',
|
|
title: '基本概念',
|
|
order: 0,
|
|
content: makeSlideContent('基本概念', '0'),
|
|
createdAt: now,
|
|
updatedAt: now,
|
|
},
|
|
{
|
|
id: 'scene-1',
|
|
stageId,
|
|
type: 'slide',
|
|
title: '光反应',
|
|
order: 1,
|
|
content: makeSlideContent('光反应', '1'),
|
|
createdAt: now,
|
|
updatedAt: now,
|
|
},
|
|
{
|
|
id: 'scene-2',
|
|
stageId,
|
|
type: 'slide',
|
|
title: '暗反应',
|
|
order: 2,
|
|
content: makeSlideContent('暗反应', '2'),
|
|
createdAt: now,
|
|
updatedAt: now,
|
|
},
|
|
];
|
|
for (const scene of scenes) {
|
|
tx.objectStore('scenes').put(scene);
|
|
}
|
|
|
|
tx.objectStore('outlines').put({
|
|
stageId,
|
|
outline: { outlines: [], createdAt: now, updatedAt: now },
|
|
});
|
|
|
|
tx.oncomplete = () => {
|
|
db.close();
|
|
resolve();
|
|
};
|
|
tx.onerror = () => reject(tx.error);
|
|
tx.onabort = () => reject(tx.error);
|
|
} catch (error) {
|
|
db.close();
|
|
reject(error);
|
|
}
|
|
};
|
|
|
|
request.onerror = () => reject(request.error);
|
|
});
|
|
},
|
|
{ stageId: TEST_STAGE_ID, theme: defaultTheme },
|
|
);
|
|
|
|
for (let attempt = 0; attempt < 3; attempt++) {
|
|
try {
|
|
await seedStageData();
|
|
break;
|
|
} catch (error) {
|
|
const message = error instanceof Error ? error.message : String(error);
|
|
if (!message.includes('Execution context was destroyed') || attempt === 2) {
|
|
throw error;
|
|
}
|
|
await page.waitForLoadState('domcontentloaded').catch(() => {});
|
|
await page.waitForTimeout(250);
|
|
}
|
|
}
|
|
}
|
|
|
|
test.describe('Classroom Interaction', () => {
|
|
test.beforeEach(async ({ page }) => {
|
|
await seedDatabase(page);
|
|
});
|
|
|
|
test('loads classroom and switches scenes', async ({ page }) => {
|
|
const classroom = new ClassroomPage(page);
|
|
await classroom.goto(TEST_STAGE_ID);
|
|
await classroom.waitForLoaded();
|
|
|
|
// Sidebar shows 3 scenes
|
|
await expect(classroom.sidebarScenes).toHaveCount(3, { timeout: 10_000 });
|
|
|
|
// First scene title visible
|
|
await expect(classroom.getSceneTitle(0)).toContainText('基本概念');
|
|
|
|
// Click second scene
|
|
await classroom.clickScene(1);
|
|
|
|
// Verify second scene is now active — heading in the top bar shows the current scene name
|
|
await expect(page.getByRole('heading', { name: '光反应' })).toBeVisible();
|
|
});
|
|
|
|
test('caps and restores the non-presentation roundtable draft height', async ({ page }) => {
|
|
const classroom = new ClassroomPage(page);
|
|
await classroom.goto(TEST_STAGE_ID);
|
|
await classroom.waitForLoaded();
|
|
|
|
await page.keyboard.press('T');
|
|
const textarea = page.getByPlaceholder('Type your message...', { exact: true });
|
|
const inputStage = page.getByTestId('roundtable-non-presentation-input-stage');
|
|
await expect(textarea).toBeVisible();
|
|
|
|
const readMetrics = () =>
|
|
textarea.evaluate((element) => {
|
|
const computedStyle = getComputedStyle(element);
|
|
const containingPanel = element.closest<HTMLElement>(
|
|
'[data-testid="roundtable-non-presentation-input-panel"]',
|
|
);
|
|
if (!containingPanel) {
|
|
throw new Error('Could not find the non-presentation roundtable input panel');
|
|
}
|
|
|
|
const overflowHiddenCard = containingPanel.closest<HTMLElement>(
|
|
'[data-testid="roundtable-non-presentation-card"]',
|
|
);
|
|
if (!overflowHiddenCard) {
|
|
throw new Error('Could not find the roundtable overflow-hidden card');
|
|
}
|
|
|
|
const cardStyle = getComputedStyle(overflowHiddenCard);
|
|
if (
|
|
cardStyle.overflow !== 'hidden' ||
|
|
cardStyle.overflowX !== 'hidden' ||
|
|
cardStyle.overflowY !== 'hidden'
|
|
) {
|
|
throw new Error('The roundtable clipping card must hide overflow');
|
|
}
|
|
|
|
const panelRect = containingPanel.getBoundingClientRect();
|
|
const cardRect = overflowHiddenCard.getBoundingClientRect();
|
|
return {
|
|
computedHeight: computedStyle.height,
|
|
computedMaxHeight: computedStyle.maxHeight,
|
|
computedOverflowY: computedStyle.overflowY,
|
|
computedFieldSizing: computedStyle.getPropertyValue('field-sizing'),
|
|
inlineHeight: element.style.height,
|
|
inlineFieldSizing: element.style.getPropertyValue('field-sizing'),
|
|
boundingRectHeight: element.getBoundingClientRect().height,
|
|
clientHeight: element.clientHeight,
|
|
scrollHeight: element.scrollHeight,
|
|
containingPanelHeight: panelRect.height,
|
|
panelTop: panelRect.top,
|
|
cardTop: cardRect.top,
|
|
cardHeight: cardRect.height,
|
|
cardOverflow: cardStyle.overflow,
|
|
};
|
|
});
|
|
|
|
await expect(inputStage).toHaveCSS('transform', 'none');
|
|
const initialMetrics = await readMetrics();
|
|
const longDraft = Array.from({ length: 24 }, (_, index) => `Line ${index + 1}`).join('\n');
|
|
|
|
await textarea.fill(longDraft);
|
|
await expect.poll(async () => (await readMetrics()).inlineHeight).toBe('100px');
|
|
const longDraftMetrics = await readMetrics();
|
|
|
|
await test.info().attach('roundtable textarea pre-post metrics', {
|
|
body: JSON.stringify({ initialMetrics, longDraftMetrics }, null, 2),
|
|
contentType: 'application/json',
|
|
});
|
|
|
|
const metricSummary = JSON.stringify({ initialMetrics, longDraftMetrics });
|
|
expect(
|
|
longDraftMetrics.panelTop,
|
|
`Roundtable input panel must stay inside its overflow-hidden card: ${metricSummary}`,
|
|
).toBeGreaterThanOrEqual(longDraftMetrics.cardTop);
|
|
expect(longDraftMetrics.cardOverflow).toBe('hidden');
|
|
expect(
|
|
longDraftMetrics.computedFieldSizing,
|
|
`Roundtable textarea metrics: ${metricSummary}`,
|
|
).not.toBe('content');
|
|
expect(
|
|
longDraftMetrics.inlineFieldSizing,
|
|
`Roundtable textarea metrics: ${metricSummary}`,
|
|
).toBe('');
|
|
expect(longDraftMetrics.inlineHeight).toBe('100px');
|
|
expect(longDraftMetrics.computedMaxHeight).toBe('100px');
|
|
expect(longDraftMetrics.computedOverflowY).toBe('auto');
|
|
expect(longDraftMetrics.boundingRectHeight).toBeLessThanOrEqual(100);
|
|
expect(longDraftMetrics.scrollHeight).toBeGreaterThan(longDraftMetrics.clientHeight);
|
|
|
|
await textarea.fill('Short line');
|
|
await expect
|
|
.poll(async () => (await readMetrics()).clientHeight)
|
|
.toBeLessThan(longDraftMetrics.clientHeight);
|
|
await expect.poll(async () => (await readMetrics()).inlineHeight).not.toBe('100px');
|
|
|
|
await textarea.fill(longDraft);
|
|
await page.keyboard.press('Escape');
|
|
await expect(textarea).toBeHidden();
|
|
|
|
await page.keyboard.press('T');
|
|
await expect(textarea).toBeVisible();
|
|
await expect(textarea).toHaveValue(longDraft);
|
|
await expect.poll(async () => (await readMetrics()).inlineHeight).toBe('100px');
|
|
});
|
|
|
|
test('keeps body spacing stable for header menus and hides operator settings', async ({
|
|
page,
|
|
}) => {
|
|
const classroom = new ClassroomPage(page);
|
|
await classroom.goto(TEST_STAGE_ID);
|
|
await classroom.waitForLoaded();
|
|
|
|
const initialBodySpacing = await page.evaluate(() => {
|
|
const styles = getComputedStyle(document.body);
|
|
return {
|
|
paddingRight: styles.paddingRight,
|
|
marginRight: styles.marginRight,
|
|
};
|
|
});
|
|
|
|
const expectBodyScrollState = async (locked: boolean) => {
|
|
await expect
|
|
.poll(() =>
|
|
page.evaluate(() => ({
|
|
locked: document.body.hasAttribute('data-scroll-locked'),
|
|
paddingRight: getComputedStyle(document.body).paddingRight,
|
|
marginRight: getComputedStyle(document.body).marginRight,
|
|
})),
|
|
)
|
|
.toEqual({
|
|
locked,
|
|
paddingRight: initialBodySpacing.paddingRight,
|
|
marginRight: initialBodySpacing.marginRight,
|
|
});
|
|
};
|
|
|
|
await page.getByRole('button', { name: 'EN', exact: true }).click();
|
|
await expect(page.getByRole('menuitem', { name: 'English' })).toBeVisible();
|
|
await expectBodyScrollState(false);
|
|
|
|
await page.keyboard.press('Escape');
|
|
await expect(page.getByRole('menuitem', { name: 'English' })).toBeHidden();
|
|
|
|
await page.getByRole('button', { name: 'Theme' }).click();
|
|
await expect(page.getByRole('menuitem', { name: 'Light' })).toBeVisible();
|
|
await expectBodyScrollState(false);
|
|
|
|
await page.keyboard.press('Escape');
|
|
await expect(page.getByRole('menuitem', { name: 'Light' })).toBeHidden();
|
|
|
|
await expect(page.getByRole('button', { name: 'Settings', exact: true })).toHaveCount(0);
|
|
await expect(page.getByRole('dialog', { name: 'Settings' })).toHaveCount(0);
|
|
});
|
|
});
|