1
import type { Locator } from "@playwright/test";
2
import { test, expect } from "../fixtures/bland-test";
3
 
4
async function getSearchSelection(input: Locator) {
5
  return await input.evaluate((element) => {
6
    if (!(element instanceof HTMLInputElement)) {
7
      return null;
8
    }
9
 
10
    return {
11
      end: element.selectionEnd,
12
      start: element.selectionStart,
13
    };
14
  });
15
}
16
 
17
test.describe("emoji picker", () => {
18
  test("keeps native caret movement in search while still allowing keyboard selection", async ({
19
    authenticatedPage: { page },
20
    e2eWorkspace,
21
  }) => {
22
    await page.goto(`/${e2eWorkspace.workspaceSlug}/settings`);
23
    await expect(page.getByRole("heading", { name: "Workspace Settings" })).toBeVisible({ timeout: 15_000 });
24
 
25
    await page
26
      .getByRole("button", { name: /Add icon|Change icon/ })
27
      .first()
28
      .click();
29
 
30
    const search = page.locator(".bland-emoji-picker-search");
31
    await expect(search).toBeVisible();
32
    await search.fill("orca");
33
 
34
    expect(await getSearchSelection(search)).toEqual({ start: 4, end: 4 });
35
 
36
    await page.keyboard.press("Home");
37
    expect(await getSearchSelection(search)).toEqual({ start: 0, end: 0 });
38
 
39
    await page.keyboard.press("End");
40
    expect(await getSearchSelection(search)).toEqual({ start: 4, end: 4 });
41
 
42
    await page.keyboard.press("ArrowLeft");
43
    expect(await getSearchSelection(search)).toEqual({ start: 3, end: 3 });
44
 
45
    await page.keyboard.press("End");
46
    await page.keyboard.press("ArrowDown");
47
    await page.keyboard.press("Enter");
48
 
49
    await expect(page.locator(".bland-emoji-picker")).toHaveCount(0);
50
    await expect(page.getByRole("img", { name: "🫍" })).toBeVisible();
51
  });
52
});