chore: Adds more test coverage

Author: Katie George

src/internal/events/__tests__/events.test.tsx

@@ -0,0 +1,110 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { describe, expect, it, vi } from "vitest";
+
+import { CustomEventStub, fireCancelableEvent } from "..";
+
+describe("CustomEventStub", () => {
+  it("should initialize with default values", () => {
+    const event = new CustomEventStub();
+
+    expect(event.defaultPrevented).toBe(false);
+    expect(event.cancelBubble).toBe(false);
+    expect(event.cancelable).toBe(false);
+    expect(event.detail).toBeNull();
+  });
+
+  it("should initialize with provided values", () => {
+    const detail = { key: "value" };
+    const event = new CustomEventStub(true, detail);
+
+    expect(event.cancelable).toBe(true);
+    expect(event.detail).toBe(detail);
+  });
+
+  it("should set defaultPrevented to true when preventDefault is called", () => {
+    const event = new CustomEventStub();
+    event.preventDefault();
+
+    expect(event.defaultPrevented).toBe(true);
+  });
+
+  it("should set cancelBubble to true when stopPropagation is called", () => {
+    const event = new CustomEventStub();
+    event.stopPropagation();
+
+    expect(event.cancelBubble).toBe(true);
+  });
+
+  it("should work with generic detail type", () => {
+    const event = new CustomEventStub<string>(false, "Test detail");
+
+    expect(event.detail).toBe("Test detail");
+    expect(typeof event.detail).toBe("string");
+  });
+});
+
+describe("fireCancelableEvent", () => {
+  it("should call the handler with a cancelable event and return the result", () => {
+    const handler = vi.fn();
+    const detail = { key: "value" };
+
+    const result = fireCancelableEvent(handler, detail);
+
+    expect(handler).toHaveBeenCalledTimes(1);
+    const event = handler.mock.calls[0][0];
+    expect(event.cancelable).toBe(true);
+    expect(event.detail).toEqual(detail);
+    expect(result).toBe(false);
+  });
+
+  it("should prevent the default action if preventDefault is called in the handler", () => {
+    const handler = vi.fn((event) => {
+      event.preventDefault();
+    });
+    const detail = { key: "value" };
+
+    const result = fireCancelableEvent(handler, detail);
+
+    expect(handler).toHaveBeenCalledTimes(1);
+    const event = handler.mock.calls[0][0];
+    expect(event.defaultPrevented).toBe(true);
+    expect(result).toBe(true);
+  });
+
+  it("should stop propagation if stopPropagation is called in the handler", () => {
+    const handler = vi.fn((event) => {
+      event.stopPropagation();
+    });
+    const detail = { key: "value" };
+    const mockSourceEvent = { stopPropagation: vi.fn() };
+
+    const result = fireCancelableEvent(handler, detail, mockSourceEvent as unknown as Event);
+
+    expect(handler).toHaveBeenCalledTimes(1);
+    const event = handler.mock.calls[0][0];
+    expect(event.cancelBubble).toBe(true);
+    expect(mockSourceEvent.stopPropagation).toHaveBeenCalledTimes(1);
+    expect(result).toBe(false);
+  });
+
+  it("should not call preventDefault or stopPropagation on sourceEvent if the event handler does not trigger them", () => {
+    const handler = vi.fn();
+    const detail = { key: "value" };
+    const mockSourceEvent = {
+      preventDefault: vi.fn(),
+      stopPropagation: vi.fn(),
+    };
+
+    fireCancelableEvent(handler, detail, mockSourceEvent as unknown as Event);
+
+    expect(mockSourceEvent.preventDefault).not.toHaveBeenCalled();
+    expect(mockSourceEvent.stopPropagation).not.toHaveBeenCalled();
+  });
+
+  it("should return false if no handler is provided", () => {
+    const result = fireCancelableEvent(undefined, { key: "value" });
+
+    expect(result).toBe(false);
+  });
+});

src/internal/events/index.ts

