kantarci/KantSites
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 81 Wiki Activity

Use standard form buttons and resume entrance effects in 1.10.1
CMS quality / php (8.2) (push) Canceled after 0s
Details
CMS quality / php (8.4) (push) Canceled after 0s
Details
CMS quality / browser (push) Canceled after 0s
Details
CMS quality / mysql (push) Canceled after 0s
Details

Browse Source
This commit is contained in:
kantarci committed 2026-09-14 15:22:42 +02:00
1 parent f182f9e125
commit cff468167b
12 files changed
+161 -12
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

scripts/button-check.mjs
+42 -1
View File
@@ -16,6 +16,10 @@ const server = spawn(php, ['-d', 'memory_limit=256M', '-S', `127.0.0.1:${port}`,
const report = 'reports/buttons'; await mkdir(report, { recursive: true });
let browser, page;
const checks = [], errors = [];
const buttonStyle = node => {
const style = getComputedStyle(node);
return Object.fromEntries(['backgroundColor', 'color', 'borderRadius', 'borderColor', 'borderWidth', 'borderStyle', 'paddingTop', 'paddingRight', 'fontFamily', 'fontSize', 'fontWeight', 'letterSpacing', 'textTransform', 'lineHeight', 'textAlign'].map(key => [key, style[key]]));
};
try {
for (let attempt = 0; attempt < 60; attempt++) {
@@ -83,12 +87,49 @@ try {
const plain = await browser.newContext({ javaScriptEnabled: false }); const publicPage = await plain.newPage();
for (const [width, radius, transparent] of [[1600, '8px', false], [900, '0px', true], [390, '999px', false]]) {
await publicPage.setViewportSize({ width, height: 900 }); await publicPage.goto(origin);
const necessaryCookies = publicPage.getByRole('button', { name: 'Nur notwendige', exact: true });
if (await necessaryCookies.count()) await necessaryCookies.click();
const values = await publicPage.locator('#qa-button').evaluate(el => { const s=getComputedStyle(el);return { radius:s.borderRadius, bg:s.backgroundColor, font:s.fontSize }; });
assert.equal(values.radius, radius); assert.equal(values.bg === 'rgba(0, 0, 0, 0)', transparent); assert.equal(values.font, '17px');
assert.equal(await publicPage.locator('#qa-button-default').evaluate(el => getComputedStyle(el).fontSize), '18px');
const submit = publicPage.locator('.block-form button[type=submit]').first();
const standard = publicPage.locator('#qa-button-default');
assert.deepEqual(await submit.evaluate(buttonStyle), await standard.evaluate(buttonStyle), 'Form submit uses global shape, appearance, size, typography and colors');
assert.ok(await submit.evaluate(node => node.getBoundingClientRect().width < node.form.getBoundingClientRect().width), 'Submit keeps natural button width');
await submit.hover(); await publicPage.waitForTimeout(350);
const hoverStyle = await submit.evaluate(buttonStyle);
await standard.hover(); await publicPage.waitForTimeout(350);
assert.deepEqual(hoverStyle, await standard.evaluate(buttonStyle), 'Submit inherits the global hover colors');
await submit.focus();
assert.equal(await submit.evaluate(node => getComputedStyle(node).outlineStyle), 'solid', 'Submit has a keyboard focus indicator');
await submit.screenshot({ path: `${report}/submit-${width}.png` });
await publicPage.locator('#qa-buttons-section').screenshot({ path: `${report}/public-${width}.png` });
}
await plain.close(); checks.push('published global defaults and local responsive variants without JavaScript');
await page.goto(origin + '/admin/theme');
await page.locator('#buttons-shape').selectOption('rounded');
await page.locator('#buttons-appearance').selectOption('solid');
await page.locator('#buttons-size').selectOption('large');
await page.locator('#buttons-fontSize').fill('20');
for (const [key, hex] of [['backgroundColor', '#124b36'], ['color', '#ffffff'], ['hoverBackgroundColor', '#092c20'], ['hoverColor', '#fff4cc']]) {
await page.locator(`#buttons-${key}`).click();
await page.locator(`#buttons-${key}-hex`).fill(hex);
await page.locator(`#buttons-${key}-hex`).press('Enter');
await page.keyboard.press('Escape');
}
await page.getByRole('button', { name: 'Design speichern', exact: true }).click();
await publicPage.goto(origin);
const updatedSubmit = publicPage.locator('.block-form button[type=submit]').first();
const updatedDefault = publicPage.locator('#qa-button-default');
assert.deepEqual(await updatedSubmit.evaluate(buttonStyle), await updatedDefault.evaluate(buttonStyle), 'A later change to solid global defaults updates existing forms');
assert.equal(await updatedSubmit.evaluate(el => getComputedStyle(el).backgroundColor), 'rgb(18, 75, 54)');
await updatedSubmit.hover(); await publicPage.waitForTimeout(350);
const updatedHover = await updatedSubmit.evaluate(buttonStyle);
await updatedDefault.hover(); await publicPage.waitForTimeout(350);
assert.deepEqual(updatedHover, await updatedDefault.evaluate(buttonStyle), 'Custom global hover colors update existing forms');
await publicPage.setViewportSize({ width: 390, height: 1600 });
await updatedSubmit.scrollIntoViewIfNeeded();
await publicPage.locator('.block-form').first().screenshot({ path: `${report}/form-standard-button.png` });
await plain.close(); checks.push('published global defaults, form submit including hover/focus/natural width, solid and outline theme changes, and local responsive variants without JavaScript');
assert.deepEqual(errors, []);
await writeFile(`${report}/result.json`, JSON.stringify({ checks, passed: true }, null, 2));
console.log('Button checks passed:', checks.length, 'groups.');
scripts/motion-check.mjs
+51 -3
View File
@@ -10,6 +10,7 @@ const hash = async () => createHash('sha256').update(await readFile('var/kantit.
const before = await hash();
const fixture = JSON.parse(execFileSync(php, ['tests/pilot-fixture.php'], { encoding: 'utf8', windowsHide: true }));
const env = { ...process.env, APP_ENV: 'prod', APP_DEBUG: '0', APP_SECRET: randomBytes(32).toString('hex'), DATABASE_URL: fixture.databaseUrl, MEDIA_DIRECTORY: fixture.mediaDirectory };
execFileSync(php, ['bin/console', 'cache:clear', '--env=prod', '--no-debug'], { env, windowsHide: true, stdio: 'ignore' });
const probe = net.createServer(); await new Promise(resolve => probe.listen(0, '127.0.0.1', resolve));
const port = probe.address().port; await new Promise(resolve => probe.close(resolve));
const origin = `http://127.0.0.1:${port}`;
@@ -23,7 +24,13 @@ try {
if (attempt === 59) throw new Error('Pilot server did not start');
await new Promise(resolve => setTimeout(resolve, 200));
}
browser = await chromium.launch();
browser = await chromium.launch(process.env.MOTION_BROWSER_CHANNEL ? { channel: process.env.MOTION_BROWSER_CHANNEL } : {});
const systemContext = await browser.newContext({ reducedMotion: null });
const systemPage = await systemContext.newPage();
await systemPage.goto(origin);
const systemMotion = await systemPage.evaluate(() => ({ reduced: matchMedia('(prefers-reduced-motion: reduce)').matches, userAgent: navigator.userAgent }));
console.log('Default browser motion preference:', JSON.stringify(systemMotion));
await systemContext.close();
for (const width of [1600, 390]) {
const context = await browser.newContext({ viewport: { width, height: 900 }, reducedMotion: 'no-preference' });
await context.addInitScript(() => {
@@ -40,6 +47,12 @@ try {
const inventory = await page.locator('[class*="fx-entrance-"]').evaluateAll(nodes => nodes.map(node => ({ id: node.id, classes: node.className })));
assert.ok(inventory.length > 0, 'Pilot has entrance effects');
assert.equal(await page.locator('script[src*="motion.js"]').count(), 1);
const hoverTarget = page.locator('#leistung-app');
await hoverTarget.scrollIntoViewIfNeeded(); await page.waitForTimeout(800);
await hoverTarget.hover(); await page.waitForTimeout(350);
const hovered = await hoverTarget.evaluate(node => ({ transform: getComputedStyle(node).transform, matches: node.matches(':hover'), classes: node.className }));
console.log('Pilot hover:', width, JSON.stringify(hovered));
assert.equal(hovered.transform, 'matrix(1, 0, 0, 1, 0, -4)', 'Saved lift effect changes the rendered transform');
const target = page.locator('#kontakt');
assert.equal(await page.evaluate(() => motionCalls.some(call => call.id === 'kontakt')), false, 'Below-fold section must wait for scrolling');
await target.scrollIntoViewIfNeeded();
@@ -76,7 +89,26 @@ try {
await page.reload(); await target.scrollIntoViewIfNeeded(); await page.waitForTimeout(800);
assert.equal(await page.evaluate(() => motionCalls.length), 0, 'Reduced motion suppresses animations');
assert.equal(await target.evaluate(node => getComputedStyle(node).opacity), '1');
results.push({ width, inventory, calls, checks: ['scroll trigger', 'once only', 'left/right computed movement', 'reduced motion'] });
await hoverTarget.hover(); await page.waitForTimeout(350);
assert.equal(await hoverTarget.evaluate(node => getComputedStyle(node).transform), 'none', 'Reduced motion suppresses hover movement');
await target.scrollIntoViewIfNeeded();
await page.emulateMedia({ reducedMotion: 'no-preference' });
await page.waitForFunction(() => motionCalls.some(call => call.id === 'kontakt'), null, { timeout: 3000 });
await page.waitForTimeout(800);
await page.emulateMedia({ reducedMotion: 'reduce' });
await page.emulateMedia({ reducedMotion: 'no-preference' });
await page.waitForTimeout(100);
assert.equal(await page.evaluate(() => motionCalls.filter(call => call.id === 'kontakt').length), 1, 'Preference changes do not replay an already seen element');
await hoverTarget.hover(); await page.waitForTimeout(350);
assert.equal(await hoverTarget.evaluate(node => getComputedStyle(node).transform), 'matrix(1, 0, 0, 1, 0, -4)', 'Hover resumes after allowing motion');
// Also cover a page that starts normally, then suppresses motion before reaching its content.
await page.reload(); await page.waitForTimeout(800);
await page.emulateMedia({ reducedMotion: 'reduce' });
await target.scrollIntoViewIfNeeded(); await page.waitForTimeout(100);
assert.equal(await page.evaluate(() => motionCalls.filter(call => call.id === 'kontakt').length), 0);
await page.emulateMedia({ reducedMotion: 'no-preference' });
await page.waitForFunction(() => motionCalls.some(call => call.id === 'kontakt'), null, { timeout: 3000 });
results.push({ width, inventory, calls, checks: ['scroll trigger', 'once only', 'left/right computed movement', 'saved hover lift', 'reduced motion', 'resume without reloading after initial and subsequent reduced motion', 'hover resumes after preference change'] });
await context.close();
}
const noJs = await browser.newContext({ javaScriptEnabled: false });
@@ -84,9 +116,25 @@ try {
assert.ok(await page.locator('main').innerText());
assert.equal(await page.locator('#kontakt').evaluate(node => getComputedStyle(node).opacity), '1');
await noJs.close();
const editorContext = await browser.newContext({ reducedMotion: 'reduce', viewport: { width: 1600, height: 1000 } });
const editor = await editorContext.newPage(); editor.on('pageerror', error => errors.push(error.message));
await editor.goto(origin + '/admin/login');
await editor.getByLabel('Benutzername').fill(fixture.username);
await editor.getByLabel('Passwort', { exact: true }).fill(fixture.password);
await editor.getByRole('button', { name: 'Anmelden', exact: true }).click();
await editor.waitForURL(origin + '/admin');
await editor.goto(`${origin}/admin/pages/${fixture.homeId}`);
await editor.locator('#motion-status').waitFor({ state: 'visible' });
await editor.locator('#preview-status').filter({ hasText: 'Entwurf ·' }).waitFor();
await editor.screenshot({ path: `${report}/editor-motion-status.png` });
await editor.emulateMedia({ reducedMotion: 'no-preference' });
await editor.locator('#motion-status').waitFor({ state: 'hidden' });
await editor.emulateMedia({ reducedMotion: 'reduce' });
await editor.locator('#motion-status').waitFor({ state: 'visible' });
await editorContext.close();
assert.deepEqual(errors, []);
assert.equal(await hash(), before, 'Original database unchanged');
await writeFile(`${report}/result.json`, JSON.stringify({ results, errors, noJavaScript: true, originalUnchanged: true }, null, 2));
await writeFile(`${report}/result.json`, JSON.stringify({ systemMotion, results, errors, editorMotionStatus: true, noJavaScript: true, originalUnchanged: true }, null, 2));
console.log(JSON.stringify({ passed: true, devices: results.map(result => result.width), effects: results[0].inventory, report }));
} finally {
await browser?.close(); server.kill();