fix: separate hover and use ASCII glitch transitions
Reference site / build (push) Canceled after 0s
Reference site / build (push) Canceled after 0s
This commit is contained in:
@@ -47,10 +47,20 @@ test('storyboard phases retain one root and ignore repeated triggers', async ({
|
||||
expect(Math.abs(initial!.x + initial!.width / 2 - page.viewportSize()!.width / 2)).toBeLessThan(2);
|
||||
expect(Math.abs(initial!.y + initial!.height / 2 - page.viewportSize()!.height / 2)).toBeLessThan(2);
|
||||
await page.screenshot({ path: testInfo.outputPath('01-root.png') });
|
||||
await root.hover();
|
||||
await expect(page.locator(stage)).toHaveAttribute('data-hover', 'true');
|
||||
await page.clock.runFor(8000);
|
||||
await expect(page.locator(stage)).toHaveAttribute('data-phase', 'armed');
|
||||
await expect(page.locator('.tap-stream-a')).toHaveCSS('opacity', '1');
|
||||
expect(await root.boundingBox()).toEqual(initial);
|
||||
await page.screenshot({ path: testInfo.outputPath('02-hover.png') });
|
||||
await page.mouse.move(0, 0);
|
||||
await expect(page.locator(stage)).not.toHaveAttribute('data-hover');
|
||||
await expect(page.locator('.tap-stream-a')).toHaveCSS('opacity', '0');
|
||||
await root.click();
|
||||
await page.clock.runFor(320);
|
||||
await page.screenshot({ path: testInfo.outputPath('02-tap.png') });
|
||||
await page.clock.runFor(1450);
|
||||
await expect(page.locator(stage)).toHaveAttribute('data-phase', 'orbit');
|
||||
await expect(page.locator(stage)).not.toHaveAttribute('data-hover');
|
||||
await page.clock.runFor(1150);
|
||||
await expect(page.locator(stage)).toHaveAttribute('data-phase', 'orbit');
|
||||
const arcLength = await page.locator('#welcome-orbit').evaluate((path) => (path as SVGPathElement).getTotalLength());
|
||||
await page.screenshot({ path: testInfo.outputPath('03-orbit.png') });
|
||||
@@ -65,10 +75,23 @@ test('storyboard phases retain one root and ignore repeated triggers', async ({
|
||||
await page.clock.runFor(1550);
|
||||
await expect(page.locator(stage)).toHaveAttribute('data-phase', 'tree');
|
||||
await page.screenshot({ path: testInfo.outputPath('05-tree.png') });
|
||||
await page.clock.runFor(1800);
|
||||
await page.clock.runFor(600);
|
||||
await expect(page.locator('.call-panel')).toHaveAttribute('data-glitching');
|
||||
expect(await page.locator('.call-panel .box-fill').first().textContent()).not.toMatch(/^─+$/);
|
||||
await page.screenshot({ path: testInfo.outputPath('06-glitch.png') });
|
||||
await page.clock.runFor(1200);
|
||||
await complete(page);
|
||||
await expect(root).toHaveCount(1);
|
||||
await expect(page.locator('.call-panel')).not.toHaveAttribute('inert');
|
||||
await expect(page.locator('[data-glitching]')).toHaveCount(0);
|
||||
await expect(page.locator('[data-object-signature]')).toContainText('object at "/issues/123"');
|
||||
for (const panel of await page.locator('.ascii-panel').all()) {
|
||||
await expect(panel).toHaveCSS('outline-style', 'none');
|
||||
await expect(panel).toHaveCSS('border-top-width', '0px');
|
||||
await expect(panel.locator('.box-corner')).toHaveText(['┌', '┐', '└', '┘']);
|
||||
for (const fill of await panel.locator('.box-fill').all()) await expect(fill).toHaveText(/^─+$/);
|
||||
for (const side of await panel.locator('.box-column').all()) await expect(side).toHaveText(/^[│\s]+$/);
|
||||
}
|
||||
await expect(page.locator('.branch-lines')).toHaveCount(0);
|
||||
await expect(page.locator('.branch-prefix')).toHaveText([
|
||||
'├── ', '│ ├── ', '│ └── ', '│ └── ',
|
||||
@@ -98,6 +121,27 @@ test('storyboard phases retain one root and ignore repeated triggers', async ({
|
||||
await expect(page.locator(stage)).toHaveAttribute('data-phase', 'complete');
|
||||
});
|
||||
|
||||
test('skipping an active glitch restores exact text and frames', async ({ page }) => {
|
||||
await page.clock.install({ time: new Date('2026-01-01T00:00:00Z') });
|
||||
await page.clock.pauseAt(new Date('2026-01-01T00:00:01Z'));
|
||||
await armed(page);
|
||||
await page.keyboard.press('a');
|
||||
await expect(page.locator(stage)).toHaveAttribute('data-phase', 'orbit');
|
||||
await expect(page.locator('.tap-stream-a')).toHaveCSS('opacity', '0');
|
||||
await page.clock.runFor(4800);
|
||||
await expect(page.locator('.call-panel')).toHaveAttribute('data-glitching');
|
||||
await page.keyboard.press('Escape');
|
||||
await complete(page);
|
||||
await expect(page.locator('[data-glitching]')).toHaveCount(0);
|
||||
await expect(page.locator('#call-result-title')).toHaveText('03 / Call result');
|
||||
await expect(page.locator('.call-panel .box-corner')).toHaveText(['┌', '┐', '└', '┘']);
|
||||
await expect(page.locator('.call-panel .box-fill').first()).toHaveText(/^─+$/);
|
||||
await page.clock.runFor(2000);
|
||||
await expect(page.locator('[data-object-signature]')).toContainText('object at "/issues/123"');
|
||||
await page.locator('.root-mark').hover();
|
||||
await expect(page.locator(stage)).not.toHaveAttribute('data-hover');
|
||||
});
|
||||
|
||||
test('tree selection, collapse and call results are keyboard accessible', async ({ page }) => {
|
||||
await armed(page);
|
||||
await page.keyboard.press('Escape');
|
||||
|
||||
@@ -0,0 +1,21 @@
|
||||
import test from 'node:test';
|
||||
import assert from 'node:assert/strict';
|
||||
import { glitchText } from '../src/lib/landing-ascii.mjs';
|
||||
|
||||
const text = '┌────────┐\n│ object │\n└────────┘\n 本文: "sample";';
|
||||
test('ASCII glitch preserves cells, whitespace and Japanese prose', () => {
|
||||
const output = glitchText(text, .2, 9, 2);
|
||||
assert.equal(output.length, text.length);
|
||||
assert.equal(output.match(/\s/g).join(''), text.match(/\s/g).join(''));
|
||||
assert.ok(output.includes('本文'));
|
||||
assert.notEqual(output, text);
|
||||
});
|
||||
test('noise is reproducible and changes only with its explicit clock', () => {
|
||||
assert.equal(glitchText(text, .3, 1, 7), glitchText(text, .3, 1, 7));
|
||||
assert.notEqual(glitchText(text, .3, 1, 7), glitchText(text, .3, 2, 7));
|
||||
});
|
||||
test('transition restores the exact source text at its boundary', () => {
|
||||
assert.equal(glitchText(text, 1, 99), text);
|
||||
assert.equal(glitchText(text, 2, 99), text);
|
||||
assert.equal(glitchText('', .5, 1), '');
|
||||
});
|
||||
Reference in New Issue
Block a user