127 lines
5.5 KiB
TypeScript
127 lines
5.5 KiB
TypeScript
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), at the viewport corner.
|
|
await page.mouse.click(10, 10);
|
|
await expect(picker).toHaveCount(0);
|
|
});
|
|
|
|
test("a meal added to a list is shown in the meals panel", 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");
|
|
|
|
await page.click(".add-meal-button");
|
|
const picker = page.locator(".meal-picker-backdrop");
|
|
await picker.locator(".meal-picker-button").filter({ hasText: "Spaghetti Bolognese" }).click();
|
|
|
|
// The meal appears in the "Meals on this list" panel.
|
|
const panel = page.locator("#list-meals-panel");
|
|
await expect(panel).toBeVisible();
|
|
await expect(panel.locator(".list-meal-row").filter({ hasText: "Spaghetti Bolognese" })).toBeVisible();
|
|
});
|
|
|
|
test("removing a meal from a list removes its ingredients", 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");
|
|
|
|
await page.click(".add-meal-button");
|
|
const picker = page.locator(".meal-picker-backdrop");
|
|
await picker.locator(".meal-picker-button").filter({ hasText: "Spaghetti Bolognese" }).click();
|
|
|
|
await expect(page.locator(".item-row").filter({ hasText: "Penne" })).toBeVisible();
|
|
await expect(page.locator(".item-row").filter({ hasText: "Tomato" })).toBeVisible();
|
|
|
|
// Remove the meal from the list.
|
|
const panel = page.locator("#list-meals-panel");
|
|
const row = panel.locator(".list-meal-row").filter({ hasText: "Spaghetti Bolognese" });
|
|
await row.locator(".list-meal-remove-button").click();
|
|
|
|
// The meal's ingredients are removed from the list.
|
|
await expect(page.locator(".item-row").filter({ hasText: "Penne" })).toHaveCount(0);
|
|
await expect(page.locator(".item-row").filter({ hasText: "Tomato" })).toHaveCount(0);
|
|
await expect(row).toHaveCount(0);
|
|
});
|
|
|
|
test("a meal can be checked off without removing it from the list", 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 picker.locator(".meal-picker-button").filter({ hasText: "Spaghetti Bolognese" }).click();
|
|
|
|
const panel = page.locator("#list-meals-panel");
|
|
const row = panel.locator(".list-meal-row").filter({ hasText: "Spaghetti Bolognese" });
|
|
await expect(row).toBeVisible();
|
|
await expect(row.locator(".list-meal-check-button")).not.toHaveClass(/is-.*checked/);
|
|
|
|
// Check the meal off as eaten.
|
|
await row.locator(".list-meal-check-button").click();
|
|
await expect(row).toHaveClass(/is-checked/);
|
|
await expect(row.locator(".list-meal-check-button")).toHaveText("✓");
|
|
// The meal is still on the list, not removed.
|
|
await expect(row).toBeVisible();
|
|
await expect(page.locator(".item-row").filter({ hasText: "Penne" })).toBeVisible();
|
|
|
|
// Unchecking restores it.
|
|
await row.locator(".list-meal-check-button").click();
|
|
await expect(row).not.toHaveClass(/is-checked/);
|
|
await expect(row).toBeVisible();
|
|
});
|