Fix tests.

components/Search/GenerativeAIToggle.test.tsx

@@ -44,11 +44,7 @@ describe("GenerativeAIToggle", () => {
 
  it("renders the generative AI toggle UI and toggles state for a logged in user", async () => {
  const user = userEvent.setup();
- render(
- withUserProvider(
- withSearchProvider(<GenerativeAIToggle isSearchActive={true} />)
- )
- );
+ render(withUserProvider(withSearchProvider(<GenerativeAIToggle />)));
 
  const label = screen.getByLabelText("Use Generative AI");
  const checkbox = screen.getByRole("checkbox");
@@ -61,7 +57,7 @@ describe("GenerativeAIToggle", () => {
  });
 
  it("renders the generative AI tooltip", () => {
- render(withSearchProvider(<GenerativeAIToggle isSearchActive={true} />));
+ render(withSearchProvider(<GenerativeAIToggle />));
  // Target the svg icon itself
  const tooltip = screen.getByText("Information Circle");
 
@@ -79,7 +75,7 @@ describe("GenerativeAIToggle", () => {
 
  render(
  withUserProvider(
- withSearchProvider(<GenerativeAIToggle isSearchActive={true} />),
+ withSearchProvider(<GenerativeAIToggle />),
  nonLoggedInUser
  )
  );
@@ -103,10 +99,7 @@ describe("GenerativeAIToggle", () => {
  mockRouter.setCurrentUrl("/search?ai=true");
  render(
  withUserProvider(
- withSearchProvider(
- <GenerativeAIToggle isSearchActive={true} />,
- activeSearchState
- )
+ withSearchProvider(<GenerativeAIToggle />, activeSearchState)
  )
  );
 
@@ -121,10 +114,7 @@ describe("GenerativeAIToggle", () => {
 
  render(
  withUserProvider(
- withSearchProvider(
- <GenerativeAIToggle isSearchActive={false} />,
- defaultSearchState
- )
+ withSearchProvider(<GenerativeAIToggle />, defaultSearchState)
  )
  );
 

components/Search/GenerativeAIToggle.tsx

@@ -43,7 +43,7 @@ export default function GenerativeAIToggle() {
 
  return (
  <>
- <GenerativeAIToggleWrapper>
+ <GenerativeAIToggleWrapper data-testid="generative-ai-toggle">
  <CheckboxRootStyled
  checked={isChecked}
  id="isGenerativeAI"

components/Search/Search.test.tsx

@@ -8,16 +8,6 @@ import userEvent from "@testing-library/user-event";
 
 const mockIsSearchActive = jest.fn();
 
-jest.mock("./GenerativeAIToggle", () => {
- return function DummyGenerativeAIToggle(props: any) {
- return (
- <div data-testid="generative-ai-toggle">
- {props.isSearchActive.toString()}
- </div>
- );
- };
-});
-
 describe("Search component", () => {
  it("renders the search ui component", () => {
  render(<Search isSearchActive={() => ({})} />);
@@ -73,17 +63,9 @@ describe("Search component", () => {
  });
  });
 
- it("renders the generative ai toggle component and correctly passes active search state down", async () => {
- const user = userEvent.setup();
- mockRouter.setCurrentUrl("/search");
-
+ it("renders the generative ai toggle component", async () => {
  render(<Search isSearchActive={mockIsSearchActive} />);
- const wrapper = await screen.findByTestId("generative-ai-toggle");
-
- expect(wrapper).toHaveTextContent("false");
-
- await user.type(screen.getByRole("search"), "foo");
- expect(wrapper).toHaveTextContent("true");
+ expect(screen.getByTestId("generative-ai-toggle")).toBeInTheDocument();
  });
 
  it("renders standard placeholder text for non AI search", () => {

components/Search/TextArea.tsx

@@ -21,31 +21,34 @@ interface SearchTextAreaProps {
 }
 
 const SearchTextArea = forwardRef<HTMLTextAreaElement, SearchTextAreaProps>(
- ({
- isAi,
- isFocused,
- searchValue,
- handleSearchChange,
- handleSearchFocus,
- handleSubmit,
- clearSearchResults,
- }) => {
- const textareaRef = useRef<HTMLTextAreaElement>(null);
-
+ (
+ {
+ isAi,
+ isFocused,
+ searchValue,
+ handleSearchChange,
+ handleSearchFocus,
+ handleSubmit,
+ clearSearchResults,
+ },
+ textareaRef
+ ) => {
  /**
  * Resize the textarea to fit its content
  */
  useEffect(() => {
- const textarea = textareaRef.current;
+ // @ts-ignore
+ const textarea = textareaRef?.current;
  if (textarea) {
- console.log(textarea);
  textarea.style.height = `${textarea.scrollHeight}px`;
  }
  }, [searchValue, isFocused]);
 
  const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
  handleSearchChange(e);
- const textarea = textareaRef.current;
+
+ // @ts-ignore
+ const textarea = textareaRef?.current;
  if (textarea) {
  textarea.style.height = `${textarea.scrollHeight}px`;
  }

jest.setup.js

@@ -10,3 +10,22 @@ jest.mock("next/dynamic", () => () => {
 });
 
 jest.mock("next/router", () => require("next-router-mock"));
+
+// Mock implementation of ResizeObserver
+class ResizeObserver {
+ constructor(callback) {
+ this.callback = callback;
+ }
+ observe() {
+ // Optionally, you can implement mock behavior for observe if needed
+ }
+ unobserve() {
+ // Optionally, you can implement mock behavior for unobserve if needed
+ }
+ disconnect() {
+ // Optionally, you can implement mock behavior for disconnect if needed
+ }
+}
+
+// Assign the mock ResizeObserver to the global window object
+global.ResizeObserver = ResizeObserver;