mirror of
https://github.com/pewdiepie-archdaemon/odysseus.git
synced 2026-10-06 15:02:20 +02:00
Léo
1323fab0bd
static/style.css no longer holds every rule. 79 rules for the document, gallery and editor panels now live in static/css/, yet 27 browser tests still built their synthetic page with a single <link> to style.css, and 51 more read that one file as though it were the whole cascade. Those tests kept passing while covering less: a rule that moved became invisible to the assertion that was meant to pin it. Python readers now call tests.helpers.stylesheets.app_css(), and synthetic pages are built from stylesheet_link_tags() so they load exactly what index.html loads, in the same order. The helper already existed; this moves the remaining callers onto it. test_portal_dropdown_z_js parametrised over a file list including style.css to assert an absence. Checking a negative against one file of a split stylesheet is how a moved rule escapes, so the CSS case now checks the concatenation. Two guards keep it from coming back: one fails on any test reading static/style.css directly, the other on any synthetic page linking it alone. Both name the helper to use. No production code changes. Suite is unchanged at 6 pre-existing failures.
352 lines
16 KiB
Python
352 lines
16 KiB
Python
"""Interaction coverage for rich-text formatting dropdown menus."""
|
||
|
||
import json
|
||
import subprocess
|
||
from pathlib import Path
|
||
from tests.helpers.stylesheets import app_css
|
||
from tests.helpers.stylesheets import stylesheet_link_tags
|
||
|
||
|
||
ROOT = Path(__file__).resolve().parents[1]
|
||
DOC_JS = (ROOT / "static/js/document.js").read_text(encoding="utf-8")
|
||
STYLE = app_css()
|
||
|
||
|
||
def test_rich_toolbar_menus_expose_keyboard_and_context_state():
|
||
dropdown = DOC_JS.split("function _showMdDropdown", 1)[1].split(
|
||
"function initMdToolbar", 1
|
||
)[0]
|
||
toolbar = DOC_JS.split("function initMdToolbar", 1)[1].split(
|
||
"function _applyDocFont", 1
|
||
)[0]
|
||
|
||
assert "menu.setAttribute('role', 'menu')" in dropdown
|
||
assert ": 'menuitem')" in dropdown
|
||
assert "toggleBtn.setAttribute('aria-expanded', 'true')" in dropdown
|
||
assert "needsTableSelection" in dropdown
|
||
assert "needsImageSelection" in dropdown
|
||
assert "ev.key === 'ArrowDown'" in dropdown
|
||
assert "ev.key === 'ArrowUp'" in dropdown
|
||
assert "ev.key === 'Home'" in dropdown
|
||
assert "ev.key === 'End'" in dropdown
|
||
assert "dismiss(true)" in dropdown
|
||
assert "window.visualViewport?.width" in dropdown
|
||
assert "window.visualViewport?.height" in dropdown
|
||
assert "menu.style.zIndex = String(topPortalZ())" in dropdown
|
||
assert "_showMdDropdown(dd, e.key === 'ArrowUp' ? -1 : 0, ++_mdDdActivationSerial)" in toolbar
|
||
assert ".doc-overflow-item:focus-visible" in STYLE
|
||
assert ".doc-md-toolbar button:focus-visible" in STYLE
|
||
assert "function _richDropdownCurrentActions" in DOC_JS
|
||
assert "it.setAttribute('aria-checked'" in dropdown
|
||
assert "it.classList.add('is-current')" in dropdown
|
||
assert "menuitemcheckbox" in dropdown
|
||
assert "menuitemradio" in dropdown
|
||
assert ".doc-overflow-item.is-current" in STYLE
|
||
assert ".md-dd-current" in STYLE
|
||
|
||
|
||
def test_mobile_toolbar_uses_native_momentum_and_distinct_activation_tokens():
|
||
toolbar = DOC_JS.split("function initMdToolbar", 1)[1].split(
|
||
"function _applyDocFont", 1
|
||
)[0]
|
||
assert "toolbar.addEventListener('pointerdown'" in toolbar
|
||
assert "_mdDdActivationSerial" in toolbar
|
||
assert "itemsWrap.addEventListener('touchend'" not in toolbar
|
||
assert "-webkit-overflow-scrolling: touch" in STYLE
|
||
assert "touch-action: pan-x pan-y" in STYLE
|
||
|
||
script = r"""
|
||
import { chromium } from 'playwright';
|
||
const browser = await chromium.launch({ headless: true });
|
||
const page = await browser.newPage({ viewport: { width: 390, height: 844 }, hasTouch: true });
|
||
await page.goto(`${process.env.ODYSSEUS_TEST_STATIC_ORIGIN}/static/js/documentStats.js`);
|
||
await page.setContent('__ODY_STYLESHEETS__<div id="toast"></div><div id="chat-container"></div><div id="sidebar"></div>');
|
||
await page.evaluate(async () => {
|
||
const mod = await import('/static/js/document.js?v=20260831richtexttools91&toggle-test=1');
|
||
mod.init('/api');
|
||
mod.injectFreshDoc({
|
||
id: 'toggle-doc', title: 'Toggle menu', language: 'richtext',
|
||
current_content: '<p>Toggle target</p>', version_count: 1,
|
||
});
|
||
});
|
||
await page.waitForSelector('#doc-email-richbody p');
|
||
|
||
const toggle = page.locator('button[data-dd="font"]');
|
||
await toggle.click();
|
||
const opened = await page.locator('#doc-md-dd-menu[data-dd="font"]').count();
|
||
await toggle.click();
|
||
const closed = await page.locator('#doc-md-dd-menu').count();
|
||
|
||
const sizeToggle = page.locator('button[data-dd="textsize"]');
|
||
await sizeToggle.click();
|
||
const sliderOpened = await page.locator('.rich-toolbar-range').count();
|
||
await sizeToggle.click();
|
||
const sliderClosed = await page.locator('#doc-md-dd-menu').count();
|
||
|
||
const colorToggle = page.locator('button[data-dd="color"]');
|
||
await colorToggle.click();
|
||
await page.locator('.rich-toolbar-color-input').click();
|
||
const pickerOpened = await page.locator('.cp-popover').count();
|
||
await colorToggle.click();
|
||
const colorClosed = await page.locator('#doc-md-dd-menu, .cp-popover').count();
|
||
|
||
const items = page.locator('#md-toolbar-items');
|
||
const before = await items.evaluate(el => el.scrollLeft);
|
||
await items.hover({ position: { x: 180, y: 12 } });
|
||
await page.mouse.wheel(280, 0);
|
||
await page.waitForTimeout(80);
|
||
const scroll = await items.evaluate(el => ({
|
||
left: el.scrollLeft,
|
||
max: el.scrollWidth - el.clientWidth,
|
||
touchAction: getComputedStyle(el).touchAction,
|
||
}));
|
||
console.log(JSON.stringify({ opened, closed, sliderOpened, sliderClosed, pickerOpened, colorClosed, before, scroll }));
|
||
await browser.close();
|
||
"""
|
||
script = script.replace("__ODY_STYLESHEETS__", stylesheet_link_tags())
|
||
result = subprocess.run(
|
||
["node", "--input-type=module", "-e", script],
|
||
cwd=ROOT,
|
||
check=False,
|
||
capture_output=True,
|
||
text=True,
|
||
)
|
||
assert result.returncode == 0, result.stderr
|
||
data = json.loads(result.stdout)
|
||
assert data["opened"] == 1
|
||
assert data["closed"] == 0
|
||
assert data["sliderOpened"] == 1
|
||
assert data["sliderClosed"] == 0
|
||
assert data["pickerOpened"] == 1
|
||
assert data["colorClosed"] == 0
|
||
assert data["scroll"]["max"] > 0
|
||
assert data["scroll"]["left"] > data["before"]
|
||
assert data["scroll"]["touchAction"] == "pan-x pan-y"
|
||
|
||
|
||
def test_mobile_toolbar_menu_preserves_selection_and_restores_focus():
|
||
script = r"""
|
||
import { chromium } from 'playwright';
|
||
const browser = await chromium.launch({ headless: true });
|
||
const page = await browser.newPage({ viewport: { width: 390, height: 844 } });
|
||
await page.goto(`${process.env.ODYSSEUS_TEST_STATIC_ORIGIN}/static/js/documentStats.js`);
|
||
await page.setContent('__ODY_STYLESHEETS__<div id="toast"></div><div id="chat-container"></div><div id="sidebar"></div>');
|
||
await page.evaluate(async () => {
|
||
const mod = await import('/static/js/document.js?v=20260831richtexttools91&toolbar-menu-test=1');
|
||
mod.init('/api');
|
||
mod.injectFreshDoc({
|
||
id: 'toolbar-menu-doc',
|
||
title: 'Toolbar menu',
|
||
language: 'richtext',
|
||
current_content: '<p>Paragraph</p>',
|
||
version_count: 1,
|
||
});
|
||
});
|
||
await page.waitForSelector('#doc-email-richbody p');
|
||
await page.evaluate(() => {
|
||
const paragraph = document.querySelector('#doc-email-richbody p');
|
||
const range = document.createRange();
|
||
range.selectNodeContents(paragraph);
|
||
range.collapse(false);
|
||
const selection = getSelection();
|
||
selection.removeAllRanges();
|
||
selection.addRange(range);
|
||
document.querySelector('[data-dd="heading"]').focus();
|
||
});
|
||
|
||
const imageInitiallyDisabled = await page.locator('[data-dd="image"]').isDisabled();
|
||
await page.keyboard.press('ArrowDown');
|
||
await page.waitForTimeout(50);
|
||
const opened = await page.evaluate(() => {
|
||
const menu = document.querySelector('#doc-md-dd-menu');
|
||
const rect = menu.getBoundingClientRect();
|
||
return {
|
||
role: menu.getAttribute('role'),
|
||
labelledBy: menu.getAttribute('aria-labelledby'),
|
||
expanded: document.querySelector('[data-dd="heading"]').getAttribute('aria-expanded'),
|
||
focused: document.activeElement.textContent.trim(),
|
||
topLayerRole: document.elementFromPoint(rect.left + 20, rect.top + 20)?.closest?.('[role]')?.getAttribute('role'),
|
||
rect: { left: rect.left, right: rect.right, top: rect.top, bottom: rect.bottom },
|
||
};
|
||
});
|
||
await page.keyboard.press('ArrowDown');
|
||
await page.keyboard.press('Enter');
|
||
await page.waitForTimeout(50);
|
||
const heading = await page.locator('#doc-email-richbody').innerHTML();
|
||
|
||
await page.locator('[data-dd="table"]').focus();
|
||
await page.keyboard.press('ArrowDown');
|
||
await page.waitForTimeout(50);
|
||
const tableMenu = await page.evaluate(() => {
|
||
const items = Array.from(document.querySelectorAll('#doc-md-dd-menu .doc-overflow-item'));
|
||
const rect = document.querySelector('#doc-md-dd-menu').getBoundingClientRect();
|
||
return {
|
||
enabled: items.filter(item => !item.disabled).map(item => item.textContent.trim()),
|
||
disabled: items.filter(item => item.disabled).map(item => item.textContent.trim()),
|
||
focused: document.activeElement.textContent.trim(),
|
||
rect: { left: rect.left, right: rect.right, top: rect.top, bottom: rect.bottom },
|
||
};
|
||
});
|
||
await page.keyboard.press('End');
|
||
const endFocus = await page.evaluate(() => document.activeElement.textContent.trim());
|
||
await page.keyboard.press('Home');
|
||
const homeFocus = await page.evaluate(() => document.activeElement.textContent.trim());
|
||
await page.keyboard.press('Escape');
|
||
const escaped = await page.evaluate(() => ({
|
||
menu: Boolean(document.querySelector('#doc-md-dd-menu')),
|
||
focusedToggle: document.activeElement?.dataset?.dd,
|
||
expanded: document.querySelector('[data-dd="table"]').getAttribute('aria-expanded'),
|
||
}));
|
||
const overflow = await page.evaluate(() => ({
|
||
scrollWidth: document.documentElement.scrollWidth,
|
||
clientWidth: document.documentElement.clientWidth,
|
||
}));
|
||
|
||
console.log(JSON.stringify({
|
||
imageInitiallyDisabled, opened, heading, tableMenu, endFocus, homeFocus, escaped, overflow,
|
||
}));
|
||
await browser.close();
|
||
"""
|
||
script = script.replace("__ODY_STYLESHEETS__", stylesheet_link_tags())
|
||
result = subprocess.run(
|
||
["node", "--input-type=module", "-e", script],
|
||
cwd=ROOT,
|
||
check=False,
|
||
capture_output=True,
|
||
text=True,
|
||
)
|
||
assert result.returncode == 0, result.stderr
|
||
data = json.loads(result.stdout)
|
||
assert data["imageInitiallyDisabled"] is True
|
||
assert data["opened"]["role"] == "menu"
|
||
assert data["opened"]["labelledBy"] == "doc-md-dd-toggle-heading"
|
||
assert data["opened"]["expanded"] == "true"
|
||
assert data["opened"]["focused"] == "PParagraph"
|
||
assert data["opened"]["topLayerRole"] == "menuitemradio"
|
||
assert data["opened"]["rect"]["left"] >= 8
|
||
assert data["opened"]["rect"]["right"] <= 382
|
||
assert data["opened"]["rect"]["top"] >= 8
|
||
assert data["opened"]["rect"]["bottom"] <= 836
|
||
assert data["heading"] == "<h1>Paragraph</h1>"
|
||
assert len(data["tableMenu"]["enabled"]) == 3
|
||
assert len(data["tableMenu"]["disabled"]) == 14
|
||
assert "↔Merge with right" in data["tableMenu"]["disabled"]
|
||
assert "÷Split cell" in data["tableMenu"]["disabled"]
|
||
assert "↕Align cell middle" in data["tableMenu"]["disabled"]
|
||
assert data["tableMenu"]["focused"].startswith("2×2")
|
||
assert data["endFocus"].startswith("4×4")
|
||
assert data["homeFocus"].startswith("2×2")
|
||
assert data["escaped"] == {"menu": False, "focusedToggle": "table", "expanded": "false"}
|
||
assert data["overflow"]["scrollWidth"] == data["overflow"]["clientWidth"]
|
||
|
||
|
||
def test_rich_toolbar_menus_track_live_formatting_values():
|
||
script = r"""
|
||
import { chromium } from 'playwright';
|
||
const browser = await chromium.launch({ headless: true });
|
||
const page = await browser.newPage({ viewport: { width: 900, height: 700 } });
|
||
await page.goto(`${process.env.ODYSSEUS_TEST_STATIC_ORIGIN}/static/js/documentStats.js`);
|
||
await page.setContent('__ODY_STYLESHEETS__<div id="toast"></div><div id="chat-container"></div><div id="sidebar"></div>');
|
||
await page.evaluate(async () => {
|
||
const mod = await import('/static/js/document.js?v=20260831richtexttools91&toolbar-state-test=1');
|
||
mod.init('/api');
|
||
mod.injectFreshDoc({
|
||
id: 'toolbar-state-doc',
|
||
title: 'Toolbar states',
|
||
language: 'richtext',
|
||
current_content: '<p>Stateful text</p>',
|
||
version_count: 1,
|
||
});
|
||
});
|
||
await page.waitForSelector('#doc-email-richbody p');
|
||
await page.evaluate(() => {
|
||
const paragraph = document.querySelector('#doc-email-richbody p');
|
||
const range = document.createRange();
|
||
range.selectNodeContents(paragraph);
|
||
range.collapse(false);
|
||
const selection = getSelection();
|
||
selection.removeAllRanges();
|
||
selection.addRange(range);
|
||
paragraph.closest('[contenteditable]').focus();
|
||
});
|
||
|
||
async function openMenu(kind) {
|
||
await page.locator(`[data-dd="${kind}"]`).focus();
|
||
await page.keyboard.press('ArrowDown');
|
||
await page.waitForTimeout(30);
|
||
}
|
||
async function currentItems() {
|
||
return page.evaluate(() => Array.from(document.querySelectorAll('#doc-md-dd-menu .is-current')).map(item => ({
|
||
label: item.textContent.trim(),
|
||
role: item.getAttribute('role'),
|
||
checked: item.getAttribute('aria-checked'),
|
||
})));
|
||
}
|
||
|
||
await openMenu('heading');
|
||
const initialHeading = await currentItems();
|
||
await page.locator('#doc-md-dd-menu .doc-overflow-item').filter({ hasText: 'Heading 2' }).click();
|
||
await openMenu('heading');
|
||
const heading = await currentItems();
|
||
await page.keyboard.press('Escape');
|
||
|
||
await openMenu('align');
|
||
const initialAlign = await currentItems();
|
||
await page.locator('#doc-md-dd-menu .doc-overflow-item').filter({ hasText: 'Align center' }).click();
|
||
await openMenu('align');
|
||
const align = await currentItems();
|
||
await page.keyboard.press('Escape');
|
||
|
||
await openMenu('spacing');
|
||
const initialSpacing = await currentItems();
|
||
await page.locator('#doc-md-dd-menu .doc-overflow-item').filter({ hasText: 'One and a half' }).click();
|
||
await openMenu('spacing');
|
||
const spacing = await currentItems();
|
||
await page.keyboard.press('Escape');
|
||
|
||
await page.evaluate(() => {
|
||
const image = document.createElement('img');
|
||
image.className = 'richtext-image richtext-image-size-60 richtext-image-align-center';
|
||
image.alt = 'Example';
|
||
image.width = 120;
|
||
image.height = 60;
|
||
document.querySelector('#doc-email-richbody').appendChild(image);
|
||
});
|
||
await page.locator('#doc-email-richbody img').click();
|
||
const imageButtonEnabled = !(await page.locator('[data-dd="image"]').isDisabled());
|
||
await openMenu('image');
|
||
const image = await currentItems();
|
||
const imageActionRole = await page.locator('#doc-md-dd-menu .doc-overflow-item').filter({ hasText: 'Edit description' }).getAttribute('role');
|
||
await page.keyboard.press('Escape');
|
||
|
||
const html = await page.locator('#doc-email-richbody').innerHTML();
|
||
console.log(JSON.stringify({
|
||
initialHeading, heading, initialAlign, align, initialSpacing, spacing,
|
||
imageButtonEnabled, image, imageActionRole, html,
|
||
}));
|
||
await browser.close();
|
||
"""
|
||
script = script.replace("__ODY_STYLESHEETS__", stylesheet_link_tags())
|
||
result = subprocess.run(
|
||
["node", "--input-type=module", "-e", script],
|
||
cwd=ROOT,
|
||
check=False,
|
||
capture_output=True,
|
||
text=True,
|
||
)
|
||
assert result.returncode == 0, result.stderr
|
||
data = json.loads(result.stdout)
|
||
assert data["initialHeading"] == [{"label": "PParagraph", "role": "menuitemradio", "checked": "true"}]
|
||
assert data["heading"] == [{"label": "H2Heading 2", "role": "menuitemradio", "checked": "true"}]
|
||
assert data["initialAlign"] == [{"label": "≡Align left", "role": "menuitemradio", "checked": "true"}]
|
||
assert data["align"] == [{"label": "≡Align center", "role": "menuitemradio", "checked": "true"}]
|
||
assert data["initialSpacing"] == [{"label": "AutoNormal", "role": "menuitemradio", "checked": "true"}]
|
||
assert data["spacing"] == [{"label": "1.5One and a half", "role": "menuitemradio", "checked": "true"}]
|
||
assert data["imageButtonEnabled"] is True
|
||
assert data["image"] == [
|
||
{"label": "60%Medium", "role": "menuitemcheckbox", "checked": "true"},
|
||
{"label": "↔Align center", "role": "menuitemcheckbox", "checked": "true"},
|
||
]
|
||
assert data["imageActionRole"] == "menuitem"
|
||
assert 'style="text-align: center; line-height: 1.5;"' in data["html"]
|