feat(editor): streamline ingredient entry with compact rows and expandable details

This commit is contained in:
OpenCode committed 2026-10-24 16:13:54 +02:00
1 parent 9ecd36db0f
commit 3abccf0999
14 files changed
+677 -220

No files matched your search

+41
View File
@@ -10,16 +10,57 @@ test('editor remains usable on the current viewport in dark mode', async ({ page
await page.getByRole('button', { name: 'Theme wechseln', exact: true }).click();
await page.getByRole('button', { name: 'Zutaten', exact: true }).click();
await page.getByRole('textbox', { name: 'Zutat 1', exact: true }).fill('Kartoffeln');
await page.getByRole('spinbutton', { name: 'Menge 1', exact: true }).fill('400');
await page.getByRole('button', { name: 'Details für Zutat 1', exact: true }).click();
await page.getByRole('combobox', { name: 'Abschnitt 1', exact: true }).fill('Für das Gemüse');
await page
.getByRole('textbox', { name: 'Hinweis 1', exact: true })
.fill('geschält und gewürfelt');
await page.getByRole('button', { name: 'Details für Zutat 1', exact: true }).click();
await page.getByRole('button', { name: 'Zutat hinzufügen' }).click();
await expect(page.getByRole('textbox', { name: 'Zutat 2', exact: true })).toBeFocused();
await page.getByRole('textbox', { name: 'Zutat 2', exact: true }).fill('Karotten');
await page.getByRole('spinbutton', { name: 'Menge 2', exact: true }).fill('200');
await page.getByRole('button', { name: 'Details für Zutat 2', exact: true }).click();
await page.getByRole('checkbox', { name: 'Optionale Zutat' }).check();
await page.getByRole('button', { name: 'Zutat 2 nach oben' }).click();
await expect(page.getByRole('textbox', { name: 'Zutat 1', exact: true })).toHaveValue('Karotten');
await page.getByRole('button', { name: 'Details für Zutat 1', exact: true }).click();
await page.getByRole('textbox', { name: 'Zutat 2', exact: true }).press('Enter');
await expect(page.getByRole('textbox', { name: 'Zutat 3', exact: true })).toBeFocused();
await page.getByRole('textbox', { name: 'Zutat 3', exact: true }).fill('Zwiebel');
await page.getByRole('spinbutton', { name: 'Menge 3', exact: true }).fill('1');
await page.getByRole('combobox', { name: 'Einheit 3', exact: true }).selectOption('Stück');
await page.getByRole('textbox', { name: 'Zutat 3', exact: true }).press('Enter');
await page.getByRole('textbox', { name: 'Zutat 4', exact: true }).fill('Olivenöl');
await page.getByRole('spinbutton', { name: 'Menge 4', exact: true }).fill('2');
await page.getByRole('combobox', { name: 'Einheit 4', exact: true }).selectOption('EL');
page.on('dialog', (dialog) => dialog.accept());
await page.reload();
await page.getByRole('button', { name: 'Zutaten', exact: true }).click();
await expect(page.getByRole('textbox', { name: 'Zutat 1', exact: true })).toHaveValue('Karotten');
await expect(page.locator('.ingredient-entry').nth(0)).toContainText('optional');
await expect(page.locator('.ingredient-entry').nth(1)).toContainText('geschält und gewürfelt');
expect(await page.evaluate(() => document.documentElement.scrollWidth <= innerWidth)).toBe(true);
await page.screenshot({
path: `docs/screenshots/editor-dark-${info.project.name}.png`,
fullPage: true,
animations: 'disabled',
});
await page.getByRole('button', { name: 'Theme wechseln', exact: true }).click();
await page.screenshot({
path: `docs/screenshots/ingredients-light-${info.project.name}.png`,
fullPage: true,
animations: 'disabled',
});
if (info.project.name === 'desktop') {
await page.locator('.ingredient-grip').first().dragTo(page.locator('.ingredient-entry').nth(1));
await expect(page.getByRole('textbox', { name: 'Zutat 1', exact: true })).toHaveValue(
'Kartoffeln',
);
}
await page.getByRole('button', { name: 'Live-Vorschau', exact: true }).click();
expect(await page.evaluate(() => document.documentElement.scrollWidth <= innerWidth)).toBe(true);
});
test('public library, shareable search, favorites, themes and responsive layouts', async ({
page,