add meal e2e test

2026-08-01 22:47:41 -04:00
parent 77a9d49eb4
commit 4adcfb1377
2 changed files with 67 additions and 0 deletions
@@ -0,0 +1,54 @@
+import { expect } from "@playwright/test";
+import { test } from "../fixtures";
+import { registerAndLogin, createList, createMealWithIngredients } from "../helpers";
+
+test("a user can add a meal's ingredients to a list via the picker", async ({ page }) => {
+  await registerAndLogin(page, "alice@example.com");
+  await createMealWithIngredients(page, "Spaghetti Bolognese", [
+    { name: "Penne", quantity: "500g" },
+    { name: "Tomato", quantity: "2" },
+  ]);
+  await createList(page, "Weekly shop");
+
+  // Open the add-meal picker.
+  await page.click(".add-meal-button");
+  const picker = page.locator(".meal-picker-backdrop");
+  await expect(picker).toBeVisible();
+  await expect(picker.locator(".meal-picker-button").filter({ hasText: "Spaghetti Bolognese" })).toBeVisible();
+
+  // Select the meal.
+  await picker.locator(".meal-picker-button").filter({ hasText: "Spaghetti Bolognese" }).click();
+
+  // The picker closes and the meal's ingredients appear as items.
+  await expect(picker).toHaveCount(0);
+  await expect(page.locator(".item-row").filter({ hasText: "Penne" })).toBeVisible();
+  await expect(page.locator(".item-row").filter({ hasText: "Tomato" })).toBeVisible();
+  await expect(page.locator(".item-row").filter({ hasText: "Penne" }).locator(".item-qty")).toHaveText("(500g)");
+});
+
+test("the add-meal picker closes via the close button", async ({ page }) => {
+  await registerAndLogin(page, "alice@example.com");
+  await createMealWithIngredients(page, "Spaghetti Bolognese", [{ name: "Penne" }]);
+  await createList(page, "Weekly shop");
+
+  await page.click(".add-meal-button");
+  const picker = page.locator(".meal-picker-backdrop");
+  await expect(picker).toBeVisible();
+
+  await picker.locator(".meal-picker-close").click();
+  await expect(picker).toHaveCount(0);
+});
+
+test("the add-meal picker closes when clicking outside", async ({ page }) => {
+  await registerAndLogin(page, "alice@example.com");
+  await createMealWithIngredients(page, "Spaghetti Bolognese", [{ name: "Penne" }]);
+  await createList(page, "Weekly shop");
+
+  await page.click(".add-meal-button");
+  const picker = page.locator(".meal-picker-backdrop");
+  await expect(picker).toBeVisible();
+
+  // Click the backdrop itself (outside the modal card).
+  await picker.click({ position: { x: 5, y: 5 } });
+  await expect(picker).toHaveCount(0);
+});