@@ -10,7 +10,7 @@ export interface ClickDetail {
   metaKey: boolean;
 }
 
-class CustomEventStub<T> {
+export class CustomEventStub<T> {
   defaultPrevented = false;
   cancelBubble = false;
   constructor(

src/support-prompt-group/__tests__/focus-helpers.test.tsx

@@ -0,0 +1,75 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { describe, expect, test, vi } from "vitest";
+
+import { getNextFocusTarget, onUnregisterActive } from "../../../lib/components/support-prompt-group/internal.js";
+
+describe("getNextFocusTarget", () => {
+  test("should return null if containerObjectRef.current is null", () => {
+    const containerObjectRef = { current: null }; // Simulate null container
+    const focusedIdRef = { current: null }; // Simulate no focused item
+
+    const result = getNextFocusTarget(containerObjectRef, focusedIdRef);
+
+    expect(result).toBeNull();
+  });
+});
+
+describe("onUnregisterActive", () => {
+  test("should call target.focus() when target exists and has a different dataset.itemid", () => {
+    const mockFocus = vi.fn();
+    const mockTarget = document.createElement("button");
+    mockTarget.dataset.itemid = "different-id";
+    mockTarget.focus = mockFocus;
+
+    const mockNavigationAPI = {
+      current: {
+        getFocusTarget: vi.fn(() => mockTarget),
+      },
+    };
+
+    const focusableElement = document.createElement("div");
+    focusableElement.dataset.itemid = "current-id";
+
+    onUnregisterActive(focusableElement, mockNavigationAPI);
+
+    expect(mockNavigationAPI.current?.getFocusTarget).toHaveBeenCalled();
+    expect(mockFocus).toHaveBeenCalledTimes(1);
+  });
+
+  test("should not call target.focus() when target.dataset.itemid matches focusableElement.dataset.itemid", () => {
+    const mockFocus = vi.fn();
+    const mockTarget = document.createElement("button");
+    mockTarget.dataset.itemid = "same-id";
+    mockTarget.focus = mockFocus;
+
+    const mockNavigationAPI = {
+      current: {
+        getFocusTarget: vi.fn(() => mockTarget),
+      },
+    };
+
+    const focusableElement = document.createElement("div");
+    focusableElement.dataset.itemid = "same-id";
+
+    onUnregisterActive(focusableElement, mockNavigationAPI);
+
+    expect(mockNavigationAPI.current?.getFocusTarget).toHaveBeenCalled();
+    expect(mockFocus).not.toHaveBeenCalled();
+  });
+
+  test("should not call target.focus() when getFocusTarget returns null", () => {
+    const mockNavigationAPI = {
+      current: {
+        getFocusTarget: vi.fn(() => null),
+      },
+    };
+
+    const focusableElement = document.createElement("div");
+    focusableElement.dataset.itemid = "current-id";
+
+    onUnregisterActive(focusableElement, mockNavigationAPI);
+
+    expect(mockNavigationAPI.current?.getFocusTarget).toHaveBeenCalled();
+  });
+});

src/support-prompt-group/__tests__/support-prompt-group.test.tsx

@@ -151,12 +151,13 @@ describe("Support prompt group", () => {
       expect(document.body).toHaveFocus();
     });
 
-    test("Keyboard doesn't move focus", () => {
-      const wrapper = renderSupportPromptGroup({}, ref);
+    test("Null container ref doesn't move focus", () => {
+      const wrapper = renderSupportPromptGroup({});
+      const ref: { current: SupportPromptGroupProps.Ref | null } = { current: null };
 
-      document.body.focus();
-      fireEvent.keyDown(document.body, { keyCode: KeyCode.down });
-      expect(wrapper.findItemById("item-1")!.getElement()).not.toHaveFocus();
+      ref.current?.focus("item-1");
+
+      fireEvent.keyDown(wrapper.getElement(), { keyCode: KeyCode.down });
       expect(document.body).toHaveFocus();
     });
   });

src/support-prompt-group/focus-helpers.tsx

@@ -0,0 +1,27 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import styles from "./styles.css.js";
+
+export function getNextFocusTarget(
+  containerObjectRef: React.RefObject<HTMLDivElement>,
+  focusedIdRef: React.MutableRefObject<string | null>,
+): null | HTMLElement {
+  if (containerObjectRef.current) {
+    const buttons: HTMLButtonElement[] = Array.from(
+      containerObjectRef?.current.querySelectorAll(`.${styles["support-prompt"]}`),
+    );
+    return buttons.find((button) => button.dataset.itemid === focusedIdRef?.current) ?? buttons[0] ?? null;
+  }
+  return null;
+}
+
+export function onUnregisterActive(
+  focusableElement: HTMLElement,
+  navigationAPI: React.RefObject<{ getFocusTarget: () => HTMLElement | null }>,
+) {
+  const target = navigationAPI.current?.getFocusTarget();
+
+  if (target && target.dataset.itemid !== focusableElement.dataset.itemid) {
+    target.focus();
+  }
+}

src/support-prompt-group/internal.tsx

@@ -17,6 +17,7 @@ import { InternalBaseComponentProps } from "../internal/base-component/use-base-
 import { fireCancelableEvent } from "../internal/events";
 import { SingleTabStopNavigationProvider } from "../internal/single-tab-stop";
 import { useMergeRefs } from "../internal/utils/use-merge-refs";
+import { getNextFocusTarget, onUnregisterActive } from "./focus-helpers";
 import { SupportPromptGroupProps } from "./interfaces";
 import { Prompt } from "./prompt";
 
@@ -53,28 +54,6 @@ export const InternalSupportPromptGroup = forwardRef(
       fireCancelableEvent(onItemClick, { id, altKey, button, ctrlKey, metaKey, shiftKey }, event);
     };
 
-    function getNextFocusTarget(): null | HTMLElement {
-      if (containerObjectRef.current) {
-        const buttons: HTMLButtonElement[] = Array.from(
-          containerObjectRef.current.querySelectorAll(`.${styles["support-prompt"]}`),
-        );
-        const activeButtons = buttons.filter((button) => !button.disabled);
-        return (
-          activeButtons.find((button) => button.dataset.itemid === focusedIdRef.current) ?? activeButtons[0] ?? null
-        );
-      }
-      return null;
-    }
-
-    function onUnregisterActive(focusableElement: HTMLElement) {
-      // Only refocus when the node is actually removed (no such ID anymore).
-      const target = navigationAPI.current?.getFocusTarget();
-
-      if (target && target.dataset.itemid !== focusableElement.dataset.itemid) {
-        target.focus();
-      }
-    }
-
     useEffect(() => {
       navigationAPI.current?.updateFocusTarget();
     });
@@ -142,15 +121,7 @@ export const InternalSupportPromptGroup = forwardRef(
         return navigationAPI.current?.isRegistered(element) ?? false;
       }
 
-      function isElementDisabled(element: HTMLElement) {
-        if (element instanceof HTMLButtonElement) {
-          return element.disabled;
-        }
-
-        return false;
-      }
-
-      return getAllFocusables(target).filter((el) => isElementRegistered(el) && !isElementDisabled(el));
+      return getAllFocusables(target).filter((el) => isElementRegistered(el));
     }
 
     if (!items || items.length === 0) {
@@ -173,8 +144,8 @@ export const InternalSupportPromptGroup = forwardRef(
         <SingleTabStopNavigationProvider
           ref={navigationAPI}
           navigationActive={true}
-          getNextFocusTarget={getNextFocusTarget}
-          onUnregisterActive={onUnregisterActive}
+          getNextFocusTarget={() => getNextFocusTarget(containerObjectRef, focusedIdRef)}
+          onUnregisterActive={(element: HTMLElement) => onUnregisterActive(element, navigationAPI)}
         >
           {items.map((item, index) => {
             return (