@@ -141,31 +141,27 @@ describe("command palette", () => {
141141await renderPalette({ query: "overview", activeIndex: 0 });
142142143143const dialog = container.querySelector<HTMLDialogElement>("dialog.cmd-palette-overlay");
144-expect(dialog).not.toBeNull();
145-expect(dialog!.open).toBe(true);
146-expect(dialog!.hasAttribute("role")).toBe(false);
147-expect(dialog!.hasAttribute("aria-modal")).toBe(false);
148-expect(dialog!.getAttribute("aria-labelledby")).toBe("cmd-palette-label");
144+expect(dialog?.open).toBe(true);
145+expect(dialog?.hasAttribute("role")).toBe(false);
146+expect(dialog?.hasAttribute("aria-modal")).toBe(false);
147+expect(dialog?.getAttribute("aria-labelledby")).toBe("cmd-palette-label");
149148150149const label = container.querySelector<HTMLLabelElement>("#cmd-palette-label");
151150const input = container.querySelector<HTMLInputElement>("#cmd-palette-input");
152151const listbox = container.querySelector<HTMLElement>("#cmd-palette-listbox");
153152expect(label?.textContent).toBe("Type a command…");
154153expect(label?.getAttribute("for")).toBe("cmd-palette-input");
155-expect(input).not.toBeNull();
156-expect(input!.getAttribute("role")).toBe("combobox");
157-expect(input!.getAttribute("aria-autocomplete")).toBe("list");
158-expect(input!.getAttribute("aria-expanded")).toBe("true");
159-expect(input!.getAttribute("aria-controls")).toBe("cmd-palette-listbox");
160-expect(input!.getAttribute("aria-activedescendant")).toBe("cmd-palette-option-nav-overview");
154+expect(input?.getAttribute("role")).toBe("combobox");
155+expect(input?.getAttribute("aria-autocomplete")).toBe("list");
156+expect(input?.getAttribute("aria-expanded")).toBe("true");
157+expect(input?.getAttribute("aria-controls")).toBe("cmd-palette-listbox");
158+expect(input?.getAttribute("aria-activedescendant")).toBe("cmd-palette-option-nav-overview");
161159expect(document.activeElement).toBe(input);
162160163-expect(listbox).not.toBeNull();
164-expect(listbox!.getAttribute("role")).toBe("listbox");
165-const option = listbox!.querySelector<HTMLElement>("#cmd-palette-option-nav-overview");
166-expect(option).not.toBeNull();
167-expect(option!.getAttribute("role")).toBe("option");
168-expect(option!.getAttribute("aria-selected")).toBe("true");
161+expect(listbox?.getAttribute("role")).toBe("listbox");
162+const option = listbox?.querySelector<HTMLElement>("#cmd-palette-option-nav-overview");
163+expect(option?.getAttribute("role")).toBe("option");
164+expect(option?.getAttribute("aria-selected")).toBe("true");
169165});
170166171167it("traps Tab on the combobox and restores focus on Escape", async () => {
@@ -177,15 +173,14 @@ describe("command palette", () => {
177173178174await renderPalette({ onToggle });
179175const input = container.querySelector<HTMLInputElement>("#cmd-palette-input");
180-expect(input).not.toBeNull();
181176expect(document.activeElement).toBe(input);
182177183178const tab = new KeyboardEvent("keydown", {
184179key: "Tab",
185180bubbles: true,
186181cancelable: true,
187182});
188-input!.dispatchEvent(tab);
183+input?.dispatchEvent(tab);
189184expect(tab.defaultPrevented).toBe(true);
190185expect(document.activeElement).toBe(input);
191186@@ -194,7 +189,7 @@ describe("command palette", () => {
194189bubbles: true,
195190cancelable: true,
196191});
197-input!.dispatchEvent(escape);
192+input?.dispatchEvent(escape);
198193expect(escape.defaultPrevented).toBe(true);
199194expect(onToggle).toHaveBeenCalledTimes(1);
200195@@ -208,17 +203,17 @@ describe("command palette", () => {
208203await renderPalette({ onToggle });
209204const dialog = container.querySelector<HTMLDialogElement>("dialog.cmd-palette-overlay");
210205const input = container.querySelector<HTMLInputElement>("#cmd-palette-input");
211-expect(dialog).not.toBeNull();
212-expect(input).not.toBeNull();
206+expect(dialog?.open).toBe(true);
207+expect(input?.id).toBe("cmd-palette-input");
213208214-input!.dispatchEvent(
209+input?.dispatchEvent(
215210new KeyboardEvent("keydown", {
216211key: "Escape",
217212bubbles: true,
218213cancelable: true,
219214}),
220215);
221-dialog!.dispatchEvent(new Event("cancel", { cancelable: true }));
216+dialog?.dispatchEvent(new Event("cancel", { cancelable: true }));
222217223218expect(onToggle).toHaveBeenCalledTimes(1);
224219});
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。