famapp/tests/e2e/quick-add.spec.ts

import { expect, test, type Page } from "@playwright/test";

async function ensureSignedIn(page: Page) {
  await page.goto("/");
  const devLogin = page.getByRole("button", { name: "Dev login" });
  if (await devLogin.isVisible().catch(() => false)) {
    await devLogin.click();
    await page.waitForURL((url) => url.pathname === "/");
  }
  await expect(page.getByRole("heading", { name: "Dashboard" })).toBeVisible();
}

async function openFabAction(page: Page, actionLabel: string) {
  await page.getByRole("button", { name: "Quick add" }).click();
  await expect(page.getByRole("dialog", { name: "Quick add" })).toBeVisible();
  await page.getByRole("button", { name: actionLabel, exact: true }).click();
  await expect(page).toHaveURL("/");
}

type FabQuickAddCase = {
  action: string;
  dialog: string;
  assertCreateControls: (page: Page) => Promise<void>;
};

const fabQuickAddCases: FabQuickAddCase[] = [
  {
    action: "New event",
    dialog: "New event",
    assertCreateControls: async (page) => {
      await expect(page.getByLabel("Title")).toBeVisible();
      await expect(page.getByRole("button", { name: "Save event" })).toBeVisible();
    },
  },
  {
    action: "New calendar",
    dialog: "New calendar",
    assertCreateControls: async (page) => {
      await expect(page.getByLabel("Name")).toBeVisible();
      await expect(page.getByRole("button", { name: "Create calendar" })).toBeVisible();
    },
  },
  {
    action: "Add to shopping",
    dialog: "Add to shopping",
    assertCreateControls: async (page) => {
      await expect(page.getByLabel("Item")).toBeVisible();
      await expect(page.getByRole("button", { name: "Add" })).toBeVisible();
    },
  },
  {
    action: "Add to tasks",
    dialog: "Add to tasks",
    assertCreateControls: async (page) => {
      await expect(page.getByLabel("Task")).toBeVisible();
      await expect(page.getByRole("button", { name: "Add" })).toBeVisible();
    },
  },
  {
    action: "New list",
    dialog: "New list",
    assertCreateControls: async (page) => {
      await expect(page.getByLabel("Type")).toBeVisible();
      await expect(page.getByLabel("Name")).toBeVisible();
      await expect(page.getByRole("button", { name: "Create list" })).toBeVisible();
    },
  },
  {
    action: "New note",
    dialog: "New note",
    assertCreateControls: async (page) => {
      await expect(page.getByLabel("Title")).toBeVisible();
      await expect(page.getByLabel("Body")).toBeVisible();
      await expect(page.getByRole("button", { name: "Save note" })).toBeVisible();
    },
  },
  {
    action: "Add plant",
    dialog: "Add plant",
    assertCreateControls: async (page) => {
      await expect(page.getByLabel("Name")).toBeVisible();
      await expect(page.getByRole("button", { name: "Create" })).toBeVisible();
    },
  },
  {
    action: "Add container",
    dialog: "Add container",
    assertCreateControls: async (page) => {
      await expect(page.getByLabel("Name")).toBeVisible();
      await expect(page.getByLabel("Type")).toBeVisible();
      await expect(page.getByRole("button", { name: "Create" })).toBeVisible();
    },
  },
  {
    action: "Log plant care",
    dialog: "Log plant care",
    assertCreateControls: async (page) => {
      const plantField = page.getByLabel("Plant");
      const noPlants = page.getByText("No plants yet");
      await expect(plantField.or(noPlants)).toBeVisible();
      if (await plantField.isVisible()) {
        await expect(page.getByRole("button", { name: "Log care" })).toBeVisible();
      }
    },
  },
  {
    action: "Record bang",
    dialog: "Record a bang",
    assertCreateControls: async (page) => {
      await expect(page.getByLabel("Date")).toBeVisible();
      await expect(page.getByRole("button", { name: "Record it" })).toBeVisible();
    },
  },
];

test.describe("quick-add create UI", () => {
  for (const { action, dialog, assertCreateControls } of fabQuickAddCases) {
    test(`FAB opens ${action} create dialog on dashboard`, async ({ page }) => {
      await ensureSignedIn(page);
      await openFabAction(page, action);
      await expect(page.getByRole("dialog", { name: dialog })).toBeVisible();
      await assertCreateControls(page);
    });
  }

  test("command palette opens new event dialog on dashboard", async ({ page }) => {
    await ensureSignedIn(page);

    const isMac = await page.evaluate(() => /Mac|iPhone|iPad|iPod/.test(navigator.platform));
    await page.keyboard.press(isMac ? "Meta+k" : "Control+k");

    await expect(page.getByRole("dialog", { name: "Command palette" })).toBeVisible();
    await page.getByRole("option", { name: /New event/i }).click();

    await expect(page).toHaveURL("/");
    await expect(page.getByRole("dialog", { name: "New event" })).toBeVisible();
    await expect(page.getByLabel("Title")).toBeVisible();
    await expect(page.getByRole("button", { name: "Save event" })).toBeVisible();
  });
});