test: add e2e tests for splitter, clipboard and file-upload (#2374)

* test: add clipboard e2e tests

* test: add splitter e2e tests

* test: add file-upload e2e tests

* fix: test wording

Author: jeferson-sb

e2e/clipboard.e2e.ts

@@ -0,0 +1,26 @@
+import { test } from "@playwright/test"
+import { ClipboardModel } from "./models/clipboard.model"
+
+let I: ClipboardModel
+
+test.describe("clipboard", () => {
+  test.beforeEach(async ({ page }) => {
+    I = new ClipboardModel(page)
+    await I.goto()
+  })
+
+  test("should have no accessibility violations", async () => {
+    await I.checkAccessibility()
+  })
+
+  test("should copy content to clipboard", async () => {
+    await I.clickTrigger()
+    await I.seeContent("Copied!")
+    await I.dontSeeContent("Copy")
+  })
+
+  test("should focus on trigger", async () => {
+    await I.focusTrigger()
+    await I.seeTriggerIsFocused()
+  })
+})

e2e/file-upload.e2e.ts

@@ -0,0 +1,60 @@
+import { test, expect } from "@playwright/test"
+import { a11y, part, controls, testid } from "./_utils"
+import path from "node:path"
+
+const root = part("root")
+const trigger = part("trigger")
+const dropzone = part("dropzone")
+
+test.describe("file-upload", () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto("/file-upload")
+  })
+
+  // TBD: fix a11y complaints
+  test.skip("should have no accessibility violations", async ({ page }) => {
+    await a11y(page)
+  })
+
+  test("should be focused when page is tabbed", async ({ page }) => {
+    const dropzone = part("dropzone")
+
+    await page.click("main")
+    await page.keyboard.press("Tab")
+
+    await expect(page.locator(dropzone)).toBeFocused()
+  })
+
+  test("should open file picker on trigger click", async ({ page }) => {
+    const fileChooserPromise = page.waitForEvent("filechooser")
+
+    await page.locator(trigger).click()
+
+    const prom = await fileChooserPromise
+
+    expect(prom).toBeDefined()
+  })
+
+  test("should display chosen file", async ({ page }) => {
+    const fileChooserPromise = page.waitForEvent("filechooser")
+    await page.locator(trigger).click()
+    const fileChooser = await fileChooserPromise
+    await fileChooser.setFiles(path.join(__dirname, "fixtures/text.txt"))
+
+    const item = page.locator(part("item"))
+    const deleteTrigger = page.locator(part("item-delete-trigger"))
+
+    expect(item).toBeVisible()
+    expect(await item.innerText()).toContain("text.txt")
+    expect(deleteTrigger).toBeVisible()
+  })
+
+  test("should have disabled attributes when disabled", async ({ page }) => {
+    await controls(page).bool("disabled")
+    await expect(page.locator(root)).toHaveAttribute("data-disabled", "")
+    await expect(page.locator(dropzone)).toHaveAttribute("data-disabled", "")
+    await expect(page.locator(trigger)).toHaveAttribute("data-disabled", "")
+    await expect(page.locator(trigger)).toBeDisabled()
+    await expect(page.locator(testid("input"))).toBeDisabled()
+  })
+})

e2e/fixtures/text.txt

@@ -0,0 +1 @@
+zag

e2e/models/clipboard.model.ts

@@ -0,0 +1,51 @@
+import { expect, type Page } from "@playwright/test"
+import { a11y, part } from "../_utils"
+import { Model } from "./model"
+
+export class ClipboardModel extends Model {
+  constructor(public page: Page) {
+    super(page)
+  }
+
+  goto() {
+    return this.page.goto("/clipboard")
+  }
+
+  checkAccessibility(selector?: string): Promise<void> {
+    return a11y(this.page, selector)
+  }
+
+  getTrigger() {
+    return this.page.locator(part("trigger"))
+  }
+
+  getContent(text: string) {
+    return this.page.locator(part("indicator")).getByText(text)
+  }
+
+  async focusTrigger() {
+    await this.getTrigger().focus()
+  }
+
+  async clickTrigger() {
+    await this.getTrigger().click()
+  }
+
+  async seeTriggerIsFocused() {
+    await expect(this.getTrigger()).toBeFocused()
+  }
+
+  async seeContent(text: string) {
+    const content = this.getContent(text)
+    const hidden = await content.isHidden()
+
+    expect(hidden).not.toBe(true)
+  }
+
+  async dontSeeContent(text: string) {
+    const content = this.getContent(text)
+    const hidden = await content.isHidden()
+
+    expect(hidden).toBe(true)
+  }
+}

