Wiki/e2e/tests/database-view-insert.spec.ts

/**
 * Scenario: database-view-insert
 *
 * Creates a new DocAdenice page, uses the /database slash command to insert
 * a database-view Tiptap node, selects the E2E table + grid view, and verifies
 * the rendered table shows the pre-seeded rows.
 *
 * Flow:
 * 1. Navigate to a space.
 * 2. Create a new page.
 * 3. In the editor, type "/" to open the slash menu.
 * 4. Search for "database" and click the item.
 * 5. In the InsertDatabaseModal: select "E2E Table".
 * 6. Select "E2E Grid" view.
 * 7. Confirm insertion.
 * 8. Verify the TableRenderer is visible (data-testid="table-renderer").
 * 9. Verify at least one row with known content ("Task Alpha") is displayed.
 */

import { test, expect } from "@playwright/test";
import * as fs from "fs";
import * as path from "path";
import type { BaserowSeed } from "../fixtures/baserow";

const BASE_URL = process.env.E2E_DOCMOST_URL ?? "http://localhost:5173";
const SEED_FILE = path.resolve(__dirname, "../.auth/baserow-seed.json");

test.describe("database-view insert", () => {
  let seed: BaserowSeed;

  test.beforeAll(() => {
    if (!fs.existsSync(SEED_FILE)) {
      throw new Error(
        `Seed file not found at ${SEED_FILE}. Run global.setup.ts first.`,
      );
    }
    seed = JSON.parse(fs.readFileSync(SEED_FILE, "utf-8")) as BaserowSeed;
  });

  test("slash /database inserts table renderer and shows rows", async ({ page }) => {
    // Navigate to the app.
    await page.goto(BASE_URL);

    // Wait for sidebar to be visible — app is bootstrapped.
    await page.waitForSelector(
      "[data-testid='sidebar'], [class*='sidebar'], nav",
      { timeout: 20_000 },
    );

    // Create a new page via the "+ New page" button or keyboard shortcut.
    // DocAdenice/Docmost UI: look for the new page button in the sidebar.
    const newPageBtn = page
      .getByRole("button", { name: /new page|create page|\+/i })
      .or(page.getByTestId("new-page-btn"))
      .first();

    await newPageBtn.click();

    // Wait for the editor to be ready.
    const editor = page.locator(
      "[data-testid='page-editor'], .ProseMirror, [contenteditable='true']",
    );
    await editor.waitFor({ state: "visible", timeout: 15_000 });

    // Set a page title.
    const titleInput = page
      .getByPlaceholder(/untitled|title/i)
      .or(page.getByTestId("page-title-input"))
      .first();

    if (await titleInput.isVisible()) {
      await titleInput.fill("E2E Database View Test");
      await titleInput.press("Enter");
    }

    // Click in the editor body and type "/" to open the slash menu.
    await editor.click();
    await page.keyboard.type("/database");

    // Wait for the slash command dropdown.
    const slashItem = page
      .getByRole("option", { name: /database|baserow/i })
      .or(page.getByTestId("slash-item-database"))
      .first();

    await slashItem.waitFor({ state: "visible", timeout: 10_000 });
    await slashItem.click();

    // The InsertDatabaseModal should appear.
    const modal = page
      .getByRole("dialog")
      .or(page.getByTestId("insert-database-modal"))
      .first();

    await modal.waitFor({ state: "visible", timeout: 10_000 });

    // Step 1: select the E2E Table.
    const tableItem = modal
      .getByText("E2E Table")
      .or(modal.getByTestId(`table-item-${seed.tableId}`))
      .first();

    await tableItem.waitFor({ state: "visible", timeout: 10_000 });
    await tableItem.click();

    // Step 2: select the E2E Grid view.
    const viewItem = modal
      .getByText("E2E Grid")
      .or(modal.getByTestId(`view-item-${seed.gridViewId}`))
      .first();

    await viewItem.waitFor({ state: "visible", timeout: 10_000 });
    await viewItem.click();

    // Confirm insertion.
    const confirmBtn = modal
      .getByRole("button", { name: /insert|confirm|add/i })
      .first();

    await confirmBtn.click();

    // Wait for the modal to close.
    await modal.waitFor({ state: "hidden", timeout: 10_000 });

    // The table renderer should now be visible in the editor.
    const tableRenderer = page
      .getByTestId("table-renderer")
      .or(page.locator("table.acadenice-table, [data-node-type='database-view'] table"))
      .first();

    await tableRenderer.waitFor({ state: "visible", timeout: 20_000 });

    // Verify a pre-seeded row is visible.
    await expect(page.getByText("Task Alpha")).toBeVisible({ timeout: 15_000 });
  });
});