Pick images, pages, forms, sections and terms instead of typing ids and addresses
The share image and featured image of a page become image fields with the library dialog, as do image settings of plugins. The editor offers forms, sections, categories and tags as lists, a page search next to every link target and in text links, the redirect target has a page search, and the form editor picks the reply field, the condition and the option images. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
1 parent
31fb53c1fc
commit
711af312af
19 files changed
+446
-43
No files matched your search
@@ -375,9 +375,28 @@ try {
|
||||
assert.match(await page.locator('#property-href').inputValue(), /^\/media\/[a-f0-9]{32}\.pdf$/);
|
||||
await page.waitForFunction(() => /^\/media\/[a-f0-9]{32}\.pdf$/.test(document.querySelector('#preview').contentDocument?.querySelector('a.button')?.getAttribute('href') ?? ''));
|
||||
checks.push({ name: 'a PDF from the library as a link target', passed: true });
|
||||
// Eine eigene Seite als Linkziel: gesucht und gewählt, nicht als Pfad abgetippt.
|
||||
await page.getByRole('button', { name: 'Seite wählen', exact: true }).click();
|
||||
const pageDialog = page.locator('dialog.page-dialog');
|
||||
await pageDialog.locator('[role="option"]').first().waitFor();
|
||||
const pageAxe = await new AxeBuilder({ page }).include('dialog.page-dialog').withTags(['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa']).analyze();
|
||||
assert.deepEqual(pageAxe.violations.map(v => v.id), [], 'the page dialog has no accessibility violations');
|
||||
await pageDialog.locator('[role="option"]').first().click();
|
||||
await pageDialog.waitFor({ state: 'detached' });
|
||||
assert.match(await page.locator('#property-href').inputValue(), /^\/[a-z0-9\-/]*$/);
|
||||
checks.push({ name: 'a page as a link target, picked by search', passed: true });
|
||||
await page.getByRole('button', { name: 'Rückgängig', exact: true }).click();
|
||||
await page.getByRole('button', { name: 'Rückgängig', exact: true }).click();
|
||||
await page.getByRole('button', { name: 'Rückgängig', exact: true }).click();
|
||||
await page.waitForFunction(count => document.querySelectorAll('#structure [data-block-id]').length === count, beforeButtons);
|
||||
// Verknüpfte Dinge kommen aus Listen: Formular, Kategorie und Schlagwort sind Auswahlfelder.
|
||||
for (const [type, id] of [['form', 'property-form'], ['postlist', 'property-category'], ['postlist', 'property-tag']]) {
|
||||
await addFromLibrary(`button[data-add="${type}"]`);
|
||||
assert.equal(await page.locator(`#${id}`).evaluate(node => node.tagName), 'SELECT', `${id} is a choice, not a typed address`);
|
||||
await page.getByRole('button', { name: 'Rückgängig', exact: true }).click();
|
||||
await page.waitForFunction(count => document.querySelectorAll('#structure [data-block-id]').length === count, beforeButtons);
|
||||
}
|
||||
checks.push({ name: 'forms, categories and tags are picked from lists', passed: true });
|
||||
checks.push({ name: 'canvas toolbar, insert points and drag from the toolbox', passed: true });
|
||||
await page.screenshot({ path: 'reports/editor/canvas-overlay.png' });
|
||||
// --- Der Werkzeugkasten kennt den Zusammenhang ---------------------------------------------
|
||||
@@ -1108,6 +1127,61 @@ try {
|
||||
await axe('mobile media library');
|
||||
await page.screenshot({ path: 'reports/editor/media-phone.png', fullPage: true });
|
||||
await page.getByRole('button', { name: 'Schließen', exact: true }).click();
|
||||
// Das Vorschaubild einer Seite: aus der Mediathek gewählt, nicht als Kennung abgetippt.
|
||||
await page.setViewportSize({ width: 1600, height: 1100 });
|
||||
await page.goto(origin + '/admin');
|
||||
const sheet = page.locator('details.sheet').first();
|
||||
await sheet.locator('summary').click();
|
||||
const ogField = sheet.locator('[data-media-field]').filter({ has: page.locator('input[name="ogMediaId"]') });
|
||||
await ogField.getByRole('button', { name: 'Bild wählen oder hochladen', exact: true }).click();
|
||||
await page.locator('#media-dialog [data-media-id]').first().click();
|
||||
await page.locator('#media-insert').click();
|
||||
await page.locator('#media-dialog').waitFor({ state: 'detached' });
|
||||
const chosenOg = await ogField.locator('input[name="ogMediaId"]').inputValue();
|
||||
assert.match(chosenOg, /^[a-f0-9]{32}$/);
|
||||
assert.equal(await ogField.locator('.media-field-thumb').isVisible(), true, 'the chosen image is shown');
|
||||
await axe('content settings with an image field');
|
||||
await ogField.locator('xpath=ancestor::form').getByRole('button', { name: 'Speichern', exact: true }).click();
|
||||
await page.waitForLoadState('load');
|
||||
const savedOg = page.locator('input[name="ogMediaId"]').first();
|
||||
assert.equal(await savedOg.inputValue(), chosenOg, 'the image survives saving');
|
||||
checks.push({ name: 'image fields in the content settings pick from the library', passed: true });
|
||||
// Formular-Editor: Bedingung, Antwortadresse und Bild je Option werden gewählt, nicht getippt.
|
||||
await page.goto(origin + '/admin/forms');
|
||||
const neu = page.locator('#neues-formular');
|
||||
if (!(await neu.evaluate(details => details.open))) await neu.locator('summary').click();
|
||||
await neu.locator('[name="name"]').fill('Anfrage Prüfung');
|
||||
await neu.locator('[name="slug"]').fill('anfrage-pruefung');
|
||||
await neu.locator('[name="recipient"]').fill('info@example.com');
|
||||
const karte = index => neu.locator('[data-field-list] [data-field]').nth(index);
|
||||
await karte(0).locator('[data-field-label]').fill('E-Mail');
|
||||
await karte(0).locator('[data-field-type]').selectOption('email');
|
||||
await neu.locator('[data-add-field]').click();
|
||||
await karte(1).locator('[data-field-label]').fill('Art');
|
||||
await karte(1).locator('[data-field-type]').selectOption('radio');
|
||||
await karte(1).locator('[data-field-options-input]').fill('Wohnung, Haus');
|
||||
await neu.locator('[data-add-field]').click();
|
||||
await karte(2).locator('[data-field-label]').fill('Etage');
|
||||
await karte(2).getByLabel('Nur zeigen, wenn', { exact: true }).selectOption({ label: 'Art' });
|
||||
await karte(2).getByLabel('Wohnung', { exact: true }).check();
|
||||
assert.equal(await karte(2).locator('[data-field-showif]').inputValue(), 'art');
|
||||
assert.equal(await karte(2).locator('[data-field-showvalues]').inputValue(), 'Wohnung');
|
||||
await neu.getByLabel('Antwortadresse aus Feld', { exact: true }).selectOption({ label: 'E-Mail' });
|
||||
assert.equal(await neu.locator('input[name="replyToField"]').inputValue(), 'e_mail');
|
||||
await karte(1).getByRole('button', { name: 'Bild für „Wohnung“ wählen', exact: true }).click();
|
||||
await page.locator('#media-dialog [data-media-id]').first().click();
|
||||
await page.locator('#media-insert').click();
|
||||
await page.locator('#media-dialog').waitFor({ state: 'detached' });
|
||||
assert.match(await karte(1).locator('[data-field-images-input]').inputValue(), /^Wohnung = [a-f0-9]{32}$/);
|
||||
assert.equal(await karte(1).locator('.field-image-picker-thumb').first().isVisible(), true);
|
||||
await axe('form editor with pickers');
|
||||
await neu.getByRole('button', { name: 'Formular anlegen', exact: true }).click();
|
||||
await page.waitForLoadState('load');
|
||||
const gespeichert = page.locator('form[action$="/forms/anfrage-pruefung"]');
|
||||
await gespeichert.waitFor({ state: 'attached' });
|
||||
assert.equal(await gespeichert.locator('input[name="replyToField"]').inputValue(), 'e_mail');
|
||||
assert.equal(await gespeichert.locator('[data-field-showif]').nth(2).inputValue(), 'art');
|
||||
checks.push({ name: 'form editor: condition, reply address and option images are picked', passed: true });
|
||||
assert.deepEqual(errors, []);
|
||||
await writeFile('reports/editor/result.json', JSON.stringify({ checks, publicDataUntouched: true }, null, 2));
|
||||
console.log('Editor end-to-end checks passed; isolated database, production data unchanged.');
|
||||
|
||||
Reference in new issue
Block a user