chore(e2e): add test for dragging tabs

e2e/layout/tab_bar.spec.ts

@@ -0,0 +1,29 @@
+import { test, expect } from "@playwright/test";
+import App from "../support/app";
+
+test("Can drag tabs around", async ({ page }) => {
+    const app = new App(page);
+    await app.goto();
+
+    // [1]: Trilium Integration Test DB note
+    const noteTitle = "Trilium Integration Test DB";
+    await app.closeAllTabs();
+    await app.clickNoteOnNoteTreeByTitle(noteTitle);
+    await expect(app.getActiveTab()).toContainText(noteTitle);
+
+    // [1] [2] [3]
+    await app.addNewTab();
+    await app.addNewTab();
+
+    let tab = app.getTab(0);
+
+    // Drag the first tab at the end
+    await tab.dragTo(app.getTab(2), { targetPosition: { x: 50, y: 0 }});
+
+    tab = app.getTab(2);
+    await expect(tab).toContainText(noteTitle);
+
+    // Drag the tab to the left
+    await tab.dragTo(app.getTab(0), { targetPosition: { x: 50, y: 0 }});
+    await expect(app.getTab(0)).toContainText(noteTitle);
+});

e2e/support/app.ts

@@ -0,0 +1,45 @@
+import { Locator, Page, expect } from "@playwright/test";
+
+export default class App {
+    readonly page: Page;
+
+    readonly tabBar: Locator;
+    readonly noteTree: Locator;
+
+    constructor(page: Page) {
+        this.page = page;
+        this.tabBar = page.locator(".tab-row-widget-container");
+        this.noteTree = page.locator(".tree-wrapper");
+    }
+
+    async goto() {
+        await this.page.goto("/", { waitUntil: "networkidle" });
+
+        // Wait for the page to load.
+        await expect(this.page.locator(".tree"))
+            .toContainText("Trilium Integration Test");
+    }
+
+    getTab(tabIndex: number) {
+        return this.tabBar.locator(".note-tab-wrapper").nth(tabIndex);
+    }
+
+    getActiveTab() {
+        return this.tabBar.locator(".note-tab[active]");
+    }
+
+    async closeAllTabs() {
+        await this.getTab(0).click({ button: "right" });
+        await this.page.waitForTimeout(500); // TODO: context menu won't dismiss otherwise
+        await this.page.getByText("Close all tabs").click({ force: true });
+    }
+
+    async addNewTab() {
+        await this.page.locator('[data-trigger-command="openNewTab"]').click();
+    }
+
+    async clickNoteOnNoteTreeByTitle(title: string) {
+        this.noteTree.getByText(title).click();
+    }
+
+}