From e2d00f6832de03b841b412e1c54d20daba5e54ed Mon Sep 17 00:00:00 2001
From: Andrew Berg <andrew.berg@washpost.com>
Date: Tue, 18 Jun 2024 16:25:48 -0400
Subject: [PATCH] chore: make InputSearchPopover tests pass, add missing props
 to InputSearchRoot prop table

---
 .../input-search/InputSearchPopover.test.tsx  | 41 +++++++++++--------
 .../kit/src/input-search/InputSearchRoot.tsx  | 11 ++++-
 2 files changed, 34 insertions(+), 18 deletions(-)

diff --git a/packages/kit/src/input-search/InputSearchPopover.test.tsx b/packages/kit/src/input-search/InputSearchPopover.test.tsx
index d4f0e6c76..4eebe9f2e 100644
--- a/packages/kit/src/input-search/InputSearchPopover.test.tsx
+++ b/packages/kit/src/input-search/InputSearchPopover.test.tsx
@@ -1,36 +1,43 @@
-import { useContext } from "react";
 import { render, screen } from "@testing-library/react";
+// eslint-disable-next-line import/no-named-as-default
+import userEvent from "@testing-library/user-event";
 import { InputSearchPopover } from "./InputSearchPopover";
-import { InputSearchRoot, InputSearchContext } from "./InputSearchRoot";
+import { InputSearchRoot } from "./InputSearchRoot";
+import { InputSearchInput } from "./InputSearchInput";
 
 describe("InputSearchPopover", () => {
   const customRender = (ui, contextProps) => {
-    const StatePassthrough = ({ children }) => {
-      const { state } = useContext(InputSearchContext);
-      state.open();
-      return children;
-    };
     return render(
-      <InputSearchRoot {...contextProps}>
-        <StatePassthrough>{ui}</StatePassthrough>
+      <InputSearchRoot {...contextProps} openOnFocus>
+        <InputSearchInput id="test" name="test" />
+        {ui}
       </InputSearchRoot>
     );
   };
 
-  test.skip("renders into the document", async () => {
-    customRender(<InputSearchPopover>test</InputSearchPopover>, {});
-    const popover = screen.getByRole("dialog");
-    expect(popover).toBeInTheDocument();
+  test("renders into the document", async () => {
+    const user = userEvent.setup();
+    customRender(<InputSearchPopover />, {});
+    const inputElement = screen.getByRole("combobox");
+    await user.click(inputElement);
+    expect(screen.getByRole("dialog")).toBeInTheDocument();
   });
 
-  test.skip("renders with custom CSS class", () => {
+  test("renders with custom CSS class", async () => {
+    const user = userEvent.setup();
     customRender(<InputSearchPopover css={{ color: "red" }} />, {});
+    const inputElement = screen.getByRole("combobox");
+    await user.click(inputElement);
     expect(screen.getByRole("dialog")).toHaveClass(/wpds-.*-css/);
   });
 
-  test.skip("renders portal false variant", () => {
+  test("renders portal false variant", async () => {
+    const user = userEvent.setup();
     customRender(<InputSearchPopover portal={false} />, {});
-
-    expect(screen.getByTestId("popover-container")).toBeInTheDocument();
+    const inputElement = screen.getByRole("combobox");
+    await user.click(inputElement);
+    expect(screen.getByRole("dialog")).not.toHaveClass(
+      /wpds-.*-density-default/
+    );
   });
 });
diff --git a/packages/kit/src/input-search/InputSearchRoot.tsx b/packages/kit/src/input-search/InputSearchRoot.tsx
index 7d25e7515..d98e62624 100644
--- a/packages/kit/src/input-search/InputSearchRoot.tsx
+++ b/packages/kit/src/input-search/InputSearchRoot.tsx
@@ -4,6 +4,7 @@ import { useComboBoxState } from "react-stately";
 import { useComboBox } from "react-aria";
 import { styled, theme } from "../theme";
 
+import type * as WPDS from "../theme";
 import type { ComboBoxState } from "react-stately";
 import type { AriaListBoxOptions } from "react-aria";
 import type { CollectionChildren } from "@react-types/shared";
@@ -49,13 +50,21 @@ const StyledRoot = styled("div", {
 });
 
 export type InputSearchRootProps = {
+  /** Defines a string value that labels the current element.  */
+  "aria-label": string;
+  /** Identifies the element (or elements) that labels the current element. */
+  "aria-labelledby": string;
+  /** InputSearch.Root expects to receive InputSearch.Input and InputSearch.Popover as children.*/
+  children?: React.ReactNode;
+  /** Override CSS */
+  css?: WPDS.CSS;
   /** Whether the input field should be disabled or not */
   disabled?: boolean;
   /** If true, the popover opens when focus is on the text box. */
   openOnFocus?: boolean;
   /** Called with the selection value when the user makes a selection from the list. */
   onSelect?: (value: string) => void;
-} & React.ComponentPropsWithoutRef<typeof StyledRoot>;
+} & React.ComponentPropsWithoutRef<"div">;
 
 export const InputSearchRoot = ({
   children,