implement/init e2e tests (#135)

* init e2e

* updated/moved vitest, finished merge

* fix bun picking up e2e tests

* e2e: overwrite webserver config with env

* e2e: added adapter configs

* e2e: replaced image

app/e2e/base.e2e-spec.ts

@@ -0,0 +1,22 @@
+// @ts-check
+import { test, expect } from "@playwright/test";
+import { testIds } from "../src/ui/lib/config";
+
+test("start page has expected title", async ({ page }) => {
+   await page.goto("/");
+   await expect(page).toHaveTitle(/BKND/);
+});
+
+test("start page has expected heading", async ({ page }) => {
+   await page.goto("/");
+
+   // Example of checking if a heading with "No entity selected" exists and is visible
+   const heading = page.getByRole("heading", { name: /No entity selected/i });
+   await expect(heading).toBeVisible();
+});
+
+test("modal opens on button click", async ({ page }) => {
+   await page.goto("/");
+   await page.getByTestId(testIds.data.btnCreateEntity).click();
+   await expect(page.getByRole("dialog")).toBeVisible();
+});

app/e2e/inc/adapters.ts

@@ -0,0 +1,23 @@
+const adapter = process.env.TEST_ADAPTER;
+
+const default_config = {
+   media_adapter: "local"
+} as const;
+
+const configs = {
+   cloudflare: {
+      media_adapter: "r2"
+   }
+}
+
+export function getAdapterConfig(): typeof default_config {
+   if (adapter) {
+      if (!configs[adapter]) {
+         throw new Error(`Adapter "${adapter}" not found. Available adapters: ${Object.keys(configs).join(", ")}`);
+      }
+
+      return configs[adapter] as typeof default_config;
+   }
+
+   return default_config;
+}

app/e2e/media.e2e-spec.ts

@@ -0,0 +1,55 @@
+// @ts-check
+import { test, expect } from "@playwright/test";
+import { testIds } from "../src/ui/lib/config";
+import type { SchemaResponse } from "../src/modules/server/SystemController";
+import { getAdapterConfig } from "./inc/adapters";
+
+// Annotate entire file as serial.
+test.describe.configure({ mode: "serial" });
+
+const adapterConfig = getAdapterConfig();
+
+test("can enable media", async ({ page }) => {
+   await page.goto("/media/settings");
+
+   // enable
+   const enableToggle = page.locator("css=button#enabled");
+   if ((await enableToggle.getAttribute("aria-checked")) !== "true") {
+      await expect(enableToggle).toBeVisible();
+      await enableToggle.click();
+      await expect(enableToggle).toHaveAttribute("aria-checked", "true");
+
+      // select local
+      const adapterChoice = page.locator(`css=button#adapter-${adapterConfig.media_adapter}`);
+      await expect(adapterChoice).toBeVisible();
+      await adapterChoice.click();
+
+      // save
+      const saveBtn = page.getByRole("button", { name: /Update/i });
+      await expect(saveBtn).toBeVisible();
+
+      // intercept network request, wait for it to finish and get the response
+      const [request] = await Promise.all([
+         page.waitForRequest((request) => request.url().includes("api/system/schema")),
+         saveBtn.click(),
+      ]);
+      const response = await request.response();
+      expect(response?.status(), "fresh config 200").toBe(200);
+      const body = (await response?.json()) as SchemaResponse;
+      expect(body.config.media.enabled, "media is enabled").toBe(true);
+      expect(body.config.media.adapter.type, "correct adapter").toBe(adapterConfig.media_adapter);
+   }
+});
+
+test("can upload a file", async ({ page }) => {
+   await page.goto("/media");
+   // check any text to contain "Upload files"
+   await expect(page.getByText(/Upload files/i)).toBeVisible();
+
+   // upload a file from disk
+   // Start waiting for file chooser before clicking. Note no await.
+   const fileChooserPromise = page.waitForEvent("filechooser");
+   await page.getByText("Upload file").click();
+   const fileChooser = await fileChooserPromise;
+   await fileChooser.setFiles("./e2e/assets/image.jpg");
+});