111 lines
5.1 KiB
TypeScript
111 lines
5.1 KiB
TypeScript
import { expect, test } from '../helpers/serve-dist';
|
|
import {
|
|
installSceneInstrumentation,
|
|
readSceneInstrumentation,
|
|
waitForOneAnimationFrame,
|
|
} from '../helpers/scene-instrumentation';
|
|
|
|
const sections = [
|
|
{ id: 'start', label: 'Start' },
|
|
{ id: 'profile', label: 'Profile' },
|
|
{ id: 'experience', label: 'Experience' },
|
|
{ id: 'infrastructure', label: 'Infrastructure' },
|
|
{ id: 'selected-builds', label: 'Selected builds' },
|
|
{ id: 'additional-work', label: 'Additional work' },
|
|
{ id: 'toolkit', label: 'Toolkit' },
|
|
{ id: 'contact', label: 'Contact' },
|
|
] as const;
|
|
|
|
test.beforeEach(async ({ page }) => installSceneInstrumentation(page));
|
|
|
|
test('keeps navigation, HUD, progress, chapter, and arrival on the same next-frame section snapshot', async ({
|
|
page,
|
|
distUrl,
|
|
}) => {
|
|
const graphicsErrors: string[] = [];
|
|
page.on('console', (message) => {
|
|
if (
|
|
message.type() === 'error'
|
|
&& /THREE\.WebGLProgram|Shader Error|VALIDATE_STATUS/iu.test(message.text())
|
|
) graphicsErrors.push(message.text());
|
|
});
|
|
await page.goto(distUrl, { waitUntil: 'domcontentloaded' });
|
|
await expect(page.locator('.journey-world')).toHaveAttribute('data-scene-state', /running|failed|static/u);
|
|
const chapterColors: string[] = [];
|
|
|
|
for (const section of sections) {
|
|
await page.evaluate((id) => {
|
|
const heading = document.getElementById(`${id}-heading`);
|
|
if (!(heading instanceof HTMLElement)) throw new Error(`Missing heading: ${id}`);
|
|
const top = heading.getBoundingClientRect().top + window.scrollY;
|
|
const viewportHeight = window.visualViewport?.height ?? window.innerHeight;
|
|
const destination = id === 'contact'
|
|
? document.documentElement.scrollHeight
|
|
: Math.max(0, top - viewportHeight * 0.35 + 1);
|
|
window.scrollTo({ top: destination, behavior: 'instant' });
|
|
}, section.id);
|
|
await waitForOneAnimationFrame(page);
|
|
|
|
await expect(page.locator(`nav a[href="#${section.id}"]`)).toHaveAttribute('aria-current', 'page');
|
|
await expect(page.locator('.journey-hud__section')).toHaveText(section.label);
|
|
const routeText = await page.locator('.journey-hud__route').textContent();
|
|
expect(routeText).toMatch(/^ROUTE (?:100|[0-9]{1,2})%$/u);
|
|
if (section.id === 'contact') {
|
|
await expect(page.locator('.journey-hud__arrival')).toHaveText('ARRIVED');
|
|
await expect(page.locator('.journey-hud__route')).toHaveText('ROUTE 100%');
|
|
} else {
|
|
await expect(page.locator('.journey-hud__arrival')).toHaveCount(0);
|
|
}
|
|
// The section snapshot is emitted in the scroll RAF above; the scene's
|
|
// already-running loop must consume it no later than its next RAF.
|
|
await waitForOneAnimationFrame(page);
|
|
const clearColors = (await readSceneInstrumentation(page)).clearColors.filter((color) => color !== '#000000');
|
|
const latestChapterColor = clearColors.at(-1);
|
|
if (latestChapterColor === undefined) throw new Error(`Missing rendered chapter color for ${section.id}`);
|
|
chapterColors.push(latestChapterColor);
|
|
}
|
|
|
|
const instrumentation = await readSceneInstrumentation(page);
|
|
expect(instrumentation.maximumCanvasCount).toBeLessThanOrEqual(1);
|
|
const chapterEnergy = chapterColors.map(colorEnergy);
|
|
for (let index = 1; index < chapterEnergy.length; index += 1) {
|
|
expect(chapterEnergy[index]).toBeGreaterThanOrEqual(chapterEnergy[index - 1] ?? 0);
|
|
}
|
|
expect(chapterEnergy.at(-1)).toBeGreaterThan(chapterEnergy[0] ?? 0);
|
|
expect(new Set(chapterColors).size).toBeGreaterThanOrEqual(4);
|
|
expect(graphicsErrors).toEqual([]);
|
|
});
|
|
|
|
test('draws only the independently eligible next roadside sign during passive forward travel', async ({
|
|
page,
|
|
distUrl,
|
|
}) => {
|
|
await page.goto(distUrl, { waitUntil: 'domcontentloaded' });
|
|
await expect(page.locator('.journey-world')).toHaveAttribute('data-scene-state', 'running');
|
|
|
|
const oracle = await page.evaluate(() => {
|
|
const profile = document.getElementById('profile-heading');
|
|
if (!(profile instanceof HTMLElement)) throw new Error('Missing profile heading');
|
|
const viewportHeight = window.visualViewport?.height ?? window.innerHeight;
|
|
const headingTop = profile.getBoundingClientRect().top + window.scrollY;
|
|
const destination = Math.max(1, headingTop - viewportHeight * (0.35 + 0.8));
|
|
return { destination, viewportHeight, expectedLabel: '01 / PROFILE' };
|
|
});
|
|
await page.evaluate(() => window.dispatchEvent(new WheelEvent('wheel', { deltaY: 1 })));
|
|
for (let y = 1; y < oracle.destination; y += oracle.viewportHeight * 0.5) {
|
|
await page.evaluate((nextY) => window.scrollTo(0, nextY), y);
|
|
await waitForOneAnimationFrame(page);
|
|
}
|
|
await page.evaluate((destination) => window.scrollTo(0, destination), oracle.destination);
|
|
await waitForOneAnimationFrame(page);
|
|
|
|
await expect.poll(async () => (await readSceneInstrumentation(page)).routeLabelsDrawn).toContain(oracle.expectedLabel);
|
|
const labels = (await readSceneInstrumentation(page)).routeLabelsDrawn;
|
|
expect([...new Set(labels)]).toEqual([oracle.expectedLabel]);
|
|
});
|
|
|
|
function colorEnergy(color: string): number {
|
|
const value = Number.parseInt(color.slice(1), 16);
|
|
return ((value >> 16) & 0xff) + ((value >> 8) & 0xff) + (value & 0xff);
|
|
}
|