e2e/splitter.e2e.ts

@@ -0,0 +1,49 @@
+import { test, expect } from "@playwright/test"
+import { a11y, controls, testid, part } from "./_utils"
+
+test.describe("splitter", () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto("/splitter")
+  })
+
+  test("should have no accessibility violations", async ({ page }) => {
+    await a11y(page)
+  })
+
+  test("should be focused on next splitter when tabbed", async ({ page }) => {
+    await page.click(part("root"))
+    await page.keyboard.press("Tab")
+
+    expect(page.locator(testid("trigger-b:c"))).toHaveAttribute("data-focus", "")
+  })
+
+  test("should increase panel when arrow right pressed", async ({ page }) => {
+    await page.click("main")
+
+    await page.keyboard.press("Tab")
+    await page.keyboard.press("ArrowRight")
+    await page.keyboard.press("ArrowRight")
+    await page.keyboard.press("ArrowRight")
+
+    expect(page.locator(part("resize-trigger")).nth(1)).toHaveAttribute("aria-valuenow", "36")
+  })
+
+  test("should decrease panel when arrow left pressed", async ({ page }) => {
+    await page.click("main")
+
+    await page.keyboard.press("Tab")
+    await page.keyboard.press("ArrowLeft")
+    await page.keyboard.press("ArrowLeft")
+    await page.keyboard.press("ArrowLeft")
+
+    expect(page.locator(part("resize-trigger")).nth(1)).toHaveAttribute("aria-valuenow", "30")
+  })
+
+  test("should manage splitter panels when vertical orientation", async ({ page }) => {
+    await controls(page).select("orientation", "vertical")
+
+    expect(page.locator(part("root"))).toHaveAttribute("data-orientation", "vertical")
+    expect(page.locator(part("panel")).first()).toHaveAttribute("data-orientation", "vertical")
+    expect(page.locator(part("resize-trigger")).first()).toHaveAttribute("data-orientation", "vertical")
+  })
+})

examples/next-ts/pages/file-upload.tsx

@@ -9,7 +9,7 @@ import { useControls } from "../hooks/use-controls"
 export default function Page() {
   const controls = useControls(fileUploadControls)
 
-  const service = useMachine(fileUpload.machine, { id: useId() })
+  const service = useMachine(fileUpload.machine, { id: useId(), ...controls.context })
 
   const api = fileUpload.connect(service, normalizeProps)
 
@@ -18,7 +18,7 @@ export default function Page() {
       <main className="file-upload">
         <div {...api.getRootProps()}>
           <div {...api.getDropzoneProps()}>
-            <input {...api.getHiddenInputProps()} />
+            <input data-testid="input" {...api.getHiddenInputProps()} />
             Drag your files here
           </div>
 
@@ -41,7 +41,7 @@ export default function Page() {
         </div>
       </main>
 
-      <Toolbar controls={controls.ui} viz>
+      <Toolbar controls={controls.ui}>
         <StateVisualizer state={service} />
       </Toolbar>
     </>

examples/next-ts/pages/splitter.tsx

@@ -12,6 +12,7 @@ export default function Page() {
   const service = useMachine(splitter.machine, {
     id: useId(),
     panels: [{ id: "a" }, { id: "b" }, { id: "c" }],
+    ...controls.context,
   })
 
   const api = splitter.connect(service, normalizeProps)
@@ -24,11 +25,11 @@ export default function Page() {
           <div {...api.getPanelProps({ id: "a" })}>
             <p>Left</p>
           </div>
-          <div {...api.getResizeTriggerProps({ id: "a:b" })} />
+          <div data-testid="trigger-a:b" {...api.getResizeTriggerProps({ id: "a:b" })} />
           <div {...api.getPanelProps({ id: "b" })}>
             <p>Middle</p>
           </div>
-          <div {...api.getResizeTriggerProps({ id: "b:c" })} />
+          <div data-testid="trigger-b:c" {...api.getResizeTriggerProps({ id: "b:c" })} />
           <div {...api.getPanelProps({ id: "c" })}>
             <p>Right</p>
           </div>