test(app): file tree spec

1 files changed, 36 insertions, 0 deletions

diff --git a/packages/app/e2e/file-tree.spec.ts b/packages/app/e2e/file-tree.spec.ts
new file mode 100644
index 000000000..12ea7a081
--- /dev/null
+++ b/packages/app/e2e/file-tree.spec.ts
@@ -0,0 +1,36 @@
+import { test, expect } from "./fixtures"
+
+test("file tree can expand folders and open a file", async ({ page, gotoSession }) => {
+  await gotoSession()
+
+  await page.getByRole("button", { name: "Toggle file tree" }).click()
+
+  const treeTabs = page.locator('[data-component="tabs"][data-variant="pill"][data-scope="filetree"]')
+  await expect(treeTabs).toBeVisible()
+
+  await treeTabs.locator('[data-slot="tabs-trigger"]').nth(1).click()
+
+  const node = (name: string) => treeTabs.getByRole("button", { name, exact: true })
+
+  await expect(node("packages")).toBeVisible()
+  await node("packages").click()
+
+  await expect(node("app")).toBeVisible()
+  await node("app").click()
+
+  await expect(node("src")).toBeVisible()
+  await node("src").click()
+
+  await expect(node("components")).toBeVisible()
+  await node("components").click()
+
+  await expect(node("file-tree.tsx")).toBeVisible()
+  await node("file-tree.tsx").click()
+
+  const tab = page.getByRole("tab", { name: "file-tree.tsx" })
+  await expect(tab).toBeVisible()
+  await tab.click()
+
+  const code = page.locator('[data-component="code"]').first()
+  await expect(code.getByText("export default function FileTree")).toBeVisible()
+})