Compare commits
10 Commits
editor-spl
...
feature/in
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
c07d2f99ad | ||
|
|
8069c5c246 | ||
|
|
7d6ee04fec | ||
|
|
b646720a6e | ||
|
|
526c7433f4 | ||
|
|
96cb55495e | ||
|
|
a1baf7f30a | ||
|
|
b0d5f921e2 | ||
|
|
72816d6b35 | ||
|
|
ad5a6afcd9 |
@@ -1,5 +1,5 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { Trash2, ChevronUp, ChevronDown } from 'lucide-svelte';
|
import { Trash2, ChevronUp, ChevronDown, Plus, X } from 'lucide-svelte';
|
||||||
import type { DraftIng } from './recipe-editor-types';
|
import type { DraftIng } from './recipe-editor-types';
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
@@ -8,11 +8,39 @@
|
|||||||
total: number;
|
total: number;
|
||||||
onmove: (dir: -1 | 1) => void;
|
onmove: (dir: -1 | 1) => void;
|
||||||
onremove: () => void;
|
onremove: () => void;
|
||||||
|
onaddSection: () => void;
|
||||||
|
onremoveSection: () => void;
|
||||||
};
|
};
|
||||||
|
|
||||||
let { ing, idx, total, onmove, onremove }: Props = $props();
|
let { ing, idx, total, onmove, onremove, onaddSection, onremoveSection }: Props = $props();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
{#if ing.section_heading === null}
|
||||||
|
<li class="section-insert">
|
||||||
|
<button type="button" class="add-section" onclick={onaddSection}>
|
||||||
|
<Plus size={12} strokeWidth={2.5} />
|
||||||
|
<span>Abschnitt hinzufügen</span>
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
{:else}
|
||||||
|
<li class="section-heading-row">
|
||||||
|
<input
|
||||||
|
class="section-heading"
|
||||||
|
type="text"
|
||||||
|
bind:value={ing.section_heading}
|
||||||
|
placeholder='Sektion, z. B. „Für den Teig"'
|
||||||
|
aria-label="Sektionsüberschrift"
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="section-remove"
|
||||||
|
aria-label="Sektion entfernen"
|
||||||
|
onclick={onremoveSection}
|
||||||
|
>
|
||||||
|
<X size={14} strokeWidth={2.5} />
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
{/if}
|
||||||
<li class="ing-row">
|
<li class="ing-row">
|
||||||
<div class="move">
|
<div class="move">
|
||||||
<button
|
<button
|
||||||
@@ -126,4 +154,68 @@
|
|||||||
grid-area: del;
|
grid-area: del;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.section-insert {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
list-style: none;
|
||||||
|
margin: -0.2rem 0 0.1rem;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.15s;
|
||||||
|
}
|
||||||
|
/* Parent-UL liegt im RecipeEditor, daher :global(.ing-list). Ohne das
|
||||||
|
scopt Svelte die Klasse und der Selector matcht zur Laufzeit nicht. */
|
||||||
|
:global(.ing-list):hover .section-insert,
|
||||||
|
.section-insert:focus-within {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
.add-section {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.25rem;
|
||||||
|
padding: 0.2rem 0.55rem;
|
||||||
|
border: 1px dashed #cfd9d1;
|
||||||
|
background: white;
|
||||||
|
color: #2b6a3d;
|
||||||
|
border-radius: 999px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-family: inherit;
|
||||||
|
}
|
||||||
|
.add-section:hover {
|
||||||
|
background: #f4f8f5;
|
||||||
|
}
|
||||||
|
.section-heading-row {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 32px;
|
||||||
|
gap: 0.35rem;
|
||||||
|
list-style: none;
|
||||||
|
margin-top: 0.4rem;
|
||||||
|
}
|
||||||
|
.section-heading {
|
||||||
|
padding: 0.45rem 0.7rem;
|
||||||
|
border: 1px solid #cfd9d1;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #2b6a3d;
|
||||||
|
font-family: inherit;
|
||||||
|
background: #f4f8f5;
|
||||||
|
}
|
||||||
|
.section-remove {
|
||||||
|
width: 32px;
|
||||||
|
height: 38px;
|
||||||
|
border: 1px solid #cfd9d1;
|
||||||
|
background: white;
|
||||||
|
border-radius: 8px;
|
||||||
|
color: #666;
|
||||||
|
cursor: pointer;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.section-remove:hover {
|
||||||
|
background: #fdf3f3;
|
||||||
|
border-color: #f1b4b4;
|
||||||
|
color: #c53030;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -43,7 +43,8 @@
|
|||||||
qty: i.quantity !== null ? String(i.quantity).replace('.', ',') : '',
|
qty: i.quantity !== null ? String(i.quantity).replace('.', ',') : '',
|
||||||
unit: i.unit ?? '',
|
unit: i.unit ?? '',
|
||||||
name: i.name,
|
name: i.name,
|
||||||
note: i.note ?? ''
|
note: i.note ?? '',
|
||||||
|
section_heading: i.section_heading
|
||||||
}))
|
}))
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
@@ -52,7 +53,7 @@
|
|||||||
);
|
);
|
||||||
|
|
||||||
function addIngredient() {
|
function addIngredient() {
|
||||||
ingredients = [...ingredients, { qty: '', unit: '', name: '', note: '' }];
|
ingredients = [...ingredients, { qty: '', unit: '', name: '', note: '', section_heading: null }];
|
||||||
}
|
}
|
||||||
function removeIngredient(idx: number) {
|
function removeIngredient(idx: number) {
|
||||||
ingredients = ingredients.filter((_, i) => i !== idx);
|
ingredients = ingredients.filter((_, i) => i !== idx);
|
||||||
@@ -64,6 +65,16 @@
|
|||||||
[next[idx], next[target]] = [next[target], next[idx]];
|
[next[idx], next[target]] = [next[target], next[idx]];
|
||||||
ingredients = next;
|
ingredients = next;
|
||||||
}
|
}
|
||||||
|
function addSection(idx: number) {
|
||||||
|
const next = [...ingredients];
|
||||||
|
next[idx] = { ...next[idx], section_heading: '' };
|
||||||
|
ingredients = next;
|
||||||
|
}
|
||||||
|
function removeSection(idx: number) {
|
||||||
|
const next = [...ingredients];
|
||||||
|
next[idx] = { ...next[idx], section_heading: null };
|
||||||
|
ingredients = next;
|
||||||
|
}
|
||||||
function addStep() {
|
function addStep() {
|
||||||
steps = [...steps, { text: '' }];
|
steps = [...steps, { text: '' }];
|
||||||
}
|
}
|
||||||
@@ -94,13 +105,15 @@
|
|||||||
if (qty !== null) rawParts.push(String(qty).replace('.', ','));
|
if (qty !== null) rawParts.push(String(qty).replace('.', ','));
|
||||||
if (unit) rawParts.push(unit);
|
if (unit) rawParts.push(unit);
|
||||||
rawParts.push(name);
|
rawParts.push(name);
|
||||||
|
const heading = i.section_heading === null ? null : (i.section_heading.trim() || null);
|
||||||
return {
|
return {
|
||||||
position: idx + 1,
|
position: idx + 1,
|
||||||
quantity: qty,
|
quantity: qty,
|
||||||
unit,
|
unit,
|
||||||
name,
|
name,
|
||||||
note,
|
note,
|
||||||
raw_text: rawParts.join(' ')
|
raw_text: rawParts.join(' '),
|
||||||
|
section_heading: heading
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
const cleanedSteps: Step[] = steps
|
const cleanedSteps: Step[] = steps
|
||||||
@@ -174,6 +187,8 @@
|
|||||||
total={ingredients.length}
|
total={ingredients.length}
|
||||||
onmove={(dir) => moveIngredient(idx, dir)}
|
onmove={(dir) => moveIngredient(idx, dir)}
|
||||||
onremove={() => removeIngredient(idx)}
|
onremove={() => removeIngredient(idx)}
|
||||||
|
onaddSection={() => addSection(idx)}
|
||||||
|
onremoveSection={() => removeSection(idx)}
|
||||||
/>
|
/>
|
||||||
{/each}
|
{/each}
|
||||||
</ul>
|
</ul>
|
||||||
|
|||||||
@@ -127,6 +127,9 @@
|
|||||||
</div>
|
</div>
|
||||||
<ul class="ing-list">
|
<ul class="ing-list">
|
||||||
{#each scaled as ing, i (i)}
|
{#each scaled as ing, i (i)}
|
||||||
|
{#if ing.section_heading && ing.section_heading.trim()}
|
||||||
|
<li class="section-heading">{ing.section_heading}</li>
|
||||||
|
{/if}
|
||||||
<li>
|
<li>
|
||||||
{#if ing.quantity !== null || ing.unit}
|
{#if ing.quantity !== null || ing.unit}
|
||||||
<span class="qty">
|
<span class="qty">
|
||||||
@@ -281,6 +284,19 @@
|
|||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
.ing-list .section-heading {
|
||||||
|
list-style: none;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #2b6a3d;
|
||||||
|
font-size: 1rem;
|
||||||
|
margin-top: 0.9rem;
|
||||||
|
margin-bottom: 0.2rem;
|
||||||
|
padding: 0.15rem 0;
|
||||||
|
border-bottom: 1px solid #e4eae7;
|
||||||
|
}
|
||||||
|
.ing-list .section-heading:first-child {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
.ing-list li {
|
.ing-list li {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 0.75rem;
|
gap: 0.75rem;
|
||||||
|
|||||||
@@ -3,6 +3,7 @@ export type DraftIng = {
|
|||||||
unit: string;
|
unit: string;
|
||||||
name: string;
|
name: string;
|
||||||
note: string;
|
note: string;
|
||||||
|
section_heading: string | null;
|
||||||
};
|
};
|
||||||
|
|
||||||
export type DraftStep = { text: string };
|
export type DraftStep = { text: string };
|
||||||
|
|||||||
7
src/lib/server/db/migrations/012_ingredient_section.sql
Normal file
7
src/lib/server/db/migrations/012_ingredient_section.sql
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
-- Nullable-Spalte fuer optionale Sektionsueberschriften bei Zutaten. User
|
||||||
|
-- soll im Editor gruppieren koennen ("Fuer den Teig", "Fuer die Fuellung").
|
||||||
|
-- Rendering-Regel: Ist section_heading gesetzt (nicht NULL, nicht leer),
|
||||||
|
-- startet an dieser Zeile eine neue Sektion mit diesem Titel; alle folgenden
|
||||||
|
-- Zutaten gehoeren dazu, bis die naechste Zeile wieder eine Ueberschrift hat.
|
||||||
|
-- Ordnung bleibt die bestehende position-Spalte.
|
||||||
|
ALTER TABLE ingredient ADD COLUMN section_heading TEXT;
|
||||||
@@ -105,16 +105,16 @@ export function parseIngredient(raw: string, position = 0): Ingredient {
|
|||||||
if (tail.length > 0) {
|
if (tail.length > 0) {
|
||||||
const quantity = clampQuantity(UNICODE_FRACTION_MAP[firstChar]);
|
const quantity = clampQuantity(UNICODE_FRACTION_MAP[firstChar]);
|
||||||
const { unit, name } = splitUnitAndName(tail);
|
const { unit, name } = splitUnitAndName(tail);
|
||||||
return { position, quantity, unit, name, note, raw_text: rawText };
|
return { position, quantity, unit, name, note, raw_text: rawText, section_heading: null };
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const qtyPattern = /^((?:\d+[.,]?\d*(?:\s*[-–]\s*\d+[.,]?\d*)?)|(?:\d+\/\d+))\s+(.+)$/;
|
const qtyPattern = /^((?:\d+[.,]?\d*(?:\s*[-–]\s*\d+[.,]?\d*)?)|(?:\d+\/\d+))\s+(.+)$/;
|
||||||
const qtyMatch = qtyPattern.exec(working);
|
const qtyMatch = qtyPattern.exec(working);
|
||||||
if (!qtyMatch) {
|
if (!qtyMatch) {
|
||||||
return { position, quantity: null, unit: null, name: working, note, raw_text: rawText };
|
return { position, quantity: null, unit: null, name: working, note, raw_text: rawText, section_heading: null };
|
||||||
}
|
}
|
||||||
const quantity = clampQuantity(parseQuantity(qtyMatch[1]));
|
const quantity = clampQuantity(parseQuantity(qtyMatch[1]));
|
||||||
const { unit, name } = splitUnitAndName(qtyMatch[2]);
|
const { unit, name } = splitUnitAndName(qtyMatch[2]);
|
||||||
return { position, quantity, unit, name, note, raw_text: rawText };
|
return { position, quantity, unit, name, note, raw_text: rawText, section_heading: null };
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -64,11 +64,11 @@ export function insertRecipe(db: Database.Database, recipe: Recipe): number {
|
|||||||
const id = Number(info.lastInsertRowid);
|
const id = Number(info.lastInsertRowid);
|
||||||
|
|
||||||
const insIng = db.prepare(
|
const insIng = db.prepare(
|
||||||
`INSERT INTO ingredient(recipe_id, position, quantity, unit, name, note, raw_text)
|
`INSERT INTO ingredient(recipe_id, position, quantity, unit, name, note, raw_text, section_heading)
|
||||||
VALUES (?, ?, ?, ?, ?, ?, ?)`
|
VALUES (?, ?, ?, ?, ?, ?, ?, ?)`
|
||||||
);
|
);
|
||||||
for (const ing of recipe.ingredients) {
|
for (const ing of recipe.ingredients) {
|
||||||
insIng.run(id, ing.position, ing.quantity, ing.unit, ing.name, ing.note, ing.raw_text);
|
insIng.run(id, ing.position, ing.quantity, ing.unit, ing.name, ing.note, ing.raw_text, ing.section_heading);
|
||||||
}
|
}
|
||||||
|
|
||||||
const insStep = db.prepare(
|
const insStep = db.prepare(
|
||||||
@@ -104,7 +104,7 @@ export function getRecipeById(db: Database.Database, id: number): Recipe | null
|
|||||||
|
|
||||||
const ingredients = db
|
const ingredients = db
|
||||||
.prepare(
|
.prepare(
|
||||||
`SELECT position, quantity, unit, name, note, raw_text
|
`SELECT position, quantity, unit, name, note, raw_text, section_heading
|
||||||
FROM ingredient WHERE recipe_id = ? ORDER BY position`
|
FROM ingredient WHERE recipe_id = ? ORDER BY position`
|
||||||
)
|
)
|
||||||
.all(id) as Ingredient[];
|
.all(id) as Ingredient[];
|
||||||
@@ -215,11 +215,11 @@ export function replaceIngredients(
|
|||||||
const tx = db.transaction(() => {
|
const tx = db.transaction(() => {
|
||||||
db.prepare('DELETE FROM ingredient WHERE recipe_id = ?').run(recipeId);
|
db.prepare('DELETE FROM ingredient WHERE recipe_id = ?').run(recipeId);
|
||||||
const ins = db.prepare(
|
const ins = db.prepare(
|
||||||
`INSERT INTO ingredient(recipe_id, position, quantity, unit, name, note, raw_text)
|
`INSERT INTO ingredient(recipe_id, position, quantity, unit, name, note, raw_text, section_heading)
|
||||||
VALUES (?, ?, ?, ?, ?, ?, ?)`
|
VALUES (?, ?, ?, ?, ?, ?, ?, ?)`
|
||||||
);
|
);
|
||||||
for (const ing of ingredients) {
|
for (const ing of ingredients) {
|
||||||
ins.run(recipeId, ing.position, ing.quantity, ing.unit, ing.name, ing.note, ing.raw_text);
|
ins.run(recipeId, ing.position, ing.quantity, ing.unit, ing.name, ing.note, ing.raw_text, ing.section_heading);
|
||||||
}
|
}
|
||||||
refreshFts(db, recipeId);
|
refreshFts(db, recipeId);
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -5,6 +5,7 @@ export type Ingredient = {
|
|||||||
name: string;
|
name: string;
|
||||||
note: string | null;
|
note: string | null;
|
||||||
raw_text: string;
|
raw_text: string;
|
||||||
|
section_heading: string | null;
|
||||||
};
|
};
|
||||||
|
|
||||||
export type Step = {
|
export type Step = {
|
||||||
|
|||||||
@@ -24,7 +24,8 @@ const IngredientSchema = z.object({
|
|||||||
unit: z.string().max(30).nullable(),
|
unit: z.string().max(30).nullable(),
|
||||||
name: z.string().min(1).max(200),
|
name: z.string().min(1).max(200),
|
||||||
note: z.string().max(300).nullable(),
|
note: z.string().max(300).nullable(),
|
||||||
raw_text: z.string().max(500)
|
raw_text: z.string().max(500),
|
||||||
|
section_heading: z.string().max(200).nullable()
|
||||||
});
|
});
|
||||||
|
|
||||||
const StepSchema = z.object({
|
const StepSchema = z.object({
|
||||||
|
|||||||
219
tests/e2e/remote/ingredient-sections.spec.ts
Normal file
219
tests/e2e/remote/ingredient-sections.spec.ts
Normal file
@@ -0,0 +1,219 @@
|
|||||||
|
import { test, expect } from '@playwright/test';
|
||||||
|
import { setActiveProfile, HENDRIK_ID } from './fixtures/profile';
|
||||||
|
|
||||||
|
// Helper: idempotent recipe delete.
|
||||||
|
async function deleteRecipe(
|
||||||
|
request: Parameters<Parameters<typeof test>[1]>[0]['request'],
|
||||||
|
id: number
|
||||||
|
): Promise<void> {
|
||||||
|
await request.delete(`/api/recipes/${id}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Shared ingredient payload builder — fills all required Zod fields.
|
||||||
|
function makeIngredient(
|
||||||
|
position: number,
|
||||||
|
name: string,
|
||||||
|
section_heading: string | null,
|
||||||
|
overrides: Partial<{
|
||||||
|
quantity: number | null;
|
||||||
|
unit: string | null;
|
||||||
|
note: string | null;
|
||||||
|
raw_text: string;
|
||||||
|
}> = {}
|
||||||
|
) {
|
||||||
|
return {
|
||||||
|
position,
|
||||||
|
quantity: overrides.quantity ?? null,
|
||||||
|
unit: overrides.unit ?? null,
|
||||||
|
name,
|
||||||
|
note: overrides.note ?? null,
|
||||||
|
raw_text: overrides.raw_text ?? name,
|
||||||
|
section_heading
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─────────────────────────────────────────────────────────────────────────────
|
||||||
|
// Per-test cleanup scaffolding — single variable, reset in beforeEach.
|
||||||
|
// ─────────────────────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
let createdId: number | null = null;
|
||||||
|
|
||||||
|
test.beforeEach(() => {
|
||||||
|
createdId = null;
|
||||||
|
});
|
||||||
|
|
||||||
|
test.afterEach(async ({ request }) => {
|
||||||
|
if (createdId !== null) {
|
||||||
|
await deleteRecipe(request, createdId);
|
||||||
|
createdId = null;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// ─────────────────────────────────────────────────────────────────────────────
|
||||||
|
// Test 1 — pure API roundtrip (no browser needed)
|
||||||
|
// ─────────────────────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
test('API: section_heading persistiert ueber PATCH + GET', async ({ request }) => {
|
||||||
|
// 1. Create blank recipe.
|
||||||
|
const createRes = await request.post('/api/recipes/blank');
|
||||||
|
expect(createRes.status()).toBe(200);
|
||||||
|
const { id } = (await createRes.json()) as { id: number };
|
||||||
|
createdId = id;
|
||||||
|
|
||||||
|
// 2. PATCH with 3 ingredients carrying section_heading values.
|
||||||
|
const patchRes = await request.patch(`/api/recipes/${id}`, {
|
||||||
|
data: {
|
||||||
|
ingredients: [
|
||||||
|
makeIngredient(1, 'Mehl', 'Fuer den Teig', { quantity: 200, unit: 'g', raw_text: '200 g Mehl' }),
|
||||||
|
makeIngredient(2, 'Zucker', null, { quantity: 100, unit: 'g', raw_text: '100 g Zucker' }),
|
||||||
|
makeIngredient(3, 'Beeren', 'Fuer die Fuellung', { quantity: 150, unit: 'g', raw_text: '150 g Beeren' })
|
||||||
|
]
|
||||||
|
}
|
||||||
|
});
|
||||||
|
expect(patchRes.status()).toBe(200);
|
||||||
|
|
||||||
|
// 3. GET and assert persisted values.
|
||||||
|
const getRes = await request.get(`/api/recipes/${id}`);
|
||||||
|
expect(getRes.status()).toBe(200);
|
||||||
|
const body = (await getRes.json()) as {
|
||||||
|
recipe: { ingredients: Array<{ name: string; section_heading: string | null }> };
|
||||||
|
};
|
||||||
|
const ings = body.recipe.ingredients;
|
||||||
|
|
||||||
|
const mehl = ings.find((i) => i.name === 'Mehl');
|
||||||
|
const zucker = ings.find((i) => i.name === 'Zucker');
|
||||||
|
const beeren = ings.find((i) => i.name === 'Beeren');
|
||||||
|
|
||||||
|
expect(mehl?.section_heading).toBe('Fuer den Teig');
|
||||||
|
expect(zucker?.section_heading).toBeNull();
|
||||||
|
expect(beeren?.section_heading).toBe('Fuer die Fuellung');
|
||||||
|
});
|
||||||
|
|
||||||
|
// ─────────────────────────────────────────────────────────────────────────────
|
||||||
|
// Test 2 — UI edit flow: add section, save, assert view renders heading
|
||||||
|
// ─────────────────────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
test('Editor: Abschnitt via Inline-Button anlegen, View rendert Ueberschrift', async ({
|
||||||
|
page,
|
||||||
|
request
|
||||||
|
}) => {
|
||||||
|
// 1. Create blank recipe via API.
|
||||||
|
const createRes = await request.post('/api/recipes/blank');
|
||||||
|
expect(createRes.status()).toBe(200);
|
||||||
|
const { id } = (await createRes.json()) as { id: number };
|
||||||
|
createdId = id;
|
||||||
|
|
||||||
|
// 2. Open recipe in edit mode.
|
||||||
|
await setActiveProfile(page, HENDRIK_ID);
|
||||||
|
await page.goto(`/recipes/${id}?edit=1`);
|
||||||
|
|
||||||
|
// 3. Add two ingredient rows.
|
||||||
|
const addIngBtn = page.getByRole('button', { name: /Zutat hinzufügen/i });
|
||||||
|
await addIngBtn.click();
|
||||||
|
await addIngBtn.click();
|
||||||
|
|
||||||
|
// Fill the two ingredient rows by aria-label "Zutat" inputs.
|
||||||
|
const nameInputs = page.locator('.ing-list .ing-row input[aria-label="Zutat"]');
|
||||||
|
await nameInputs.nth(0).fill('Mehl');
|
||||||
|
await nameInputs.nth(1).fill('Zucker');
|
||||||
|
|
||||||
|
// 4. Click "Abschnitt hinzufügen" above the first row.
|
||||||
|
// The button is inside .section-insert which is opacity:0 until hover/focus.
|
||||||
|
// Hover the ing-list to trigger visibility, then click.
|
||||||
|
await page.hover('.ing-list');
|
||||||
|
await page.locator('.ing-list .add-section').first().click();
|
||||||
|
|
||||||
|
// 5. Type heading text into the section-heading input that appeared.
|
||||||
|
const headingInput = page.locator('.ing-list input[aria-label="Sektionsüberschrift"]').first();
|
||||||
|
await headingInput.fill('Fuer den Teig');
|
||||||
|
|
||||||
|
// 6. Save — exact match to avoid colliding with "Kommentar speichern".
|
||||||
|
await page.getByRole('button', { name: 'Speichern', exact: true }).click();
|
||||||
|
|
||||||
|
// After save, editMode becomes false — page switches to view mode.
|
||||||
|
// Wait for the section-heading element to confirm view mode is active.
|
||||||
|
await expect(page.locator('.ing-list .section-heading').first()).toBeVisible({ timeout: 8000 });
|
||||||
|
|
||||||
|
// 7. Assert heading text is rendered.
|
||||||
|
await expect(page.locator('.ing-list .section-heading').first()).toHaveText('Fuer den Teig');
|
||||||
|
});
|
||||||
|
|
||||||
|
// ─────────────────────────────────────────────────────────────────────────────
|
||||||
|
// Test 3 — UI: remove an existing section heading, save, confirm it's gone
|
||||||
|
// ─────────────────────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
test('Editor: Sektion entfernen speichert ohne Ueberschrift', async ({ page, request }) => {
|
||||||
|
// 1. Create blank recipe and pre-populate via API.
|
||||||
|
const createRes = await request.post('/api/recipes/blank');
|
||||||
|
expect(createRes.status()).toBe(200);
|
||||||
|
const { id } = (await createRes.json()) as { id: number };
|
||||||
|
createdId = id;
|
||||||
|
|
||||||
|
await request.patch(`/api/recipes/${id}`, {
|
||||||
|
data: {
|
||||||
|
ingredients: [makeIngredient(1, 'Butter', 'Teig', { raw_text: 'Butter' })]
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 2. Open editor.
|
||||||
|
await setActiveProfile(page, HENDRIK_ID);
|
||||||
|
await page.goto(`/recipes/${id}?edit=1`);
|
||||||
|
|
||||||
|
// The section-heading-row should be visible since heading = 'Teig'.
|
||||||
|
const removeBtn = page
|
||||||
|
.locator('.ing-list')
|
||||||
|
.getByRole('button', { name: 'Sektion entfernen' });
|
||||||
|
await expect(removeBtn).toBeVisible({ timeout: 6000 });
|
||||||
|
|
||||||
|
// 3. Click the section-remove X button.
|
||||||
|
await removeBtn.click();
|
||||||
|
|
||||||
|
// 4. Save — exact match to avoid colliding with "Kommentar speichern".
|
||||||
|
await page.getByRole('button', { name: 'Speichern', exact: true }).click();
|
||||||
|
|
||||||
|
// Wait for view mode (editMode = false makes RecipeEditor unmount).
|
||||||
|
// The .section-heading-row is part of the editor; in view mode we check
|
||||||
|
// the view's .ing-list for absence of .section-heading items.
|
||||||
|
await expect(page.locator('.ing-list .section-heading')).toHaveCount(0, { timeout: 8000 });
|
||||||
|
});
|
||||||
|
|
||||||
|
// ─────────────────────────────────────────────────────────────────────────────
|
||||||
|
// Test 4 — empty heading trims to null on save
|
||||||
|
// ─────────────────────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
test('Editor: leeres Heading wird beim Speichern zu null', async ({ page, request }) => {
|
||||||
|
// 1. Create blank recipe.
|
||||||
|
const createRes = await request.post('/api/recipes/blank');
|
||||||
|
expect(createRes.status()).toBe(200);
|
||||||
|
const { id } = (await createRes.json()) as { id: number };
|
||||||
|
createdId = id;
|
||||||
|
|
||||||
|
// 2. Open editor, add one ingredient, open section input and leave it empty.
|
||||||
|
await setActiveProfile(page, HENDRIK_ID);
|
||||||
|
await page.goto(`/recipes/${id}?edit=1`);
|
||||||
|
|
||||||
|
await page.getByRole('button', { name: /Zutat hinzufügen/i }).click();
|
||||||
|
await page.locator('.ing-list .ing-row input[aria-label="Zutat"]').first().fill('Eier');
|
||||||
|
|
||||||
|
// Trigger add-section visibility and click.
|
||||||
|
await page.hover('.ing-list');
|
||||||
|
await page.locator('.ing-list .add-section').first().click();
|
||||||
|
|
||||||
|
// Leave the heading input empty (do not type anything).
|
||||||
|
// The save() function trims '' → null.
|
||||||
|
|
||||||
|
// 3. Save — exact match to avoid colliding with "Kommentar speichern".
|
||||||
|
await page.getByRole('button', { name: 'Speichern', exact: true }).click();
|
||||||
|
|
||||||
|
// Wait until view mode is active (editor gone).
|
||||||
|
await expect(page.locator('.ing-list .section-heading')).toHaveCount(0, { timeout: 8000 });
|
||||||
|
|
||||||
|
// 4. Confirm via API that section_heading is null.
|
||||||
|
const getRes = await request.get(`/api/recipes/${id}`);
|
||||||
|
expect(getRes.status()).toBe(200);
|
||||||
|
const body = (await getRes.json()) as {
|
||||||
|
recipe: { ingredients: Array<{ name: string; section_heading: string | null }> };
|
||||||
|
};
|
||||||
|
const eier = body.recipe.ingredients.find((i) => i.name === 'Eier');
|
||||||
|
expect(eier?.section_heading).toBeNull();
|
||||||
|
});
|
||||||
@@ -70,7 +70,8 @@ describe('recipe repository', () => {
|
|||||||
unit: 'g',
|
unit: 'g',
|
||||||
name: 'Pancetta',
|
name: 'Pancetta',
|
||||||
note: null,
|
note: null,
|
||||||
raw_text: '200 g Pancetta'
|
raw_text: '200 g Pancetta',
|
||||||
|
section_heading: null
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
tags: ['Italienisch']
|
tags: ['Italienisch']
|
||||||
@@ -118,13 +119,13 @@ describe('recipe repository', () => {
|
|||||||
baseRecipe({
|
baseRecipe({
|
||||||
title: 'Pasta',
|
title: 'Pasta',
|
||||||
ingredients: [
|
ingredients: [
|
||||||
{ position: 1, quantity: 200, unit: 'g', name: 'Pancetta', note: null, raw_text: '200 g Pancetta' }
|
{ position: 1, quantity: 200, unit: 'g', name: 'Pancetta', note: null, raw_text: '200 g Pancetta', section_heading: null }
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
replaceIngredients(db, id, [
|
replaceIngredients(db, id, [
|
||||||
{ position: 1, quantity: 500, unit: 'g', name: 'Nudeln', note: null, raw_text: '500 g Nudeln' },
|
{ position: 1, quantity: 500, unit: 'g', name: 'Nudeln', note: null, raw_text: '500 g Nudeln', section_heading: null },
|
||||||
{ position: 2, quantity: 2, unit: null, name: 'Eier', note: null, raw_text: '2 Eier' }
|
{ position: 2, quantity: 2, unit: null, name: 'Eier', note: null, raw_text: '2 Eier', section_heading: null }
|
||||||
]);
|
]);
|
||||||
const loaded = getRecipeById(db, id);
|
const loaded = getRecipeById(db, id);
|
||||||
expect(loaded?.ingredients.length).toBe(2);
|
expect(loaded?.ingredients.length).toBe(2);
|
||||||
@@ -154,4 +155,31 @@ describe('recipe repository', () => {
|
|||||||
const loaded = getRecipeById(db, id);
|
const loaded = getRecipeById(db, id);
|
||||||
expect(loaded?.steps.map((s) => s.text)).toEqual(['Erst', 'Dann']);
|
expect(loaded?.steps.map((s) => s.text)).toEqual(['Erst', 'Dann']);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('persistiert section_heading und gibt es beim Laden zurueck', () => {
|
||||||
|
const db = openInMemoryForTest();
|
||||||
|
const recipe = baseRecipe({
|
||||||
|
title: 'Torte',
|
||||||
|
ingredients: [
|
||||||
|
{ position: 1, quantity: 200, unit: 'g', name: 'Mehl', note: null, raw_text: '200 g Mehl', section_heading: 'Für den Teig' },
|
||||||
|
{ position: 2, quantity: 100, unit: 'g', name: 'Zucker', note: null, raw_text: '100 g Zucker', section_heading: null },
|
||||||
|
{ position: 3, quantity: 300, unit: 'g', name: 'Beeren', note: null, raw_text: '300 g Beeren', section_heading: 'Für die Füllung' }
|
||||||
|
]
|
||||||
|
});
|
||||||
|
const id = insertRecipe(db, recipe);
|
||||||
|
const loaded = getRecipeById(db, id);
|
||||||
|
expect(loaded!.ingredients[0].section_heading).toBe('Für den Teig');
|
||||||
|
expect(loaded!.ingredients[1].section_heading).toBeNull();
|
||||||
|
expect(loaded!.ingredients[2].section_heading).toBe('Für die Füllung');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('replaceIngredients persistiert section_heading', () => {
|
||||||
|
const db = openInMemoryForTest();
|
||||||
|
const id = insertRecipe(db, baseRecipe({ title: 'X' }));
|
||||||
|
replaceIngredients(db, id, [
|
||||||
|
{ position: 1, quantity: null, unit: null, name: 'A', note: null, raw_text: 'A', section_heading: 'Kopf' }
|
||||||
|
]);
|
||||||
|
const loaded = getRecipeById(db, id);
|
||||||
|
expect(loaded!.ingredients[0].section_heading).toBe('Kopf');
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -48,7 +48,7 @@ describe('searchLocal', () => {
|
|||||||
recipe({
|
recipe({
|
||||||
title: 'Pasta',
|
title: 'Pasta',
|
||||||
ingredients: [
|
ingredients: [
|
||||||
{ position: 1, quantity: 200, unit: 'g', name: 'Pancetta', note: null, raw_text: '' }
|
{ position: 1, quantity: 200, unit: 'g', name: 'Pancetta', note: null, raw_text: '', section_heading: null }
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -8,7 +8,8 @@ const mk = (q: number | null, unit: string | null, name: string): Ingredient =>
|
|||||||
unit,
|
unit,
|
||||||
name,
|
name,
|
||||||
note: null,
|
note: null,
|
||||||
raw_text: ''
|
raw_text: '',
|
||||||
|
section_heading: null
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('roundQuantity', () => {
|
describe('roundQuantity', () => {
|
||||||
@@ -40,4 +41,15 @@ describe('scaleIngredients', () => {
|
|||||||
const scaled = scaleIngredients([mk(100, 'g', 'Butter')], 1 / 3);
|
const scaled = scaleIngredients([mk(100, 'g', 'Butter')], 1 / 3);
|
||||||
expect(scaled[0].quantity).toBe(33);
|
expect(scaled[0].quantity).toBe(33);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('preserves section_heading through scaling', () => {
|
||||||
|
const input: Ingredient[] = [
|
||||||
|
{ position: 1, quantity: 200, unit: 'g', name: 'Mehl', note: null, raw_text: '200 g Mehl', section_heading: 'Teig' },
|
||||||
|
{ position: 2, quantity: null, unit: null, name: 'Ei', note: null, raw_text: 'Ei', section_heading: null }
|
||||||
|
];
|
||||||
|
const scaled = scaleIngredients(input, 2);
|
||||||
|
expect(scaled[0].section_heading).toBe('Teig');
|
||||||
|
expect(scaled[1].section_heading).toBeNull();
|
||||||
|
expect(scaled[0].quantity).toBe(400);
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user