test: Add e2e tests

.github/workflows/build.yml

@@ -174,4 +174,6 @@ jobs:
           sleep 30
 
       - name: Run Playwright tests
+        env:
+          CI: true
         run: npx playwright test

.gitignore

@@ -37,4 +37,7 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
-test-results/.last-run.json
+
+# tests
+test-results/
+playwright-report/

package.json

@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "preinstall": "npx only-allow pnpm",
-    "dev": "next dev",
+    "dev": "next dev --turbopack",
     "build": "next build",
     "start": "next start -p 1030",
     "stage": "next start -p 1031",

playwright.config.ts

@@ -1,5 +1,20 @@
 import { defineConfig } from "@playwright/test";
 
+// Default to localhost for local development, use staging URL for CI
+const baseURL = process.env.CI
+  ? "https://staging.veganify.app"
+  : "http://localhost:3000";
+
 export default defineConfig({
   testMatch: ["**/*.spec.ts"],
+  use: {
+    baseURL,
+  },
+  webServer: process.env.CI
+    ? undefined
+    : {
+        command: "pnpm dev",
+        url: "http://localhost:3000",
+        reuseExistingServer: true,
+      },
 });

src/tests/e2e/EnteredIngredients.spec.ts

@@ -0,0 +1,41 @@
+import { test, expect } from "@playwright/test";
+
+test("should relfect entered ingredients", async ({ page }) => {
+  await page.goto("/de");
+  await page.getByRole("link", { name: "ຐ Zutatencheck" }).nth(1).click();
+  await page.getByPlaceholder("Zutaten kommagetrennt eingeben").click();
+  await expect(
+    page.getByPlaceholder("Zutaten kommagetrennt eingeben")
+  ).toBeVisible();
+  await page.getByPlaceholder("Zutaten kommagetrennt eingeben").click();
+  await page
+    .getByPlaceholder("Zutaten kommagetrennt eingeben")
+    .fill("Duck, E101, Beet Roots, Carrot");
+  await page.getByLabel("Absenden").click();
+  await expect(page.getByText("Beet roots")).toBeVisible();
+  await expect(page.getByText("Duck")).toBeVisible();
+  await expect(page.getByText("E101")).toBeVisible();
+  await expect(page.getByText("Carrot")).toBeVisible();
+});
+
+test("User should be able to input ingredients and get a result", async ({
+  page,
+}) => {
+  await page.goto("/en/ingredients");
+
+  const inputField = await page.$('textarea[id="ingredients"]');
+  await inputField?.fill("Duck");
+  const submitButton = await page.$('button[name="checkingredients"]');
+  await submitButton?.click();
+
+  await page.waitForSelector(".loading_skeleton", { state: "hidden" });
+  const resultText = await page.textContent(".resultborder");
+  expect(resultText).toContain("Duck");
+
+  await page.route("**/v0/ingredients/*", (route) => {
+    expect(route.request().url()).toBe(
+      "https://api.veganify.app/v1/ingredients/Duck"
+    );
+    expect(route.request().method()).toBe("GET");
+  });
+});

src/tests/e2e/LanguageChange.spec.ts

@@ -0,0 +1,11 @@
+import { test, expect } from "@playwright/test";
+
+test("language change should work", async ({ page }) => {
+  await page.goto("/de/more");
+  await page.getByText("Sprache").click();
+  await Promise.all([
+    page.waitForLoadState("networkidle"),
+    page.getByRole("link", { name: "Englisch" }).click(),
+  ]);
+  expect(page.url()).toMatch("/en/more");
+});

src/tests/e2e/SponsorOptions.spec.ts

@@ -0,0 +1,22 @@
+import { test, expect } from "@playwright/test";
+
+test("should display sponsoring options", async ({ page }) => {
+  await page.goto("de");
+  await page.getByRole("link", { name: " Mehr" }).nth(1).click();
+  await expect(page.getByText("Kauf uns einen Kaffee")).toBeVisible();
+  await page.getByText("Kauf uns einen Kaffee").click();
+  await expect(page.getByText("Einmal via Ko-Fi")).toBeVisible();
+  await page.getByText("-50€").click();
+  await expect(
+    page.getByRole("link", { name: " Sponsor on Ko-Fi" })
+  ).toBeVisible();
+  await page.getByText("Monatlich via GitHub").click();
+  await expect(
+    page.getByRole("link", { name: " Sponsor on GitHub" })
+  ).toBeVisible();
+  await page.getByText("Einmalig via PayPal").click();
+  await expect(
+    page.getByRole("link", { name: " Donate with PayPal" })
+  ).toBeVisible();
+  await page.getByRole("button", { name: "×" }).click();
+});

src/tests/e2e/barcodeInput.spec.ts

@@ -0,0 +1,33 @@
+import { test, expect } from "@playwright/test";
+
+test("should give out product information after entering barcode", async ({
+  page,
+}) => {
+  await page.goto("/de");
+  await expect(page.getByPlaceholder("Barcode eingeben")).toBeVisible();
+  await page.getByPlaceholder("Barcode eingeben").click();
+  await page.getByPlaceholder("Barcode eingeben").fill("4066600204404");
+  await page.getByLabel("Absenden").click();
+  await expect(page.getByText("Vegan")).toBeVisible();
+});
+
+test("User should be able to input a barcode via the URL parameter `ean` ", async ({
+  page,
+}) => {
+  await page.route("**/v0/product/*", (route) => {
+    expect(route.request().url()).toMatch(
+      /^https:\/\/(api|staging\.api)\.veganify\.app\/v0\/product\/4066600204404$/
+    );
+    expect(route.request().method()).toBe("POST");
+  });
+
+  await page.goto("/en?ean=4066600204404");
+  const inputField = await page.waitForSelector('input[name="barcode"]');
+  const inputValue = await inputField.inputValue();
+  expect(inputValue).toBe("4066600204404");
+
+  await page.waitForSelector(".loading_skeleton", { state: "hidden" });
+
+  const resultText = await page.textContent("#result");
+  expect(resultText).toContain("Paulaner Spezi Zero");
+});

src/tests/e2e/usability.spec.ts

@@ -0,0 +1,17 @@
+import { test, expect } from "@playwright/test";
+
+test("User should be able to input a barcode and get a result", async ({
+  page,
+}) => {
+  await page.goto("/en");
+
+  const inputField = await page.$('input[name="barcode"]');
+  await inputField?.fill("4066600204404");
+  const submitButton = await page.$('button[name="submit"]');
+  await submitButton?.click();
+
+  await page.waitForSelector(".loading_skeleton", { state: "hidden" });
+
+  const resultText = await page.textContent("#result");
+  expect(resultText).toContain("Paulaner Spezi Zero");
+});