t3code/apps/web/src/contextMenuFallback.keyboard.browser.test.ts at main · pingdotgg/t3code · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
import { expect, it } from "vite-plus/test";
import {
  dismissContextMenu,
  isContextMenuOpen,
  showContextMenuFallback,
} from "./contextMenuFallback";

const items = [
  { id: "heading", label: "Thread actions", header: true },
  { id: "disabled", label: "Unavailable", disabled: true },
  { id: "rename", label: "Rename" },
  { id: "pin", label: "Pinned", checked: true, separatorBefore: true },
  {
    id: "copy",
    label: "Copy",
    children: [
      { id: "copy-unavailable", label: "Unavailable copy", disabled: true },
      { id: "path", label: "Path" },
      { id: "branch", label: "Branch" },
    ],
  },
];

function setup() {
  const origin = document.createElement("button");
  origin.textContent = "Selected thread";
  document.body.append(origin);
  origin.focus();
  return {
    origin,
    [Symbol.dispose]() {
      dismissContextMenu();
      origin.remove();
    },
  };
}

function press(key: string, shiftKey = false) {
  const event = new KeyboardEvent("keydown", { key, shiftKey, bubbles: true, cancelable: true });
  document.activeElement!.dispatchEvent(event);
  return event;
}

const label = () => document.activeElement?.textContent;

it("starts a keyboard-opened menu on its first action and wraps through enabled actions", () => {
  using _fixture = setup();
  void showContextMenuFallback(items);
  expect(label()).toBe("Rename");
  press("ArrowUp");
  expect(label()).toBe("Copy");
  press("ArrowDown");
  expect(label()).toBe("Rename");
  press("End");
  expect(label()).toBe("Copy");
  press("Home");
  expect(label()).toBe("Rename");
});

it("opens and cancels one submenu level at a time, then returns to the thread", async () => {
  using fixture = setup();
  const result = showContextMenuFallback(items);
  press("End");
  const parent = document.activeElement;
  press("ArrowRight");
  expect(label()).toBe("Path");
  press("ArrowLeft");
  expect(document.activeElement).toBe(parent);
  press("Enter");
  expect(label()).toBe("Path");
  press("Escape");
  expect(document.activeElement).toBe(parent);
  expect(isContextMenuOpen()).toBe(true);
  press("Escape");
  expect(document.activeElement).toBe(fixture.origin);
  await expect(result).resolves.toBeNull();
});

it("activates the focused action with Space or Enter", async () => {
  using _fixture = setup();
  const first = showContextMenuFallback(items);
  press(" ");
  await expect(first).resolves.toBe("rename");
  const second = showContextMenuFallback(items);
  press("Enter");
  await expect(second).resolves.toBe("rename");
});

it("closes on Tab and returns focus to the opener so Tab continues from there", async () => {
  using fixture = setup();
  const result = showContextMenuFallback(items);
  expect(press("Tab").defaultPrevented).toBe(false);
  await expect(result).resolves.toBeNull();
  expect(document.activeElement).toBe(fixture.origin);
});

it("closes without taking focus back when focus moves elsewhere", async () => {
  using _fixture = setup();
  const result = showContextMenuFallback(items);
  const destination = document.createElement("button");
  document.body.append(destination);
  using _destination = { [Symbol.dispose]: () => destination.remove() };
  destination.focus();
  await expect(result).resolves.toBeNull();
  expect(document.activeElement).toBe(destination);
});